train-center/src/views/train-plan/experience.vue

<template>
  <div id="experience">
    <list-frame title="培训心得" @query="search" :total="total" :needFilter="false" :needAdd="false" :needPag="true">
      <el-form size="small" :inline="true">
        <el-form-item label="班级">
          <el-select v-model="searchInfo.classid" placeholder="请选择班级">
            <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>
      <export-range @getStudent="toGetStudent" :studentList="studentList" @toExport="toExport"></export-range>
      <data-table :fields="fields" :data="list" :opera="opera" @view="toView" @delete="toDelete"></data-table>
    </list-frame>
    <el-dialog :visible.sync="dialog" title="培训心得" @close="toClose" width="30%">
      <data-form :data="form" :fields="formFields" :rules="{}" :needSave="false">
        <template #custom="{item, form}">
          <template v-if="item.model === 'content'">
            <el-input type="textarea" v-model="form[item.model]" :readonly="true" :autosize="{ minRows: 4, maxRows: 20 }"></el-input>
          </template>
        </template>
      </data-form>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash';
import exportRange from '@/components/export-range.vue';
import listFrame from '@frame/layout/admin/list-frame';
import dataForm from '@frame/components/form';
import dataTable from '@frame/components/data-table';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: experience } = createNamespacedHelpers('experience');
const { mapActions: classes } = createNamespacedHelpers('classes');
const { mapActions: trainplan } = createNamespacedHelpers('trainplan');
const { mapActions: student } = createNamespacedHelpers('student');
export default {
  metaInfo: { title: '培训心得' },
  name: 'experience',
  props: {},
  components: {
    listFrame,
    dataTable,
    dataForm,
    exportRange,
  },
  data: () => ({
    opera: [
      {
        label: '查看',
        icon: 'el-icon-view',
        method: 'view',
      },
      {
        label: '删除',
        icon: 'el-icon-delete',
        method: 'delete',
      },
    ],
    fields: [
      { label: '姓名', prop: 'stuname' },
      { label: '职务', prop: 'stujob' },
    ],
    list: [],
    classList: [],
    studentList: [],
    searchInfo: {},
    total: 0,
    dialog: false,
    form: {},
    formFields: [
      { label: '姓名', model: 'stuname', type: 'text' },
      { label: '职务', model: 'stujob', type: 'text' },
      { label: '培训心得标题', model: 'title', type: 'text' },
      { label: '培训心得', model: 'content', custom: true },
    ],
  }),
  async created() {
    await this.getOtherList();
  },
  computed: { ...mapState(['user', 'defaultOption']) },
  methods: {
    ...classes({ getClass: 'query' }),
    ...student({ getStudent: 'query' }),
    ...experience(['query', 'export']),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      this.$set(this, `total`, 0);
      const res = await this.query({ ...this.searchInfo, skip, limit });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    async getOtherList() {
      const { termid } = this.defaultOption;
      if (!termid) return;
      const res = await this.getClass({ termid });
      if (this.$checkRes(res)) {
        let duplicate = _.cloneDeep(res.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 toGetStudent(classid) {
      const bzres = await this.getStudent({ classid, job: '班长' });
      const xwres = await this.getStudent({ classid, job: '学委' });
      let arr = [];
      if (this.$checkRes(bzres)) arr = [...arr, ...bzres.data];
      if (this.$checkRes(xwres)) arr = [...arr, ...xwres.data];
      this.$set(this, `studentList`, arr);
    },
    async toExport(data) {
      const res = await this.export(data);
      if (this.$checkRes(res, '导出成功', res.errmsg || '导出失败')) {
        window.open(res.data);
      }
    },
    // 查看
    toView({ data }) {
      this.$set(this, `form`, data);
      this.dialog = true;
    },
    // 删除
    toDelete({ data }) {
      console.log(data);
    },
    // 保存
    turnSave({ data }) {},
    // 关闭
    toClose() {
      this.form = {};
      this.dialog = false;
    },
  },
  watch: {
    defaultOption: {
      deep: true,
      handler(val, oval) {
        this.getOtherList();
      },
    },
    searchInfo: {
      deep: true,
      handler(val) {
        if (val) {
          const keys = Object.keys(val);
          if (keys.length > 0) this.search();
        }
      },
    },
  },
};
</script>

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