iailab-plat.git

Merge remote-tracking branch 'origin/master'

潘志宝

2024-11-14 afa8fc57084c423218c6816b710dfb2f0b87ea89

提交 \| 用户 \| 时间
e7c126	1	<template>
H	2	<div class="app-container">
	3	<!-- 对话框(添加 / 修改) -->
	4	<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
	5	<el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
	6	<el-form-item label="名字" prop="name">
	7	<el-input v-model="formData.name" placeholder="请输入名字" />
	8	</el-form-item>
	9	<el-form-item label="简介" prop="description">
	10	<el-input v-model="formData.description" type="textarea" placeholder="请输入内容" />
	11	</el-form-item>
	12	<el-form-item label="出生日期" prop="birthday">
	13	<el-date-picker clearable v-model="formData.birthday" type="date" value-format="timestamp" placeholder="选择出生日期" />
	14	</el-form-item>
	15	<el-form-item label="性别" prop="sex">
	16	<el-select v-model="formData.sex" placeholder="请选择性别">
	17	<el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
	18	:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
	19	</el-select>
	20	</el-form-item>
	21	<el-form-item label="是否有效" prop="enabled">
	22	<el-radio-group v-model="formData.enabled">
	23	<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_BOOLEAN_STRING)"
	24	:key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
	25	</el-radio-group>
	26	</el-form-item>
	27	<el-form-item label="头像">
	28	<ImageUpload v-model="formData.avatar"/>
	29	</el-form-item>
	30	<el-form-item label="附件">
	31	<FileUpload v-model="formData.video"/>
	32	</el-form-item>
	33	<el-form-item label="备注">
	34	<Editor v-model="formData.memo" :min-height="192"/>
	35	</el-form-item>
	36	</el-form>
	37	<!-- 子表的表单 -->
	38	<el-tabs v-model="subTabsName">
	39	<el-tab-pane label="学生联系人" name="studentContact">
	40	<StudentContactForm ref="studentContactFormRef" :student-id="formData.id" />
	41	</el-tab-pane>
	42	<el-tab-pane label="学生班主任" name="studentTeacher">
	43	<StudentTeacherForm ref="studentTeacherFormRef" :student-id="formData.id" />
	44	</el-tab-pane>
	45	</el-tabs>
	46	<div slot="footer" class="dialog-footer">
	47	<el-button type="primary" @click="submitForm" :disabled="formLoading">确定</el-button>
	48	<el-button @click="dialogVisible = false">取消</el-button>
	49	</div>
	50	</el-dialog>
	51	</div>
	52	</template>
	53
	54	<script>
	55	import * as StudentApi from '@/api/infra/demo';
	56	import ImageUpload from '@/components/ImageUpload';
	57	import FileUpload from '@/components/FileUpload';
	58	import Editor from '@/components/Editor';
	59	import StudentContactForm from './components/StudentContactForm.vue'
	60	import StudentTeacherForm from './components/StudentTeacherForm.vue'
	61	export default {
	62	name: "StudentForm",
	63	components: {
	64	ImageUpload,
	65	FileUpload,
	66	Editor,
	67	StudentContactForm,
	68	StudentTeacherForm,
	69	},
	70	data() {
	71	return {
	72	// 弹出层标题
	73	dialogTitle: "",
	74	// 是否显示弹出层
	75	dialogVisible: false,
	76	// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	77	formLoading: false,
	78	// 表单参数
	79	formData: {
	80	id: undefined,
	81	name: undefined,
	82	description: undefined,
	83	birthday: undefined,
	84	sex: undefined,
	85	enabled: undefined,
	86	avatar: undefined,
	87	video: undefined,
	88	memo: undefined,
	89	},
	90	// 表单校验
	91	formRules: {
	92	name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
	93	description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
	94	birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
	95	sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
	96	enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
	97	avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
	98	video: [{ required: true, message: '附件不能为空', trigger: 'blur' }],
	99	memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
	100	},
	101	/** 子表的表单 */
	102	subTabsName: 'studentContact'
	103	};
	104	},
	105	methods: {
	106	/** 打开弹窗 */
	107	async open(id) {
	108	this.dialogVisible = true;
	109	this.reset();
	110	// 修改时，设置数据
	111	if (id) {
	112	this.formLoading = true;
	113	try {
	114	const res = await StudentApi.getStudent(id);
	115	this.formData = res.data;
	116	this.title = "修改学生";
	117	} finally {
	118	this.formLoading = false;
	119	}
	120	}
	121	this.title = "新增学生";
	122	},
	123	/** 提交按钮 */
	124	async submitForm() {
	125	// 校验主表
	126	await this.$refs["formRef"].validate();
	127	// 校验子表
	128	try {
	129	await this.$refs['studentContactFormRef'].validate();
	130	} catch (e) {
	131	this.subTabsName = 'studentContact';
	132	return;
	133	}
	134	try {
	135	await this.$refs['studentTeacherFormRef'].validate();
	136	} catch (e) {
	137	this.subTabsName = 'studentTeacher';
	138	return;
	139	}
	140	this.formLoading = true;
	141	try {
	142	const data = this.formData;
	143	// 拼接子表的数据
	144	data.studentContacts = this.$refs['studentContactFormRef'].getData();
	145	data.studentTeacher = this.$refs['studentTeacherFormRef'].getData();
	146	// 修改的提交
	147	if (data.id) {
	148	await StudentApi.updateStudent(data);
	149	this.$modal.msgSuccess("修改成功");
	150	this.dialogVisible = false;
	151	this.$emit('success');
	152	return;
	153	}
	154	// 添加的提交
	155	await StudentApi.createStudent(data);
	156	this.$modal.msgSuccess("新增成功");
	157	this.dialogVisible = false;
	158	this.$emit('success');
	159	} finally {
	160	this.formLoading = false;
	161	}
	162	},
	163	/** 表单重置 */
	164	reset() {
	165	this.formData = {
	166	id: undefined,
	167	name: undefined,
	168	description: undefined,
	169	birthday: undefined,
	170	sex: undefined,
	171	enabled: undefined,
	172	avatar: undefined,
	173	video: undefined,
	174	memo: undefined,
	175	};
	176	this.resetForm("formRef");
	177	}
	178	}
	179	};
	180	</script>