iailab-plat.git

dongyukun

9 天以前 95066d1bdaf67f414f01d1686e7ea9c0ebc07e26

提交 \| 用户 \| 时间
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	#foreach($column in $columns)
	7	#if ($column.createOperation \|\| $column.updateOperation)
	8	#set ($dictType = $column.dictType)
	9	#set ($javaField = $column.javaField)
	10	#set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
	11	#set ($comment = $column.columnComment)
	12	#if ( $table.templateType == 2 && $column.id == $treeParentColumn.id )
	13	<el-form-item label="${comment}" prop="${javaField}">
	14	<TreeSelect
	15	v-model="formData.${javaField}"
	16	:options="${classNameVar}Tree"
	17	:normalizer="normalizer"
	18	placeholder="请选择${comment}"
	19	/>
	20	</el-form-item>
	21	#elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
	22	<el-form-item label="${comment}" prop="${javaField}">
	23	<el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
	24	</el-form-item>
	25	#elseif($column.htmlType == "imageUpload")## 图片上传
	26	#set ($hasImageUploadColumn = true)
	27	<el-form-item label="${comment}">
	28	<ImageUpload v-model="formData.${javaField}"/>
	29	</el-form-item>
	30	#elseif($column.htmlType == "fileUpload")## 文件上传
	31	#set ($hasFileUploadColumn = true)
	32	<el-form-item label="${comment}">
	33	<FileUpload v-model="formData.${javaField}"/>
	34	</el-form-item>
	35	#elseif($column.htmlType == "editor")## 文本编辑器
	36	#set ($hasEditorColumn = true)
	37	<el-form-item label="${comment}">
	38	<Editor v-model="formData.${javaField}" :min-height="192"/>
	39	</el-form-item>
	40	#elseif($column.htmlType == "select")## 下拉框
	41	<el-form-item label="${comment}" prop="${javaField}">
	42	<el-select v-model="formData.${javaField}" placeholder="请选择${comment}">
	43	#if ("" != $dictType)## 有数据字典
	44	<el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
	45	:key="dict.value" :label="dict.label" #if ($column.javaType == "Integer" \|\| $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end />
	46	#else##没数据字典
	47	<el-option label="请选择字典生成" value="" />
	48	#end
	49	</el-select>
	50	</el-form-item>
	51	#elseif($column.htmlType == "checkbox")## 多选框
	52	<el-form-item label="${comment}" prop="${javaField}">
	53	<el-checkbox-group v-model="formData.${javaField}">
	54	#if ("" != $dictType)## 有数据字典
	55	<el-checkbox v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
	56	:key="dict.value" #if($column.javaType == "Integer" \|\| $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{dict.label}}</el-checkbox>
	57	#else##没数据字典
	58	<el-checkbox>请选择字典生成</el-checkbox>
	59	#end
	60	</el-checkbox-group>
	61	</el-form-item>
	62	#elseif($column.htmlType == "radio")## 单选框
	63	<el-form-item label="${comment}" prop="${javaField}">
	64	<el-radio-group v-model="formData.${javaField}">
	65	#if ("" != $dictType)## 有数据字典
	66	<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
	67	:key="dict.value" #if($column.javaType == "Integer" \|\| $column.javaType == "Long"):label="parseInt(dict.value)"
	68	#else:label="dict.value"#end>{{dict.label}}</el-radio>
	69	#else##没数据字典
	70	<el-radio label="1">请选择字典生成</el-radio>
	71	#end
	72	</el-radio-group>
	73	</el-form-item>
	74	#elseif($column.htmlType == "datetime")## 时间框
	75	<el-form-item label="${comment}" prop="${javaField}">
	76	<el-date-picker clearable v-model="formData.${javaField}" type="date" value-format="timestamp" placeholder="选择${comment}" />
	77	</el-form-item>
	78	#elseif($column.htmlType == "textarea")## 文本框
	79	<el-form-item label="${comment}" prop="${javaField}">
	80	<el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入内容" />
	81	</el-form-item>
	82	#end
	83	#end
	84	#end
	85	</el-form>
	86	## 特殊：主子表专属逻辑
	87	#if ( $table.templateType == 10 \|\| $table.templateType == 12 )
	88	<!-- 子表的表单 -->
	89	<el-tabs v-model="subTabsName">
	90	#foreach ($subTable in $subTables)
	91	#set ($index = $foreach.count - 1)
	92	#set ($subClassNameVar = $subClassNameVars.get($index))
	93	#set ($subSimpleClassName = $subSimpleClassNames.get($index))
	94	#set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
	95	<el-tab-pane label="${subTable.classComment}" name="$subClassNameVar">
	96	<${subSimpleClassName}Form ref="${subClassNameVar}FormRef" :${subJoinColumn_strikeCase}="formData.id" />
	97	</el-tab-pane>
	98	#end
	99	</el-tabs>
	100	#end
	101	<div slot="footer" class="dialog-footer">
	102	<el-button type="primary" @click="submitForm" :disabled="formLoading">确定</el-button>
	103	<el-button @click="dialogVisible = false">取消</el-button>
	104	</div>
	105	</el-dialog>
	106	</div>
	107	</template>
	108
	109	<script>
	110	import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}';
	111	#if ($hasImageUploadColumn)
	112	import ImageUpload from '@/components/ImageUpload';
	113	#end
	114	#if ($hasFileUploadColumn)
	115	import FileUpload from '@/components/FileUpload';
	116	#end
	117	#if ($hasEditorColumn)
	118	import Editor from '@/components/Editor';
	119	#end
	120	## 特殊：树表专属逻辑
	121	#if ( $table.templateType == 2 )
	122	import TreeSelect from "@riophae/vue-treeselect";
	123	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	124	#end
	125	## 特殊：主子表专属逻辑
	126	#if ( $table.templateType == 10 \|\| $table.templateType == 12 )
	127	#foreach ($subSimpleClassName in $subSimpleClassNames)
	128	import ${subSimpleClassName}Form from './components/${subSimpleClassName}Form.vue'
	129	#end
	130	#end
	131	export default {
	132	name: "${simpleClassName}Form",
	133	components: {
	134	#if ($hasImageUploadColumn)
	135	ImageUpload,
	136	#end
	137	#if ($hasFileUploadColumn)
	138	FileUpload,
	139	#end
	140	#if ($hasEditorColumn)
	141	Editor,
	142	#end
	143	## 特殊：树表专属逻辑
	144	#if ( $table.templateType == 2 )
	145	TreeSelect,
	146	#end
	147	## 特殊：主子表专属逻辑
	148	#if ( $table.templateType == 10 \|\| $table.templateType == 12 )
	149	#foreach ($subSimpleClassName in $subSimpleClassNames)
	150	${subSimpleClassName}Form,
	151	#end
	152	#end
	153	},
	154	data() {
	155	return {
	156	// 弹出层标题
	157	dialogTitle: "",
	158	// 是否显示弹出层
	159	dialogVisible: false,
	160	// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	161	formLoading: false,
	162	// 表单参数
	163	formData: {
	164	#foreach ($column in $columns)
	165	#if ($column.createOperation \|\| $column.updateOperation)
	166	#if ($column.htmlType == "checkbox")
	167	$column.javaField: [],
	168	#else
	169	$column.javaField: undefined,
	170	#end
	171	#end
	172	#end
	173	},
	174	// 表单校验
	175	formRules: {
	176	#foreach ($column in $columns)
	177	#if (($column.createOperation \|\| $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
	178	#set($comment=$column.columnComment)
	179	$column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
	180	#end
	181	#end
	182	},
	183	## 特殊：树表专属逻辑
	184	#if ( $table.templateType == 2 )
	185	${classNameVar}Tree: [], // 树形结构
	186	#end
	187	## 特殊：主子表专属逻辑
	188	#if ( $table.templateType == 10 \|\| $table.templateType == 12 )
	189	#if ( $subTables && $subTables.size() > 0 )
	190	/** 子表的表单 */
	191	subTabsName: '$subClassNameVars.get(0)'
	192	#end
	193	#end
	194	};
	195	},
	196	methods: {
	197	/** 打开弹窗 */
	198	async open(id) {
	199	this.dialogVisible = true;
	200	this.reset();
	201	// 修改时，设置数据
	202	if (id) {
	203	this.formLoading = true;
	204	try {
	205	const res = await ${simpleClassName}Api.get${simpleClassName}(id);
	206	this.formData = res.data;
	207	this.title = "修改${table.classComment}";
	208	} finally {
	209	this.formLoading = false;
	210	}
	211	}
	212	this.title = "新增${table.classComment}";
	213	## 特殊：树表专属逻辑
	214	#if ( $table.templateType == 2 )
	215	await this.get${simpleClassName}Tree();
	216	#end
	217	},
	218	/** 提交按钮 */
	219	async submitForm() {
	220	// 校验主表
	221	await this.$refs["formRef"].validate();
	222	## 特殊：主子表专属逻辑
	223	#if ( $table.templateType == 10 \|\| $table.templateType == 12 )
	224	#if ( $subTables && $subTables.size() > 0 )
	225	// 校验子表
	226	#foreach ($subTable in $subTables)
	227	#set ($index = $foreach.count - 1)
	228	#set ($subClassNameVar = $subClassNameVars.get($index))
	229	try {
	230	## 代码生成后会替换为正确的 refs
	231	await this.refs['${subClassNameVar}FormRef'].validate();
	232	} catch (e) {
	233	this.subTabsName = '${subClassNameVar}';
	234	return;
	235	}
	236	#end
	237	#end
	238	#end
	239	this.formLoading = true;
	240	try {
	241	const data = this.formData;
	242	## 特殊：主子表专属逻辑
	243	#if ( $table.templateType == 10 \|\| $table.templateType == 12 )
	244	#if ( $subTables && $subTables.size() > 0 )
	245	// 拼接子表的数据
	246	#foreach ($subTable in $subTables)
	247	#set ($index = $foreach.count - 1)
	248	#set ($subClassNameVar = $subClassNameVars.get($index))
	249	data.${subClassNameVar}#if ( $subTable.subJoinMany)s#end = this.refs['${subClassNameVar}FormRef'].getData();
	250	#end
	251	#end
	252	#end
	253	// 修改的提交
	254	if (data.${primaryColumn.javaField}) {
	255	await ${simpleClassName}Api.update${simpleClassName}(data);
	256	this.#[[$modal]]#.msgSuccess("修改成功");
	257	this.dialogVisible = false;
	258	this.#[[$]]#emit('success');
	259	return;
	260	}
	261	// 添加的提交
	262	await ${simpleClassName}Api.create${simpleClassName}(data);
	263	this.#[[$modal]]#.msgSuccess("新增成功");
	264	this.dialogVisible = false;
	265	this.#[[$]]#emit('success');
	266	} finally {
	267	this.formLoading = false;
	268	}
	269	},
	270	## 特殊：树表专属逻辑
	271	#if ( $table.templateType == 2 )
	272	/** 获得${table.classComment}树 */
	273	async get${simpleClassName}Tree() {
	274	this.${classNameVar}Tree = [];
	275	const res = await ${simpleClassName}Api.get${simpleClassName}List();
	276	const root = { id: 0, name: '顶级${table.classComment}', children: [] };
	277	root.children = this.handleTree(res.data, 'id', '${treeParentColumn.javaField}')
	278	this.${classNameVar}Tree.push(root)
	279	},
	280	#end
	281	## 特殊：树表专属逻辑
	282	#if ( $table.templateType == 2 )
	283	/** 转换${table.classComment}数据结构 */
	284	normalizer(node) {
	285	if (node.children && !node.children.length) {
	286	delete node.children;
	287	}
	288	#if ($treeNameColumn.javaField == "name")
	289	return {
	290	id: node.id,
	291	label: node.name,
	292	children: node.children
	293	};
	294	#else
	295	return {
	296	id: node.id,
	297	label: node['$treeNameColumn.javaField'],
	298	children: node.children
	299	};
	300	#end
	301	},
	302	#end
	303	/** 表单重置 */
	304	reset() {
	305	this.formData = {
	306	#foreach ($column in $columns)
	307	#if ($column.createOperation \|\| $column.updateOperation)
	308	#if ($column.htmlType == "checkbox")
	309	$column.javaField: [],
	310	#else
	311	$column.javaField: undefined,
	312	#end
	313	#end
	314	#end
	315	};
	316	this.resetForm("formRef");
	317	}
	318	}
	319	};
	320	</script>