|
@@ -10,7 +10,7 @@
|
|
|
<el-form ref="formRef" v-bind="modalConfig.form" :model="formData" :rules="formRules">
|
|
<el-form ref="formRef" v-bind="modalConfig.form" :model="formData" :rules="formRules">
|
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
|
<template v-for="item in formItems" :key="item.prop">
|
|
<template v-for="item in formItems" :key="item.prop">
|
|
|
- <el-col v-show="!item.hidden" v-bind="item.col">
|
|
|
|
|
|
|
+ <el-col v-show="isItemVisible(item)" v-bind="item.col">
|
|
|
<el-form-item :label="item.label" :prop="item.prop">
|
|
<el-form-item :label="item.label" :prop="item.prop">
|
|
|
<!-- Label -->
|
|
<!-- Label -->
|
|
|
<template #label>
|
|
<template #label>
|
|
@@ -75,7 +75,7 @@
|
|
|
<el-scrollbar max-height="70vh" :view-style="{ overflowX: 'hidden' }">
|
|
<el-scrollbar max-height="70vh" :view-style="{ overflowX: 'hidden' }">
|
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
|
<template v-for="item in formItems" :key="item.prop">
|
|
<template v-for="item in formItems" :key="item.prop">
|
|
|
- <el-col v-show="!item.hidden" v-bind="item.col">
|
|
|
|
|
|
|
+ <el-col v-show="isItemVisible(item)" v-bind="item.col">
|
|
|
<el-form-item :label="item.label" :prop="item.prop">
|
|
<el-form-item :label="item.label" :prop="item.prop">
|
|
|
<template #label>
|
|
<template #label>
|
|
|
<span>
|
|
<span>
|
|
@@ -100,6 +100,7 @@
|
|
|
v-else
|
|
v-else
|
|
|
v-model.trim="formData[item.prop]"
|
|
v-model.trim="formData[item.prop]"
|
|
|
v-bind="{ style: { width: '100%' }, ...item.attrs }"
|
|
v-bind="{ style: { width: '100%' }, ...item.attrs }"
|
|
|
|
|
+ v-on="item.events || {}"
|
|
|
>
|
|
>
|
|
|
<template v-if="['select', 'radio', 'checkbox'].includes(item.type)">
|
|
<template v-if="['select', 'radio', 'checkbox'].includes(item.type)">
|
|
|
<component
|
|
<component
|
|
@@ -134,6 +135,7 @@
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { useThrottleFn } from "@vueuse/core";
|
|
import { useThrottleFn } from "@vueuse/core";
|
|
|
|
|
+import { computed } from "vue";
|
|
|
import type { FormInstance, FormRules } from "element-plus";
|
|
import type { FormInstance, FormRules } from "element-plus";
|
|
|
import type { IComponentType, IModalConfig, IObject } from "./types";
|
|
import type { IComponentType, IModalConfig, IObject } from "./types";
|
|
|
import InputTag from "@/components/InputTag/index.vue";
|
|
import InputTag from "@/components/InputTag/index.vue";
|
|
@@ -175,11 +177,25 @@ const childrenMap = new Map<IComponentType, any>([
|
|
|
const pk = props.modalConfig.pk ?? "id"; // 主键名,用于表单数据处理
|
|
const pk = props.modalConfig.pk ?? "id"; // 主键名,用于表单数据处理
|
|
|
const modalVisible = ref(false); // 弹窗显示状态
|
|
const modalVisible = ref(false); // 弹窗显示状态
|
|
|
const formRef = ref<FormInstance>(); // 表单实例
|
|
const formRef = ref<FormInstance>(); // 表单实例
|
|
|
-const formItems = reactive(props.modalConfig.formItems ?? []); // 表单配置项
|
|
|
|
|
const formData = reactive<IObject>({}); // 表单数据
|
|
const formData = reactive<IObject>({}); // 表单数据
|
|
|
|
|
+const formItems = reactive(props.modalConfig.formItems ?? []); // 表单配置项
|
|
|
const formRules: FormRules = {}; // 表单验证规则
|
|
const formRules: FormRules = {}; // 表单验证规则
|
|
|
const formDisable = ref(false); // 表单禁用状态
|
|
const formDisable = ref(false); // 表单禁用状态
|
|
|
|
|
|
|
|
|
|
+// 计算表单项是否可见
|
|
|
|
|
+const isItemVisible = (item: any) => {
|
|
|
|
|
+ // 如果设置了hidden为true,则隐藏
|
|
|
|
|
+ if (item.hidden === true) {
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+ // 如果设置了visible函数,则根据函数返回值决定是否可见
|
|
|
|
|
+ if (typeof item.visible === "function") {
|
|
|
|
|
+ return item.visible(formData);
|
|
|
|
|
+ }
|
|
|
|
|
+ // 默认可见
|
|
|
|
|
+ return true;
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
// 获取tooltip提示框属性
|
|
// 获取tooltip提示框属性
|
|
|
const getTooltipProps = (tips: string | IObject) => {
|
|
const getTooltipProps = (tips: string | IObject) => {
|
|
|
return typeof tips === "string" ? { content: tips } : tips;
|
|
return typeof tips === "string" ? { content: tips } : tips;
|