问卷回显

src/views/question/part/wenjuan.vue

@@ -12,7 +12,7 @@
         <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="topic" label="问卷名称" show-overflow-tooltip> </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>
@@ -29,6 +29,60 @@
         <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>
@@ -37,6 +91,7 @@
 <script>
 import { createNamespacedHelpers, mapState } from 'vuex';
 const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
+const { mapActions: question } = createNamespacedHelpers('question');
 export default {
   name: 'wenjuan',
   props: {},
@@ -48,25 +103,107 @@ export default {
     statusoptions: [
       { value: '0', label: '草稿' },
       { value: '1', label: '发布' },
-      { value: '2', 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() {},
+  created() {
+    this.search();
+    this.searchQuestion();
+  },
   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 });
-      this.$set(this, `list`, list.data);
-      this.$set(this, `total`, list.total);
+      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.$nextTick(function() {
+        item.question.forEach(row => {
+          //this.multipleSelection.push(row);
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      });
+      console.log(this.multipleSelection);
     },
-    detailBtn() {},
+    //删除
     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 = 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.multipleSelection = [];
+    },
+    //选中问题时触发
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    //题库分页
+    questionChange(val) {
+      this.searchQuestion({ skip: (val - 1) * 10, limit: val * 10 });
+    },
+    getRowKey(row) {
+      console.log(row);
+
+      return row._id;
+    },
   },
 };
 </script>
@@ -78,4 +215,7 @@ export default {
 .add .el-button:last-child {
   float: right;
 }
+/deep/.el-dialog {
+  width: 70%;
+}
 </style>