<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" 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-group>
|
</el-form-item>
|
<el-form-item label="题目顺序(升序)" prop="sortnu">
|
<el-input v-model="form.sortnu" placeholder="请输入" v-trim/>
|
</el-form-item>
|
<el-form-item label="选项集合" prop="options" 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"
|
:name="item.id"
|
>
|
<el-input v-model="item.val" 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-option
|
v-for="item in problems"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</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: '',
|
options: '',
|
answer: '',
|
sortnu: '',
|
type: '',
|
useType: ''
|
},
|
// 验证规则
|
rules: {
|
},
|
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']
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/problems',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
removeTab (e) {
|
this.problems.splice(e, 1)
|
if (e === this.editableTabsValue) {
|
this.editableTabsValue = '0'
|
}
|
this.problems.forEach((item, index) => {
|
item.name = '选项' + 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() })
|
}
|
}
|
}
|
</script>
|
