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