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 @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">
          <el-option v-for="(i, index) in batchList" :key="index" :label="`第${i.batch}批`" :value="i._id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班(可选)" v-if="useclass">
        <el-select clearable v-model="form.classid" @change="selectClass">
          <el-option v-for="(c, index) in classList" :key="index" :label="`${c.name.includes('班') ? c.name : `${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 },
  },
  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 = []) {
      if (termids.length != 1) {
        this.$set(this.form, `classid`, undefined);
        this.$set(this.form, `batchid`, undefined);
        return;
      }
      const termid = _.head(termids);
      const r = this.termList.find(f => f._id === termid);
      if (!r) return;
      const { batchnum } = r;
      this.$set(this, `batchList`, batchnum);
      const stures = await this.getClass({ termid });
      if (this.$checkRes(stures)) {
        let duplicate = _.cloneDeep(stures.data);
        duplicate = duplicate.map(i => {
          if (parseInt(i.name)) {
            i.order = parseInt(i.name);
          } else {
            // i.order = i.name;
          }
          return i;
        });
        duplicate = _.orderBy(duplicate, ['order'], ['asc']);
        this.$set(this, `classList`, duplicate);
      }
    },
    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>