<template>
|
<GlobalWindow
|
: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" @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="2">仅劳务</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<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="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 form.objectList"
|
:key="item.code"
|
:label="item.sort"
|
:name="item.id"
|
>
|
<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" 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 form.objectList"
|
:key="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>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
export default {
|
name: 'OperaProblemsWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
// 表单数据
|
form: {
|
id: null,
|
title: '',
|
objectList: [
|
{ code: 'A', value: '', sort: '选项A', id: '0' }
|
],
|
answer: '',
|
sortnu: '',
|
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',
|
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']
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/problems',
|
'field.id': 'id'
|
})
|
},
|
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.form.objectList.splice(e, 1)
|
if (e === this.editableTabsValue) {
|
this.editableTabsValue = '0'
|
}
|
this.form.objectList.forEach((item, index) => {
|
item.code = this.arr[index]
|
item.sort = '选项' + this.arr[index]
|
item.id = index.toString()
|
})
|
},
|
add () {
|
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() })
|
}
|
}
|
}
|
</script>
|
