geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 日期时间区间支持只读显示，选人组件在只读状态下不再可选

Browse Source 
fix: 略微调整表单标签的高度
This commit is contained in:
gaoyunqi
2024-04-02 17:29:03 +08:00
parent b595971a5b
commit 2ddeed95c9
5 changed files with 514 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Designer/src/types/index.ts
View File

@ -162,6 +162,9 @@ export const basicComponents = [
typeName: t('编码组件'),
type: 'auto-code',
options: {
labelWidthMode: 'fix',
labelFixWidth: 120,
responsive: false,
width: '100%',
span: '',
placeholder: t('请输入编码组件'),
@ -1151,6 +1154,9 @@ export const infoComponents = [
typeName: t('组织架构'),
type: 'organization',
options: {
labelWidthMode: 'fix',
labelFixWidth: 120,
responsive: false,
span: '',
width: '100%',
defaultValue: undefined,

84
src/components/Form/src/components/Readonly.vue
View File

@ -3,48 +3,62 @@
</template>
<script setup>
import { ref, watch } from 'vue';
import { ref, watch } from 'vue';
const props = defineProps({
value: String,
schema: Object,
});
const props = defineProps({
value: String,
schema: Object,
model: Object
});
const fieldValue = ref(genFieldValue(props.value));
const fieldValue = ref(genFieldValue(props.value));
const textComponents = ['Input', 'AutoCodeRule', 'DatePicker', 'TimePicker', 'Info', 'Text', 'InputTextArea', 'InputNumber'];
function genFieldValue(val) {
if (!props?.schema || (!val && val !== 0)) {
return '';
function parseRangeVal(val, component) {
if (component !== 'RangePicker' || !val) {
return val || '';
}
return val.split(' ')[0];
}
const schema = props.schema;
const { componentProps, component } = schema;
if ([
"Input",
"AutoCodeRule",
"DatePicker",
"TimePicker",
"Info",
"Text",
'InputTextArea',
'InputNumber'].includes(component)) {
return `${componentProps?.addonBefore || ''}${val}${componentProps?.addonAfter || ''}`;
}
if (component === 'Switch') {
return val === 1 ? '是' : '否';
}
}
function genFieldValue(val) {
const schema = props.schema;
const model = props.model;
const { componentProps, component } = schema;
if (model && (component === 'TimeRangePicker' || component === 'RangePicker')) {
const fieldArr = schema.field.split(',');
const valStart = parseRangeVal(model[fieldArr[0]], component);
const valEnd = parseRangeVal(model[fieldArr[1]], component);
return `${valStart} - ${valEnd}`;
}
if (!schema || (!val && val !== 0)) {
return '';
}
watch(
() => props.value,
(newValue) => {
fieldValue.value = genFieldValue(newValue);
},
);
if (textComponents.includes(component)) {
return `${componentProps?.addonBefore || ''}${val}${componentProps?.addonAfter || ''}`;
} else if (component === 'Switch') {
return val === 1 ? '是' : '否';
}
}
watch(
() => props.value,
(newValue) => {
fieldValue.value = genFieldValue(newValue);
}
);
watch(
() => props.model,
(newValue) => {
fieldValue.value = genFieldValue(newValue);
},
{ deep: true }
);
</script>
<style>
.field-readonly {
white-space: pre-wrap;
}
.field-readonly {
white-space: pre-wrap;
}
</style>

172
src/components/Form/src/components/SelectUser.vue
View File

@ -1,86 +1,102 @@
<template>
<div>
<FormItemRest>
<SelectUser
:multiple="multiple"
:selectedIds="selectedIds"
:key="key"
@change="
(ids, options) => {
emit('update:value', ids.join(','));
emit('selectedId', ids.join(','));
emit('change', ids.join(','), options);
}
"
@change-names="
(names) => {
userNames = names;
}
"
>
<a-input
readonly
:disabled="disabled"
:placeholder="placeholder"
v-model:value="userNames"
:size="size"
:bordered="bordered"
>
<template #prefix v-if="prefix">
<Icon :icon="prefix" />
</template>
<template #suffix v-if="suffix">
<Icon :icon="suffix" />
</template>
</a-input>
</SelectUser>
</FormItemRest>
</div>
<div :class="{ disabled }" class="form-select-user">
<FormItemRest>
<SelectUser
:key="key"
:multiple="multiple"
:selectedIds="selectedIds"
:disabled="disabled"
@change="
(ids, options) => {
emit('update:value', ids.join(','));
emit('selectedId', ids.join(','));
emit('change', ids.join(','), options);
}
"
@change-names="
(names) => {
userNames = names;
}
"
>
<a-input v-model:value="userNames" :bordered="bordered" :disabled="disabled" :placeholder="placeholder" :size="size" readonly>
<template v-if="prefix" #prefix>
<Icon :icon="prefix" />
</template>
<template v-if="suffix" #suffix>
<Icon :icon="suffix" />
</template>
</a-input>
</SelectUser>
</FormItemRest>
</div>
</template>
<script lang="ts" setup>
import { Form } from 'ant-design-vue';
import { SelectUser } from '/@/components/SelectOrganizational/index';
import { watch, ref } from 'vue';
import { Icon } from '/@/components/Icon';
import { Form } from 'ant-design-vue';
import { SelectUser } from '/@/components/SelectOrganizational/index';
import { watch, ref } from 'vue';
import { Icon } from '/@/components/Icon';
// 用于包裹弹窗的form组件 因为一个FormItem 只能收集一个表单组件 所以弹窗的form 必须排除
const FormItemRest = Form.ItemRest;
// 用于包裹弹窗的form组件 因为一个FormItem 只能收集一个表单组件 所以弹窗的form 必须排除
const FormItemRest = Form.ItemRest;
const props = defineProps({
value: String,
prefix: String,
suffix: String,
placeholder: String,
readonly: Boolean,
disabled: Boolean,
size: String,
bordered: {
type: Boolean,
default: true,
},
multiple: {
type: Boolean,
default: true,
},
});
const props = defineProps({
value: String,
prefix: String,
suffix: String,
placeholder: String,
readonly: Boolean,
disabled: Boolean,
size: String,
bordered: {
type: Boolean,
default: true
},
multiple: {
type: Boolean,
default: true
}
});
const userNames = ref<string>();
const selectedIds = ref<string[]>([]);
const emit = defineEmits(['update:value', 'selectedId', 'change']);
const key = ref<number>(0);
const userNames = ref<string>();
const selectedIds = ref<string[]>([]);
const emit = defineEmits(['update:value', 'selectedId', 'change']);
const key = ref<number>(0);
watch(
props,
async () => {
selectedIds.value = props.value ? props.value?.split(',') : [];
if (!props.value) {
//预览页面 重置
userNames.value = '';
}
key.value++;
},
{
immediate: true,
},
);
watch(
props,
async () => {
selectedIds.value = props.value ? props.value?.split(',') : [];
if (!props.value) {
//预览页面 重置
userNames.value = '';
}
key.value++;
},
{
immediate: true
}
);
</script>
<style lang="less">
.form-select-user {
&.disabled {
.ant-input-suffix {
display: none;
}
.ant-input-affix-wrapper-disabled {
background-color: transparent;
}
.ant-input[disabled] {
color: rgba(0, 0, 0, 0.85);
}
.ant-input-affix-wrapper{
border: none;
padding-left: 0;
}
}
}
</style>

2
src/components/SelectOrganizational/src/SelectUser.vue
View File

@ -65,6 +65,7 @@
disabledIds?: Array<string>;
multiple?: Boolean;
visible?: Boolean;
disabled?: Boolean;
}>(),
{
selectedIds: () => {
@ -126,6 +127,7 @@
}
});
async function show() {
if(props.disabled) return;
data.selectedIds = [];
data.selectedList = [];
data.page.current = 1;

701
src/components/SimpleForm/src/components/SimpleFormItem.vue
View File

@ -2,65 +2,68 @@
<div>
<!--如果是grid 组件 需要新增grid布局包裹-->
<template v-if="schema.component.includes('Grid')">
<Row v-show="getIsShow(schema)" :align="(schema.componentProps as any).align"
:gutter="(schema.componentProps as any).gutter ?? 0" :justify="(schema.componentProps as any).justify"
type="flex">
<Row v-show="getIsShow(schema)" :align="(schema.componentProps as any).align" :gutter="(schema.componentProps as any).gutter ?? 0" :justify="(schema.componentProps as any).justify" type="flex">
<Col v-for="(col, colIndex) in schema.children" :key="colIndex" :span="col.span">
<template v-for="childSchema in col.list" :key="childSchema.field">
<SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]"
:form-api="formApi" :isWorkFlow="isWorkFlow" :label-col="labelCol"
:refreshFieldObj="refreshFieldObj" :schema="childSchema" />
</template>
<template v-for="childSchema in col.list" :key="childSchema.field">
<SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :label-col="labelCol" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
</template>
</Col>
</Row>
</template>
<!--如果是tab 组件 需要新增tab组件包裹-->
<template v-else-if="schema.component === 'Tab'">
<Tabs v-show="getIsShow(schema)" v-model:activeKey="activeKey"
:size="(schema.componentProps as any).tabSize" :tabPosition="(schema.componentProps as any).tabPosition"
:type="(schema.componentProps as any).type">
<Tabs v-show="getIsShow(schema)" v-model:activeKey="activeKey" :size="(schema.componentProps as any).tabSize" :tabPosition="(schema.componentProps as any).tabPosition" :type="(schema.componentProps as any).type">
<TabPane v-for="(tab, tabIndex) in schema.children" :key="tabIndex" :forceRender="true" :tab="tab.name">
<template v-for="childSchema in tab.list" :key="childSchema.field">
<SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]"
:form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
:schema="childSchema" />
<SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
</template>
</TabPane>
</Tabs>
</template>
<!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"-->
<template v-else-if="schema.component.includes('Form')">
<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="formComponent(schema)" v-model:value="formModel![schema.field]" :disabled="getDisable"
:size="formProps?.size" v-bind="schema.componentProps" />
<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="formComponent(schema)" v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
</FormItem>
</template>
<!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"-->
<template v-else-if="schema.component.includes('OneForOne')">
<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="componentMap.get(schema.component)" v-model:value="formModel![schema.field]"
:disabled="getDisable" :refreshFieldObj="refreshFieldObj" :size="formProps?.size"
v-bind="schema.componentProps" />
<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="componentMap.get(schema.component)" v-model:value="formModel![schema.field]" :disabled="getDisable" :refreshFieldObj="refreshFieldObj" :size="formProps?.size" v-bind="schema.componentProps" />
</FormItem>
</template>
<template v-else-if="schema.component === 'TableLayout'">
<TableLayoutPreview v-if="getShow(schema)" v-show="getIsShow(schema)" :element="schema">
<template #tdElement="{ tdElement }">
<div class="h-full">
<div :style="{
height: tdElement.height ? tdElement.height + 'px' : '',
minHeight: (tdElement.height || '42') + 'px',
overflow: 'hidden',
padding: '10px'
}">
<div
:style="{
height: tdElement.height ? tdElement.height + 'px' : '',
minHeight: (tdElement.height || '42') + 'px',
overflow: 'hidden',
padding: '10px'
}"
>
<template v-for="childSchema in tdElement.children" :key="childSchema.field">
<SimpleFormItem v-if="showComponent(childSchema)"
v-model:value="formModel![childSchema.field]" :form-api="formApi"
:isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
<SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
</template>
</div>
</div>
@ -69,41 +72,51 @@
</template>
<!--如果是时间区间 组件 需要v-model:startField="表单对象[字段名]" v-model:endField="表单对象[字段名]"-->
<template v-else-if="schema.component.includes('Range')">
<FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
:rules="rules" :validateTrigger="['blur', 'change']" :wrapperCol="itemLabelWidthProp.wrapperCol">
<component :is="componentMap.get(schema.component)" v-model:endField="schema.field.split(',')[1]"
v-model:startField="schema.field.split(',')[0]" v-model:value="formModel![schema.field]"
:disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
<FormItem
v-if="getShow(schema)"
v-show="getIsShow(schema)"
:key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''"
:label-col="labelCol"
:name="schema.field"
:rules="rules"
:validateTrigger="['blur', 'change']"
:wrapperCol="itemLabelWidthProp.wrapperCol"
>
<template v-if="getDisable && readonlySupport(schema.component)">
<readonly :schema="schema" :model="formModel" />
</template>
<template v-else>
<component
:is="componentMap.get(schema.component)"
v-model:endField="schema.field.split(',')[1]"
v-model:startField="schema.field.split(',')[0]"
v-model:value="formModel![schema.field]"
:disabled="getDisable"
:size="formProps?.size"
v-bind="schema.componentProps"
/>
</template>
</FormItem>
<!-- 因为Range会变为 开始时间 和 结束时间 2个属性给与表单数据 所以需要2个隐藏框绑定 starTime 和 endTime -->
<FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''"
:name="schema.field.split(',')[0]">
<FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''" :name="schema.field.split(',')[0]">
<input type="hidden" />
</FormItem>
<FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''"
:name="schema.field.split(',')[1]">
<FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''" :name="schema.field.split(',')[1]">
<input type="hidden" />
</FormItem>
</template>
<!--如果checked 或者 switch组件 需要v-model:checked="表单对象[字段名]" "-->
<template v-else-if="checkedValueComponents.includes(schema.component)">
<FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
:rules="rules" :wrapperCol="itemLabelWidthProp.wrapperCol">
<component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]"
v-model:checked="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size"
v-bind="getComponentsProps" />
<FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field" :rules="rules" :wrapperCol="itemLabelWidthProp.wrapperCol">
<component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]" v-model:checked="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="getComponentsProps" />
</FormItem>
</template>
<!--如果是card 组件 需要新增card组件包裹-->
<template v-else-if="schema.component.includes('Card')">
<CollapseContainer v-show="getIsShow(schema)" :bordered="false" :hasLeftBorder="true"
:title="(schema.componentProps as any).title">
<CollapseContainer v-show="getIsShow(schema)" :bordered="false" :hasLeftBorder="true" :title="(schema.componentProps as any).title">
<template v-for="childSchema in schema.children![0].list" :key="childSchema.field">
<SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]"
:form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
:schema="childSchema" />
<SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
</template>
</CollapseContainer>
</template>
@ -115,329 +128,341 @@
</template>
<!--如果是 意见簿 组件 需要使用defaultValue直接赋值 -->
<template v-else-if="schema.component.includes('Opinion')">
<FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
:rules="rules" :validateTrigger="['blur', 'change']" :wrapperCol="itemLabelWidthProp.wrapperCol">
<component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]"
:disabled="getDisable" :size="formProps?.size" :value="schema.defaultValue"
v-bind="getComponentsProps" />
<FormItem
v-if="getShow(schema)"
v-show="getIsShow(schema)"
:key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''"
:label-col="labelCol"
:name="schema.field"
:rules="rules"
:validateTrigger="['blur', 'change']"
:wrapperCol="itemLabelWidthProp.wrapperCol"
>
<component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]" :disabled="getDisable" :size="formProps?.size" :value="schema.defaultValue" v-bind="getComponentsProps" />
</FormItem>
</template>
<template v-else>
<FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
:rules="rules" :validateTrigger="['blur', 'change']" :wrapperCol="itemLabelWidthProp.wrapperCol">
<FormItem
v-if="getShow(schema)"
v-show="getIsShow(schema)"
:key="schema.key"
:label="getComponentsProps.showLabel ? schema.label : ''"
:label-col="labelCol"
:name="schema.field"
:rules="rules"
:validateTrigger="['blur', 'change']"
:wrapperCol="itemLabelWidthProp.wrapperCol"
>
<template v-if="getDisable && readonlySupport(schema.component)">
<readonly :schema="schema" :value="formModel![schema.field]" />
</template>
<template v-else>
<component :is="defaultComponent(schema)" :key="refreshFieldObj[schema.field]"
v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size"
v-bind="getComponentsProps" />
<component :is="defaultComponent(schema)" :key="refreshFieldObj[schema.field]" v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="getComponentsProps" />
</template>
</FormItem>
</template>
</div>
</template>
<script lang="ts" setup>
import { Form, Col, Row, Tabs, TabPane, Divider } from 'ant-design-vue';
import { isBoolean, isFunction, upperFirst, cloneDeep } from 'lodash-es';
import { computed, onMounted, 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';
import { Form, Col, Row, Tabs, TabPane, Divider } from 'ant-design-vue';
import { isBoolean, isFunction, upperFirst, cloneDeep } from 'lodash-es';
import { computed, onMounted, 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';
const FormItem = Form.Item;
const FormItem = Form.Item;
const props = defineProps({
// 表单配置规则
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
}
});
const props = defineProps({
// 表单配置规则
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
}
});
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 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
}
);
// watch(
// () => props.value,
// (val) => {
// if (!val) return;
// let { componentProps = {} } = props.schema;
// if (componentProps['events']) {
// for (const eventKey in componentProps['events']) {
// try {
// const event = new Function(
// 'schema',
// 'formModel',
// 'formActionType',
// `${componentProps['events'][eventKey]}`,
// );
// event(props.schema, formModel, props.formApi);
// } catch (error) {
// notification.error({
// message: 'Tip',
// description: '触发事件填写有误！',
// });
// }
// }
// }
// },
// {
// immediate: true,
// },
// );
// watch(
// () => props.value,
// (val) => {
// if (!val) return;
// let { componentProps = {} } = props.schema;
// if (componentProps['events']) {
// for (const eventKey in componentProps['events']) {
// try {
// const event = new Function(
// 'schema',
// 'formModel',
// 'formActionType',
// `${componentProps['events'][eventKey]}`,
// );
// event(props.schema, formModel, props.formApi);
// } catch (error) {
// notification.error({
// message: 'Tip',
// description: '触发事件填写有误！',
// });
// }
// }
// }
// },
// {
// immediate: true,
// },
// );
const { notification } = useMessage();
const getSchema = computed(() => {
return props.schema as FormSchema;
});
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 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;
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];
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;
}
event(props.schema, isCamelCase ? cloneFormModel : formModel, props.formApi, { formData });
if (isCamelCase) {
for (let item in formModel) {
componentProps['on' + upperFirst(eventKey)] = function () {
let cloneFormModel = cloneDeep(formModel);
for (let item in cloneFormModel) {
let field = camelCaseString(item);
if (cloneFormModel && field && cloneFormModel[field] !== undefined) {
formModel[item] = cloneFormModel[field];
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: '触发事件填写有误！'
});
};
} 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 } = props.schema.componentProps as any;
let labelCol: any = {};
if (labelWidthMode !== 'fix') {
labelCol.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);
if (isBoolean(props.schema.dynamicDisabled)) {
componentProps['disabled'] = props.schema.dynamicDisabled;
}
},
{
deep: true,
immediate: true
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 } = props.schema.componentProps as any;
let labelCol: any = {};
if (labelWidthMode !== 'fix') {
labelCol.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
}
);
onMounted(() => {
// console.log('onMounted');
// if (
// staticDataComponents.includes(props.schema.component) &&
// (props.schema.componentProps as any)?.datasourceType === 'staticData'
// ) {
// let { defaultSelect } = props.schema.componentProps as any;
// emit('update:value', defaultSelect);
// console.log('update:value1', defaultSelect);
// } else {
// let { defaultValue } = props.schema;
// if (!!props.schema.field && !noDefaultValueComponents.includes(props.schema.component)) {
// console.log('update:value', props.schema.component === 'SubForm' ? [] : defaultValue);
// emit('update:value', defaultValue);
// }
// }
});
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);
}
);
onMounted(() => {
// console.log('onMounted');
// if (
// staticDataComponents.includes(props.schema.component) &&
// (props.schema.componentProps as any)?.datasourceType === 'staticData'
// ) {
// let { defaultSelect } = props.schema.componentProps as any;
// emit('update:value', defaultSelect);
// console.log('update:value1', defaultSelect);
// } else {
// let { defaultValue } = props.schema;
// if (!!props.schema.field && !noDefaultValueComponents.includes(props.schema.component)) {
// console.log('update:value', props.schema.component === 'SubForm' ? [] : defaultValue);
// emit('update:value', defaultValue);
// }
// }
});
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|Info/.test(name)
}
function getShow(schema: FormSchema): boolean {
const { show } = schema;
let isIfShow = true;
if (isBoolean(show)) {
isIfShow = show;
function readonlySupport(name) {
return /Input|AutoCodeRule|DatePicker|Text|TimePicker|Info|Range/.test(name);
}
return isIfShow;
}
function getIsShow(schema: FormSchema): boolean {
const { componentProps, show } = schema as any;
let isShow = true;
if (isBoolean(componentProps?.isShow)) {
isShow = componentProps?.isShow;
function getShow(schema: FormSchema): boolean {
const { show } = schema;
let isIfShow = true;
if (isBoolean(show)) {
isIfShow = show;
}
return isIfShow;
}
if (isBoolean(show)) {
isShow = show;
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 isShow;
}
</script>
<style lang="less" scoped>
:deep(.ant-form-item-label > label) {
white-space: normal;
display: inline;
line-height: 28px;
}
:deep(.ant-form-item-label > label) {
white-space: normal;
display: inline;
line-height: 32px;
}
</style>
<style lang="less">
.ant-select-disabled {
.ant-select-selector {
border: none !important;
background-color: transparent !important;
padding-left: 0 !important;
}
.ant-select-disabled {
.ant-select-selector {
border: none !important;
background-color: transparent !important;
padding-left: 0 !important;
}
.ant-select-selection-item {
color: rgb(0 0 0 / 85%) !important;
}
.ant-select-selection-item {
color: rgb(0 0 0 / 85%) !important;
}
.ant-select-arrow {
display: none;
.ant-select-arrow {
display: none;
}
}
}
</style>