|
@@ -3,98 +3,38 @@
|
|
|
<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 :span="24" class="info">
|
|
|
+ <el-form :model="form" :rules="rules" ref="form">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-col :span="24" class="title">
|
|
|
+ {{ data.title }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="brief">
|
|
|
+ {{ data.brief }}
|
|
|
+ </el-col>
|
|
|
</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 :span="24" class="two">
|
|
|
+ <el-col :span="24" class="common">
|
|
|
+ <el-col :span="24" class="txt">
|
|
|
+ <span>答卷企业</span>
|
|
|
</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 :span="24" class="info">
|
|
|
+ <one :form="form" :rules="rules"></one>
|
|
|
</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="24" class="common">
|
|
|
+ <el-col :span="24" class="txt">
|
|
|
+ <span>问卷详情</span>
|
|
|
</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 :span="24" class="info">
|
|
|
+ <two :form="form" :rules="rules"></two>
|
|
|
</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>
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
+ <el-button type="primary" size="mini" @click="onSubmit">提交</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
</el-col>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -103,120 +43,72 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+const fields = require('./fields');
|
|
|
+import one from './parts/one.vue';
|
|
|
+import two from './parts/two.vue';
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
-const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
|
|
|
const { mapActions: answer } = createNamespacedHelpers('answer');
|
|
|
-const _ = require('lodash');
|
|
|
+const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
|
|
|
export default {
|
|
|
name: 'detail',
|
|
|
props: {},
|
|
|
- components: {},
|
|
|
+ components: {
|
|
|
+ one,
|
|
|
+ two,
|
|
|
+ },
|
|
|
data: function() {
|
|
|
return {
|
|
|
data: {},
|
|
|
- answer: {},
|
|
|
- disabled: false,
|
|
|
- userForm: {},
|
|
|
+ form: {},
|
|
|
+ rules: {},
|
|
|
};
|
|
|
},
|
|
|
- async created() {
|
|
|
- if (this.id) await this.search();
|
|
|
- await this.init();
|
|
|
+ created() {
|
|
|
+ if (this.id) this.search();
|
|
|
},
|
|
|
methods: {
|
|
|
+ ...answer(['create']),
|
|
|
...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] = [];
|
|
|
- }
|
|
|
+ async onSubmit() {
|
|
|
+ let data = this.form;
|
|
|
+ const { company, address, attribute, category, contacts, phone, create_user, ...others } = data;
|
|
|
+ const obj = { company, address, attribute, category, contacts, phone, questionnaire_id: this.id, create_user };
|
|
|
+ const fields = this.setFields();
|
|
|
+ const arr = [];
|
|
|
+ const keys = Object.keys(others);
|
|
|
+ for (const key of keys) {
|
|
|
+ const label = fields[key];
|
|
|
+ const answer = others[key];
|
|
|
+ arr.push({ label, answer });
|
|
|
}
|
|
|
- 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);
|
|
|
- }
|
|
|
+ obj.answer = arr;
|
|
|
+ const res = await this.create(obj);
|
|
|
+ if (this.$checkRes(res, '提交成功', '提交失败')) {
|
|
|
+ this.$router.push({ path: '/twoweb/service/question' });
|
|
|
}
|
|
|
},
|
|
|
- // 因为层级过深(只要不是在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;
|
|
|
+ setFields() {
|
|
|
+ const fkeys = Object.keys(fields);
|
|
|
+ let object = [];
|
|
|
+ for (const key of fkeys) {
|
|
|
+ const narr = fields[key];
|
|
|
+ for (const obj of narr) {
|
|
|
+ if (!obj.children) {
|
|
|
+ object[obj.model] = obj.label;
|
|
|
+ } else {
|
|
|
+ for (const child of obj.children) {
|
|
|
+ object[child.model] = child.label;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- 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 } });
|
|
|
- // }
|
|
|
+ return object;
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
@@ -241,11 +133,11 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
.main {
|
|
|
padding: 10px 0;
|
|
|
- .one {
|
|
|
- margin: 0 0 10px 0;
|
|
|
- .info {
|
|
|
+ .info {
|
|
|
+ .one {
|
|
|
border-bottom: 1px dashed #ccc;
|
|
|
padding: 0 20px;
|
|
|
+ margin: 0 0 22px 0;
|
|
|
.title {
|
|
|
font-size: 30px;
|
|
|
font-weight: bold;
|
|
@@ -257,24 +149,33 @@ export default {
|
|
|
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;
|
|
|
+ .two {
|
|
|
+ .common {
|
|
|
+ position: relative;
|
|
|
+ border: 1px solid #41719c;
|
|
|
+ margin: 0 0 35px 0;
|
|
|
+ min-height: 150px;
|
|
|
+ .txt {
|
|
|
+ position: absolute;
|
|
|
+ top: -22px;
|
|
|
+ text-align: center;
|
|
|
+ span {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 35px;
|
|
|
+ background: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ padding: 20px 10px 10px 10px;
|
|
|
}
|
|
|
}
|
|
|
+ .btn {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|