From 202254c73b118d8abef14460ba88e17f08a2ab40 Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Mon, 10 Jun 2024 11:34:27 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=E6=98=8E=E7=BB=86?=
 =?UTF-8?q?=E8=A1=A8=E4=BA=8C=E5=BC=80=E7=9A=84=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/表单二开/1_拆分表单.md                   |   3 +
 docs/表单二开/2_拆分表单中的明细表            |   0
 docs/表单二开/2_拆分表单中的明细表.md         | 121 ++++
 .../Form/src/components/SubFormV2Setup.vue    | 575 ++++++++++++++++++
 .../src/components/SimpleFormItemSetup.vue    | 261 ++++++++
 5 files changed, 960 insertions(+)
 delete mode 100644 docs/表单二开/2_拆分表单中的明细表
 create mode 100644 docs/表单二开/2_拆分表单中的明细表.md
 create mode 100644 src/components/Form/src/components/SubFormV2Setup.vue
 create mode 100644 src/components/SimpleForm/src/components/SimpleFormItemSetup.vue

diff --git a/docs/表单二开/1_拆分表单.md b/docs/表单二开/1_拆分表单.md
index d91c9d2..8c07cf8 100644
--- a/docs/表单二开/1_拆分表单.md
+++ b/docs/表单二开/1_拆分表单.md
@@ -1,4 +1,7 @@
 ## 如何拆分表单
+
+**注意：框架的部分模版部分用了非空断言，如formModel![xxx]，编译器报错可以去掉叹号，或者在script上加上lang="ts"**
+
 默认情况下，生成的表单以JSON存储，每个字段都是由循环产生，因此在二开之前需要将每个字段拆开，以便进行二开。
 
 首先，打开项目dev_tools/formprops.js，将其中的内容替换为
diff --git a/docs/表单二开/2_拆分表单中的明细表 b/docs/表单二开/2_拆分表单中的明细表
deleted file mode 100644
index e69de29..0000000
diff --git a/docs/表单二开/2_拆分表单中的明细表.md b/docs/表单二开/2_拆分表单中的明细表.md
new file mode 100644
index 0000000..de5efeb
--- /dev/null
+++ b/docs/表单二开/2_拆分表单中的明细表.md
@@ -0,0 +1,121 @@
+## 如何对表单中的明细表进行二开
+**注意：框架的部分模版部分用了非空断言，如formModel![xxx]，编译器报错可以去掉叹号，或者在script上加上lang="ts"**
+
+明细表拆分比较复杂，首先，定义明细表文件，假设文件名为CascadeDetailTable.vue，如果一个表单有多个明细表需要修改，要注意文件名的语义。用下面的代码初始化文件：
+
+```vue
+<template>
+    <div class="form-detail-table">
+        <!-- 这里的内容抄SubFormV2.vue，第一层div不需要复制过来 -->
+    </div>
+</template>
+
+<script lang="ts">
+    import SubFormV2Setup from '/@/components/Form/src/components/SubFormV2Setup.vue';
+
+    export default {
+        extends: SubFormV2Setup,
+        setup(props, ctx) {
+            const ret = SubFormV2Setup.setup(props, ctx);
+            return {
+                ...ret
+            };
+        }
+    };
+</script>
+```
+注意这里的div有个class，在继承模式下，scope语义会失效，导致样式无法继承，因此在基类文件的样式改成了传统的css嵌套写法。
+
+如果认为SubFormV2的模版内容太多，影响开发，可以照着下面的注释进行裁剪，注意**为了文档长度注释中的代码只保留关键部分**，不要直接复制。
+
+```vue
+<template>
+    <a-table :bordered="showFormBorder" :columns="headColums.length > 0 ? headColums : columns" :data-source="addDataKey(data)" :pagination="showPagination ? { defaultPageSize: 10 } : false" :scroll="{ x: 'max-content' }">
+        <template #summary>
+            <!-- 求和汇总相关代码 没用到可以裁剪 -->
+        </template>
+        <template #bodyCell="{ column, record, index }">
+            <template v-if="column.key !== 'action'">
+                <template v-if="column.key === 'index'">
+                    <!-- 自动行号 建议保留 -->
+                </template>
+                <FormItem v-else :name="[mainKey, index, column.dataIndex]" :rules="rules(column, record, index)" :validateTrigger="['blur', 'change']">
+                    <!---如果是checked一类的组件-->
+                    <template v-if="checkedValueComponents.includes(column.componentType)">
+                        <component :is="componentMap.get(column.componentType)" v-model:checked="record[column.dataIndex]" :bordered="showComponentBorder" v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)" />
+                    </template>
+                    <template v-else-if="column.componentType === 'RangePicker' || column.componentType === 'TimeRangePicker'">
+                        <!-- 没有用范围选择器可以不用，比如时间日期区间 -->
+                    </template>
+                    <template v-else-if="column.componentType === 'Render'">
+                        <!-- 没有自定义render组件可以不用，大多数开发都到不了这层 -->
+                    </template>
+                    <template v-else-if="column.key !== 'index'">
+                        <!-- 这一部分不能裁剪，要不组件就渲染不出来了 -->
+                    </template>
+                </FormItem>
+            </template>
+            <template v-if="column.key === 'action' && !disabled">
+                <!-- 行删除 建议保留 如果增加额外的行动作可以写到这里 -->
+            </template>
+        </template>
+    </a-table>
+</template>
+```
+表格二开很简单，就是参照文档在#bodyCell中把对应的列的覆盖，一般用column.dataIndex进行覆盖，如果是对组件进行复写，还要将column.key !== 'index'这个条件下增加排除，因为这里是非特殊组件渲染的位置。
+
+接下来，定义SimpleFormItem，假设文件名为SimpleTableItem.vue，这个组件不需要定义很多次，你可以根据表格的名称，或者是自定义参数，在一个文件里根据条件渲染多种表格：
+
+```vue
+<template>
+    <!-- formitem的标题一般不用，如果不需要控制明细表的权限显隐，这个formitem可以去掉，或者用div代替 -->
+    <FormItem
+        v-if="getShow(schema)"
+        v-show="getIsShow(schema)"
+        :key="schema.key"
+        :label="getComponentsProps.showLabel ? schema.label : ''"
+        :label-col="labelCol"
+        :labelAlign="formProps?.labelAlign"
+        :name="schema.field"
+        :wrapperCol="itemLabelWidthProp.wrapperCol"
+    >
+        <!-- 这里原先是component is写法，现在需要换成你自己的明细表 -->
+        <!-- 也可以根据v-if渲染不同表格，这样就不需要定义很多次FormItem了 -->
+        <cascade-detail-table v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
+    </FormItem>
+</template>
+
+<script lang="ts">
+    import SimpleFormItemSetup from '/@/components/SimpleForm/src/components/SimpleFormItemSetup.vue';
+    import CascadeDetailTable from '/@/views/test/cascadeDemo/components/CascadeDetailTable.vue';
+
+    export default {
+        extends: SimpleFormItemSetup,
+        components: {
+            CascadeDetailTable
+        },
+        setup(props, ctx) {
+            const ret = SimpleFormItemSetup.setup(props, ctx);
+            return {
+                ...ret
+            };
+        }
+    };
+</script>
+```
+最后，在表单文件用用自定义的FormItem替换原有的组件。
+```vue
+<!-- 表格组件  -->
+<Col v-if="getIfShow2('25axx52')" v-show="getIsShow2('25a9xx35952')" :span="getColWidth(schemaMap['25a9xx52'])">
+    <template v-if="showComponent(schemaMap['25a93xx5952'])">
+        <!-- 这里原来是SimpleFormItem，注意选项写法所有的组件都需要引入后放到components里 -->
+        <SimpleTableItem
+            v-model:value="formModel[schemaMap['25a93xx52'].field]"
+            :form-api="formApi"
+            :isWorkFlow="isWorkFlow"
+            :refreshFieldObj="refreshFieldObj"
+            :schema="schemaMap['25a9xx952']"
+        />
+    </template>
+</Col>
+```
diff --git a/src/components/Form/src/components/SubFormV2Setup.vue b/src/components/Form/src/components/SubFormV2Setup.vue
new file mode 100644
index 0000000..ce09568
--- /dev/null
+++ b/src/components/Form/src/components/SubFormV2Setup.vue
@@ -0,0 +1,575 @@
+<style lang="less">
+    .form-detail-table{
+        .ant-form-item {
+            margin-bottom: 0;
+        }
+
+        .ant-table-cell {
+            padding: 8px 0;
+        }
+
+        .ant-table .ant-table-thead tr th {
+            padding: 11px;
+        }
+
+        .ant-input-number,
+        .ant-input-affix-wrapper,
+        .ant-input,
+        .ant-select-selector,
+        .ant-picker {
+            border: 0 !important;
+            box-shadow: none !important;
+        }
+
+        .anticon {
+            padding-bottom: 0 !important;
+        }
+
+        .ant-table-cell-fix-right {
+            text-align: center;
+            width: 60px;
+        }
+
+        .ant-radio-group,
+        .ant-checkbox-group,
+        .ant-rate,
+        .ant-upload,
+        .ant-form-item-explain-error {
+            padding: 0 11px;
+        }
+
+        .ant-switch,
+        input[type='color'] {
+            margin: 0 11px;
+        }
+
+        .select-btn {
+            margin-bottom: 8px;
+        }
+
+        .tbl-toolbar {
+            margin-top: 10px;
+        }
+    }
+</style>
+<style lang="less">
+    .ant-table-row {
+        .ant-input-affix-wrapper-disabled {
+            background-color: transparent;
+        }
+
+        .ant-input-disabled {
+            color: rgba(0, 0, 0, 0.85);
+        }
+
+        .ant-select-disabled {
+            .ant-select-selector {
+                margin-left: 10px;
+            }
+        }
+
+        .ant-picker-disabled {
+            background-color: transparent;
+
+            .ant-picker-suffix {
+                display: none;
+            }
+
+            .ant-picker-input {
+                input {
+                    color: rgba(0, 0, 0, 0.85);
+                }
+            }
+        }
+
+        .form-select-user {
+            &.disabled {
+                .ant-input-affix-wrapper {
+                    padding-left: 10px;
+                }
+            }
+        }
+    }
+</style>
+<script lang="ts">
+    import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
+    import { Form } from 'ant-design-vue';
+    import { inject, onMounted, ref, unref, watch, nextTick } from 'vue';
+    import { SubFormColumn } from '../types';
+    import { componentMap } from '../componentMap';
+    import { DicDataComponents, checkedValueComponents, staticDataComponents } from '../helper';
+    import { MultipleSelect } from '/@/components/MultiplePopup';
+    import { dateUtil } from '/@/utils/dateUtil';
+    import { isFunction, cloneDeep, isBoolean, sum } from 'lodash-es';
+    import { deepMerge } from '/@/utils';
+    import { apiConfigFunc } from '/@/utils/event/design';
+    import { getDicDetailList } from '/@/api/system/dic';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { MutipleHeadInfo } from '/@/components/Designer';
+
+    export default {
+        emits: ['change', 'update:value'],
+        components: {
+            MultipleSelect,
+            PlusOutlined,
+            MinusCircleOutlined
+        },
+        props: {
+            value: { type: Array as PropType<Recordable[]>, default: () => [] },
+            /**
+             * 是否预加载
+             */
+            preload: {
+                type: Boolean,
+                default: false
+            },
+            /**
+             * 预加载 类型 开启 preload  为true 才有用
+             * datasource || dataitem
+             */
+            preloadType: { type: String, default: null },
+
+            /**
+             * 需要绑定主表的字段  用于验证  必填
+             */
+            mainKey: { type: String, required: true },
+            /**
+             * 子表单配置
+             */
+            columns: {
+                type: Array as PropType<SubFormColumn[]>,
+                required: true
+            },
+            /**
+             * 是否禁用所有组件
+             */
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            disableAddRow: {
+                type: Boolean,
+                default: false
+            },
+            /**
+             * 预加载数据为api时使用
+             */
+            apiConfig: Object,
+            /**
+             * 预加载数据为数据字典时使用
+             */
+            itemId: String,
+            dicOptions: Array,
+            /**
+             * 是否使用按钮选数据
+             */
+            useSelectButton: Boolean,
+            useAddButton: {
+                type: Boolean,
+                default: true
+            },
+            // 是否开启分页
+            showPagination: Boolean,
+            /**
+             * 选数据按钮名称
+             */
+            buttonName: String,
+            //是否显示表格边框
+            showFormBorder: Boolean,
+            //是否显示组件边框
+            showComponentBorder: Boolean,
+            //是否展示序号
+            showIndex: Boolean,
+            //add before hooks
+            addBefore: Function,
+            //add after hooks
+            addAfter: Function,
+            //表头合并数据
+            multipleHeads: { type: Array as PropType<MutipleHeadInfo[]> }
+        },
+        setup(props, ctx){
+            const { t } = useI18n();
+            const emit = ctx.emit;
+            // 用于包裹弹窗的form组件 因为一个FormItem 只能收集一个表单组件  所以弹窗的form 必须排除
+            // const FormItemRest = Form.ItemRest;
+            const FormItem = Form.Item;
+            const FormItemRest = Form.ItemRest;
+
+            const multipleDialog = ref<boolean>(false);
+            const data = ref<Recordable[]>([]);
+            const cacheMap = new Map<String, number[]>();
+
+            const headColums = ref<MutipleHeadInfo[]>([]); // 多表头
+            const originHeads = ref<MutipleHeadInfo[]>([]); // 多表头源数据
+            const columns = ref<SubFormColumn[]>(props.columns);
+
+            // 注入表单数据
+            const formModel = inject<any>('formModel', null);
+
+            const onFieldChange = (column, row, rowIndex) => {
+                const evt = column?.componentProps?.events?.change;
+                if (evt) {
+                    evt({ column, row, rowIndex, formModel });
+                }
+            };
+            const onFieldBlur = (column, row, rowIndex) => {
+                const evt = column?.componentProps?.events?.blur;
+                if (evt) {
+                    evt({ column, row, rowIndex, formModel });
+                }
+            };
+
+            function setColWidth(columns) {
+                columns.value.forEach((col: any) => {
+                    // 设置表格的列宽 注意操作这列是没有componentProps
+                    if (col?.componentProps?.colWidth) {
+                        col.width = +col.componentProps.colWidth;
+                    }
+                });
+            }
+
+            function addDataKey(rows) {
+                rows.forEach((row) => {
+                    if (!row['_key_']) {
+                        row['_key_'] = Math.random();
+                    }
+                });
+                return rows;
+            }
+
+            onMounted(() => {
+                data.value = cloneDeep(props.value);
+
+                if (props.showIndex && columns.value && columns.value[0].key !== 'index') {
+                    columns.value.unshift({
+                        title: '序号',
+                        key: 'index',
+                        align: 'center',
+                        width: 60
+                    });
+                }
+                setColWidth(columns);
+                columns.value = filterColum(columns.value);
+                nextTick(() => {
+                    //处理多表头
+                    if (props.multipleHeads && props.multipleHeads.length > 0) {
+                        originHeads.value = cloneDeep(props.multipleHeads);
+
+                        getColumns(columns.value);
+                        //过滤权限为不显示的组件
+                        filterHeads(headColums.value);
+                    }
+                });
+            });
+
+            watch(
+                () => props.columns,
+                (val) => {
+                    columns.value = filterColum(val);
+                    setColWidth(columns);
+                }
+            );
+
+            watch(
+                () => props.value,
+                (v) => {
+                    data.value = v;
+
+                    //要保证在预加载之后在emit  不然预加载数据不会绑定到表单数据中
+                    emit('change', unref(data));
+                    emit('update:value', unref(data));
+                },
+                { deep: true }
+            );
+
+            function getColumns(children) {
+                let headsColumn: MutipleHeadInfo[] = [];
+                let leafNode = 0;
+                children.forEach((o) => {
+                    o.isleaf = false;
+                    let flag = false;
+                    for (let i = 0; i < originHeads.value.length; i++) {
+                        let k = originHeads.value[i];
+
+                        let idx = k.children.findIndex((j) => {
+                            return j == o.key || j.key == o.key;
+                        });
+                        if (idx >= 0) {
+                            o.isleaf = true;
+                            flag = true;
+                            leafNode += 1;
+                            k.children.splice(idx, 1, o);
+                            let obj = headsColumn.find((j) => {
+                                return j.key == k.key;
+                            });
+                            if (!obj) headsColumn.push(k);
+                            break;
+                        } else {
+                            flag = false;
+                        }
+                    }
+                    if (!flag) {
+                        let obj = headsColumn.find((j) => {
+                            return j.key == o.key;
+                        });
+                        if (!obj) headsColumn.push(o);
+                    }
+                });
+                if (leafNode > 0) {
+                    //继续循环
+                    getColumns(headsColumn);
+                } else {
+                    headColums.value = headsColumn;
+                }
+            }
+
+            function filterHeads(children) {
+                children.forEach((k, i) => {
+                    if (typeof k == 'string') {
+                        children.splice(i, 1);
+                    } else if (k.children) {
+                        filterHeads(k.children);
+                    }
+                });
+            }
+
+            const add = () => {
+                //给各个组件赋默认值
+                const pushObj: Recordable = {};
+
+                //新增数据钩子
+                if (isFunction(props.addBefore)) {
+                    props.addBefore(formModel, pushObj);
+                }
+
+                props.columns.forEach((column, index) => {
+                    //判断是否为操作菜单  并且设置了默认值
+                    if (column.key === 'index' && index === 0) return;
+                    if (column.key !== 'action') {
+                        if (column.componentType === 'RangePicker' || column.componentType === 'TimeRangePicker') {
+                            handleSetRangeTimeValue(pushObj, column.dataIndex as string);
+                        } else if (
+                            (column.componentType && staticDataComponents.includes(column.componentType) && (column.componentProps as any)?.datasourceType === 'staticData') ||
+                            (column.componentType && DicDataComponents.includes(column.componentType) && (column.componentProps as any)?.datasourceType === 'dic')
+                        ) {
+                            let { defaultSelect } = column.componentProps as any;
+                            pushObj[column!.dataIndex as string] = defaultSelect;
+                        } else {
+                            pushObj[column!.dataIndex as string] = column.defaultValue;
+                        }
+                    }
+                });
+                data.value.push(pushObj);
+                emit('change', unref(data));
+                emit('update:value', unref(data));
+
+                //新增数据钩子
+                if (isFunction(props.addAfter)) {
+                    props.addAfter(formModel, pushObj);
+                }
+            };
+
+            const remove = (index) => {
+                data.value.splice(index, 1);
+                emit('change', unref(data));
+                emit('update:value', unref(data));
+            };
+
+            const renderSubFormList = async (list) => {
+                list?.forEach((x) => {
+                    const dataObj = {};
+                    columns.value?.map((item) => {
+                        if (!item?.dataIndex) return;
+                        dataObj[item.dataIndex as string] = item.componentProps?.prestrainField ? x[item.componentProps.prestrainField] : null;
+                    });
+
+                    data.value.push(dataObj);
+                });
+                emit('change', unref(data));
+                emit('update:value', unref(data));
+            };
+
+            watch(
+                () => props.preloadType,
+                async (val) => {
+                    if (!!val && !props.useSelectButton) {
+                        // console.log('watch props.preloadType');
+                        let res;
+                        if (props.preloadType === 'api') {
+                            res = await apiConfigFunc(props.apiConfig, false, formModel);
+                        } else if (props.preloadType === 'dic') {
+                            res = await getDicDetailList({ itemId: props.itemId });
+                        }
+                        renderSubFormList(res);
+                    }
+                },
+                {
+                    immediate: true
+                }
+            );
+            /**
+             * @author: tzx
+             * @description: rangePicker组件的change事件
+             */
+            const handleRangePickerChange = (values: Recordable, field: string, format = 'YYYY-MM-DD') => {
+                const startTimeKey = field.split(',')[0];
+                const endTimeKey = field.split(',')[1];
+
+                const [startTime, endTime]: string[] = values[field];
+                values[startTimeKey] = dateUtil(startTime).format(format);
+                values[endTimeKey] = dateUtil(endTime).format(format);
+
+                return values;
+            };
+
+            /**
+             * @author: tzx
+             * @description: 设置RangeTime的值
+             *
+             */
+            function handleSetRangeTimeValue(values: Recordable, field: string) {
+                const startTimeKey = field.split(',')[0];
+                const endTimeKey = field.split(',')[1];
+                values[startTimeKey] = '';
+                values[endTimeKey] = '';
+
+                return values;
+            }
+
+            const rules = (column, record, index) => {
+                if (column.key === 'index') return;
+                const requiredRule = {
+                    required: getComponentsProps(column.componentProps, column.dataIndex, record, index)?.required || false,
+                    message: `${column.title}是必填项`
+                };
+                const rulesList = cloneDeep(getComponentsProps(column.componentProps, column.dataIndex, record, index)?.rules);
+                if (!rulesList) return [requiredRule];
+                rulesList?.map((item) => (item.pattern = eval(item.pattern)));
+                return [...rulesList, requiredRule];
+            };
+
+            const getComponentsProps = (componentProps, dataIndex, record, index) => {
+                if (!componentProps) return;
+                if (isFunction(componentProps)) {
+                    componentProps =
+                        componentProps({
+                            updateSchema,
+                            formModel,
+                            record,
+                            index,
+                            disableRow
+                        }) ?? {};
+                }
+
+                if (isBoolean(props.disabled)) {
+                    componentProps['disabled'] = componentProps['disabled'] || props.disabled;
+                } else if (isBoolean(componentProps['disabled'])) {
+                    componentProps['disabled'] = cacheMap.has(dataIndex) && cacheMap.get(dataIndex)?.includes(index) ? true : false;
+                }
+
+                return componentProps as Recordable;
+            };
+
+            // const getDisable = (column, index) => {
+            //   console.log('getDisable', cacheMap.get(column.dataIndex), column.componentProps.disabled);
+            //   return cacheMap.has(column.dataIndex) && cacheMap.get(column.dataIndex)?.includes(index)
+            //     ? true
+            //     : false;
+            // };
+
+            const disableRow = (column: SubFormColumn, index?: number) => {
+                let col: any = columns.value.find((x) => x.dataIndex == column.dataIndex);
+                if (col && index !== undefined) {
+                    //如果当前字段已经缓存
+                    if (cacheMap.has(col.dataIndex)) {
+                        let indexArray = cacheMap.get(col.dataIndex);
+
+                        if (column.componentProps.disabled) {
+                            if (!indexArray) {
+                                indexArray = [index];
+                            } else {
+                                if (!indexArray.includes(index)) {
+                                    indexArray.push(index);
+                                }
+                            }
+                        } else {
+                            if (indexArray) {
+                                if (indexArray.findIndex((x) => x === index) > -1) {
+                                    indexArray.splice(
+                                        indexArray.findIndex((x) => x === index),
+                                        1
+                                    );
+                                }
+                            }
+                        }
+                    } else {
+                        if (column.componentProps.disabled) {
+                            cacheMap.set(col.dataIndex, [index]);
+                        }
+                    }
+                }
+            };
+
+            const updateSchema = (column: SubFormColumn, index?: number) => {
+                let col: any = columns.value.find((x) => x.dataIndex == column.dataIndex);
+                if (col && index !== undefined) {
+                    //如果当前字段已经缓存
+                    if (cacheMap.has(col.dataIndex)) {
+                        let indexArray = cacheMap.get(col.dataIndex);
+
+                        if (column.componentProps.disabled) {
+                            if (!indexArray) {
+                                indexArray = [index];
+                            } else {
+                                indexArray.push(index);
+                            }
+                        } else {
+                            if (indexArray) {
+                                if (indexArray.findIndex((x) => x === index) > -1) {
+                                    indexArray.splice(
+                                        indexArray.findIndex((x) => x === index),
+                                        1
+                                    );
+                                }
+                            }
+                        }
+                    } else {
+                        if (column.componentProps.disabled) {
+                            cacheMap.set(col.dataIndex, [index]);
+                        }
+                    }
+                }
+                //console.log('cacheMap', cacheMap);
+
+                return col || col?.length ? deepMerge(col, column) : col;
+            };
+
+            function filterColum(column) {
+                return column.filter((o) => {
+                    return o.key == 'action' || o.key == 'index' || (((isBoolean(o.show) && o.show) || !isBoolean(o.show)) && isBoolean(o.componentProps?.isShow) && o.componentProps?.isShow) || !isBoolean(o.componentProps?.isShow);
+                });
+            }
+
+            return {
+                FormItem,
+                addDataKey,
+                componentMap,
+                getComponentsProps,
+                handleRangePickerChange,
+                onFieldBlur,
+                onFieldChange,
+                rules,
+                remove,
+                add,
+                FormItemRest,
+                t,
+                multipleDialog,
+                checkedValueComponents,
+                sum,
+                data,
+                headColums,
+                columns,
+            }
+        }
+    }
+</script>
diff --git a/src/components/SimpleForm/src/components/SimpleFormItemSetup.vue b/src/components/SimpleForm/src/components/SimpleFormItemSetup.vue
new file mode 100644
index 0000000..0dfa458
--- /dev/null
+++ b/src/components/SimpleForm/src/components/SimpleFormItemSetup.vue
@@ -0,0 +1,261 @@
+<script lang="ts">
+    import { Form, Col, Row, Tabs, TabPane, Divider } from 'ant-design-vue';
+    import { isBoolean, isFunction, upperFirst, cloneDeep } from 'lodash-es';
+    import { computed, unref, inject, Ref, watch, ref } from 'vue';
+    import { componentMap } from '/@/components/Form/src/componentMap';
+    import { checkedValueComponents } from '/@/components/Form/src/helper';
+    import { useItemLabelWidth } from '/@/components/Form/src/hooks/useLabelWidth';
+    import { FormActionType, FormProps, FormSchema } from '/@/components/Form/src/types/form';
+    import { CollapseContainer } from '/@/components/Container';
+    import { noShowWorkFlowComponents, noShowGenerateComponents } from '/@/components/Form/src/helper';
+    import { useMessage } from '/@/hooks/web/useMessage';
+    import TableLayoutPreview from '/@/components/Form/src/components/TableLayoutPreview.vue';
+    import { camelCaseString } from '/@/utils/event/design';
+    import Readonly from '/@/components/Form/src/components/Readonly.vue';
+
+    export default {
+        components: {
+            Form,
+            Col,
+            Row,
+            Tabs,
+            TabPane,
+            Divider,
+            checkedValueComponents,
+            CollapseContainer,
+            TableLayoutPreview,
+            Readonly
+        },
+        props: {
+            schema: {
+                type: Object as PropType<FormSchema>,
+                default: () => {}
+            },
+            value: [Object, String, Number, Boolean, Array],
+            formApi: {
+                type: Object as PropType<FormActionType>
+            },
+            //刷新api使用
+            refreshFieldObj: {
+                type: Object,
+                default: () => {}
+            },
+            //是否是工作流
+            isWorkFlow: {
+                type: Boolean,
+                default: false
+            }
+        },
+
+        setup(props, ctx) {
+            const formModel = inject<Recordable>('formModel');
+            const formProps = inject<Ref<FormProps>>('formProps');
+            const tabActiveKey = inject<Ref<number>>('tabActiveKey', ref(0));
+            const activeKey = ref<number>(0);
+            const isCamelCase = inject<boolean>('isCamelCase', false);
+            // 注入整个表单的配置，formProps是个计算属性，不能修改，formData则来自每个业务的表单页面。
+            const formData = inject('formData', { noInject: true });
+            watch(
+                () => tabActiveKey?.value,
+                (val) => {
+                    if (props.isWorkFlow) activeKey.value = val!;
+                },
+                {
+                    immediate: true
+                }
+            );
+            watch(
+                () => activeKey?.value,
+                (val) => {
+                    if (props.isWorkFlow) tabActiveKey.value = val!;
+                },
+                {
+                    immediate: true
+                }
+            );
+            const { notification } = useMessage();
+            const getSchema = computed(() => {
+                return props.schema as FormSchema;
+            });
+
+            const getDisable = computed(() => {
+                const { disabled: globDisabled } = formProps!.value;
+                const { dynamicDisabled } = getSchema.value;
+                const { disabled: itemDisabled = false } = unref(getComponentsProps);
+                let disabled = !!globDisabled || itemDisabled;
+                if (isBoolean(dynamicDisabled)) {
+                    disabled = dynamicDisabled;
+                }
+                if (isFunction(dynamicDisabled)) {
+                    disabled = dynamicDisabled({
+                        values: formModel![getSchema.value.field],
+                        model: formModel!,
+                        schema: unref(getSchema),
+                        field: unref(getSchema).field
+                    });
+                }
+                return disabled;
+            });
+
+            const getComponentsProps = computed(() => {
+                let { componentProps = {} } = props.schema;
+
+                if (isFunction(componentProps)) {
+                    componentProps =
+                        componentProps({
+                            schema: props.schema,
+                            formModel,
+                            formActionType: props.formApi
+                        }) ?? {};
+                } else {
+                    if (componentProps['events']) {
+                        for (const eventKey in componentProps['events']) {
+                            try {
+                                const fun = componentProps['events'][eventKey];
+                                let event;
+                                if (typeof fun === 'string') {
+                                    event = new Function('schema', 'formModel', 'formActionType', 'extParams', `${fun}`);
+                                } else if (typeof fun === 'function') {
+                                    event = fun;
+                                }
+                                componentProps['on' + upperFirst(eventKey)] = function () {
+                                    let cloneFormModel = cloneDeep(formModel);
+                                    for (let item in cloneFormModel) {
+                                        let field = camelCaseString(item);
+                                        if (field) cloneFormModel[field] = cloneFormModel[item];
+                                    }
+                                    event(props.schema, isCamelCase ? cloneFormModel : formModel, props.formApi, { formData });
+
+                                    if (isCamelCase) {
+                                        for (let item in formModel) {
+                                            let field = camelCaseString(item);
+                                            if (cloneFormModel && field && cloneFormModel[field] !== undefined) {
+                                                formModel[item] = cloneFormModel[field];
+                                            }
+                                        }
+                                    }
+                                };
+                            } catch (error) {
+                                console.log('error', error);
+                                notification.error({
+                                    message: 'Tip',
+                                    description: '触发事件填写有误！'
+                                });
+                            }
+                        }
+                    }
+                }
+                if (isBoolean(props.schema.dynamicDisabled)) {
+                    componentProps['disabled'] = props.schema.dynamicDisabled;
+                }
+                if (isBoolean(props.schema.required)) {
+                    componentProps['required'] = props.schema.required;
+                }
+
+                return componentProps as Recordable;
+            });
+
+            const labelCol = computed(() => {
+                // 列宽支持两种模式 labelWidthMode = flex为百分比宽度 fix 为定宽
+                const commonLabelCol = unref(itemLabelWidthProp).labelCol;
+                const itemLabelCol = unref(getComponentsProps).labelCol;
+                const { labelWidthMode, labelFixWidth, span } = props.schema.componentProps as any;
+                let labelCol: any = {};
+                if (labelWidthMode !== 'fix') {
+                    labelCol.span = span || itemLabelCol?.span || commonLabelCol?.span;
+                } else {
+                    labelCol.style = {
+                        width: `${labelFixWidth || 120}px`
+                    };
+                }
+                return labelCol;
+            });
+
+            const rules = computed(() => {
+                const requiredRule = {
+                    required: unref(getComponentsProps).required || false,
+                    message: `${props.schema.label}是必填项`
+                };
+                const rulesList = cloneDeep(unref(getComponentsProps).rules);
+                if (!rulesList) return [requiredRule];
+                rulesList?.map((item) => (item.pattern = eval(item.pattern)));
+                return [...rulesList, requiredRule];
+            });
+
+            //根据labelwidth 生成labelCol
+            const itemLabelWidthProp = useItemLabelWidth(getSchema, formProps!);
+            watch(
+                () => formModel,
+                () => {
+                    // console.log('formitem watch!!!!!!!!');
+                    //填值以后需要手动校验的组件
+                    const validateComponents = ['User', 'RichTextEditor', 'Upload', 'SelectMap'];
+                    if (validateComponents.includes(props.schema.component) && formModel![props.schema.field]) {
+                        setTimeout(() => {
+                            props.formApi?.validateFields([props.schema.field]);
+                        }, 100);
+                    }
+                },
+                {
+                    deep: true,
+                    immediate: true
+                }
+            );
+
+            const formComponent = (schema) => {
+                return componentMap.get(['caseErpApplyDetailList', 'case_erp_apply_detailList', 'CASE_ERP_APPLY_DETAILList'].includes(schema.field) ? 'ErpApply' : schema.component);
+            };
+
+            const defaultComponent = (schema) => {
+                return componentMap.get(schema.key === 'ac18952da41b45c9a66ffba3e42b7f3d' ? 'ErpUpload' : schema.key === 'b3ba87573cf0466d951bc63fd4df1c78' ? 'ErpCheck' : schema.component);
+            };
+
+            function showComponent(schema) {
+                return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type);
+            }
+
+            function readonlySupport(name) {
+                return /^(Input|AutoCodeRule|DatePicker|Text|TimePicker|Range|RichTextEditor|TimeRangePicker|RangePicker|InputTextArea)$/.test(name);
+            }
+
+            function getShow(schema: FormSchema): boolean {
+                const { show } = schema;
+                let isIfShow = true;
+
+                if (isBoolean(show)) {
+                    isIfShow = show;
+                }
+                return isIfShow;
+            }
+
+            function getIsShow(schema: FormSchema): boolean {
+                const { componentProps, show } = schema as any;
+                let isShow = true;
+                if (isBoolean(componentProps?.isShow)) {
+                    isShow = componentProps?.isShow;
+                }
+                if (isBoolean(show)) {
+                    isShow = show;
+                }
+                return isShow;
+            }
+
+            return {
+                getIsShow,
+                getShow,
+                formModel,
+                formProps,
+                showComponent,
+                activeKey,
+                getComponentsProps,
+                componentMap,
+                readonlySupport,
+                getDisable,
+                formComponent,
+                defaultComponent,
+                rules,
+                itemLabelWidthProp
+            };
+        }
+    };
+</script>