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>
|
||||
```
|
||||
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