iailab-plat.git

houzhongyi

2024-07-11 e7c1260db32209a078a962aaa0ad5492c35774fb

提交 \| 用户 \| 时间
e7c126	1	#set ($subTable = $subTables.get($subIndex))##当前表
H	2	#set ($subColumns = $subColumnsList.get($subIndex))##当前字段数组
	3	#set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
	4	#set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
	5	#set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
	6	#set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
	7	<template>
	8	#if ( $subTable.subJoinMany )## 情况一：一对多，table + form
	9	<el-form
	10	ref="formRef"
	11	:model="formData"
	12	:rules="formRules"
	13	v-loading="formLoading"
	14	label-width="0px"
	15	:inline-message="true"
	16	>
	17	<el-table :data="formData" class="-mt-10px">
	18	<el-table-column label="序号" type="index" width="100" />
	19	#foreach($column in $subColumns)
	20	#if ($column.createOperation \|\| $column.updateOperation)
	21	#set ($dictType = $column.dictType)
	22	#set ($javaField = $column.javaField)
	23	#set ($javaType = $column.javaType)
	24	#set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
	25	#set ($comment = $column.columnComment)
	26	#set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法
	27	#if ($javaType == "Integer" \|\| $javaType == "Long" \|\| $javaType == "Byte" \|\| $javaType == "Short")
	28	#set ($dictMethod = "getIntDictOptions")
	29	#elseif ($javaType == "String")
	30	#set ($dictMethod = "getStrDictOptions")
	31	#elseif ($javaType == "Boolean")
	32	#set ($dictMethod = "getBoolDictOptions")
	33	#end
	34	#if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写
	35	#elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
	36	<el-table-column label="${comment}" min-width="150">
	37	<template #default="{ row, $index }">
	38	<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
	39	<el-input v-model="row.${javaField}" placeholder="请输入${comment}" />
	40	</el-form-item>
	41	</template>
	42	</el-table-column>
	43	#elseif($column.htmlType == "imageUpload")## 图片上传
	44	<el-table-column label="${comment}" min-width="200">
	45	<template #default="{ row, $index }">
	46	<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
	47	<UploadImg v-model="row.${javaField}" />
	48	</el-form-item>
	49	</template>
	50	</el-table-column>
	51	#elseif($column.htmlType == "fileUpload")## 文件上传
	52	<el-table-column label="${comment}" min-width="200">
	53	<template #default="{ row, $index }">
	54	<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
	55	<UploadFile v-model="row.${javaField}" />
	56	</el-form-item>
	57	</template>
	58	</el-table-column>
	59	#elseif($column.htmlType == "editor")## 文本编辑器
	60	<el-table-column label="${comment}" min-width="400">
	61	<template #default="{ row, $index }">
	62	<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
	63	<Editor v-model="row.${javaField}" height="150px" />
	64	</el-form-item>
	65	</template>
	66	</el-table-column>
	67	#elseif($column.htmlType == "select")## 下拉框
	68	<el-table-column label="${comment}" min-width="150">
	69	<template #default="{ row, $index }">
	70	<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
	71	<el-select v-model="row.${javaField}" placeholder="请选择${comment}">
	72	#if ("" != $dictType)## 有数据字典
	73	<el-option
	74	v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
	75	:key="dict.value"
	76	:label="dict.label"
	77	:value="dict.value"
	78	/>
	79	#else##没数据字典
	80	<el-option label="请选择字典生成" value="" />
	81	#end
	82	</el-select>
	83	</el-form-item>
	84	</template>
	85	</el-table-column>
	86	#elseif($column.htmlType == "checkbox")## 多选框
	87	<el-table-column label="${comment}" min-width="150">
	88	<template #default="{ row, $index }">
	89	<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
	90	<el-checkbox-group v-model="row.${javaField}">
	91	#if ("" != $dictType)## 有数据字典
	92	<el-checkbox
	93	v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
	94	:key="dict.value"
	95	:label="dict.value"
	96	>
	97	{{ dict.label }}
	98	</el-checkbox>
	99	#else##没数据字典
	100	<el-checkbox>请选择字典生成</el-checkbox>
	101	#end
	102	</el-checkbox-group>
	103	</el-form-item>
	104	</template>
	105	</el-table-column>
	106	#elseif($column.htmlType == "radio")## 单选框
	107	<el-table-column label="${comment}" min-width="150">
	108	<template #default="{ row, $index }">
	109	<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
	110	<el-radio-group v-model="row.${javaField}">
	111	#if ("" != $dictType)## 有数据字典
	112	<el-radio
	113	v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
	114	:key="dict.value"
	115	:label="dict.value"
	116	>
	117	{{ dict.label }}
	118	</el-radio>
	119	#else##没数据字典
	120	<el-radio label="1">请选择字典生成</el-radio>
	121	#end
	122	</el-radio-group>
	123	</el-form-item>
	124	</template>
	125	</el-table-column>
	126	#elseif($column.htmlType == "datetime")## 时间框
	127	<el-table-column label="${comment}" min-width="150">
	128	<template #default="{ row, $index }">
	129	<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
	130	<el-date-picker
	131	v-model="row.${javaField}"
	132	type="date"
	133	value-format="x"
	134	placeholder="选择${comment}"
	135	/>
	136	</el-form-item>
	137	</template>
	138	</el-table-column>
	139	#elseif($column.htmlType == "textarea")## 文本框
	140	<el-table-column label="${comment}" min-width="200">
	141	<template #default="{ row, $index }">
	142	<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
	143	<el-input v-model="row.${javaField}" type="textarea" placeholder="请输入${comment}" />
	144	</el-form-item>
	145	</template>
	146	</el-table-column>
	147	#end
	148	#end
	149	#end
	150	<el-table-column align="center" fixed="right" label="操作" width="60">
	151	<template #default="{ $index }">
	152	<el-button @click="handleDelete($index)" link>—</el-button>
	153	</template>
	154	</el-table-column>
	155	</el-table>
	156	</el-form>
	157	<el-row justify="center" class="mt-3">
	158	<el-button @click="handleAdd" round>+ 添加${subTable.classComment}</el-button>
	159	</el-row>
	160	#else## 情况二：一对一，form
	161	<el-form
	162	ref="formRef"
	163	:model="formData"
	164	:rules="formRules"
	165	label-width="100px"
	166	v-loading="formLoading"
	167	>
	168	#foreach($column in $subColumns)
	169	#if ($column.createOperation \|\| $column.updateOperation)
	170	#set ($dictType = $column.dictType)
	171	#set ($javaField = $column.javaField)
	172	#set ($javaType = $column.javaType)
	173	#set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
	174	#set ($comment = $column.columnComment)
	175	#set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法
	176	#if ($javaType == "Integer" \|\| $javaType == "Long" \|\| $javaType == "Byte" \|\| $javaType == "Short")
	177	#set ($dictMethod = "getIntDictOptions")
	178	#elseif ($javaType == "String")
	179	#set ($dictMethod = "getStrDictOptions")
	180	#elseif ($javaType == "Boolean")
	181	#set ($dictMethod = "getBoolDictOptions")
	182	#end
	183	#if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写
	184	#elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
	185	<el-form-item label="${comment}" prop="${javaField}">
	186	<el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
	187	</el-form-item>
	188	#elseif($column.htmlType == "imageUpload")## 图片上传
	189	<el-form-item label="${comment}" prop="${javaField}">
	190	<UploadImg v-model="formData.${javaField}" />
	191	</el-form-item>
	192	#elseif($column.htmlType == "fileUpload")## 文件上传
	193	<el-form-item label="${comment}" prop="${javaField}">
	194	<UploadFile v-model="formData.${javaField}" />
	195	</el-form-item>
	196	#elseif($column.htmlType == "editor")## 文本编辑器
	197	<el-form-item label="${comment}" prop="${javaField}">
	198	<Editor v-model="formData.${javaField}" height="150px" />
	199	</el-form-item>
	200	#elseif($column.htmlType == "select")## 下拉框
	201	<el-form-item label="${comment}" prop="${javaField}">
	202	<el-select v-model="formData.${javaField}" placeholder="请选择${comment}">
	203	#if ("" != $dictType)## 有数据字典
	204	<el-option
	205	v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
	206	:key="dict.value"
	207	:label="dict.label"
	208	:value="dict.value"
	209	/>
	210	#else##没数据字典
	211	<el-option label="请选择字典生成" value="" />
	212	#end
	213	</el-select>
	214	</el-form-item>
	215	#elseif($column.htmlType == "checkbox")## 多选框
	216	<el-form-item label="${comment}" prop="${javaField}">
	217	<el-checkbox-group v-model="formData.${javaField}">
	218	#if ("" != $dictType)## 有数据字典
	219	<el-checkbox
	220	v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
	221	:key="dict.value"
	222	:label="dict.value"
	223	>
	224	{{ dict.label }}
	225	</el-checkbox>
	226	#else##没数据字典
	227	<el-checkbox>请选择字典生成</el-checkbox>
	228	#end
	229	</el-checkbox-group>
	230	</el-form-item>
	231	#elseif($column.htmlType == "radio")## 单选框
	232	<el-form-item label="${comment}" prop="${javaField}">
	233	<el-radio-group v-model="formData.${javaField}">
	234	#if ("" != $dictType)## 有数据字典
	235	<el-radio
	236	v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
	237	:key="dict.value"
	238	:label="dict.value"
	239	>
	240	{{ dict.label }}
	241	</el-radio>
	242	#else##没数据字典
	243	<el-radio label="1">请选择字典生成</el-radio>
	244	#end
	245	</el-radio-group>
	246	</el-form-item>
	247	#elseif($column.htmlType == "datetime")## 时间框
	248	<el-form-item label="${comment}" prop="${javaField}">
	249	<el-date-picker
	250	v-model="formData.${javaField}"
	251	type="date"
	252	value-format="x"
	253	placeholder="选择${comment}"
	254	/>
	255	</el-form-item>
	256	#elseif($column.htmlType == "textarea")## 文本框
	257	<el-form-item label="${comment}" prop="${javaField}">
	258	<el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
	259	</el-form-item>
	260	#end
	261	#end
	262	#end
	263	</el-form>
	264	#end
	265	</template>
	266	<script setup lang="ts">
	267	import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
	268	import { ${simpleClassName}Api } from '@/api/${table.moduleName}/${table.businessName}'
	269
	270	const props = defineProps<{
	271	${subJoinColumn.javaField}: undefined // ${subJoinColumn.columnComment}（主表的关联字段）
	272	}>()
	273	const formLoading = ref(false) // 表单的加载中
	274	const formData = ref([])
	275	const formRules = reactive({
	276	#foreach ($column in $subColumns)
	277	#if (($column.createOperation \|\| $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
	278	#set($comment=$column.columnComment)
	279	$column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
	280	#end
	281	#end
	282	})
	283	const formRef = ref() // 表单 Ref
	284
	285	/** 监听主表的关联字段的变化，加载对应的子表数据 */
	286	watch(
	287	() => props.${subJoinColumn.javaField},
	288	async (val) => {
	289	// 1. 重置表单
	290	#if ( $subTable.subJoinMany )
	291	formData.value = []
	292	#else
	293	formData.value = {
	294	#foreach ($column in $subColumns)
	295	#if ($column.createOperation \|\| $column.updateOperation)
	296	#if ($column.htmlType == "checkbox")
	297	$column.javaField: [],
	298	#else
	299	$column.javaField: undefined,
	300	#end
	301	#end
	302	#end
	303	}
	304	#end
	305	// 2. val 非空，则加载数据
	306	if (!val) {
	307	return;
	308	}
	309	try {
	310	formLoading.value = true
	311	#if ( $subTable.subJoinMany )
	312	formData.value = await ${simpleClassName}Api.get${subSimpleClassName}ListBy${SubJoinColumnName}(val)
	313	#else
	314	const data = await ${simpleClassName}Api.get${subSimpleClassName}By${SubJoinColumnName}(val)
	315	if (!data) {
	316	return
	317	}
	318	formData.value = data
	319	#end
	320	} finally {
	321	formLoading.value = false
	322	}
	323	},
	324	{ immediate: true }
	325	)
	326	#if ( $subTable.subJoinMany )
	327
	328	/** 新增按钮操作 */
	329	const handleAdd = () => {
	330	const row = {
	331	#foreach ($column in $subColumns)
	332	#if ($column.createOperation \|\| $column.updateOperation)
	333	#if ($column.htmlType == "checkbox")
	334	$column.javaField: [],
	335	#else
	336	$column.javaField: undefined,
	337	#end
	338	#end
	339	#end
	340	}
	341	row.${subJoinColumn.javaField} = props.${subJoinColumn.javaField}
	342	formData.value.push(row)
	343	}
	344
	345	/** 删除按钮操作 */
	346	const handleDelete = (index) => {
	347	formData.value.splice(index, 1)
	348	}
	349	#end
	350
	351	/** 表单校验 */
	352	const validate = () => {
	353	return formRef.value.validate()
	354	}
	355
	356	/** 表单值 */
	357	const getData = () => {
	358	return formData.value
	359	}
	360
	361	defineExpose({ validate, getData })
	362	</script>