代码生成-编辑页面模板

Signed-off-by: skywolf627 <skywolf627@qq.com>

Admin.NET/Admin.NET.Web.Entry/wwwroot/Template/editDialog.vue.vm

@@ -1,209 +1,184 @@
-<template>
+<template>
 	<div class="@(@Model.ClassName)-container">
-		<el-dialog
-		v-model="isShowDialog"
-		:title="title"
-		:width="700"
-		draggable>
+    <el-dialog v-model="isShowDialog" :title="props.title" :width="700" draggable>
 			<el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="100px" :rules="rules">
 				<el-row :gutter="35">
 					@foreach (var column in Model.TableField){
 					if(@column.ColumnKey == "True"){
-					@:<el-form-item v-show="false"><el-input v-model="ruleForm.@(@column.ColumnName)" /></el-form-item>
+					@:<el-form-item v-show="false">
+						<el-input v-model="ruleForm.@(@column.LowerColumnName)" />
+					</el-form-item>
 					}else{
 					if (@column.WhetherAddUpdate == "Y"){
 					if(@column.EffectType == "fk"){
 					@:<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						@:<el-form-item label="@column.ColumnComment">
-							@:<el-select clearable= v-model="ruleForm.@(@column.ColumnName)" placeholder="请选择@(@column.ColumnComment)">
+						@:<el-form-item label="@column.ColumnComment" prop="@(@column.LowerColumnName)">
+							@:<el-select clearable="" v-model="ruleForm.@(@column.LowerColumnName)" placeholder="请选择@(@column.ColumnComment)">
 								@:<el-select-option v-for="(item,index) in get@(@column.FkEntityName)DropdownList" :key="index" :value="item.code">{{ item.name }}</el-select-option>
-								@:</el-select>
-							@:</el-form-item>
-						@:</el-col>
+								@:
+							</el-select>
+							@:
+						</el-form-item>
+						@:
+					</el-col>
 					}else if(@column.EffectType == "Input"){
 					@:<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						@:<el-form-item label="@column.ColumnComment">
-							@:<el-input v-model="ruleForm.@(@column.ColumnName)" placeholder="ruleForm.@(@column.ColumnName)" clearable/>
-						@:</el-form-item>
-					@:</el-col>
+						@:<el-form-item label="@column.ColumnComment" prop="@(@column.LowerColumnName)">
+							@:<el-input v-model="ruleForm.@(@column.LowerColumnName)" placeholder="请输入@(@column.ColumnComment)" clearable=""/>
+							@:
+						</el-form-item>
+						@:
+					</el-col>
 					}else if(@column.EffectType == "InputNumber"){
 					@:<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						@:<el-form-item label="@column.ColumnComment">
-							@:<el-input-number v-model="ruleForm.@(@column.ColumnName)" placeholder="ruleForm.@(@column.ColumnName)" clearable/>
-						@:</el-form-item>
-					@:</el-col>
+						@:<el-form-item label="@column.ColumnComment" prop="@(@column.LowerColumnName)">
+							@:<el-input-number v-model="ruleForm.@(@column.LowerColumnName)" placeholder="请输入@(@column.ColumnComment)" clearable=""/>
+							@:
+						</el-form-item>
+						@:
+					</el-col>
 					}else if(@column.EffectType == "InputTextArea"){
 					@:<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						@:<el-form-item label="@column.ColumnComment">
-							@:<el-input v-model="ruleForm.@(@column.ColumnName)" placeholder="ruleForm.@(@column.ColumnName)" type="textarea" clearable/>
-						@:</el-form-item>
-					@:</el-col>
+						@:<el-form-item label="@column.ColumnComment" prop="@(@column.LowerColumnName)">
+							@:<el-input v-model="ruleForm.@(@column.LowerColumnName)" placeholder="请输入@(@column.ColumnComment)" type="textarea" clearable=""/>
+							@:
+						</el-form-item>
+						@:
+					</el-col>
 					}else if(@column.EffectType == "Select"){
 					@:<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						@:<el-form-item label="@column.ColumnComment">
-							@:<el-select clearable v-model="ruleForm.@(@column.ColumnName)" placeholder="请选择@(@column.ColumnComment)">
-								@:<el-select-option v-for="(item,index) in getDictDataDropdownList('@(@column.DictTypeCode)')" :key="index" :value="item.value">{{ item.label }}</el-select-option>
-							@:</el-select>
-						@:</el-form-item>
-					@:</el-col>
+						@:<el-form-item label="@column.ColumnComment" prop="@(@column.LowerColumnName)">
+							@:<el-select clearable="" v-model="ruleForm.@(@column.LowerColumnName)" placeholder="请选择@(@column.ColumnComment)">
+								@:<el-select-option v-for="(item,index) in getDictDataDropdownList('@column.DictTypeCode')" :key="index" :value="item.value">{{ item.label }}</el-select-option>
+								@:
+							</el-select>
+							@:
+						</el-form-item>
+						@:
+					</el-col>
 					}else if(@column.EffectType == "ConstSelector"){
 					@:<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						@:<el-form-item label="@column.ColumnComment">
-							@:<el-select clearable="" v-model="ruleForm.@(@column.ColumnName)" placeholder="请选择@(@column.ColumnComment)">
-								@:<el-select-option v-for="(item,index) in getSelectorList('@(@column.DictTypeCode)')" :key="index" :value="item.code">{{ item.name }}</el-select-option>
-								@:</el-select>
-							@:</el-form-item>
-						@:</el-col>
-					}else if(@column.EffectType == "Switch"){				
+						@:<el-form-item label="@column.ColumnComment" prop="@(@column.LowerColumnName)">
+							@:<el-select clearable="" v-model="ruleForm.@(@column.LowerColumnName)" placeholder="请选择@(@column.ColumnComment)">
+								@:<el-select-option v-for="(item,index) in getSelectorList('@column.DictTypeCode')" :key="index" :value="item.code">{{ item.name }}</el-select-option>
+								@:
+							</el-select>
+							@:
+						</el-form-item>
+						@:
+					</el-col>
+					}else if(@column.EffectType == "Switch"){
 					@:<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						@:<el-form-item label="@column.ColumnComment">
-							@:<el-switch v-model="ruleForm.@(@column.ColumnName)" active-text="是" inactive-text="否" />
-						@:</el-form-item>
-					@:</el-col>
+						@:<el-form-item label="@column.ColumnComment" prop="@(@column.LowerColumnName)">
+							@:<el-switch v-model="ruleForm.@(@column.LowerColumnName)" active-text="是" inactive-text="否" />
+							@:
+						</el-form-item>
+						@:
+					</el-col>
 					}else if(@column.EffectType == "DatePicker"){
 					@:<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						@:<el-form-item label="@column.ColumnComment">
-							@:<el-date-picker v-model="ruleForm.@(@column.ColumnName)" type="datetime" placeholder="@column.ColumnComment"  />
-						@:</el-form-item>
-					@:</el-col>
+						@:<el-form-item label="@column.ColumnComment" prop="@(@column.LowerColumnName)">
+							@:<el-date-picker v-model="ruleForm.@(@column.LowerColumnName)" type="datetime" placeholder="@(@column.ColumnComment)"  />
+							@:
+						</el-form-item>
+						@:
+					</el-col>
 					}else if(@column.EffectType == "Upload"){
-					
+
 					}else{
 
 					}
-					}
-					}
-					}
-						</el-row>
-					</el-form>
-					<template #footer>
-						<span class="dialog-footer">
-							<el-button @@click="cancel" size="default">取 消</el-button>
-							<el-button type="primary" @@click="submit" size="default">确 定</el-button>
-						</span>
-					</template>
-		</el-dialog>	
+        }
+      }
+    }
+				</el-row>
+			</el-form>
+			<template #footer="">
+				<span class="dialog-footer">
+					<el-button @@click="cancel" size="default">取 消</el-button>
+					<el-button type="primary" @@click="submit" size="default">确 定</el-button>
+				</span>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
-<script lang="ts">
-	import { ref, toRefs, reactive, onMounted, defineComponent, getCurrentInstance, onUnmounted } from 'vue';
-	import { ElMessageBox, ElMessage } from 'element-plus';
-	import { auth } from '/@@/utils/authFunction';
-	import { formatDate } from '/@@/utils/formatTime';
-	import type { FormInstance, FormRules } from 'element-plus'
-
-	@foreach (var column in Model.TableField){
-	if(@column.EffectType == "fk"){
-	@:import { get@(@column.FkEntityName)Dropdown } from '/@@/api/main/@(@Model.ClassName)';
-	}
-	}
-	@foreach (var column in Model.TableField){
-	if(@column.EffectType == "Select"){
-	@:import { getDictDataDropdown } from '/@@/api/system/admin';
-	}
-	}
-
-	export default defineComponent({
-	name: 'edit@(@Model.ClassName)',
-	props: {
-	title: {
-	type: String,
-	default: '',
-	},
-	},
-	setup() {
-	const { proxy } = getCurrentInstance() as any;
-	const ruleFormRef = ref();
-	const state = reactive({
-	isShowDialog: false,
-	ruleForm: {} as any,
-	});
-
-	const rules = reactive<FormRules>({
-	@foreach (var column in Model.TableField){
-		if(@column.WhetherRequired == "Y"){
-			if(@column.EffectType == "Input" || @column.EffectType == "InputNumber" ||@column.EffectType == "InputTextArea"){
-			@:@column.ColumnName: [{required: true, message: '请输入@(@column.ColumnComment)！', trigger: 'blur',},],
-			}else if(@column.EffectType == "DatePicker" || @column.EffectType == "Select" ||@column.EffectType == "ApiTreeSelect"){
-			@:@column.ColumnName: [{required: true, message: '请选择@(@column.ColumnComment)！', trigger: 'change',},],
-			}
-		}
-	}
-	});
-
-	// 打开弹窗
-	const openDialog = (row: any) => {
-	state.ruleForm = row;
-	state.isShowDialog = true;
-	};
+<script lang="ts" setup>
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+import type { FormRules } from "element-plus";
+import { addComFund, updateComFund } from "/@@/api/main/@(@Model.ClassName)";
+@foreach (var column in Model.TableField){
+  if(@column.EffectType == "fk"){
+    @:import { get@(@column.FkEntityName)Dropdown } from '/@@/api/main/@(@Model.ClassName)';
+  }
+}
+@foreach (var column in Model.TableField){
+  if(@column.EffectType == "Select"){
+    @:import { getDictDataDropdown } from '/@@/api/system/admin';
+  }
+}
+//父级传递来的参数
+var props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+//父级传递来的函数，用于回调
+const emit = defineEmits(["reloadTable"]);
+const ruleFormRef = ref();
+const isShowDialog = ref(false);
+const ruleForm = ref<any>({});
+//自行删除非必填规则
+const rules = ref<FormRules>({
+  @foreach (var column in Model.TableField){
+    if(@column.EffectType == "Input" || @column.EffectType == "InputNumber" ||@column.EffectType == "InputTextArea"){
+  @:@column.LowerColumnName: [{required: true, message: '请输入@(@column.ColumnComment)！', trigger: 'blur',},],
+    }else if(@column.EffectType == "DatePicker" || @column.EffectType == "Select" ||@column.EffectType == "ApiTreeSelect"){
+  @:@column.LowerColumnName: [{required: true, message: '请选择@(@column.ColumnComment)！', trigger: 'change',},],
+    }
+  }
+});
 
-	// 关闭弹窗
-	const closeDialog = () => {
-	proxy.mittBus.emit('submitRefresh');
-	state.isShowDialog = false;
-	};
 
-	// 取消
-	const cancel = () => {
-	state.isShowDialog = false;
-	};
+// 打开弹窗
+const openDialog = (row: any) => {
+  ruleForm.value = row;
+  isShowDialog.value = true;
+};
 
-	// 提交
-	const submit = () => {
-	ruleFormRef.value.validate(async (valid: boolean) => {
-	if (!valid) return;
-	if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
-	await update@(@Model.ClassName)(values);
-	} else {
-	await add@(@Model.ClassName)(state.ruleForm);
-	}
-	closeDialog();
-	});
-	};
+// 关闭弹窗
+const closeDialog = () => {
+  emit("reloadTable");
+  isShowDialog.value = false;
+};
 
-	@foreach (var column in Model.QueryWhetherList){
-	if(@column.EffectType == "fk"){
-	@:const get@(@column.FkEntityName)DropdownList = await () => {
-	@:let list = await get@(@column.FkEntityName)Dropdown();
-	@:return list.data.result ?? [];
-	@:};
-	break;
-	}
-	}
+// 取消
+const cancel = () => {
+  isShowDialog.value = false;
+};
 
-	@foreach (var column in Model.TableField){
-	if(@column.EffectType == "Select"){
-	@:const getDictDataDropdownList = await (val: any) => {
-	@:let list = await getDictDataDropdownList(val);
-	@:return list.data.result ?? [];
-	@:};
-	break;
-	}
-	}
-	return {
-	@foreach (var column in Model.TableField){
-	if(@column.EffectType == "fk"){
-	@:get@(@column.FkEntityName)DropdownList,
-	break;
-	}
-	}
-	@foreach (var column in Model.TableField){
-	if(@column.EffectType == "Select"){
-	@:getDictDataDropdownList,
-	break;
-	}
-	}
-	ruleFormRef,
-	openDialog,
-	closeDialog,
-	cancel,
-	submit,
-	...toRefs(state),
-	rules,
-	};
-	}
-	})
+// 提交
+const submit = async () => {
+  ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
+    if (isValid) {
+      let values = ruleForm.value;
+      if (ruleForm.value.id != undefined && ruleForm.value.id > 0) {
+        await updateComFund(values);
+      } else {
+        await addComFund(values);
+      }
+      closeDialog();
+    } else {
+      ElMessage({
+        message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
+        type: "error",
+      });
+    }
+  });
+};
 
-	}
+//将属性或者函数暴露给父组件
+defineExpose({ openDialog });
 </script>