220 lines
8.6 KiB
Vue
220 lines
8.6 KiB
Vue
<template>
|
|
<a-spin :spinning="confirmLoading">
|
|
|
|
<a-row style="height: calc(80vh);">
|
|
<a-col :span="4" style="padding: 10px">
|
|
<a-card title="可选题型" style="height: 450px;border: 1px solid #e8e8e8;">
|
|
<p><a-button type="primary" preIcon="ant-design:check-circle-outlined" @click="addTigan(3)">单选</a-button></p>
|
|
<p><a-button type="primary" preIcon="ant-design:check-square-outlined" @click="addTigan(4)">多选</a-button></p>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :span="20" style="overflow-y: scroll;height: calc(80vh);">
|
|
<div style="text-align: center;width: 100%;font-weight: bold;font-size: 20px;padding: 20px;">
|
|
{{ title }}</div>
|
|
<!-- 题干信息 -->
|
|
<div style="width:100%;" v-for="(item,index) in tiganData" :key="index">
|
|
<!-- 单选题 -->
|
|
<div style="width: 100%;" v-if="item.wjType==3">
|
|
<a-card >
|
|
<template #title>
|
|
<span>{{index+1}}、</span><a-textarea placeholder="请填写单选题题干" v-model:value="item.wjTitle" style="width: 75%" auto-size/>
|
|
</template>
|
|
<template #extra>
|
|
<a-tooltip placement="topRight" title="题目分数">
|
|
<a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数">
|
|
<a-select-option value="5">5</a-select-option>
|
|
<a-select-option value="4">4</a-select-option>
|
|
<a-select-option value="3">3</a-select-option>
|
|
<a-select-option value="2">2</a-select-option>
|
|
<a-select-option value="1">1</a-select-option>
|
|
</a-select>
|
|
</a-tooltip >
|
|
<a-tooltip placement="topRight" title="删除此题"><Icon icon="ant-design:delete-outlined" style="cursor: pointer;font-size: 20px;margin: 10px" @click="handleDelTigan(item,index)" /></a-tooltip >
|
|
</template>
|
|
<a-radio-group v-model:value="item.itemSelected" style="width: 100%" size="default">
|
|
<div style="width: 100%" v-for="(tmxx,index) in item.wjxWjxxTmxxList">
|
|
<a-radio :value="tmxx.itemIndex+``" style="width: 100%"><a-input placeholder="请填写标题" v-model:value="tmxx.itemTitle" :bordered="false" style="width:80%;"/>
|
|
<a-tooltip placement="topLeft" title="在下方添加新的选项"><Icon icon="ant-design:plus-circle-outlined" style="cursor: pointer;margin:5px;font-size:20px;color: #1890ff;" @click="handleAddTmxx(tmxx,index,item.wjxWjxxTmxxList)" /></a-tooltip >
|
|
<a-tooltip placement="topLeft" title="删除选项" ><Icon icon="ant-design:minus-circle-outlined" style="cursor: pointer;margin:5px;font-size:20px;color: #1890ff;" @click="handleRemTmxx(tmxx,index,item.wjxWjxxTmxxList)" /></a-tooltip >
|
|
</a-radio>
|
|
</div>
|
|
</a-radio-group>
|
|
</a-card>
|
|
</div>
|
|
<!-- 多选题 -->
|
|
<div style="width: 100%;" v-else-if="item.wjType==4">
|
|
<a-card >
|
|
<template #title>
|
|
<span>{{index+1}}、</span><a-textarea placeholder="请填写多选题题干" v-model:value="item.wjTitle" style="width: 75%" auto-size/>
|
|
</template>
|
|
<template #extra>
|
|
<a-tooltip placement="topRight" title="题目分数">
|
|
<a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数">
|
|
<a-select-option value="5">5</a-select-option>
|
|
<a-select-option value="4">4</a-select-option>
|
|
<a-select-option value="3">3</a-select-option>
|
|
<a-select-option value="2">2</a-select-option>
|
|
<a-select-option value="1">1</a-select-option>
|
|
</a-select>
|
|
</a-tooltip >
|
|
<a-tooltip placement="topRight" title="删除此题"><Icon icon="ant-design:delete-outlined" style="cursor: pointer;font-size: 20px;margin: 10px" @click="handleDelTigan(item,index)" /></a-tooltip >
|
|
</template>
|
|
<a-checkbox-group v-model:value="item.itemSelected" style="width: 100%">
|
|
<a-row>
|
|
<a-col :span="24" v-for="(tmxx,index) in item.wjxWjxxTmxxList">
|
|
<a-checkbox :value="tmxx.itemIndex"><a-input placeholder="请填写标题" v-model:value="tmxx.itemTitle" :bordered="false" style="width:80%;"/></a-checkbox>
|
|
<a-tooltip placement="topLeft" title="在下方添加新的选项"><Icon icon="ant-design:plus-circle-outlined" style="cursor: pointer;margin:5px;font-size:20px;color: #1890ff;" @click="handleAddTmxx(tmxx,index,item.wjxWjxxTmxxList)"/></a-tooltip >
|
|
<a-tooltip placement="topLeft" title="删除选项" ><Icon icon="ant-design:minus-circle-outlined" style="cursor: pointer;margin:5px;font-size:20px;color: #1890ff;" @click="handleRemTmxx(tmxx,index,item.wjxWjxxTmxxList)"/></a-tooltip >
|
|
</a-col>
|
|
</a-row>
|
|
</a-checkbox-group>
|
|
</a-card>
|
|
</div>
|
|
<div v-else>
|
|
无对应类型
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</a-spin>
|
|
</template>
|
|
|
|
<script lang="ts" name="wjxWjxx-add" setup>
|
|
import { ref, nextTick, defineExpose } from 'vue';
|
|
import { Icon } from '/@/components/Icon';
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
import { defHttp } from '/@/utils/http/axios';
|
|
import { queryWjxWjxxTmxxListByMainId, queryDataById, saveOrUpdate } from '/@/views/kc/wjxWjxxTmlb/WjxWjxxTmlb.api';
|
|
const title = ref<string>('');
|
|
const mainId = ref<string>('');
|
|
const confirmLoading = ref<boolean>(false);
|
|
const tiganData = ref<any>([]);
|
|
const tmxxPar = ref<any>({});
|
|
const { createMessage } = useMessage();
|
|
|
|
const emit = defineEmits(['register', 'success']);
|
|
//添加单选题
|
|
function addTigan(type){
|
|
var list = tiganData.value;
|
|
if(type==3){
|
|
var params = {
|
|
wjType:parseInt(type),
|
|
wjIndex:list.length+1,
|
|
mainId:mainId,
|
|
wjTitle:null,
|
|
wjScore:null,
|
|
itemSelected:'1',
|
|
wjxWjxxTmxxList:[{itemTitle:null,itemIndex:'1'},{itemTitle:null,itemIndex:'2'}],
|
|
}
|
|
list.push(params);
|
|
tiganData.value = [...list];
|
|
}else if(type==4){
|
|
var params = {
|
|
wjType:parseInt(type),
|
|
wjIndex:list.length+1,
|
|
mainId:mainId,
|
|
wjTitle:null,
|
|
wjScore:null,
|
|
itemSelected:['1'],
|
|
wjxWjxxTmxxList:[{itemTitle:null,itemIndex:'1'},{itemTitle:null,itemIndex:'2'}],
|
|
}
|
|
list.push(params);
|
|
tiganData.value = [...list];
|
|
|
|
}
|
|
}
|
|
//添加选项
|
|
function handleAddTmxx(record,index,list){
|
|
list.push({itemTitle:null,itemIndex:list.length+1});
|
|
}
|
|
//删除题目
|
|
function handleDelTigan(record,index){
|
|
tiganData.value.splice(index,1);
|
|
}
|
|
//删除选项
|
|
function handleRemTmxx(record,index,list){
|
|
if(list.length<=2){
|
|
createMessage.error('至少保留两个选项');
|
|
}else{
|
|
list.splice(index,1);
|
|
}
|
|
}
|
|
function getType(value,type){
|
|
// console.log(`🚀 ~ getType ~ value,type:`, value,type)
|
|
if(type=='3'){
|
|
return parseInt(value);
|
|
}else if(type=='4'){
|
|
return value;
|
|
}
|
|
}
|
|
//初始化
|
|
function edit(record){
|
|
tiganData.value = [];
|
|
title.value = record.title;
|
|
mainId.value = record.id;
|
|
defHttp.get({url:'/wjxWjxxTmlb/wjxWjxxTmlb/queryByMainId',params:{id:record.id}}).then(res =>{
|
|
// console.log(`🚀 ~ defHttp.get ~ res:`, res)
|
|
var list = res;
|
|
for(var i=0;i<list.length;i++){
|
|
var par = list[i];
|
|
if(par.wjType==4){
|
|
var lssj = par.itemSelected.split(",");
|
|
const numArray = lssj.map(str => parseInt(str));
|
|
list[i].itemSelected = numArray;
|
|
}
|
|
}
|
|
tiganData.value = res;
|
|
})
|
|
|
|
}
|
|
//提交数据
|
|
async function submitForm(){
|
|
const data = tiganData.value;
|
|
// console.log(`🚀 ~ submitForm ~ data:`, data)
|
|
const values = Object.assign([], data);
|
|
for(var i=0;i<values.length;i++){
|
|
var param = values[i];
|
|
values[i].itemSelected = param.itemSelected+"";
|
|
}
|
|
const isUpdate = false
|
|
await saveOrUpdate(values, isUpdate);
|
|
//关闭弹窗
|
|
emit('ok');
|
|
|
|
}
|
|
|
|
defineExpose({
|
|
edit,
|
|
submitForm,
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
/deep/span.ant-radio + * {
|
|
width: 100%;
|
|
}
|
|
|
|
/deep/.ant-checkbox-wrapper {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
font-size: 14px;
|
|
font-variant: tabular-nums;
|
|
line-height: 1.5715;
|
|
list-style: none;
|
|
font-feature-settings: tnum;
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
line-height: unset;
|
|
cursor: pointer;
|
|
width: 80%;
|
|
}
|
|
/deep/.ant-checkbox + span {
|
|
padding-right: 8px;
|
|
padding-left: 8px;
|
|
width: 100%;
|
|
}
|
|
</style>
|