web-live/src/views/questionnaire/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-row>
              <el-col :span="24" class="info">
                <el-col :span="24" class="title">
                  {{ question.title }}
                </el-col>
                <el-col :span="24" class="brief">
                  {{ question.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 question.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>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
const { mapActions: answer } = createNamespacedHelpers('answer');
export default {
  name: 'detail',
  props: {},
  components: {},
  data: function() {
    return {
      question: {},
      answer: {},
      disabled: false,
      userForm: {},
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...questionnaire(['fetch']),
    ...answer(['create', 'findAnswer']),
    async search() {
      const res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        const { questions } = res.data;
        for (let i = 0; i < questions.length; i++) {
          const e = questions[i];
          const { select, type } = e;
          if (type === '1') {
            this.answer[i] = [];
          }
        }
        this.$set(this, `question`, res.data);
      }
      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.question.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.question.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');
      }
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    id() {
      return this.$route.query.id;
    },
  },
  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>