| | |
| | | <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: '' |
| | | score: '', |
| | | type: 0, |
| | | scroe:null, |
| | | useType: 1 |
| | | }, |
| | | // 验证规则 |
| | | 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() }) |
| | | } |
| | | } |
| | | } |