joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

bugfix - 查看规则时标签字段未填充

Browse Source
This commit is contained in:
Yuan 2023-05-06 16:22:15 +08:00
parent 1bca2be560
commit 2e51c9ee4c
1 changed files with 224 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

427
src/views/publish/examRule/draft/editRule.vue
View File

@ -1,96 +1,91 @@
<template> <template>
<el-dialog <el-dialog
v-dialogDrag v-dialogDrag
:title="title" :title="title"
width="600px" width="600px"
:visible.sync="dialogShow" :visible.sync="dialogShow"
:before-close="handleCancel" :before-close="handleCancel"
:close-on-click-modal="false" :close-on-click-modal="false"
> >
<el-form ref="form" :model="form" :rules="rules" label-width="140px"> <el-form ref="form" :model="form" :rules="rules" label-width="140px">
<el-form-item label="试题类型" prop="type"> <el-form-item label="试题类型" prop="type">
<el-select v-model="form.type" placeholder="请选择试题类型" style="width:240px;" @change="clearSubtype"> <el-select v-model="form.type" placeholder="请选择试题类型" style="width:240px;" @change="clearSubtype">
<el-option <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
v-for="item in types" </el-select>
:key="item.value" </el-form-item>
:label="item.label" <el-form-item label="规则类型" prop="subtype">
:value="item.value" <el-select
/> v-model="form.subtype"
</el-select> placeholder="请选择规则类型"
</el-form-item> style="width:240px;"
<el-form-item label="规则类型" prop="subtype"> @change="subTypesChange"
<el-select >
v-model="form.subtype" <el-option v-for="item in subtypes" :key="item.value" :label="item.label" :value="item.value" />
placeholder="请选择规则类型" </el-select>
style="width:240px;" </el-form-item>
@change="subTypesChange" <el-form-item label="标签" required>
> <el-select v-model="form.tags" @change="getQuestionAmount">
<el-option <el-option v-for="item in labels" :key="item.value" :label="item.label" :value="item.value" />
v-for="item in subtypes" </el-select>
:key="item.value" </el-form-item>
:label="item.label" <el-form-item v-if="form.subtype === 5" label="场景实训">
:value="item.value" <el-row style="border: 1px solid #DCDFE6;width: 400px;">
/> <el-col :span="12" style="border-right: 1px solid #DCDFE6;overflow: hidden;text-align: center;"
</el-select> >场景实训名称</el-col
</el-form-item> >
<el-form-item label="分类" required> <el-col :span="12" style="text-align: center;">扮演角色</el-col>
<el-select v-model="form.tags" @change="getQuestionAmount"> </el-row>
<el-option <template v-for="scene in sceneTrainMap">
v-for="item in labels" <el-row :key="scene.id" style="border: 1px solid #DCDFE6;width: 400px;border-top: 0;">
:key="item.value" <el-col :span="12" style="border-right: 1px solid #DCDFE6;overflow: hidden;">
:label="item.label" <el-radio v-model="scene.check" :label="true" style="margin-left: 10px;">{{
:value="item.value" scene.name
/> }}</el-radio>
</el-select> </el-col>
</el-form-item> <el-col :span="12">
<el-form-item v-if="form.subtype === 5" label="场景实训"> <el-select
<el-row style="border: 1px solid #DCDFE6;width: 400px;"> v-model="scene.cosplayId"
<el-col :span="12" style="border-right: 1px solid #DCDFE6;overflow: hidden;text-align: center;">场景实训名称</el-col> :disabled="!scene.check"
<el-col :span="12" style="text-align: center;">扮演角色</el-col> size="mini"
</el-row> style="margin-left: 10px;"
<template v-for="scene in sceneTrainMap"> placeholder="请选择扮演角色"
<el-row :key="scene.id" style="border: 1px solid #DCDFE6;width: 400px;border-top: 0;"> >
<el-col :span="12" style="border-right: 1px solid #DCDFE6;overflow: hidden;"> <el-option
<el-radio v-model="scene.check" :label="true" style="margin-left: 10px;">{{ scene.name }}</el-radio> v-for="item in totalMemberList"
</el-col> v-show="scene.playerIdList.includes(item.value)"
<el-col :span="12"> :key="item.value"
<el-select v-model="scene.cosplayId" :disabled="!scene.check" size="mini" style="margin-left: 10px;" placeholder="请选择扮演角色"> :label="item.label"
<el-option :value="item.value"
v-for="item in totalMemberList" />
v-show="scene.playerIdList.includes(item.value)" </el-select>
:key="item.value" </el-col>
:label="item.label" </el-row>
:value="item.value" </template>
</el-form-item>
<el-form-item v-show="form.subtype !== 5" label="题目数量" prop="amount">
<el-input-number
v-model="form.amount"
:min="0"
style="width: 200px; float: left; margin-right: 10px;"
/> />
</el-select> <span style="width: 190px; float: left;">
</el-col> {{ $t('publish.allNumberTipOne') }} {{ topicNum }} {{ $t('publish.allNumberTipTwo') }}
</el-row> </span>
</template> </el-form-item>
</el-form-item> <el-form-item :label="$t('publish.scorePerQuestion')" prop="score">
<el-form-item v-show="form.subtype !== 5" label="题目数量" prop="amount"> <el-input-number v-model="form.score" :precision="0" :min="0" style="width:200px" />
<el-input-number </el-form-item>
v-model="form.amount" </el-form>
:min="0" <div slot="footer" class="dialog-footer">
style="width: 200px; float: left; margin-right: 10px;" <el-button @click="handleCancel">{{ $t('global.cancel') }}</el-button>
/> <el-button type="primary" @click="handleOk">{{ $t('global.confirm') }}</el-button>
<span style="width: 190px; float: left;"> </div>
{{ $t('publish.allNumberTipOne') }} {{ topicNum }} {{ $t('publish.allNumberTipTwo') }} </el-dialog>
</span>
</el-form-item>
<el-form-item :label="$t('publish.scorePerQuestion')" prop="score">
<el-input-number v-model="form.score" :precision="0" :min="0" style="width:200px" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancel">{{ $t('global.cancel') }}</el-button>
<el-button type="primary" @click="handleOk">{{ $t('global.confirm') }}</el-button>
</div>
</el-dialog>
</template> </template>
<script> <script>
import { getQuestionAmount, queryTagList } from '@/api/management/exam'; import { getQuestionAmount, queryTagList } from '@/api/management/exam'
import { getPublishTrainingListInOrg } from '@/api/jmap/training'; import { getPublishTrainingListInOrg } from '@/api/jmap/training'
export default { export default {
name: 'EditRule', name: 'EditRule',
@ -98,53 +93,53 @@ export default {
ruleList: { ruleList: {
type: Array, type: Array,
default() { default() {
return []; return []
} },
}, },
examData: { examData: {
type: Object, type: Object,
default() { default() {
return {}; return {}
} },
}, },
totalMemberList: { totalMemberList: {
type: Array, type: Array,
default() { default() {
return []; return []
} },
} },
}, },
data() { data() {
var number = (rule, value, message) => { var number = (rule, value, message) => {
if (this.form.subtype !== 5) { if (this.form.subtype !== 5) {
if (!value) { if (!value) {
return message(new Error(this.$t('publish.inputQuestionNumber'))); return message(new Error(this.$t('publish.inputQuestionNumber')))
} }
setTimeout(() => { setTimeout(() => {
if (Number(value) == 0) { if (Number(value) == 0) {
message(new Error(this.$t('publish.inputQuestionNumberError'))); message(new Error(this.$t('publish.inputQuestionNumberError')))
} else if (!Number(value)) { } else if (!Number(value)) {
message(new Error(this.$t('publish.inputValidNumber'))); message(new Error(this.$t('publish.inputValidNumber')))
} else if (Number(value) > this.topicNum) { } else if (Number(value) > this.topicNum) {
message(new Error(this.$t('publish.inputNumberError'))); message(new Error(this.$t('publish.inputNumberError')))
} else { } else {
message(); message()
} }
}, 100); }, 100)
} else { } else {
message(); message()
} }
}; }
var score = (rule, value, message) => { var score = (rule, value, message) => {
if (!value) { if (!value) {
return message(new Error(this.$t('publish.inputScorePerQuestion'))); return message(new Error(this.$t('publish.inputScorePerQuestion')))
} else { } else {
message(); message()
} }
}; }
const tagsValidator = (rule, value, message) => { const tagsValidator = (rule, value, message) => {
message(); message()
}; }
return { return {
form: { form: {
id: '', id: '',
@ -152,7 +147,7 @@ export default {
subtype: '', subtype: '',
tags: '', tags: '',
amount: 1, amount: 1,
score: 1 score: 1,
}, },
sceneInfo: [], sceneInfo: [],
labels: [], labels: [],
@ -165,162 +160,188 @@ export default {
subtype: [{ required: true, message: '请选择规则类型', trigger: 'change' }], subtype: [{ required: true, message: '请选择规则类型', trigger: 'change' }],
amount: [{ required: true, validator: number, trigger: 'blur' }], amount: [{ required: true, validator: number, trigger: 'blur' }],
score: [{ required: true, validator: score, trigger: 'blur' }], score: [{ required: true, validator: score, trigger: 'blur' }],
tags: [{ validator: tagsValidator, trigger: 'blur' }] tags: [{ validator: tagsValidator, trigger: 'blur' }],
} },
}; }
}, },
computed: { computed: {
types() { types() {
return [{ value: 1, label: '理论题' }, { value: 2, label: '实训题' }]; return [{ value: 1, label: '理论题' }, { value: 2, label: '实训题' }]
}, },
subtypes() { subtypes() {
const data = { const data = {
'1': [{ value: 1, label: '单选题' }, { value: 2, label: '多选题' }, { value: 3, label: '判断题' }], '1': [{ value: 1, label: '单选题' }, { value: 2, label: '多选题' }, { value: 3, label: '判断题' }],
'2': [{ value: 4, label: '单操实训' }, { value: 5, label: '场景实训' }] '2': [{ value: 4, label: '单操实训' }, { value: 5, label: '场景实训' }],
}; }
return data[this.form.type]; return data[this.form.type]
}, },
title() { title() {
return this.isEditMode ? this.$t('publish.modifyRules') : this.$t('publish.addRules'); return this.isEditMode ? this.$t('publish.modifyRules') : this.$t('publish.addRules')
} },
}, },
methods: { methods: {
show(detail) { show(detail) {
this.dialogShow = true; this.dialogShow = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.form.resetFields(); this.$refs.form.resetFields()
if (detail) { if (detail) {
this.isEditMode = true; this.fillLabelsOption().then(() => {
this.index = detail.index; this.isEditMode = true
this.form = { this.index = detail.index
type: detail.type, console.log(detail)
subtype: detail.subtype, this.form = {
amount: detail.amount, type: detail.type,
score: detail.score, subtype: detail.subtype,
id: detail.id || '', amount: detail.amount,
tags: detail.tags ? detail.tags[0] : '' score: detail.score,
}; id: detail.id || '',
this.sceneInfo = detail.sceneInfo || []; tags: detail.tags ? detail.tags[0] : '',
this.topicNum = detail.topicNum; }
this.subTypesChange(); this.sceneInfo = detail.sceneInfo || []
this.topicNum = detail.topicNum
this.getQuestionAmount()
})
} else { } else {
this.isEditMode = false; this.isEditMode = false
} }
}); })
}, },
isDuplicated() { isDuplicated() {
const isDuplicated = const isDuplicated =
this.ruleList.length > 0 && this.ruleList.length > 0 &&
this.ruleList.some(rule => rule.type === this.form.type && rule.subtype === this.form.subtype && rule.tags && this.form.tags && rule.tags.includes(this.form.tags)); this.ruleList.some(
return isDuplicated; rule =>
rule.type === this.form.type &&
rule.subtype === this.form.subtype &&
rule.tags &&
this.form.tags &&
rule.tags.includes(this.form.tags)
)
return isDuplicated
}, },
subTypesChange(val) { subTypesChange(val) {
this.form.tags = ''
this.fillLabelsOption()
this.getQuestionAmount()
},
fillLabelsOption() {
const param = { const param = {
orgId: this.$store.state.user.companyId, orgId: this.$store.state.user.companyId,
groupType: this.form.type, groupType: this.form.type,
mapId: this.examData.mapId, mapId: this.examData.mapId,
subType: this.form.subtype subType: this.form.subtype,
}; }
this.form.tags = ''; return queryTagList(param).then(resp => {
queryTagList(param).then(resp => { this.labels = [{ label: '无', value: '' }, ...resp.data.map(item => ({ label: item, value: item }))]
this.labels = [{ label: '无', value: '' }, ...resp.data.map(item => ({ label: item, value: item }))]; })
});
this.getQuestionAmount();
}, },
getQuestionAmount(e) { getQuestionAmount(e) {
if (!(this.form.type && this.form.subtype)) return; if (!(this.form.type && this.form.subtype)) return
const param = { const param = {
orgId: this.$store.state.user.companyId, orgId: this.$store.state.user.companyId,
groupType: this.form.type, groupType: this.form.type,
subType: this.form.subtype, subType: this.form.subtype,
mapId: this.examData.mapId mapId: this.examData.mapId,
}; }
if (this.form.tags !== '') { if (this.form.tags !== '') {
param.tags = this.form.tags; param.tags = this.form.tags
} }
if (this.form.subtype === 5) { if (this.form.subtype === 5) {
const data = {mapId: this.examData.mapId, type: 'scene', labels: [this.form.tags]}; const data = { mapId: this.examData.mapId, type: 'scene', labels: [this.form.tags] }
getPublishTrainingListInOrg(data).then(response => { getPublishTrainingListInOrg(data)
if (response.data && response.data.length) { .then(response => {
response.data.forEach(scene => { if (response.data && response.data.length) {
this.$set(this.sceneTrainMap, scene.id, { check: false, name: scene.name, playerIdList: JSON.parse(scene.playerIdJson), cosplayId: '' }); response.data.forEach(scene => {
}); this.$set(this.sceneTrainMap, scene.id, {
this.sceneInfo && this.sceneInfo.forEach(scene => { check: false,
this.sceneTrainMap[scene.publishTrainId].check = true; name: scene.name,
this.sceneTrainMap[scene.publishTrainId].cosplayId = scene.cosplayId; playerIdList: JSON.parse(scene.playerIdJson),
}); cosplayId: '',
} })
}).catch(() => { })
this.$message.error('获取场景实训列表失败！'); this.sceneInfo &&
}); this.sceneInfo.forEach(scene => {
this.sceneTrainMap[scene.publishTrainId].check = true
this.sceneTrainMap[scene.publishTrainId].cosplayId = scene.cosplayId
})
}
})
.catch(() => {
this.$message.error('获取场景实训列表失败！')
})
} else { } else {
getQuestionAmount(param).then(resp => { getQuestionAmount(param).then(resp => {
this.topicNum = resp.data; this.topicNum = resp.data
}); })
} }
}, },
clearSubtype() { clearSubtype() {
this.form.subtype = ''; this.form.subtype = ''
this.form.tags = ''; this.form.tags = ''
this.labels = [{ label: '无', value: '' }]; this.labels = [{ label: '无', value: '' }]
}, },
handleSceneData() { handleSceneData() {
let validFlag = true; let validFlag = true
if (this.form.subtype === 5) { if (this.form.subtype === 5) {
this.sceneInfo = []; this.sceneInfo = []
for (const sceneId in this.sceneTrainMap) { for (const sceneId in this.sceneTrainMap) {
const scene = this.sceneTrainMap[sceneId]; const scene = this.sceneTrainMap[sceneId]
if (scene.check && scene.cosplayId) { if (scene.check && scene.cosplayId) {
this.sceneInfo.push({publishTrainId: sceneId, cosplayId: scene.cosplayId }); this.sceneInfo.push({ publishTrainId: sceneId, cosplayId: scene.cosplayId })
} else if (scene.check && !scene.cosplayId) { } else if (scene.check && !scene.cosplayId) {
validFlag = false; validFlag = false
} }
} }
this.form.amount = this.sceneInfo.length; this.form.amount = this.sceneInfo.length
} }
if (!validFlag) { if (!validFlag) {
this.$message.warning('请选择场景实训的扮演角色！'); this.$message.warning('请选择场景实训的扮演角色！')
} else if (!this.form.amount) { } else if (!this.form.amount) {
this.$message.warning('请选择场景实训！'); this.$message.warning('请选择场景实训！')
} }
return validFlag; return validFlag
}, },
handleOk() { handleOk() {
this.handleSceneData() && this.$refs['form'].validate(valid => { this.handleSceneData() &&
if (valid) { this.$refs['form'].validate(valid => {
if (this.ruleList.length > 0 && !this.isEditMode) { if (valid) {
if (this.isDuplicated()) { if (this.ruleList.length > 0 && !this.isEditMode) {
this.$message.warning('与已有规则重复, 请重新选择'); if (this.isDuplicated()) {
return; this.$message.warning('与已有规则重复, 请重新选择')
return
}
} }
this.$emit(
'submit',
{ ...this.form, sceneInfo: this.sceneInfo, topicNum: this.topicNum },
this.isEditMode
)
this.handleCancel()
} }
this.$emit('submit', { ...this.form, sceneInfo: this.sceneInfo, topicNum: this.topicNum }, this.isEditMode); })
this.handleCancel();
}
});
}, },
handleCancel() { handleCancel() {
this.topicNum = 0; this.topicNum = 0
this.dialogShow = false; this.dialogShow = false
} },
} },
}; }
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
/deep/ { /deep/ {
.el-dialog { .el-dialog {
width: 600px; width: 600px;
} }
.el-form-item__content { .el-form-item__content {
width: calc(100% - 80px); width: calc(100% - 80px);
} }
.el-cascader { .el-cascader {
width: 100%; width: 100%;
} }
} }
.dialog-footer{ .dialog-footer {
text-align: center; text-align: center;
} }
</style> </style>