Commit 2ae23072e3fa39c6765383c4b53d9ba67187b51a
1 parent
cc519f89
feat: add filter model of matter list
Showing
5 changed files
with
101 additions
and
20 deletions
1 | 1 | import { BasicPageParams } from '../model/baseModel'; |
2 | 2 | import { GetModelTslParams, ModelOfMatterParams } from './model/modelOfMatterModel'; |
3 | 3 | import { defHttp } from '/@/utils/http/axios'; |
4 | +import { FunctionType } from '/@/views/device/profiles/step/cpns/physical/cpns/config'; | |
4 | 5 | |
5 | 6 | enum ModelOfMatter { |
6 | 7 | CREATE = '/things_model', |
... | ... | @@ -8,9 +9,16 @@ enum ModelOfMatter { |
8 | 9 | DELETE = '/things_model', |
9 | 10 | TSL = '/things_model', |
10 | 11 | LIST = '/things_model/page', |
12 | + RELEASE = '/things_model', | |
11 | 13 | } |
12 | 14 | |
13 | -export const getModelList = (params: BasicPageParams) => { | |
15 | +export const getModelList = ( | |
16 | + params: BasicPageParams & { | |
17 | + deviceProfileId: string; | |
18 | + functionTyp?: FunctionType; | |
19 | + nameOrIdentifier?: string; | |
20 | + } | |
21 | +) => { | |
14 | 22 | return defHttp.get({ |
15 | 23 | url: `${ModelOfMatter.LIST}`, |
16 | 24 | params, |
... | ... | @@ -46,3 +54,9 @@ export const deleteModel = (params: string[]) => { |
46 | 54 | }, |
47 | 55 | }); |
48 | 56 | }; |
57 | + | |
58 | +export const releaseModel = (deviceProfileId: string) => { | |
59 | + return defHttp.put({ | |
60 | + url: `${ModelOfMatter.RELEASE}/${deviceProfileId}`, | |
61 | + }); | |
62 | +}; | ... | ... |
... | ... | @@ -50,6 +50,7 @@ |
50 | 50 | |
51 | 51 | const [register, {}] = useDrawerInner(async (data: { record: DeviceRecord }) => { |
52 | 52 | activeKey.value = 'product'; |
53 | + record.value = data.record; | |
53 | 54 | record.value = await deviceConfigGetDetail(data.record.id); |
54 | 55 | setDeviceConfFormData(unref(record)); |
55 | 56 | }); | ... | ... |
... | ... | @@ -6,6 +6,8 @@ import { numberRule } from '/@/utils/rules'; |
6 | 6 | |
7 | 7 | import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi'; |
8 | 8 | import { FormField, FunctionType } from './step/cpns/physical/cpns/config'; |
9 | +import { h } from 'vue'; | |
10 | +import { Tag } from 'ant-design-vue'; | |
9 | 11 | |
10 | 12 | export const steps = [ |
11 | 13 | { |
... | ... | @@ -52,12 +54,49 @@ export const physicalColumn: BasicColumn[] = [ |
52 | 54 | }, |
53 | 55 | }, |
54 | 56 | { |
57 | + title: '状态', | |
58 | + dataIndex: 'status', | |
59 | + width: 100, | |
60 | + customRender: (value: Record<'text', number>) => { | |
61 | + const { text } = value; | |
62 | + return h( | |
63 | + Tag, | |
64 | + { | |
65 | + color: text ? 'green' : 'red', | |
66 | + }, | |
67 | + () => (text ? '已发布' : '待发布') | |
68 | + ); | |
69 | + }, | |
70 | + }, | |
71 | + { | |
55 | 72 | title: '创建时间', |
56 | 73 | dataIndex: 'createTime', |
57 | 74 | width: 150, |
58 | 75 | }, |
59 | 76 | ]; |
60 | 77 | |
78 | +export const modelOfMatterForm: FormSchema[] = [ | |
79 | + { | |
80 | + field: 'functionType', | |
81 | + label: '功能类型', | |
82 | + component: 'Select', | |
83 | + colProps: { span: 8 }, | |
84 | + componentProps: { | |
85 | + options: [ | |
86 | + { label: '属性', value: FunctionType.PROPERTIES }, | |
87 | + { label: '事件', value: FunctionType.EVENTS }, | |
88 | + { label: '服务', value: FunctionType.SERVICE }, | |
89 | + ], | |
90 | + }, | |
91 | + }, | |
92 | + { | |
93 | + field: 'nameOrIdentifier', | |
94 | + label: '功能名称/标识符', | |
95 | + component: 'Input', | |
96 | + colProps: { span: 8 }, | |
97 | + }, | |
98 | +]; | |
99 | + | |
61 | 100 | export const step1Schemas: FormSchema[] = [ |
62 | 101 | { |
63 | 102 | field: 'image', | ... | ... |
... | ... | @@ -2,6 +2,7 @@ |
2 | 2 | <div class="p-style"> |
3 | 3 | <BasicTable |
4 | 4 | :rowSelection="{ type: 'checkbox' }" |
5 | + class="bg-gray-100" | |
5 | 6 | :clickToRowSelect="false" |
6 | 7 | @register="registerTable" |
7 | 8 | > |
... | ... | @@ -41,7 +42,9 @@ |
41 | 42 | cancel-text="取消" |
42 | 43 | @confirm="handleEmit" |
43 | 44 | > |
44 | - <Button v-if="isShowBtn" type="primary"> 发布上线 </Button> | |
45 | + <Button v-if="isShowBtn" type="primary" :loading="releaseLoading"> | |
46 | + 发布上线 | |
47 | + </Button> | |
45 | 48 | </Popconfirm> |
46 | 49 | <Button v-if="isShowBtn" class="!bg-gray-200" type="text" @click="handleReturn"> |
47 | 50 | 返回 |
... | ... | @@ -108,7 +111,7 @@ |
108 | 111 | <script lang="ts" setup> |
109 | 112 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
110 | 113 | import { useModal } from '/@/components/Modal'; |
111 | - import { physicalColumn } from '../device.profile.data'; | |
114 | + import { modelOfMatterForm, physicalColumn } from '../device.profile.data'; | |
112 | 115 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; |
113 | 116 | import { Authority } from '/@/components/Authority'; |
114 | 117 | import PhysicalModelModal from './cpns/physical/PhysicalModelModal.vue'; |
... | ... | @@ -116,13 +119,13 @@ |
116 | 119 | import { Popconfirm, Button, Alert } from 'ant-design-vue'; |
117 | 120 | import { useMessage } from '/@/hooks/web/useMessage'; |
118 | 121 | import { DeviceRecord } from '/@/api/device/model/deviceModel'; |
119 | - import { deleteModel, getModelList } from '/@/api/device/modelOfMatter'; | |
122 | + import { deleteModel, getModelList, releaseModel } from '/@/api/device/modelOfMatter'; | |
120 | 123 | import { OpenModelOfMatterModelParams, OpenModelMode } from './cpns/physical/types'; |
121 | 124 | import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel'; |
122 | 125 | import { ref } from 'vue'; |
123 | 126 | defineEmits(['register']); |
124 | 127 | |
125 | - defineProps<{ | |
128 | + const props = defineProps<{ | |
126 | 129 | record: DeviceRecord; |
127 | 130 | }>(); |
128 | 131 | |
... | ... | @@ -132,13 +135,19 @@ |
132 | 135 | const [registerModalTsl, { openModal: openModalTsl }] = useModal(); |
133 | 136 | |
134 | 137 | const [registerTable, { reload, setProps }] = useTable({ |
135 | - api: getModelList, | |
138 | + api: async (params: Record<'page' | 'pageSize', number>) => { | |
139 | + return await getModelList({ ...params, deviceProfileId: props.record.id }); | |
140 | + }, | |
136 | 141 | columns: physicalColumn, |
137 | 142 | showIndexColumn: false, |
138 | 143 | clickToRowSelect: false, |
139 | - useSearchForm: false, | |
140 | 144 | showTableSetting: true, |
141 | 145 | bordered: true, |
146 | + useSearchForm: true, | |
147 | + formConfig: { | |
148 | + schemas: modelOfMatterForm, | |
149 | + labelWidth: 120, | |
150 | + }, | |
142 | 151 | actionColumn: { |
143 | 152 | width: 200, |
144 | 153 | title: '操作', |
... | ... | @@ -200,9 +209,19 @@ |
200 | 209 | const handleEditPhysicalModel = () => (isShowBtn.value = true); |
201 | 210 | |
202 | 211 | const handleReturn = () => (isShowBtn.value = false); |
203 | - const handleEmit = () => { | |
204 | - isShowBtn.value = false; | |
205 | - createMessage.success('发布成功'); | |
212 | + | |
213 | + const releaseLoading = ref(false); | |
214 | + const handleEmit = async () => { | |
215 | + try { | |
216 | + releaseLoading.value = true; | |
217 | + await releaseModel(props.record.id); | |
218 | + handleReturn(); | |
219 | + createMessage.success('发布成功'); | |
220 | + reload(); | |
221 | + } catch (error) { | |
222 | + } finally { | |
223 | + releaseLoading.value = false; | |
224 | + } | |
206 | 225 | }; |
207 | 226 | |
208 | 227 | defineExpose({}); | ... | ... |
... | ... | @@ -30,7 +30,7 @@ |
30 | 30 | </div> |
31 | 31 | <div> |
32 | 32 | <Spin :spinning="loading"> |
33 | - <div id="jsoneditor" ref="jsoneditorRef"></div> | |
33 | + <div id="jsoneditor" ref="jsoneditorEl"></div> | |
34 | 34 | </Spin> |
35 | 35 | </div> |
36 | 36 | </div> |
... | ... | @@ -60,9 +60,12 @@ |
60 | 60 | |
61 | 61 | const jsonValue = ref(); |
62 | 62 | |
63 | - const jsonInstance = ref(); | |
63 | + const jsonInstance = ref<{ | |
64 | + set: (value?: Recordable) => void; | |
65 | + get: () => Recordable; | |
66 | + }>(); | |
64 | 67 | |
65 | - const jsoneditorRef = ref<Recordable>(); | |
68 | + const jsoneditorEl = ref<HTMLDivElement>(); | |
66 | 69 | |
67 | 70 | const activeKey = ref(FunctionType.PROPERTIES); |
68 | 71 | |
... | ... | @@ -73,7 +76,7 @@ |
73 | 76 | mainMenuBar: false, |
74 | 77 | statusBar: false, |
75 | 78 | }; |
76 | - let editor = new jsoneditor(jsoneditorRef.value, options); | |
79 | + let editor = new jsoneditor(jsoneditorEl.value, options); | |
77 | 80 | editor.set(jsonValue.value); |
78 | 81 | jsonInstance.value = editor; |
79 | 82 | }); |
... | ... | @@ -83,7 +86,7 @@ |
83 | 86 | |
84 | 87 | const handleCopy = () => { |
85 | 88 | try { |
86 | - const valueRef = unref(jsonInstance).get(); | |
89 | + const valueRef = unref(jsonInstance)?.get(); | |
87 | 90 | const value = JSON.stringify(unref(valueRef)); |
88 | 91 | if (!value) { |
89 | 92 | createMessage.warning('请输入要拷贝的内容!'); |
... | ... | @@ -99,31 +102,36 @@ |
99 | 102 | }; |
100 | 103 | |
101 | 104 | const getFormData = () => { |
102 | - const value = unref(jsonInstance).get(); | |
105 | + const value = unref(jsonInstance)?.get(); | |
103 | 106 | if (!value) return; |
104 | 107 | return value; |
105 | 108 | }; |
106 | 109 | |
107 | 110 | const resetFormData = () => { |
108 | - unref(jsonInstance).set(); | |
111 | + unref(jsonInstance)?.set(); | |
109 | 112 | }; |
110 | 113 | |
111 | 114 | const handlePremitter = () => { |
112 | - const value = unref(jsonInstance).get(); | |
113 | - return unref(jsonInstance).set(value); | |
115 | + const value = unref(jsonInstance)?.get(); | |
116 | + return unref(jsonInstance)?.set(value); | |
114 | 117 | }; |
115 | 118 | |
116 | 119 | const handleSwitchTsl = async (functionType: FunctionType) => { |
117 | 120 | try { |
118 | 121 | loading.value = true; |
119 | 122 | const record = await getModelTsl({ deviceProfileId: props.record.id, functionType }); |
120 | - console.log(record); | |
123 | + jsonInstance.value?.set(record); | |
121 | 124 | } catch (error) { |
122 | 125 | } finally { |
123 | 126 | loading.value = false; |
124 | 127 | } |
125 | 128 | }; |
126 | 129 | |
130 | + onMounted(() => { | |
131 | + activeKey.value = FunctionType.PROPERTIES; | |
132 | + handleSwitchTsl(FunctionType.PROPERTIES); | |
133 | + }); | |
134 | + | |
127 | 135 | defineExpose({ |
128 | 136 | getFormData, |
129 | 137 | resetFormData, | ... | ... |