<template>
<div class="ac-dialog-content">
<div class="content-box">
<el-form ref="contentRef" :rules="rules" :model="formData" label-width="auto">
<el-form-item prop="ksmc" label="考试名称" style="width: 100%;">
<el-input v-model="formData.ksmc" placeholder="请输入"
style="width: 100%;" />
</el-form-item>
<el-form-item prop="km" label="科目">
<el-select v-model="formData.km" placeholder="请选择" @change="handleSubjectChange">
<el-option v-for="item in subject
list" :key="item.id" :label="item.km" :value="item.km"/>
</el-select>
</el-form-item>
<el-form-item prop="nd" label="难度">
<el-select v-model="formData.nd" placeholder="请选择" @change="handleLivelChange">
<el-option v-for="item in level
List" :key="item.id" :label="item.nd" :value="item.nd"/>
</el-select>
</el-form-item>
<el-form-item label="开始时间" prop="kssj">
<el-date-picker v-model="formData.kssj" type="date" placeholder="请选择" value-format="YYYY-MM-DD"
:disabled-date="disabledDateStart"
popper-class="small-examTaskTime" style="position: relative;" />
</el-form-item>
<el-form-item label="截止时间" prop="jssj">
<el-date-picker v-model="formData.jssj" type="date" placeholder="请选择" value-format="YYYY-MM-DD"
:disabled-date="disabledDateEnd"
popper-class="small-examTaskTime" />
</el-form-item>
<el-form-item prop="ckry" label="参考人员">
<el-cascader v-model="formData.ckry" :options="user
List" :props="{ multiple: true }"
:show-all-levels="false" collapse-tags clearable @change="handleChange" />
</el-form-item>
<el-form-item prop="cjr" label="创建人">
<el-input v-model="formData.cjr" placeholder="请输入" />
</el-form-item>
<el-form-item label="创建时间" prop="cjsj">
<el-date-picker v-model="formData.cjsj" type="date" placeholder="请选择" value-format="YYYY-MM-DD"
:disabled-date="disabledDateStart"
popper-class="small-examTask" />
</el-form-item>
</el-form>
</div>
<div class="content-title flex a-c j-s">
<div><span style="color: #f56c6c;">*</span> 选择试卷</div>
<el-input placeholder="请输入关键词搜索" v-model="
paperTablle.sjmc" style="width: 6.2rem;margin-bottom: 0.3rem;"
size="small">
<template #suffix>
<el-icon class="lient-icon" @click="getExam
List">
<Search />
</el-icon>
</template>
</el-input>
</div>
<el-table :data="
paperList" style="width: 100%" header-cell-class-name="table-head-class"
cell-class-name="table-cell-class" height="3rem" :header-cell-style="{ 'text-align': 'left' }"
:cell-style="{ 'text-align': 'left' }">
<el-table-column v-if="dialogType != 'detail'" width="25">
<template #default="{ row }">
<el-radio v-model="selectedId" :label="row.id" @change="handleSelect(row)">
<span></span>
</el-radio>
</template>
</el-table-column>
<el-table-column prop="sjmc" label="试卷名称"></el-table-column>
<el-table-column prop="nd" label="难度" width="70"></el-table-column>
<el-table-column prop="km" label="科目"></el-table-column>
<el-table-column prop="zf" label="总分" width="40"></el-table-column>
<el-table-column prop="sc" label="时长" width="60">
<template #default="{ row }">
{{ row.sc }}min
</template>
</el-table-column>
<el-table-column prop="gznr" label="操作" width="50">
<template #default="{ row }">
<span class="tableBtn">预览</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup>
import { ref, computed, onMounted, reactive } from "vue";
import { getExamTaskUsers, get
Paper,getSubjectOption,getLevelOption } from '@/api'
import {Search} from '@element-plus/icons-vue'
const props = defineProps({
formData: {
type: Object,
default: {},
},
dialogType: {
type: String,
default: 'add'
}
});
const emits = defineEmits(["closeAdd", "update:formData"]);
const formData = computed({
get: () => props.formData,
set: (value) => {
emits('update:formData', value);
}
});
const rules = ref({
ksmc: [{ required: true, message: '请输入考试名称', trigger: 'change' }],
km: [{ required: true, message: '请选择科目', trigger: 'change' }],
nd: [{ required: true, message: '请选择难度', trigger: 'change' }],
kssj: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
jssj: [{ required: true, message: '请选择截止时间', trigger: 'blur' }],
ckry: [{ required: true, message: '请选择参考人员', trigger: 'change' }],
cjr: [{ required: true, message: '请输入创建人', trigger: 'change' }],
cjsj: [{ required: true, message: '请选择创建时间', trigger: 'blur' }]
})
const contentRef = ref(null);
const user
List = ref([])
const
paperList = ref([])
const
paperTablle = reactive({
pageSize: 10,
pageNum: 1,
sjmc:'',
nd:'',
km:''
})
const selectedId = ref(null)
const subject
list=ref([])
const level
List=ref([])
const getSubject
list=()=>{
getSubjectOption().then((res) => {
if (res.code == 200) subject
list.value = res.data;
});
}
const getLevel
List=()=>{
getLevelOption().then((res) => {
if (res.code == 200)level
List.value = res.data;
});
}
const getUser = () => {
getExamTaskUsers().then((res) => {
if (res.data.code == 200) user
List.value = res.data.data;
});
};
const get
PaperList = () => {
get
Paper(
paperTablle).then((res) => {
if (res.code == 200)
paperList.value = res.data.records;
});
}
const handleSelect = (row) => {
formData.value.sjinfo=row.sjinfo
formData.value.txinfo=row.txinfo
}
const handleChange = (val) => {
console.log(val);
}
const handleSubjectChange=(val)=>{
paperTablle.km=val
paperTablle.pageNum=1
paperTablle.pageSize=10
get
PaperList()
}
const handleLivelChange=(val)=>{
paperTablle.nd=val
paperTablle.pageNum=1
paperTablle.pageSize=10
get
PaperList()
}
const getExam
List = () => {
paperTablle.pageNum=1
paperTablle.pageSize=10
get
PaperList()
}
// const changeWorker = (val) => {
// if (val && Array.isArray(formData.value.gzry) && formData.value.gzry.length > 0) {
// const filteredWorkers = formData.value.gzry.filter(worker => worker !== val);
// if (filteredWorkers.length !== formData.value.gzry.length) {
// formData.value.gzry = filteredWorkers;
// }
// }
// }
const disabledDateEnd = (time) => {
if (!formData.value.kssj) {
return false;
} else {
let date = new Date(formData.value.kssj);
return time.getTime() < date.getTime();
}
};
const disabledDateStart = (time) => {
if (!formData.value.jssj) {
return false;
} else {
let date = new Date(formData.value.jssj);
return time.getTime() > date.getTime();
}
};
defineExpose({
validateForm: () => {
return new Promise((resolve) => {
contentRef.value?.validate((valid) => {
resolve(valid);
});
});
}
})
onMounted(() => {
getUser();
get
PaperList()
getSubject
list()
getLevel
List()
})
</script>
<style lang="scss">
.ac-dialog-content {
width: 100%;
margin-top: 0.4rem;
font-size: 0.32rem;
color: #292f2d;
.el-table__inner-wrapper::before {
display: none;
}
.content-box {
.el-form {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.el-form-item__label {
padding-right: 0.15rem;
}
}
.el-input {
width: 5.6rem;
height: 0.72rem;
}
.el-tag {
height: 0.54rem;
}
.left-item {
.el-form-item__label-wrap {
margin: 0 1.3rem 0 0 !important;
}
}
}
.content-title {
// margin-bottom: 0.2rem;
font-size: 0.285rem;
font-weight: 520;
color: #303133;
}
.btn-c {
color: #19988b;
cursor: pointer;
}
.dialog-lient {
border-top: 2px solid #f3f4f5;
padding-top: 0.3rem;
.lient-icon {
cursor: pointer;
width: 0.6rem;
padding-right: 0.2rem;
}
}
.tableBtn {
color: #19988b;
cursor: pointer;
}
}
.small-examTaskTime {
transform: scale(0.6);
transform-origin: top;
}
.small-examTask {
transform: scale(0.6);
transform-origin: left;
}
</style>需要修改const handleChange = (val) => {
console.log(val);
}，让 formData.value.ckry = [
{"id": "1", "name": "李云龙"},
{"id": "2", "name": "楚云飞"}
];获取这样格式的内容
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1137
