简柏林 / 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,6 +8,7 @@ import { TransportTypeEnum } from '/@/enums/deviceEnum';
8 import { DictEnum } from '/@/enums/dictEnum'; 8 import { DictEnum } from '/@/enums/dictEnum';
9 import { DataTypeEnum, FunctionTypeEnum } from '/@/enums/objectModelEnum'; 9 import { DataTypeEnum, FunctionTypeEnum } from '/@/enums/objectModelEnum';
10 import { isNullOrUnDef } from '/@/utils/is'; 10 import { isNullOrUnDef } from '/@/utils/is';
  11 +import { ValidatorRule } from 'ant-design-vue/lib/form/interface';
11 12
12 export interface DataTypeFormGetFieldsValueType { 13 export interface DataTypeFormGetFieldsValueType {
13 [FormFieldsEnum.FUNCTION_NAME]: string; 14 [FormFieldsEnum.FUNCTION_NAME]: string;
@@ -25,7 +26,11 @@ export interface DataTypeFormGetFieldsValueType { @@ -25,7 +26,11 @@ export interface DataTypeFormGetFieldsValueType {
25 [FormFieldsEnum.REMARK]?: string; 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 value = value || {}; 34 value = value || {};
30 const { min, max } = value; 35 const { min, max } = value;
31 if (min > max) { 36 if (min > max) {
@@ -34,56 +39,62 @@ export const validateValueRange = (_rule, value: Record<'min' | 'max', number>, @@ -34,56 +39,62 @@ export const validateValueRange = (_rule, value: Record<'min' | 'max', number>,
34 return Promise.resolve(); 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 field: FormFieldsEnum.DATA_TYPE, 99 field: FormFieldsEnum.DATA_TYPE,
89 label: FormFieldsNameEnum.DATA_TYPE, 100 label: FormFieldsNameEnum.DATA_TYPE,
@@ -86,12 +86,9 @@ @@ -86,12 +86,9 @@
86 </div> 86 </div>
87 </div> 87 </div>
88 </main> 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 <CreateStructModal 92 <CreateStructModal
96 :value="value" 93 :value="value"
97 @register="registerModal" 94 @register="registerModal"
  1 +import { unref } from 'vue';
1 import { createHexCommandRuleValidator } from '.'; 2 import { createHexCommandRuleValidator } from '.';
  3 +import { createFunctionNameFormItem, createIdentifierFormItem } from './DataTypeForm/config';
  4 +import { useObjectModelFormContext } from './useObjectModelFormContext';
2 import { findDictItemByCode } from '/@/api/system/dict'; 5 import { findDictItemByCode } from '/@/api/system/dict';
3 import { FormSchema } from '/@/components/Form'; 6 import { FormSchema } from '/@/components/Form';
4 import { 7 import {
@@ -82,7 +85,10 @@ export const getFormSchemas = ({ @@ -82,7 +85,10 @@ export const getFormSchemas = ({
82 component: 'Segmented', 85 component: 'Segmented',
83 defaultValue: FunctionTypeEnum.PROPERTIES, 86 defaultValue: FunctionTypeEnum.PROPERTIES,
84 required: true, 87 required: true,
85 - // dynamicDisabled: mode !== DataActionModeEnum.CREATE, 88 + dynamicDisabled: () => {
  89 + const { getModalMode } = useObjectModelFormContext();
  90 + return unref(getModalMode) !== DataActionModeEnum.CREATE;
  91 + },
86 componentProps: ({ formActionType }) => { 92 componentProps: ({ formActionType }) => {
87 return { 93 return {
88 options: Object.keys(FunctionTypeEnum).map((key) => ({ 94 options: Object.keys(FunctionTypeEnum).map((key) => ({
@@ -109,55 +115,8 @@ export const getFormSchemas = ({ @@ -109,55 +115,8 @@ export const getFormSchemas = ({
109 ifShow: ({ model }) => model[FormFieldsEnum.FUNCTION_TYPE] === FunctionTypeEnum.PROPERTIES, 115 ifShow: ({ model }) => model[FormFieldsEnum.FUNCTION_TYPE] === FunctionTypeEnum.PROPERTIES,
110 colSlot: FormFieldsEnum.DATA_TYPE_FORM, 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 field: FormFieldsEnum.EXTENSION_DESC, 121 field: FormFieldsEnum.EXTENSION_DESC,
163 component: 'Input', 122 component: 'Input',
@@ -19,9 +19,7 @@ @@ -19,9 +19,7 @@
19 const dataTypeFormRef = ref<InstanceType<typeof DataTypeForm>>(); 19 const dataTypeFormRef = ref<InstanceType<typeof DataTypeForm>>();
20 20
21 const [register, formActionType] = useForm({ 21 const [register, formActionType] = useForm({
22 - schemas: getFormSchemas({  
23 - transportType: props.transportType,  
24 - }), 22 + schemas: getFormSchemas(props),
25 layout: 'vertical', 23 layout: 'vertical',
26 showActionButtonGroup: false, 24 showActionButtonGroup: false,
27 }); 25 });
@@ -37,6 +35,7 @@ @@ -37,6 +35,7 @@
37 createObjectModelFormContext({ 35 createObjectModelFormContext({
38 getTransportType: computed(() => props.transportType), 36 getTransportType: computed(() => props.transportType),
39 getDataType: computed(() => unref(objectModelType)), 37 getDataType: computed(() => unref(objectModelType)),
  38 + getModalMode: computed(() => props.mode),
40 }); 39 });
41 40
42 const handleDataTypeFormChange = (field: string, value: any) => { 41 const handleDataTypeFormChange = (field: string, value: any) => {
@@ -54,25 +53,22 @@ @@ -54,25 +53,22 @@
54 </script> 53 </script>
55 54
56 <template> 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 </template> 74 </template>
78 -./config  
@@ -2,10 +2,12 @@ import type { InjectionKey, ComputedRef } from 'vue'; @@ -2,10 +2,12 @@ import type { InjectionKey, ComputedRef } from 'vue';
2 import { createContext, useContext } from '/@/hooks/core/useContext'; 2 import { createContext, useContext } from '/@/hooks/core/useContext';
3 import { TransportTypeEnum } from '/@/enums/deviceEnum'; 3 import { TransportTypeEnum } from '/@/enums/deviceEnum';
4 import { DataTypeEnum } from '/@/enums/objectModelEnum'; 4 import { DataTypeEnum } from '/@/enums/objectModelEnum';
  5 +import { DataActionModeEnum } from '/@/enums/toolEnum';
5 6
6 export interface ObjectModelFormContextProps { 7 export interface ObjectModelFormContextProps {
7 getTransportType: ComputedRef<TransportTypeEnum | undefined>; 8 getTransportType: ComputedRef<TransportTypeEnum | undefined>;
8 getDataType: ComputedRef<DataTypeEnum>; 9 getDataType: ComputedRef<DataTypeEnum>;
  10 + getModalMode: ComputedRef<DataActionModeEnum | undefined>;
9 } 11 }
10 12
11 const key: InjectionKey<ObjectModelFormContextProps> = Symbol(); 13 const key: InjectionKey<ObjectModelFormContextProps> = Symbol();
1 <template> 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 </template> 14 </template>
24 <script lang="ts" setup> 15 <script lang="ts" setup>
25 import { ref, unref, nextTick } from 'vue'; 16 import { ref, unref, nextTick } from 'vue';
@@ -77,12 +68,6 @@ @@ -77,12 +68,6 @@
77 } 68 }
78 ); 69 );
79 70
80 - const handleCancel = (flag) => {  
81 - if (flag) {  
82 - closeModal();  
83 - }  
84 - };  
85 -  
86 const handleSubmit = async () => { 71 const handleSubmit = async () => {
87 try { 72 try {
88 setModalProps({ loading: false, okButtonProps: { loading: true } }); 73 setModalProps({ loading: false, okButtonProps: { loading: true } });