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

337 lines
13 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

@{Dictionary<string, int> definedObjects = new Dictionary<string, int>();}
@{var pkField = Model.TableField.Where(c => c.ColumnKey == "True").FirstOrDefault();}
@{string pkFieldName = LowerFirstLetter(pkField.PropertyName);}
<template>
<div class="@(@Model.LowerClassName)-container">
<el-dialog v-model="isShowDialog" :width="800" draggable="">
<template #header>
<div style="color: #fff">
<!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
<span>{{ props.title }}</span>
</div>
</template>
<el-form :model="ruleForm" ref="ruleFormRef" label-width="auto" :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.LowerPropertyName)" />
</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" prop="@(@column.LowerPropertyName)">
@:<el-select clearable filterable v-model="ruleForm.@(@column.LowerPropertyName)" placeholder="请选择@(@column.ColumnComment)">
@:<el-option v-for="(item,index) in @LowerFirstLetter(@column.FkEntityName)@(@column.PropertyName)DropdownList" :key="index" :value="item.value" :label="item.label" />
@:
</el-select>
@:
</el-form-item>
@:
</el-col>
}else if(@column.EffectType == "ApiTreeSelect"){
@:<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@:<el-form-item label="@column.ColumnComment" prop="@(@column.LowerPropertyName)">
<el-cascader
@:options="@LowerFirstLetter(@column.FkEntityName)TreeData"
@:props="{ checkStrictly: true, emitPath: false, value: '@LowerFirstLetter(@column.ValueColumn)', label: '@LowerFirstLetter(@column.DisplayColumn)' }"
placeholder="请选择@(column.ColumnComment)"
clearable=""
class="w100"
v-model="ruleForm.@(@column.LowerPropertyName)"
>
<template #default="{ node, data }">
<span>{{ data.name }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
@:
</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" prop="@(@column.LowerPropertyName)">
@:<el-input v-model="ruleForm.@(@column.LowerPropertyName)" placeholder="请输入@(@column.ColumnComment)" maxlength="@(@column.ColumnLength)" show-word-limit 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" prop="@(@column.LowerPropertyName)">
@:<el-input-number v-model="ruleForm.@(@column.LowerPropertyName)" 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" prop="@(@column.LowerPropertyName)">
@:<el-input v-model="ruleForm.@(@column.LowerPropertyName)" placeholder="请输入@(@column.ColumnComment)" type="textarea" maxlength="@(@column.ColumnLength)" show-word-limit 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" prop="@(@column.LowerPropertyName)">
@:<el-select clearable v-model="ruleForm.@(@column.LowerPropertyName)" placeholder="请选择@(@column.ColumnComment)">
@:<el-option v-for="(item,index) in dl('@(@column.DictTypeCode)')" :key="index" :value="item.code" :label="`[${item.code}] ${item.value}`"></el-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" prop="@(@column.LowerPropertyName)">
@:<el-select clearable v-model="ruleForm.@(@column.LowerPropertyName)" placeholder="请选择@(@column.ColumnComment)">
@:<el-option v-for="(item,index) in getConstType('@column.DictTypeCode')" :key="index" :label="item.name" :value="item.code">{{ item.name }}</el-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" prop="@(@column.LowerPropertyName)">
@:<el-switch v-model="ruleForm.@(@column.LowerPropertyName)" 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" prop="@(@column.LowerPropertyName)">
@:<el-date-picker v-model="ruleForm.@(@column.LowerPropertyName)" type="date" placeholder="@(@column.ColumnComment)" />
@:
</el-form-item>
@:
</el-col>
}else if(@column.EffectType == "Upload"){
@:<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@:<el-form-item label="@column.ColumnComment" prop="@(@column.LowerPropertyName)">
@:<el-upload
@:list-type="picture-card"
@::show-file-list="false"
@::http-request="upload@(@column.PropertyName)Handle">
@:<img
@:v-if="ruleForm.@(@column.LowerPropertyName)"
@::src="ruleForm.@(@column.LowerPropertyName)"
@:@@click="ruleForm.@(@column.LowerPropertyName)=''"
@:style="width: 100%; height: 100%; object-fit: contain"/>
@:<el-icon v-else><Plus /></el-icon>
@:
</el-upload>
@:
</el-form-item>
@:
</el-col>
}else if(@column.EffectType == "EnumSelector"){
@:<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@:<el-form-item label="@column.ColumnComment" prop="@(@column.LowerPropertyName)">
@:<el-select clearable v-model="ruleForm.@(@column.LowerPropertyName)" placeholder="请选择@(@column.ColumnComment)">
@:<el-option v-for="(item,index) in getEnum@(@column.PropertyName)Data" :key="index" :value="item.value" :label="`[${item.value}] ${item.describe}`"></el-option>
@:
</el-select>
@:
</el-form-item>
@:
</el-col>
}else{
}
}
}
}
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @@click="cancel">取 消</el-button>
<el-button type="primary" @@click="submit">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<style scoped>
:deep(.el-select),
:deep(.el-input-number) {
width: 100%;
}
</style>
<script lang="ts" setup>
import { ref,onMounted } from "vue";
import { getDictDataItem as di, getDictDataList as dl } from '/@@/utils/dict-utils';
import { ElMessage } from "element-plus";
import type { FormRules } from "element-plus";
@if(@Model.TableField.Any(x=>x.EffectType == "ConstSelector")){
@:import { getConstType } from "/@@/utils/constHelper";
}
@if(@Model.TableField.Any(x=>x.EffectType == "Upload")){
@:import { Plus } from "@@element-plus/icons-vue";
@:import { UploadRequestOptions } from "element-plus";
@:import {@string.Join(",",Model.TableField.Where(x=>x.EffectType == "Upload").Select(x=>"upload"+x.PropertyName).ToList())} from '/@@/api/main/@(@Model.LowerClassName)';
}
import { add@(@Model.ClassName), update@(@Model.ClassName), detail@(@Model.ClassName) } from "/@@/api/main/@(@Model.LowerClassName)";
@foreach (var column in Model.TableField){
if(@column.EffectType == "ApiTreeSelect" && !definedObjects.ContainsKey("import__@(@column.FkEntityName)Tree")){
@{definedObjects.Add("import__@(@column.FkEntityName)Tree", 1);}
@:import { get@(@column.FkEntityName)Tree } from '/@@/api/main/@(@Model.LowerClassName)';
}
if(@column.EffectType == "fk" && @column.WhetherAddUpdate == "Y"){
@:import { get@(@column.FkEntityName)@(@column.PropertyName)Dropdown } from '/@@/api/main/@(@Model.LowerClassName)';
}
}
@if(@Model.TableField.Any(x=>x.EffectType == "EnumSelector")){
@:import { getAPI } from '/@@/utils/axios-utils';
@:import { SysEnumApi } from '/@@/api-services/api';
}
@foreach (var column in Model.TableField){
if(@column.EffectType == "EnumSelector"){
@:const getEnum@(@column.PropertyName)Data = ref<any>([]);
}
}
//父级传递来的参数
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.WhetherRequired == "Y"){
if(@column.EffectType == "Input" || @column.EffectType == "InputNumber" ||@column.EffectType == "InputTextArea"){
@:@column.LowerPropertyName: [{required: true, message: '请输入@(@column.ColumnComment)', trigger: 'blur',},],
}else if(@column.EffectType == "DatePicker" || @column.EffectType == "Select" ||@column.EffectType == "ApiTreeSelect"){
@:@column.LowerPropertyName: [{required: true, message: '请选择@(@column.ColumnComment)', trigger: 'change',},],
}
}
}
});
// 打开弹窗
const openDialog = async (row: any) => {
// ruleForm.value = JSON.parse(JSON.stringify(row));
// 改用detail获取最新数据来编辑
let rowData = JSON.parse(JSON.stringify(row));
if (rowData.id)
ruleForm.value = (await detail@(@Model.ClassName)(rowData.id)).data.result;
else
ruleForm.value = rowData;
isShowDialog.value = true;
};
// 关闭弹窗
const closeDialog = () => {
emit("reloadTable");
isShowDialog.value = false;
};
// 取消
const cancel = () => {
isShowDialog.value = false;
};
// 提交
const submit = async () => {
ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
if (isValid) {
let values = ruleForm.value;
if (ruleForm.value.@(@pkFieldName) == undefined || ruleForm.value.@(@pkFieldName) == null || ruleForm.value.@(@pkFieldName) == "" || ruleForm.value.@(@pkFieldName) == 0) {
await add@(@Model.ClassName)(values);
} else {
await update@(@Model.ClassName)(values);
}
closeDialog();
} else {
ElMessage({
message: `表单有${Object.keys(fields).length}处验证失败,请修改后再提交`,
type: "error",
});
}
});
};
@foreach (var column in Model.TableField){
if(@column.EffectType == "fk" && @column.WhetherAddUpdate == "Y"){
@:const @LowerFirstLetter(@column.FkEntityName)@(@column.PropertyName)DropdownList = ref<any>([]);
@:const get@(@column.FkEntityName)@(@column.PropertyName)DropdownList = async () => {
@:let list = await get@(@column.FkEntityName)@(@column.PropertyName)Dropdown();
@:@LowerFirstLetter(@column.FkEntityName)@(@column.PropertyName)DropdownList.value = list.data.result ?? [];
@:};
@:get@(@column.FkEntityName)@(@column.PropertyName)DropdownList();
@:
}
}
@foreach (var column in Model.TableField){
if(@column.EffectType == "ApiTreeSelect" && !definedObjects.ContainsKey("define_get@(@column.FkEntityName)TreeData")){
@{definedObjects.Add("define_get@(@column.FkEntityName)TreeData", 1);}
@:const @LowerFirstLetter(@column.FkEntityName)TreeData = ref<any>([]);
@:const get@(@column.FkEntityName)TreeData = async () => {
@:let list = await get@(@column.FkEntityName)Tree();
@:@LowerFirstLetter(@column.FkEntityName)TreeData.value = list.data.result ?? [];
@:};
@:get@(@column.FkEntityName)TreeData();
@:
}
else if(@column.EffectType == "ConstSelector"){
@:const @LowerFirstLetter(@column.DictTypeCode)DropdownList = ref<any>([]);
@:const get@(@column.DictTypeCode)DropdownList = async () => {
@:let list = await getConstSelectorList("@column.DictTypeCode");
@:@LowerFirstLetter(@column.DictTypeCode)DropdownList.value = list.data.result ?? [];
@:};
@:get@(@column.DictTypeCode)DropdownList();
@:
}
}
@foreach (var column in Model.TableField){
if(column.WhetherAddUpdate=="N") continue;
if(@column.EffectType == "Upload"){
@:const upload@(@column.PropertyName)Handle = async (options: UploadRequestOptions) => {
@:const res = await upload@(@column.PropertyName)(options);
@:ruleForm.value.@(column.LowerPropertyName) = res.data.result?.url;
@:};
}
}
// 页面加载时
onMounted(async () => {
@foreach (var column in Model.TableField){
if(@column.EffectType == "EnumSelector"){
@:getEnum@(@column.PropertyName)Data.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('@(@column.DictTypeCode)')).data.result ?? [];
}
}
});
//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>
@{
string LowerFirstLetter(string text)
{
return text.ToString()[..1].ToLower() + text[1..]; // 首字母小写
}
}