live-cms/src/views/question/part/wenjuan.vue

<template>
  <div id="wenjuan">
    <el-row>
      <el-col :span="24">
        <el-col class="add" :span="24">
          <el-select v-model="status" placeholder="请选择问卷状态">
            <el-option v-for="item in statusoptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <el-button size="mini" type="primary" @click="search" style="margin-left:10px;">查询</el-button>
          <el-button size="mini" type="primary" @click="add">添加</el-button>
        </el-col>
        <el-col :span="24"
          ><el-table :data="list" border style="width: 100%">
            <el-table-column prop="num" label="序号"> </el-table-column>
            <el-table-column prop="name" label="问卷名称" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <span>{{ scope.row.status == '0' ? '草稿' : scope.row.status == '1' ? '发布' : scope.row.status == '2' ? '弃用' : '未识别' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="detailBtn(scope.row)">查看</el-button>
                <el-button size="mini" @click="deleteBtn(scope.row.id)" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24" class="page">
          <el-pagination background layout="prev, pager, next,total" :total="total" @current-change="handleCurrentChange"> </el-pagination>
        </el-col>
        <el-dialog title="添加问卷" :visible.sync="dialogFormVisible">
          <el-form size="mini" :model="form" ref="form" label-width="100px" class="demo-dynamic" :rules="rules">
            <el-form-item prop="status" label="状态">
              <el-radio-group v-model="form.status">
                <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 prop="num" label="序号">
              <el-input v-model="form.num"></el-input>
            </el-form-item>
            <el-form-item prop="name" label="问卷名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-col :span="24" style="margin: 0 0 10px 0;">
              <el-select v-model="qtype" placeholder="请选择题目类型">
                <el-option v-for="item in qtypeoptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
              <el-select v-model="qstatus" placeholder="请选择题目状态">
                <el-option v-for="item in qstatusoptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
              <el-button size="mini" type="primary" @click="searchQuestion" style="margin-left:10px;">查询</el-button>
            </el-col>
            <el-table
              :row-key="getRowKey"
              ref="multipleTable"
              :data="questions"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column prop="_id" type="selection" width="55" :reserve-selection="true"> </el-table-column>
              <el-table-column prop="type" label="类型">
                <template slot-scope="scope">
                  <span>{{ scope.row.type == '0' ? '单选' : scope.row.type == '1' ? '多选' : scope.row.type == '2' ? '问答' : '未识别' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="topic" label="题目"> </el-table-column>
              <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                  <span>{{ scope.row.status == '0' ? '弃用' : scope.row.status == '1' ? '正常' : '未识别' }}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-col :span="24" class="page">
              <el-pagination background layout="prev, pager, next,total" :total="questiontotal" @current-change="questionChange"> </el-pagination>
            </el-col>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitFrom">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex';
const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
const { mapActions: question } = createNamespacedHelpers('question');
export default {
  name: 'wenjuan',
  props: {},
  components: {},
  data: () => ({
    list: [], //列表
    total: 0, //总数
    status: null, //选择的状态
    statusoptions: [
      { value: '0', label: '草稿' },
      { value: '1', label: '发布' },
      { value: '2', label: '停用' },
    ], //状态选择数组
    dialogFormVisible: false, //控制dialog是否显示
    form: {},
    questions: [], //问题数组
    questiontotal: 0, //问题总数
    multipleSelection: [], //选择的问题数组
    qtype: null, //选择的问题类型
    qtypeoptions: [
      { value: '0', label: '单选' },
      { value: '1', label: '多选' },
      { value: '2', label: '问答' },
    ], //问题类型选择数组
    qstatus: null, //选择的问题状态
    qstatusoptions: [
      { value: '0', label: '弃用' },
      { value: '1', label: '正常' },
    ], //问题状态选择数组
    rules: {
      name: { required: true, message: '问卷名称不能为空', trigger: 'blur' },
      num: { required: true, message: '序号不能为空', trigger: 'blur' },
      status: { required: true, message: '状态不能为空', trigger: 'blur' },
    }, //表单验证规则
  }),
  created() {
    this.search();
  },
  computed: {},
  methods: {
    ...questionnaire(['create', 'query', 'update', 'delete']),
    ...question({ questionQuery: 'query' }),
    //查询问卷列表
    async search({ skip = 0, limit = 10, ...info } = {}) {
      info = { status: this.status };
      const list = await this.query({ skip, limit, ...info });
      if (list.errcode == '0') {
        this.$set(this, `list`, list.data);
        this.$set(this, `total`, list.total);
      }
    },
    //查询题库列表
    async searchQuestion({ skip = 0, limit = 10, ...info } = {}) {
      info = { type: this.qtype, status: this.qstatus };
      const list = await this.questionQuery({ skip, limit, ...info });
      if (list.errcode == '0') {
        this.$set(this, `questions`, list.data);
        this.$set(this, `questiontotal`, list.total);
      }
    },
    // 查看详情
    async detailBtn(item) {
      this.dialogFormVisible = true;
      this.form = item;
      this.searchQuestion();
      this.$nextTick(function() {
        item.question.forEach(row => {
          let r = this.questions.find(f => f._id == row._id);
          //this.multipleSelection.push(row);
          this.$refs.multipleTable.toggleRowSelection(r);
        });
      });
      console.log(this.multipleSelection);
    },
    //删除
    async deleteBtn() {
      let res = await this.delete(id);
      if (res.errcode == 0) this.search();
    },
    //问卷分页
    handleCurrentChange(val) {
      this.search({ skip: (val - 1) * 10, limit: val * 10 });
    },
    //提交问卷
    async submitFrom() {
      this.form.question = this.multipleSelection;
      let res;
      if (this.form.id) res = await this.update(this.form);
      else res = await this.create(this.form);
      if (res.errcode == '0') {
        this.dialogFormVisible = false;
        this.search();
      }
    },
    //添加问卷
    add() {
      this.dialogFormVisible = true;
      this.qstatus = null;
      this.qtype = null;
      this.form = {};
      this.searchQuestion();
      this.multipleSelection = [];
    },
    //选中问题时触发
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //题库分页
    questionChange(val) {
      this.searchQuestion({ skip: (val - 1) * 10, limit: val * 10 });
    },
    getRowKey(row) {
      return row._id;
    },
  },
};
</script>

<style lang="less" scoped>
.add {
  margin: 0 0 10px 0;
}
.add .el-button:last-child {
  float: right;
}
/deep/.el-dialog {
  width: 70%;
}
</style>