src/router/index.js

@@ -1,6 +1,6 @@
-import { createWebHistory, createRouter } from 'vue-router'
+import { createWebHistory, createRouter } from "vue-router";
 /* Layout */
-import Layout from '@/layoutMain'
+import Layout from "@/layoutMain";
 
 /**
  * Note: 路由配置项
@@ -27,40 +27,40 @@ import Layout from '@/layoutMain'
 // 公共路由
 export const constantRoutes = [
   {
-    path: '/redirect',
+    path: "/redirect",
     component: Layout,
     hidden: true,
     children: [
       {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect/index.vue')
-      }
-    ]
+        path: "/redirect/:path(.*)",
+        component: () => import("@/views/redirect/index.vue"),
+      },
+    ],
   },
   {
-    path: '/login',
-    component: () => import('@/views/login'),
-    hidden: true
+    path: "/login",
+    component: () => import("@/views/login"),
+    hidden: true,
   },
   {
-    path: '/register',
-    component: () => import('@/views/register'),
-    hidden: true
+    path: "/register",
+    component: () => import("@/views/register"),
+    hidden: true,
   },
   {
     path: "/:pathMatch(.*)*",
-    component: () => import('@/views/error/404'),
-    hidden: true
+    component: () => import("@/views/error/404"),
+    hidden: true,
   },
   {
-    path: '/401',
-    component: () => import('@/views/error/401'),
-    hidden: true
+    path: "/401",
+    component: () => import("@/views/error/401"),
+    hidden: true,
   },
   {
-    path: '/',
+    path: "/",
     component: Layout,
-    redirect: '/material',
+    redirect: "/material",
     // children: [
     //   {
     //     path: 'index',
@@ -72,129 +72,142 @@ export const constantRoutes = [
   },
 
   {
-    path: '/',
+    path: "/",
     component: Layout,
-    meta: { title: '', icon: ''},
+    meta: { title: "", icon: "" },
     children: [
       {
-        path: 'material',
-        component: () => import('@/views/material/index'),
-        name: 'Material',
-        meta: { noCache: true , title: '工具管理', icon: 'tool' },
+        path: "material",
+        component: () => import("@/views/material/index"),
+        name: "Material",
+        meta: { noCache: true, title: "工具管理", icon: "tool" },
       },
-    ]
+    ],
   },
   {
-    path: '/',
+    path: "/",
     component: Layout,
-    meta: { title: '', icon: ''},
+    meta: { title: "", icon: "" },
     children: [
       {
-        path: 'classification',
-        component: () => import('@/views/classification/index'),
-        name: 'Classification',
-        meta: { noCache: true ,title: '分类管理', icon: 'tree-table'}
+        path: "classification",
+        component: () => import("@/views/classification/index"),
+        name: "Classification",
+        meta: { noCache: true, title: "分类管理", icon: "tree-table" },
       },
-    ]
+    ],
   },
   {
-    path: '/',
+    path: "/",
     component: Layout,
-    meta: { title: '', icon: ''},
+    meta: { title: "", icon: "" },
     hidden: true,
     children: [
       {
-        path: 'toolsMaterial',
-        component: () => import('@/views/toolsMaterial/index'),
-        name: 'toolsMaterial',
-        meta: { title: '物料管理', icon: 'component' },
+        path: "toolsMaterial",
+        component: () => import("@/views/toolsMaterial/index"),
+        name: "toolsMaterial",
+        meta: { title: "物料管理", icon: "component" },
       },
-    ]
+    ],
   },
-]
+  // {
+  //   path: "/",
+  //   component: Layout,
+  //   meta: { title: "", icon: "" },
+  //   children: [
+  //     {
+  //       path: "commonTools",
+  //       component: () => import("@/views/commonTools/index"),
+  //       name: "CommonTools",
+  //       meta: { noCache: true, title: "常用工具管理", icon: "system" },
+  //     },
+  //   ],
+  // },
+];
 
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = [
   {
-    path: '/system/user-auth',
+    path: "/system/user-auth",
     component: Layout,
     hidden: true,
-    permissions: ['system:user:edit'],
+    permissions: ["system:user:edit"],
     children: [
       {
-        path: 'role/:userId(\\d+)',
-        component: () => import('@/views/system/user/authRole'),
-        name: 'AuthRole',
-        meta: { title: '分配角色', activeMenu: '/system/user' }
-      }
-    ]
+        path: "role/:userId(\\d+)",
+        component: () => import("@/views/system/user/authRole"),
+        name: "AuthRole",
+        meta: { title: "分配角色", activeMenu: "/system/user" },
+      },
+    ],
   },
   {
-    path: '/system/role-auth',
+    path: "/system/role-auth",
     component: Layout,
     hidden: true,
-    permissions: ['system:role:edit'],
+    permissions: ["system:role:edit"],
     children: [
       {
-        path: 'user/:roleId(\\d+)',
-        component: () => import('@/views/system/role/authUser'),
-        name: 'AuthUser',
-        meta: { title: '分配用户', activeMenu: '/system/role' }
-      }
-    ]
+        path: "user/:roleId(\\d+)",
+        component: () => import("@/views/system/role/authUser"),
+        name: "AuthUser",
+        meta: { title: "分配用户", activeMenu: "/system/role" },
+      },
+    ],
   },
   {
-    path: '/system/dict-data',
+    path: "/system/dict-data",
     component: Layout,
     hidden: true,
-    permissions: ['system:dict:list'],
+    permissions: ["system:dict:list"],
     children: [
       {
-        path: 'index/:dictId(\\d+)',
-        component: () => import('@/views/system/dict/data'),
-        name: 'Data',
-        meta: { title: '字典数据', activeMenu: '/system/dict' }
-      }
-    ]
+        path: "index/:dictId(\\d+)",
+        component: () => import("@/views/system/dict/data"),
+        name: "Data",
+        meta: { title: "字典数据", activeMenu: "/system/dict" },
+      },
+    ],
   },
   {
-    path: '/monitor/job-log',
+    path: "/monitor/job-log",
     component: Layout,
     hidden: true,
-    permissions: ['monitor:job:list'],
+    permissions: ["monitor:job:list"],
     children: [
       {
-        path: 'index/:jobId(\\d+)',
-        component: () => import('@/views/monitor/job/log'),
-        name: 'JobLog',
-        meta: { title: '调度日志', activeMenu: '/monitor/job' }
-      }
-    ]
+        path: "index/:jobId(\\d+)",
+        component: () => import("@/views/monitor/job/log"),
+        name: "JobLog",
+        meta: { title: "调度日志", activeMenu: "/monitor/job" },
+      },
+    ],
   },
   {
-    path: '/tool/gen-edit',
+    path: "/tool/gen-edit",
     component: Layout,
     hidden: true,
-    permissions: ['tool:gen:edit'],
+    permissions: ["tool:gen:edit"],
     children: [
       {
-        path: 'index/:tableId(\\d+)',
-        component: () => import('@/views/tool/gen/editTable'),
-        name: 'GenEdit',
-        meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
-      }
-    ]
-  }
-]
+        path: "index/:tableId(\\d+)",
+        component: () => import("@/views/tool/gen/editTable"),
+        name: "GenEdit",
+        meta: { title: "修改生成配置", activeMenu: "/tool/gen" },
+      },
+    ],
+  },
+];
 
 const router = createRouter({
   history: createWebHistory(),
   routes: constantRoutes,
   scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {
-      return savedPosition
+      return savedPosition;
     } else {
-      return { top: 0 }
+      return { top: 0 };
     }
   },
 });

src/views/classification/index.vue

@@ -26,10 +26,7 @@
           >删除</el-button
         >
       </el-col>
-      <right-toolbar
-        :search="false"
-        @queryTable="getList"
-      ></right-toolbar>
+      <right-toolbar :search="false" @queryTable="getList"></right-toolbar>
     </el-row>
     <el-table
       v-loading="loading"
@@ -53,7 +50,7 @@
             link
             type="primary"
             icon="Plus"
-            @click="handleAdd(scope.row,scope)"
+            @click="handleAdd(scope.row, scope)"
             >新增</el-button
           >
           <el-button
@@ -139,7 +136,9 @@
       </el-form>
       <template #footer>
         <div style="text-align: center">
-          <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="submitForm"
+            >确 定</el-button
+          >
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>

src/views/commonTools/hooks/useSubmitForm.js

@@ -0,0 +1,100 @@
+import { toolAdd, toolUpdate } from "@/api/bussiness";
+// 提交表单的 hooks
+const useSubmitForm = (getList) => {
+  const { proxy } = getCurrentInstance();
+  // 弹窗是否打开
+  const open = ref(false);
+  // 弹窗的标题
+  const title = ref("");
+  // 表单的 loading 状态
+  const formLoading = ref(false);
+  // 提交表单loading
+  const submitLoading = ref(false);
+  const data = reactive({
+    // 表单数据
+    form: {
+      toolName: undefined,
+    },
+    // 表单规则
+    rules: {
+      toolName: [
+        { required: true, message: "工具名称不能为空", trigger: "blur" },
+      ],
+    },
+  });
+
+  const { form, rules } = toRefs(data);
+
+  // 表单重置
+  const reset = () => {
+    form.value = {
+      toolName: undefined,
+    };
+    proxy.resetForm("toolTypesRef");
+  };
+
+  // 更新工具
+  const updateToolType = () => {
+    const baseParams = {
+      ...form.value,
+    };
+    toolUpdate(baseParams)
+      .then((res) => {
+        proxy.$modal.msgSuccess("修改成功");
+        open.value = false;
+        getList();
+      })
+      .finally(() => {
+        submitLoading.value = false;
+      });
+  };
+
+  // 添加工具
+  const addToolType = () => {
+    const params = {
+      ...form.value,
+    };
+    toolAdd(params)
+      .then((res) => {
+        proxy.$modal.msgSuccess("新增成功");
+        submitLoading.value = false;
+        open.value = false;
+        getList();
+      })
+      .finally(() => {
+        submitLoading.value = false;
+      });
+  };
+
+  // 提交按钮
+  const submitForm = () => {
+    proxy.$refs["toolTypesRef"].validate((valid) => {
+      if (valid) {
+        submitLoading.value = true;
+        if (form.value.id != undefined) {
+          updateToolType();
+        } else {
+          addToolType();
+        }
+      }
+    });
+  };
+  // 取消按钮
+  const cancel = () => {
+    open.value = false;
+    reset();
+  };
+  return {
+    title,
+    open,
+    form,
+    rules,
+    formLoading,
+    submitLoading,
+    reset,
+    submitForm,
+    cancel,
+  };
+};
+
+export default useSubmitForm;

src/views/commonTools/hooks/useTable.js

@@ -0,0 +1,83 @@
+import { getToolDetailById, toolDelete } from "@/api/bussiness";
+
+// 数据表格的 hooks
+const useTable = (getList, reset, open, title, form, formLoading) => {
+  const { proxy } = getCurrentInstance();
+  // 表格数据列表
+  const toolList = ref([]);
+  // 表格loading状态
+  const loading = ref(true);
+  // 表格勾选框选中的 id 列表
+  const ids = ref([]);
+  // 多个勾选时为 true 其他为 false
+  const single = ref(true);
+  // 只要有勾选项就为 true
+  const multiple = ref(true);
+
+  // 多选框选中数据
+  const handleSelectionChange = (selection) => {
+    ids.value = selection.map((item) => item.id);
+    single.value = selection.length != 1;
+    multiple.value = !selection.length;
+  };
+
+  // 新增按钮操作
+  const handleAdd = (row) => {
+    reset();
+    open.value = true;
+    title.value = "添加工具";
+  };
+
+  // 点击表格上的修改按钮
+  // const handleSelecterUpdate = () => {
+  //   const targetId = ids.value[0];
+  //   formLoading.value = true;
+  //   getToolDetailById(targetId).then((res) => {
+  //     handleUpdate(res.data);
+  //   });
+  // };
+
+  // 修改按钮操作
+  const handleUpdate = (row) => {
+    reset();
+    open.value = true;
+    formLoading.value = true;
+    getToolDetailById(row.id)
+      .then((res) => {
+        form.value = {
+          id: row.id,
+          toolName: res.data.toolName,
+        };
+        title.value = "修改工具";
+      })
+      .finally(() => (formLoading.value = false));
+  };
+  // 删除按钮操作
+  const handleDelete = (row) => {
+    const toolIds = row.id || ids.value;
+    proxy.$modal
+      .confirm("是否确认删除该常用工具？")
+      .then(function () {
+        return toolDelete(toolIds);
+      })
+      .then(() => {
+        getList();
+        proxy.$modal.msgSuccess("删除成功");
+      })
+      .catch(() => {});
+  };
+
+  return {
+    toolList,
+    loading,
+    single,
+    multiple,
+    handleAdd,
+    // handleSelecterUpdate,
+    handleUpdate,
+    handleDelete,
+    handleSelectionChange,
+  };
+};
+
+export default useTable;

src/views/commonTools/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd"
+          >新增</el-button
+        >
+      </el-col>
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleSelecterUpdate"
+          >修改</el-button
+        >
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          >删除</el-button
+        >
+      </el-col>
+      <right-toolbar :search="false" @queryTable="getList"></right-toolbar>
+    </el-row>
+    <el-table
+      v-loading="loading"
+      :data="toolList"
+      row-key="id"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="工具名称" prop="toolName" />
+      <el-table-column
+        label="操作"
+        width="220"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+            >修改</el-button
+          >
+          <el-button
+            link
+            type="danger"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 添加或修改弹窗 -->
+    <el-dialog
+      :title="title"
+      v-model="open"
+      width="500px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="toolTypesRef"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+        v-loading="formLoading"
+      >
+        <el-form-item label="工具名称" prop="toolName">
+          <el-input v-model="form.toolName" placeholder="请输入工具名称" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div style="text-align: center">
+          <el-button type="primary" :loading="submitLoading" @click="submitForm"
+            >确 定</el-button
+          >
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="CommonTools">
+import useSubmitForm from "./hooks/useSubmitForm.js";
+import useTable from "./hooks/useTable.js";
+import { listTools } from "@/api/bussiness";
+
+// 查询分类列表
+const getList = (params) => {
+  loading.value = true;
+  listTools({
+    ...params,
+    pageNum: 1,
+    pageSize: 10,
+    level: "3",
+    delFlag: "0",
+  }).then((res) => {
+    toolList.value = res.rows;
+    loading.value = false;
+  });
+};
+
+// 提交表单
+const {
+  title,
+  open,
+  form,
+  rules,
+  formLoading,
+  submitLoading,
+  reset,
+  submitForm,
+  cancel,
+} = useSubmitForm(getList);
+// 表格列表
+const {
+  toolList,
+  loading,
+  single,
+  multiple,
+  handleAdd,
+  handleUpdate,
+  // handleSelecterUpdate,
+  handleDelete,
+  handleSelectionChange,
+} = useTable(getList, reset, open, title, form, formLoading);
+
+getList();
+</script>

src/views/login.vue

@@ -235,13 +235,13 @@ $blueQueen: rgb(21, 121, 255);
   background: rgba(255, 255, 255, 0.6);
   box-shadow: 0px 2px 10px 0px rgba(39, 54, 100, 0.1);
   backdrop-filter: blur(8px);
-  .login-welcome{
+  .login-welcome {
     font-family: Helvetica;
     font-size: 24px;
-    color: #004EA2;
+    color: #004ea2;
     line-height: 32px;
   }
-  .login-welcome-en{
+  .login-welcome-en {
     font-weight: 500;
     font-size: 18px;
     color: rgba(#326fb0, 0.8);
@@ -264,7 +264,7 @@ $blueQueen: rgb(21, 121, 255);
   &::before {
     left: 45%;
     bottom: -75%;
-    background-color: rgba($blueQueen,0.15);
+    background-color: rgba($blueQueen, 0.15);
     animation: wawes 10s infinite linear;
   }
 

src/views/toolsMaterial/index.vue

@@ -117,6 +117,11 @@
             >删除</el-button
           >
         </el-col>
+        <el-col :span="1.5">
+          <el-button type="primary" plain icon="Delete" @click="handleImport"
+            >导入</el-button
+          >
+        </el-col>
         <right-toolbar
           v-model:showSearch="showSearch"
           @queryTable="handleQuery"
@@ -207,15 +212,64 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 导入弹框 -->
+    <el-dialog
+      :title="upload.title"
+      v-model="upload.open"
+      width="50vw"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <div class="el-upload__tip" slot="tip">
+        <el-button
+          type="warning"
+          style="font-size: 13px; margin: 10px"
+          @click="importTemplate"
+          >下载模板</el-button
+        >
+        <el-upload
+          ref="uploadRef"
+          :limit="1"
+          accept=".xlsx, .xls"
+          :headers="upload.headers"
+          :data="upload.data"
+          :action="upload.url"
+          :disabled="upload.isUploading"
+          :on-progress="handleFileUploadProgress"
+          :on-success="handleFileSuccess"
+          :auto-upload="false"
+          drag
+        >
+          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+          <div class="el-upload__text">
+            将文件拖到此处，或
+            <em>点击上传</em>
+          </div>
+
+          <div class="el-upload__tip" style="color: red" slot="tip">
+            提示：仅允许导入“xls”或“xlsx”格式文件！
+          </div>
+        </el-upload>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          <el-button @click="upload.open = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="ToolsMaterial">
+import { reactive } from "vue";
 import useInit from "./hooks/useInit";
 import useSearchForm from "./hooks/useSearchForm.js";
 import useSubmitForm from "./hooks/useSubmitForm.js";
 import useTable from "./hooks/useTable.js";
 import { listFileByBasisId } from "@/api/bussiness";
+import { getToken } from "@/utils/auth";
 
 const { proxy } = getCurrentInstance();
 
@@ -277,6 +331,54 @@ watch(
     immediate: true,
   }
 );
+
+// 导入参数
+const upload = reactive({
+  // 是否显示弹出层（用户导入）
+  open: false,
+  // 弹出层标题（用户导入）
+  title: "导入",
+  // 是否禁用上传
+  isUploading: false,
+  // 设置上传的请求头部
+  headers: { Authorization: "Bearer " + getToken() },
+  // 参数
+  data: { basisId: +toolId.value },
+  // 上传的地址
+  url: import.meta.env.VITE_APP_BASE_API + "/basis/detail/importData",
+});
+
+// 导入
+const handleImport = () => {
+  upload.title = "物料导入";
+  upload.open = true;
+};
+// 下载模版
+const importTemplate = () => {
+  window.location.href = "/物料导入模版.xlsx";
+};
+// 文件上传中
+const handleFileUploadProgress = (event, file, fileList) => {
+  upload.isUploading = true;
+};
+// 文件上传成功
+const handleFileSuccess = (response, file, fileList) => {
+  upload.open = false;
+  upload.isUploading = false;
+  proxy.$refs["uploadRef"].handleRemove(file);
+  proxy.$alert(
+    "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
+      response.msg +
+      "</div>",
+    "导入结果",
+    { dangerouslyUseHTMLString: true }
+  );
+  getList();
+};
+// 提交上传文件
+const submitFileForm = () => {
+  proxy.$refs["uploadRef"].submit();
+};
 </script>
 
 <style lang="scss" scoped>

vite.config.js

@@ -1,27 +1,27 @@
-import { defineConfig, loadEnv } from 'vite'
-import path from 'path'
-import createVitePlugins from './vite/plugins'
+import { defineConfig, loadEnv } from "vite";
+import path from "path";
+import createVitePlugins from "./vite/plugins";
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {
-  const env = loadEnv(mode, process.cwd())
-  const { VITE_APP_ENV } = env
+  const env = loadEnv(mode, process.cwd());
+  const { VITE_APP_ENV } = env;
   return {
     // 部署生产环境和开发环境下的URL。
     // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
     // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
-    base: VITE_APP_ENV === 'production' ? '/' : '/',
-    plugins: createVitePlugins(env, command === 'build'),
+    base: VITE_APP_ENV === "production" ? "/" : "/",
+    plugins: createVitePlugins(env, command === "build"),
     resolve: {
       // https://cn.vitejs.dev/config/#resolve-alias
       alias: {
         // 设置路径
-        '~': path.resolve(__dirname, './'),
+        "~": path.resolve(__dirname, "./"),
         // 设置别名
-        '@': path.resolve(__dirname, './src')
+        "@": path.resolve(__dirname, "./src"),
       },
       // https://cn.vitejs.dev/config/#resolve-extensions
-      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
     },
     // vite 相关配置
     server: {
@@ -30,30 +30,30 @@ export default defineConfig(({ mode, command }) => {
       open: true,
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
-        '/dev-api': {
-          target: 'http://172.16.10.65:8080',
+        "/dev-api": {
+          target: "http://172.16.10.61:8080",
           // target: 'https://vue.ruoyi.vip/prod-api',
           changeOrigin: true,
-          rewrite: (p) => p.replace(/^\/dev-api/, '')
-        }
-      }
+          rewrite: (p) => p.replace(/^\/dev-api/, ""),
+        },
+      },
     },
     //fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
     css: {
       postcss: {
         plugins: [
           {
-            postcssPlugin: 'internal:charset-removal',
+            postcssPlugin: "internal:charset-removal",
             AtRule: {
               charset: (atRule) => {
-                if (atRule.name === 'charset') {
+                if (atRule.name === "charset") {
                   atRule.remove();
                 }
-              }
-            }
-          }
-        ]
-      }
-    }
-  }
-})
+              },
+            },
+          },
+        ],
+      },
+    },
+  };
+});