Merge branch 'sqy_dev' into 'main'

feat:[DEFECT-343]:新增设备列表的SN编码 See merge request huang/yun-teng-iot-front!198

Merge branch 'sqy_dev' into 'main'
feat:[DEFECT-343]:新增设备列表的SN编码 See merge request huang/yun-teng-iot-front!198
xp.Huang
2 parents afc65fd8 2e18f1e1
Showing 6 changed files with 107 additions and 57 deletions
src/api/device/deviceManager.ts
src/hooks/web/useBatchDelete.ts
src/views/device/list/config/data.ts
src/views/device/list/config/device.data.ts
src/views/device/list/cpns/step/DeviceStep1.vue
src/views/device/list/index.vue
--- a/src/api/device/deviceManager.ts
View file @b11b1e0
+++ b/src/api/device/deviceManager.ts
View file @b11b1e0
@@ -194,3 +194,9 @@ export const getChildDevicePage = (params: ChildDeviceParams) => {
     params,
   });
 };
+
+export const generateSNCode = () => {
+  return defHttp.get({
+    url: '/device/sn',
+  });
+};
--- a/src/hooks/web/useBatchDelete.ts
View file @b11b1e0
+++ b/src/hooks/web/useBatchDelete.ts
View file @b11b1e0
@@ -17,6 +17,7 @@ interface selectionOptions {
   clickToRowSelect: boolean;
   rowSelection: {
     onSelect: (_, __, selectedRowKeys: string[]) => void;
+    onSelectAll: (_, selectedRows: string[], __) => void;
     type: 'radio' | 'checkbox';
   };
 }
@@ -32,6 +33,13 @@ export const useBatchDelete = (
     const selectedRowKeys = selectedRows.map((item) => item.id);
     selectedRowIds.value = selectedRowKeys;
   };
+
+  // 全选按钮
+  const onSelectAll = (_, selectedRows, __) => {
+    console.log(selectedRows);
+    const selectedRowKeys = selectedRows.map((item) => item.id);
+    selectedRowIds.value = selectedRowKeys;
+  };
   const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
     if (record) {
       try {
@@ -59,6 +67,7 @@ export const useBatchDelete = (
     clickToRowSelect: false,
     rowSelection: {
       onSelect,
+      onSelectAll,
       type: 'checkbox',
     },
   };
--- a/src/views/device/list/config/data.ts
View file @b11b1e0
+++ b/src/views/device/list/config/data.ts
View file @b11b1e0
@@ -23,6 +23,13 @@ export const step1Schemas: FormSchema[] = [
     },
   },
   {
+    field: 'sn',
+    label: 'SN码',
+    component: 'Input',
+    required: true,
+    slot: 'snCode',
+  },
+  {
     field: 'deviceType',
     label: '设备类型',
     required: true,
--- a/src/views/device/list/config/device.data.ts
View file @b11b1e0
+++ b/src/views/device/list/config/device.data.ts
View file @b11b1e0
@@ -12,9 +12,11 @@ export const columns: BasicColumn[] = [
     slots: { customRender: 'img' },
   },
   {
-    title: '设备名称',
     dataIndex: 'name',
-    width: 120,
+    width: 200,
+    align: 'left',
+    slots: { customRender: 'name', title: 'deviceTitle' },
+    ellipsis: true,
   },
   {
     title: '设备类型',
--- a/src/views/device/list/cpns/step/DeviceStep1.vue
View file @b11b1e0
+++ b/src/views/device/list/cpns/step/DeviceStep1.vue
View file @b11b1e0
@@ -18,6 +18,12 @@
             </div>
           </Upload>
         </template>
+        <template #snCode="{ model, field }">
+          <div class="flex">
+            <Input v-model:value="model[field]" />
+            <a-button type="link" @click="generateSN">自动生成</a-button>
+          </div>
+        </template>
         <template #deviceAddress>
           <Input disabled v-model:value="positionState.address">
             <template #addonAfter>
@@ -83,7 +89,7 @@
   import { upload } from '/@/api/oss/ossFileUploader';
   import { FileItem } from '/@/components/Upload/src/typing';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
-
+  import { generateSNCode } from '/@/api/device/deviceManager.ts';
   import icon from '/@/assets/images/wz.png';
   import { useDebounceFn } from '@vueuse/core';
   export default defineComponent({
@@ -281,6 +287,14 @@
         positionState.map.panTo(option.point); //将地图的中心点更改为选定坐标点
       }
+      const generateSN = async () => {
+        const data = await generateSNCode();
+        console.log(data);
+        setFieldsValue({
+          sn: data,
+        });
+      };
+
       // 确定选择的位置
       const handleOk = () => {
         visible.value = false;
@@ -331,6 +345,7 @@
           },
         });
       }
+
       return {
         resetFields,
         positionState,
@@ -355,6 +370,7 @@
         handleSelect,
         dataSource,
         debounceSearch,
+        generateSN,
       };
     },
   });
--- a/src/views/device/list/index.vue
View file @b11b1e0
+++ b/src/views/device/list/index.vue
View file @b11b1e0
@@ -6,20 +6,14 @@
         @select="handleSelect"
         ref="organizationIdTreeRef"
       />
-      <BasicTable
-        @selection-change="useSelectionChange"
-        :rowSelection="{ type: 'checkbox' }"
-        @register="registerTable"
-        class="w-5/6 xl:w-4/5"
-        :clickToRowSelect="false"
-      >
+      <BasicTable @register="registerTable" class="w-5/6 xl:w-4/5">
         <template #toolbar>
           <a-button type="primary" @click="handleCreate" v-if="authBtn(role)"> 新增设备 </a-button>
           <a-button
             color="error"
             v-if="authBtn(role)"
             @click="handleDeleteOrBatchDelete(null)"
-            :disabled="disabled"
+            :disabled="hasBatchDelete"
           >
             批量删除
           </a-button>
@@ -38,6 +32,31 @@
             "
           />
         </template>
+        <template #deviceTitle>
+          <div>
+            <span> 设备名称/设备SN</span>
+            <Popover title="帮助" placement="right">
+              <QuestionCircleOutlined class="ml-2" />
+              <template #content>
+                <ul>
+                  <li>1.设备的SN码,为平台的唯一编码,对通过Modbus协议上报数据的设备,</li>
+                  <li>&nbsp;&nbsp;&nbsp;平台将通过设备SN进行鉴定.</li>
+                  <li>2.为了方便使用，设备SN可以点击复制.</li>
+                </ul>
+              </template>
+            </Popover>
+          </div>
+        </template>
+        <template #name="{ record }">
+          <div>
+            {{ record.name }}
+          </div>
+          <Tooltip title="设备SN码" placement="topRight">
+            <a-button type="link" @click="copySN(record.sn)" style="padding: 0">
+              {{ record.sn }}
+            </a-button>
+          </Tooltip>
+        </template>
         <template #deviceProfile="{ record }">
           <a-button type="link" class="ml-2" @click="goDeviceProfile(record.deviceProfile.name)">
             {{ record.deviceProfile.name }}
@@ -122,16 +141,16 @@
       </BasicTable>
       <DeviceDetailDrawer @register="registerDetailDrawer" />
       <DeviceModal @register="registerModal" @success="handleSuccess" @reload="handleSuccess" />
-      <CustomerModal @register="registerCustomerModal" @reload="handleSuccess" />
+      <CustomerModal @register="registerCustomerModal" @reload="handleReload" />
     </PageWrapper>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, ref } from 'vue';
+  import { defineComponent, reactive, unref } from 'vue';
   import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
   import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
   import { columns, searchFormSchema } from './config/device.data';
-  import { Tag } from 'ant-design-vue';
+  import { Tag, Tooltip, Popover } from 'ant-design-vue';
   import {
     deleteDevice,
     devicePage,
@@ -151,7 +170,9 @@
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
   import { authBtn } from '/@/enums/roleEnum';
-
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
   export default defineComponent({
     name: 'DeviceManagement',
     components: {
@@ -164,18 +185,30 @@
       DeviceDetailDrawer,
       CustomerModal,
       TableImg,
+      Tooltip,
+      QuestionCircleOutlined,
+      Popover,
     },
     setup(_) {
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+        useBatchDelete(deleteDevice, handleSuccess);
+      selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+        // Demo:status为1的选择框禁用
+        if (record.customerId) {
+          return { disabled: true };
+        } else {
+          return { disabled: false };
+        }
+      };
+
       const { createMessage } = useMessage();
-      let selectedRowKeys: any = [];
-      const disabled = ref(true);
       const go = useGo();
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
       const [registerModal, { openModal }] = useModal();
       const [registerCustomerModal, { openModal: openCustomerModal }] = useModal();
       const [registerDetailDrawer, { openDrawer }] = useDrawer();
-      const [registerTable, { reload, getSelectRows, getSelectRowKeys }] = useTable({
+      const [registerTable, { reload, setSelectedRowKeys }] = useTable({
         title: '设备列表',
         api: devicePage,
         columns,
@@ -190,12 +223,14 @@
         showIndexColumn: false,
         rowKey: 'id',
         searchInfo: searchInfo,
+        clickToRowSelect: false,
         actionColumn: {
           width: 300,
           title: '操作',
           slots: { customRender: 'action' },
           fixed: 'right',
         },
+        ...selectionOptions,
       });
       const userInfo: any = getAuthCache(USER_INFO_KEY);
@@ -210,10 +245,15 @@
       function handleDispatchCustomer(record: Recordable) {
         openCustomerModal(true, record);
       }
+      function handleReload() {
+        setSelectedRowKeys([]);
+        resetSelectedRowKeys();
+        handleSuccess();
+      }
       // 取消分配客户
       async function handleCancelDispatchCustomer(record: Recordable) {
         await cancelDispatchCustomer(record);
-        handleSuccess();
+        handleReload();
       }
       function handleDetail(record: Recordable) {
@@ -244,42 +284,11 @@
       function goDeviceProfile(e) {
         go(PageEnum.DEVICE_PROFILE + '?name=' + String(e));
       }
-      const useSelectionChange = () => {
-        selectedRowKeys = getSelectRowKeys();
-        if (selectedRowKeys.length > 0) {
-          disabled.value = false;
-        }
-        const isJudge = getSelectRows().map((m) => {
-          return {
-            status: m.customerId,
-            id: m.id,
-          };
-        });
-        isJudge.some((s) => {
-          if (s.status != undefined) {
-            disabled.value = true;
-          }
-        });
-      };
-      // 删除或批量删除
-      const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
-        if (record) {
-          try {
-            await deleteDevice([record.id]);
-            createMessage.success('删除成功');
-            handleSuccess();
-          } catch (e: any) {}
-        } else {
-          try {
-            await deleteDevice(selectedRowKeys);
-            createMessage.success('批量删除成功');
-            handleSuccess();
-            selectedRowKeys.length = 0;
-          } catch (e: any) {
-            selectedRowKeys.length = 0;
-          } finally {
-            selectedRowKeys.length = 0;
-          }
+      const { clipboardRef } = useCopyToClipboard();
+      const copySN = (snCode: string) => {
+        clipboardRef.value = snCode;
+        if (unref(clipboardRef)) {
+          createMessage.success('复制成功~');
         }
       };
@@ -302,9 +311,10 @@
         registerCustomerModal,
         authBtn,
         role,
+        copySN,
+        hasBatchDelete,
         handleDeleteOrBatchDelete,
-        disabled,
-        useSelectionChange,
+        handleReload,
       };
     },
   });