dbsd_kczx/src/views/kc/kcZzXstkb/components/KcZzXstkbForm.vue

318 lines
14 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<a-spin :spinning="confirmLoading">
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :model="formData" :rules="validatorRules">
<a-row>
<a-col :span="4" style="height: 80px;line-height: 80px;text-align: center;">
<a-button type="primary" @click="checkTeacher" style="font-size:20px;height: 50px;">匹配教师数据</a-button>
</a-col>
<a-col :span="20">
<a-row>
<a-col :span="8" style="margin-top: 20px;">
<a-form-item label="评课教师姓名" v-bind="validateInfos.tkjsxm">
<a-input v-model:value="formData.tkjsxm" placeholder="请输入评课教师姓名" disabled></a-input>
</a-form-item>
</a-col>
<a-col :span="8" style="margin-top: 20px;">
<a-form-item label="工号" v-bind="validateInfos.tkjsgh">
<a-input v-model:value="formData.tkjsgh" placeholder="请输入工号" disabled="true"></a-input>
</a-form-item>
</a-col>
<a-col :span="8" style="margin-top: 20px;">
<a-form-item label="评课时间" v-bind="validateInfos.tksj">
<a-date-picker placeholder="请选择评课时间" v-model:value="formData.tksj" value-format="YYYY-MM-DD" style="width: 100%" :disabled="disabled"/>
</a-form-item>
</a-col>
</a-row>
</a-col>
<a-col :span="4" style="height: 80px;line-height: 80px;text-align: center;">
<a-button type="primary" @click="handleJyktsj" style="font-size:20px;height: 50px;">匹配课堂数据</a-button>
</a-col>
<a-col :span="20">
<a-row>
<a-col :span="8">
<a-form-item label="课程名称" v-bind="validateInfos.kcmc">
<a-input v-model:value="formData.kcmc" placeholder="请输入课程名称" :disabled="true"></a-input>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="课程编号" v-bind="validateInfos.kcbh">
<a-input v-model:value="formData.kcbh" placeholder="请输入课程编号" :disabled="true"></a-input>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="授课时间" v-bind="validateInfos.sksj">
<a-date-picker placeholder="请选择授课时间" v-model:value="formData.sksj" value-format="YYYY-MM-DD" style="width: 100%" :disabled="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="授课教师" v-bind="validateInfos.skjs">
<a-input v-model:value="formData.skjs" placeholder="请输入授课教师" :disabled="true"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="上课地点" v-bind="validateInfos.skdd" :labelCol="labelCol3" :wrapperCol="wrapperCol3">
<a-input v-model:value="formData.skdd" placeholder="请输入上课地点" :disabled="true"></a-input>
</a-form-item>
</a-col>
</a-row>
</a-col>
<a-col :span="24">
<a-form-item label="1.声音和画面情况" v-bind="validateInfos.ans1" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
<j-dict-select-tag type='radio' v-model:value="formData.ans1" :dictCode="`kc_evaluationans,content,ordernum,queid = '11' order by ordernum asc`" placeholder="请选择1.声音和画面情况" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="2.ppt等课件情况" v-bind="validateInfos.ans2" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
<j-dict-select-tag type='radio' v-model:value="formData.ans2" :dictCode="`kc_evaluationans,content,ordernum,queid = '12' order by ordernum asc`" placeholder="请选择2.ppt等课件情况" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="3.教师出镜情况" v-bind="validateInfos.ans3" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
<j-dict-select-tag type='radio' v-model:value="formData.ans3" :dictCode="`kc_evaluationans,content,ordernum,queid = '13' order by ordernum asc`" placeholder="请选择3.教师出镜情况" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="4.以下那些描述符合本节课的教学实际情况(多选)" v-bind="validateInfos.ans4" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
<!-- <j-dict-select-tag type='checkbox' v-model:value="formData.ans4" :dictCode="`kc_evaluationans,content,ordernum,queid = '5' order by ordernum asc`" placeholder="请选择4.教师仪态仪表方面" :disabled="disabled"/> -->
<j-checkbox type="checkbox" v-model:value="formData.ans4" :dictCode="`kc_evaluationans,content,ordernum,queid = '14' order by ordernum asc`" placeholder="请选择授课周次" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="5.学生出席情况" v-bind="validateInfos.ans5" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
<j-dict-select-tag type='radio' v-model:value="formData.ans5" :dictCode="`kc_evaluationans,content,ordernum,queid = '15' order by ordernum asc`" placeholder="请选择5.教师所在环境情况" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="6.学生参与课堂活动情况" v-bind="validateInfos.ans6" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
<j-dict-select-tag type='radio' v-model:value="formData.ans6" :dictCode="`kc_evaluationans,content,ordernum,queid = '16' order by ordernum asc`" placeholder="请选择6.学生出席情况" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="7.如果让您给本节课打分5分是满分您给打几分" v-bind="validateInfos.ans7" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
<j-dict-select-tag type='radio' v-model:value="formData.ans7" :dictCode="`kc_evaluationans,content,ordernum,queid = '17' order by ordernum asc`" placeholder="请选择7.课堂秩序情况" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="8.您认为该课堂值得肯定的方面" v-bind="validateInfos.ans8" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
<a-textarea v-model:value="formData.ans8" rows="4" placeholder="您认为该课堂值得肯定的方面" :disabled="disabled"/>
<!-- <j-dict-select-tag type='radio' v-model:value="formData.ans8" :dictCode="`kc_evaluationans,content,ordernum,queid = '9' order by ordernum asc`" placeholder="请选择8.课堂教学互动情况" :disabled="disabled"/> -->
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="9.您认为该课堂需要改进的方面" v-bind="validateInfos.ans9" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
<a-textarea v-model:value="formData.ans9" rows="4" placeholder="您认为该课堂需要改进的方面" :disabled="disabled"/>
<!-- <j-dict-select-tag type='radio' v-model:value="formData.ans9" :dictCode="`kc_evaluationans,content,ordernum,queid = '10' order by ordernum asc`" placeholder="请选择9.过程性评价情况" :disabled="disabled"/> -->
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="10.其它建议" v-bind="validateInfos.pjnr" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
<a-textarea v-model:value="formData.pjnr" rows="4" placeholder="其它建议" :disabled="disabled"/>
<!-- <j-dict-select-tag type='radio' v-model:value="formData.ztpj" :dictCode="`kc_evaluationans,content,ordernum,queid = '1' order by ordernum asc`" placeholder="请选择总体评价" :disabled="disabled"/> -->
</a-form-item>
</a-col>
<!-- <a-col :span="24">
<a-form-item label="您认为课堂值得肯定的方面或者需要改进的方面" v-bind="validateInfos.pjnr" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
<a-textarea v-model:value="formData.pjnr" rows="4" placeholder="请输入您认为课堂值得肯定的方面或者需要改进的方面" :disabled="disabled"/>
</a-form-item>
</a-col> -->
</a-row>
</a-form>
<KcKetangbiaoListModal ref="KcKetangbiaoListModalPage" @success="handleSuccess"></KcKetangbiaoListModal>
<CheckUserToolModal ref="CheckUserToolModalRef" @success="userSuccess"/>
</a-spin>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../KcZzXstkb.api';
import { Form } from 'ant-design-vue';
import KcKetangbiaoListModal from '/@/views/kc/ketang/KcKetangbiaoListModal.vue'
import JCheckbox from "/@/components/Form/src/jeecg/components/JCheckbox.vue";
import CheckUserToolModal from '/@/views/kc/kcTingkeBmd/checkuser/CheckUserToolModal.vue';
const KcKetangbiaoListModalPage = ref();
const CheckUserToolModalRef = ref();
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: ()=>{} },
formBpm: { type: Boolean, default: true }
});
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
id: '',
kcbh: '',
kcmc: '',
skjs: '',
sksj: '',
skdd: '',
tkjsxm: '',
tkjsgh: '',
tksj: '',
ans1: '',
ans2: '',
ans3: '',
ans4: '',
ans5: '',
ans6: '',
ans7: '',
ans8: '',
ans9: '',
ztpj: '',
pjnr: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 10 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 14 } });
const labelCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 8 } });
const wrapperCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const labelCol3 = ref<any>({ xs: { span: 24 }, sm: { span: 6 } });
const wrapperCol3 = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = {
kcmc: [{ required: true, message: '请输入文本!' }],
// kcbh: [{ required: true, message: '请输入文本!' }],
skjs : [{ required: true, message: '请输入文本!' }],
tkjsxm : [{ required: true, message: '请输入文本!' }],
tkjsgh : [{ required: true, message: '请输入文本!' }],
sksj : [{ required: true, message: '请输入文本!' }],
skdd : [{ required: true, message: '请输入文本!' }],
tksj: [{ required: true, message: '请输入文本!' }],
// ztpj: [{ required: true, message: '请输入文本!' }],
ans7: [{ required: true, message: '请输入文本!' }],
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
// 表单禁用
const disabled = computed(()=>{
if(props.formBpm === true){
if(props.formData.disabled === false){
return false;
}else{
return true;
}
}
return props.formDisabled;
});
//选择教师
function checkTeacher(){
CheckUserToolModalRef.value.add("选择教师")
}
//教师回显
function userSuccess(par){
console.log(`🚀 ~ userSuccess ~ par:`, par)
formData.tkjsxm = par.xm;
formData.tkjsgh = par.gh;
}
/**
* 校验课堂数据
*/
async function handleJyktsj() {
KcKetangbiaoListModalPage.value.add("一版听课表")
}
/**
* 获取教师编号
*/
async function handleHqjsbh() {
var url = "/grab/imports/xxhbshryxx/getTeacherinfo";
var params = {xm:formData.tkjsxm};
const data = await defHttp.get({ url, params }, {isTransformResponse: false});
console.log(`🚀 ~ file: KcZzYbtkbForm.vue:187 ~ handleHqjsbh ~ data:`, data)
if (data.result) {
formData.tkjsgh = data.result.gh;
}else{
formData.tkjsgh = "";
createMessage.warning("未查到教师信息");
}
}
function handleSuccess(par){
console.log(`🚀 ~ file: KcZzYbtkbForm.vue:232 ~ handleSuccess ~ par:`, par)
formData.kcmc = par.kcmc;
formData.skjs = par.skjs;
formData.sksj = par.skrq;
formData.skdd = par.skdd;
formData.kcbh = par.kcbh;
}
/**
* 新增
*/
function add() {
edit({});
}
/**
* 编辑
*/
function edit(record) {
nextTick(() => {
resetFields();
//赋值
Object.assign(formData, record);
});
}
/**
* 提交数据
*/
async function submitForm() {
// 触发表单验证
await validate();
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
//时间格式化
let model = formData;
if (model.id) {
isUpdate.value = true;
}
//循环数据
for (let data in model) {
//如果该数据是数组并且是字符串类型
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
//如果是字符串类型的需要变成以逗号分割的字符串
if (valueType === 'string') {
model[data] = model[data].join(',');
}
}
}
await saveOrUpdate(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
confirmLoading.value = false;
});
}
defineExpose({
add,
edit,
submitForm,
});
</script>
<style lang="less" scoped>
.antd-modal-form {
min-height: 500px !important;
overflow-y: auto;
padding: 24px 24px 24px 24px;
}
</style>