train-center/src/views/questionnaire/detail.vue

<template>
  <div id="detail">
    <detail-frame :title="mainTitle" returns="./index">
      <el-form ref="infoForm" :model="info" label-width="120px" :rules="rules" size="small" @submit.native.prevent
               style="background:#fff;padding:50px">
        <el-form-item label="序号" required prop="num">
          <el-input v-model="info.num"></el-input>
        </el-form-item>
        <el-form-item label="标题" required prop="name">
          <el-input v-model="info.name"></el-input>
        </el-form-item>
        <el-form-item label="问卷类型" required prop="type">
          <el-radio-group v-model="info.type">
            <el-radio label="0">常用问卷</el-radio>
            <el-radio label="1">非常用问卷</el-radio>
            <el-radio label="2">教师问卷</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" required prop="type">
          <el-radio-group v-model="info.status">
            <el-radio label="0" v-if="isNew == true">草稿</el-radio>
            <el-radio label="1">发布</el-radio>
            <el-radio label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题目" prop="question">
          <el-row>
            <el-col :span="24" style="text-align:right;padding-bottom:10px">
              <el-button type="primary" size="mini" @click="addQuestion()" v-if="isNew == true">添加题目</el-button>
            </el-col>
            <el-col :span="24">
              <el-table :data="info.question" border stripe size="mini">
                <el-table-column align="center" label="标题" prop="topic"></el-table-column>
                <!-- :formatter="codeDisplay" -->
                <el-table-column align="center" label="类型" prop="type" :formatter="typeFormat"></el-table-column>
                <el-table-column align="center" label="操作">
                  <template v-slot="{ row, $index }">
                    <el-tooltip effect="dark" content="删除" placement="bottom">
                      <el-button type="text" size="mini" icon="el-icon-delete"
                                 @click="toCdelete(row, $index)"></el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="6">
              <el-button type="primary" @click="handleSave">保&nbsp;&nbsp;&nbsp;&nbsp;存</el-button>
            </el-col>
            <el-col :span="6">
              <el-button @click="$refs.infoForm.resetFields()">重&nbsp;&nbsp;&nbsp;&nbsp;置</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </detail-frame>
    <el-dialog :visible.sync="dialog" title="题库" center>
      <el-row>
        <el-col :span="24" style="text-align:center;padding-bottom:20px">已选择{{ this.info.question.length }}道题</el-col>
        <el-col :span="24">
          <el-table v-loading="qProp.loading" ref="selectTable" :data="qList" @select="handleSelect"
                    @select-all="handleSelectAll" border stripe size="mini" :height="350" row-key="id">
            <el-table-column type="selection" align="center" width="55" :reserve-selection="true"> </el-table-column>
            <el-table-column label="题目" align="center" prop="topic"></el-table-column>
            <el-table-column label="类型" align="center" prop="type" :formatter="typeFormat"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="2" style="padding-top:20px">
          <el-button type="primary" plain size="mini" @click="dialog = false">关&nbsp;&nbsp;&nbsp;&nbsp;闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import detailFrame from '@frame/layout/admin/detail-frame';
import { createNamespacedHelpers } from 'vuex';
import _ from 'lodash';
const { mapActions } = createNamespacedHelpers('questionnaire');
const { mapActions: mapQuestion } = createNamespacedHelpers('question');

export default {
  metaInfo: { title: '问卷详情页' },
  name: 'detail',
  props: {},
  components: {
    detailFrame,
  },
  data: () => ({
    info: { question: [] },
    dialog: true,
    loading: true,
    rules: {
      num: [{ required: true, message: '请输入序号' }],
      name: [{ required: true, message: '请输入标题' }],
      type: [{ required: true, message: '请选择问卷类型' }],
      // question: [{ required: true, message: '请选择题目' }],
    },
    qList: [], //题库
    qProp: {
      loading: true,
      page: 1,
      total: 0,
      pageSize: 5,
    },
  }),
  async created() {
    this.dialog = false;
    await this.getOtherList();
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    isNew() {
      return this.$route.query.id ? false : true;
    },
    mainTitle() {
      let meta = this.$route.meta;
      let main = meta.title || '';
      let sub = meta.sub || '';
      return `${main}${sub}`;
    },
    keyWord() {
      let meta = this.$route.meta;
      let main = meta.title || '';
      return main;
    },
  },
  watch: {
    isNew: {
      immediate: true,
      handler(val) {
        if (val) this.loading = false;
        else this.search();
      },
    },
  },
  methods: {
    ...mapActions(['fetch', 'create', 'update']),
    ...mapQuestion({ qQuery: 'query' }),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        console.log(res.data);

        this.$set(this, `info`, res.data);
        //需要将code中的id转换为题目重新放进列表中
        //需要过滤出已选择的题目,每次选择题目时也需要过滤
      }
      this.loading = false;
    },
    // 分页
    pagChange(size = this.qProp.pageSize, page = this.qProp.page) {
      this.qProp.pageSize = size;
      this.qProp.page = page;
      let skip = (this.qProp.page - 1) * this.qProp.pageSize;
      this.getOtherList({ skip, limit: size });
    },
    // 分页
    async getOtherList() {
      this.qProp.loading = true;
      const res = await this.qQuery();
      if (this.$checkRes(res)) {
        this.$set(this, `qList`, res.data);
        this.$set(this.qProp, `total`, res.total);
      }
      this.qProp.loading = false;
    },
    //打开添加题目dialog
    addQuestion() {
      this.dialog = true;
      this.$nextTick(() => {
        this.setNewTableSelect();
      });
    },
    toCdelete(row, index) {
      this.info.question.splice(index, 1);
      this.setNewTableSelect();
    },
    // 刷新选择题库的表格选择状态
    setNewTableSelect() {
      this.$refs.selectTable.clearSelection();
      if (this.info.question.length > 0) {
        for (const item of this.info.question) {
          let res = this.qList.filter(fil => fil.id === item.id);
          if (res.length > 0) this.$refs.selectTable.toggleRowSelection(res[0]);
        }
      }
    },
    // 题库操作
    handleSelect(selection, row) {
      if (selection.length > 0) {
        let data = this.info.question.concat(selection);
        data = _.unionBy(data, 'id');
        this.$set(this.info, `question`, data);
      } else {
        this.$set(this.info, `question`, []);
      }
    },
    //全选
    handleSelectAll(selection) {
      let data = this.info.question.concat(selection);
      data = _.unionBy(data, 'id');
      this.$set(this.info, `question`, selection);
    },
    //提交操作
    handleSave() {
      this.$refs['infoForm'].validate(valid => {
        if (valid) {
          this.toSave();
        } else {
          console.warn('form validate error!!!');
        }
      });
    },
    async toSave() {
      let res;
      let msg;
      let data = JSON.parse(JSON.stringify(this.info));
      let ids = data.question.map(item => item.id || item._id);
      data.question = ids;
      if (this.isNew) {
        res = await this.create(data);
        msg = `${this.keyWord}添加成功`;
      } else {
        res = await this.update(data);
        msg = `${this.keyWord}修改成功`;
      }
      if (this.$checkRes(res, msg)) this.$router.push({ path: '/questionnaire/index' });
    },
    // format转换
    codeDisplay(row, column, cellValue, index) {
      let cell = '';
      let prop = column.property;
      let res = this.qList.filter(fil => fil.id === row);
      if (res.length > 0) {
        if (prop === 'type') cell = this.typeFormat(null, null, _.get(res[0], prop, ''));
        else cell = _.get(res[0], prop, '');
      }
      return cell;
    },
    typeFormat(row, column, cellValue, index) {
      return cellValue === '0' ? '单选' : cellValue === '1' ? '多选' : '简答';
    },
  },
};
</script>

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