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

表单创建页面及只读页面修改，formlist列表跳转修改

Browse Source
This commit is contained in:
GAOANG
2024-04-02 14:18:15 +08:00
parent 6fa16313cc
commit 528e8038bb
6 changed files with 546 additions and 508 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Form/src/componentMap.ts
View File

@ -142,6 +142,16 @@ componentMap.set('ErpApply', ErpApply);
componentMap.set('ErpUpload', ErpUpload); componentMap.set('ErpUpload', ErpUpload);
componentMap.set('ErpCheck', ErpCheck); componentMap.set('ErpCheck', ErpCheck);
componentMap.set('AutoComplete', AutoComplete); componentMap.set('AutoComplete', AutoComplete);
const readonlySupportList = [
"Input",
"AutoCodeRule",
"DatePicker",
"TimePicker",
"Info",
"Text",
'InputTextArea',
'InputNumber'
]
export function add(compName: ComponentType, component: Component) { export function add(compName: ComponentType, component: Component) {
componentMap.set(compName, component); componentMap.set(compName, component);
@ -151,4 +161,10 @@ export function del(compName: ComponentType) {
componentMap.delete(compName); componentMap.delete(compName);
} }
export { componentMap }; export function isreadComponent() {
let str = readonlySupportList.join('|')
const reg = new RegExp(str);
return reg
}
export { componentMap, readonlySupportList };

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

@ -3,40 +3,41 @@
</template> </template>
<script setup> <script setup>
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { readonlySupportList } from '/@/components/Form/src/componentMap';
const props = defineProps({ const props = defineProps({
value: String, value: String,
schema: Object, schema: Object,
}); });
const fieldValue = ref(genFieldValue(props.value)); const fieldValue = ref(genFieldValue(props.value));
function genFieldValue(val) { function genFieldValue(val) {
if (!props?.schema || (!val && val !== 0)) { if (!props?.schema || (!val && val !== 0)) {
return ''; return '';
}
const schema = props.schema;
const { componentProps, component } = schema;
if (['Input', 'AutoCodeRule', 'DatePicker', 'InputTextArea', 'InputNumber'].includes(component)) {
return `${componentProps?.addonBefore || ''}${val}${componentProps?.addonAfter || ''}`;
}
if (component === 'Switch') {
return val === 1 ? '是' : '否';
}
} }
const schema = props.schema;
const { componentProps, component } = schema;
watch( if (readonlySupportList.includes(component)) {
() => props.value, return `${componentProps?.addonBefore || ''}${val}${componentProps?.addonAfter || ''}`;
(newValue) => { }
fieldValue.value = genFieldValue(newValue); if (component === 'Switch') {
}, return val === 1 ? '是' : '否';
); }
}
watch(
() => props.value,
(newValue) => {
fieldValue.value = genFieldValue(newValue);
},
);
</script> </script>
<style> <style>
.field-readonly { .field-readonly {
white-space: pre-wrap; white-space: pre-wrap;
} }
</style> </style>

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

@ -2,68 +2,65 @@
<div> <div>
<!--如果是grid 组件 需要新增grid布局包裹--> <!--如果是grid 组件 需要新增grid布局包裹-->
<template v-if="schema.component.includes('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"> <Col v-for="(col, colIndex) in schema.children" :key="colIndex" :span="col.span">
<template v-for="childSchema in col.list" :key="childSchema.field"> <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" /> <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]"
</template> :form-api="formApi" :isWorkFlow="isWorkFlow" :label-col="labelCol"
:refreshFieldObj="refreshFieldObj" :schema="childSchema" />
</template>
</Col> </Col>
</Row> </Row>
</template> </template>
<!--如果是tab 组件 需要新增tab组件包裹--> <!--如果是tab 组件 需要新增tab组件包裹-->
<template v-else-if="schema.component === '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"> <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"> <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> </template>
</TabPane> </TabPane>
</Tabs> </Tabs>
</template> </template>
<!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"--> <!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"-->
<template v-else-if="schema.component.includes('Form')"> <template v-else-if="schema.component.includes('Form')">
<FormItem <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
v-if="getShow(schema)" :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol"
v-show="getIsShow(schema)" :labelAlign="formProps?.labelAlign" :name="schema.field" :wrapperCol="itemLabelWidthProp.wrapperCol">
:key="schema.key" <component :is="formComponent(schema)" v-model:value="formModel![schema.field]" :disabled="getDisable"
:label="getComponentsProps.showLabel ? schema.label : ''" :size="formProps?.size" v-bind="schema.componentProps" />
: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> </FormItem>
</template> </template>
<!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"--> <!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"-->
<template v-else-if="schema.component.includes('OneForOne')"> <template v-else-if="schema.component.includes('OneForOne')">
<FormItem <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
v-if="getShow(schema)" :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol"
v-show="getIsShow(schema)" :labelAlign="formProps?.labelAlign" :name="schema.field" :wrapperCol="itemLabelWidthProp.wrapperCol">
:key="schema.key" <component :is="componentMap.get(schema.component)" v-model:value="formModel![schema.field]"
:label="getComponentsProps.showLabel ? schema.label : ''" :disabled="getDisable" :refreshFieldObj="refreshFieldObj" :size="formProps?.size"
:label-col="labelCol" v-bind="schema.componentProps" />
: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> </FormItem>
</template> </template>
<template v-else-if="schema.component === 'TableLayout'"> <template v-else-if="schema.component === 'TableLayout'">
<TableLayoutPreview v-if="getShow(schema)" v-show="getIsShow(schema)" :element="schema"> <TableLayoutPreview v-if="getShow(schema)" v-show="getIsShow(schema)" :element="schema">
<template #tdElement="{ tdElement }"> <template #tdElement="{ tdElement }">
<div class="h-full"> <div class="h-full">
<div <div :style="{
:style="{ height: tdElement.height ? tdElement.height + 'px' : '',
height: tdElement.height ? tdElement.height + 'px' : '', minHeight: (tdElement.height || '42') + 'px',
minHeight: (tdElement.height || '42') + 'px', overflow: 'hidden',
overflow: 'hidden', padding: '10px'
padding: '10px' }">
}"
>
<template v-for="childSchema in tdElement.children" :key="childSchema.field"> <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> </template>
</div> </div>
</div> </div>
@ -72,46 +69,41 @@
</template> </template>
<!--如果是时间区间 组件 需要v-model:startField="表单对象[字段名]" v-model:endField="表单对象[字段名]"--> <!--如果是时间区间 组件 需要v-model:startField="表单对象[字段名]" v-model:endField="表单对象[字段名]"-->
<template v-else-if="schema.component.includes('Range')"> <template v-else-if="schema.component.includes('Range')">
<FormItem <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
v-if="getShow(schema)" :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
v-show="getIsShow(schema)" :rules="rules" :validateTrigger="['blur', 'change']" :wrapperCol="itemLabelWidthProp.wrapperCol">
:key="schema.key" <component :is="componentMap.get(schema.component)" v-model:endField="schema.field.split(',')[1]"
:label="getComponentsProps.showLabel ? schema.label : ''" v-model:startField="schema.field.split(',')[0]" v-model:value="formModel![schema.field]"
:label-col="labelCol" :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
: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> </FormItem>
<!-- 因为Range会变为 开始时间 和 结束时间 2个属性给与表单数据 所以需要2个隐藏框绑定 starTime 和 endTime --> <!-- 因为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" /> <input type="hidden" />
</FormItem> </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" /> <input type="hidden" />
</FormItem> </FormItem>
</template> </template>
<!--如果checked 或者 switch组件 需要v-model:checked="表单对象[字段名]" "--> <!--如果checked 或者 switch组件 需要v-model:checked="表单对象[字段名]" "-->
<template v-else-if="checkedValueComponents.includes(schema.component)"> <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"> <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
<component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]" v-model:checked="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="getComponentsProps" /> :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> </FormItem>
</template> </template>
<!--如果是card 组件 需要新增card组件包裹--> <!--如果是card 组件 需要新增card组件包裹-->
<template v-else-if="schema.component.includes('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"> <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> </template>
</CollapseContainer> </CollapseContainer>
</template> </template>
@ -123,337 +115,329 @@
</template> </template>
<!--如果是 意见簿 组件 需要使用defaultValue直接赋值 --> <!--如果是 意见簿 组件 需要使用defaultValue直接赋值 -->
<template v-else-if="schema.component.includes('Opinion')"> <template v-else-if="schema.component.includes('Opinion')">
<FormItem <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
v-if="getShow(schema)" :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
v-show="getIsShow(schema)" :rules="rules" :validateTrigger="['blur', 'change']" :wrapperCol="itemLabelWidthProp.wrapperCol">
:key="schema.key" <component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]"
:label="getComponentsProps.showLabel ? schema.label : ''" :disabled="getDisable" :size="formProps?.size" :value="schema.defaultValue"
:label-col="labelCol" v-bind="getComponentsProps" />
: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> </FormItem>
</template> </template>
<template v-else> <template v-else>
<FormItem <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
v-if="getShow(schema)" :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
v-show="getIsShow(schema)" :rules="rules" :validateTrigger="['blur', 'change']" :wrapperCol="itemLabelWidthProp.wrapperCol">
:key="schema.key" <template v-if="getDisable && readonlySupport(schema.component)">
:label="getComponentsProps.showLabel ? schema.label : ''"
:label-col="labelCol"
:name="schema.field"
:rules="rules"
:validateTrigger="['blur', 'change']"
:wrapperCol="itemLabelWidthProp.wrapperCol"
>
<template v-if="getDisable && /Input|AutoCodeRule|DatePicker/.test(schema.component)">
<readonly :schema="schema" :value="formModel![schema.field]" /> <readonly :schema="schema" :value="formModel![schema.field]" />
</template> </template>
<template v-else> <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> </template>
</FormItem> </FormItem>
</template> </template>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Form, Col, Row, Tabs, TabPane, Divider } from 'ant-design-vue'; import { Form, Col, Row, Tabs, TabPane, Divider } from 'ant-design-vue';
import { isBoolean, isFunction, upperFirst, cloneDeep } from 'lodash-es'; import { isBoolean, isFunction, upperFirst, cloneDeep } from 'lodash-es';
import { computed, onMounted, unref, inject, Ref, watch, ref } from 'vue'; import { computed, onMounted, unref, inject, Ref, watch, ref } from 'vue';
import { componentMap } from '/@/components/Form/src/componentMap'; import { componentMap } from '/@/components/Form/src/componentMap';
import { checkedValueComponents } from '/@/components/Form/src/helper'; import { checkedValueComponents } from '/@/components/Form/src/helper';
import { useItemLabelWidth } from '/@/components/Form/src/hooks/useLabelWidth'; import { useItemLabelWidth } from '/@/components/Form/src/hooks/useLabelWidth';
import { FormActionType, FormProps, FormSchema } from '/@/components/Form/src/types/form'; import { FormActionType, FormProps, FormSchema } from '/@/components/Form/src/types/form';
import { CollapseContainer } from '/@/components/Container'; import { CollapseContainer } from '/@/components/Container';
import { noShowWorkFlowComponents, noShowGenerateComponents } from '/@/components/Form/src/helper'; import { noShowWorkFlowComponents, noShowGenerateComponents } from '/@/components/Form/src/helper';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import TableLayoutPreview from '/@/components/Form/src/components/TableLayoutPreview.vue'; import TableLayoutPreview from '/@/components/Form/src/components/TableLayoutPreview.vue';
import { camelCaseString } from '/@/utils/event/design'; import { camelCaseString } from '/@/utils/event/design';
import Readonly from '/@/components/Form/src/components/Readonly.vue'; import Readonly from '/@/components/Form/src/components/Readonly.vue';
const FormItem = Form.Item; const FormItem = Form.Item;
const props = defineProps({ const props = defineProps({
// 表单配置规则 // 表单配置规则
schema: { schema: {
type: Object as PropType<FormSchema>, type: Object as PropType<FormSchema>,
default: () => {} default: () => { }
}, },
value: [Object, String, Number, Boolean, Array], value: [Object, String, Number, Boolean, Array],
formApi: { formApi: {
type: Object as PropType<FormActionType> type: Object as PropType<FormActionType>
}, },
//刷新api使用 //刷新api使用
refreshFieldObj: { refreshFieldObj: {
type: Object, type: Object,
default: () => {} default: () => { }
}, },
//是否是工作流 //是否是工作流
isWorkFlow: { isWorkFlow: {
type: Boolean, type: Boolean,
default: false default: false
} }
}); });
const formModel = inject<Recordable>('formModel'); const formModel = inject<Recordable>('formModel');
const formProps = inject<Ref<FormProps>>('formProps'); const formProps = inject<Ref<FormProps>>('formProps');
const tabActiveKey = inject<Ref<number>>('tabActiveKey', ref(0)); const tabActiveKey = inject<Ref<number>>('tabActiveKey', ref(0));
const activeKey = ref<number>(0); const activeKey = ref<number>(0);
const isCamelCase = inject<boolean>('isCamelCase', false); const isCamelCase = inject<boolean>('isCamelCase', false);
// 注入整个表单的配置，formProps是个计算属性，不能修改，formData则来自每个业务的表单页面。 // 注入整个表单的配置，formProps是个计算属性，不能修改，formData则来自每个业务的表单页面。
const formData = inject('formData', { noInject: true }); const formData = inject('formData', { noInject: true });
watch( watch(
() => tabActiveKey?.value, () => tabActiveKey?.value,
(val) => { (val) => {
if (props.isWorkFlow) activeKey.value = val!; if (props.isWorkFlow) activeKey.value = val!;
}, },
{ {
immediate: true immediate: true
} }
); );
watch( watch(
() => activeKey?.value, () => activeKey?.value,
(val) => { (val) => {
if (props.isWorkFlow) tabActiveKey.value = val!; if (props.isWorkFlow) tabActiveKey.value = val!;
}, },
{ {
immediate: true immediate: true
} }
); );
// watch( // watch(
// () => props.value, // () => props.value,
// (val) => { // (val) => {
// if (!val) return; // if (!val) return;
// let { componentProps = {} } = props.schema; // let { componentProps = {} } = props.schema;
// if (componentProps['events']) { // if (componentProps['events']) {
// for (const eventKey in componentProps['events']) { // for (const eventKey in componentProps['events']) {
// try { // try {
// const event = new Function( // const event = new Function(
// 'schema', // 'schema',
// 'formModel', // 'formModel',
// 'formActionType', // 'formActionType',
// `${componentProps['events'][eventKey]}`, // `${componentProps['events'][eventKey]}`,
// ); // );
// event(props.schema, formModel, props.formApi); // event(props.schema, formModel, props.formApi);
// } catch (error) { // } catch (error) {
// notification.error({ // notification.error({
// message: 'Tip', // message: 'Tip',
// description: '触发事件填写有误！', // description: '触发事件填写有误！',
// }); // });
// } // }
// } // }
// } // }
// }, // },
// { // {
// immediate: true, // immediate: true,
// }, // },
// ); // );
const { notification } = useMessage(); const { notification } = useMessage();
const getSchema = computed(() => { const getSchema = computed(() => {
return props.schema as FormSchema; return props.schema as FormSchema;
}); });
const getDisable = computed(() => { const getDisable = computed(() => {
const { disabled: globDisabled } = formProps!.value; const { disabled: globDisabled } = formProps!.value;
const { dynamicDisabled } = getSchema.value; const { dynamicDisabled } = getSchema.value;
const { disabled: itemDisabled = false } = unref(getComponentsProps); const { disabled: itemDisabled = false } = unref(getComponentsProps);
let disabled = !!globDisabled || itemDisabled; let disabled = !!globDisabled || itemDisabled;
if (isBoolean(dynamicDisabled)) { if (isBoolean(dynamicDisabled)) {
disabled = dynamicDisabled; disabled = dynamicDisabled;
} }
if (isFunction(dynamicDisabled)) { if (isFunction(dynamicDisabled)) {
disabled = dynamicDisabled({ disabled = dynamicDisabled({
values: formModel![getSchema.value.field], values: formModel![getSchema.value.field],
model: formModel!, model: formModel!,
schema: unref(getSchema), schema: unref(getSchema),
field: unref(getSchema).field field: unref(getSchema).field
}); });
} }
return disabled; return disabled;
}); });
const getComponentsProps = computed(() => { const getComponentsProps = computed(() => {
let { componentProps = {} } = props.schema; let { componentProps = {} } = props.schema;
if (isFunction(componentProps)) { if (isFunction(componentProps)) {
componentProps = componentProps =
componentProps({ componentProps({
schema: props.schema, schema: props.schema,
formModel, formModel,
formActionType: props.formApi formActionType: props.formApi
}) ?? {}; }) ?? {};
} else { } else {
if (componentProps['events']) { if (componentProps['events']) {
for (const eventKey in componentProps['events']) { for (const eventKey in componentProps['events']) {
try { try {
const fun = componentProps['events'][eventKey]; const fun = componentProps['events'][eventKey];
let event; let event;
if (typeof fun === 'string') { if (typeof fun === 'string') {
event = new Function('schema', 'formModel', 'formActionType', 'extParams', `${fun}`); event = new Function('schema', 'formModel', 'formActionType', 'extParams', `${fun}`);
} else if (typeof fun === 'function') { } else if (typeof fun === 'function') {
event = fun; 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];
} }
componentProps['on' + upperFirst(eventKey)] = function () { event(props.schema, isCamelCase ? cloneFormModel : formModel, props.formApi, { formData });
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) { if (isCamelCase) {
for (let item in formModel) { for (let item in formModel) {
let field = camelCaseString(item); let field = camelCaseString(item);
if (cloneFormModel && field && cloneFormModel[field] !== undefined) { if (cloneFormModel && field && cloneFormModel[field] !== undefined) {
formModel[item] = cloneFormModel[field]; formModel[item] = cloneFormModel[field];
}
} }
} }
}; }
} catch (error) { };
console.log('error', error); } catch (error) {
notification.error({ console.log('error', error);
message: 'Tip', notification.error({
description: '触发事件填写有误！' message: 'Tip',
}); description: '触发事件填写有误！'
} });
} }
} }
} }
if (isBoolean(props.schema.dynamicDisabled)) { }
componentProps['disabled'] = props.schema.dynamicDisabled; if (isBoolean(props.schema.dynamicDisabled)) {
} componentProps['disabled'] = props.schema.dynamicDisabled;
if (isBoolean(props.schema.required)) { }
componentProps['required'] = props.schema.required; if (isBoolean(props.schema.required)) {
} componentProps['required'] = props.schema.required;
}
return componentProps as Recordable; return componentProps as Recordable;
}); });
const labelCol = computed(() => { const labelCol = computed(() => {
// 列宽支持两种模式 labelWidthMode = flex为百分比宽度 fix 为定宽 // 列宽支持两种模式 labelWidthMode = flex为百分比宽度 fix 为定宽
const commonLabelCol = unref(itemLabelWidthProp).labelCol; const commonLabelCol = unref(itemLabelWidthProp).labelCol;
const itemLabelCol = unref(getComponentsProps).labelCol; const itemLabelCol = unref(getComponentsProps).labelCol;
const { labelWidthMode, labelFixWidth } = props.schema.componentProps as any; const { labelWidthMode, labelFixWidth } = props.schema.componentProps as any;
let labelCol: any = {}; let labelCol: any = {};
if (labelWidthMode !== 'fix') { if (labelWidthMode !== 'fix') {
labelCol.span = itemLabelCol?.span || commonLabelCol?.span; labelCol.span = itemLabelCol?.span || commonLabelCol?.span;
} else { } else {
labelCol.style = { labelCol.style = {
width: `${labelFixWidth || 120}px` 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]; return labelCol;
rulesList?.map((item) => (item.pattern = eval(item.pattern))); });
return [...rulesList, requiredRule];
});
//根据labelwidth 生成labelCol const rules = computed(() => {
const itemLabelWidthProp = useItemLabelWidth(getSchema, formProps!); const requiredRule = {
watch( required: unref(getComponentsProps).required || false,
() => formModel, message: `${props.schema.label}是必填项`
() => {
// 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 rulesList = cloneDeep(unref(getComponentsProps).rules);
if (!rulesList) return [requiredRule];
rulesList?.map((item) => (item.pattern = eval(item.pattern)));
return [...rulesList, requiredRule];
});
const defaultComponent = (schema) => { //根据labelwidth 生成labelCol
return componentMap.get(schema.key === 'ac18952da41b45c9a66ffba3e42b7f3d' ? 'ErpUpload' : schema.key === 'b3ba87573cf0466d951bc63fd4df1c78' ? 'ErpCheck' : schema.component); const itemLabelWidthProp = useItemLabelWidth(getSchema, formProps!);
}; watch(
() => formModel,
function showComponent(schema) { () => {
return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type); // console.log('formitem watch!!!!!!!!');
} //填值以后需要手动校验的组件
const validateComponents = ['User', 'RichTextEditor', 'Upload', 'SelectMap'];
function getShow(schema: FormSchema): boolean { if (validateComponents.includes(props.schema.component) && formModel![props.schema.field]) {
const { show } = schema; setTimeout(() => {
let isIfShow = true; props.formApi?.validateFields([props.schema.field]);
}, 100);
if (isBoolean(show)) {
isIfShow = show;
} }
return isIfShow; },
{
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);
// }
// }
});
function getIsShow(schema: FormSchema): boolean { const formComponent = (schema) => {
const { componentProps, show } = schema as any; return componentMap.get(['caseErpApplyDetailList', 'case_erp_apply_detailList', 'CASE_ERP_APPLY_DETAILList'].includes(schema.field) ? 'ErpApply' : schema.component);
let isShow = true; };
if (isBoolean(componentProps?.isShow)) {
isShow = componentProps?.isShow; const defaultComponent = (schema) => {
} return componentMap.get(schema.key === 'ac18952da41b45c9a66ffba3e42b7f3d' ? 'ErpUpload' : schema.key === 'b3ba87573cf0466d951bc63fd4df1c78' ? 'ErpCheck' : schema.component);
if (isBoolean(show)) { };
isShow = show;
} function showComponent(schema) {
return isShow; 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;
} }
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;
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
:deep(.ant-form-item-label > label) { :deep(.ant-form-item-label > label) {
white-space: normal; white-space: normal;
display: inline; display: inline;
line-height: 28px; line-height: 28px;
} }
</style> </style>
<style lang="less"> <style lang="less">
.ant-select-disabled { .ant-select-disabled {
.ant-select-selector { .ant-select-selector {
border: none !important; border: none !important;
background-color: transparent !important; background-color: transparent !important;
padding-left: 0 !important; padding-left: 0 !important;
}
.ant-select-selection-item {
color: rgb(0 0 0 / 85%) !important;
}
.ant-select-arrow {
display: none;
}
} }
.ant-select-selection-item {
color: rgb(0 0 0 / 85%) !important;
}
.ant-select-arrow {
display: none;
}
}
</style> </style>

40
src/utils/helper/generatorHelper.ts
View File

@ -523,7 +523,7 @@ export function buildListCode(model: GeneratorConfig): string {
hasBatchDeleteButton || hasTemplatePrint || (hasSetUserIdButton && isSetDataAuth) hasBatchDeleteButton || hasTemplatePrint || (hasSetUserIdButton && isSetDataAuth)
? `:row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange }"` ? `:row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange }"`
: '' : ''
}> } @row-dbClick="dbClickRow">
${ ${
hasFilterButton hasFilterButton
? `<template #customFilterIcon="{ filtered, column }" > ? `<template #customFilterIcon="{ filtered, column }" >
@ -987,6 +987,43 @@ ${hasTemplatePrint ? ' reactive ' : ''}
: '' : ''
} }
}); });
function dbClickRow(record) {
if (!record.workflowData.schemaId && !record.workflowData.taskIds) {
${
formType === 'modal'
? `
router.push({
path: '/form/${lowerClassName}/' + record.id + '/viewForm',
query: {
formPath: '${model.outputConfig.outputValue}/${lowerClassName}'
}
});`
: `
openDrawer(true, {
isView: true,
id: record.${camelCaseString(mainTable.pkField)},
});`
}
} else if (record.workflowData.taskIds && record.workflowData.taskIds.length) {
const { processId, taskIds, schemaId } = record.workflowData;
router.push({
path: '/flow/' + schemaId + '/' + (processId || '') + '/approveFlow',
query: {
taskId: taskIds[0]
}
});
} else {
const { processId, schemaId } = record.workflowData;
router.push({
path: '/flow/' + schemaId + '/' + (processId || '') + '/approveFlow',
query: {
readonly: 1,
taskId: ''
}
});
}
}
function buttonClick(code) { function buttonClick(code) {
${ ${
@ -1682,6 +1719,7 @@ export function buildSimpleFormCode(model: GeneratorConfig, _tableInfo: TableInf
systemFormRef.value, systemFormRef.value,
formProps.schemas); //表单事件：加载表单 formProps.schemas); //表单事件：加载表单
} }
emits('form-mounted', formProps);
} catch (error) { } catch (error) {
} }

47
src/views/secondDev/approveFlowPage.vue
View File

@ -173,32 +173,29 @@ function getTaskRecords() {
} }
onMounted(async () => { onMounted(async () => {
if (unref(taskId)) { try {
try { let res = await getApprovalProcess(unref(taskId), unref(processId));
let res = await getApprovalProcess(unref(taskId), unref(processId)); initProcessData(res);
initProcessData(res); if (!readonly.value) {
if (!readonly.value) { if (res.buttonConfigs) {
if (res.buttonConfigs) { approvalData.buttonConfigs = res.buttonConfigs;
approvalData.buttonConfigs = res.buttonConfigs;
}
if (res.relationTasks) {
data.predecessorTasks = res.relationTasks;
}
if (res.isAddOrSubSign) {
approvalData.isAddOrSubSign = res.isAddOrSubSign;
}
approvalData.approvedType = ApproveType.AGREE;
approvedType.value = ApproveType.AGREE;
approvalData.approvedContent = '';
approvalData.rejectNodeActivityId = '';
approvalData.rejectNodeActivityIds = [];
approvalData.circulateConfigs = [];
} }
renderKey.value = Math.random() + ''; if (res.relationTasks) {
} catch (error) { } data.predecessorTasks = res.relationTasks;
} else { }
} if (res.isAddOrSubSign) {
approvalData.isAddOrSubSign = res.isAddOrSubSign;
}
approvalData.approvedType = ApproveType.AGREE;
approvedType.value = ApproveType.AGREE;
approvalData.approvedContent = '';
approvalData.rejectNodeActivityId = '';
approvalData.rejectNodeActivityIds = [];
approvalData.circulateConfigs = [];
}
renderKey.value = Math.random() + '';
} catch (error) { }
}); });
async function submit() { async function submit() {

200
src/views/secondDev/formCreatePage.vue
View File

@ -21,121 +21,123 @@
</template> </template>
<script setup> <script setup>
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { FromPageType } from '/@/enums/workflowEnum'; import { FromPageType } from '/@/enums/workflowEnum';
import { ref, computed, onMounted, onBeforeMount, nextTick, defineAsyncComponent } from 'vue'; import { ref, computed, onMounted, onBeforeMount, nextTick, defineAsyncComponent } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
import { CheckCircleOutlined, StopOutlined, CloseOutlined } from '@ant-design/icons-vue'; import { CheckCircleOutlined, StopOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { useMultipleTabStore } from '/@/store/modules/multipleTab'; import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import useEventBus from '/@/hooks/event/useEventBus'; import useEventBus from '/@/hooks/event/useEventBus';
const dynamicComponent = ref(null); const dynamicComponent = ref(null);
const formType = ref('2'); // 0 新建 1 修改 2 查看 const formType = ref('2'); // 0 新建 1 修改 2 查看
const formRef = ref(); const formRef = ref();
const props = defineProps({}); const props = defineProps({});
const { bus, FORM_LIST_MODIFIED } = useEventBus(); const { bus, FORM_LIST_MODIFIED } = useEventBus();
const router = useRouter(); const router = useRouter();
const { currentRoute } = router; const { currentRoute } = router;
const { formPath } = currentRoute.value.query; const { formPath } = currentRoute.value.query;
const pathArr = formPath.split('/'); const pathArr = formPath.split('/');
const tabStore = useMultipleTabStore(); const tabStore = useMultipleTabStore();
const formProps = ref(null); const formProps = ref(null);
const formId = ref(currentRoute.value?.params?.id); console.error(currentRoute.value)
const formId = ref(currentRoute.value?.params?.id);
const { notification } = useMessage(); const { notification } = useMessage();
const { t } = useI18n(); const { t } = useI18n();
const hash = location.hash; const hash = location.hash;
const mode = ref('read'); const mode = ref('read');
if (hash.indexOf('createForm') > 0) { if (hash.indexOf('createForm') > 0) {
mode.value = 'create'; mode.value = 'create';
} else if (hash.indexOf('updateForm') > 0) { } else if (hash.indexOf('updateForm') > 0) {
mode.value = 'update'; mode.value = 'update';
} else if (hash.indexOf('viewForm') > 0) { } else if (hash.indexOf('viewForm') > 0) {
mode.value = 'view'; mode.value = 'view';
}
dynamicComponent.value = defineAsyncComponent({
loader: () => import(`./../../views/${pathArr[0]}/${pathArr[1]}/components/Form.vue`)
});
function onFormMounted(_formProps) {
formProps.value = _formProps;
setFormType();
}
async function setFormType() {
const _mode = mode.value;
if (_mode === 'create') {
return;
} }
await nextTick();
dynamicComponent.value = defineAsyncComponent({ if (_mode === 'view') {
loader: () => import(`./../../views/${pathArr[0]}/${pathArr[1]}/components/Form.vue`) await formRef.value.setDisabledForm();
});
function onFormMounted(_formProps) {
formProps.value = _formProps;
setFormType();
} }
// console.error(55555, _formProps)
await formRef.value.setFormDataFromId(formId.value);
}
async function setFormType() { function close() {
const _mode = mode.value; tabStore.closeTab(currentRoute.value, router);
if (_mode === 'create') { }
return;
async function handleSubmit() {
try {
const saveSuccess = await saveModal();
if (saveSuccess) {
notification.success({
message: 'Tip',
description: formType.value === '0' ? t('新增成功！') : t('修改成功！')
}); //提示消息
formRef.value.resetFields();
setTimeout(() => {
bus.emit(FORM_LIST_MODIFIED, { path: formPath, mode });
close();
}, 1000);
} }
await nextTick(); } finally {
if (_mode === 'view') {
await formRef.value.setDisabledForm();
}
await formRef.value.setFormDataFromId(formId.value);
} }
}
function close() { async function saveModal() {
tabStore.closeTab(currentRoute.value, router); let saveSuccess = false;
} const _mode = mode.value;
try {
async function handleSubmit() { const values = await formRef.value?.validate();
try { //添加隐藏组件
const saveSuccess = await saveModal(); if (formProps.hiddenComponent?.length) {
if (saveSuccess) { formProps.hiddenComponent.forEach((component) => {
notification.success({ values[component.bindField] = component.value;
message: 'Tip', });
description: formType.value === '0' ? t('新增成功！') : t('修改成功！')
}); //提示消息
formRef.value.resetFields();
setTimeout(() => {
bus.emit(FORM_LIST_MODIFIED, { path: formPath, mode });
close();
}, 1000);
}
} finally {
} }
} if (values !== false) {
try {
async function saveModal() { if (_mode === 'create') {
let saveSuccess = false; saveSuccess = await formRef.value.add(values);
const _mode = mode.value; } else {
try { saveSuccess = await formRef.value.update({ values, rowId: formId.value });
const values = await formRef.value?.validate(); }
//添加隐藏组件 return saveSuccess;
if (formProps.hiddenComponent?.length) { } catch (error) { }
formProps.hiddenComponent.forEach((component) => {
values[component.bindField] = component.value;
});
}
if (values !== false) {
try {
if (_mode === 'create') {
saveSuccess = await formRef.value.add(values);
} else {
saveSuccess = await formRef.value.update({ values, rowId: formId.value });
}
return saveSuccess;
} catch (error) {}
}
} catch (error) {
console.error('saveModal Error: ', error);
} }
} catch (error) {
console.error('saveModal Error: ', error);
} }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.page-bg-wrap { .page-bg-wrap {
background-color: #fff; background-color: #fff;
} }
.top-toolbar { .top-toolbar {
min-height: 40px; min-height: 40px;
margin-bottom: 8px; margin-bottom: 8px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
</style> </style>