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

This commit is contained in:
Yuan 2023-05-06 16:22:15 +08:00
parent 1bca2be560
commit 2e51c9ee4c

View File

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