Commit bdebc0d045fd8d92e20365f5c0d26fdd6dd51abe
1 parent
7c9f4ba0
fix: exclude id in functionJSON on model of matter page
Showing
6 changed files
with
26 additions
and
411 deletions
@@ -4,8 +4,9 @@ | @@ -4,8 +4,9 @@ | ||
4 | <script lang="ts" setup> | 4 | <script lang="ts" setup> |
5 | import { BasicForm, useForm } from '/@/components/Form'; | 5 | import { BasicForm, useForm } from '/@/components/Form'; |
6 | import { eventSchemas, FunctionType } from './config'; | 6 | import { eventSchemas, FunctionType } from './config'; |
7 | - import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel'; | 7 | + import { ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel'; |
8 | import { StructFormValue } from '/@/components/Form/src/externalCompns/components/StructForm/type'; | 8 | import { StructFormValue } from '/@/components/Form/src/externalCompns/components/StructForm/type'; |
9 | + import { excludeIdInStructJSON } from '/@/components/Form/src/externalCompns/components/StructForm/util'; | ||
9 | 10 | ||
10 | const [register, { validate, resetFields, setFieldsValue }] = useForm({ | 11 | const [register, { validate, resetFields, setFieldsValue }] = useForm({ |
11 | labelWidth: 100, | 12 | labelWidth: 100, |
@@ -34,8 +35,13 @@ | @@ -34,8 +35,13 @@ | ||
34 | 35 | ||
35 | async function getFormData() { | 36 | async function getFormData() { |
36 | const _values = (await validate()) as StructFormValue; | 37 | const _values = (await validate()) as StructFormValue; |
37 | - const { functionName, remark, identifier, outputData, eventType } = _values; | 38 | + const { functionName, remark, identifier, outputData: _outputData, eventType } = _values; |
38 | if (!_values) return {} as unknown as ModelOfMatterParams; | 39 | if (!_values) return {} as unknown as ModelOfMatterParams; |
40 | + | ||
41 | + const outputData = (_outputData as unknown as StructJSON[]).map((item) => | ||
42 | + excludeIdInStructJSON(item.dataType!) | ||
43 | + ); | ||
44 | + | ||
39 | const value = { | 45 | const value = { |
40 | functionName, | 46 | functionName, |
41 | identifier, | 47 | identifier, |
@@ -6,8 +6,9 @@ | @@ -6,8 +6,9 @@ | ||
6 | import { serviceSchemas } from './config'; | 6 | import { serviceSchemas } from './config'; |
7 | import { FunctionType } from './config'; | 7 | import { FunctionType } from './config'; |
8 | import { StructFormValue } from '/@/components/Form/src/externalCompns/components/StructForm/type'; | 8 | import { StructFormValue } from '/@/components/Form/src/externalCompns/components/StructForm/type'; |
9 | - import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel'; | 9 | + import { ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel'; |
10 | import { DeviceRecord } from '/@/api/device/model/deviceModel'; | 10 | import { DeviceRecord } from '/@/api/device/model/deviceModel'; |
11 | + import { excludeIdInStructJSON } from '/@/components/Form/src/externalCompns/components/StructForm/util'; | ||
11 | 12 | ||
12 | const props = defineProps<{ | 13 | const props = defineProps<{ |
13 | record: DeviceRecord; | 14 | record: DeviceRecord; |
@@ -43,10 +44,24 @@ | @@ -43,10 +44,24 @@ | ||
43 | //获取数据 | 44 | //获取数据 |
44 | async function getFormData() { | 45 | async function getFormData() { |
45 | const _values = (await validate()) as StructFormValue; | 46 | const _values = (await validate()) as StructFormValue; |
46 | - const { functionName, remark, identifier, inputData, outputData, serviceCommand, callType } = | ||
47 | - _values; | 47 | + const { |
48 | + functionName, | ||
49 | + remark, | ||
50 | + identifier, | ||
51 | + inputData: _inputData, | ||
52 | + outputData: _outputData, | ||
53 | + serviceCommand, | ||
54 | + callType, | ||
55 | + } = _values; | ||
48 | if (!_values) return {}; | 56 | if (!_values) return {}; |
49 | 57 | ||
58 | + const outputData = (_outputData as unknown as StructJSON[]).map((item) => | ||
59 | + excludeIdInStructJSON(item.dataType!) | ||
60 | + ); | ||
61 | + const inputData = (_inputData as unknown as StructJSON[]).map((item) => | ||
62 | + excludeIdInStructJSON(item.dataType!) | ||
63 | + ); | ||
64 | + | ||
50 | const value = { | 65 | const value = { |
51 | functionName, | 66 | functionName, |
52 | identifier, | 67 | identifier, |
1 | -<template> | ||
2 | - <div> | ||
3 | - <BasicForm @register="registerForm"> | ||
4 | - <template #structSlot> | ||
5 | - <CommomParam | ||
6 | - ref="CommomParamInParamRef" | ||
7 | - :isExcludeStruct="true" | ||
8 | - :isInputParam="true" | ||
9 | - :inputParamData="inputParamData" | ||
10 | - @emitAddInParam="handleAddInParam" | ||
11 | - @emitEditInParam="handleEditInParam" | ||
12 | - @emitDeletelnParam="handleDelInParam" | ||
13 | - /> | ||
14 | - </template> | ||
15 | - </BasicForm> | ||
16 | - <AddParamsModal @register="registerModal" @data="getData" /> | ||
17 | - </div> | ||
18 | -</template> | ||
19 | -<script lang="ts" setup> | ||
20 | - import { unref } from 'vue'; | ||
21 | - import { BasicForm, useForm } from '/@/components/Form'; | ||
22 | - import { addParamsSchemas } from '../config'; | ||
23 | - import { useModal } from '/@/components/Modal'; | ||
24 | - import useCommon from '../../hook/useCommon'; | ||
25 | - import AddParamsModal from './AddParamsModal.vue'; | ||
26 | - import CommomParam from './CommomParam.vue'; | ||
27 | - import useDefineVar from '../../hook/useDefineVar'; | ||
28 | - | ||
29 | - defineEmits(['register']); | ||
30 | - | ||
31 | - const { inputParamData, CommomParamInParamRef } = useDefineVar(); | ||
32 | - | ||
33 | - const { useChangeTypeGetTypeForm, useGetInOrOutData, useUpdateFormExcludeStruct } = useCommon(); | ||
34 | - | ||
35 | - const [registerModal, { openModal }] = useModal(); | ||
36 | - | ||
37 | - const [registerForm, { validate, resetFields, updateSchema }] = useForm({ | ||
38 | - labelWidth: 100, | ||
39 | - schemas: addParamsSchemas, | ||
40 | - actionColOptions: { | ||
41 | - span: 14, | ||
42 | - }, | ||
43 | - showResetButton: false, | ||
44 | - submitOnReset: false, | ||
45 | - showActionButtonGroup: false, | ||
46 | - }); | ||
47 | - | ||
48 | - const getData = (d, f) => useGetInOrOutData(d, f, unref(inputParamData), []); | ||
49 | - | ||
50 | - const handleAddInParam = (b, o) => openModal(b, o); | ||
51 | - | ||
52 | - const handleEditInParam = (b, o) => openModal(b, o); | ||
53 | - | ||
54 | - const handleDelInParam = (i) => unref(inputParamData).splice(i, 1); | ||
55 | - | ||
56 | - const updateFormExcludeStruct = (flag) => useUpdateFormExcludeStruct(flag, updateSchema); | ||
57 | - | ||
58 | - const getOutputStructList = () => CommomParamInParamRef.value?.getInputStructList(); | ||
59 | - | ||
60 | - const getBoolOrStruct = (T, S, B) => { | ||
61 | - if (T === 'STRUCT') { | ||
62 | - return S; | ||
63 | - } else if (T === 'INT' || T === 'DOUBLE' || T === 'TEXT') { | ||
64 | - return null; | ||
65 | - } else { | ||
66 | - return B; | ||
67 | - } | ||
68 | - }; | ||
69 | - | ||
70 | - const getIntOrText = (T, D) => { | ||
71 | - if (T === 'STRUCT') { | ||
72 | - return null; | ||
73 | - } else if (T === 'INT' || T === 'DOUBLE' || T === 'TEXT') { | ||
74 | - return D; | ||
75 | - } | ||
76 | - }; | ||
77 | - | ||
78 | - const getFormData = async () => { | ||
79 | - const values = await validate(); | ||
80 | - if (!values) return; | ||
81 | - const outputParams = getOutputStructList(); | ||
82 | - outputParams?.forEach((f) => { | ||
83 | - f.dataType = 'STRUCT'; | ||
84 | - f.childSpecsDTO = getIntOrText(f.childDataType, f.dataSpecs); | ||
85 | - f.childEnumSpecsDTO = getBoolOrStruct(f.childDataType, null, f.dataSpecsList); | ||
86 | - }); | ||
87 | - const dataSpecs = useChangeTypeGetTypeForm(values.dataType, values); | ||
88 | - const dataSpecsList = useChangeTypeGetTypeForm(values.dataType, values); | ||
89 | - const { boolClose, boolOpen, step, unit, valueRange, length, ...value } = values; | ||
90 | - const none = [valueRange, step, unit, boolOpen, boolClose, length]; //没用,防止eslint报未使用变量 | ||
91 | - console.log(none); | ||
92 | - return { | ||
93 | - ...{ childName: value.name }, | ||
94 | - ...{ childDataType: value.dataType }, | ||
95 | - ...value, | ||
96 | - ...{ | ||
97 | - dataSpecs: getIntOrText(values.dataType, dataSpecs), | ||
98 | - }, | ||
99 | - ...{ | ||
100 | - dataSpecsList: getBoolOrStruct(values.dataType, outputParams, dataSpecsList), | ||
101 | - }, | ||
102 | - }; | ||
103 | - }; | ||
104 | - | ||
105 | - const setFormData = (v) => { | ||
106 | - try { | ||
107 | - setFieldsValue(v); | ||
108 | - setFieldsValue({ | ||
109 | - ...v.dataSpecs, | ||
110 | - valueRange: v.dataSpecs, | ||
111 | - }); | ||
112 | - setFieldsValue({ | ||
113 | - boolClose: v.dataType == 'BOOL' ? v.dataSpecsList[0].name : '', | ||
114 | - boolOpen: v.dataType == 'BOOL' ? v.dataSpecsList[1].name : '', | ||
115 | - }); | ||
116 | - const { dataSpecsList, dataType, childDataType } = v; | ||
117 | - if (childDataType == 'BOOL') { | ||
118 | - setFieldsValue({ | ||
119 | - dataType: childDataType, | ||
120 | - boolClose: dataSpecsList[0].name, | ||
121 | - boolOpen: dataSpecsList[1].name, | ||
122 | - }); | ||
123 | - } | ||
124 | - if (dataType == 'BOOL' || dataType == 'STRUCT') { | ||
125 | - inputParamData.value = [...new Array(dataSpecsList.length).keys()]; | ||
126 | - inputParamData.value = dataSpecsList; | ||
127 | - } | ||
128 | - } catch (e) { | ||
129 | - console.log('AddParamForm error info', e); | ||
130 | - } | ||
131 | - }; | ||
132 | - | ||
133 | - const resetFormData = () => { | ||
134 | - resetFields(); | ||
135 | - inputParamData.value = []; | ||
136 | - }; | ||
137 | - | ||
138 | - defineExpose({ | ||
139 | - setFormData, | ||
140 | - getFormData, | ||
141 | - resetFormData, | ||
142 | - updateFormExcludeStruct, | ||
143 | - }); | ||
144 | -</script> | ||
145 | - | ||
146 | -<style lang="less" scope> | ||
147 | - .add-style { | ||
148 | - color: #0170cc; | ||
149 | - cursor: pointer; | ||
150 | - } | ||
151 | -</style> |
1 | -<template> | ||
2 | - <div> | ||
3 | - <BasicModal | ||
4 | - :title="getTitle" | ||
5 | - :maskClosable="false" | ||
6 | - v-bind="$attrs" | ||
7 | - width="45rem" | ||
8 | - @register="register" | ||
9 | - @ok="handleSubmit" | ||
10 | - @cancel="handleCancel" | ||
11 | - > | ||
12 | - <AddParamForm ref="AddParamFormRef" /> | ||
13 | - </BasicModal> | ||
14 | - </div> | ||
15 | -</template> | ||
16 | -<script lang="ts" setup> | ||
17 | - import { ref, computed, reactive } from 'vue'; | ||
18 | - import { BasicModal, useModalInner } from '/@/components/Modal'; | ||
19 | - import AddParamForm from './AddParamForm.vue'; | ||
20 | - import useParitalValid from '../../hook/useParitalValid'; | ||
21 | - | ||
22 | - const emits = defineEmits(['register', 'data']); | ||
23 | - | ||
24 | - const {} = useParitalValid(); | ||
25 | - | ||
26 | - const setEditData: any = reactive({ | ||
27 | - getEditData: {}, | ||
28 | - }); | ||
29 | - | ||
30 | - const AddParamFormRef = ref<InstanceType<typeof AddParamForm>>(); | ||
31 | - | ||
32 | - const isUpdate = ref(false); | ||
33 | - | ||
34 | - const isFlag = ref(''); | ||
35 | - | ||
36 | - const excludeStruct = ref(false); | ||
37 | - | ||
38 | - const getTitle = computed(() => (!isUpdate.value ? '编辑参数' : '新增参数')); | ||
39 | - | ||
40 | - const [register, { setModalProps }] = useModalInner(async (data) => { | ||
41 | - setModalProps({ loading: true }); | ||
42 | - | ||
43 | - isUpdate.value = data.isUpdate; | ||
44 | - isFlag.value = data.flag; | ||
45 | - excludeStruct.value = data.excludeStruct; | ||
46 | - !isUpdate.value ? AddParamFormRef.value?.setFormData(data.record) : ''; | ||
47 | - setEditData.getEditData = data.record; | ||
48 | - setModalProps({ loading: false }); | ||
49 | - if (excludeStruct.value) { | ||
50 | - AddParamFormRef.value?.updateFormExcludeStruct(true); | ||
51 | - } else { | ||
52 | - AddParamFormRef.value?.updateFormExcludeStruct(false); | ||
53 | - } | ||
54 | - }); | ||
55 | - | ||
56 | - const handleCancel = () => { | ||
57 | - AddParamFormRef.value?.resetFormData(); | ||
58 | - }; | ||
59 | - | ||
60 | - const handleSubmit = async () => { | ||
61 | - const value = await AddParamFormRef.value?.getFormData(); | ||
62 | - if (!value) return; | ||
63 | - emits('data', value); | ||
64 | - handleCancel(); | ||
65 | - }; | ||
66 | -</script> | ||
67 | -<style lang="less" scope></style> |
src/views/device/profiles/step/cpns/physical/cpns/components/CommomParam.vue
deleted
100644 → 0
1 | -<template> | ||
2 | - <!-- 输入参数 --> | ||
3 | - <div v-if="isInputParam"> | ||
4 | - <template v-for="(item, index) in inputParamData" :key="item.name"> | ||
5 | - <span style="display: none">{{ item }}</span> | ||
6 | - <InputParamItem | ||
7 | - :title="item.name" | ||
8 | - :item="item" | ||
9 | - class="mt-4" | ||
10 | - :index="index" | ||
11 | - :ref="dynamicBindRef.inputParamItemRef" | ||
12 | - @delete="deleteInParItem" | ||
13 | - @edit="editInParItem" | ||
14 | - /> | ||
15 | - </template> | ||
16 | - <div style="display: flex" :class="{ 'mt-2': inputParamData.length > 0 }"> | ||
17 | - <span class="add-style">+</span> | ||
18 | - <span class="add-style" @click="handleAddInParam">增加参数</span> | ||
19 | - </div> | ||
20 | - </div> | ||
21 | - <!-- 输出参数 --> | ||
22 | - <div v-if="isOutputParam"> | ||
23 | - <template v-for="(item, index) in outputParamData" :key="item.name"> | ||
24 | - <span style="display: none">{{ item + index }}</span> | ||
25 | - <InputParamItem | ||
26 | - :title="item.name" | ||
27 | - :item="item" | ||
28 | - class="mt-4" | ||
29 | - :index="index" | ||
30 | - :ref="dynamicBindRef.outputParamItemRef" | ||
31 | - @delete="deleteOutParItem" | ||
32 | - @edit="editOutParItem" | ||
33 | - /> | ||
34 | - </template> | ||
35 | - <div style="display: flex" :class="{ 'mt-2': outputParamData.length > 0 }"> | ||
36 | - <span class="add-style">+</span> | ||
37 | - <span class="add-style" @click="handleAddOutParam">增加参数</span> | ||
38 | - </div> | ||
39 | - </div> | ||
40 | -</template> | ||
41 | -<script lang="ts" setup> | ||
42 | - import { ref, unref } from 'vue'; | ||
43 | - import InputParamItem from './InputParamItem.vue'; | ||
44 | - | ||
45 | - const props = defineProps({ | ||
46 | - isExcludeStruct: { type: Boolean, default: true }, | ||
47 | - isInputParam: { type: Boolean, default: false }, | ||
48 | - isOutputParam: { type: Boolean, default: false }, | ||
49 | - inputParamData: { | ||
50 | - type: Array as PropType<any[]>, | ||
51 | - default: () => [], | ||
52 | - }, | ||
53 | - outputParamData: { | ||
54 | - type: Array as PropType<any[]>, | ||
55 | - default: () => [], | ||
56 | - }, | ||
57 | - }); | ||
58 | - | ||
59 | - const emit = defineEmits([ | ||
60 | - 'emitAddInParam', | ||
61 | - 'emitEditInParam', | ||
62 | - 'emitDeletelnParam', | ||
63 | - 'emitAddOutParam', | ||
64 | - 'emitEditOutParam', | ||
65 | - 'emitDeleteOutParam', | ||
66 | - ]); | ||
67 | - | ||
68 | - const dynamicBindRef = { | ||
69 | - inputParamItemRef: ref([]), | ||
70 | - outputParamItemRef: ref([]), | ||
71 | - }; | ||
72 | - | ||
73 | - const commomAddParamObj = { | ||
74 | - isUpdate: true, | ||
75 | - excludeStruct: props.isExcludeStruct ? true : false, | ||
76 | - }; | ||
77 | - | ||
78 | - const commomEditParamObj = { | ||
79 | - isUpdate: false, | ||
80 | - excludeStruct: props.isExcludeStruct ? true : false, | ||
81 | - }; | ||
82 | - | ||
83 | - const handleAddInParam = () => { | ||
84 | - emit('emitAddInParam', true, { | ||
85 | - ...commomAddParamObj, | ||
86 | - flag: 'input', | ||
87 | - }); | ||
88 | - }; | ||
89 | - | ||
90 | - const deleteInParItem = (index) => { | ||
91 | - emit('emitDeletelnParam', index); | ||
92 | - }; | ||
93 | - | ||
94 | - const editInParItem = (item) => { | ||
95 | - emit('emitEditInParam', true, { | ||
96 | - ...commomEditParamObj, | ||
97 | - record: item, | ||
98 | - flag: 'input', | ||
99 | - }); | ||
100 | - }; | ||
101 | - | ||
102 | - const handleAddOutParam = () => { | ||
103 | - emit('emitAddOutParam', true, { | ||
104 | - ...commomAddParamObj, | ||
105 | - flag: 'output', | ||
106 | - }); | ||
107 | - }; | ||
108 | - | ||
109 | - const deleteOutParItem = (index) => { | ||
110 | - emit('emitDeleteOutParam', index); | ||
111 | - }; | ||
112 | - | ||
113 | - const editOutParItem = (item) => { | ||
114 | - emit('emitEditOutParam', true, { | ||
115 | - ...commomEditParamObj, | ||
116 | - record: item, | ||
117 | - flag: 'output', | ||
118 | - }); | ||
119 | - }; | ||
120 | - | ||
121 | - const getInputStructList = () => | ||
122 | - unref(dynamicBindRef.inputParamItemRef)?.map((item: any) => item.getFormData()); | ||
123 | - | ||
124 | - const getOutputStructList = () => | ||
125 | - unref(dynamicBindRef.outputParamItemRef)?.map((item: any) => item.getFormData()); | ||
126 | - | ||
127 | - defineExpose({ | ||
128 | - getInputStructList, | ||
129 | - getOutputStructList, | ||
130 | - }); | ||
131 | -</script> | ||
132 | -<style lang="less" scoped> | ||
133 | - .add-style { | ||
134 | - color: #0170cc; | ||
135 | - cursor: pointer; | ||
136 | - } | ||
137 | -</style> |
1 | -<template> | ||
2 | - <div> | ||
3 | - <a-card :title="`参数名称:${item.id}`" style="width: 540px; margin-top: -5px"> | ||
4 | - <template #extra> | ||
5 | - <div style="display: flex; align-items: center"> | ||
6 | - <span style="color: #0170cc; cursor: pointer" @click="handleEdit">编辑</span> | ||
7 | - <a-divider type="vertical" style="height: 12px; background-color: #d8d8d8" /> | ||
8 | - <span style="color: #0170cc; cursor: pointer" class="ml-1" @click="handleDelete" | ||
9 | - >删除</span | ||
10 | - > | ||
11 | - </div> | ||
12 | - </template> | ||
13 | - </a-card> | ||
14 | - </div> | ||
15 | -</template> | ||
16 | -<script lang="ts" setup> | ||
17 | - import { FunctionJson } from '/@/api/device/model/modelOfMatterModel'; | ||
18 | - | ||
19 | - const emit = defineEmits(['delete', 'edit']); | ||
20 | - | ||
21 | - type ItemRecrod = FunctionJson & { id: string }; | ||
22 | - | ||
23 | - const props = defineProps({ | ||
24 | - item: { | ||
25 | - type: Object as PropType<ItemRecrod>, | ||
26 | - required: true, | ||
27 | - default: () => {}, | ||
28 | - }, | ||
29 | - }); | ||
30 | - | ||
31 | - const handleDelete = () => { | ||
32 | - emit('delete', props.item); | ||
33 | - }; | ||
34 | - | ||
35 | - const handleEdit = () => { | ||
36 | - emit('edit', props.item); | ||
37 | - }; | ||
38 | - | ||
39 | - const getFormData = () => { | ||
40 | - return props.item; | ||
41 | - }; | ||
42 | - | ||
43 | - defineExpose({ | ||
44 | - getFormData, | ||
45 | - }); | ||
46 | -</script> | ||
47 | -<style lang="less" scoped> | ||
48 | - :deep(.ant-card-body) { | ||
49 | - display: none !important; | ||
50 | - } | ||
51 | -</style> |