简柏林 / thingskit-front · Commits

Commit 96ebeab93e6ef5d787505a95259f35855a5978f8

Authored by ww
1 parent 1a659bef

perf: 优化相同的表单项

Inline Side-by-side
Showing 6 changed files with 105 additions and 155 deletions
... ... @@ -8,6 +8,7 @@ import { TransportTypeEnum } from '/@/enums/deviceEnum';
8 8 import { DictEnum } from '/@/enums/dictEnum';
9 9 import { DataTypeEnum, FunctionTypeEnum } from '/@/enums/objectModelEnum';
10 10 import { isNullOrUnDef } from '/@/utils/is';
  11 +import { ValidatorRule } from 'ant-design-vue/lib/form/interface';
11 12
12 13 export interface DataTypeFormGetFieldsValueType {
13 14 [FormFieldsEnum.FUNCTION_NAME]: string;
... ... @@ -25,7 +26,11 @@ export interface DataTypeFormGetFieldsValueType {
25 26 [FormFieldsEnum.REMARK]?: string;
26 27 }
27 28
28   -export const validateValueRange = (_rule, value: Record<'min' | 'max', number>, _callback) => {
  29 +export const validateValueRange: ValidatorRule['validator'] = (
  30 + _rule,
  31 + value: Record<'min' | 'max', number>,
  32 + _callback
  33 +) => {
29 34 value = value || {};
30 35 const { min, max } = value;
31 36 if (min > max) {
... ... @@ -34,56 +39,62 @@ export const validateValueRange = (_rule, value: Record<'min' | 'max', number>,
34 39 return Promise.resolve();
35 40 };
36 41
37   -export const getFormSchemas = (dataType: DataTypeEnum[], showRemark: boolean): FormSchema[] => {
38   - const { getTransportType } = useObjectModelFormContext();
39   - return [
40   - {
41   - field: FormFieldsEnum.FUNCTION_NAME,
42   - label: FormFieldsNameEnum.FUNCTION_NAME,
43   - component: 'Input',
44   - required: true,
45   - dynamicRules: ({ values }) => {
46   - return [
47   - { required: true, message: '请输入功能名称' },
48   - {
49   - validator: () => {
50   - const reg = /[,，]+/;
51   - if (reg.test(values?.[FormFieldsEnum.FUNCTION_NAME])) {
52   - return Promise.reject(`${FormFieldsNameEnum.FUNCTION_NAME}不能包含逗号`);
53   - }
54   - return Promise.resolve();
55   - },
56   - },
57   - ];
58   - },
59   - componentProps: {
60   - placeholder: `请输入${FormFieldsNameEnum.FUNCTION_NAME}`,
  42 +export const validateFunctionName: ValidatorRule['validator'] = (_rule, value: any) => {
  43 + if (/^[a-zA-Z0-9_\-\u4e00-\u9fa5]+$/.test(value)) return Promise.resolve();
  44 + return Promise.reject('支持中文、大小写字母、数字、短划线、下划线.');
  45 +};
  46 +
  47 +export const validateIdentifier: ValidatorRule['validator'] = (_rule, value: any) => {
  48 + if (/^[a-zA-Z0-9_]+$/.test(value)) {
  49 + return Promise.resolve();
  50 + }
  51 + return Promise.reject('支持大小写字母、数字和下划线.');
  52 +};
  53 +
  54 +export const createFunctionNameFormItem = (): FormSchema => {
  55 + return {
  56 + field: FormFieldsEnum.FUNCTION_NAME,
  57 + label: FormFieldsNameEnum.FUNCTION_NAME,
  58 + component: 'Input',
  59 + required: true,
  60 + helpMessage: '支持中文、大小写字母、数字、短划线、下划线。',
  61 + rules: [
  62 + {
  63 + required: true,
  64 + validator: validateFunctionName,
61 65 },
  66 + ],
  67 + componentProps: {
  68 + placeholder: `请输入${FormFieldsNameEnum.FUNCTION_NAME}`,
62 69 },
63   - {
64   - field: FormFieldsEnum.IDENTIFIER,
65   - label: FormFieldsNameEnum.IDENTIFIER,
66   - required: true,
67   - component: 'Input',
68   - componentProps: {
69   - maxLength: 128,
70   - placeholder: '请输入标识符',
71   - },
72   - dynamicRules: ({ values }) => {
73   - return [
74   - { required: true, message: '请输入标识符' },
75   - {
76   - validator: () => {
77   - const reg = /[,，]+/;
78   - if (reg.test(values?.[FormFieldsEnum.IDENTIFIER])) {
79   - return Promise.reject(`${FormFieldsNameEnum.IDENTIFIER}不能包含逗号`);
80   - }
81   - return Promise.resolve();
82   - },
83   - },
84   - ];
85   - },
  70 + };
  71 +};
  72 +
  73 +export const createIdentifierFormItem = (): FormSchema => {
  74 + return {
  75 + field: FormFieldsEnum.IDENTIFIER,
  76 + label: FormFieldsNameEnum.IDENTIFIER,
  77 + required: true,
  78 + component: 'Input',
  79 + helpMessage: '支持大小写字母、数字和下划线.',
  80 + componentProps: {
  81 + maxLength: 128,
  82 + placeholder: '请输入标识符',
86 83 },
  84 + rules: [
  85 + {
  86 + required: true,
  87 + validator: validateIdentifier,
  88 + },
  89 + ],
  90 + };
  91 +};
  92 +
  93 +export const getFormSchemas = (dataType: DataTypeEnum[], showRemark: boolean): FormSchema[] => {
  94 + const { getTransportType } = useObjectModelFormContext();
  95 + return [
  96 + createFunctionNameFormItem(),
  97 + createIdentifierFormItem(),
87 98 {
88 99 field: FormFieldsEnum.DATA_TYPE,
89 100 label: FormFieldsNameEnum.DATA_TYPE,
... ...
... ... @@ -86,12 +86,9 @@
86 86 </div>
87 87 </div>
88 88 </main>
89   - <Button
90   - type="link"
91   - @click="handleOpenCreateModal"
92   - :disabled="mode === DataActionModeEnum.READ"
93   - >{{ buttonName }}</Button
94   - >
  89 + <Button type="link" @click="handleOpenCreateModal" :disabled="mode === DataActionModeEnum.READ">
  90 + {{ buttonName }}
  91 + </Button>
95 92 <CreateStructModal
96 93 :value="value"
97 94 @register="registerModal"
... ...
  1 +import { unref } from 'vue';
1 2 import { createHexCommandRuleValidator } from '.';
  3 +import { createFunctionNameFormItem, createIdentifierFormItem } from './DataTypeForm/config';
  4 +import { useObjectModelFormContext } from './useObjectModelFormContext';
2 5 import { findDictItemByCode } from '/@/api/system/dict';
3 6 import { FormSchema } from '/@/components/Form';
4 7 import {
... ... @@ -82,7 +85,10 @@ export const getFormSchemas = ({
82 85 component: 'Segmented',
83 86 defaultValue: FunctionTypeEnum.PROPERTIES,
84 87 required: true,
85   - // dynamicDisabled: mode !== DataActionModeEnum.CREATE,
  88 + dynamicDisabled: () => {
  89 + const { getModalMode } = useObjectModelFormContext();
  90 + return unref(getModalMode) !== DataActionModeEnum.CREATE;
  91 + },
86 92 componentProps: ({ formActionType }) => {
87 93 return {
88 94 options: Object.keys(FunctionTypeEnum).map((key) => ({
... ... @@ -109,55 +115,8 @@ export const getFormSchemas = ({
109 115 ifShow: ({ model }) => model[FormFieldsEnum.FUNCTION_TYPE] === FunctionTypeEnum.PROPERTIES,
110 116 colSlot: FormFieldsEnum.DATA_TYPE_FORM,
111 117 },
112   - {
113   - field: FormFieldsEnum.FUNCTION_NAME,
114   - label: FormFieldsNameEnum.FUNCTION_NAME,
115   - component: 'Input',
116   - required: true,
117   - ifShow: ({ model }) => model[FormFieldsEnum.FUNCTION_TYPE] !== FunctionTypeEnum.PROPERTIES,
118   - dynamicRules: ({ values }) => {
119   - return [
120   - { required: true, message: '请输入功能名称' },
121   - {
122   - validator: () => {
123   - const reg = /[,，]+/;
124   - if (reg.test(values?.[FormFieldsEnum.FUNCTION_NAME])) {
125   - return Promise.reject(`${FormFieldsNameEnum.FUNCTION_NAME}不能包含逗号`);
126   - }
127   - return Promise.resolve();
128   - },
129   - },
130   - ];
131   - },
132   - componentProps: {
133   - placeholder: `请输入${FormFieldsNameEnum.FUNCTION_NAME}`,
134   - },
135   - },
136   - {
137   - field: FormFieldsEnum.IDENTIFIER,
138   - label: FormFieldsNameEnum.IDENTIFIER,
139   - required: true,
140   - component: 'Input',
141   - componentProps: {
142   - maxLength: 128,
143   - placeholder: '请输入标识符',
144   - },
145   - ifShow: ({ model }) => model[FormFieldsEnum.FUNCTION_TYPE] !== FunctionTypeEnum.PROPERTIES,
146   - dynamicRules: ({ values }) => {
147   - return [
148   - { required: true, message: '请输入标识符' },
149   - {
150   - validator: () => {
151   - const reg = /[,，]+/;
152   - if (reg.test(values?.[FormFieldsEnum.IDENTIFIER])) {
153   - return Promise.reject(`${FormFieldsNameEnum.IDENTIFIER}不能包含逗号`);
154   - }
155   - return Promise.resolve();
156   - },
157   - },
158   - ];
159   - },
160   - },
  118 + createFunctionNameFormItem(),
  119 + createIdentifierFormItem(),
161 120 {
162 121 field: FormFieldsEnum.EXTENSION_DESC,
163 122 component: 'Input',
... ...
... ... @@ -19,9 +19,7 @@
19 19 const dataTypeFormRef = ref<InstanceType<typeof DataTypeForm>>();
20 20
21 21 const [register, formActionType] = useForm({
22   - schemas: getFormSchemas({
23   - transportType: props.transportType,
24   - }),
  22 + schemas: getFormSchemas(props),
25 23 layout: 'vertical',
26 24 showActionButtonGroup: false,
27 25 });
... ... @@ -37,6 +35,7 @@
37 35 createObjectModelFormContext({
38 36 getTransportType: computed(() => props.transportType),
39 37 getDataType: computed(() => unref(objectModelType)),
  38 + getModalMode: computed(() => props.mode),
40 39 });
41 40
42 41 const handleDataTypeFormChange = (field: string, value: any) => {
... ... @@ -54,25 +53,22 @@
54 53 </script>
55 54
56 55 <template>
57   - <section>
58   - <BasicForm @register="register" :disabled="mode === DataActionModeEnum.READ">
59   - <template #dataTypeForm>
60   - <DataTypeForm
61   - ref="dataTypeFormRef"
62   - :mode="mode"
63   - @field-value-change="handleDataTypeFormChange"
64   - />
65   - </template>
66   - <template #inputData="{ model, field }">
67   - <StructFormItem v-model:value="model[field]" buttonName="+ 增加参数" :mode="mode" />
68   - </template>
69   - <template #outputData="{ model, field }">
70   - <StructFormItem v-model:value="model[field]" buttonName="+ 增加参数" :mode="mode" />
71   - </template>
72   - <template #extensionDesc="{ model, field }">
73   - <ExtendDesc v-model:value="model[field]" :disabled="mode === DataActionModeEnum.READ" />
74   - </template>
75   - </BasicForm>
76   - </section>
  56 + <BasicForm @register="register" :disabled="mode === DataActionModeEnum.READ">
  57 + <template #dataTypeForm>
  58 + <DataTypeForm
  59 + ref="dataTypeFormRef"
  60 + :mode="mode"
  61 + @field-value-change="handleDataTypeFormChange"
  62 + />
  63 + </template>
  64 + <template #inputData="{ model, field }">
  65 + <StructFormItem v-model:value="model[field]" buttonName="+ 增加参数" :mode="mode" />
  66 + </template>
  67 + <template #outputData="{ model, field }">
  68 + <StructFormItem v-model:value="model[field]" buttonName="+ 增加参数" :mode="mode" />
  69 + </template>
  70 + <template #extensionDesc="{ model, field }">
  71 + <ExtendDesc v-model:value="model[field]" :disabled="mode === DataActionModeEnum.READ" />
  72 + </template>
  73 + </BasicForm>
77 74 </template>
78   -./config
... ...
... ... @@ -2,10 +2,12 @@ import type { InjectionKey, ComputedRef } from 'vue';
2 2 import { createContext, useContext } from '/@/hooks/core/useContext';
3 3 import { TransportTypeEnum } from '/@/enums/deviceEnum';
4 4 import { DataTypeEnum } from '/@/enums/objectModelEnum';
  5 +import { DataActionModeEnum } from '/@/enums/toolEnum';
5 6
6 7 export interface ObjectModelFormContextProps {
7 8 getTransportType: ComputedRef<TransportTypeEnum | undefined>;
8 9 getDataType: ComputedRef<DataTypeEnum>;
  10 + getModalMode: ComputedRef<DataActionModeEnum | undefined>;
9 11 }
10 12
11 13 const key: InjectionKey<ObjectModelFormContextProps> = Symbol();
... ...
1 1 <template>
2   - <div>
3   - <BasicModal
4   - destroy-on-close
5   - v-bind="$attrs"
6   - :width="480"
7   - @register="register"
8   - @ok="handleSubmit"
9   - @cancel="handleCancel"
10   - >
11   - <Typography>
12   - <TypographyParagraph>
13   - <blockquote class="bg-gray-100">{{ blockContent }}</blockquote>
14   - </TypographyParagraph>
15   - </Typography>
16   - <ObjectModelForm
17   - ref="objectModelElRef"
18   - :mode="openModalMode"
19   - :transport-type="(record.transportType as TransportTypeEnum)"
20   - />
21   - </BasicModal>
22   - </div>
  2 + <BasicModal v-bind="$attrs" :width="480" @register="register" @ok="handleSubmit">
  3 + <Typography>
  4 + <TypographyParagraph>
  5 + <blockquote class="bg-gray-100">{{ blockContent }}</blockquote>
  6 + </TypographyParagraph>
  7 + </Typography>
  8 + <ObjectModelForm
  9 + ref="objectModelElRef"
  10 + :mode="openModalMode"
  11 + :transport-type="(record.transportType as TransportTypeEnum)"
  12 + />
  13 + </BasicModal>
23 14 </template>
24 15 <script lang="ts" setup>
25 16 import { ref, unref, nextTick } from 'vue';
... ... @@ -77,12 +68,6 @@
77 68 }
78 69 );
79 70
80   - const handleCancel = (flag) => {
81   - if (flag) {
82   - closeModal();
83   - }
84   - };
85   -
86 71 const handleSubmit = async () => {
87 72 try {
88 73 setModalProps({ loading: false, okButtonProps: { loading: true } });
... ...