Commit 988e262dfea1c4cd31ab275d2537cb793bcf8e00
Merge branch 'local_dev_ft' into 'main'
feat:联调上下线记录接口 See merge request huang/yun-teng-iot-front!457
Showing
10 changed files
with
297 additions
and
172 deletions
... | ... | @@ -7,6 +7,7 @@ import { |
7 | 7 | DeviceQueryParam, |
8 | 8 | DeviceRecord, |
9 | 9 | DeviceTypeEnum, |
10 | + DeviceStateLogModel, | |
10 | 11 | } from '/@/api/device/model/deviceModel'; |
11 | 12 | import { ChildDeviceParams } from './model/deviceModel'; |
12 | 13 | import { PaginationResult } from '/#/axios'; |
... | ... | @@ -26,11 +27,14 @@ enum DeviceManagerApi { |
26 | 27 | DEVICE_ALARM_URL = '/alarm', |
27 | 28 | |
28 | 29 | DEVICE_CREDENTIALS = '/device/credentials', |
30 | + | |
29 | 31 | COMMAND_ISSUANCE = '/rpc', |
30 | 32 | |
31 | 33 | DEVICE_ATTR = '/device/attributes', |
32 | 34 | |
33 | 35 | GATEWAY_DEVICE = '/device/gateway/list', |
36 | + | |
37 | + DEVICE_STATE_LOG_URL = '/device/state/log', | |
34 | 38 | } |
35 | 39 | |
36 | 40 | export const devicePage = (params: DeviceQueryParam) => { |
... | ... | @@ -257,3 +261,40 @@ export const getDeviceAttrs = (params: { deviceProfileId: string; dataType?: str |
257 | 261 | params: { dataType }, |
258 | 262 | }); |
259 | 263 | }; |
264 | + | |
265 | +/** | |
266 | + * 设备上下线记录相关api | |
267 | + */ | |
268 | +export const deviceStateLogPage = (params: DeviceQueryParam) => { | |
269 | + return defHttp.get<DeviceStateLogModel>({ | |
270 | + url: DeviceManagerApi.DEVICE_STATE_LOG_URL, | |
271 | + params, | |
272 | + }); | |
273 | +}; | |
274 | + | |
275 | +export const deleteStateLogDevice = (ids: string[]) => { | |
276 | + return defHttp.delete({ | |
277 | + url: DeviceManagerApi.DEVICE_STATE_LOG_URL, | |
278 | + data: { | |
279 | + ids: ids, | |
280 | + }, | |
281 | + }); | |
282 | +}; | |
283 | + | |
284 | +export const deviceStateLogDetail = (id) => { | |
285 | + return defHttp.get<DeviceStateLogModel>({ | |
286 | + url: DeviceManagerApi.DEVICE_STATE_LOG_URL + '/' + id, | |
287 | + }); | |
288 | +}; | |
289 | + | |
290 | +export const deviceStateLogPost = (data) => { | |
291 | + return defHttp.post( | |
292 | + { | |
293 | + url: DeviceManagerApi.DEVICE_STATE_LOG_URL, | |
294 | + data, | |
295 | + } | |
296 | + // { | |
297 | + // joinPrefix: false, | |
298 | + // } | |
299 | + ); | |
300 | +}; | ... | ... |
... | ... | @@ -170,3 +170,33 @@ export interface DeviceModelOfMatterAttrs { |
170 | 170 | identifier: string; |
171 | 171 | detail: StructJSON; |
172 | 172 | } |
173 | + | |
174 | +export interface DeviceStateLogModel { | |
175 | + items: [ | |
176 | + { | |
177 | + createTime: string; | |
178 | + creator: string; | |
179 | + defaultConfig: string; | |
180 | + description: string; | |
181 | + deviceName: string; | |
182 | + deviceProfileName: string; | |
183 | + deviceType: string; | |
184 | + enabled: true; | |
185 | + icon: string; | |
186 | + id: string; | |
187 | + name: string; | |
188 | + organizationName: string; | |
189 | + remark: string; | |
190 | + roleIds: [string]; | |
191 | + status: 0; | |
192 | + tbDeviceId: string; | |
193 | + tenantExpireTime: string; | |
194 | + tenantId: string; | |
195 | + tenantProfileId: string; | |
196 | + tenantStatus: string; | |
197 | + updateTime: string; | |
198 | + updater: string; | |
199 | + } | |
200 | + ]; | |
201 | + total: 0; | |
202 | +} | ... | ... |
... | ... | @@ -277,7 +277,6 @@ |
277 | 277 | const deviceProfileId = ref(''); |
278 | 278 | count.value = Number(getParams('count')); |
279 | 279 | deviceProfileId.value = getParams('deviceProfileId') || ''; |
280 | - | |
281 | 280 | const setRowClassName = async () => { |
282 | 281 | if (deviceProfileId.value !== undefined) { |
283 | 282 | const { items, total } = await devicePage({ | ... | ... |
... | ... | @@ -15,7 +15,7 @@ |
15 | 15 | |
16 | 16 | const loading = ref(false); |
17 | 17 | |
18 | - const props = defineProps<{ | |
18 | + defineProps<{ | |
19 | 19 | record: DeviceRecord; |
20 | 20 | }>(); |
21 | 21 | const go = useGo(); |
... | ... | @@ -35,10 +35,9 @@ |
35 | 35 | }, |
36 | 36 | }, |
37 | 37 | { |
38 | - field: 'deviceType', | |
38 | + field: 'deviceTypeName', | |
39 | 39 | label: '设备类型', |
40 | 40 | render: (_, data) => { |
41 | - console.log(data); | |
42 | 41 | return h( |
43 | 42 | Button, |
44 | 43 | { |
... | ... | @@ -55,7 +54,7 @@ |
55 | 54 | ); |
56 | 55 | }, |
57 | 56 | }, |
58 | - () => `${data.deviceType}(${data.deviceCount})` | |
57 | + () => `${data.deviceTypeName}(${data.deviceCount})` | |
59 | 58 | ); |
60 | 59 | }, |
61 | 60 | }, |
... | ... | @@ -87,7 +86,7 @@ |
87 | 86 | ); |
88 | 87 | if (!error) { |
89 | 88 | const record = data.find((item) => item.itemValue === deviceType); |
90 | - return { deviceType: record?.itemText }; | |
89 | + return { deviceTypeName: record?.itemText }; | |
91 | 90 | } |
92 | 91 | return {}; |
93 | 92 | }; |
... | ... | @@ -112,30 +111,22 @@ |
112 | 111 | return {}; |
113 | 112 | }; |
114 | 113 | |
115 | - async function getValues() { | |
116 | - const { defaultRuleChainId, deviceType, defaultQueueName } = props.record; | |
117 | - return await Promise.all([ | |
118 | - findDeviceType(deviceType), | |
119 | - findHandleQueue(defaultQueueName), | |
120 | - findRuleChain(defaultRuleChainId), | |
121 | - ]); | |
122 | - } | |
123 | - | |
124 | - const renderProductInfo = async () => { | |
114 | + const renderProductInfo = async (record: DeviceRecord) => { | |
125 | 115 | try { |
126 | 116 | data.value = {} as unknown as DeviceRecord; |
127 | 117 | loading.value = true; |
128 | - const values = await getValues(); | |
129 | - // const { defaultRuleChainId, deviceType, defaultQueueName } = props.record; | |
130 | - // data.value = props.record; | |
131 | - // const values = await Promise.all([ | |
132 | - // findDeviceType(deviceType), | |
133 | - // findHandleQueue(defaultQueueName), | |
134 | - // findRuleChain(defaultRuleChainId), | |
135 | - // ]); | |
118 | + const { defaultRuleChainId, deviceType, defaultQueueName } = record; | |
119 | + if (![defaultRuleChainId, deviceType, defaultQueueName].some(Boolean)) { | |
120 | + return; | |
121 | + } | |
122 | + data.value = record; | |
123 | + const values = await Promise.all([ | |
124 | + findDeviceType(deviceType), | |
125 | + findHandleQueue(defaultQueueName), | |
126 | + findRuleChain(defaultRuleChainId), | |
127 | + ]); | |
136 | 128 | const value = values.reduce((prev, next) => ({ ...prev, ...next }), {}); |
137 | - data.value = Object.assign(unref(data), props.record, value); | |
138 | - console.log(data.value); | |
129 | + data.value = Object.assign(unref(data), value); | |
139 | 130 | setDescProps({ data: unref(data) }); |
140 | 131 | } catch (error) { |
141 | 132 | throw error; | ... | ... |
1 | +<template> | |
2 | + <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="处理上下线记录" width="30%"> | |
3 | + <Description :column="3" size="middle" @register="registeDesc" /> | |
4 | + <div style="height: 30px"></div> | |
5 | + <BasicForm @register="registerForm" /> | |
6 | + <div class="flex flex-end" style="float: right"> | |
7 | + <a-button type="primary" @click="handleDeviceState">处理</a-button> | |
8 | + </div> | |
9 | + </BasicDrawer> | |
10 | +</template> | |
11 | +<script lang="ts" setup> | |
12 | + import { reactive } from 'vue'; | |
13 | + import { BasicForm, useForm } from '/@/components/Form'; | |
14 | + import { formHandleSchema, formDetailSchema } from './config.data'; | |
15 | + import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; | |
16 | + import { deviceStateLogPost } from '/@/api/device/deviceManager'; | |
17 | + import { useMessage } from '/@/hooks/web/useMessage'; | |
18 | + import { useDescription } from '/@/components/Description'; | |
19 | + import { Description } from '/@/components/Description/index'; | |
20 | + | |
21 | + const emits = defineEmits(['success', 'register']); | |
22 | + | |
23 | + const { createMessage } = useMessage(); | |
24 | + | |
25 | + const record = reactive({ | |
26 | + obj: {}, | |
27 | + }); | |
28 | + | |
29 | + const [registerForm, { resetFields, getFieldsValue }] = useForm({ | |
30 | + schemas: formHandleSchema, | |
31 | + showActionButtonGroup: false, | |
32 | + }); | |
33 | + | |
34 | + const [registeDesc, { setDescProps }] = useDescription({ | |
35 | + schema: formDetailSchema, | |
36 | + column: 2, | |
37 | + layout: 'vertical', | |
38 | + }); | |
39 | + | |
40 | + const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { | |
41 | + await resetFields(); | |
42 | + setDrawerProps({ confirmLoading: false }); | |
43 | + record.obj = data.record; | |
44 | + setDescProps({ data: data.record }); | |
45 | + }); | |
46 | + | |
47 | + const handleDeviceState = async () => { | |
48 | + const values = getFieldsValue(); | |
49 | + await deviceStateLogPost({ | |
50 | + ...record.obj, | |
51 | + ...values, | |
52 | + }); | |
53 | + emits('success'); | |
54 | + closeDrawer(); | |
55 | + createMessage.success('处理成功'); | |
56 | + }; | |
57 | +</script> | ... | ... |
1 | 1 | <template> |
2 | - <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="上下线记录详情" width="40%"> | |
3 | - <BasicForm @register="registerForm" /> | |
2 | + <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="上下线记录详情" width="25%"> | |
3 | + <Description :column="3" size="middle" @register="registeDesc" /> | |
4 | 4 | </BasicDrawer> |
5 | 5 | </template> |
6 | 6 | <script lang="ts" setup> |
7 | - import { BasicForm, useForm } from '/@/components/Form'; | |
8 | 7 | import { formSchema } from './config.data'; |
9 | 8 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
9 | + import { deviceStateLogDetail } from '/@/api/device/deviceManager'; | |
10 | + import { Description } from '/@/components/Description/index'; | |
11 | + import { useDescription } from '/@/components/Description'; | |
10 | 12 | |
11 | 13 | defineEmits(['success', 'register']); |
12 | - const [registerForm, { setFieldsValue, resetFields }] = useForm({ | |
13 | - labelWidth: 120, | |
14 | - schemas: formSchema, | |
15 | - showActionButtonGroup: false, | |
14 | + | |
15 | + const [registeDesc, { setDescProps }] = useDescription({ | |
16 | + schema: formSchema, | |
17 | + column: 2, | |
18 | + layout: 'vertical', | |
16 | 19 | }); |
17 | 20 | |
18 | 21 | const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => { |
19 | - await resetFields(); | |
20 | 22 | setDrawerProps({ confirmLoading: false }); |
21 | - await setFieldsValue(data.record); | |
23 | + const res = await deviceStateLogDetail(data.record.id); | |
24 | + setDescProps({ data: res }); | |
22 | 25 | }); |
23 | 26 | </script> | ... | ... |
... | ... | @@ -2,6 +2,7 @@ import { BasicColumn, FormSchema } from '/@/components/Table'; |
2 | 2 | import moment from 'moment'; |
3 | 3 | import { h } from 'vue'; |
4 | 4 | import { Tag } from 'ant-design-vue'; |
5 | +import { DescItem } from '/@/components/Description'; | |
5 | 6 | |
6 | 7 | // 表格数据 |
7 | 8 | export const columns: BasicColumn[] = [ |
... | ... | @@ -12,17 +13,24 @@ export const columns: BasicColumn[] = [ |
12 | 13 | }, |
13 | 14 | { |
14 | 15 | title: '设备配置', |
15 | - dataIndex: 'deviceConfig', | |
16 | + dataIndex: 'deviceProfileName', | |
16 | 17 | width: 120, |
17 | 18 | }, |
18 | 19 | { |
19 | 20 | title: '设备类型', |
20 | - dataIndex: 'entityType', | |
21 | + dataIndex: 'deviceType', | |
21 | 22 | width: 180, |
23 | + format: (_text: string, record: Recordable) => { | |
24 | + return record.deviceType == 'DIRECT_CONNECTION' | |
25 | + ? '直连设备' | |
26 | + : record.deviceType == 'GATEWAY' | |
27 | + ? '网关设备' | |
28 | + : '网关子设备'; | |
29 | + }, | |
22 | 30 | }, |
23 | 31 | { |
24 | 32 | title: '所属组织', |
25 | - dataIndex: 'orgName', | |
33 | + dataIndex: 'organizationName', | |
26 | 34 | width: 120, |
27 | 35 | }, |
28 | 36 | { |
... | ... | @@ -31,9 +39,9 @@ export const columns: BasicColumn[] = [ |
31 | 39 | width: 180, |
32 | 40 | customRender: ({ record }) => { |
33 | 41 | const status = record.status; |
34 | - const enable = status === 'SUCCESS' ? '启用' : '禁用'; | |
35 | - const color = enable === '启用' ? 'green' : 'red'; | |
36 | - const text = enable === '启用' ? '启用' : '禁用'; | |
42 | + const enable = status === 1 ? '在线' : '离线'; | |
43 | + const color = enable === '在线' ? 'green' : 'red'; | |
44 | + const text = enable === '在线' ? '在线' : '离线'; | |
37 | 45 | return h(Tag, { color }, () => text); |
38 | 46 | }, |
39 | 47 | }, |
... | ... | @@ -79,12 +87,12 @@ export const searchFormSchema: FormSchema[] = [ |
79 | 87 | placeholder: '请选择状态', |
80 | 88 | options: [ |
81 | 89 | { |
82 | - label: '启用', | |
83 | - value: 'NOTICE', | |
90 | + label: '在线', | |
91 | + value: 1, | |
84 | 92 | }, |
85 | 93 | { |
86 | - label: '禁用', | |
87 | - value: 'MEETING', | |
94 | + label: '离线', | |
95 | + value: 0, | |
88 | 96 | }, |
89 | 97 | ], |
90 | 98 | }, |
... | ... | @@ -102,112 +110,93 @@ export const searchFormSchema: FormSchema[] = [ |
102 | 110 | }, |
103 | 111 | ]; |
104 | 112 | |
105 | -// 详情配置 | |
106 | -export const formSchema: FormSchema[] = [ | |
113 | +export const formSchema: DescItem[] = [ | |
107 | 114 | { |
108 | 115 | field: 'deviceName', |
109 | 116 | label: '设备名称', |
110 | - component: 'Input', | |
111 | - componentProps: { | |
112 | - disabled: true, | |
113 | - }, | |
114 | 117 | }, |
115 | 118 | { |
116 | - field: 'deviceConfig', | |
119 | + field: 'deviceProfileName', | |
117 | 120 | label: '设备配置', |
118 | - component: 'Input', | |
119 | - componentProps: { | |
120 | - disabled: true, | |
121 | - }, | |
122 | 121 | }, |
123 | 122 | { |
124 | - field: 'entityType', | |
123 | + field: 'deviceType', | |
125 | 124 | label: '设备类型', |
126 | - component: 'Input', | |
127 | - componentProps: { | |
128 | - disabled: true, | |
125 | + render: (_, data) => { | |
126 | + return data.deviceType == 'DIRECT_CONNECTION' | |
127 | + ? '直连设备' | |
128 | + : data.deviceType == 'GATEWAY' | |
129 | + ? '网关设备' | |
130 | + : '网关子设备'; | |
129 | 131 | }, |
130 | 132 | }, |
131 | 133 | { |
132 | - field: 'orgName', | |
134 | + field: 'organizationName', | |
133 | 135 | label: '所属组织', |
134 | - component: 'Input', | |
135 | - componentProps: { | |
136 | - disabled: true, | |
137 | - }, | |
138 | 136 | }, |
139 | 137 | { |
140 | 138 | field: 'status', |
141 | 139 | label: '状态', |
142 | - component: 'Input', | |
143 | - componentProps: { | |
144 | - disabled: true, | |
140 | + render: (_, data) => { | |
141 | + return data.status == 1 ? '在线' : '离线'; | |
145 | 142 | }, |
146 | 143 | }, |
147 | 144 | { |
148 | 145 | field: 'createTime', |
149 | 146 | label: '时间', |
150 | - colProps: { span: 24 }, | |
151 | - component: 'Input', | |
152 | - componentProps: { | |
153 | - disabled: true, | |
147 | + }, | |
148 | +]; | |
149 | + | |
150 | +export const formDetailSchema: DescItem[] = [ | |
151 | + { | |
152 | + field: 'deviceName', | |
153 | + label: '设备名称', | |
154 | + }, | |
155 | + { | |
156 | + field: 'status', | |
157 | + label: '状态', | |
158 | + render: (_, data) => { | |
159 | + return data.status == 1 ? '在线' : '离线'; | |
154 | 160 | }, |
155 | 161 | }, |
162 | + { | |
163 | + field: 'createTime', | |
164 | + label: '时间', | |
165 | + }, | |
156 | 166 | ]; |
157 | 167 | |
158 | -export const mockList = [ | |
159 | - { | |
160 | - deviceName: '网关/直连设备', | |
161 | - id: '2d2321s122131', | |
162 | - deviceConfig: '车车网关设备配置', | |
163 | - entityType: '网关', | |
164 | - orgName: 'cheche', | |
165 | - status: 'SUCCESS', | |
166 | - createTime: '2022-12-22 16:25:36', | |
167 | - }, | |
168 | - { | |
169 | - deviceName: '网关/直连设备', | |
170 | - id: '2d22321s12131', | |
171 | - deviceConfig: '车车网关设备配置', | |
172 | - entityType: '网关', | |
173 | - orgName: 'cheche', | |
174 | - status: 'SUCCESS', | |
175 | - createTime: '2022-12-22 16:25:36', | |
176 | - }, | |
177 | - { | |
178 | - deviceName: '网关/直连设备', | |
179 | - id: '2d232d1s12131', | |
180 | - deviceConfig: '车车网关设备配置', | |
181 | - entityType: '网关', | |
182 | - orgName: 'cheche', | |
183 | - status: 'SUCCESS', | |
184 | - createTime: '2022-12-22 16:25:36', | |
185 | - }, | |
186 | - { | |
187 | - deviceName: '网关/直连设备', | |
188 | - id: '2d2321fs12131', | |
189 | - deviceConfig: '车车网关设备配置', | |
190 | - entityType: '网关', | |
191 | - orgName: 'cheche', | |
192 | - status: 'SUCCESS', | |
193 | - createTime: '2022-12-22 16:25:36', | |
194 | - }, | |
195 | - { | |
196 | - deviceName: '网关/直连设备', | |
197 | - id: '2d2321ggs12131', | |
198 | - deviceConfig: '车车网关设备配置', | |
199 | - entityType: '网关', | |
200 | - orgName: 'cheche', | |
201 | - status: 'SUCCESS', | |
202 | - createTime: '2022-12-22 16:25:36', | |
203 | - }, | |
204 | - { | |
205 | - deviceName: '网关/直连设备', | |
206 | - id: '2d2321hhs12131', | |
207 | - deviceConfig: '车车网关设备配置', | |
208 | - entityType: '网关', | |
209 | - orgName: 'cheche', | |
210 | - status: 'FATURE', | |
211 | - createTime: '2022-12-22 16:25:36', | |
168 | +//处理表单 | |
169 | +export const formHandleSchema: FormSchema[] = [ | |
170 | + // { | |
171 | + // field: 'deviceName', | |
172 | + // label: '设备名称', | |
173 | + // component: 'Input', | |
174 | + // componentProps: { | |
175 | + // disabled: true, | |
176 | + // }, | |
177 | + // }, | |
178 | + // { | |
179 | + // field: 'status', | |
180 | + // label: '状态', | |
181 | + // component: 'Input', | |
182 | + // componentProps: { | |
183 | + // disabled: true, | |
184 | + // }, | |
185 | + // }, | |
186 | + // { | |
187 | + // field: 'createTime', | |
188 | + // label: '时间', | |
189 | + // colProps: { span: 24 }, | |
190 | + // component: 'Input', | |
191 | + // componentProps: { | |
192 | + // disabled: true, | |
193 | + // }, | |
194 | + // }, | |
195 | + { | |
196 | + field: 'description', | |
197 | + label: '备注', | |
198 | + colProps: { span: 24 }, | |
199 | + component: 'InputTextArea', | |
200 | + componentProps: {}, | |
212 | 201 | }, |
213 | 202 | ]; | ... | ... |
... | ... | @@ -2,7 +2,7 @@ |
2 | 2 | <div> |
3 | 3 | <BasicTable :clickToRowSelect="false" @register="registerTable"> |
4 | 4 | <template #toolbar> |
5 | - <Authority value="api:yt:onlinerecord:delete"> | |
5 | + <Authority value="api:yt:device:state:log::delete"> | |
6 | 6 | <Popconfirm |
7 | 7 | title="您确定要批量删除数据" |
8 | 8 | ok-text="确定" |
... | ... | @@ -17,14 +17,20 @@ |
17 | 17 | <TableAction |
18 | 18 | :actions="[ |
19 | 19 | { |
20 | + label: '处理', | |
21 | + auth: 'api:yt:device:state:log::post', | |
22 | + icon: 'clarity:note-edit-line', | |
23 | + onClick: handleView.bind(null, record), | |
24 | + }, | |
25 | + { | |
20 | 26 | label: '详情', |
21 | - auth: 'api:yt:onlinerecord:get', | |
27 | + auth: 'api:yt:device:state:log::detail', | |
22 | 28 | icon: 'clarity:note-edit-line', |
23 | 29 | onClick: handleViewDetail.bind(null, record), |
24 | 30 | }, |
25 | 31 | { |
26 | 32 | label: '删除', |
27 | - auth: 'api:yt:onlinerecord:delete', | |
33 | + auth: 'api:yt:device:state:log::delete', | |
28 | 34 | icon: 'ant-design:delete-outlined', |
29 | 35 | color: 'error', |
30 | 36 | popConfirm: { |
... | ... | @@ -37,6 +43,7 @@ |
37 | 43 | </template> |
38 | 44 | </BasicTable> |
39 | 45 | <OnlineRecordDrawer @register="registerDrawer" @success="handleSuccess" /> |
46 | + <OnlineHandleDrawer @register="registerHandleDrawer" @success="handleHandleSuccess" /> | |
40 | 47 | </div> |
41 | 48 | </template> |
42 | 49 | |
... | ... | @@ -45,17 +52,16 @@ |
45 | 52 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
46 | 53 | import { useDrawer } from '/@/components/Drawer'; |
47 | 54 | import OnlineRecordDrawer from './OnlineRecordDrawer.vue'; |
48 | - // import { getExceptionPage } from '/@/api/log/logManager'; | |
49 | - import { searchFormSchema, columns, mockList } from './config.data'; | |
55 | + import OnlineHandleDrawer from './OnlineHandleDrawer.vue'; | |
56 | + import { deviceStateLogPage, deleteStateLogDevice } from '/@/api/device/deviceManager'; | |
57 | + import { searchFormSchema, columns } from './config.data'; | |
50 | 58 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; |
51 | - import { deleteConvertApi } from '/@/api/datamanager/dataManagerApi'; | |
52 | 59 | import { Popconfirm } from 'ant-design-vue'; |
53 | 60 | import { Authority } from '/@/components/Authority'; |
54 | 61 | |
55 | 62 | const [registerTable, { setProps, reload }] = useTable({ |
56 | 63 | title: '上下线记录', |
57 | - dataSource: mockList, | |
58 | - // api: getExceptionPage, | |
64 | + api: deviceStateLogPage, | |
59 | 65 | columns, |
60 | 66 | showIndexColumn: false, |
61 | 67 | clickToRowSelect: false, |
... | ... | @@ -76,12 +82,19 @@ |
76 | 82 | fixed: 'right', |
77 | 83 | }, |
78 | 84 | }); |
85 | + | |
79 | 86 | const handleSuccess = () => { |
80 | 87 | reload(); |
81 | 88 | resetSelectedRowKeys(); |
82 | 89 | }; |
90 | + | |
91 | + const handleHandleSuccess = () => { | |
92 | + reload(); | |
93 | + resetSelectedRowKeys(); | |
94 | + }; | |
95 | + | |
83 | 96 | const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } = |
84 | - useBatchDelete(deleteConvertApi, handleSuccess, setProps); | |
97 | + useBatchDelete(deleteStateLogDevice, handleSuccess, setProps); | |
85 | 98 | |
86 | 99 | nextTick(() => { |
87 | 100 | setProps(selectionOptions); |
... | ... | @@ -90,10 +103,18 @@ |
90 | 103 | // 弹框 |
91 | 104 | const [registerDrawer, { openDrawer }] = useDrawer(); |
92 | 105 | |
106 | + const [registerHandleDrawer, { openDrawer: openHandleDrawer }] = useDrawer(); | |
107 | + | |
93 | 108 | const handleViewDetail = (record) => { |
94 | 109 | openDrawer(true, { |
95 | 110 | isUpdate: true, |
96 | 111 | record, |
97 | 112 | }); |
98 | 113 | }; |
114 | + const handleView = (record) => { | |
115 | + openHandleDrawer(true, { | |
116 | + isUpdate: true, | |
117 | + record, | |
118 | + }); | |
119 | + }; | |
99 | 120 | </script> | ... | ... |
... | ... | @@ -31,16 +31,6 @@ |
31 | 31 | ]" |
32 | 32 | /> |
33 | 33 | </template> |
34 | - <template #status="{ record }"> | |
35 | - <Switch | |
36 | - :disabled="disabled" | |
37 | - :checked="record.status === 1" | |
38 | - :loading="record.pendingStatus" | |
39 | - checkedChildren="启用" | |
40 | - unCheckedChildren="禁用" | |
41 | - @change="(checked:boolean)=>statusChange(checked,record)" | |
42 | - /> | |
43 | - </template> | |
44 | 34 | </BasicTable> |
45 | 35 | <ItemDrawer @register="registerDrawer" @success="handleSuccess" /> |
46 | 36 | </div> |
... | ... | @@ -51,17 +41,15 @@ |
51 | 41 | import { defineComponent, ref } from 'vue'; |
52 | 42 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
53 | 43 | import { sysDictItemPage, deleteDictItem } from '/@/api/system/dict'; |
54 | - import { Switch } from 'ant-design-vue'; | |
55 | 44 | import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer'; |
56 | 45 | import ItemDrawer from '/@/views/system/dict/item/ItemDrawer.vue'; |
57 | 46 | import { columns, searchFormSchema } from './dict.item.data'; |
58 | 47 | import { useMessage } from '/@/hooks/web/useMessage'; |
59 | 48 | import Authority from '/@/components/Authority/src/Authority.vue'; |
60 | - import { setDictItemStatus } from '/@/api/system/dict'; | |
61 | 49 | |
62 | 50 | export default defineComponent({ |
63 | 51 | name: 'ItemIndex', |
64 | - components: { BasicDrawer, BasicTable, ItemDrawer, TableAction, Authority, Switch }, | |
52 | + components: { BasicDrawer, BasicTable, ItemDrawer, TableAction, Authority }, | |
65 | 53 | setup() { |
66 | 54 | let dictId; |
67 | 55 | const disabled = ref(false); |
... | ... | @@ -81,7 +69,7 @@ |
81 | 69 | |
82 | 70 | reload(); |
83 | 71 | }); |
84 | - const [registerTable, { reload, setSelectedRowKeys, setProps }] = useTable({ | |
72 | + const [registerTable, { reload }] = useTable({ | |
85 | 73 | title: '字典值列表', |
86 | 74 | api: sysDictItemPage, |
87 | 75 | columns, |
... | ... | @@ -137,27 +125,6 @@ |
137 | 125 | function handleSuccess() { |
138 | 126 | reload(); |
139 | 127 | } |
140 | - const statusChange = async (checked, record) => { | |
141 | - setProps({ | |
142 | - loading: true, | |
143 | - }); | |
144 | - setSelectedRowKeys([]); | |
145 | - const newStatus = checked ? 1 : 0; | |
146 | - const { createMessage } = useMessage(); | |
147 | - try { | |
148 | - await setDictItemStatus(record.id, newStatus); | |
149 | - if (newStatus) { | |
150 | - createMessage.success(`启用成功`); | |
151 | - } else { | |
152 | - createMessage.success('禁用成功'); | |
153 | - } | |
154 | - } finally { | |
155 | - setProps({ | |
156 | - loading: false, | |
157 | - }); | |
158 | - reload(); | |
159 | - } | |
160 | - }; | |
161 | 128 | return { |
162 | 129 | register, |
163 | 130 | registerTable, |
... | ... | @@ -166,7 +133,6 @@ |
166 | 133 | handleEdit, |
167 | 134 | handleDelete, |
168 | 135 | handleSuccess, |
169 | - statusChange, | |
170 | 136 | disabled, |
171 | 137 | }; |
172 | 138 | }, | ... | ... |
1 | +import { Switch } from 'ant-design-vue'; | |
1 | 2 | import { BasicColumn } from '/@/components/Table'; |
2 | 3 | import { FormSchema } from '/@/components/Table'; |
4 | +import { useMessage } from '/@/hooks/web/useMessage'; | |
5 | +import { setDictItemStatus } from '/@/api/system/dict'; | |
6 | +import { h } from 'vue'; | |
3 | 7 | |
4 | 8 | export const columns: BasicColumn[] = [ |
5 | 9 | { |
... | ... | @@ -21,8 +25,32 @@ export const columns: BasicColumn[] = [ |
21 | 25 | title: '状态', |
22 | 26 | dataIndex: 'status', |
23 | 27 | width: 100, |
24 | - slots: { customRender: 'status' }, | |
28 | + customRender: ({ record }) => { | |
29 | + if (!Reflect.has(record, 'pendingStatus')) { | |
30 | + record.pendingStatus = false; | |
31 | + } | |
32 | + return h(Switch, { | |
33 | + checked: record.status === 1, | |
34 | + checkedChildren: '已启用', | |
35 | + unCheckedChildren: '已禁用', | |
36 | + loading: record.pendingStatus, | |
37 | + onChange(checked: boolean) { | |
38 | + record.pendingStatus = true; | |
39 | + const newStatus = checked ? 1 : 0; | |
40 | + const { createMessage } = useMessage(); | |
41 | + setDictItemStatus(record.id, newStatus) | |
42 | + .then(() => { | |
43 | + record.status = newStatus; | |
44 | + createMessage.success(`修改成功`); | |
45 | + }) | |
46 | + .finally(() => { | |
47 | + record.pendingStatus = false; | |
48 | + }); | |
49 | + }, | |
50 | + }); | |
51 | + }, | |
25 | 52 | }, |
53 | + | |
26 | 54 | { |
27 | 55 | title: '排序', |
28 | 56 | dataIndex: 'sort', | ... | ... |