docs: 增加明细表二开的文档
This commit is contained in:
gaoyunqi
@ -1,4 +1,7 @@
|
||||
## 如何拆分表单
|
||||
|
||||
**注意：框架的部分模版部分用了非空断言，如formModel![xxx]，编译器报错可以去掉叹号，或者在script上加上lang="ts"**
|
||||
|
||||
默认情况下，生成的表单以JSON存储，每个字段都是由循环产生，因此在二开之前需要将每个字段拆开，以便进行二开。
|
||||
|
||||
首先，打开项目dev_tools/formprops.js，将其中的内容替换为
|
||||
|
||||
121
docs/表单二开/2_拆分表单中的明细表.md
Normal file
121
docs/表单二开/2_拆分表单中的明细表.md
Normal file
@ -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>
|
||||
```
|
||||
Reference in New Issue
Block a user