train-school/src/views/new-plan/index.vue

<template>
  <div id="index">
    <list-frame :title="pageTitle" @query="search" :total="total" :needFilter="false" :needAdd="false">
      <data-table :fields="fields" :data="list" :opera="opera" @edit="toEdit" @arrange="toArrange"></data-table>
    </list-frame>
    <el-dialog title="上报可行日期" width="30%" :visible.sync="dialog" center :destroy-on-close="true" @close="handleClose">
      <data-form :data="info" :fields="Ffields" :rules="rules" @save="handleSave" :isNew="!info.id" :styles="{ padding: 0 }" labelWidth="80px" :reset="false">
        <template #custom="{item,form}">
          <template v-if="item.model == 'daterange'">
            <el-checkbox-group v-model="form[item.model]">
              <el-checkbox v-for="i in 12" :key="i" :label="`${i}`" :disabled="inRange(i)">{{ i }}月</el-checkbox>
            </el-checkbox-group>
          </template>
        </template>
      </data-form>
    </el-dialog>
  </div>
</template>

<script>
var moment = require('moment');
// moment.locale('zh-cn');
import _ from 'lodash';
import Vue from 'vue';
import listFrame from '@frame/layout/admin/list-frame';
import dataTable from '@frame/components/data-table';
import dataForm from '@frame/components/form';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: trainplan } = createNamespacedHelpers('trainplan');
const { mapActions: schPlan } = createNamespacedHelpers('schPlan');
export default {
  name: 'index',
  props: {},
  components: { listFrame, dataTable, dataForm },
  data: () => {
    return {
      dialog: false,
      opera: [
        {
          label: '上报可行日期',
          icon: 'el-icon-date',
          method: 'edit',
        },
        {
          label: '查看计划安排',
          icon: 'el-icon-document',
          method: 'arrange',
        },
      ],
      fields: [
        { label: '年度', prop: 'year' },
        { label: '标题', prop: 'title' },
      ],
      info: { daterange: [] },
      form: {},
      Ffields: [
        { label: '年度', model: 'year', type: 'text' },
        { label: '标题', model: 'title', type: 'text' },
        { label: '时间范围', model: 'planrange', type: 'text' },
        { label: '请假日期', model: 'daterange', custom: true },
      ],
      rules: {},
      list: [],
      total: 0,
      startmonth: 1,
      endmonth: 12,
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...trainplan(['query', 'create', 'delete', 'update']),
    ...schPlan({ schPlanQuery: 'query', createSchPlan: 'create', updateSchPlan: 'update' }),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      info = { planyearid: this.defaultOption.planyearid };
      const res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    async toEdit({ data }) {
      let res = await this.schPlanQuery({ planid: data.id, schid: _.get(this.user, 'code') });
      let { year, id, title, termnum } = data;
      let plan = { schid: this.user.code, year, planid: id, title, daterange: [] };
      this.$set(this, `info`, plan);
      if (this.$checkRes(res)) {
        if (res.data.length > 0) this.$set(this, `info`, { ...res.data[0], title });
      }
      if (termnum) {
        let mid = termnum.map(i => i.batchnum).flat();
        let start = _.get(_.head(_.orderBy(mid, 'startdate', 'asc')), 'startdate');
        let end = _.get(_.head(_.orderBy(mid, 'enddate', 'desc')), 'enddate');
        let planrange = `${start} 至 ${end}`;
        this.$set(this, `info`, { ...this.info, planrange });
        let sm = moment(start).month() + 1;
        let em = moment(end).month() + 1;
        this.$set(this, `startmonth`, sm);
        this.$set(this, `endmonth`, em);
      }
      this.dialog = true;
    },
    async handleSave({ data, isNew }) {
      let res;
      let msg;
      let duplicate = JSON.parse(JSON.stringify(data));
      if (isNew) {
        //create
        res = await this.createSchPlan(duplicate);
        msg = '添加成功';
      } else {
        //update
        res = await this.updateSchPlan(duplicate);
        msg = '修改成功';
      }
      if (this.$checkRes(res, msg, res.errmsg || '操作失败')) {
        this.handleClose();
      }
    },
    handleClose() {
      this.dialog = false;
      this.info = { daterange: [] };
      this.$set(this, `startmonth`, 1);
      this.$set(this, `endmonth`, 12);
    },
    toSort() {
      this.info.daterange.sort((a, b) => a - b);
    },
    toArrange({ data }) {
      this.$router.push({ path: './detail', query: { id: data.id } });
    },
    inRange(val) {
      return !_.inRange(val, this.startmonth, this.endmonth + 1);
    },
  },
  computed: {
    ...mapState(['user', 'defaultOption']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>