|  |  | 
 |  |  | <template> | 
 |  |  |     <GlobalWindow | 
 |  |  |             :title="title" | 
 |  |  |             :visible.sync="visible" | 
 |  |  |             :confirm-working="isWorking" | 
 |  |  |             @confirm="confirm" | 
 |  |  |         :title="title" | 
 |  |  |         :visible.sync="visible" | 
 |  |  |         :confirm-working="isWorking" | 
 |  |  |         @confirm="confirm" | 
 |  |  |     > | 
 |  |  |         <el-form :model="form" ref="form" :rules="rules"> | 
 |  |  |             <el-form-item label="题目" prop="title"> | 
 |  |  |                 <el-input v-model="form.title" placeholder="请输入题目" v-trim/> | 
 |  |  |             </el-form-item> | 
 |  |  |             <el-form-item label="题目类型" prop="type"> | 
 |  |  |                 <el-select v-model="form.type" placeholder="请选择"> | 
 |  |  |                     <el-option label="判断" value="0"></el-option> | 
 |  |  |                     <el-option label="单选" value="1"></el-option> | 
 |  |  |                     <el-option label="多选" value="2"></el-option> | 
 |  |  |                 <el-select v-model="form.type" @change="changeType" placeholder="请选择"> | 
 |  |  |                     <el-option label="判断" :value="0"></el-option> | 
 |  |  |                     <el-option label="单选" :value="1"></el-option> | 
 |  |  |                     <el-option label="多选" :value="2"></el-option> | 
 |  |  |                 </el-select> | 
 |  |  |             </el-form-item> | 
 |  |  |             <el-form-item label="适用用户" prop="useType"> | 
 |  |  |                 <el-radio-group v-model="form.useType"> | 
 |  |  |                     <el-radio :label="0">劳务人员</el-radio> | 
 |  |  |                     <el-radio :label="1">普通访客</el-radio> | 
 |  |  |                     <el-radio :label="0">访客和劳务</el-radio> | 
 |  |  |                     <el-radio :label="1">仅访客</el-radio> | 
 |  |  |                     <el-radio :label="2">仅劳务</el-radio> | 
 |  |  |                 </el-radio-group> | 
 |  |  |             </el-form-item> | 
 |  |  |             <el-form-item label="题目顺序(升序)" prop="sortnu"> | 
 |  |  |                 <el-input v-model="form.sortnu" placeholder="请输入" v-trim/> | 
 |  |  |             <el-form-item label="分值" prop="score"> | 
 |  |  |                 <el-input v-model="form.score" type="number" placeholder="请输入" v-trim/> | 
 |  |  |             </el-form-item> | 
 |  |  |             <el-form-item label="选项集合" prop="options" v-if="form.type === '1' || form.type === '2'"> | 
 |  |  |             <el-form-item label="题目顺序(升序)" prop="sortnu"> | 
 |  |  |                 <el-input v-model="form.sortnu" type="number" placeholder="请输入" v-trim/> | 
 |  |  |             </el-form-item> | 
 |  |  |             <el-form-item label="选项集合" prop="objectList" v-if="form.type === 1 || form.type === 2"> | 
 |  |  |                 <el-button type="primary" style="width: 120px; margin-bottom: 15px;" @click="add" icon="el-icon-plus">添加选项</el-button> | 
 |  |  |                 <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"> | 
 |  |  |                     <el-tab-pane | 
 |  |  |                         v-for="item in problems" | 
 |  |  |                         :key="item.name" | 
 |  |  |                         :label="item.name" | 
 |  |  |                         v-for="item in form.objectList" | 
 |  |  |                         :key="item.code" | 
 |  |  |                         :label="item.sort" | 
 |  |  |                         :name="item.id" | 
 |  |  |                     > | 
 |  |  |                         <el-input v-model="item.val" placeholder="请输入" v-trim/> | 
 |  |  |                         <el-input v-model="item.value" placeholder="请输入" v-trim/> | 
 |  |  |                     </el-tab-pane> | 
 |  |  |                 </el-tabs> | 
 |  |  |             </el-form-item> | 
 |  |  |             <el-form-item label="正确答案" prop="answer"> | 
 |  |  |                 <el-select v-model="form.answer" multiple placeholder="请选择正确答案"> | 
 |  |  |                 <el-select v-model="form.answer" v-if="form.type === 0" placeholder="请选择正确答案"> | 
 |  |  |                     <el-option label="正确" value="正确"></el-option> | 
 |  |  |                     <el-option label="错误" value="错误"></el-option> | 
 |  |  |                 </el-select> | 
 |  |  |                 <el-select v-model="form.answer" v-if="form.type === 1" placeholder="请选择正确答案"> | 
 |  |  |                     <el-option | 
 |  |  |                         v-for="item in problems" | 
 |  |  |                         v-for="item in form.objectList" | 
 |  |  |                         :key="item.id" | 
 |  |  |                         :label="item.name" | 
 |  |  |                         :value="item.id"> | 
 |  |  |                         :label="item.sort" | 
 |  |  |                         :value="item.code"> | 
 |  |  |                     </el-option> | 
 |  |  |                 </el-select> | 
 |  |  |                 <el-select v-model="form.answer" v-if="form.type === 2" multiple placeholder="请选择正确答案"> | 
 |  |  |                     <el-option | 
 |  |  |                     v-for="item in form.objectList" | 
 |  |  |                     :key="item.id" | 
 |  |  |                     :label="item.sort" | 
 |  |  |                     :value="item.code"> | 
 |  |  |                     </el-option> | 
 |  |  |                 </el-select> | 
 |  |  |             </el-form-item> | 
 |  |  | 
 |  |  |       form: { | 
 |  |  |         id: null, | 
 |  |  |         title: '', | 
 |  |  |         options: '', | 
 |  |  |         objectList: [ | 
 |  |  |           { code: 'A', value: '', sort: '选项A', id: '0' } | 
 |  |  |         ], | 
 |  |  |         answer: '', | 
 |  |  |         sortnu: '', | 
 |  |  |         type: '', | 
 |  |  |         useType: '' | 
 |  |  |         type: 0, | 
 |  |  |         scroe:null, | 
 |  |  |         useType: 0 | 
 |  |  |       }, | 
 |  |  |       // 验证规则 | 
 |  |  |       rules: { | 
 |  |  |         title: [ | 
 |  |  |           { required: true, message: '请输入题目名称' } | 
 |  |  |         ], | 
 |  |  |         type: [ | 
 |  |  |           { required: true, message: '请选择题目类型' } | 
 |  |  |         ], | 
 |  |  |         useType: [ | 
 |  |  |           { required: true, message: '请选择适用用户' } | 
 |  |  |         ], | 
 |  |  |         answer: [ | 
 |  |  |           { required: true, message: '请选择正确答案' } | 
 |  |  |         ] | 
 |  |  |       }, | 
 |  |  |       editableTabsValue: '0', | 
 |  |  |       problems: [ | 
 |  |  |         { name: '选择A', val: '', id: '0' } | 
 |  |  |       ], | 
 |  |  |       arr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'] | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  | 
 |  |  |     }) | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     open (title, target) { | 
 |  |  |       this.title = title | 
 |  |  |       this.editableTabsValue = '0' | 
 |  |  |       this.visible = true | 
 |  |  |       // 新建 | 
 |  |  |       if (target == null) { | 
 |  |  |         this.$nextTick(() => { | 
 |  |  |           this.$refs.form.resetFields() | 
 |  |  |           this.form[this.configData['field.id']] = null | 
 |  |  |         }) | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       // 编辑 | 
 |  |  |       this.$nextTick(() => { | 
 |  |  |         for (const key in this.form) { | 
 |  |  |           this.form[key] = target[key] | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     confirm () { | 
 |  |  |       this.$refs.form.validate((valid) => { | 
 |  |  |         if (!valid) { | 
 |  |  |           return | 
 |  |  |         } | 
 |  |  |         // 调用新建接口 | 
 |  |  |         this.isWorking = true | 
 |  |  |         if (this.form.id == null || this.form.id === '') { | 
 |  |  |           this.api.create({ | 
 |  |  |             // eslint-disable-next-line valid-typeof | 
 |  |  |             answer: typeof this.form.answer === 'object' ? this.form.answer.join(',') : this.form.answer, | 
 |  |  |             title: this.form.title, | 
 |  |  |             sortnu: this.form.sortnu, | 
 |  |  |             type: this.form.type, | 
 |  |  |             useType: this.form.useType, | 
 |  |  |             score: this.form.score, | 
 |  |  |             objectList: this.form.objectList | 
 |  |  |           }) | 
 |  |  |             .then(() => { | 
 |  |  |               this.visible = false | 
 |  |  |               this.$tip.apiSuccess('新建成功') | 
 |  |  |               this.$emit('success') | 
 |  |  |             }) | 
 |  |  |             .catch(e => { | 
 |  |  |               // this.$tip.apiFailed(e) | 
 |  |  |             }) | 
 |  |  |             .finally(() => { | 
 |  |  |               this.isWorking = false | 
 |  |  |             }) | 
 |  |  |         } else { | 
 |  |  |           this.api.updateById({ | 
 |  |  |             id: this.form.id, | 
 |  |  |             // eslint-disable-next-line valid-typeof | 
 |  |  |             answer: typeof this.form.answer === 'object' ? this.form.answer.join(',') : this.form.answer, | 
 |  |  |             title: this.form.title, | 
 |  |  |             sortnu: this.form.sortnu, | 
 |  |  |             type: this.form.type, | 
 |  |  |             useType: this.form.useType, | 
 |  |  |             score: this.form.score, | 
 |  |  |             objectList: this.form.objectList | 
 |  |  |           }) | 
 |  |  |             .then(() => { | 
 |  |  |               this.visible = false | 
 |  |  |               this.$tip.apiSuccess('修改成功') | 
 |  |  |               this.$emit('success') | 
 |  |  |             }) | 
 |  |  |             .catch(e => { | 
 |  |  |              //  this.$tip.apiFailed(e) | 
 |  |  |             }) | 
 |  |  |             .finally(() => { | 
 |  |  |               this.isWorking = false | 
 |  |  |             }) | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     changeType (e) { | 
 |  |  |       this.editableTabsValue = '0' | 
 |  |  |       this.form.objectList = [ | 
 |  |  |         { code: 'A', value: '', sort: '选项A', id: '0' } | 
 |  |  |       ] | 
 |  |  |       this.$nextTick(() => { | 
 |  |  |         if (e === '0' || e === '1') { | 
 |  |  |           this.form.answer = '' | 
 |  |  |         } else { | 
 |  |  |           this.form.answer = [] | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |       this.$forceUpdate() | 
 |  |  |     }, | 
 |  |  |     removeTab (e) { | 
 |  |  |       this.problems.splice(e, 1) | 
 |  |  |       this.form.objectList.splice(e, 1) | 
 |  |  |       if (e === this.editableTabsValue) { | 
 |  |  |         this.editableTabsValue = '0' | 
 |  |  |       } | 
 |  |  |       this.problems.forEach((item, index) => { | 
 |  |  |         item.name = '选项' + this.arr[index] | 
 |  |  |       this.form.objectList.forEach((item, index) => { | 
 |  |  |         item.code = this.arr[index] | 
 |  |  |         item.sort = '选项' + this.arr[index] | 
 |  |  |         item.id = index.toString() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     add () { | 
 |  |  |       const name = '选项' + this.arr[this.problems.length] | 
 |  |  |       this.problems.push({ name, val: '', id: this.problems.length.toString() }) | 
 |  |  |       const sort = '选项' + this.arr[this.form.objectList.length] | 
 |  |  |       this.form.objectList.push({ sort, value: '', code: this.arr[this.form.objectList.length], id: this.form.objectList.length.toString() }) | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } |