feat:产品详情新增点击跳转到设备列表

fengtao
1 parent 328d7d65
Showing 6 changed files with 139 additions and 30 deletions
src/api/device/model/deviceModel.ts
src/enums/pageEnum.ts
src/views/device/list/config/device.data.ts
src/views/device/list/index.vue
src/views/device/profiles/DeviceProfileDrawer.vue
src/views/device/profiles/components/ProductDescription.vue
--- a/src/api/device/model/deviceModel.ts
View file @3f242e9
+++ b/src/api/device/model/deviceModel.ts
View file @3f242e9
@@ -155,6 +155,7 @@ export interface DeviceRecord {
   transportType: string;
   provisionType: string;
   deviceType: string;
+  deviceCount: number;
   tbProfileId: string;
   profileData: ProfileData;
   defaultQueueName: string;
--- a/src/enums/pageEnum.ts
View file @3f242e9
+++ b/src/enums/pageEnum.ts
View file @3f242e9
@@ -13,4 +13,5 @@ export const PageEnum = {
   MESSAGE_CONFIG: '/message/config',
   //设备配置
   DEVICE_PROFILE: '/product/profiles',
+  DEVICE_LIST: '/device/list',
 };
--- a/src/views/device/list/config/device.data.ts
View file @3f242e9
+++ b/src/views/device/list/config/device.data.ts
View file @3f242e9
@@ -2,6 +2,7 @@ import { formatToDate } from '/@/utils/dateUtil';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { DeviceTypeEnum, DeviceState } from '/@/api/device/model/deviceModel';
+import { deviceProfile } from '/@/api/device/deviceManager';
 // 表格列数据
 export const columns: BasicColumn[] = [
@@ -105,4 +106,39 @@ export const searchFormSchema: FormSchema[] = [
     },
     colProps: { span: 6 },
   },
+  {
+    field: 'deviceProfileId',
+    label: '产品',
+    component: 'ApiSearchSelect',
+    colProps: { span: 6 },
+    componentProps: () => {
+      return {
+        showSearch: true,
+        labelField: 'name',
+        valueField: 'id',
+        resultField: 'data',
+        placeholder: '请选择产品',
+        api: async () => {
+          const data = await deviceProfile({ params: '' });
+          const returnData = data.map((m) => {
+            return {
+              name: m.name,
+              id: m.id,
+            };
+          });
+          return returnData;
+        },
+        searchApi: async (params: Recordable) => {
+          const data = await deviceProfile({ textSearch: params.text });
+          const returnData = data.map((m) => {
+            return {
+              name: m.name,
+              id: m.id,
+            };
+          });
+          return returnData;
+        },
+      };
+    },
+  },
 ];
--- a/src/views/device/list/index.vue
View file @3f242e9
+++ b/src/views/device/list/index.vue
View file @3f242e9
@@ -164,7 +164,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, unref, nextTick, h } from 'vue';
+  import { defineComponent, reactive, unref, nextTick, h, onUnmounted, ref } 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';
@@ -215,6 +215,7 @@
     setup(_) {
       const { createMessage } = useMessage();
       const go = useGo();
+      const immediateStatus = ref(false);
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
       const [registerModal, { openModal }] = useModal();
@@ -223,29 +224,31 @@
       const [registerTbDetailDrawer, { openDrawer: openTbDeviceDrawer }] = useDrawer();
       const [registerGatewayDetailDrawer, { openDrawer: openGatewayDetailDrawer }] = useDrawer();
-      const [registerTable, { reload, setSelectedRowKeys, setProps }] = useTable({
-        title: '设备列表',
-        api: devicePage,
-        columns,
-        formConfig: {
-          labelWidth: 100,
-          schemas: searchFormSchema,
-          resetFunc: resetFn,
-        },
-        useSearchForm: true,
-        showTableSetting: true,
-        bordered: true,
-        showIndexColumn: false,
-        rowKey: 'id',
-        searchInfo: searchInfo,
-        clickToRowSelect: false,
-        actionColumn: {
-          width: 200,
-          title: '操作',
-          slots: { customRender: 'action' },
-          fixed: 'right',
-        },
-      });
+      const [registerTable, { reload, setSelectedRowKeys, setProps, setTableData, getForm }] =
+        useTable({
+          title: '设备列表',
+          api: devicePage,
+          immediate: immediateStatus.value,
+          columns,
+          formConfig: {
+            labelWidth: 100,
+            schemas: searchFormSchema,
+            resetFunc: resetFn,
+          },
+          useSearchForm: true,
+          showTableSetting: true,
+          bordered: true,
+          showIndexColumn: false,
+          rowKey: 'id',
+          searchInfo: searchInfo,
+          clickToRowSelect: false,
+          actionColumn: {
+            width: 200,
+            title: '操作',
+            slots: { customRender: 'action' },
+            fixed: 'right',
+          },
+        });
       const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
         useBatchDelete(deleteDevice, handleSuccess, setProps);
       selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
@@ -260,6 +263,48 @@
         setProps(selectionOptions);
       });
+      function getParams(keyword) {
+        const reg = new RegExp('(^|&)' + keyword + '=([^&]*)(&|$)', 'i');
+        const r = window.location.search.substr(1).match(reg);
+        if (r != null) return unescape(r[2]);
+        return null; //注意此处参数是中文，解码使用的方法是unescape ，那么在传值的时候如果是中文，需要使用escape('曲浩')方法来编码。
+      }
+
+      const count = ref(0);
+      const onCloseVal = ref(0);
+      const deviceProfileId = ref('');
+      count.value = Number(getParams('count'));
+      deviceProfileId.value = getParams('deviceProfileId') || '';
+      const setRowClassName = async () => {
+        if (deviceProfileId.value !== '') {
+          const { items } = await devicePage({
+            page: 1,
+            pageSize: count.value === 0 ? 10 : count.value,
+            deviceProfileId: deviceProfileId.value,
+          });
+          nextTick(() => {
+            setTableData(items);
+            const { setFieldsValue, resetFields } = getForm();
+            setFieldsValue({
+              deviceProfileId: deviceProfileId.value,
+            });
+            if (onCloseVal.value == 1) {
+              resetFields();
+            }
+          });
+        } else {
+          setTimeout(() => {
+            reload();
+          }, 80);
+        }
+      };
+      setRowClassName();
+      onUnmounted(() => {
+        deviceProfileId.value = '';
+        count.value = 10;
+        onCloseVal.value = 1;
+      });
+
       const userInfo: any = getAuthCache(USER_INFO_KEY);
       const role: string = userInfo.roles[0];
--- a/src/views/device/profiles/DeviceProfileDrawer.vue
View file @3f242e9
+++ b/src/views/device/profiles/DeviceProfileDrawer.vue
View file @3f242e9
@@ -44,8 +44,8 @@
   const DevConStRef = ref<InstanceType<typeof ProductDescription>>();
   const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();
-  const setDeviceConfFormData = async () => {
-    unref(DevConStRef)?.renderProductInfo();
+  const setDeviceConfFormData = async (record) => {
+    unref(DevConStRef)?.renderProductInfo(record);
   };
   const setTransConfFormData = async (res: Recordable) => {
     await nextTick();
@@ -56,7 +56,7 @@
     activeKey.value = 'product';
     record.value = data.record;
     record.value = await deviceConfigGetDetail(data.record.id);
-    setDeviceConfFormData();
+    setDeviceConfFormData(record.value);
   });
   const handlePanelChange = (activeKey: ActiveKey) => {
--- a/src/views/device/profiles/components/ProductDescription.vue
View file @3f242e9
+++ b/src/views/device/profiles/components/ProductDescription.vue
View file @3f242e9
@@ -9,12 +9,16 @@
   import { Description, useDescription } from '/@/components/Description';
   import { to } from '/@/utils/to';
   import productDefaultImage from '/@/assets/icons/product-default.svg';
+  import { Button } from '/@/components/Button';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { PageEnum } from '/@/enums/pageEnum';
   const loading = ref(false);
   const props = defineProps<{
     record: DeviceRecord;
   }>();
+  const go = useGo();
   const data = ref<DeviceRecord>({} as unknown as DeviceRecord);
@@ -33,6 +37,26 @@
       {
         field: 'deviceType',
         label: '设备类型',
+        render: (_, data) => {
+          return h(
+            Button,
+            {
+              type: 'link',
+              style: { marginLeft: -8 + 'px' },
+              size: 'small',
+              onClick: () => {
+                go(
+                  PageEnum.DEVICE_LIST +
+                    '?count=' +
+                    data.deviceCount +
+                    '&deviceProfileId=' +
+                    data.id
+                );
+              },
+            },
+            () => `${data.deviceType}(${data.deviceCount})`
+          );
+        },
       },
       {
         field: 'name',
@@ -87,7 +111,7 @@
     return {};
   };
-  const renderProductInfo = async () => {
+  const renderProductInfo = async (record) => {
     try {
       data.value = {} as unknown as DeviceRecord;
       loading.value = true;
@@ -98,8 +122,10 @@
         findHandleQueue(defaultQueueName),
         findRuleChain(defaultRuleChainId),
       ]);
-      const value = values.reduce((prev, next) => ({ ...prev, ...next }), {});
-      data.value = Object.assign(unref(data), value);
+      if (values) {
+        const value = values.reduce((prev, next) => ({ ...prev, ...next }), {});
+        data.value = Object.assign(unref(data), value, { deviceCount: record.deviceCount });
+      }
       setDescProps({ data: unref(data) });
     } catch (error) {
       throw error;