新增问卷列表页

src/store/index.js

@@ -1,14 +1,9 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import questionnaire from './questionnaire';
-import question from './question';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  modules: {
-    questionnaire,
-    question,
-  },
+  modules: {},
   state: {},
   mutations: {},
   actions: {},

src/store/question.js

@@ -1,38 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import _ from 'lodash';
-Vue.use(Vuex);
-const api = {
-  questionInfo: `/api/train/question`,
-};
-const state = () => ({});
-const mutations = {};
-
-const actions = {
-  async query({ commit }, { skip = 0, limit, ...info } = {}) {
-    const res = await this.$axios.$get(`${api.questionInfo}`, { skip, limit, ...info });
-    return res;
-  },
-  async create({ commit }, payload) {
-    const res = await this.$axios.$post(`${api.questionInfo}`, payload);
-    return res;
-  },
-  async fetch({ commit }, payload) {
-    const res = await this.$axios.$get(`${api.questionInfo}/${payload}`);
-    return res;
-  },
-  async update({ commit }, { id, ...data }) {
-    const res = await this.$axios.$post(`${api.questionInfo}/update/${id}`, data);
-    return res;
-  },
-  async delete({ commit }, payload) {
-    const res = await this.$axios.$delete(`${api.questionInfo}/${payload}`);
-    return res;
-  },
-};
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions,
-};

src/store/questionnaire.js

@@ -1,38 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import _ from 'lodash';
-Vue.use(Vuex);
-const api = {
-  questionnaireInfo: `/api/train/questionnaire`,
-};
-const state = () => ({});
-const mutations = {};
-
-const actions = {
-  async query({ commit }, { skip = 0, limit, ...info } = {}) {
-    const res = await this.$axios.$get(`${api.questionnaireInfo}`, { skip, limit, ...info });
-    return res;
-  },
-  async create({ commit }, payload) {
-    const res = await this.$axios.$post(`${api.questionnaireInfo}`, payload);
-    return res;
-  },
-  async fetch({ commit }, payload) {
-    const res = await this.$axios.$get(`${api.questionnaireInfo}/${payload}`);
-    return res;
-  },
-  async update({ commit }, { id, ...data }) {
-    const res = await this.$axios.$post(`${api.questionnaireInfo}/update/${id}`, data);
-    return res;
-  },
-  async delete({ commit }, payload) {
-    const res = await this.$axios.$delete(`${api.questionnaireInfo}/${payload}`);
-    return res;
-  },
-};
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions,
-};

src/views/index.vue

@@ -1,78 +1,38 @@
 <template>
   <div id="index">
-    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
-      <el-row>
-        <el-col :span="24" class="text_auto">{{ info.name }}</el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24" class="text_left" v-for="(item, index) in info.question" :key="index">
-          {{ item.type }}
+    <el-row>
+      <el-col :span="24">
+        <el-col class="text_left" :span="24" v-for="(item, index) in questionnaireList" :key="index">
+          <van-cell is-link @click.native="$router.push({ path: '/question/question', query: { id: item.id } })">{{ item.name }} </van-cell>
         </el-col>
-        <el-col :span="24" class="text_center">456</el-col>
-      </el-row>
-    </el-form>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import { createNamespacedHelpers, mapGetters } from 'vuex';
-const { mapActions: mapQuestion } = createNamespacedHelpers('questionnaire');
 export default {
   name: 'index',
-  props: {},
+  props: {
+    info: null,
+    questionnaireList: null,
+  },
   components: {},
   data: () => ({
-    info: {
-      name: '2020年疫情发展问卷调查',
-      num: '1',
-      question: [],
+    form: {
+      checkList: [],
     },
   }),
-  created() {
-    this.searchInfo();
-  },
+  created() {},
   computed: {},
-  methods: {
-    ...mapQuestion(['query', 'fetch']),
-    async searchInfo({ ...info } = {}) {
-      const res = await this.query({ ...info });
-      console.log(res.data);
-      // this.$set(this, `leaveList`, res.data);
-    },
-    // let result;
-    // for (const val of result.data) {
-    //   console.log(val);
-    //   for (const res of val.question) {
-    //     console.log(id);
-    //     this.$set(this, `question`, res.data);
-    //   }
-    // }
-  },
+  methods: {},
 };
 </script>
-
 <style lang="less" scoped>
-.text_auto {
-  width: 100%;
-  // height: 50px;
-  line-height: 50px;
-  position: relative;
-  text-align: center;
-  border-bottom: 1px dashed #333;
-}
-
 .text_left {
   width: 100%;
-  // height: 50px;
   line-height: 50px;
-  position: relative;
-  padding-left: 25px;
+  padding: 20px 20px;
   color: blue;
 }
-.text_center {
-  width: 100%;
-  line-height: 10px;
-  position: relative;
-  padding-left: 50px;
-}
 </style>

src/views/question.vue

@@ -0,0 +1,92 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-row class="row_auto">
+            <el-col :span="24" class="text_auto">{{ info.name }}</el-col>
+          </el-row>
+          <el-row class="row_auto">
+            <el-col :span="24" class="text_left" v-for="(item, index) in info.question" :key="index">
+              <!-- 题目 -->
+              <el-col :span="24"> {{ index + 1 }} . {{ item.topic }} </el-col>
+              <!-- 选项需判断所属类型，然后循环选项加入标签即可 -->
+              <el-col :span="24" class="text_center" v-if="item.type === '0'">
+                <el-col :span="24" class="text_left" v-for="(items, index) in item.option" :key="index">
+                  <el-radio v-model="form.radio" :label="items.opname">{{ items.opname }}</el-radio>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="text_center" v-if="item.type === '1'">
+                <el-col :span="24" class="text_left" v-for="(items, index) in item.option" :key="index">
+                  <el-checkbox-group v-model="form.checkList">
+                    <el-checkbox :label="items.opname">{{ items.opname }}</el-checkbox>
+                  </el-checkbox-group>
+                </el-col>
+              </el-col>
+              <el-col :span="24" v-if="item.type === '2'">
+                <el-input type="textarea" placeholder="请输入内容" v-model="form.answer" :autosize="{ minRows: 4, maxRows: 6 }" maxlength="300" show-word-limit>
+                </el-input>
+              </el-col>
+            </el-col>
+            <el-col :span="24"><el-button type="primary" @click="onSubmit">提交</el-button></el-col>
+          </el-row>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  props: {
+    info: null,
+    form: null,
+  },
+  components: {},
+  data: () => ({
+    text: '',
+    textarea: '',
+
+    radio: '',
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    onSubmit() {
+      this.$emit('submit', { data: this.form });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.text_auto {
+  width: 100%;
+  // height: 50px;
+  line-height: 50px;
+  position: relative;
+  text-align: center;
+  border-bottom: 1px dashed #333;
+}
+
+.text_left {
+  width: 100%;
+  line-height: 50px;
+  position: relative;
+  // padding-left: 25px;
+  color: blue;
+}
+.text_center {
+  width: 100%;
+  line-height: 25px;
+  padding-left: 20px;
+  color: black;
+  background: #f7f7f7;
+}
+.row_auto {
+  padding: 0 20px;
+}
+button {
+  width: 335px;
+}
+</style>