|
@@ -28,7 +28,7 @@
|
|
|
<template #icon><PlusOutlined /></template>
|
|
<template #icon><PlusOutlined /></template>
|
|
|
<span>添加</span>
|
|
<span>添加</span>
|
|
|
</a-button>
|
|
</a-button>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<a-button
|
|
<a-button
|
|
|
type="primary"
|
|
type="primary"
|
|
|
style="margin-right: 10px; background: #0058ff"
|
|
style="margin-right: 10px; background: #0058ff"
|
|
@@ -79,6 +79,7 @@
|
|
|
:bordered="true"
|
|
:bordered="true"
|
|
|
:loading="loading"
|
|
:loading="loading"
|
|
|
size="middle"
|
|
size="middle"
|
|
|
|
|
+ @change="handleTableChange"
|
|
|
>
|
|
>
|
|
|
<a-table-column title="序号" :width="60" fixed="left" :align="'center'">
|
|
<a-table-column title="序号" :width="60" fixed="left" :align="'center'">
|
|
|
<template #default="{ index }">
|
|
<template #default="{ index }">
|
|
@@ -108,7 +109,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
</a-table-column>
|
|
</a-table-column>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<a-table-column
|
|
<a-table-column
|
|
|
title="所属产品"
|
|
title="所属产品"
|
|
|
data-index="productName"
|
|
data-index="productName"
|
|
@@ -159,7 +160,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
</a-table-column>
|
|
</a-table-column>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<a-table-column title="描述" data-index="description" :width="220">
|
|
<a-table-column title="描述" data-index="description" :width="220">
|
|
|
<template #default="{ record }">
|
|
<template #default="{ record }">
|
|
|
<div v-if="record.description">
|
|
<div v-if="record.description">
|
|
@@ -173,6 +174,7 @@
|
|
|
<a-table-column
|
|
<a-table-column
|
|
|
title="最近上传时间"
|
|
title="最近上传时间"
|
|
|
data-index="modifytime"
|
|
data-index="modifytime"
|
|
|
|
|
+ :sorter="true"
|
|
|
:width="200"
|
|
:width="200"
|
|
|
></a-table-column>
|
|
></a-table-column>
|
|
|
<a-table-column
|
|
<a-table-column
|
|
@@ -221,6 +223,7 @@
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { ref, reactive, onMounted } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
import { useRouter } from "vue-router";
|
|
|
|
|
+import type { TableProps } from "ant-design-vue";
|
|
|
import { PaginationProps, message } from "ant-design-vue";
|
|
import { PaginationProps, message } from "ant-design-vue";
|
|
|
import {
|
|
import {
|
|
|
PlusOutlined,
|
|
PlusOutlined,
|
|
@@ -234,10 +237,11 @@ import { CusNavigation } from "@/components";
|
|
|
import { post } from "@/network/axios";
|
|
import { post } from "@/network/axios";
|
|
|
import { SearchDeviceParams, DeviceEntity, DeleteParams } from "@/api/model";
|
|
import { SearchDeviceParams, DeviceEntity, DeleteParams } from "@/api/model";
|
|
|
import { home } from "@/utils";
|
|
import { home } from "@/utils";
|
|
|
-import * as XLSX from 'xlsx';
|
|
|
|
|
|
|
+import * as XLSX from "xlsx";
|
|
|
// 表格视图
|
|
// 表格视图
|
|
|
const table_container: any = ref(null);
|
|
const table_container: any = ref(null);
|
|
|
const scroll = reactive<any>({ x: 1600 });
|
|
const scroll = reactive<any>({ x: 1600 });
|
|
|
|
|
+const sorters = ref({} as any);
|
|
|
// 分页
|
|
// 分页
|
|
|
const pagination = reactive<PaginationProps>({
|
|
const pagination = reactive<PaginationProps>({
|
|
|
pageSize: 20,
|
|
pageSize: 20,
|
|
@@ -251,12 +255,12 @@ const pagination = reactive<PaginationProps>({
|
|
|
// showTotal: function(total, range){
|
|
// showTotal: function(total, range){
|
|
|
// return `共 ${total} 条数据,当前为${range[0]}—${range[1]}条数据`
|
|
// return `共 ${total} 条数据,当前为${range[0]}—${range[1]}条数据`
|
|
|
// },
|
|
// },
|
|
|
- onChange: function (a, b) {
|
|
|
|
|
- console.log("111", a, b);
|
|
|
|
|
- this.current = a;
|
|
|
|
|
- this.pageSize = b;
|
|
|
|
|
- refreshList();
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ // onChange: function (a, b) {
|
|
|
|
|
+ // console.log("111", a, b);
|
|
|
|
|
+ // this.current = a;
|
|
|
|
|
+ // this.pageSize = b;
|
|
|
|
|
+ // refreshList();
|
|
|
|
|
+ // },
|
|
|
});
|
|
});
|
|
|
// 数据
|
|
// 数据
|
|
|
const dataSource = ref<DeviceEntity[]>([]);
|
|
const dataSource = ref<DeviceEntity[]>([]);
|
|
@@ -275,7 +279,10 @@ const refreshList = () => {
|
|
|
loading.value = true;
|
|
loading.value = true;
|
|
|
searchParams.size = pagination.pageSize as number;
|
|
searchParams.size = pagination.pageSize as number;
|
|
|
searchParams.page = pagination.current as number;
|
|
searchParams.page = pagination.current as number;
|
|
|
-
|
|
|
|
|
|
|
+ if (sorters.value && sorters.value.field) {
|
|
|
|
|
+ searchParams.sort = sorters.value.field;
|
|
|
|
|
+ searchParams.order = sorters.value.order === "ascend" ? "asc" : "desc";
|
|
|
|
|
+ }
|
|
|
post({ url: "/device/search", data: searchParams }, (result: any) => {
|
|
post({ url: "/device/search", data: searchParams }, (result: any) => {
|
|
|
console.log(result);
|
|
console.log(result);
|
|
|
pagination.total = result.total;
|
|
pagination.total = result.total;
|
|
@@ -297,47 +304,63 @@ const onAdd = (e: any) => {
|
|
|
addRef.value?.add();
|
|
addRef.value?.add();
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+const handleTableChange: TableProps["onChange"] = (page: any, filter: any, sorter: any) => {
|
|
|
|
|
+ console.log("page", page);
|
|
|
|
|
+ console.log("sorter", sorter);
|
|
|
|
|
+ debugger;
|
|
|
|
|
+ pagination.pageSize = page.pageSize;
|
|
|
|
|
+ pagination.current = page.current;
|
|
|
|
|
+ if (sorter && sorter.field) {
|
|
|
|
|
+ if(sorter.field != sorters.value.field || sorter.order != sorters.value.order){
|
|
|
|
|
+ pagination.current = 1;
|
|
|
|
|
+ }
|
|
|
|
|
+ sorters.value = { ...sorter };
|
|
|
|
|
+ }
|
|
|
|
|
+ refreshList();
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
// 导出Excel功能完善
|
|
// 导出Excel功能完善
|
|
|
const exportExcel = async function () {
|
|
const exportExcel = async function () {
|
|
|
try {
|
|
try {
|
|
|
// 显示加载状态
|
|
// 显示加载状态
|
|
|
loading.value = true;
|
|
loading.value = true;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 获取全部设备数据(可能需要调整接口来获取所有数据)
|
|
// 获取全部设备数据(可能需要调整接口来获取所有数据)
|
|
|
const exportParams = {
|
|
const exportParams = {
|
|
|
...searchParams,
|
|
...searchParams,
|
|
|
page: pagination.current,
|
|
page: pagination.current,
|
|
|
- size: pagination.pageSize // 获取所有数据,可根据实际后端接口调整
|
|
|
|
|
|
|
+ size: pagination.pageSize, // 获取所有数据,可根据实际后端接口调整
|
|
|
};
|
|
};
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
const result: any = await new Promise((resolve, reject) => {
|
|
const result: any = await new Promise((resolve, reject) => {
|
|
|
post({ url: "/device/search", data: exportParams }, (res: any) => {
|
|
post({ url: "/device/search", data: exportParams }, (res: any) => {
|
|
|
resolve(res);
|
|
resolve(res);
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
- debugger
|
|
|
|
|
if (result.code === 0) {
|
|
if (result.code === 0) {
|
|
|
// 准备导出数据
|
|
// 准备导出数据
|
|
|
- const exportData = result.data.map((item: DeviceEntity, index: number) => ({
|
|
|
|
|
- '序号': index + 1,
|
|
|
|
|
- '设备编号': item.mac,
|
|
|
|
|
- '绑定用户': item.username || '未知',
|
|
|
|
|
- '所属产品': item.productName || '未知',
|
|
|
|
|
- 'SIM卡号': item.sim,
|
|
|
|
|
- '通信MAC': item.netMac,
|
|
|
|
|
- 'IP': item.ipAddress,
|
|
|
|
|
- '网关': item.gateWay,
|
|
|
|
|
- '子网掩码': item.netMask,
|
|
|
|
|
- '设备状态': item.isDelete ? '正常' : '异常',
|
|
|
|
|
- '描述': item.description || '无描述',
|
|
|
|
|
- '最近上传时间': item.modifytime,
|
|
|
|
|
- '创建时间': item.createtime
|
|
|
|
|
- }));
|
|
|
|
|
-
|
|
|
|
|
|
|
+ const exportData = result.data.map(
|
|
|
|
|
+ (item: DeviceEntity, index: number) => ({
|
|
|
|
|
+ 序号: index + 1,
|
|
|
|
|
+ 设备编号: item.mac,
|
|
|
|
|
+ 绑定用户: item.username || "未知",
|
|
|
|
|
+ 所属产品: item.productName || "未知",
|
|
|
|
|
+ SIM卡号: item.sim,
|
|
|
|
|
+ 通信MAC: item.netMac,
|
|
|
|
|
+ IP: item.ipAddress,
|
|
|
|
|
+ 网关: item.gateWay,
|
|
|
|
|
+ 子网掩码: item.netMask,
|
|
|
|
|
+ 设备状态: item.isDelete ? "正常" : "异常",
|
|
|
|
|
+ 描述: item.description || "无描述",
|
|
|
|
|
+ 最近上传时间: item.modifytime,
|
|
|
|
|
+ 创建时间: item.createtime,
|
|
|
|
|
+ })
|
|
|
|
|
+ );
|
|
|
|
|
+
|
|
|
// 创建工作簿
|
|
// 创建工作簿
|
|
|
const wb = XLSX.utils.book_new();
|
|
const wb = XLSX.utils.book_new();
|
|
|
const ws = XLSX.utils.json_to_sheet(exportData);
|
|
const ws = XLSX.utils.json_to_sheet(exportData);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 设置列宽
|
|
// 设置列宽
|
|
|
const colWidths = [
|
|
const colWidths = [
|
|
|
{ wch: 10 }, // 序号
|
|
{ wch: 10 }, // 序号
|
|
@@ -352,26 +375,29 @@ const exportExcel = async function () {
|
|
|
{ wch: 12 }, // 设备状态
|
|
{ wch: 12 }, // 设备状态
|
|
|
{ wch: 20 }, // 描述
|
|
{ wch: 20 }, // 描述
|
|
|
{ wch: 20 }, // 最近上传时间
|
|
{ wch: 20 }, // 最近上传时间
|
|
|
- { wch: 20 } // 创建时间
|
|
|
|
|
|
|
+ { wch: 20 }, // 创建时间
|
|
|
];
|
|
];
|
|
|
- ws['!cols'] = colWidths;
|
|
|
|
|
-
|
|
|
|
|
|
|
+ ws["!cols"] = colWidths;
|
|
|
|
|
+
|
|
|
// 添加工作表到工作簿
|
|
// 添加工作表到工作簿
|
|
|
- XLSX.utils.book_append_sheet(wb, ws, '设备列表');
|
|
|
|
|
-
|
|
|
|
|
|
|
+ XLSX.utils.book_append_sheet(wb, ws, "设备列表");
|
|
|
|
|
+
|
|
|
// 生成文件名
|
|
// 生成文件名
|
|
|
- const fileName = `设备列表_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.xlsx`;
|
|
|
|
|
-
|
|
|
|
|
|
|
+ const fileName = `设备列表_${new Date()
|
|
|
|
|
+ .toISOString()
|
|
|
|
|
+ .slice(0, 19)
|
|
|
|
|
+ .replace(/:/g, "-")}.xlsx`;
|
|
|
|
|
+
|
|
|
// 导出文件
|
|
// 导出文件
|
|
|
XLSX.writeFile(wb, fileName);
|
|
XLSX.writeFile(wb, fileName);
|
|
|
-
|
|
|
|
|
- message.success('导出成功');
|
|
|
|
|
|
|
+
|
|
|
|
|
+ message.success("导出成功");
|
|
|
} else {
|
|
} else {
|
|
|
- message.error(result.msg || '导出失败');
|
|
|
|
|
|
|
+ message.error(result.msg || "导出失败");
|
|
|
}
|
|
}
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
- console.error('导出错误:', error);
|
|
|
|
|
- message.error('导出失败,请重试');
|
|
|
|
|
|
|
+ console.error("导出错误:", error);
|
|
|
|
|
+ message.error("导出失败,请重试");
|
|
|
} finally {
|
|
} finally {
|
|
|
loading.value = false;
|
|
loading.value = false;
|
|
|
}
|
|
}
|