frame/components/export-range.vue

<template>
  <div id="experience-export">
    <!-- <el-button type="primary" size="small" @click="dialog = true">导出</el-button> -->
    <!-- <el-dialog title="请选择要导出的范围" width="30%" :visible.sync="dialog" center @close="toClose"> -->
    <el-form size="small">
      <el-form-item label="年度计划" v-if="useplan">
        <el-select clearable v-model="form.planid" @change="toGetTerm">
          <el-option v-for="(i, index) in planList" :key="index" :label="i.title" :value="i._id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="期(可选)" v-if="useterm">
        <el-select clearable v-model="form.termid" :multiple="mult" @change="selectTerm">
          <el-option v-for="(i, index) in termList" :key="index" :label="`第${i.term}期`" :value="i._id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="批(可选)" v-if="usebatch">
        <el-select clearable v-model="form.batchid" :multiple="mult">
          <el-option v-for="(i, index) in batchList" :key="index" :label="i.name" :value="i._id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班(可选)" v-if="useclass">
        <el-select clearable v-model="form.classid" :multiple="mult" @change="selectClass">
          <el-option v-for="(c, index) in classList" :key="index" :label="c.name" :value="c._id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="人(可选)" v-if="usestudent">
        <el-select clearable v-model="form.studentid">
          <el-option v-for="(i, index) in studentList" :key="index" :label="`${i.name}(${i.job})`" :value="i._id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <slot></slot>

    <el-row type="flex" justify="space-around" class="btn_bar">
      <el-col :span="2">
        <el-button type="primary" size="small" @click="toExport">导出</el-button>
      </el-col>
    </el-row>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: experience } = createNamespacedHelpers('experience');
const { mapActions: classes } = createNamespacedHelpers('classes');
const { mapActions: trainplan } = createNamespacedHelpers('trainplan');
export default {
  name: 'experience-export',
  props: {
    studentList: { type: Array, default: () => [] },
    useplan: { type: Boolean, default: true },
    useterm: { type: Boolean, default: true },
    usebatch: { type: Boolean, default: true },
    useclass: { type: Boolean, default: true },
    usestudent: { type: Boolean, default: true },
    mult: { type: Boolean, default: true },
  },
  components: {},
  data: function() {
    return {
      form: {},
      planList: [],
      termList: [],
      batchList: [],
      classList: [],
    };
  },
  async created() {
    await this.toGetPlan();
  },
  methods: {
    ...experience(['export']),
    ...trainplan({ getPlan: 'query' }),
    ...classes({ getClass: 'query' }),
    // 查询年度计划
    async toGetPlan() {
      const res = await this.getPlan();
      if (this.$checkRes(res)) this.$set(this, `planList`, res.data);
    },
    // 找到期列表
    async toGetTerm(planid) {
      const res = await this.planList.find(f => f._id === planid);
      if (!res) return;
      const { termnum } = res;
      this.$set(this, `termList`, termnum);
    },
    // 找到批次列表,查询班级列表
    async selectTerm(termids = []) {
      let termid;
      // 只要选了期,就重置后面的选项
      this.$set(this.form, `classid`, undefined);
      this.$set(this.form, `batchid`, undefined);
      // 多选单选分开处理
      if (this.mult) {
        if (termids.length >= 1) {
          // 再将选择的期下的批次提取出来,将名字改成带期数的.以便区分
          const batchList = [];
          const classList = [];
          for (const tid of termids) {
            // 找期下的批次
            const r = this.termList.find(f => f._id === tid);
            if (!r) continue;
            const { batchnum = [], term } = r;
            for (const i of batchnum) {
              // 处理批次选项
              i.name = `第${term}期-第${i.batch}批`;
              batchList.push(i);
              // 处理班级选项
              const cRes = await this.getClass({ termid: tid, batchid: i._id });
              if (this.$checkRes(cRes)) {
                const cl = cRes.data;
                for (const c of cl) {
                  c.name = `第${c.term}期-第${c.batch}批-${c.name}班`;
                }
                classList.push(...cl);
              }
            }
          }
          // 批次列表
          this.$set(this, `batchList`, batchList);
          // 班级列表
          this.$set(this, `classList`, classList);
        }
      } else {
        termid = termids;
        // 正常找期下的批次,班级
        const r = this.termList.find(f => f._id === termid);
        if (!r) return;
        const { batchnum } = r;
        const nbn = batchnum.map(i => {
          i.name = `第${r.term}期-第${i.batch}批`;
          return i;
        });
        this.$set(this, `batchList`, nbn);
        const stures = await this.getClass({ termid });
        if (this.$checkRes(stures)) {
          const cl = stures.data;
          for (const c of cl) {
            c.name = `第${c.term}期-第${c.batch}批-${c.name}班`;
          }
          this.$set(this, `classList`, cl);
        }
      }
    },
    async selectClass(classid) {
      this.$emit('getStudent', classid);
    },
    //导出
    async toExport() {
      let dup = _.cloneDeep(this.form);
      const keys = Object.keys(dup);
      let obj = {};
      for (const key of keys) {
        if (dup[key] && dup[key] !== '') obj[key] = dup[key];
      }
      this.$emit('toExport', obj);
      this.toClose();
    },
    toClose() {
      this.$set(this, `form`, {});
      this.$emit('close');
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

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