geg-gas-web/docs/表单二开/2_拆分表单中的明细表.md

## 如何对表单中的明细表进行二开
**注意：框架的部分模版部分用了非空断言，如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>
```