frame/layout/admin/navBar/default-select.vue

<template>
  <div id="default-select">
    <el-row type="flex" align="middle" justify="start" class="user-menu" v-loading="loading">
      <el-col :span="15" v-if="options">
        当前默认:
        <span>
          <el-tooltip :disabled="this.user.type != 0" content="点击更改默认批次" effect="dark" placement="bottom">
            <el-select
              v-model="options.planyearid"
              :disabled="this.user.type != 0"
              placeholder="未设置培训批次"
              size="mini"
              @change="data => changeList('plan', data)"
            >
              <el-option v-for="(i, index) in planYearList" :key="index" :label="i.title" :value="i._id"></el-option>
            </el-select>
          </el-tooltip>
        </span>
        <span>
          <el-tooltip :disabled="this.user.type != 0" content="点击更改默认年度计划" effect="dark" placement="bottom">
            <el-select v-model="options.planid" :disabled="this.user.type != 0" placeholder="未设置年度计划" size="mini" @change="getTermList">
              <el-option v-for="(i, index) in planList" :key="index" :label="i.title" :value="i._id"></el-option>
            </el-select>
          </el-tooltip>
        </span>
        <span>
          <el-tooltip content="点击更改默认期" effect="dark" placement="bottom">
            <el-select v-model="options.termid" placeholder="未设置默认期" size="mini" @change="toCheckUserType()">
              <el-option v-for="(i, index) in termList" :key="index" :label="`第${i.term}期`" :value="i._id"></el-option>
            </el-select>
          </el-tooltip>
        </span>
        <span v-if="user.type == 1 || user.type == 3">
          <el-tooltip content="选择要查看的班级" effect="dark" placement="bottom">
            <el-select v-model="options.classid" placeholder="选择要查看的班级" size="mini" @change="setVuexOpt()">
              <el-option v-for="(i, index) in classList" :key="index" :label="i.name" :value="i._id"></el-option>
            </el-select>
          </el-tooltip>
        </span>
        <span>
          <el-button type="text" size="mini" @click="settingSave" v-if="this.user.type == 0">保存默认值</el-button>
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
const { mapActions: trainBatch } = createNamespacedHelpers('trainBatch');
const { mapActions: trainplan } = createNamespacedHelpers('trainplan');
const { mapActions: setting } = createNamespacedHelpers('setting');
const { mapActions: classes } = createNamespacedHelpers('classes');
const { mapActions: lesson } = createNamespacedHelpers('lesson');
export default {
  name: 'default-select',
  props: {},
  components: {},
  data: function() {
    return {
      loading: true,
      options: undefined,
      planYearList: [],
      planList: [],
      termList: [],
      classList: [],
    };
  },
  async created() {
    // this.$set(this, `options`, _.cloneDeep(this.defaultOption));
    this.search({ type: 'planYear' });
    // this.checkOption();
    // if (this.user.type == 1 || this.user.type == 3) this.getClassOption();
    // this.loading = false;
  },
  methods: {
    ...mapMutations(['deleteUser', 'changeOpt']),
    ...trainBatch({ getplanYear: 'query' }),
    ...trainplan({ getplan: 'query' }),
    ...setting({ sFetch: 'fetch', sUpdate: 'update' }),
    ...classes({ getClassList: 'query' }), //仅供班主任使用
    ...lesson({ teaclass: 'teaclass' }), //仅供老师使用
    checkOption() {
      console.log(_.cloneDeep(this.options));
      if (_.get(this.options, 'planid')) {
        this.search({ type: 'plan', planyearid: _.get(this.options, 'planyearid') });
      }
      this.loading = false;
    },
    async search({ type, ...info }) {
      let res = await _.get(this, `get${type}`)({ ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `${type}List`, res.data);
        if (type == 'plan') {
          let planid = _.get(this.options, 'planid');
          this.getTermList(planid);
        } else if (type == 'planYear') {
          // this.checkOption();
        }
      }
    },
    async changeList(type, data) {
      let obj = { type };
      let res;
      this.toClear();
      this.setVuexOpt();
      if (type == 'plan') {
        obj[`planyearid`] = data;
        await this.search(obj);
      }
    },
    getTermList(planid) {
      let r = this.planList.find(f => f.id == planid);
      if (r) {
        let term = _.get(r, 'termnum', []);
        this.$set(this, `termList`, term);
      }
      this.setVuexOpt();
    },
    //为了处理班主任的班级列表,先复制,再看看是不是需要查询班级列表
    toCheckUserType() {
      this.setVuexOpt();
      this.options.classid = undefined;
      if (this.user.type == 1 || this.user.type == 3) this.getClassOption();
    },
    setVuexOpt() {
      this.changeOpt(this.options);
    },
    toClear() {
      let planid = _.get(this.options, 'planid');
      if (planid) {
        let res = this.planList.find(f => f.id == planid);
        if (!res) this.$set(this.options, 'planid', undefined);
      }
      let termid = _.get(this.options, 'termid');
      if (termid) {
        let res = this.planList.find(f => f.id == planid);
        if (!res) this.$set(this.options, 'termid', undefined);
      }
    },
    async settingSave() {
      let res = await this.sUpdate(this.options);
      this.$checkRes(res, '设置成功', res.errmsg);
    },
    //班主任使用,默认班级
    async getClassOption() {
      let termid = _.get(this.defaultOption, 'termid');
      let planid = _.get(this.defaultOption, 'planid');
      if (!termid) return;
      let res;
      if (this.user.type == 1) {
        res = await this.getClassList({ termid: this.defaultOption.termid, headteacherid: this.user.userid });
        if (this.$checkRes(res)) this.$set(this, `classList`, res.data);
      }
      if (this.user.type == 3) {
        res = await this.teaclass({ planid: planid, teaid: this.user.userid });
        const elm = res.data.filter(item => item.termid == termid);
        this.$set(this, `classList`, elm);
      }
    },
  },
  watch: {
    defaultOption: {
      handler(val) {
        if (val) {
          let opt = _.get(this, `options`);
          if (!opt) this.$set(this, `options`, _.cloneDeep(val));
        }
      },
      immediate: true,
      deep: true,
    },
    options: {
      immediate: true,
      deep: true,
      handler(val, oval) {
        if (!_.isEqual(val, oval) && val) this.checkOption();
      },
    },
  },
  computed: {
    ...mapState(['user', 'defaultOption']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.user-menu {
  height: 4rem;
  .el-col {
    margin-left: 10px;
    span {
      margin-left: 10px;
    }
  }
}
</style>