feat(views): 更新“设备列表”页面

src/views/device-list/DeviceList.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { useRequest } from '@/hooks/request';
+import { deviceDeletion, getPageList, groupList, queryDevicesList } from '@/api';
+
+import type { Key } from 'ant-design-vue/es/table/interface';
+import type { DeviceGroupItem, DevicesList, DevicesListItem, EquipmentTypeItem } from '@/types';
+
+const devicesColumns = [
+  {
+    title: '设备名称',
+    dataIndex: 'deviceName',
+    key: 'deviceName',
+  },
+  {
+    title: '设备组',
+    dataIndex: 'groupName',
+    key: 'groupName',
+  },
+  {
+    title: '设备类别',
+    dataIndex: 'deviceType',
+    key: 'deviceType',
+  },
+  {
+    title: '运行状态',
+    dataIndex: 'operatingStatus',
+    key: 'operatingStatus',
+  },
+  {
+    title: '故障状态',
+    dataIndex: 'faultState',
+    key: 'faultState',
+  },
+  {
+    title: '智控状态',
+    dataIndex: 'intelligentStatus',
+    key: 'intelligentStatus',
+  },
+  {
+    title: '品牌',
+    dataIndex: 'brand',
+    key: 'brand',
+  },
+  {
+    title: '型号',
+    dataIndex: 'model',
+    key: 'model',
+  },
+  {
+    title: '网关序列号',
+    dataIndex: 'snCode',
+    key: 'snCode',
+  },
+];
+
+const devicesList = ref<DevicesListItem[]>([]);
+
+const devicesKeys = ref<Key[]>([]);
+
+const devicesTotal = ref<number>();
+
+const devicePageParam = ref<DevicesList>({
+  pageIndex: 1,
+  pageSize: 10,
+  groupId: undefined,
+  deviceType: undefined,
+  searchContent: undefined,
+  brand: undefined,
+  model: undefined,
+  gatewaySnCode: undefined,
+  deviceName: undefined,
+});
+
+const groupIdKeys = ref<number[]>([]);
+
+let deviceGroup: DeviceGroupItem[] = [];
+let equipmentType: EquipmentTypeItem[] = [];
+
+const { handleRequest } = useRequest();
+const postDeviceDeletion = () => {
+  handleRequest(async () => {
+    await deviceDeletion(2);
+  });
+};
+
+const postQueryDevicesList = () => {
+  handleRequest(async () => {
+    devicePageParam.value.groupId = groupIdKeys.value[1] ? groupIdKeys.value[1] : groupIdKeys.value[0];
+    const { records, total } = await queryDevicesList(devicePageParam.value);
+    devicesList.value = records;
+    devicesTotal.value = total;
+  });
+};
+
+const devicesChange = (selectedRowKeys: Key[], selectedRows: DevicesListItem[]) => {
+  console.log(selectedRowKeys, selectedRows);
+};
+
+const switchPages = () => {
+  postQueryDevicesList();
+};
+onMounted(() => {
+  handleRequest(async () => {
+    deviceGroup = await getPageList();
+
+    equipmentType = await groupList({
+      dataType: 1,
+    });
+  });
+});
+</script>
+
+<template>
+  <div style="padding: 50px">
+    <div>设备列表</div>
+    <br />
+    <br />
+    <AButton type="primary" @click="postDeviceDeletion">删除设备</AButton>
+    <br />
+    <br />
+    <AButton type="primary" @click="postQueryDevicesList">获取设备列表</AButton>
+
+    <ATable
+      :row-selection="{
+        type: 'checkbox',
+        selectedRowKeys: devicesKeys,
+        onChange: devicesChange,
+      }"
+      row-key="id"
+      :columns="devicesColumns"
+      :data-source="devicesList"
+      :pagination="false"
+    >
+      <template #headerCell="{ column }">
+        <template v-if="column.key === 'deviceName'">
+          <div>{{ column.title }}</div>
+          <AInput style="width: 100px" v-model:value="devicePageParam.deviceName" />
+        </template>
+        <template v-else-if="column.key === 'groupName'">
+          <div>{{ column.title }}</div>
+          <ACascader
+            v-model:value="groupIdKeys"
+            :field-names="{ label: 'groupName', value: 'id', children: 'deviceGroupChilds' }"
+            :options="deviceGroup"
+            change-on-select
+          />
+        </template>
+        <template v-else-if="column.key === 'deviceType'">
+          <div>{{ column.title }}</div>
+          <ASelect
+            style="width: 120px"
+            v-model:value="devicePageParam.deviceType"
+            :options="equipmentType"
+            :field-names="{ label: 'dataName', value: 'id' }"
+          />
+        </template>
+        <template v-if="column.key === 'brand'">
+          <div>{{ column.title }}</div>
+          <AInput style="width: 100px" v-model:value="devicePageParam.brand" />
+        </template>
+        <template v-if="column.key === 'model'">
+          <div>{{ column.title }}</div>
+          <AInput style="width: 100px" v-model:value="devicePageParam.model" />
+        </template>
+        <template v-if="column.key === 'snCode'">
+          <div>{{ column.title }}</div>
+          <AInput style="width: 100px" v-model:value="devicePageParam.gatewaySnCode" />
+        </template>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'snCode'">
+          {{ record.gatewayInfos ? record.gatewayInfos[0].snCode : '' }}
+        </template>
+      </template>
+    </ATable>
+    <br />
+    <br />
+    <APagination
+      v-model:current="devicePageParam.pageIndex"
+      v-model:page-size="devicePageParam.pageSize"
+      :total="devicesTotal"
+      :show-size-changer="true"
+      @change="switchPages"
+    />
+  </div>
+</template>