update

src/components/list/list-model/model-5.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="model-5">
-    <el-col :span="24" class="infoLeftList" v-for="(item, index) in list" :key="index" @click.native="clickDetail(item)">
+    <el-col :span="24" class="infoLeftList" v-for="(item, index) in list" :key="index" @click.native="clickDetail(item.id)">
       <el-col :span="20" class="title textOver">
         {{ item.p1 }}
       </el-col>
@@ -25,10 +25,9 @@ export default {
   },
   created() {},
   methods: {
-    clickDetail(data) {
+    clickDetail(id) {
       // TODO:打开指定详情
-      if (!data.custom) this.$router.push({ path: './list', query: { index: this.index, id: data.id } });
-      else this.$emit('detail', data);
+      this.$router.push({ path: './list', query: { index: this.index, id } });
     },
   },
   computed: {

src/views/questionnaire/detail.vue

@@ -78,7 +78,6 @@ export default {
     return {
       question: {},
       answer: {},
-      test: [],
       disabled: false,
       userForm: {},
     };

src/views/techolchat/index.vue

@@ -145,14 +145,6 @@ export default {
         this.$set(this, `questionnaireList`, res.data);
       }
     },
-
-    toLimit(data) {
-      if (data.length < 2) {
-        data = [...data, data[0]];
-        return this.toLimit(data);
-      }
-      return data;
-    },
     async searchOther() {
       let res = await this.columnQuery();
       if (this.$checkRes(res)) this.$set(this, `columnList`, res.data);

src/views/techolchat/list.vue

@@ -43,7 +43,7 @@ export default {
       menuList: [
         { name: '调研调查' },
         { name: '项目征集', component: 'question', options: { useTab: false, useSearch: false, listModel: 5 }, indent: 1 },
-        { name: '问卷调查', component: 'questionnaire', options: { useTab: false, useSearch: false, listModel: 5 }, indent: 1, custom: true },
+        { name: '问卷调查', component: 'questionnaire', options: { useTab: false, useSearch: false, listModel: 5 }, indent: 1 },
         { name: '行业研究', component: 'work', options: { useTab: false, useSearch: false, listModel: 6 } },
         // { name: '科技服务', options: { useTab: false, useSearch: false, listModel: 2 } },
       ],

src/views/techolchat/list/detail-model/questionnaire-model.vue

@@ -0,0 +1,218 @@
+<template>
+  <div id="questionnaire-model">
+    <el-row type="flex" justify="end">
+      <el-col :span="2">
+        <slot></slot>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-row>
+            <el-col :span="24" class="info">
+              <el-col :span="24" class="title">
+                {{ data.title }}
+              </el-col>
+              <el-col :span="24" class="brief">
+                {{ data.brief }}
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="form">
+              <el-form :model="answer" label-position="top" ref="form">
+                <el-form-item v-if="!user || !user.id" label="您是否注册成为平台用户">
+                  <el-radio-group v-model="userForm.user">
+                    <el-radio :label="true">是</el-radio>
+                    <el-radio :label="false">否</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item v-if="userForm.user" label="手机号">
+                  <el-input v-model="userForm.phone" placeholder="请填写手机号"></el-input>
+                </el-form-item>
+                <!-- 0单选,1多选,2简答 -->
+                <template v-for="(i, index) in data.questions">
+                  <el-form-item
+                    v-if="i.type === '0'"
+                    :prop="`${index}`"
+                    :key="`question${index}`"
+                    :label="`${index + 1}.${i.title}`"
+                    :rules="[{ required: true, message: '请选择一个选项', trigger: 'blur' }]"
+                  >
+                    <el-radio-group v-model="answer[index]" :disabled="disabled">
+                      <el-radio v-for="(s, si) in i.selects" :key="`s_${index}_${si}`" :label="s.name">{{ s.num }}.{{ s.name }}</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                  <el-form-item
+                    v-else-if="i.type === '1'"
+                    :prop="`${index}`"
+                    :key="`question${index}`"
+                    :label="`${index + 1}.${i.title}`"
+                    :rules="[{ required: true, message: '请至少选择一个选项', trigger: 'blur' }]"
+                  >
+                    <el-checkbox-group :value="answer[index]" @input="data => toCheck(data, index)" :disabled="disabled">
+                      <el-checkbox v-for="(s, si) in i.selects" :key="`c_${index}_${si}`" :label="s.name">{{ s.num }}.{{ s.name }}</el-checkbox>
+                    </el-checkbox-group>
+                  </el-form-item>
+                  <el-form-item v-else :key="`question${index}`" :label="`${index + 1}.${i.title}`">
+                    <el-input v-model="answer[index]" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" :readonly="disabled"></el-input>
+                  </el-form-item>
+                </template>
+              </el-form>
+            </el-col>
+
+            <el-col :span="24" style="text-align:center">
+              <el-button type="primary" @click="toSubmit" v-if="!disabled">提交</el-button>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const _ = require('lodash');
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: answer } = createNamespacedHelpers('answer');
+export default {
+  name: 'questionnaire-model',
+  props: {
+    data: { type: Object, required: true },
+  },
+  components: {},
+  data: function() {
+    return {
+      answer: {},
+      disabled: false,
+      userForm: {},
+    };
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    ...answer(['create', 'findAnswer']),
+    async init() {
+      console.log('in function:');
+      const { questions } = this.data;
+      if (!(_.isArray(questions) && questions.length > 0)) return;
+      for (let i = 0; i < questions.length; i++) {
+        const e = questions[i];
+        const { type } = e;
+        if (type === '1') {
+          this.answer[i] = [];
+        }
+      }
+      this.getAnswer();
+    },
+    async getAnswer() {
+      if (!this.user || !this.user.id) return;
+      const res = await this.findAnswer({ user_id: this.user.id, questionnaire_id: this.id });
+      if (this.$checkRes(res)) {
+        if (res.data) {
+          this.disabled = true;
+          // 还原数据
+          const { answer } = res.data;
+          const questions = this.data.questions;
+          const reply = {};
+          for (const i of answer) {
+            const { answer: a, quest } = i;
+            const r = questions.findIndex(f => f.title === quest);
+            if (r > -1) reply[r] = a;
+          }
+          this.$set(this, 'answer', reply);
+        }
+      }
+    },
+    // 因为层级过深(只要不是在this下,就属于过深),所以需要手动更新视图
+    toCheck(data, model) {
+      this.answer[model] = data;
+      this.$forceUpdate();
+    },
+    async toSubmit() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    async submit() {
+      let dup = _.cloneDeep(this.answer);
+      const keys = Object.keys(dup);
+      const questions = this.data.questions;
+      const answer = [];
+      for (const i of keys) {
+        const a = dup[i];
+        const quest = questions[i];
+        if (a && quest) {
+          const obj = { answer: a, quest: quest.title };
+          answer.push(obj);
+        }
+      }
+      const data = {
+        questionnaire_id: this.id,
+        answer,
+      };
+      if (this.user && this.user.id) {
+        data.user_id = this.user.id;
+      } else {
+        const userForm = this.userForm;
+        if (userForm.user) data.phone = userForm.phone;
+      }
+      const res = await this.create(data);
+      if (this.$checkRes(res, '提交成功', '提交失败')) {
+        // 返回列表
+        // this.$router.push('/questionnaire/index');
+        // TODO返回
+        this.$router.push({ path: './list', query: { index: this.$route.query.index } });
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user', 'menuParams']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 15px 0;
+  .one {
+    margin: 0 0 10px 0;
+    .info {
+      border-bottom: 1px dashed #ccc;
+      padding: 0 20px;
+      .title {
+        font-size: 30px;
+        font-weight: bold;
+        margin: 20px 0;
+        text-align: center;
+      }
+      .brief {
+        font-size: 16px;
+        padding: 0 0 20px 0;
+      }
+    }
+    .form {
+      padding: 20px 0;
+      /deep/.el-form-item {
+        margin-bottom: 5px;
+      }
+      /deep/.el-form-item__label {
+        padding: 0 0;
+        font-weight: bold;
+        color: #000;
+        font-size: 16px;
+      }
+    }
+  }
+}
+</style>

src/views/techolchat/list/questionnaire.vue

@@ -1,11 +1,11 @@
 <template>
   <div id="questionnaire">
     <list-page v-bind="$attrs" :total="total" v-if="!id" @toSearch="search" :pageSize="pageSize">
-      <component :is="model" :list="list" @detail="searchInfo"></component>
+      <component :is="model" :list="list"></component>
     </list-page>
     <template v-else>
-      <dmodel :displayBtn="true" :data="detail" v-if="detail">
-        <el-button size="mini" type="primary" @click="$router.push({ path: './list', query: { index: $route.query.index } })"> 返回</el-button>
+      <dmodel :displayBtn="true" :data="detail" v-if="detail" :key="Math.random().toString(36)">
+        <el-button size="mini" type="primary" @click="backToList"> 返回</el-button>
       </dmodel>
     </template>
   </div>
@@ -23,13 +23,13 @@ export default {
     listPage,
     model5: () => import('@c/list/list-model/model-5.vue'),
     // 没用,详情跳走了
-    dmodel: () => import('./detail-model/model-1.vue'),
+    dmodel: () => import('./detail-model/questionnaire-model.vue'),
   },
   data: function() {
     return {
       list: [],
       total: 0,
-      detail: {},
+      detail: undefined,
       // 栏目信息
       column: {},
       pageSize: 5,
@@ -60,14 +60,20 @@ export default {
         obj.p3 = _.get(i, 'brief');
         obj.p3title = '简介';
         // 点击事件自定义
-        obj.custom = true;
         return obj;
       });
       return list;
     },
     // 查询详情
     async searchInfo(data) {
-      this.$router.push({ path: '/questionnaire/answer', query: { id: data.id } });
+      let res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `detail`, res.data);
+      }
+    },
+    backToList() {
+      this.detail = {};
+      this.$router.push({ path: './list', query: { index: this.$route.query.index } });
     },
   },
   computed: {