提交 0dda481a authored 作者: hejie's avatar hejie

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

上级 f36eb594
......@@ -316,6 +316,8 @@
"watchThrottled": true,
"watchTriggerable": true,
"watchWithFilter": true,
"whenever": true
"whenever": true,
"ElMessageBox": true,
"ElMessage": true
}
}
......@@ -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']
......
......@@ -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
});
};
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"
}
}
);
};
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"
// }
// }
// );
// };
......@@ -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` */
......
......@@ -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` */
......
<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> -->
//
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
}
}
]
};
//
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,
......
......@@ -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) {
......
......@@ -12,7 +12,7 @@ import {
type RefreshTokenResult,
getLogin,
refreshTokenApi
} from "@/api/user";
} from "@/api/systems";
import { useMultiTagsStoreHook } from "./multiTags";
import {
type DataInfo,
......
// 定义一个方法,处理后端返回的二进制流,斌下载文件
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();
}
......@@ -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";
......
<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";
......
<script setup lang="ts">
defineOptions({
name: "DeviceDetail"
});
import { reactive } from "vue";
import { useListHook } from "./utils/listHook";
import type { TabsPaneContext } from "element-plus";
......
<script setup lang="ts">
defineOptions({
name: "DeviceDetail2"
});
import { reactive } from "vue";
import { useListHook } from "./utils/listHook";
......
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";
......
......@@ -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">
......
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
};
}
......@@ -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]!"
......
......@@ -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();
......
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
};
}
......@@ -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>
......
......@@ -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",
// 熊熊哥地址
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论