dbsd_kczx/src/views/kc/szkc/components/KcKechengbiaoForm.vue

292 lines
11 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">
<a-row>
<a-col :span="12">
<a-form-item label="课程号" v-bind="validateInfos.kcbh">
<a-input v-model:value="formData.kcbh" placeholder="请输入课程号" :disabled="disabled"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="课程名称" v-bind="validateInfos.kcmc">
<a-input v-model:value="formData.kcmc" placeholder="请输入课程名称" :disabled="disabled"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="学分" v-bind="validateInfos.xf">
<a-input v-model:value="formData.xf" placeholder="请输入学分" :disabled="disabled"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="授课教师" v-bind="validateInfos.skjs">
<!-- <j-dict-select-tag v-model:value="formData.skjs" dictCode="" placeholder="请选择授课教师" :disabled="disabled"/> -->
<!-- :formElRef="formRef" -->
<JPopup
placeholder="请选择授课教师"
v-model:value="formData.skjs"
code="selectTeacherLilst"
:param="{}"
:field-config="[
{ source: 'id', target: 'id' },
{ source: 'user', target: 'user' },
{ source: 'cn', target: 'cn' },
{ source: 'collegecode', target: 'collegecode' },
{ source: 'college', target: 'college' },
{ source: 'csrq', target: 'csrq' },
{ source: 'sfzxm', target: 'sfzxm' },
{ source: 'zdxms', target: 'zdxms' },
]"
:setFieldsValue="updateSkjsFn"
:multi="false"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="星期" v-bind="validateInfos.week">
<j-dict-select-tag v-model:value="formData.week" dictCode="week" placeholder="请选择星期" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="节次" v-bind="validateInfos.hh">
<j-dict-select-tag v-model:value="formData.hh" dictCode="skjc" placeholder="请选择节次" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="选课人数" v-bind="validateInfos.xkrs">
<a-input v-model:value="formData.xkrs" placeholder="请输入选课人数" :disabled="disabled"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="课程性质" v-bind="validateInfos.kcxz">
<!-- <a-input v-model:value="formData.kcxz" placeholder="请输入课程性质" :disabled="disabled"></a-input> -->
<j-dict-select-tag v-model:value="formData.kcxz" dictCode="kcxz" placeholder="请选择课程性质" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="上课周次" v-bind="validateInfos.jkzc">
<j-checkbox type="checkbox" v-model:value="formData.jkzc" dictCode="skzc" placeholder="请选择上课周次" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="开课单位" v-bind="validateInfos.kkdw">
<j-dict-select-tag v-model:value="formData.kkdw" dictCode="kc_kkdw_view,kkdw,id" placeholder="请选择开课单位" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="授课平台" v-bind="validateInfos.zbfs">
<j-dict-select-tag v-model:value="formData.zbfs" dictCode="skpt" placeholder="请选择授课平台" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="会议号" v-bind="validateInfos.hyh">
<a-input v-model:value="formData.hyh" placeholder="请输入会议号" :disabled="disabled"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="会议密码" v-bind="validateInfos.hymm">
<a-input v-model:value="formData.hymm" placeholder="请输入会议密码" :disabled="disabled"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="课程链接" v-bind="validateInfos.kclj">
<a-input v-model:value="formData.kclj" placeholder="请输入课程链接" :disabled="disabled"></a-input>
</a-form-item>
</a-col>
<!--
<a-col :span="12">
<a-form-item label="上课地点" v-bind="validateInfos.skdd">
<a-input v-model:value="formData.skdd" placeholder="请输入上课地点" :disabled="disabled"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="是否出镜0-出镜1-不出镜" v-bind="validateInfos.sfcj">
<a-input-number v-model:value="formData.sfcj" placeholder="请输入是否出镜0-出镜1-不出镜" style="width: 100%" :disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="上课形式0-线上1-线下2-线上线下混合" v-bind="validateInfos.skxs">
<a-input-number v-model:value="formData.skxs" placeholder="请输入上课形式0-线上1-线下2-线上线下混合" style="width: 100%" :disabled="disabled"/>
</a-form-item>
</a-col> -->
</a-row>
</a-form>
</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 JCheckbox from "/@/components/Form/src/jeecg/components/JCheckbox.vue";
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../KcKechengbiao.api';
import { Form } from 'ant-design-vue';
import { duplicateValidate } from '/@/utils/helper/validator'
// import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue'
import { JPopup } from '/@/components/Form';
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: '',
xkrs: '',
kkdw: '',
kcxz: '',
skdd: '',
jkzc: '',
hh: '',
week: '',
zbfs: '',
hyh: '',
hymm: '',
kclj: '',
xf: '',
sfcj: undefined,
skxs: undefined,
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ style: { width: '150px' } });
const wrapperCol = ref<any>({ style: { width: '100%' } });
const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = {
kcbh: [{ required: true, message: '请输入课程号!'}, { validator: kcbhDuplicatevalidate }],
kcmc: [{ required: true, message: '请输入课程名称!'},],
skjs: [{ required: true, message: '请输入授课教师!'},],
xkrs: [{ required: true, message: '请输入选课人数!'},],
kkdw: [{ required: true, message: '请输入开课单位!'},],
kcxz: [{ required: true, message: '请输入课程性质!'},],
jkzc: [{ required: true, message: '请输入上课周次!'},],
hh: [{ required: true, message: '请输入节次!'},],
week: [{ required: true, message: '请输入星期!'},],
xf: [{ 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 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;
});
}
function updateSkjsFn(selectRow) {
console.log(`🚀 -----------------------------------------------------------------🚀`);
console.log(`🚀 ~ file: KcKechengbiaoForm.vue:249 ~ updateSkjsFn ~ ...d:`, selectRow);
console.log(`🚀 -----------------------------------------------------------------🚀`);
let { id, user, cn, collegecode, college, csrq, sfzxm, zdxms } = selectRow;
formData.skjs = cn;
formData.zc = zdxms;
formData.jgh = user;
// formData.skjs
// cn
// "白成国"
// college
// "历史文化学院"
// collegecode
// "166000"
// csrq
// "19561115"
// id
// "114135"
// sfzxm
// "1"
// user
// "1000900003"
// zdxms
// "讲师(高校)"
}
async function kcbhDuplicatevalidate(_r, value) {
return duplicateValidate('kc_kechengbiao', 'kcbh', value, formData.id || '')
}
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>