Merge branch 'local_dev_ft' into 'main'

feat:联调上下线记录接口

See merge request huang/yun-teng-iot-front!457

@@ -7,6 +7,7 @@ import {
   DeviceQueryParam,
   DeviceQueryParam,
   DeviceRecord,
   DeviceRecord,
   DeviceTypeEnum,
   DeviceTypeEnum,
+  DeviceStateLogModel,
 } from '/@/api/device/model/deviceModel';
 } from '/@/api/device/model/deviceModel';
 import { ChildDeviceParams } from './model/deviceModel';
 import { ChildDeviceParams } from './model/deviceModel';
 import { PaginationResult } from '/#/axios';
 import { PaginationResult } from '/#/axios';
@@ -26,11 +27,14 @@ enum DeviceManagerApi {
   DEVICE_ALARM_URL = '/alarm',
   DEVICE_ALARM_URL = '/alarm',
 
 
   DEVICE_CREDENTIALS = '/device/credentials',
   DEVICE_CREDENTIALS = '/device/credentials',
+
   COMMAND_ISSUANCE = '/rpc',
   COMMAND_ISSUANCE = '/rpc',
 
 
   DEVICE_ATTR = '/device/attributes',
   DEVICE_ATTR = '/device/attributes',
 
 
   GATEWAY_DEVICE = '/device/gateway/list',
   GATEWAY_DEVICE = '/device/gateway/list',
+
+  DEVICE_STATE_LOG_URL = '/device/state/log',
 }
 }
 
 
 export const devicePage = (params: DeviceQueryParam) => {
 export const devicePage = (params: DeviceQueryParam) => {
@@ -257,3 +261,40 @@ export const getDeviceAttrs = (params: { deviceProfileId: string; dataType?: str
     params: { dataType },
     params: { dataType },
   });
   });
 };
 };
+
+/**
+ * 设备上下线记录相关api
+ */
+export const deviceStateLogPage = (params: DeviceQueryParam) => {
+  return defHttp.get<DeviceStateLogModel>({
+    url: DeviceManagerApi.DEVICE_STATE_LOG_URL,
+    params,
+  });
+};
+
+export const deleteStateLogDevice = (ids: string[]) => {
+  return defHttp.delete({
+    url: DeviceManagerApi.DEVICE_STATE_LOG_URL,
+    data: {
+      ids: ids,
+    },
+  });
+};
+
+export const deviceStateLogDetail = (id) => {
+  return defHttp.get<DeviceStateLogModel>({
+    url: DeviceManagerApi.DEVICE_STATE_LOG_URL + '/' + id,
+  });
+};
+
+export const deviceStateLogPost = (data) => {
+  return defHttp.post(
+    {
+      url: DeviceManagerApi.DEVICE_STATE_LOG_URL,
+      data,
+    }
+    // {
+    //   joinPrefix: false,
+    // }
+  );
+};

@@ -170,3 +170,33 @@ export interface DeviceModelOfMatterAttrs {
   identifier: string;
   identifier: string;
   detail: StructJSON;
   detail: StructJSON;
 }
 }
+
+export interface DeviceStateLogModel {
+  items: [
+    {
+      createTime: string;
+      creator: string;
+      defaultConfig: string;
+      description: string;
+      deviceName: string;
+      deviceProfileName: string;
+      deviceType: string;
+      enabled: true;
+      icon: string;
+      id: string;
+      name: string;
+      organizationName: string;
+      remark: string;
+      roleIds: [string];
+      status: 0;
+      tbDeviceId: string;
+      tenantExpireTime: string;
+      tenantId: string;
+      tenantProfileId: string;
+      tenantStatus: string;
+      updateTime: string;
+      updater: string;
+    }
+  ];
+  total: 0;
+}

@@ -277,7 +277,6 @@
       const deviceProfileId = ref('');
       const deviceProfileId = ref('');
       count.value = Number(getParams('count'));
       count.value = Number(getParams('count'));
       deviceProfileId.value = getParams('deviceProfileId') || '';
       deviceProfileId.value = getParams('deviceProfileId') || '';
-
       const setRowClassName = async () => {
       const setRowClassName = async () => {
         if (deviceProfileId.value !== undefined) {
         if (deviceProfileId.value !== undefined) {
           const { items, total } = await devicePage({
           const { items, total } = await devicePage({

@@ -15,7 +15,7 @@
 
 
   const loading = ref(false);
   const loading = ref(false);
 
 
-  const props = defineProps<{
+  defineProps<{
     record: DeviceRecord;
     record: DeviceRecord;
   }>();
   }>();
   const go = useGo();
   const go = useGo();
@@ -35,10 +35,9 @@
         },
         },
       },
       },
       {
       {
-        field: 'deviceType',
+        field: 'deviceTypeName',
         label: '设备类型',
         label: '设备类型',
         render: (_, data) => {
         render: (_, data) => {
-          console.log(data);
           return h(
           return h(
             Button,
             Button,
             {
             {
@@ -55,7 +54,7 @@
                 );
                 );
               },
               },
             },
             },
-            () => `${data.deviceType}(${data.deviceCount})`
+            () => `${data.deviceTypeName}(${data.deviceCount})`
           );
           );
         },
         },
       },
       },
@@ -87,7 +86,7 @@
     );
     );
     if (!error) {
     if (!error) {
       const record = data.find((item) => item.itemValue === deviceType);
       const record = data.find((item) => item.itemValue === deviceType);
-      return { deviceType: record?.itemText };
+      return { deviceTypeName: record?.itemText };
     }
     }
     return {};
     return {};
   };
   };
@@ -112,30 +111,22 @@
     return {};
     return {};
   };
   };
 
 
-  async function getValues() {
-    const { defaultRuleChainId, deviceType, defaultQueueName } = props.record;
-    return await Promise.all([
-      findDeviceType(deviceType),
-      findHandleQueue(defaultQueueName),
-      findRuleChain(defaultRuleChainId),
-    ]);
-  }
-
-  const renderProductInfo = async () => {
+  const renderProductInfo = async (record: DeviceRecord) => {
     try {
     try {
       data.value = {} as unknown as DeviceRecord;
       data.value = {} as unknown as DeviceRecord;
       loading.value = true;
       loading.value = true;
-      const values = await getValues();
-      // const { defaultRuleChainId, deviceType, defaultQueueName } = props.record;
-      // data.value = props.record;
-      // const values = await Promise.all([
-      //   findDeviceType(deviceType),
-      //   findHandleQueue(defaultQueueName),
-      //   findRuleChain(defaultRuleChainId),
-      // ]);
+      const { defaultRuleChainId, deviceType, defaultQueueName } = record;
+      if (![defaultRuleChainId, deviceType, defaultQueueName].some(Boolean)) {
+        return;
+      }
+      data.value = record;
+      const values = await Promise.all([
+        findDeviceType(deviceType),
+        findHandleQueue(defaultQueueName),
+        findRuleChain(defaultRuleChainId),
+      ]);
       const value = values.reduce((prev, next) => ({ ...prev, ...next }), {});
       const value = values.reduce((prev, next) => ({ ...prev, ...next }), {});
-      data.value = Object.assign(unref(data), props.record, value);
-      console.log(data.value);
+      data.value = Object.assign(unref(data), value);
       setDescProps({ data: unref(data) });
       setDescProps({ data: unref(data) });
     } catch (error) {
     } catch (error) {
       throw error;
       throw error;

+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="处理上下线记录" width="30%">
+    <Description :column="3" size="middle" @register="registeDesc" />
+    <div style="height: 30px"></div>
+    <BasicForm @register="registerForm" />
+    <div class="flex flex-end" style="float: right">
+      <a-button type="primary" @click="handleDeviceState">处理</a-button>
+    </div>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formHandleSchema, formDetailSchema } from './config.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { deviceStateLogPost } from '/@/api/device/deviceManager';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useDescription } from '/@/components/Description';
+  import { Description } from '/@/components/Description/index';
+
+  const emits = defineEmits(['success', 'register']);
+
+  const { createMessage } = useMessage();
+
+  const record = reactive({
+    obj: {},
+  });
+
+  const [registerForm, { resetFields, getFieldsValue }] = useForm({
+    schemas: formHandleSchema,
+    showActionButtonGroup: false,
+  });
+
+  const [registeDesc, { setDescProps }] = useDescription({
+    schema: formDetailSchema,
+    column: 2,
+    layout: 'vertical',
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await resetFields();
+    setDrawerProps({ confirmLoading: false });
+    record.obj = data.record;
+    setDescProps({ data: data.record });
+  });
+
+  const handleDeviceState = async () => {
+    const values = getFieldsValue();
+    await deviceStateLogPost({
+      ...record.obj,
+      ...values,
+    });
+    emits('success');
+    closeDrawer();
+    createMessage.success('处理成功');
+  };
+</script>

 <template>
 <template>
-  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="上下线记录详情" width="40%">
-    <BasicForm @register="registerForm" />
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="上下线记录详情" width="25%">
+    <Description :column="3" size="middle" @register="registeDesc" />
   </BasicDrawer>
   </BasicDrawer>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { BasicForm, useForm } from '/@/components/Form';
   import { formSchema } from './config.data';
   import { formSchema } from './config.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { deviceStateLogDetail } from '/@/api/device/deviceManager';
+  import { Description } from '/@/components/Description/index';
+  import { useDescription } from '/@/components/Description';
 
 
   defineEmits(['success', 'register']);
   defineEmits(['success', 'register']);
-  const [registerForm, { setFieldsValue, resetFields }] = useForm({
-    labelWidth: 120,
-    schemas: formSchema,
-    showActionButtonGroup: false,
+
+  const [registeDesc, { setDescProps }] = useDescription({
+    schema: formSchema,
+    column: 2,
+    layout: 'vertical',
   });
   });
 
 
   const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
   const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
-    await resetFields();
     setDrawerProps({ confirmLoading: false });
     setDrawerProps({ confirmLoading: false });
-    await setFieldsValue(data.record);
+    const res = await deviceStateLogDetail(data.record.id);
+    setDescProps({ data: res });
   });
   });
 </script>
 </script>

@@ -2,6 +2,7 @@ import { BasicColumn, FormSchema } from '/@/components/Table';
 import moment from 'moment';
 import moment from 'moment';
 import { h } from 'vue';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 import { Tag } from 'ant-design-vue';
+import { DescItem } from '/@/components/Description';
 
 
 // 表格数据
 // 表格数据
 export const columns: BasicColumn[] = [
 export const columns: BasicColumn[] = [
@@ -12,17 +13,24 @@ export const columns: BasicColumn[] = [
   },
   },
   {
   {
     title: '设备配置',
     title: '设备配置',
-    dataIndex: 'deviceConfig',
+    dataIndex: 'deviceProfileName',
     width: 120,
     width: 120,
   },
   },
   {
   {
     title: '设备类型',
     title: '设备类型',
-    dataIndex: 'entityType',
+    dataIndex: 'deviceType',
     width: 180,
     width: 180,
+    format: (_text: string, record: Recordable) => {
+      return record.deviceType == 'DIRECT_CONNECTION'
+        ? '直连设备'
+        : record.deviceType == 'GATEWAY'
+        ? '网关设备'
+        : '网关子设备';
+    },
   },
   },
   {
   {
     title: '所属组织',
     title: '所属组织',
-    dataIndex: 'orgName',
+    dataIndex: 'organizationName',
     width: 120,
     width: 120,
   },
   },
   {
   {
@@ -31,9 +39,9 @@ export const columns: BasicColumn[] = [
     width: 180,
     width: 180,
     customRender: ({ record }) => {
     customRender: ({ record }) => {
       const status = record.status;
       const status = record.status;
-      const enable = status === 'SUCCESS' ? '启用' : '禁用';
-      const color = enable === '启用' ? 'green' : 'red';
-      const text = enable === '启用' ? '启用' : '禁用';
+      const enable = status === 1 ? '在线' : '离线';
+      const color = enable === '在线' ? 'green' : 'red';
+      const text = enable === '在线' ? '在线' : '离线';
       return h(Tag, { color }, () => text);
       return h(Tag, { color }, () => text);
     },
     },
   },
   },
@@ -79,12 +87,12 @@ export const searchFormSchema: FormSchema[] = [
       placeholder: '请选择状态',
       placeholder: '请选择状态',
       options: [
       options: [
         {
         {
-          label: '启用',
-          value: 'NOTICE',
+          label: '在线',
+          value: 1,
         },
         },
         {
         {
-          label: '禁用',
-          value: 'MEETING',
+          label: '离线',
+          value: 0,
         },
         },
       ],
       ],
     },
     },
@@ -102,112 +110,93 @@ export const searchFormSchema: FormSchema[] = [
   },
   },
 ];
 ];
 
 
-// 详情配置
-export const formSchema: FormSchema[] = [
+export const formSchema: DescItem[] = [
   {
   {
     field: 'deviceName',
     field: 'deviceName',
     label: '设备名称',
     label: '设备名称',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
   },
   },
   {
   {
-    field: 'deviceConfig',
+    field: 'deviceProfileName',
     label: '设备配置',
     label: '设备配置',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
   },
   },
   {
   {
-    field: 'entityType',
+    field: 'deviceType',
     label: '设备类型',
     label: '设备类型',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
+    render: (_, data) => {
+      return data.deviceType == 'DIRECT_CONNECTION'
+        ? '直连设备'
+        : data.deviceType == 'GATEWAY'
+        ? '网关设备'
+        : '网关子设备';
     },
     },
   },
   },
   {
   {
-    field: 'orgName',
+    field: 'organizationName',
     label: '所属组织',
     label: '所属组织',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
   },
   },
   {
   {
     field: 'status',
     field: 'status',
     label: '状态',
     label: '状态',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
+    render: (_, data) => {
+      return data.status == 1 ? '在线' : '离线';
     },
     },
   },
   },
   {
   {
     field: 'createTime',
     field: 'createTime',
     label: '时间',
     label: '时间',
-    colProps: { span: 24 },
-    component: 'Input',
-    componentProps: {
-      disabled: true,
+  },
+];
+
+export const formDetailSchema: DescItem[] = [
+  {
+    field: 'deviceName',
+    label: '设备名称',
+  },
+  {
+    field: 'status',
+    label: '状态',
+    render: (_, data) => {
+      return data.status == 1 ? '在线' : '离线';
     },
     },
   },
   },
+  {
+    field: 'createTime',
+    label: '时间',
+  },
 ];
 ];
 
 
-export const mockList = [
-  {
-    deviceName: '网关/直连设备',
-    id: '2d2321s122131',
-    deviceConfig: '车车网关设备配置',
-    entityType: '网关',
-    orgName: 'cheche',
-    status: 'SUCCESS',
-    createTime: '2022-12-22 16:25:36',
-  },
-  {
-    deviceName: '网关/直连设备',
-    id: '2d22321s12131',
-    deviceConfig: '车车网关设备配置',
-    entityType: '网关',
-    orgName: 'cheche',
-    status: 'SUCCESS',
-    createTime: '2022-12-22 16:25:36',
-  },
-  {
-    deviceName: '网关/直连设备',
-    id: '2d232d1s12131',
-    deviceConfig: '车车网关设备配置',
-    entityType: '网关',
-    orgName: 'cheche',
-    status: 'SUCCESS',
-    createTime: '2022-12-22 16:25:36',
-  },
-  {
-    deviceName: '网关/直连设备',
-    id: '2d2321fs12131',
-    deviceConfig: '车车网关设备配置',
-    entityType: '网关',
-    orgName: 'cheche',
-    status: 'SUCCESS',
-    createTime: '2022-12-22 16:25:36',
-  },
-  {
-    deviceName: '网关/直连设备',
-    id: '2d2321ggs12131',
-    deviceConfig: '车车网关设备配置',
-    entityType: '网关',
-    orgName: 'cheche',
-    status: 'SUCCESS',
-    createTime: '2022-12-22 16:25:36',
-  },
-  {
-    deviceName: '网关/直连设备',
-    id: '2d2321hhs12131',
-    deviceConfig: '车车网关设备配置',
-    entityType: '网关',
-    orgName: 'cheche',
-    status: 'FATURE',
-    createTime: '2022-12-22 16:25:36',
+//处理表单
+export const formHandleSchema: FormSchema[] = [
+  // {
+  //   field: 'deviceName',
+  //   label: '设备名称',
+  //   component: 'Input',
+  //   componentProps: {
+  //     disabled: true,
+  //   },
+  // },
+  // {
+  //   field: 'status',
+  //   label: '状态',
+  //   component: 'Input',
+  //   componentProps: {
+  //     disabled: true,
+  //   },
+  // },
+  // {
+  //   field: 'createTime',
+  //   label: '时间',
+  //   colProps: { span: 24 },
+  //   component: 'Input',
+  //   componentProps: {
+  //     disabled: true,
+  //   },
+  // },
+  {
+    field: 'description',
+    label: '备注',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {},
   },
   },
 ];
 ];

@@ -2,7 +2,7 @@
   <div>
   <div>
     <BasicTable :clickToRowSelect="false" @register="registerTable">
     <BasicTable :clickToRowSelect="false" @register="registerTable">
       <template #toolbar>
       <template #toolbar>
-        <Authority value="api:yt:onlinerecord:delete">
+        <Authority value="api:yt:device:state:log::delete">
           <Popconfirm
           <Popconfirm
             title="您确定要批量删除数据"
             title="您确定要批量删除数据"
             ok-text="确定"
             ok-text="确定"
@@ -17,14 +17,20 @@
         <TableAction
         <TableAction
           :actions="[
           :actions="[
             {
             {
+              label: '处理',
+              auth: 'api:yt:device:state:log::post',
+              icon: 'clarity:note-edit-line',
+              onClick: handleView.bind(null, record),
+            },
+            {
               label: '详情',
               label: '详情',
-              auth: 'api:yt:onlinerecord:get',
+              auth: 'api:yt:device:state:log::detail',
               icon: 'clarity:note-edit-line',
               icon: 'clarity:note-edit-line',
               onClick: handleViewDetail.bind(null, record),
               onClick: handleViewDetail.bind(null, record),
             },
             },
             {
             {
               label: '删除',
               label: '删除',
-              auth: 'api:yt:onlinerecord:delete',
+              auth: 'api:yt:device:state:log::delete',
               icon: 'ant-design:delete-outlined',
               icon: 'ant-design:delete-outlined',
               color: 'error',
               color: 'error',
               popConfirm: {
               popConfirm: {
@@ -37,6 +43,7 @@
       </template>
       </template>
     </BasicTable>
     </BasicTable>
     <OnlineRecordDrawer @register="registerDrawer" @success="handleSuccess" />
     <OnlineRecordDrawer @register="registerDrawer" @success="handleSuccess" />
+    <OnlineHandleDrawer @register="registerHandleDrawer" @success="handleHandleSuccess" />
   </div>
   </div>
 </template>
 </template>
 
 
@@ -45,17 +52,16 @@
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useDrawer } from '/@/components/Drawer';
   import { useDrawer } from '/@/components/Drawer';
   import OnlineRecordDrawer from './OnlineRecordDrawer.vue';
   import OnlineRecordDrawer from './OnlineRecordDrawer.vue';
-  // import { getExceptionPage } from '/@/api/log/logManager';
-  import { searchFormSchema, columns, mockList } from './config.data';
+  import OnlineHandleDrawer from './OnlineHandleDrawer.vue';
+  import { deviceStateLogPage, deleteStateLogDevice } from '/@/api/device/deviceManager';
+  import { searchFormSchema, columns } from './config.data';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { deleteConvertApi } from '/@/api/datamanager/dataManagerApi';
   import { Popconfirm } from 'ant-design-vue';
   import { Popconfirm } from 'ant-design-vue';
   import { Authority } from '/@/components/Authority';
   import { Authority } from '/@/components/Authority';
 
 
   const [registerTable, { setProps, reload }] = useTable({
   const [registerTable, { setProps, reload }] = useTable({
     title: '上下线记录',
     title: '上下线记录',
-    dataSource: mockList,
-    // api: getExceptionPage,
+    api: deviceStateLogPage,
     columns,
     columns,
     showIndexColumn: false,
     showIndexColumn: false,
     clickToRowSelect: false,
     clickToRowSelect: false,
@@ -76,12 +82,19 @@
       fixed: 'right',
       fixed: 'right',
     },
     },
   });
   });
+
   const handleSuccess = () => {
   const handleSuccess = () => {
     reload();
     reload();
     resetSelectedRowKeys();
     resetSelectedRowKeys();
   };
   };
+
+  const handleHandleSuccess = () => {
+    reload();
+    resetSelectedRowKeys();
+  };
+
   const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
   const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
-    useBatchDelete(deleteConvertApi, handleSuccess, setProps);
+    useBatchDelete(deleteStateLogDevice, handleSuccess, setProps);
 
 
   nextTick(() => {
   nextTick(() => {
     setProps(selectionOptions);
     setProps(selectionOptions);
@@ -90,10 +103,18 @@
   // 弹框
   // 弹框
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerDrawer, { openDrawer }] = useDrawer();
 
 
+  const [registerHandleDrawer, { openDrawer: openHandleDrawer }] = useDrawer();
+
   const handleViewDetail = (record) => {
   const handleViewDetail = (record) => {
     openDrawer(true, {
     openDrawer(true, {
       isUpdate: true,
       isUpdate: true,
       record,
       record,
     });
     });
   };
   };
+  const handleView = (record) => {
+    openHandleDrawer(true, {
+      isUpdate: true,
+      record,
+    });
+  };
 </script>
 </script>

@@ -31,16 +31,6 @@
               ]"
               ]"
             />
             />
           </template>
           </template>
-          <template #status="{ record }">
-            <Switch
-              :disabled="disabled"
-              :checked="record.status === 1"
-              :loading="record.pendingStatus"
-              checkedChildren="启用"
-              unCheckedChildren="禁用"
-              @change="(checked:boolean)=>statusChange(checked,record)"
-            />
-          </template>
         </BasicTable>
         </BasicTable>
         <ItemDrawer @register="registerDrawer" @success="handleSuccess" />
         <ItemDrawer @register="registerDrawer" @success="handleSuccess" />
       </div>
       </div>
@@ -51,17 +41,15 @@
   import { defineComponent, ref } from 'vue';
   import { defineComponent, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { sysDictItemPage, deleteDictItem } from '/@/api/system/dict';
   import { sysDictItemPage, deleteDictItem } from '/@/api/system/dict';
-  import { Switch } from 'ant-design-vue';
   import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
   import ItemDrawer from '/@/views/system/dict/item/ItemDrawer.vue';
   import ItemDrawer from '/@/views/system/dict/item/ItemDrawer.vue';
   import { columns, searchFormSchema } from './dict.item.data';
   import { columns, searchFormSchema } from './dict.item.data';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
   import Authority from '/@/components/Authority/src/Authority.vue';
   import Authority from '/@/components/Authority/src/Authority.vue';
-  import { setDictItemStatus } from '/@/api/system/dict';
 
 
   export default defineComponent({
   export default defineComponent({
     name: 'ItemIndex',
     name: 'ItemIndex',
-    components: { BasicDrawer, BasicTable, ItemDrawer, TableAction, Authority, Switch },
+    components: { BasicDrawer, BasicTable, ItemDrawer, TableAction, Authority },
     setup() {
     setup() {
       let dictId;
       let dictId;
       const disabled = ref(false);
       const disabled = ref(false);
@@ -81,7 +69,7 @@
 
 
         reload();
         reload();
       });
       });
-      const [registerTable, { reload, setSelectedRowKeys, setProps }] = useTable({
+      const [registerTable, { reload }] = useTable({
         title: '字典值列表',
         title: '字典值列表',
         api: sysDictItemPage,
         api: sysDictItemPage,
         columns,
         columns,
@@ -137,27 +125,6 @@
       function handleSuccess() {
       function handleSuccess() {
         reload();
         reload();
       }
       }
-      const statusChange = async (checked, record) => {
-        setProps({
-          loading: true,
-        });
-        setSelectedRowKeys([]);
-        const newStatus = checked ? 1 : 0;
-        const { createMessage } = useMessage();
-        try {
-          await setDictItemStatus(record.id, newStatus);
-          if (newStatus) {
-            createMessage.success(`启用成功`);
-          } else {
-            createMessage.success('禁用成功');
-          }
-        } finally {
-          setProps({
-            loading: false,
-          });
-          reload();
-        }
-      };
       return {
       return {
         register,
         register,
         registerTable,
         registerTable,
@@ -166,7 +133,6 @@
         handleEdit,
         handleEdit,
         handleDelete,
         handleDelete,
         handleSuccess,
         handleSuccess,
-        statusChange,
         disabled,
         disabled,
       };
       };
     },
     },

+import { Switch } from 'ant-design-vue';
 import { BasicColumn } from '/@/components/Table';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { setDictItemStatus } from '/@/api/system/dict';
+import { h } from 'vue';
 
 
 export const columns: BasicColumn[] = [
 export const columns: BasicColumn[] = [
   {
   {
@@ -21,8 +25,32 @@ export const columns: BasicColumn[] = [
     title: '状态',
     title: '状态',
     dataIndex: 'status',
     dataIndex: 'status',
     width: 100,
     width: 100,
-    slots: { customRender: 'status' },
+    customRender: ({ record }) => {
+      if (!Reflect.has(record, 'pendingStatus')) {
+        record.pendingStatus = false;
+      }
+      return h(Switch, {
+        checked: record.status === 1,
+        checkedChildren: '已启用',
+        unCheckedChildren: '已禁用',
+        loading: record.pendingStatus,
+        onChange(checked: boolean) {
+          record.pendingStatus = true;
+          const newStatus = checked ? 1 : 0;
+          const { createMessage } = useMessage();
+          setDictItemStatus(record.id, newStatus)
+            .then(() => {
+              record.status = newStatus;
+              createMessage.success(`修改成功`);
+            })
+            .finally(() => {
+              record.pendingStatus = false;
+            });
+        },
+      });
+    },
   },
   },
+
   {
   {
     title: '排序',
     title: '排序',
     dataIndex: 'sort',
     dataIndex: 'sort',