|
|
@@ -0,0 +1,281 @@
|
|
|
+<template>
|
|
|
+ <div id="detail">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <div class="w_1200">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <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-col :span="24" class="one">
|
|
|
+ <el-col :span="24" class="userOther">
|
|
|
+ <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-col>
|
|
|
+ <el-col :span="24" class="userOther">
|
|
|
+ <el-form-item label="企业名称">
|
|
|
+ <el-input v-model="userForm.company" placeholder="请填写企业名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="userOther">
|
|
|
+ <el-form-item label="联系地址">
|
|
|
+ <el-input v-model="userForm.address" placeholder="请填写联系地址"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="userOther">
|
|
|
+ <el-form-item label="企业属性">
|
|
|
+ <el-radio-group v-model="userForm.attribute">
|
|
|
+ <el-radio label="外资"></el-radio>
|
|
|
+ <el-radio label="中外合资"></el-radio>
|
|
|
+ <el-radio label="民营"></el-radio>
|
|
|
+ <el-radio label="股份制"></el-radio>
|
|
|
+ <el-radio label="其它"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="userOther">
|
|
|
+ <el-form-item label="主营产品类别">
|
|
|
+ <el-input v-model="userForm.category" placeholder="请填写主营产品类别"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="userOther">
|
|
|
+ <el-form-item label="联系人">
|
|
|
+ <el-input v-model="userForm.contacts" placeholder="请填写联系人"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="userOther">
|
|
|
+ <el-form-item label="联系电话">
|
|
|
+ <el-input v-model="userForm.phone" placeholder="请填写联系电话"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two">
|
|
|
+ <!-- 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-col>
|
|
|
+ </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-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
|
|
|
+const { mapActions: answer } = createNamespacedHelpers('answer');
|
|
|
+const _ = require('lodash');
|
|
|
+export default {
|
|
|
+ name: 'detail',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ data: {},
|
|
|
+ answer: {},
|
|
|
+ disabled: false,
|
|
|
+ userForm: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ if (this.id) await this.search();
|
|
|
+ await this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...questionnaire(['fetch']),
|
|
|
+ ...answer(['create', 'findAnswer']),
|
|
|
+ async search() {
|
|
|
+ let res = await this.fetch(this.id);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `data`, res.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async init() {
|
|
|
+ const { questions } = this.data;
|
|
|
+ if (!(_.isArray(questions) && questions.length > 0)) return;
|
|
|
+ console.log('in function:');
|
|
|
+ for (let i = 1; i <= questions.length - 1; 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.company = userForm.company;
|
|
|
+ data.address = userForm.address;
|
|
|
+ data.attribute = userForm.attribute;
|
|
|
+ data.category = userForm.category;
|
|
|
+ data.contacts = userForm.contacts;
|
|
|
+ data.phone = userForm.phone;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(data);
|
|
|
+ // const res = await this.create(data);
|
|
|
+ // if (this.$checkRes(res, '提交成功', '提交失败')) {
|
|
|
+ // // 返回列表
|
|
|
+ // // this.$router.push('/questionnaire/index');
|
|
|
+ // // TODO返回
|
|
|
+ // this.$router.push({ path: '/twoweb/service/question', query: { index: this.$route.query.index } });
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ id() {
|
|
|
+ return this.$route.query.id;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ test: {
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ handler(val) {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.main {
|
|
|
+ padding: 10px 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;
|
|
|
+ }
|
|
|
+ .one {
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ padding: 0 0 15px 0;
|
|
|
+ .userOther {
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
