Commit 988e262dfea1c4cd31ab275d2537cb793bcf8e00

Authored by xp.Huang
2 parents d123ed23 d8689272

Merge branch 'local_dev_ft' into 'main'

feat:联调上下线记录接口

See merge request huang/yun-teng-iot-front!457
... ... @@ -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',
... ...