소스 검색

feat(views): 初步完成“设备列表”页面各步骤基本功能

wangshun 3 달 전
부모
커밋
0da3a95524
1개의 변경된 파일31개의 추가작업 그리고 16개의 파일을 삭제
  1. 31 16
      src/views/device-list/DeviceList.vue

+ 31 - 16
src/views/device-list/DeviceList.vue

@@ -20,8 +20,8 @@ const devicesColumns = [
   },
   {
     title: '设备类别',
-    dataIndex: 'deviceType',
-    key: 'deviceType',
+    dataIndex: 'deviceTypeName',
+    key: 'deviceTypeName',
   },
   {
     title: '运行状态',
@@ -40,13 +40,13 @@ const devicesColumns = [
   },
   {
     title: '品牌',
-    dataIndex: 'brand',
-    key: 'brand',
+    dataIndex: 'brandName',
+    key: 'brandName',
   },
   {
     title: '型号',
-    dataIndex: 'model',
-    key: 'model',
+    dataIndex: 'modelName',
+    key: 'modelName',
   },
   {
     title: '网关序列号',
@@ -67,8 +67,8 @@ const devicePageParam = ref<DevicesList>({
   groupId: undefined,
   deviceType: undefined,
   searchContent: undefined,
-  brand: undefined,
-  model: undefined,
+  brandName: undefined,
+  modelName: undefined,
   gatewaySnCode: undefined,
   deviceName: undefined,
 });
@@ -81,13 +81,25 @@ let equipmentType: EquipmentTypeItem[] = [];
 const { handleRequest } = useRequest();
 const postDeviceDeletion = () => {
   handleRequest(async () => {
-    await deviceDeletion(2);
+    await deviceDeletion(devicesKeys.value as number[]);
+    addQueryDevicesList();
   });
 };
 
+const addQueryDevicesList = () => {
+  devicePageParam.value.pageIndex = 1;
+  postQueryDevicesList();
+};
+
 const postQueryDevicesList = () => {
   handleRequest(async () => {
-    devicePageParam.value.groupId = groupIdKeys.value[1] ? groupIdKeys.value[1] : groupIdKeys.value[0];
+    console.log(groupIdKeys.value);
+    if (groupIdKeys.value) {
+      devicePageParam.value.groupId = groupIdKeys.value[1] ? groupIdKeys.value[1] : groupIdKeys.value[0];
+    } else {
+      devicePageParam.value.groupId = undefined;
+    }
+
     const { records, total } = await queryDevicesList(devicePageParam.value);
     devicesList.value = records;
     devicesTotal.value = total;
@@ -95,6 +107,8 @@ const postQueryDevicesList = () => {
 };
 
 const devicesChange = (selectedRowKeys: Key[], selectedRows: DevicesListItem[]) => {
+  devicesKeys.value = selectedRowKeys;
+
   console.log(selectedRowKeys, selectedRows);
 };
 
@@ -108,19 +122,20 @@ onMounted(() => {
     equipmentType = await groupList({
       dataType: 1,
     });
+    addQueryDevicesList();
   });
 });
 </script>
 
 <template>
-  <div style="padding: 50px">
+  <div>
     <div>设备列表</div>
     <br />
     <br />
+    <AButton type="primary" @click="addQueryDevicesList">查询</AButton>
     <AButton type="primary" @click="postDeviceDeletion">删除设备</AButton>
     <br />
     <br />
-    <AButton type="primary" @click="postQueryDevicesList">获取设备列表</AButton>
 
     <ATable
       :row-selection="{
@@ -156,13 +171,13 @@ onMounted(() => {
             :field-names="{ label: 'dataName', value: 'id' }"
           />
         </template>
-        <template v-if="column.key === 'brand'">
+        <template v-if="column.key === 'brandName'">
           <div>{{ column.title }}</div>
-          <AInput style="width: 100px" v-model:value="devicePageParam.brand" />
+          <AInput style="width: 100px" v-model:value="devicePageParam.brandName" />
         </template>
-        <template v-if="column.key === 'model'">
+        <template v-if="column.key === 'modelName'">
           <div>{{ column.title }}</div>
-          <AInput style="width: 100px" v-model:value="devicePageParam.model" />
+          <AInput style="width: 100px" v-model:value="devicePageParam.modelName" />
         </template>
         <template v-if="column.key === 'snCode'">
           <div>{{ column.title }}</div>