问卷

src/views/question/part/tiku.vue

@@ -80,28 +80,28 @@ export default {
   props: {},
   components: {},
   data: () => ({
-    list: [],
-    total: 0,
-    dialogFormVisible: false,
+    list: [], //列表
+    total: 0, //总数
+    dialogFormVisible: false, //控制dialog是否显示
     form: {
       option: [],
-    },
-    type: null,
+    }, //表单
+    type: null, //选择的类型
     typeoptions: [
       { value: '0', label: '单选' },
       { value: '1', label: '多选' },
       { value: '2', label: '问答' },
-    ],
-    status: null,
+    ], //类型选择数组
+    status: null, //选择的状态
     statusoptions: [
       { value: '0', label: '弃用' },
       { value: '1', label: '正常' },
-    ],
+    ], //状态选择数组
     rules: {
       type: { required: true, message: '类型不能为空', trigger: 'blur' },
       topic: { required: true, message: '题目不能为空', trigger: 'blur' },
       status: { required: true, message: '状态不能为空', trigger: 'blur' },
-    },
+    }, //表单验证规则
   }),
   created() {
     this.search();
@@ -109,24 +109,28 @@ export default {
   computed: {},
   methods: {
     ...question(['create', 'query', 'update', 'delete']),
+    //查询列表
     async search({ skip = 0, limit = 10, ...info } = {}) {
       info = { type: this.type, status: this.status };
       const list = await this.query({ skip, limit, ...info });
       this.$set(this, `list`, list.data);
       this.$set(this, `total`, list.total);
     },
+    //查看详情
     detailBtn(item) {
-      console.log(item);
       this.$set(this, `form`, item);
       this.dialogFormVisible = true;
     },
+    //删除
     async deleteBtn(id) {
       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() {
       let index = 0;
       for (const option of this.form.option) {
@@ -144,20 +148,24 @@ export default {
         this.search();
       }
     },
+    //删除选项
     removeDomain(item) {
       var index = this.form.option.indexOf(item);
       if (index !== -1) {
         this.form.option.splice(index, 1);
       }
     },
+    //新增选项
     addDomain() {
       this.form.option.push({
         opname: '',
       });
     },
+    //根据index生成选项number
     sortNumber(index) {
       return String.fromCharCode(65 + index);
     },
+    //添加
     add() {
       this.dialogFormVisible = true;
       this.form = { status: '1', option: [] };

src/views/question/part/wenjuan.vue

@@ -1,19 +1,81 @@
 <template>
   <div id="wenjuan">
-    <p>wenjuan</p>
+    <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="topic" 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-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import { createNamespacedHelpers, mapState } from 'vuex';
+const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
 export default {
   name: 'wenjuan',
   props: {},
   components: {},
-  data: () => ({}),
+  data: () => ({
+    list: [], //列表
+    total: 0, //总数
+    status: null, //选择的状态
+    statusoptions: [
+      { value: '0', label: '草稿' },
+      { value: '1', label: '发布' },
+      { value: '2', label: '弃用' },
+    ], //状态选择数组
+  }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    ...questionnaire(['create', 'query', 'update', 'delete']),
+    //查询列表
+    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);
+    },
+    detailBtn() {},
+    async deleteBtn() {
+      let res = await this.delete(id);
+      if (res.errcode == 0) this.search();
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.add {
+  margin: 0 0 10px 0;
+}
+.add .el-button:last-child {
+  float: right;
+}
+</style>