iailab-plat.git

Merge remote-tracking branch 'origin/master'

潘志宝

3 天以前 af7bd200a95b9fc6b8b3f3fc603d612221e21fc7

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