feat: 🚀 厂商管理和设备管理

.eslintrc-auto-import.json

@@ -316,6 +316,8 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true
+    "whenever": true,
+    "ElMessageBox": true,
+    "ElMessage": true
   }
 }

auto-imports.d.ts

@@ -7,6 +7,8 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: (typeof import("element-plus/es"))["ElMessage"]
+  const ElMessageBox: (typeof import("element-plus/es"))["ElMessageBox"]
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']

src/api/device.ts

@@ -9,22 +9,33 @@ type Result = {
   };
 };
 
+/** 添加设备 */
+export const addDevice = (data?: object) => {
+  return http.request<Result>("post", "/device/api/device/add", { data });
+};
+
 /** 获取设备列表 */
 export const getDeviceList = (data?: object) => {
-  return http.request<Result>("post", "/get-device-list", { data });
+  return http.request<Result>("post", "/device/api/device/list", { data });
 };
-
-/** 创建设备 */
-export const createDevice = (data?: object) => {
-  return http.request<Result>("post", "/create-device", { data });
+/** 删除设备 */
+export const setBlackList = (data?: object) => {
+  return http.request<Result>("post", "/device/api/device/set-black-list", {
+    data
+  });
 };
-
-/** 更新设备 */
+/** 编辑设备 */
 export const updateDevice = (data?: object) => {
-  return http.request<Result>("post", "/update-device", { data });
+  return http.request<Result>("post", "/device/api/device/update", { data });
+};
+/** 获取设备详情 */
+export const getDeviceInfo = (data?: object) => {
+  return http.request<Result>("post", "/device/api/device/info", { data });
 };
 
-/** 删除设备 */
-export const deleteDevice = (data?: { id: string }) => {
-  return http.request<Result>("post", "/delete-device", { data });
+/** 导入设备 */
+export const importDevice = (data?: object) => {
+  return http.request<Result>("post", "/device/api/device/import", {
+    data
+  });
 };

src/api/file.ts

+import { http } from "@/utils/http";
+
+type ResultData = {
+  fileId: string;
+  [key: string]: any;
+};
+
+type Result = {
+  success?: boolean;
+  data: ResultData;
+  msg: string;
+  code: string;
+  requestId?: string;
+};
+
+/** 文件上传 */
+export const formUpload = data => {
+  return http.request<Result>(
+    "post",
+    "/objectstore/api/file/upload",
+    { data },
+    {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    }
+  );
+};
+// 文件下载
+export const getFileURL = (data: object) => {
+  return http.request<Result>(
+    "post",
+    "/objectstore/api/file/url",
+    {
+      data
+    },
+    {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    }
+  );
+};

src/api/manufacturer.ts

+import { http } from "@/utils/http";
+
+// type Result = {
+//   success: boolean;
+//   data?: {
+//     /** 列表数据 */
+//     list?: Array<any>;
+//     [key: string]: any;
+//   };
+// };
+
+type ResultData = {
+  fileId: string;
+  [key: string]: any;
+};
+
+type Result = {
+  success?: boolean;
+  data: ResultData;
+  msg: string;
+  code: string;
+  requestId?: string;
+};
+
+/** 添加厂商 */
+export const addManufacturer = (data?: object) => {
+  return http.request<Result>("post", "/device/api/manufacturer/add", {
+    data
+  });
+};
+/** 删除厂商 */
+export const deleteManufacturer = (data?: object) => {
+  return http.request<Result>("post", "/device/api/manufacturer/delete", {
+    data
+  });
+};
+
+/** 更新厂商 */
+export const updateManufacturer = (data?: object) => {
+  return http.request<Result>("post", "/device/api/manufacturer/update", {
+    data
+  });
+};
+/** 获取厂商列表 */
+export const getManufacturerList = (data?: object) => {
+  return http.request<Result>("post", "/device/api/manufacturer/list", {
+    data
+  });
+};
+
+/** 获取厂商详情 */
+export const getManufacturerInfo = (data?: object) => {
+  return http.request<Result>("post", "/device/api/manufacturer/info", {
+    data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded"
+    }
+  });
+};
+// 获取厂商详情，使用x-www-form-urlencoded格式传参
+// export const getManufacturerInfoByForm = (data?: object) => {
+//   return http.request<Result>("post", "/device/api/manufacturer/info", {
+//     data,
+//     headers: {
+//       "Content-Type": "application/x-www-form-urlencoded"
+//     }
+//   });
+// };
+// 导入厂商
+export const importManufacturer = (data?: object) => {
+  return http.request<Result>(
+    "post",
+    "/device/api/manufacturer/import",
+    {
+      data
+    },
+    {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    }
+  );
+};
+// 导出厂商
+export const exportManufacturer = (data?: object) => {
+  return http.request<Result>(
+    "post",
+    "/device/api/manufacturer/export",
+    {
+      data,
+      responseType: "blob"
+    },
+    {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    }
+  );
+};
+// 模版下载接口
+export const downLoadTemplate = (data?: object) => {
+  return http.request<Result>(
+    "post",
+    "/objectstore/api/file/downLocal_template",
+    {
+      data,
+      responseType: "blob"
+    },
+    {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    }
+  );
+};
+// 模版上传接口
+export const uploadTemplate = (data?: object) => {
+  return http.request<Result>("post", "/objectstore/api/file/upload_template", {
+    data,
+    responseType: "blob",
+    headers: {
+      // "Content-Type": "application/x-www-form-urlencoded"
+      "Content-Type": "multipart/form-data"
+    }
+  });
+};
+
+// export const getFileURL = (data: object) => {
+//   return http.request<Result>(
+//     "post",
+//     "/objectstore/api/file/url",
+//     {
+//       data
+//     },
+//     {
+//       headers: {
+//         "Content-Type": "multipart/form-data"
+//       }
+//     }
+//   );
+// };

src/api/systems.ts

@@ -3,12 +3,17 @@ import { http } from "@/utils/http";
 //#region  =============================== 登录模块对应接口 ====================================
 /** 登录 */
 export const getLogin = (data?: object) => {
-  return http.request<LoginResult>("post", "/api/auth/login", { data });
+  return http.request<LoginResult>("post", "/usermanage/api/auth/login", {
+    data
+  });
 };
 
 /** 获取验证码 */
 export const getCaptcha = (time?: string) => {
-  return http.request<CaptchaResult>("get", "/api/auth/captchaNumber/" + time);
+  return http.request<CaptchaResult>(
+    "get",
+    "/usermanage/api/auth/captchaNumber/" + time
+  );
 };
 
 /** 刷新`token` */
@@ -18,102 +23,145 @@ export const refreshTokenApi = (data?: object) => {
 
 /** 账户设置-个人信息 */
 export const getMine = () => {
-  return http.request<UserInfoResult>("post", "/api/user/user-info");
+  return http.request<UserInfoResult>("post", "/usermanage/api/user/user-info");
 };
 
 /** 用户管理-重置密码 */
 export const resetPassword = (data?: object) => {
-  return http.request<UserInfoResult>("post", "/api/user/reset-password", {
-    data
-  });
+  return http.request<UserInfoResult>(
+    "post",
+    "/usermanage/api/user/reset-password",
+    {
+      data
+    }
+  );
 };
 //#endregion
 
 //#region =============================== 用户管理模块对应接口 ===============================
 /** 用户管理-新增用户 */
 export const addUser = (data?: object) => {
-  return http.request<UserInfoResult>("post", "/api/user/add-user", { data });
+  return http.request<UserInfoResult>("post", "/usermanage/api/user/add-user", {
+    data
+  });
 };
 
 /** 用户管理-删除用户 */
 export const deleteUser = (id: number | string) => {
-  return http.request<UserInfoResult>("post", `/api/user/delete-user/${id}`);
+  return http.request<UserInfoResult>(
+    "post",
+    `/usermanage/api/user/delete-user/${id}`
+  );
 };
 
 /** 用户管理-修改用户 */
 export const updateUser = (data?: object) => {
-  return http.request<UserInfoResult>("post", "/api/user/modify-user", {
-    data
-  });
+  return http.request<UserInfoResult>(
+    "post",
+    "/usermanage/api/user/modify-user",
+    {
+      data
+    }
+  );
 };
 
 /** 获取系统管理-用户管理列表 */
 export const getUserList = (data?: object) => {
-  return http.request<ResultTable>("post", "/api/user/find-user-list-by-page", {
-    data
-  });
+  return http.request<ResultTable>(
+    "post",
+    "/usermanage/api/user/find-user-list-by-page",
+    {
+      data
+    }
+  );
 };
 
 /** 用户管理-获取用户详情 */
 export const getUserDetail = (data?: object) => {
-  return http.request<UserInfoResult>("get", "/api/user/user-detail", {
-    data
-  });
+  return http.request<UserInfoResult>(
+    "get",
+    "/usermanage/api/user/user-detail",
+    {
+      data
+    }
+  );
 };
 
 /** 用户管理-给用户绑定上角色 */
 export const addUserRole = (data?: object) => {
-  return http.request<UserInfoResult>("post", "/api/user/add-user-role", {
-    data
-  });
+  return http.request<UserInfoResult>(
+    "post",
+    "/usermanage/api/user/add-user-role",
+    {
+      data
+    }
+  );
 };
 //#endregion
 
 //#region =============================== 菜单管理模块对应接口 ===============================
 /** 新增菜单-菜单管理列表 */
 export const addMenu = (data?: object) => {
-  return http.request<Result>("post", "/api/menu/add-menu", { data });
+  return http.request<Result>("post", "/usermanage/api/menu/add-menu", {
+    data
+  });
 };
 
 /** 删除菜单-菜单管理列表 */
 export const deleteMenu = (data?: { id: number }) => {
-  return http.request<Result>("post", `/api/menu/delete-menu/${data.id}`);
+  return http.request<Result>(
+    "post",
+    `/usermanage/api/menu/delete-menu/${data.id}`
+  );
 };
 
 /** 修改菜单-菜单管理列表 */
 export const updateMenu = (data?: object) => {
-  return http.request<Result>("post", "/api/menu/modify-menu", { data });
+  return http.request<Result>("post", "/usermanage/api/menu/modify-menu", {
+    data
+  });
 };
 
 /** 获取系统管理-菜单管理列表 */
 export const getMenuList = (data?: object) => {
-  return http.request<ResultTable>("post", "/api/menu/find-menu-list-by-page", {
-    data
-  });
+  return http.request<ResultTable>(
+    "post",
+    "/usermanage/api/menu/find-menu-list-by-page",
+    {
+      data
+    }
+  );
 };
 //#endregion
 
 //#region =============================== 部门管理模块对应接口 ===============================
 /** 新增部门-部门管理列表 */
 export const addDept = (data?: object) => {
-  return http.request<Result>("post", "/api/depart/add-depart", { data });
+  return http.request<Result>("post", "/usermanage/api/depart/add-depart", {
+    data
+  });
 };
 
 /** 删除部门-部门管理列表 */
 export const deleteDept = (data?: { id: number }) => {
-  return http.request<Result>("post", `/api/depart/delete-depart/${data.id}`);
+  return http.request<Result>(
+    "post",
+    `/usermanage/api/depart/delete-depart/${data.id}`
+  );
 };
 
 /** 修改部门-部门管理列表 */
 export const updateDept = (data?: object) => {
-  return http.request<Result>("post", `/api/depart/modify-depart`, { data });
+  return http.request<Result>("post", `/usermanage/api/depart/modify-depart`, {
+    data
+  });
 };
 
 /** 获取系统管理-部门管理列表 */
 export const getDeptList = (data?: object) => {
   return http.request<ResultTable>(
     "post",
-    "/api/depart/get-depart-list-by-page",
+    "/usermanage/api/depart/get-depart-list-by-page",
     {
       data
     }
@@ -125,23 +173,31 @@ export const getDeptList = (data?: object) => {
 
 // 角色管理-添加角色
 export const addRole = (data?: object) => {
-  return http.request<Result>("post", "/api/role/add-role", { data });
+  return http.request<Result>("post", "/usermanage/api/role/add-role", {
+    data
+  });
 };
 
 // 角色管理-删除角色
 export const deleteRole = (id: string) => {
-  return http.request<Result>("post", `/api/role/delete-role/${id}`);
+  return http.request<Result>("post", `/usermanage/api/role/delete-role/${id}`);
 };
 // 角色管理-修改角色
 export const updateRole = (data?: object) => {
-  return http.request<Result>("post", "/api/role/modify-role", { data });
+  return http.request<Result>("post", "/usermanage/api/role/modify-role", {
+    data
+  });
 };
 /** 获取系统管理-角色管理列表 */
 export const getRoleList = (data?: object) => {
   // return http.request<ResultTable>("post", "/role", { data });
-  return http.request<ResultTable>("post", "/api/role/find-role-list-by-page", {
-    data
-  });
+  return http.request<ResultTable>(
+    "post",
+    "/usermanage/api/role/find-role-list-by-page",
+    {
+      data
+    }
+  );
 };
 
 /** 获取角色管理-权限-菜单权限 */
@@ -157,27 +213,38 @@ export const getRoleList = (data?: object) => {
 /** 获取系统管理-不分页查询角色管理列表 */
 export const getRoleListNoPage = () => {
   // return http.request<ResultTable>("post", "/role", { data });
-  return http.request<ResultTable>("post", "/api/role/get-role-list");
+  return http.request<ResultTable>(
+    "post",
+    "/usermanage/api/role/get-role-list"
+  );
 };
 
 // 根据角色ID获取菜单列表
 export const getMenuListByRoleId = (roleId: number) => {
-  return http.request<Result>("post", `/api/menu/get-menu-by-role/${roleId}`);
+  return http.request<Result>(
+    "post",
+    `/usermanage/api/menu/get-menu-by-role/${roleId}`
+  );
 };
 
 // 角色管理-根据用户id查询角色列表
 export const getRoleListByUserId = (id: string | number) => {
-  return http.request<Result>("post", `/api/role/get-role-by-user/${id}`);
+  return http.request<Result>(
+    "post",
+    `/usermanage/api/role/get-role-by-user/${id}`
+  );
 };
 
 // 给角色绑定菜单
 export const bindMenuByRoleId = (data?: object) => {
-  return http.request<Result>("post", "/api/role/add-role-menu", { data });
+  return http.request<Result>("post", "/usermanage/api/role/add-role-menu", {
+    data
+  });
 };
 
 // 用户管理 - 根据用户id绑定角色
 // export const bindRoleByUserId = (data?: object) => {
-//   return http.request<Result>("post", "/api/role/bind-role-by-user", { data });
+//   return http.request<Result>("post", "/usermanage/api/role/bind-role-by-user", { data });
 // };
 //#endregion
 
@@ -203,6 +270,30 @@ type ResultTable = {
   };
 };
 
+export type UserResult = {
+  status: number;
+  success: boolean;
+  data: {
+    token: string;
+    /** 头像 */
+    avatar: string;
+    /** 用户名 */
+    username: string;
+    /** 昵称 */
+    nickname: string;
+    /** 当前登录用户的角色 */
+    roles: Array<string>;
+    /** 按钮级别权限 */
+    permissions: Array<string>;
+    /** `token` */
+    accessToken: string;
+    /** 用于调用刷新`accessToken`的接口时所需的`token` */
+    refreshToken: string;
+    /** `accessToken`的过期时间（格式'xxxx/xx/xx xx:xx:xx'） */
+    expires: Date;
+  };
+};
+
 export type UserInfo = {
   menuList: Array<any>;
   /** 头像 */
@@ -252,6 +343,8 @@ export type LoginResult = {
 export type RefreshTokenResult = {
   success: boolean;
   data: {
+    /** `token` */
+    token?: string;
     /** `token` */
     accessToken: string;
     /** 用于调用刷新`accessToken`的接口时所需的`token` */

src/api/user.ts

@@ -76,7 +76,9 @@ type ResultTable = {
 
 /** 登录 */
 export const getLogin = (data?: object) => {
-  return http.request<UserResult>("post", "/api/auth/login", { data });
+  return http.request<UserResult>("post", "/usermanage/api/auth/login", {
+    data
+  });
 };
 
 /** 刷新`token` */

src/components/templete/index.vue

+<script setup lang="ts">
+defineOptions({
+  name: ""
+});
+import type { UploadProps, UploadRequestOptions } from "element-plus";
+import {
+  downLoadTemplate,
+  importManufacturer,
+  uploadTemplate
+} from "@/api/manufacturer";
+import { downloadFile } from "@/utils/utils";
+
+const formData = new FormData();
+
+// 定义一个函数，用于处理头像上传成功
+const handleAvatarSuccess: UploadProps["onSuccess"] = (
+  response,
+  uploadFile
+) => {
+  // // 打印上传文件
+  // console.log("uploadFile", uploadFile);
+  // // 设置图片地址为上传文件的地址
+  // imageUrl.value = URL.createObjectURL(uploadFile.raw!);
+  // // 打印图片地址
+  // console.log("imageUrl.value", imageUrl.value);
+};
+
+// 定义一个函数，用于处理头像上传前
+const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
+  // 打印原始文件
+  console.log("rawFile", rawFile);
+  // 如果文件类型不是xlsx/xls，则提示错误信息，并返回false
+  const validTypes = [
+    "application/vnd.ms-excel",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+  ];
+  const isValid = validTypes.includes(rawFile.type);
+  if (!isValid) {
+    // if (rawFile.type !== "xlsx/xls") {
+    ElMessage.error("文件上传类型只支持xlsx/xls!");
+    return false;
+    // 如果文件大小超过2MB，则提示错误信息，并返回false
+  } else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error("文件不能超过2MB!");
+    return false;
+  }
+  // 返回true
+  return true;
+};
+// 上传文件
+const uploadFile = async (options: UploadRequestOptions) => {
+  const { file } = options;
+  // 文件参数封装成formdata格式上传
+  formData.append("file", file);
+  // formData.append("templateName", "厂商模版");
+};
+
+// 点击确认按钮
+const confirm = () => {
+  // 调用接口，上传文件
+  // uploadTemplate(formData).then(res => {
+  importManufacturer(formData).then(res => {
+    // 如果上传成功，则返回文件地址
+    if (res.code === "0" || res.code === "A0230") {
+      ElMessage.success("模版导入成功");
+    } else {
+      // 如果上传失败，则返回空字符串
+      ElMessage.error("模版导入失败");
+    }
+  });
+};
+
+const dwTemplate = async () => {
+  // 调用下载模版接口
+  const res = await downLoadTemplate({ templateName: "厂商模版" });
+  downloadFile(res, "厂商模版");
+};
+</script>
+
+<template>
+  <div class="bg-white w-full h-full p-5">
+    <!-- 下载模版模块 -->
+    <div>
+      <p>
+        1、<span>下载导入模版</span> <span>根据模版中的填写须知完成表格</span>
+      </p>
+      <span
+        class="inline-block bg-gray-100 py-2 px-8 ml-4 mt-4 cursor-pointer"
+        @click="dwTemplate"
+      >
+        下载模版
+      </span>
+    </div>
+    <!-- 上传模版模块 -->
+    <div class="mt-10">
+      <p>
+        1、<span>下载导入模版</span> <span>根据模版中的填写须知完成表格</span>
+      </p>
+      <el-upload
+        class="upload-demo w-90 mt-3"
+        drag
+        :http-request="uploadFile"
+        multiple
+        :on-success="handleAvatarSuccess"
+        :before-upload="beforeAvatarUpload"
+      >
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">
+          将您的文件拖放到此处，或者 <em>点击上传</em>
+        </div>
+        <template #tip>
+          <div class="el-upload__tip">2M以内，支持xlsx、xls格式</div>
+        </template>
+      </el-upload>
+    </div>
+    <!-- 底部放一个取消和确认按钮 -->
+    <div class="position border text-center w-full bg-white mt-40 py-1 px-5">
+      <el-button type="primary" @click="confirm">确认</el-button>
+      <el-button class="ml-4">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<!-- <style lang="scss" scoped></style> -->

src/router/modules/Manufacturer.ts

+//
+export default {
+  path: "/fac-manage",
+  redirect: "/fac-manage/fac-create",
+  meta: {
+    title: "厂商管理"
+  },
+  children: [
+    {
+      path: "/fac-manage/fac-edit2",
+      name: "FacCreate",
+      component: () => import("@/views/fac-manage/fac-create/index.vue"),
+      meta: {
+        showLink: false,
+        title: "厂商编辑",
+        showParent: true
+      }
+    },
+    {
+      path: "/import-templete",
+      name: "Import",
+      component: () => import("@/components/templete/index.vue"),
+      meta: {
+        showLink: false,
+        title: "导入",
+        showParent: true
+      }
+    }
+  ]
+};

src/router/modules/device.ts

 //
 export default {
   path: "/device",
-  // redirect: "/device/list",
+  redirect: "/device/list",
   meta: {
     title: "设备管理"
   },
   children: [
     {
       path: "/device/detail2",
-      name: "Device",
+      name: "DeviceDetail2",
       component: () => import("@/views/device/detail2.vue"),
       meta: {
         showLink: false,
-        title: "无人机设备22",
-        showParent: true
+        title: "无人机设备22"
+        // showParent: true
       }
     },
     {
       path: "/device/detail",
-      name: "Device",
+      name: "DeviceDetail",
       component: () => import("@/views/device/detail.vue"),
       meta: {
         showLink: false,

src/router/utils.ts

@@ -28,7 +28,7 @@ const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");
 
 // 动态路由
 // import { getAsyncRoutes } from "@/api/routes";
-import { getMine } from "@/api/user";
+import { getMine } from "@/api/systems";
 import { transformRoutes } from "@/utils/createTree";
 
 function handRank(routeInfo: any) {

src/store/modules/user.ts

@@ -12,7 +12,7 @@ import {
   type RefreshTokenResult,
   getLogin,
   refreshTokenApi
-} from "@/api/user";
+} from "@/api/systems";
 import { useMultiTagsStoreHook } from "./multiTags";
 import {
   type DataInfo,

src/utils/utils.ts

+// 定义一个方法，处理后端返回的二进制流，斌下载文件
+export function downloadFile(response: any, fileName: string) {
+  console.log("content-type", response);
+  const blob = new Blob([response], {
+    // type: response.headers["content-type"]
+    // type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+    // type: "application/vnd.ms-excel"
+  });
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.style.display = "none";
+  a.href = url;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+}

src/views/account-settings/components/Profile.vue

@@ -2,7 +2,7 @@
 import { reactive, ref } from "vue";
 import { formUpload } from "@/api/mock";
 import { message } from "@/utils/message";
-import { type UserInfo, getMine } from "@/api/user";
+import { type UserInfo, getMine } from "@/api/systems";
 import type { FormInstance, FormRules } from "element-plus";
 import ReCropperPreview from "@/components/ReCropperPreview";
 import { createFormData, deviceDetection } from "@pureadmin/utils";

src/views/account-settings/index.vue

 <script setup lang="ts">
-import { getMine } from "@/api/user";
+import { getMine } from "@/api/systems";
 import { useRouter } from "vue-router";
 import { ref, onBeforeMount } from "vue";
 import { ReText } from "@/components/ReText";

src/views/device/detail.vue

 <script setup lang="ts">
+defineOptions({
+  name: "DeviceDetail"
+});
 import { reactive } from "vue";
 import { useListHook } from "./utils/listHook";
 import type { TabsPaneContext } from "element-plus";

src/views/device/detail2.vue

 <script setup lang="ts">
+defineOptions({
+  name: "DeviceDetail2"
+});
 import { reactive } from "vue";
 import { useListHook } from "./utils/listHook";
 

src/views/device/utils/hook.tsx

 import dayjs from "dayjs";
-import editForm from "./components/form.vue";
+import editForm from "../components/form.vue";
 import { handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
 import { getDeptList, addDept, deleteDept, updateDept } from "@/api/systems";

src/views/fac-manage/fac-create/index.vue

@@ -3,6 +3,7 @@
     <!-- 搜索表单 -->
     <el-form
       ref="formRef"
+      :rules="rules"
       :inline="true"
       :model="form"
       class="search-form bg-bg_color w-full h-full pl-8 pt-[12px] overflow-auto"
@@ -10,9 +11,9 @@
       <el-row>
         <el-col :span="6">
           <!-- 角色名称输入项 -->
-          <el-form-item label="厂商名称：" prop="name">
+          <el-form-item label="厂商名称：" prop="manufacturerName">
             <el-input
-              v-model="form.name"
+              v-model="form.manufacturerName"
               placeholder="请输入厂商名称"
               clearable
               class="w-[180px]!"
@@ -21,9 +22,9 @@
         </el-col>
         <el-col :span="6">
           <!-- 角色名称输入项 -->
-          <el-form-item label="厂商简称：" prop="abbreviation">
+          <el-form-item label="厂商简称：">
             <el-input
-              v-model="form.abbreviation"
+              v-model="form.manufacturerAbbreviation"
               placeholder="请输入厂商简称"
               clearable
               class="w-[180px]!"
@@ -32,9 +33,9 @@
         </el-col>
         <el-col :span="6">
           <!-- 角色名称输入项 -->
-          <el-form-item label="设备联系人：" prop="contactPerson">
+          <el-form-item label="设备联系人：">
             <el-input
-              v-model="form.name"
+              v-model="form.manufacturerPhone"
               placeholder="请输入设备联系人"
               clearable
               class="w-[180px]!"
@@ -43,9 +44,9 @@
         </el-col>
         <el-col :span="6">
           <!-- 角色名称输入项 -->
-          <el-form-item label="厂商类型：" prop="facType">
+          <el-form-item label="厂商类型：">
             <el-select
-              v-model="form.facType"
+              v-model="form.manufacturerType"
               clearable
               class="w-[180px]!"
               placeholder="请选择厂商类型"
@@ -63,7 +64,7 @@
       <el-row>
         <el-col :span="12">
           <!-- 角色名称输入项 -->
-          <el-form-item label="统一社会信用代号/税号：" prop="creditCode">
+          <el-form-item label="统一社会信用代号/税号：">
             <el-input
               v-model="form.creditCode"
               placeholder="请输入统一社会信用代号/税号"
@@ -74,9 +75,9 @@
         </el-col>
         <el-col :span="12">
           <!-- 角色名称输入项 -->
-          <el-form-item label="总部地址：" prop="address">
+          <el-form-item label="总部地址：">
             <el-input
-              v-model="form.hqAddress"
+              v-model="form.manufacturerAddress"
               placeholder="请输入地址"
               clearable
               class="w-[500px]!"
@@ -87,17 +88,16 @@
       <el-row>
         <el-col :span="12">
           <!-- 角色名称输入项 -->
-          <el-form-item label="官网地址：" prop="officalAddress">
+          <el-form-item label="官网地址：">
             <el-input
-              v-model="form.officalAddress"
+              v-model="form.manufacturerUrl"
               placeholder="请输入官网地址"
               clearable
               style="width: 500px"
             />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
-          <!-- 角色名称输入项 -->
+        <!-- <el-col :span="12">
           <el-form-item label="关联设备：" prop="assDevice">
             <el-select
               v-model="form.assDevice"
@@ -113,12 +113,12 @@
               />
             </el-select>
           </el-form-item>
-        </el-col>
+        </el-col> -->
       </el-row>
       <el-row>
         <el-col :span="12">
           <!-- 角色名称输入项 -->
-          <el-form-item label="备注：" prop="remark" label-width="80px">
+          <el-form-item label="备注：" prop="notes" label-width="80px">
             <el-input
               v-model="form.notes"
               :autosize="{ minRows: 4, maxRows: 6 }"
@@ -131,12 +131,16 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col :span="12">
-          <el-form-item label="合同文件：" prop="remark">
+        <!-- 新增的时候显示这个 -->
+        <el-col
+          v-if="!router.currentRoute.value.query.id || !fileData.fileName"
+          :span="12"
+        >
+          <el-form-item label="合同文件：">
             <el-upload
               class="upload-demo"
               drag
-              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+              :http-request="uploadFile"
               multiple
               :on-success="handleAvatarSuccess"
               :before-upload="beforeAvatarUpload"
@@ -151,6 +155,33 @@
             </el-upload>
           </el-form-item>
         </el-col>
+        <!-- 编辑的时候显示一个excel文件,并且可以下载 -->
+        <el-col v-else :span="12">
+          <el-form-item label="合同文件：">
+            <!-- 一个excel图标 -->
+            <div
+              class="flex items-center justify-between bg-gray-100 w-50 h-10 pr-3 cursor-pointer"
+              title="点击下载文件"
+            >
+              <div
+                class="flex items-center justify-between"
+                @click="downloadExcel()"
+              >
+                <img
+                  src="https://shoplineimg.com/65a8de08211b1e008886980e/6659acc772c9d500104bb668/800x.png?"
+                  alt=""
+                  class="w-8 h-8"
+                />
+                <span class="ml-3">{{ fileData.fileName }} </span>
+              </div>
+              <IconifyIconOnline
+                class="cursor-pointer"
+                icon="meteor-icons:xmark"
+                @click="deleteFile()"
+              />
+            </div>
+          </el-form-item>
+        </el-col>
       </el-row>
       <el-row class="fixed-bottom">
         <div class="flex flex-row-reverse w-full">
@@ -160,7 +191,7 @@
               type="primary"
               :icon="useRenderIcon(Check)"
               :loading="loading"
-              @click="onSearch"
+              @click="addFac"
             >
               确定
             </el-button>
@@ -201,13 +232,15 @@ import AddFill from "~icons/ri/add-circle-line";
 import Close from "~icons/ep/close";
 import Check from "~icons/ep/check";
 import Back from "~icons/ep/back";
+import { getToken, formatToken } from "@/utils/auth";
+import router from "@/router";
 
 /**
  * 定义组件选项
  * 设置组件名称为 SystemRole，方便调试和组件识别
  */
 defineOptions({
-  name: "Fac-Create"
+  name: "FacCreate"
 });
 
 // 创建表单引用
@@ -223,8 +256,14 @@ const {
   tagName,
   handleAvatarSuccess,
   beforeAvatarUpload,
-  goBack
-} = useFacForm();
+  goBack,
+  addFac,
+  rules,
+  uploadFile,
+  fileData,
+  downloadExcel,
+  deleteFile
+} = useFacForm(formRef);
 </script>
 
 <style scoped lang="scss">

src/views/fac-manage/fac-create/utils/hook.tsx

 import { reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
-import type { UploadProps } from "element-plus";
+import type { UploadProps, UploadRequestOptions } from "element-plus";
 import { useRouter } from "vue-router";
+import {
+  addManufacturer,
+  getManufacturerInfo,
+  updateManufacturer
+} from "@/api/manufacturer";
+import { formUpload, getFileURL } from "@/api/file";
 
-export function useFacForm() {
+// 导出一个函数，用于创建表单
+export function useFacForm(formRef: Ref) {
+  // 使用reactive创建一个响应式对象，用于存储表单数据
   const form = reactive({
-    name: "",
-    abbreviation: "",
-    creditCode: "",
-    contactPerson: "",
-    facType: "hardware",
+    manufacturerName: "", // 厂商名称
+    manufacturerAbbreviation: "", // 厂商简称
+    creditCode: "", // 信用代码
+    manufacturerPhone: "", // 厂商电话
+    manufacturerType: "hardware", // 厂商类型
     facTypeList: [
-      { label: "硬件", value: "hardware" },
-      { label: "软件", value: "software" },
-      { label: "云服务", value: "cloud" },
-      { label: "解决方案", value: "solution" }
+      { label: "硬件", value: "hardware" }, // 硬件
+      { label: "软件", value: "software" }, // 软件
+      { label: "云服务", value: "cloud" }, // 云服务
+      { label: "解决方案", value: "solution" } // 解决方案
     ],
-    hqAddress: "",
-    officalAddress: "",
-    notes: "",
-    assDevice: "device1",
-    assDeviceList: [
-      { label: "设备1", value: "device1" },
-      { label: "设备2", value: "device2" },
-      { label: "设备3", value: "device3" }
-    ]
+    manufacturerAddress: "", // 厂商地址
+    manufacturerUrl: "", // 厂商网址
+    notes: "", // 备注
+    // assDevice: "device1", // 关联设备
+    // assDeviceList: [
+    //   { label: "设备1", value: "device1" }, // 设备1
+    //   { label: "设备2", value: "device2" }, // 设备2
+    //   { label: "设备3", value: "device3" } // 设备3
+    // ]
+    fileId: "" // 文件ID
   });
+  // 使用ref创建一个响应式对象，用于存储标签名称
   const tagName = ref("厂商信息");
+  // 使用ref创建一个响应式对象，用于存储加载状态
   const loading = ref(false);
+  // 使用ref创建一个响应式对象，用于存储图片地址
   const imageUrl = ref("");
+  // 使用useRouter获取路由对象
   const router = useRouter();
+  // 使用ref创建一个响应式对象，用于存储文件数据
+  const fileData = reactive({
+    fileName: "",
+    fileUrl: ""
+  });
+
+  // const fileId = ref("");
 
+  // 定义一个异步函数，用于搜索
   async function onSearch() {
+    // 设置加载状态为true
     loading.value = true;
+    // 调用getRoleList函数，获取角色列表
     // const { data } = await getRoleList(toRaw(form));
 
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
+    // 设置加载状态为false，延迟500毫秒
+    // setTimeout(() => {
+    //   loading.value = false;
+    // }, 500);
   }
 
+  // 定义表单校验规则
+  const rules = {
+    manufacturerName: [
+      { required: true, message: "请输入厂商名称", trigger: "blur" }
+    ]
+  };
+
+  // 定义一个函数，用于重置表单
   const resetForm = formEl => {
+    // 如果没有传入表单元素，则直接返回
     if (!formEl) return;
+    // 重置表单元素
     formEl.resetFields();
+    // 调用onSearch函数
     onSearch();
   };
 
+  // 定义一个函数，用于处理头像上传成功
   const handleAvatarSuccess: UploadProps["onSuccess"] = (
     response,
     uploadFile
   ) => {
+    // 打印上传文件
     console.log("uploadFile", uploadFile);
+    // 设置图片地址为上传文件的地址
     imageUrl.value = URL.createObjectURL(uploadFile.raw!);
+    // 打印图片地址
     console.log("imageUrl.value", imageUrl.value);
   };
 
+  // 定义一个函数，用于处理头像上传前
   const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
+    // 打印原始文件
     console.log("rawFile", rawFile);
-    if (rawFile.type !== "xlsx/xls") {
+    // 如果文件类型不是xlsx/xls，则提示错误信息，并返回false
+    const validTypes = [
+      "application/vnd.ms-excel",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+    ];
+    const isValid = validTypes.includes(rawFile.type);
+    if (!isValid) {
+      // if (rawFile.type !== "xlsx/xls") {
       ElMessage.error("文件上传类型只支持xlsx/xls!");
       return false;
+      // 如果文件大小超过2MB，则提示错误信息，并返回false
     } else if (rawFile.size / 1024 / 1024 > 2) {
       ElMessage.error("文件不能超过2MB!");
       return false;
     }
+    // 返回true
     return true;
   };
 
+  // 定义一个函数，用于返回首页
   const goBack = () => {
+    // 跳转到首页
     router.push("/welcome");
   };
+  // 获取Excel文件的下载链接
+  const getExcelUrl = async (fileId: string) => {
+    const res = await getFileURL({ fileId });
+    if (res.code === "0") {
+      // 如果获取成功，则返回文件地址
+      fileData.fileName = res.data.fileName;
+      fileData.fileUrl = res.data.filePath;
+      console.log("fileData.value", fileData);
+
+      // return res.data;
+    } else {
+      // 如果获取失败，则返回空字符串
+      return "";
+    }
+  };
+  // 判断url中是否有id参数，如果有则调用getManufacturerInfo接口获取厂商信息，并赋值给form
+  if (router.currentRoute.value.query.id) {
+    const id = router.currentRoute.value.query.id;
+    getManufacturerInfo({ id }).then(res => {
+      if (res.code === "0") {
+        form.manufacturerName = res.data.manufacturerName;
+        form.manufacturerAbbreviation = res.data.manufacturerAbbreviation;
+        form.creditCode = res.data.creditCode;
+        form.manufacturerPhone = res.data.manufacturerPhone;
+        form.manufacturerType = res.data.manufacturerType;
+        form.manufacturerAddress = res.data.manufacturerAddress;
+        form.manufacturerUrl = res.data.manufacturerUrl;
+        form.notes = res.data.notes;
+        if (res.data.fileId) {
+          form.fileId = res.data.fileId;
+          getExcelUrl(res.data.fileId);
+        }
+      }
+    });
+  }
+  // 新增厂商
+  const addFac = async () => {
+    // 新增前校验表单
+    console.log("formRef.value", formRef);
+
+    const valid = await formRef.value.validate();
+    if (!valid) return;
+    // 将表单数据转换为原始数据
+    // const data = toRaw(form);
+    // 调用添加厂商接口
+
+    // 判断url中是否有id参数，如果有则调用updateManufacturer接口更新厂商信息，如果没有则调用addManufacturer接口添加厂商信息
+    if (router.currentRoute.value.query.id) {
+      const id = router.currentRoute.value.query.id;
+      const res = await updateManufacturer({ ...form, id });
+      // 判断接口返回的code是否为200
+      if (res.code === "0") {
+        // 如果是200，则显示添加成功
+        ElMessage.success("更新成功");
+        router.push("/fac-manage/fac-list");
+      } else {
+        // 如果不是200，则显示添加失败并显示错误信息
+        ElMessage.error("更新失败" + res.msg);
+      }
+    } else {
+      const res = await addManufacturer(form);
+      // 判断接口返回的code是否为200
+      if (res.code === "0") {
+        // 如果是200，则显示添加成功
+        ElMessage.success("添加成功");
+        // 跳转到厂商列表页面
+        router.push("/fac-manage/fac-list");
+      } else {
+        // 如果不是200，则显示添加失败并显示错误信息
+        ElMessage.error("添加失败" + res.msg);
+      }
+    }
+  };
+  // 下载excel文件,直接点击url地址下载
+  const downloadExcel = () => {
+    console.log("fileData", fileData);
+
+    window.open(fileData.fileUrl);
+  };
+
+  // 删除文件
+  const deleteFile = async () => {
+    fileData.fileName = "";
+    fileData.fileUrl = "";
+  };
+
+  // 上传文件
+  const uploadFile = async (options: UploadRequestOptions) => {
+    const { file } = options;
+    console.log("file", file);
+    // 文件参数封装成formdata格式上传
+    const formData = new FormData();
+    formData.append("file", file);
+    // 把文件类型也放到formdata中，值是4
+    formData.append("fileType", "4");
+    // 调用formUpload接口，上传文件
+    const res = await formUpload(formData);
+    // 如果上传成功，则返回文件地址
+    if (res.code === "0") {
+      form.fileId = res.data.fileId;
+      ElMessage.success("文件上传成功");
+    } else {
+      // 如果上传失败，则返回空字符串
+      ElMessage.error("文件上传失败");
+    }
+  };
+
+  // 返回一个对象，包含tagName、form、loading、onSearch、resetForm、imageUrl、handleAvatarSuccess、beforeAvatarUpload、goBack
   return {
     tagName,
     form,
@@ -79,6 +239,12 @@ export function useFacForm() {
     imageUrl,
     handleAvatarSuccess,
     beforeAvatarUpload,
-    goBack
+    goBack,
+    addFac,
+    rules,
+    uploadFile,
+    fileData,
+    downloadExcel,
+    deleteFile
   };
 }

src/views/fac-manage/fac-edit/index.vue

@@ -10,9 +10,9 @@
       <el-row>
         <el-col :span="6">
           <!-- 角色名称输入项 -->
-          <el-form-item label="厂商名称：" prop="name">
+          <el-form-item label="厂商名称：" prop="manufacturerName">
             <el-input
-              v-model="form.name"
+              v-model="form.manufacturerName"
               placeholder="请输入厂商名称"
               clearable
               class="w-[180px]!"
@@ -21,9 +21,9 @@
         </el-col>
         <el-col :span="6">
           <!-- 角色名称输入项 -->
-          <el-form-item label="厂商简称：" prop="abbreviation">
+          <el-form-item label="厂商简称：" prop="manufacturerAbbreviation">
             <el-input
-              v-model="form.abbreviation"
+              v-model="form.manufacturerAbbreviation"
               placeholder="请输入厂商简称"
               clearable
               class="w-[180px]!"

src/views/fac-manage/fac-list/index.vue

@@ -10,9 +10,9 @@
       <el-form-item>
         <el-button type="success" @click="goFacCreate">新建</el-button>
         <el-button @click="handleEdit">编辑</el-button>
-        <el-button>删除</el-button>
-        <el-button>导入</el-button>
-        <el-button>导出</el-button>
+        <el-button @click="handleDelete">删除</el-button>
+        <el-button @click="goImport">导入</el-button>
+        <el-button @click="exportAll">导出全部</el-button>
       </el-form-item>
       <el-form-item class="absolute right-0 top-1">
         <el-input
@@ -91,8 +91,6 @@ defineOptions({
   name: "Fac-List"
 });
 
-// 创建表单引用
-const formRef = ref();
 const {
   form,
   columns,
@@ -105,7 +103,10 @@ const {
   handleSizeChange,
   handleCurrentChange,
   handleSelectionChange,
-  handleEdit
+  handleEdit,
+  handleDelete,
+  goImport,
+  exportAll
 } = useFacList();
 const tableRef = ref();
 

src/views/fac-manage/fac-list/utils/hook.tsx

-import { reactive, ref } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import { ElMessage } from "element-plus";
 import type { UploadProps } from "element-plus";
 import { useRouter } from "vue-router";
 import type { PaginationProps } from "@pureadmin/table";
+import {
+  getManufacturerList,
+  deleteManufacturer,
+  exportManufacturer
+} from "@/api/manufacturer";
+
+import { downloadFile } from "@/utils/utils";
 
 export function useFacList() {
   const form = reactive({
@@ -16,48 +23,58 @@ export function useFacList() {
   const dataList = ref([]);
   const multipleSelection = ref([]);
 
+  const flag = ref(false); //用于判断是否筛选过
+  // const manufacturerType = ref("");
   const filterFacType = (value, row) => {
-    return row.facType === value;
+    if (!flag.value) {
+      // flag.value = true;
+      // manufacturerType.value = value;
+      // console.log("value", value);
+      // onSearch();
+      return row.manufacturerType === value;
+    }
   };
 
-  const filterassDevice = (value, row) => {
-    return row.assDevice === value;
-  };
+  // const filterassDevice = (value, row) => {
+  //   return row.assDevice === value;
+  // };
 
   const columns: TableColumnList = [
     {
       type: "selection",
       align: "left"
     },
-    { prop: "orderNumber", label: "序号", width: 70 },
-    { prop: "name", label: "厂商名称", width: 80 },
-    { prop: "abbreviation", label: "厂商简称" },
+    { type: "index", label: "序号", width: 70 },
+    // { prop: "orderNumber", label: "序号", width: 70 },
+    { prop: "manufacturerName", label: "厂商名称", width: 80 },
+    { prop: "manufacturerAbbreviation", label: "厂商简称" },
     { prop: "creditCode", label: "统一社会信用代号/税号" },
     {
-      prop: "facType",
+      prop: "manufacturerType",
       label: "厂商类型",
       filters: [
-        { text: "类型1", value: "类型1" },
-        { text: "类型2", value: "类型2" },
-        { text: "类型3", value: "类型3" }
+        { text: "硬件", value: "硬件" },
+        { text: "软件", value: "软件" },
+        { text: "云服务", value: "云服务" },
+        { text: "解决方案", value: "解决方案" }
       ],
       filterMethod: filterFacType,
       filterPlacement: "bottom-end",
       slot: "tag"
     },
-    { prop: "address", label: "总部地址" },
-    { prop: "officalAddress", label: "官网地址" },
-    {
-      prop: "assDevice",
-      label: "关联设备",
-      filters: [
-        { text: "水质检测", value: "水质检测" },
-        { text: "噪声检测", value: "噪声检测" }
-      ],
-      filterMethod: filterassDevice,
-      filterPlacement: "bottom-end",
-      slot: "tag"
-    }
+    { prop: "manufacturerAddress", label: "总部地址" },
+    { prop: "manufacturerUrl", label: "官网地址" }
+    // {
+    //   prop: "assDevice",
+    //   label: "关联设备",
+    //   filters: [
+    //     { text: "水质检测", value: "水质检测" },
+    //     { text: "噪声检测", value: "噪声检测" }
+    //   ],
+    //   filterMethod: filterassDevice,
+    //   filterPlacement: "bottom-end",
+    //   slot: "tag"
+    // }
   ];
 
   const pagination = reactive<PaginationProps>({
@@ -96,98 +113,7 @@ export function useFacList() {
 
   async function onSearch() {
     loading.value = true;
-    // const { data } = await getRoleList(toRaw(form));
-    // dataList.value = data.records;
-    const testData = [
-      {
-        orderNumber: 1,
-        name: "厂商A",
-        abbreviation: "A厂",
-        creditCode: "123456789012345678",
-        facType: "类型1",
-        address: "北京市朝阳区",
-        officalAddress: "https://www.changshangA.com",
-        assDevice: "水质检测"
-      },
-      {
-        orderNumber: 2,
-        name: "厂商B",
-        abbreviation: "B厂",
-        creditCode: "987654321098765432",
-        facType: "类型2",
-        address: "上海市浦东新区",
-        officalAddress: "https://www.changshangB.com",
-        assDevice: "噪声检测"
-      },
-      {
-        orderNumber: 3,
-        name: "厂商C",
-        abbreviation: "C厂",
-        creditCode: "112233445566778899",
-        facType: "类型1",
-        address: "广州市天河区",
-        officalAddress: "https://www.changshangC.com",
-        assDevice: "水质检测"
-      },
-      {
-        orderNumber: 4,
-        name: "厂商D",
-        abbreviation: "D厂",
-        creditCode: "998877665544332211",
-        facType: "类型3",
-        address: "深圳市南山区",
-        officalAddress: "https://www.changshangD.com",
-        assDevice: "水质检测"
-      },
-      {
-        orderNumber: 5,
-        name: "厂商E",
-        abbreviation: "E厂",
-        creditCode: "556677889900112233",
-        facType: "类型2",
-        address: "杭州市西湖区",
-        officalAddress: "https://www.changshangE.com",
-        assDevice: "噪声检测"
-      },
-      {
-        orderNumber: 6,
-        name: "厂商F",
-        abbreviation: "F厂",
-        creditCode: "334455667788990011",
-        facType: "类型1",
-        address: "成都市武侯区",
-        officalAddress: "https://www.changshangF.com",
-        assDevice: "噪声检测"
-      },
-      {
-        orderNumber: 7,
-        name: "厂商G",
-        abbreviation: "G厂",
-        creditCode: "778899001122334455",
-        facType: "类型3",
-        address: "南京市鼓楼区",
-        officalAddress: "https://www.changshangG.com",
-        assDevice: "噪声检测"
-      },
-      {
-        orderNumber: 8,
-        name: "厂商H",
-        abbreviation: "H厂",
-        creditCode: "990011223344556677",
-        facType: "类型2",
-        address: "武汉市洪山区",
-        officalAddress: "https://www.changshangH.com",
-        assDevice: "水质检测"
-      }
-    ];
-    dataList.value = testData;
-    // pagination.total = data.total;
-    // pagination.pageSize = data.pageSize;
-    // pagination.currentPage = data.currentPage;
-
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
+    getFacList();
   }
   /** 高亮当前权限选中行 */
   function rowStyle({ row: { id } }) {
@@ -220,8 +146,8 @@ export function useFacList() {
       return;
     }
     router.push({
-      path: "/fac-manage/fac-edit",
-      query: { editItem: JSON.stringify(multipleSelection.value[0]) }
+      path: "/fac-manage/fac-edit2",
+      query: { id: multipleSelection.value[0].id }
     });
     console.log("multipleSelection", multipleSelection.value);
   }
@@ -237,6 +163,68 @@ export function useFacList() {
   //   }
   // };
 
+  // 获取厂商列表
+  const getFacList = async () => {
+    const { data } = await getManufacturerList({
+      pageNum: pagination.currentPage,
+      pageSize: pagination.pageSize
+      // manufacturerType: manufacturerType.value
+    });
+    dataList.value = data.records;
+    pagination.total = data.total;
+    // pagination.pageSize = data.pageSize;
+    // pagination.currentPage = data.currentPage;
+    loading.value = false;
+  };
+  // 删除厂商
+  const handleDelete = async () => {
+    console.log("multipleSelection", multipleSelection.value);
+    if (multipleSelection.value.length === 0) {
+      ElMessage.warning("至少选择一条数据进行删除");
+      return;
+    }
+    // 删除前确认是否删除
+    ElMessageBox.confirm("确定要删除吗？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning"
+    })
+      .then(async () => {
+        console.log("multipleSelection", multipleSelection.value);
+        const res = await deleteManufacturer({
+          ids: multipleSelection.value.map(item => item.id)
+        });
+        console.log("data", res);
+
+        if (res.code === "0") {
+          ElMessage.success("删除成功");
+          getFacList();
+        } else {
+          ElMessage.error("删除失败");
+        }
+      })
+      .catch(() => {
+        ElMessage.info("已取消删除");
+        console.log("取消删除");
+      });
+
+    // else if (multipleSelection.value.length > 1) {
+    //   ElMessage.warning("只能选择一条数据进行删除");
+    //   return;
+    // }
+    // const { data } = await deleteManufacturer({
+    //   ids: multipleSelection.value.map(item => item.id)
+    // });
+    // console.log("data", data);
+
+    // if (data.code === "0") {
+    //   ElMessage.success("删除成功");
+    //   getFacList();
+    // } else {
+    //   ElMessage.error("删除失败");
+    // }
+  };
+
   const goBack = () => {
     router.push("/welcome");
   };
@@ -245,6 +233,17 @@ export function useFacList() {
     router.push("/fac-manage/fac-create");
   };
 
+  // 跳转到导入页面
+  const goImport = () => {
+    router.push("/import-templete");
+  };
+
+  // 导出全部列表数据
+  const exportAll = async () => {
+    const res = await exportManufacturer();
+    downloadFile(res, "厂商列表");
+  };
+
   onMounted(async () => {
     onSearch();
     // const { data } = await getMenuList({ pageNum: 1, pageSize: 1000 });
@@ -268,6 +267,10 @@ export function useFacList() {
     handleSizeChange,
     handleCurrentChange,
     handleSelectionChange,
-    handleEdit
+    handleEdit,
+    getFacList,
+    handleDelete,
+    goImport,
+    exportAll
   };
 }

src/views/fac-manage/fac-select/index.vue

@@ -9,9 +9,9 @@
     >
       <el-row>
         <el-col :span="6">
-          <el-form-item label="厂商名称" prop="name">
+          <el-form-item label="厂商名称" prop="manufacturerName">
             <el-input
-              v-model="form.name"
+              v-model="form.manufacturerName"
               placeholder="请输入厂商名称"
               clearable
               class="w-[180px]!"
@@ -19,9 +19,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="厂商简称" prop="abbreviation">
+          <el-form-item label="厂商简称" prop="manufacturerAbbreviation">
             <el-input
-              v-model="form.abbreviation"
+              v-model="form.manufacturerAbbreviation"
               placeholder="请输入厂商简称"
               clearable
               class="w-[180px]!"
@@ -41,9 +41,9 @@
       </el-row>
       <el-row>
         <el-col :span="6">
-          <el-form-item label="厂商类型" prop="facType">
+          <el-form-item label="厂商类型" prop="manufacturerType">
             <el-select
-              v-model="form.facType"
+              v-model="form.manufacturerType"
               clearable
               class="w-[180px]!"
               placeholder="请选择厂商类型"
@@ -57,7 +57,7 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="6">
+        <!-- <el-col :span="6">
           <el-form-item label="关联设备" prop="assDevice">
             <el-input
               v-model="form.assDevice"
@@ -66,11 +66,11 @@
               clearable
             />
           </el-form-item>
-        </el-col>
+        </el-col> -->
         <el-col :span="6">
-          <el-form-item label="总部地址：" prop="hqAddress">
+          <el-form-item label="总部地址" prop="manufacturerAddress">
             <el-input
-              v-model="form.hqAddress"
+              v-model="form.manufacturerAddress"
               placeholder="请输入总部地址"
               class="w-[180px]!"
               clearable
@@ -80,9 +80,9 @@
       </el-row>
       <el-row class="mb-2">
         <el-col :span="12" :offset="8">
-          <el-button type="success">查询</el-button>
-          <el-button>取消</el-button>
-          <el-button @click="resetForm(formRef)">重置</el-button>
+          <el-button type="success" @click="onSearch">查询</el-button>
+          <el-button @click="resetForm(formRef)">取消</el-button>
+          <!-- <el-button @click="resetForm(formRef)">重置</el-button> -->
         </el-col>
       </el-row>
     </el-form>

src/views/fac-manage/fac-select/utils/hook.tsx

@@ -3,29 +3,54 @@ import { ElMessage } from "element-plus";
 import type { UploadProps } from "element-plus";
 import { useRouter } from "vue-router";
 import type { PaginationProps } from "@pureadmin/table";
+import { getManufacturerList } from "@/api/manufacturer";
 
 export function useFacList() {
+  // const form = reactive({
+  //   manufacturerAbbreviation: "",
+  //   abbreviation: "",
+  //   creditCode: "",
+  //   contactPerson: "",
+  //   facType: "hardware",
+  //   facTypeList: [
+  //     { label: "硬件", value: "hardware" },
+  //     { label: "软件", value: "software" },
+  //     { label: "云服务", value: "cloud" },
+  //     { label: "解决方案", value: "solution" }
+  //   ],
+  //   hqAddress: "",
+  //   officalAddress: "",
+  //   notes: "",
+  //   assDevice: "device1",
+  //   assDeviceList: [
+  //     { label: "设备1", value: "device1" },
+  //     { label: "设备2", value: "device2" },
+  //     { label: "设备3", value: "device3" }
+  //   ]
+  // });
+  // 使用reactive创建一个响应式对象，用于存储表单数据
   const form = reactive({
-    name: "",
-    abbreviation: "",
-    creditCode: "",
-    contactPerson: "",
-    facType: "hardware",
+    manufacturerName: "", // 厂商名称
+    manufacturerAbbreviation: "", // 厂商简称
+    creditCode: "", // 信用代码
+    manufacturerPhone: "", // 厂商电话
+    manufacturerType: "", // 厂商类型
     facTypeList: [
-      { label: "硬件", value: "hardware" },
-      { label: "软件", value: "software" },
-      { label: "云服务", value: "cloud" },
-      { label: "解决方案", value: "solution" }
+      { label: "硬件", value: "硬件" }, // 硬件
+      { label: "软件", value: "软件" }, // 软件
+      { label: "云服务", value: "云服务" }, // 云服务
+      { label: "解决方案", value: "解决方案" } // 解决方案
     ],
-    hqAddress: "",
-    officalAddress: "",
-    notes: "",
-    assDevice: "device1",
-    assDeviceList: [
-      { label: "设备1", value: "device1" },
-      { label: "设备2", value: "device2" },
-      { label: "设备3", value: "device3" }
-    ]
+    manufacturerAddress: "", // 厂商地址
+    manufacturerUrl: "", // 厂商网址
+    notes: "", // 备注
+    // assDevice: "device1", // 关联设备
+    // assDeviceList: [
+    //   { label: "设备1", value: "device1" }, // 设备1
+    //   { label: "设备2", value: "device2" }, // 设备2
+    //   { label: "设备3", value: "device3" } // 设备3
+    // ]
+    fileId: "" // 文件ID
   });
   const loading = ref(false);
   const imageUrl = ref("");
@@ -35,48 +60,51 @@ export function useFacList() {
   const dataList = ref([]);
   const multipleSelection = ref([]);
 
-  const filterFacType = (value, row) => {
-    return row.facType === value;
-  };
+  // const filterFacType = (value, row) => {
+  //   return row.facType === value;
+  // };
 
-  const filterassDevice = (value, row) => {
-    return row.assDevice === value;
-  };
+  // const filterassDevice = (value, row) => {
+  //   return row.assDevice === value;
+  // };
 
   const columns: TableColumnList = [
     {
       type: "selection",
       align: "left"
     },
-    { prop: "orderNumber", label: "序号", width: 70 },
-    { prop: "name", label: "厂商名称", width: 80 },
-    { prop: "abbreviation", label: "厂商简称" },
+    { type: "index", label: "序号", width: 70 },
+    // { prop: "orderNumber", label: "序号", width: 70 },
+    { prop: "manufacturerName", label: "厂商名称", width: 80 },
+    { prop: "manufacturerAbbreviation", label: "厂商简称" },
     { prop: "creditCode", label: "统一社会信用代号/税号" },
     {
-      prop: "facType",
-      label: "厂商类型",
-      filters: [
-        { text: "类型1", value: "类型1" },
-        { text: "类型2", value: "类型2" },
-        { text: "类型3", value: "类型3" }
-      ],
-      filterMethod: filterFacType,
-      filterPlacement: "bottom-end",
-      slot: "tag"
+      prop: "manufacturerType",
+      label: "厂商类型"
+      // filters: [
+      //   { text: "类型1", value: "类型1" },
+      //   { text: "类型2", value: "类型2" },
+      //   { text: "类型3", value: "类型3" }
+      // ],
+      // filterMethod: filterFacType,
+      // filterPlacement: "bottom-end",
+      // slot: "tag"
     },
-    { prop: "address", label: "总部地址" },
-    { prop: "officalAddress", label: "官网地址" },
-    {
-      prop: "assDevice",
-      label: "关联设备",
-      filters: [
-        { text: "水质检测", value: "水质检测" },
-        { text: "噪声检测", value: "噪声检测" }
-      ],
-      filterMethod: filterassDevice,
-      filterPlacement: "bottom-end",
-      slot: "tag"
-    }
+    { prop: "manufacturerAddress", label: "总部地址" },
+    { prop: "manufacturerUrl", label: "官网地址" },
+    { prop: "createBy", label: "创建人" },
+    { prop: "createTime", label: "创建时间" }
+    // {
+    //   prop: "assDevice",
+    //   label: "关联设备",
+    //   filters: [
+    //     { text: "水质检测", value: "水质检测" },
+    //     { text: "噪声检测", value: "噪声检测" }
+    //   ],
+    //   filterMethod: filterassDevice,
+    //   filterPlacement: "bottom-end",
+    //   slot: "tag"
+    // }
   ];
 
   const pagination = reactive<PaginationProps>({
@@ -115,98 +143,100 @@ export function useFacList() {
 
   async function onSearch() {
     loading.value = true;
-    // const { data } = await getRoleList(toRaw(form));
-    // dataList.value = data.records;
-    const testData = [
-      {
-        orderNumber: 1,
-        name: "厂商A",
-        abbreviation: "A厂",
-        creditCode: "123456789012345678",
-        facType: "类型1",
-        address: "北京市朝阳区",
-        officalAddress: "https://www.changshangA.com",
-        assDevice: "水质检测"
-      },
-      {
-        orderNumber: 2,
-        name: "厂商B",
-        abbreviation: "B厂",
-        creditCode: "987654321098765432",
-        facType: "类型2",
-        address: "上海市浦东新区",
-        officalAddress: "https://www.changshangB.com",
-        assDevice: "噪声检测"
-      },
-      {
-        orderNumber: 3,
-        name: "厂商C",
-        abbreviation: "C厂",
-        creditCode: "112233445566778899",
-        facType: "类型1",
-        address: "广州市天河区",
-        officalAddress: "https://www.changshangC.com",
-        assDevice: "水质检测"
-      },
-      {
-        orderNumber: 4,
-        name: "厂商D",
-        abbreviation: "D厂",
-        creditCode: "998877665544332211",
-        facType: "类型3",
-        address: "深圳市南山区",
-        officalAddress: "https://www.changshangD.com",
-        assDevice: "水质检测"
-      },
-      {
-        orderNumber: 5,
-        name: "厂商E",
-        abbreviation: "E厂",
-        creditCode: "556677889900112233",
-        facType: "类型2",
-        address: "杭州市西湖区",
-        officalAddress: "https://www.changshangE.com",
-        assDevice: "噪声检测"
-      },
-      {
-        orderNumber: 6,
-        name: "厂商F",
-        abbreviation: "F厂",
-        creditCode: "334455667788990011",
-        facType: "类型1",
-        address: "成都市武侯区",
-        officalAddress: "https://www.changshangF.com",
-        assDevice: "噪声检测"
-      },
-      {
-        orderNumber: 7,
-        name: "厂商G",
-        abbreviation: "G厂",
-        creditCode: "778899001122334455",
-        facType: "类型3",
-        address: "南京市鼓楼区",
-        officalAddress: "https://www.changshangG.com",
-        assDevice: "噪声检测"
-      },
-      {
-        orderNumber: 8,
-        name: "厂商H",
-        abbreviation: "H厂",
-        creditCode: "990011223344556677",
-        facType: "类型2",
-        address: "武汉市洪山区",
-        officalAddress: "https://www.changshangH.com",
-        assDevice: "水质检测"
-      }
-    ];
-    dataList.value = testData;
-    // pagination.total = data.total;
-    // pagination.pageSize = data.pageSize;
-    // pagination.currentPage = data.currentPage;
+    // // const { data } = await getRoleList(toRaw(form));
+    // // dataList.value = data.records;
+    // const testData = [
+    //   {
+    //     orderNumber: 1,
+    //     name: "厂商A",
+    //     abbreviation: "A厂",
+    //     creditCode: "123456789012345678",
+    //     facType: "类型1",
+    //     address: "北京市朝阳区",
+    //     officalAddress: "https://www.changshangA.com",
+    //     assDevice: "水质检测"
+    //   },
+    //   {
+    //     orderNumber: 2,
+    //     name: "厂商B",
+    //     abbreviation: "B厂",
+    //     creditCode: "987654321098765432",
+    //     facType: "类型2",
+    //     address: "上海市浦东新区",
+    //     officalAddress: "https://www.changshangB.com",
+    //     assDevice: "噪声检测"
+    //   },
+    //   {
+    //     orderNumber: 3,
+    //     name: "厂商C",
+    //     abbreviation: "C厂",
+    //     creditCode: "112233445566778899",
+    //     facType: "类型1",
+    //     address: "广州市天河区",
+    //     officalAddress: "https://www.changshangC.com",
+    //     assDevice: "水质检测"
+    //   },
+    //   {
+    //     orderNumber: 4,
+    //     name: "厂商D",
+    //     abbreviation: "D厂",
+    //     creditCode: "998877665544332211",
+    //     facType: "类型3",
+    //     address: "深圳市南山区",
+    //     officalAddress: "https://www.changshangD.com",
+    //     assDevice: "水质检测"
+    //   },
+    //   {
+    //     orderNumber: 5,
+    //     name: "厂商E",
+    //     abbreviation: "E厂",
+    //     creditCode: "556677889900112233",
+    //     facType: "类型2",
+    //     address: "杭州市西湖区",
+    //     officalAddress: "https://www.changshangE.com",
+    //     assDevice: "噪声检测"
+    //   },
+    //   {
+    //     orderNumber: 6,
+    //     name: "厂商F",
+    //     abbreviation: "F厂",
+    //     creditCode: "334455667788990011",
+    //     facType: "类型1",
+    //     address: "成都市武侯区",
+    //     officalAddress: "https://www.changshangF.com",
+    //     assDevice: "噪声检测"
+    //   },
+    //   {
+    //     orderNumber: 7,
+    //     name: "厂商G",
+    //     abbreviation: "G厂",
+    //     creditCode: "778899001122334455",
+    //     facType: "类型3",
+    //     address: "南京市鼓楼区",
+    //     officalAddress: "https://www.changshangG.com",
+    //     assDevice: "噪声检测"
+    //   },
+    //   {
+    //     orderNumber: 8,
+    //     name: "厂商H",
+    //     abbreviation: "H厂",
+    //     creditCode: "990011223344556677",
+    //     facType: "类型2",
+    //     address: "武汉市洪山区",
+    //     officalAddress: "https://www.changshangH.com",
+    //     assDevice: "水质检测"
+    //   }
+    // ];
+    // dataList.value = testData;
+    // // pagination.total = data.total;
+    // // pagination.pageSize = data.pageSize;
+    // // pagination.currentPage = data.currentPage;
 
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
+    // setTimeout(() => {
+    //   loading.value = false;
+    // }, 500);
+
+    getFacList();
   }
   /** 高亮当前权限选中行 */
   function rowStyle({ row: { id } }) {
@@ -218,10 +248,15 @@ export function useFacList() {
 
   function handleSizeChange(val: number) {
     console.log(`${val} items per page`);
+    // 查询完掉接口
+    pagination.pageSize = val;
+    onSearch();
   }
 
   function handleCurrentChange(val: number) {
     console.log(`current page: ${val}`);
+    pagination.currentPage = val;
+    onSearch();
   }
 
   function handleSelectionChange(val) {
@@ -256,6 +291,22 @@ export function useFacList() {
   //   }
   // };
 
+  // 获取厂商列表
+  const getFacList = async () => {
+    // 合并参数form与pagination
+    const params = {
+      ...form,
+      pageNum: pagination.currentPage,
+      pageSize: pagination.pageSize
+    };
+    const { data } = await getManufacturerList(params);
+    dataList.value = data.records;
+    pagination.total = data.total;
+    // pagination.pageSize = data.pageSize;
+    // pagination.currentPage = data.currentPage;
+    loading.value = false;
+  };
+
   const goBack = () => {
     router.push("/welcome");
   };

vite.config.ts

@@ -30,7 +30,7 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
           // 这里填写后端地址
 
           // 旭哥地址
-          // target: "http://192.168.1.180:5001",
+          // target: "http:/192.168.0.86:5001",
           // 服务器地址
           target: "http://192.168.1.248:5001",
           // 熊熊哥地址