完善上传图片组件：编辑图片报错问题，感谢@秦白起

Merge pull request !4 from 晨曦/0416

.env.development

@@ -16,8 +16,14 @@ VITE_APP_MONITRO_ADMIN = 'http://localhost:9090/admin/applications'
 # powerjob 控制台地址
 VITE_APP_POWERJOB_ADMIN = 'http://localhost:7700/'
 
+# easyretry 控制台地址
+VITE_APP_EASYRETRY_ADMIN = 'http://localhost:8800/easy-retry'
+
 VITE_APP_PORT = 80
 
+VITE_APP_ENCRYPT_HEADER = 'encrypt-key'
+# 接口加密功能开关(如需关闭 后端也必须对应关闭)
+VITE_APP_ENCRYPT = true
 # 接口加密传输 RSA 公钥与后端解密私钥对应 如更换需前后端一同更换
 VITE_APP_RSA_PUBLIC_KEY = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
 # 接口响应解密 RSA 私钥与后端加密公钥对应 如更换需前后端一同更换

.env.production

@@ -13,6 +13,9 @@ VITE_APP_MONITRO_ADMIN = '/admin/applications'
 # powerjob 控制台地址
 VITE_APP_POWERJOB_ADMIN = '/powerjob'
 
+# easyretry 控制台地址
+VITE_APP_EASYRETRY_ADMIN = '/easy-retry'
+
 # 生产环境
 VITE_APP_BASE_API = '/prod-api'
 
@@ -21,6 +24,9 @@ VITE_BUILD_COMPRESS = gzip
 
 VITE_APP_PORT = 80
 
+VITE_APP_ENCRYPT_HEADER = 'encrypt-key'
+# 接口加密功能开关(如需关闭 后端也必须对应关闭)
+VITE_APP_ENCRYPT = true
 # 接口加密传输 RSA 公钥与后端解密私钥对应 如更换需前后端一同更换
 VITE_APP_RSA_PUBLIC_KEY = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
 # 接口响应解密 RSA 私钥与后端加密公钥对应 如更换需前后端一同更换

.gitignore

@@ -24,6 +24,8 @@ package-lock.json
 yarn.lock
 pnpm-lock.yaml
 
+*开发日志.txt
+
 # 编译生成的文件
 auto-imports.d.ts
 components.d.ts

Dockerfile

@@ -0,0 +1,9 @@
+FROM nginx
+
+MAINTAINER onesummer
+
+RUN rm /etc/nginx/conf.d/default.conf
+
+ADD default.conf /etc/nginx/conf.d/
+
+COPY dist/ /usr/share/nginx/html/

README.md

@@ -1,7 +1,7 @@
 <p align="center">
 	<img alt="logo" src="https://gitee.com/dataprince/ruoyi-flex/raw/master/image/ruoyi-flex-logo.png">
 </p>
-<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">Ruoyi-Flex V5.1.0</h1>
+<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">Ruoyi-Flex V5.2.0-SNAPSHOT</h1>
 <h4 align="center">Ruoyi-Flex是基于JDK21、Spring Boot V3.2.X+平台 前后端分离的未来8年更快的Java开发框架</h4>
 
 

default.conf

@@ -0,0 +1,29 @@
+server {
+    listen       80;
+    server_name  localhost;
+		charset utf-8;
+
+		location / {
+        root   /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+        index  index.html index.htm;
+    }
+
+		location /prod-api/ {
+			proxy_pass http://172.16.0.151:8080/;
+			proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Host $http_host;
+      proxy_set_header X-Forwarded-Port $server_port;
+      proxy_set_header X-Forwarded-Proto $scheme;
+      proxy_http_version 1.1;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+		}
+
+        error_page   500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   html;
+        }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ruoyiflex-elementplus-ts",
-  "version": "5.1.0",
+  "version": "5.2.0-SNAPSHOT",
   "description": "Ruoyi-Flex多租户管理系统",
   "author": "数据小王子",
   "license": "MIT",
@@ -24,12 +24,14 @@
     "@vueuse/core": "10.7.2",
     "animate.css": "4.1.1",
     "await-to-js": "3.0.0",
-    "axios": "1.6.5",
+    "axios": "1.6.8",
     "crypto-js": "4.2.0",
-    "echarts": "5.4.3",
+    "echarts": "5.5.0",
-    "element-plus": "2.5.3",
+    "element-plus": "2.6.2",
+    "encryptlong": "^3.1.4",
     "file-saver": "2.0.5",
     "fuse.js": "7.0.0",
+    "image-conversion": "^2.1.1",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "nprogress": "0.2.0",
@@ -38,53 +40,54 @@
     "pinia": "2.1.7",
     "screenfull": "6.0.2",
     "vform3-builds": "3.0.10",
-    "vue": "3.4.13",
+    "vue": "3.4.21",
     "vue-cropper": "1.1.1",
-    "vue-i18n": "9.9.0",
+    "vue-i18n": "9.10.2",
-    "vue-router": "4.2.5",
+    "vue-router": "4.3.0",
-    "vue-types": "5.1.1"
+    "vue-types": "5.1.1",
+    "vxe-table": "4.5.21"
   },
   "devDependencies": {
-    "@iconify/json": "2.2.168",
+    "@iconify/json": "2.2.193",
-    "@intlify/unplugin-vue-i18n": "2.0.0",
+    "@intlify/unplugin-vue-i18n": "3.0.1",
-    "@types/crypto-js": "4.2.1",
+    "@types/crypto-js": "4.2.2",
     "@types/file-saver": "2.0.7",
     "@types/js-cookie": "3.0.6",
-    "@types/node": "18.14.2",
+    "@types/node": "18.18.2",
     "@types/nprogress": "0.2.3",
     "@types/path-browserify": "1.0.2",
-    "@typescript-eslint/eslint-plugin": "6.18.1",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
-    "@typescript-eslint/parser": "6.18.1",
+    "@typescript-eslint/parser": "7.3.1",
-    "@unocss/preset-attributify": "0.58.3",
+    "@unocss/preset-attributify": "0.58.6",
-    "@unocss/preset-icons": "0.58.3",
+    "@unocss/preset-icons": "0.58.6",
-    "@unocss/preset-uno": "0.58.3",
+    "@unocss/preset-uno": "0.58.6",
-    "@vue/compiler-sfc": "3.4.13",
+    "@vue/compiler-sfc": "3.4.21",
+    "autoprefixer": "10.4.18",
     "@vitejs/plugin-vue": "5.0.3",
-    "autoprefixer": "10.4.16",
+    "eslint": "8.57.0",
-    "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-define-config": "2.1.0",
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-vue": "9.20.1",
+    "eslint-plugin-vue": "9.23.0",
     "fast-glob": "3.3.2",
-    "husky": "8.0.3",
+    "husky": "9.0.11",
-    "postcss": "8.4.33",
+    "postcss": "8.4.36",
-    "prettier": "3.2.2",
+    "prettier": "3.2.5",
-    "sass": "1.69.7",
+    "sass": "1.72.0",
-    "typescript": "5.3.3",
+    "typescript": "5.4.3",
-    "unocss": "0.58.3",
+    "unocss": "0.58.6",
-    "unplugin-auto-import": "0.17.3",
+    "unplugin-auto-import": "0.17.5",
-    "unplugin-icons": "0.18.2",
+    "unplugin-icons": "0.18.5",
     "unplugin-vue-components": "0.26.0",
-    "unplugin-vue-setup-extend-plus": "1.0.0",
+    "unplugin-vue-setup-extend-plus": "1.0.1",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-svg-icons": "2.0.1",
-    "vitest": "1.2.0",
+    "vite": "5.2.6",
-    "vue-eslint-parser": "9.4.0",
+    "vitest": "1.4.0",
-    "vue-tsc": "1.8.27",
+    "vue-eslint-parser": "9.4.2",
-    "vite": "5.0.12"
+    "vue-tsc": "2.0.6"
   }
 }

src/api/genKeyPair.ts

@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+/**
+ * 生成密钥对
+ * @param callback
+ */
+export function genKeyPair(callback: Function) {
+  return request({
+    url: '/genKeyPair',
+    headers: {
+      isToken: false,
+      repeatSubmit: false
+    },
+    method: 'get'
+  }).then((res) => {
+    return callback(res.data.uuidPrivateKey, res.data.RSA_PUBLIC_KEY);
+  });
+}

src/api/login.ts

@@ -2,9 +2,11 @@ import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
 import { LoginData, LoginResult, VerifyCodeResult, TenantInfo } from './types';
 import { UserInfo } from '@/api/system/user/types';
+import { genKeyPair } from '@/api/genKeyPair';
 
 // pc端固定客户端授权id
 const clientId = import.meta.env.VITE_APP_CLIENT_ID;
+const encryptHeader = import.meta.env.VITE_APP_ENCRYPT_HEADER;
 
 /**
  * @param data {LoginData}
@@ -16,14 +18,26 @@ export function login(data: LoginData): AxiosPromise<LoginResult> {
     clientId: data.clientId || clientId,
     grantType: data.grantType || 'password'
   };
-  return request({
+  return new Promise((resolve, reject) => {
-    url: '/auth/login',
+    genKeyPair((uuid, public_key) => {
-    headers: {
+      request({
-      isToken: false,
+        url: '/auth/login',
-      isEncrypt: true
+        headers: {
-    },
+          isToken: false,
-    method: 'post',
+          isEncrypt: true,
-    data: params
+          [encryptHeader]: uuid,
+          publicKey: public_key
+        },
+        method: 'post',
+        data: params
+      })
+        .then((res) => {
+          resolve(res);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
   });
 }
 
@@ -34,14 +48,26 @@ export function register(data: any) {
     clientId: clientId,
     grantType: 'password'
   };
-  return request({
+  return new Promise((resolve, reject) => {
-    url: '/auth/register',
+    genKeyPair((uuid, public_key) => {
-    headers: {
+      request({
-      isToken: false,
+        url: '/auth/register',
-      isEncrypt: true
+        headers: {
-    },
+          isToken: false,
-    method: 'post',
+          isEncrypt: true,
-    data: params
+          [encryptHeader]: uuid,
+          publicKey: public_key
+        },
+        method: 'post',
+        data: params
+      })
+        .then((res) => {
+          resolve(res);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
   });
 }
 

src/api/mf/product/types.ts

@@ -1,76 +1,76 @@
 export interface ProductVO extends BaseEntity {
-  /**
+    /**
-   * 父产品id
+    * 产品编号
-   */
+    */
-  parentId: string | number;
+        productId: string | number;
 
-  /**
+    /**
-   * 产品名称
+    * 产品名称
-   */
+    */
-  productName: string;
+        productName: string;
 
-  /**
+    /**
-   * 显示顺序
+    * 显示顺序
-   */
+    */
-  orderNum: number;
+        orderNum: number;
 
-  /**
+    /**
-   * 产品状态（0正常 1停用）
+    * 产品状态（0正常 1停用）
-   */
+    */
-  status: string;
+        status: string;
 
-  /**
+/**
-   * 子对象
+* 子树对象
-   */
+*/
-  children: ProductVO[];
+children: ProductVO[];
-}
+    }
 
-export interface ProductForm {
+    export interface ProductForm {
-  /**
+        /**
-   * 产品id
+        * 产品编号
-   */
+        */
-  productId?: string | number;
+        productId?: string | number;
 
-  /**
+        /**
-   * 父产品id
+        * 上级编号
-   */
+        */
-  parentId?: string | number;
+        parentId?: string | number;
 
-  /**
+        /**
-   * 产品名称
+        * 产品名称
-   */
+        */
-  productName?: string;
+        productName?: string;
 
-  /**
+        /**
-   * 显示顺序
+        * 显示顺序
-   */
+        */
-  orderNum?: number;
+        orderNum?: number;
 
-  /**
+        /**
-   * 产品状态（0正常 1停用）
+        * 产品状态（0正常 1停用）
-   */
+        */
-  status?: string;
+        status?: string;
 
-  /**
+        /**
-   * 乐观锁
+        * 乐观锁
-   */
+        */
-  version?: number;
+        version?: number;
 
-}
+    }
 
-export interface ProductQuery {
+    export interface ProductQuery {
-  /**
+        /**
-   * 产品名称
+        * 产品名称
-   */
+        */
-  productName?: string;
+        productName?: string;
 
-  /**
+        /**
-   * 产品状态（0正常 1停用）
+        * 产品状态（0正常 1停用）
-   */
+        */
-  status?: string;
+        status?: string;
 
-  /**
+    /**
-   * 日期范围参数
+    * 日期范围参数
-   */
+    */
-  params?: any;
+    params?: any;
-}
+    }

src/api/mf/student/types.ts

@@ -1,96 +1,97 @@
 export interface StudentVO extends BaseEntity {
-  /**
+    /**
-   * 学生名称
+    * 编号
-   */
+    */
-  studentName: string;
+        studentId: string | number;
 
-  /**
+    /**
-   * 年龄
+    * 学生名称
-   */
+    */
-  studentAge: number;
+        studentName: string;
 
-  /**
+    /**
-   * 爱好（0代码 1音乐 2电影）
+    * 年龄
-   */
+    */
-  studentHobby: string;
+        studentAge: number;
 
-  /**
+    /**
-   * 性别（1男 2女 3未知）
+    * 爱好（0代码 1音乐 2电影）
-   */
+    */
-  studentGender: string;
+        studentHobby: string;
 
-  /**
+    /**
-   * 状态（0正常 1停用）
+    * 性别（1男 2女 3未知）
-   */
+    */
-  studentStatus: string;
+        studentGender: string;
 
-  /**
+    /**
-   * 生日
+    * 状态（0正常 1停用）
-   */
+    */
-  studentBirthday: string;
+        studentStatus: string;
 
-}
+    /**
+    * 生日
+    */
+        studentBirthday: string;
 
-export interface StudentForm {
+    }
-  /**
-   * 编号
-   */
-  studentId?: string | number;
 
-  /**
+    export interface StudentForm {
-   * 学生名称
+        /**
-   */
+        * 编号
-  studentName?: string;
+        */
+        studentId?: string | number;
 
-  /**
+        /**
-   * 年龄
+        * 学生名称
-   */
+        */
-  studentAge?: number;
+        studentName?: string;
 
-  /**
+        /**
-   * 爱好（0代码 1音乐 2电影）
+        * 年龄
-   */
+        */
-  studentHobby?: string;
+        studentAge?: number;
 
-  /**
+        /**
-   * 性别（1男 2女 3未知）
+        * 爱好（0代码 1音乐 2电影）
-   */
+        */
-  studentGender?: string;
+        studentHobby?: string;
 
-  /**
+        /**
-   * 状态（0正常 1停用）
+        * 性别（1男 2女 3未知）
-   */
+        */
-  studentStatus?: string;
+        studentGender?: string;
 
-  /**
+        /**
-   * 生日
+        * 状态（0正常 1停用）
-   */
+        */
-  studentBirthday?: string;
+        studentStatus?: string;
 
-  /**
+        /**
-   * 乐观锁
+        * 生日
-   */
+        */
-  version?: number;
+        studentBirthday?: string;
 
-}
+        /**
+        * 乐观锁
+        */
+        version?: number;
 
-export interface StudentQuery extends PageQuery {
+    }
-
-  /**
-   * 学生名称
-   */
-  studentName?: string;
-
-  /**
-   * 状态（0正常 1停用）
-   */
-  studentStatus?: string;
-
-  /**
-   * 日期范围参数
-   */
-  params?: any;
-}
 
+    export interface StudentQuery extends PageQuery {
+        /**
+        * 学生名称
+        */
+        studentName?: string;
 
+        /**
+        * 状态（0正常 1停用）
+        */
+        studentStatus?: string;
 
+    /**
+    * 日期范围参数
+    */
+    params?: any;
+    }

src/api/system/tenant/index.ts

@@ -1,6 +1,8 @@
 import request from '@/utils/request';
 import { TenantForm, TenantQuery, TenantVO } from './types';
 import { AxiosPromise } from 'axios';
+import { genKeyPair } from '@/api/genKeyPair';
+const encryptHeader = import.meta.env.VITE_APP_ENCRYPT_HEADER;
 
 // 查询租户列表
 export function listTenant(query: TenantQuery): AxiosPromise<TenantVO[]> {
@@ -21,13 +23,25 @@ export function getTenant(tenantId: string | number): AxiosPromise<TenantVO> {
 
 // 新增租户
 export function addTenant(data: TenantForm) {
-  return request({
+  return new Promise((resolve, reject) => {
-    url: '/system/tenant',
+    genKeyPair((uuid, public_key) => {
-    method: 'post',
+      request({
-    headers: {
+        url: '/system/tenant',
-      isEncrypt: true
+        method: 'post',
-    },
+        headers: {
-    data: data
+          isEncrypt: true,
+          [encryptHeader]: uuid,
+          publicKey: public_key
+        },
+        data: data
+      })
+        .then((res) => {
+          resolve(res);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
   });
 }
 

src/api/system/user/index.ts

@@ -4,6 +4,8 @@ import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
 import { UserForm, UserQuery, UserVO, UserInfoVO } from './types';
 import { parseStrEmpty } from '@/utils/ruoyi';
+import { genKeyPair } from '@/api/genKeyPair';
+const encryptHeader = import.meta.env.VITE_APP_ENCRYPT_HEADER;
 
 /**
  * 查询用户列表
@@ -72,13 +74,25 @@ export const resetUserPwd = (userId: string | number, version: number, password:
     version,
     password
   };
-  return request({
+  return new Promise((resolve, reject) => {
-    url: '/system/user/resetPwd',
+    genKeyPair((uuid, public_key) => {
-    method: 'put',
+      request({
-    headers: {
+        url: '/system/user/resetPwd',
-      isEncrypt: true
+        method: 'put',
-    },
+        headers: {
-    data: data
+          isEncrypt: true,
+          [encryptHeader]: uuid,
+          publicKey: public_key
+        },
+        data: data
+      })
+        .then((res) => {
+          resolve(res);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
   });
 };
 
@@ -132,13 +146,25 @@ export const updateUserPwd = (oldPassword: string, newPassword: string) => {
     oldPassword,
     newPassword
   };
-  return request({
+  return new Promise((resolve, reject) => {
-    url: '/system/user/profile/updatePwd',
+    genKeyPair((uuid, public_key) => {
-    method: 'put',
+      request({
-    headers: {
+        url: '/system/user/profile/updatePwd',
-      isEncrypt: true
+        method: 'put',
-    },
+        headers: {
-    data: data
+          isEncrypt: true,
+          [encryptHeader]: uuid,
+          publicKey: public_key
+        },
+        data: data
+      })
+        .then((res) => {
+          resolve(res);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
   });
 };
 

src/api/tool/gen/types.ts

@@ -25,6 +25,7 @@ export interface TableVO extends BaseEntity {
   parentMenuName?: any;
   tree: boolean;
   crud: boolean;
+  editColumns: number;
 }
 
 export interface TableQuery extends PageQuery {

src/components/DictTag/index.vue

@@ -50,12 +50,13 @@ const values = computed(() => {
 const unmatch = computed(() => {
   if (props.options?.length == 0 || props.value === '' || props.value === null || typeof props.value === 'undefined') return false;
   // 传入值为非数组
+  let unmatch = false; // 添加一个标志来判断是否有未匹配项
   values.value.forEach((item) => {
     if (!props.options.some((v) => v.value === item)) {
-      return true; // 如果有未匹配项，将标志设置为true
+      unmatch = true; // 如果有未匹配项，将标志设置为true
     }
   });
-  return false; // 返回标志的值
+  return unmatch; // 返回标志的值
 });
 
 const unmatchArray = computed(() => {

src/components/ImageUpload/index.vue

@@ -44,6 +44,7 @@ import { listByIds, delOss } from '@/api/system/oss';
 import { OssVO } from '@/api/system/oss/types';
 import { propTypes } from '@/utils/propTypes';
 import { globalHeaders } from '@/utils/request';
+import { compressAccurately } from 'image-conversion';
 
 const props = defineProps({
   modelValue: {
@@ -60,7 +61,14 @@ const props = defineProps({
   isShowTip: {
     type: Boolean,
     default: true
-  }
+  },
+  // 是否支持压缩，默认否
+  compressSupport: {
+    type: Boolean,
+    default: false
+  },
+  // 压缩目标大小，单位KB。默认300KB以上文件才压缩，并压缩至300KB以内
+  compressTargetSize: propTypes.number.def(300)
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -89,7 +97,9 @@ watch(
         list = val as OssVO[];
       } else {
         const res = await listByIds(val);
-        list = res.data;
+        //list = res.data;
+        // 处理 val 为字符串的情况，封装成一个 OssVO 对象
+        list = [{ name: val, url: val }];
       }
       // 然后将数组转为对象数组
       fileList.value = list.map((item) => {
@@ -138,8 +148,16 @@ const handleBeforeUpload = (file: any) => {
       return false;
     }
   }
-  proxy?.$modal.loading('正在上传图片，请稍候...');
+
-  number.value++;
+  //压缩图片，开启压缩并且大于指定的压缩大小时才压缩
+  if (props.compressSupport && file.size / 1024 > props.compressTargetSize) {
+    proxy?.$modal.loading('正在上传图片，请稍候...');
+    number.value++;
+    return compressAccurately(file, props.compressTargetSize);
+  } else {
+    proxy?.$modal.loading('正在上传图片，请稍候...');
+    number.value++;
+  }
 };
 
 // 文件个数超出

src/components/RoleSelect/index.vue

@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <el-dialog v-model="roleDialog.visible.value" :title="roleDialog.title.value" width="80%" append-to-body>
+      <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+        <div v-show="showSearch" class="mb-[10px]">
+          <el-card shadow="hover">
+            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
+              <el-form-item label="角色名称" prop="roleName">
+                <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable style="width: 180px" @keyup.enter="handleQuery" />
+              </el-form-item>
+              <el-form-item label="权限字符" prop="roleKey">
+                <el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable style="width: 180px" @keyup.enter="handleQuery" />
+              </el-form-item>
+
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </el-card>
+        </div>
+      </transition>
+
+      <el-card shadow="hover">
+        <template #header>
+          <el-tag v-for="role in selectRoleList" :key="role.roleId" closable style="margin: 2px" @close="handleCloseTag(role)">
+            {{ role.roleName }}
+          </el-tag>
+        </template>
+
+        <vxe-table
+          ref="tableRef"
+          height="400px"
+          border
+          show-overflow
+          :data="roleList"
+          :loading="loading"
+          :row-config="{ keyField: 'roleId' }"
+          :checkbox-config="{ reserve: true, checkRowKeys: roleIds }"
+          highlight-current-row
+          @checkbox-all="handleCheckboxAll"
+          @checkbox-change="handleCheckboxChange"
+        >
+          <vxe-column type="checkbox" width="50" align="center" />
+          <vxe-column v-if="false" key="roleId" label="角色编号" />
+          <vxe-column field="roleName" title="角色名称" />
+          <vxe-column field="roleKey" title="权限字符" />
+          <vxe-column field="roleSort" title="显示顺序" width="100" />
+          <vxe-column title="状态" align="center" width="100">
+            <template #default="scope">
+              <dict-tag :options="sys_normal_disable" :value="scope.row.status"></dict-tag>
+            </template>
+          </vxe-column>
+          <vxe-column field="createTime" title="创建时间" align="center">
+            <template #default="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </vxe-column>
+        </vxe-table>
+
+        <pagination
+          v-if="total > 0"
+          v-model:total="total"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-card>
+      <template #footer>
+        <el-button @click="roleDialog.closeDialog">取消</el-button>
+        <el-button type="primary" @click="confirm">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Role" lang="ts">
+import { listRole } from '@/api/system/role';
+import { RoleVO, RoleQuery } from '@/api/system/role/types';
+import { VxeTableInstance } from 'vxe-table';
+import useDialog from '@/hooks/useDialog';
+import { parseTime } from "@/utils/ruoyi";
+
+interface PropType {
+  modelValue?: RoleVO[];
+}
+const prop = withDefaults(defineProps<PropType>(), {
+  modelValue: () => []
+});
+const emit = defineEmits(['update:modelValue']);
+
+const router = useRouter();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
+
+const roleIds = computed(() => prop.modelValue.map((item) => item.roleId as string));
+
+const roleList = ref<RoleVO[]>();
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
+const selectRoleList = ref<RoleVO[]>([]);
+
+const roleDialog = useDialog({
+  title: '角色选择'
+});
+
+const queryFormRef = ref<ElFormInstance>();
+const tableRef = ref<VxeTableInstance<RoleVO>>();
+
+const queryParams = ref<RoleQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  roleName: '',
+  roleKey: '',
+  status: ''
+});
+const confirm = () => {
+  emit('update:modelValue', [...selectRoleList.value]);
+  roleDialog.closeDialog();
+};
+/**
+ * 查询角色列表
+ */
+const getList = () => {
+  loading.value = true;
+  listRole(proxy?.addDateRange(queryParams.value, dateRange.value)).then((res) => {
+    roleList.value = res.rows;
+    total.value = res.total;
+    loading.value = false;
+  });
+};
+
+/**
+ * 搜索按钮操作
+ */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置 */
+const resetQuery = () => {
+  dateRange.value = ['', ''];
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+const handleCheckboxChange = (checked) => {
+  const row = checked.row;
+  if (checked.checked) {
+    selectRoleList.value.push(row);
+  } else {
+    selectRoleList.value = selectRoleList.value.filter((item) => {
+      return item.roleId !== row.roleId;
+    });
+  }
+};
+const handleCheckboxAll = (checked) => {
+  const rows = roleList.value;
+  if (checked.checked) {
+    rows.forEach((row) => {
+      if (!selectRoleList.value.some((item) => item.roleId === row.roleId)) {
+        selectRoleList.value.push(row);
+      }
+    });
+  } else {
+    selectRoleList.value = selectRoleList.value.filter((item) => {
+      return !rows.some((row) => row.roleId === item.roleId);
+    });
+  }
+};
+
+const handleCloseTag = (user: RoleVO) => {
+  const roleId = user.roleId;
+  // 使用split删除用户
+  const index = selectRoleList.value.findIndex((item) => item.roleId === roleId);
+  const rows = selectRoleList.value[index];
+  tableRef.value?.setCheckboxRow(rows, false);
+  selectRoleList.value.splice(index, 1);
+};
+watch(
+  () => prop.modelValue,
+  (newVal, oldValue) => {
+    Object.assign(selectRoleList.value, newVal);
+  },
+  { deep: true }
+);
+defineExpose({
+  open: roleDialog.openDialog,
+  close: roleDialog.closeDialog
+});
+
+onMounted(() => {
+  getList();
+});
+</script>

src/components/UserSelect/index.vue

@@ -0,0 +1,261 @@
+<template>
+  <div>
+    <el-dialog v-model="userDialog.visible.value" :title="userDialog.title.value" width="80%" append-to-body>
+      <el-row :gutter="20">
+        <!-- 部门树 -->
+        <el-col :lg="4" :xs="24" style="">
+          <el-card shadow="hover">
+            <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
+            <el-tree
+              ref="deptTreeRef"
+              class="mt-2"
+              node-key="id"
+              :data="deptOptions"
+              :props="{ label: 'label', children: 'children' }"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              highlight-current
+              default-expand-all
+              @node-click="handleNodeClick"
+            />
+          </el-card>
+        </el-col>
+        <el-col :lg="20" :xs="24">
+          <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+            <div v-show="showSearch" class="mb-[10px]">
+              <el-card shadow="hover">
+                <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
+                  <el-form-item label="用户名称" prop="userName">
+                    <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 200px" @keyup.enter="handleQuery" />
+                  </el-form-item>
+                  <el-form-item label="手机号码" prop="phonenumber">
+                    <el-input
+                      v-model="queryParams.phonenumber"
+                      placeholder="请输入手机号码"
+                      clearable
+                      style="width: 200px"
+                      @keyup.enter="handleQuery"
+                    />
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                  </el-form-item>
+                </el-form>
+              </el-card>
+            </div>
+          </transition>
+
+          <el-card shadow="hover">
+            <template #header>
+              <el-tag v-for="user in selectUserList" :key="user.userId" closable style="margin: 2px" @close="handleCloseTag(user)">
+                {{ user.userName }}
+              </el-tag>
+            </template>
+
+            <vxe-table
+              ref="tableRef"
+              height="400px"
+              border
+              show-overflow
+              :data="userList"
+              :loading="loading"
+              :row-config="{ keyField: 'userId' }"
+              :checkbox-config="{ reserve: true, checkRowKeys: userIds }"
+              highlight-current-row
+              @checkbox-all="handleCheckboxAll"
+              @checkbox-change="handleCheckboxChange"
+            >
+              <vxe-column type="checkbox" width="50" align="center" />
+              <vxe-column key="userId" title="用户编号" align="center" field="userId" />
+              <vxe-column key="userName" title="用户名称" align="center" field="userName" />
+              <vxe-column key="nickName" title="用户昵称" align="center" field="nickName" />
+              <vxe-column key="deptName" title="部门" align="center" field="deptName" />
+              <vxe-column key="phonenumber" title="手机号码" align="center" field="phonenumber" width="120" />
+              <vxe-column key="status" title="状态" align="center">
+                <template #default="scope">
+                  <dict-tag :options="sys_normal_disable" :value="scope.row.status"></dict-tag>
+                </template>
+              </vxe-column>
+
+              <vxe-column title="创建时间" align="center" width="160">
+                <template #default="scope">
+                  <span>{{ scope.row.createTime }}</span>
+                </template>
+              </vxe-column>
+            </vxe-table>
+
+            <pagination
+              v-show="total > 0"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              :total="total"
+              @pagination="getList"
+            />
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <template #footer>
+        <el-button @click="userDialog.closeDialog">取消</el-button>
+        <el-button type="primary" @click="confirm">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import api from '@/api/system/user';
+import { UserQuery, UserVO } from '@/api/system/user/types';
+import { DeptVO } from '@/api/system/dept/types';
+import { VxeTableInstance } from 'vxe-table';
+import useDialog from '@/hooks/useDialog';
+
+interface PropType {
+  modelValue?: UserVO[];
+}
+const prop = withDefaults(defineProps<PropType>(), {
+  modelValue: () => []
+});
+const emit = defineEmits(['update:modelValue']);
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
+
+const userIds = computed(() => prop.modelValue.map((item) => item.userId as string));
+
+const userList = ref<UserVO[]>();
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
+const deptName = ref('');
+const deptOptions = ref<DeptVO[]>([]);
+const selectUserList = ref<UserVO[]>([]);
+
+const deptTreeRef = ref<ElTreeInstance>();
+const queryFormRef = ref<ElFormInstance>();
+const tableRef = ref<VxeTableInstance<UserVO>>();
+
+const userDialog = useDialog({
+  title: '用户选择'
+});
+
+const queryParams = ref<UserQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  userName: '',
+  phonenumber: '',
+  status: '',
+  deptId: '',
+  roleId: ''
+});
+
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    deptTreeRef.value?.filter(deptName.value);
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+
+const confirm = () => {
+  emit('update:modelValue', [...selectUserList.value]);
+  userDialog.closeDialog();
+};
+
+/** 查询部门下拉树结构 */
+const getTreeSelect = async () => {
+  const res = await api.deptTreeSelect();
+  deptOptions.value = res.data;
+};
+
+/** 查询用户列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await api.listUser(proxy?.addDateRange(queryParams.value, dateRange.value));
+  loading.value = false;
+  userList.value = res.rows;
+  total.value = res.total;
+};
+
+/** 节点单击事件 */
+const handleNodeClick = (data: DeptVO) => {
+  queryParams.value.deptId = data.id;
+  handleQuery();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  dateRange.value = ['', ''];
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.deptId = undefined;
+  deptTreeRef.value?.setCurrentKey(undefined);
+  handleQuery();
+};
+
+const handleCheckboxChange = (checked) => {
+  const row = checked.row;
+  if (checked.checked) {
+    selectUserList.value.push(row);
+  } else {
+    selectUserList.value = selectUserList.value.filter((item) => {
+      return item.userId !== row.userId;
+    });
+  }
+};
+const handleCheckboxAll = (checked) => {
+  const rows = userList.value;
+  if (checked.checked) {
+    rows.forEach((row) => {
+      if (!selectUserList.value.some((item) => item.userId === row.userId)) {
+        selectUserList.value.push(row);
+      }
+    });
+  } else {
+    selectUserList.value = selectUserList.value.filter((item) => {
+      return !rows.some((row) => row.userId === item.userId);
+    });
+  }
+};
+
+const handleCloseTag = (user: UserVO) => {
+  const userId = user.userId;
+  const index = selectUserList.value.findIndex((item) => item.userId === userId);
+  const rows = selectUserList.value[index];
+  tableRef.value?.setCheckboxRow(rows, false);
+  selectUserList.value.splice(index, 1);
+};
+watch(
+  () => prop.modelValue,
+  (newVal, oldValue) => {
+    Object.assign(selectUserList.value, newVal);
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  getTreeSelect();
+  getList();
+});
+
+defineExpose({
+  open: userDialog.openDialog,
+  close: userDialog.closeDialog
+});
+</script>
+
+<style lang="scss" scoped></style>

src/hooks/useDialog.ts

@@ -0,0 +1,31 @@
+import { Ref,ref } from 'vue';
+
+interface Options {
+  title?: string;
+}
+interface Return {
+  title: Ref<string>;
+  visible: Ref<boolean>;
+  openDialog: () => void;
+  closeDialog: () => void;
+}
+export default (ops?: Options): Return => {
+  const visible = ref(false);
+  const title = ref(ops.title || '');
+
+  const openDialog = () => {
+    visible.value = true;
+  };
+
+  const closeDialog = () => {
+    visible.value = false;
+  };
+
+  return {
+    title,
+    visible,
+
+    openDialog,
+    closeDialog
+  };
+};

src/main.ts

@@ -25,12 +25,24 @@ import './permission';
 // 国际化
 import i18n from '@/lang/index';
 
+// vxeTable
+import VXETable from 'vxe-table';
+import 'vxe-table/lib/style.css';
+VXETable.config({
+  zIndex: 999999
+});
+
+// 修改 el-dialog 默认点击遮照为不关闭
+import { ElDialog } from 'element-plus';
+ElDialog.props.closeOnClickModal.default = false;
+
 const app = createApp(App);
 
 app.use(ElementIcons);
 app.use(router);
 app.use(store);
 app.use(i18n);
+app.use(VXETable);
 app.use(plugins);
 // 自定义指令
 directive(app);

src/types/env.d.ts

@@ -14,9 +14,11 @@ interface ImportMetaEnv {
   VITE_APP_MONITRO_ADMIN: string;
   VITE_APP_POWERJOB_ADMIN: string;
   VITE_APP_ENV: string;
+  VITE_APP_ENCRYPT: string;
   VITE_APP_RSA_PUBLIC_KEY: string;
   VITE_APP_RSA_PRIVATE_KEY: string;
   VITE_APP_CLIENT_ID: string;
+  VITE_APP_ENCRYPT_HEADER: string;
   VITE_APP_WEBSOCKET: string;
 }
 interface ImportMeta {

src/types/global.d.ts

@@ -69,6 +69,7 @@ declare global {
     /** 乐观锁 */
     version?: number;
     createBy?: any;
+    createDept?: any;
     createTime?: string;
     updateBy?: any;
     updateTime?: any;

src/utils/jsencrypt.ts

@@ -1,16 +1,14 @@
-import JSEncrypt from 'jsencrypt';
+import JSEncrypt from 'encryptlong';
 // 密钥对生成 http://web.chacuo.net/netrsakeypair
 
-const publicKey = import.meta.env.VITE_APP_RSA_PUBLIC_KEY;
-
 // 前端不建议存放私钥 不建议解密数据 因为都是透明的意义不大
 const privateKey = import.meta.env.VITE_APP_RSA_PRIVATE_KEY;
 
 // 加密
-export const encrypt = (txt: string) => {
+export const encrypt = (txt: string, publicKey: string) => {
   const encryptor = new JSEncrypt();
   encryptor.setPublicKey(publicKey); // 设置公钥
-  return encryptor.encrypt(txt); // 对数据进行加密
+  return encryptor.encryptLong(txt); // 对数据进行加密
 };
 
 // 解密

src/utils/request.ts

@@ -10,6 +10,7 @@ import FileSaver from 'file-saver';
 import { getLanguage } from '@/lang';
 import { encryptBase64, encryptWithAes, generateAesKey, decryptWithAes, decryptBase64 } from '@/utils/crypto';
 import { encrypt, decrypt } from '@/utils/jsencrypt';
+import { ElLoading, ElMessage, ElMessageBox, ElNotification } from 'element-plus';
 
 const encryptHeader = 'encrypt-key';
 let downloadLoadingInstance: LoadingInstance;
@@ -76,12 +77,18 @@ service.interceptors.request.use(
         }
       }
     }
-    // 当开启参数加密
+    if (import.meta.env.VITE_APP_ENCRYPT === 'true') {
-    if (isEncrypt && (config.method === 'post' || config.method === 'put')) {
+      // 当开启参数加密
-      // 生成一个 AES 密钥
+      if (isEncrypt && (config.method === 'post' || config.method === 'put')) {
-      const aesKey = generateAesKey();
+        // 根据 AES 密钥进行加密
-      config.headers[encryptHeader] = encrypt(encryptBase64(aesKey));
+        const publicKey = (config.headers || {}).publicKey;
-      config.data = typeof config.data === 'object' ? encryptWithAes(JSON.stringify(config.data), aesKey) : encryptWithAes(config.data, aesKey);
+        console.log('publicKey', publicKey);
+        config.data =
+          typeof config.data === 'object'
+            ? encrypt(encodeURIComponent(JSON.stringify(config.data)), publicKey)
+            : encrypt(encodeURIComponent(config.data), publicKey);
+        delete config.headers['publicKey'];
+      }
     }
     // FormData数据去请求头Content-Type
     if (config.data instanceof FormData) {
@@ -97,19 +104,21 @@ service.interceptors.request.use(
 // 响应拦截器
 service.interceptors.response.use(
   (res: AxiosResponse) => {
-    // 加密后的 AES 秘钥
+    if (import.meta.env.VITE_APP_ENCRYPT === 'true') {
-    const keyStr = res.headers[encryptHeader];
+      // 加密后的 AES 秘钥
-    // 加密
+      const keyStr = res.headers[encryptHeader];
-    if (keyStr != null && keyStr != '') {
+      // 加密
-      const data = res.data;
+      if (keyStr != null && keyStr != '') {
-      // 请求体 AES 解密
+        const data = res.data;
-      const base64Str = decrypt(keyStr);
+        // 请求体 AES 解密
-      // base64 解码 得到请求头的 AES 秘钥
+        const base64Str = decrypt(keyStr);
-      const aesKey = decryptBase64(base64Str.toString());
+        // base64 解码 得到请求头的 AES 秘钥
-      // aesKey 解码 data
+        const aesKey = decryptBase64(base64Str.toString());
-      const decryptData = decryptWithAes(data, aesKey);
+        // aesKey 解码 data
-      // 将结果 (得到的是 JSON 字符串) 转为 JSON
+        const decryptData = decryptWithAes(data, aesKey);
-      res.data = JSON.parse(decryptData);
+        // 将结果 (得到的是 JSON 字符串) 转为 JSON
+        res.data = JSON.parse(decryptData);
+      }
     }
     // 未设置状态码则默认成功状态
     const code = res.data.code || HttpStatus.SUCCESS;

src/views/index.vue

@@ -5,7 +5,7 @@
         <p align="center">
           <img alt="logo" src="@/assets/images/ruoyi-flex-logo.png">
         </p>
-        <h1 align="center">Ruoyi-Flex V5.1.0</h1>
+        <h1 align="center">Ruoyi-Flex V5.2.0-SNAPSHOT</h1>
         <h2 align="center">Ruoyi-Flex是基于JDK21、Spring Boot V3.2.X+平台 前后端分离的Java快速开发框架</h2>
       </el-col>
     </el-row>
@@ -299,7 +299,7 @@
 </template>
 
 <script setup name="Index" lang="ts">
-const version = ref('5.1.0')
+const version = ref('5.2.0-SNAPSHOT')
 const goTarget = (url: string) => {
   window.open(url, '__blank');
 };

src/views/login.vue

@@ -73,7 +73,7 @@ const userStore = useUserStore();
 const router = useRouter();
 
 const loginForm = ref<LoginData>({
-  tenantId: 0,
+  tenantId: 1,
   username: 'superadmin',
   password: 'admin123',
   rememberMe: false,

src/views/mf/product/index.vue

@@ -1,289 +1,392 @@
 <template>
-  <div class="p-2">
+    <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+            <div class="search" v-show="showSearch">
-        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
-          <el-form-item label="产品名称" prop="productName">
+                                <el-form-item label="产品名称" prop="productName">
-            <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+                                    <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
-          </el-form-item>
+                                </el-form-item>
-          <el-form-item label="产品状态" prop="status">
+                                <el-form-item label="产品状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="请选择产品状态" clearable style="width: 240px">
+                                    <el-select v-model="queryParams.status" placeholder="请选择产品状态" clearable style="width: 240px">
-              <el-option
+                                        <el-option
-                v-for="dict in sys_student_status"
+                                            v-for="dict in sys_student_status"
-                :key="dict.value"
+                                            :key="dict.value"
-                :label="dict.label"
+                                            :label="dict.label"
-                :value="dict.value"
+                                            :value="dict.value"
-              />
+                                        />
-            </el-select>
+                                    </el-select>
-          </el-form-item>
+                                </el-form-item>
-          <el-form-item>
+                    <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-          </el-form-item>
+                    </el-form-item>
-        </el-form>
+                </el-form>
-      </div>
+            </div>
-    </transition>
+        </transition>
 
-    <el-card shadow="never">
+        <el-card shadow="never">
-      <template #header>
+            <template #header>
-        <el-row :gutter="10" class="mb8">
+                <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
+                    <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['mf:product:add']">新增</el-button>
+                        <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['mf:product:add']">新增</el-button>
-          </el-col>
+                    </el-col>
-          <el-col :span="1.5">
+                    <el-col :span="1.5">
-            <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
+                        <el-button type="success" plain icon="Top" @click="handleImport()" v-hasPermi="['mf:product:import']">导入</el-button>
-          </el-col>
+                    </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+                    <el-col :span="1.5">
-        </el-row>
+                        <el-button type="warning" plain icon="Download" @click="handleExport()" v-hasPermi="['mf:product:export']">导出</el-button>
-      </template>
+                    </el-col>
-      <el-table
+                    <el-col :span="1.5">
-        v-loading="loading"
+                        <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
-        :data="productList"
+                    </el-col>
-        row-key="productId"
+                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        :default-expand-all="isExpandAll"
+                </el-row>
-        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+            </template>
-        ref="productTableRef"
+            <el-table
-      >
+                v-loading="loading"
-        <el-table-column label="产品名称" align="center" prop="productName" />
+                :data="productList"
-        <el-table-column label="显示顺序" align="center" prop="orderNum" />
+                row-key="productId"
-        <el-table-column label="产品状态" align="center" prop="status">
+                :default-expand-all="isExpandAll"
-          <template #default="scope">
+                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-            <dict-tag :options="sys_student_status" :value="scope.row.status"/>
+                ref="productTableRef"
-          </template>
+            >
-        </el-table-column>
+                            <el-table-column label="产品名称" align="center" prop="productName" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                            <el-table-column label="显示顺序" align="center" prop="orderNum" />
-          <template #default="scope">
+                        <el-table-column label="产品状态" align="center" prop="status">
-            <el-tooltip content="修改" placement="top">
+                            <template #default="scope">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['mf:product:edit']" />
+                                    <dict-tag :options="sys_student_status" :value="scope.row.status"/>
-            </el-tooltip>
+                            </template>
-            <el-tooltip content="新增" placement="top">
+                        </el-table-column>
-              <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['mf:product:add']" />
+                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            </el-tooltip>
+                    <template #default="scope">
-            <el-tooltip content="删除" placement="top">
+                        <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['mf:product:remove']" />
+                            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['mf:product:edit']" />
-            </el-tooltip>
+                        </el-tooltip>
-          </template>
+                        <el-tooltip content="新增" placement="top">
-        </el-table-column>
+                            <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['mf:product:add']" />
-      </el-table>
+                        </el-tooltip>
-    </el-card>
+                        <el-tooltip content="删除" placement="top">
-    <!-- 添加或修改产品树对话框 -->
+                            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['mf:product:remove']" />
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+                        </el-tooltip>
-      <el-form ref="productFormRef" :model="form" :rules="rules" label-width="80px">
+                    </template>
-        <el-form-item label="父产品id" prop="parentId">
+                </el-table-column>
-          <el-tree-select
+            </el-table>
-            v-model="form.parentId"
+        </el-card>
-            :data="productOptions"
+        <!-- 添加或修改产品树对话框 -->
-            :props="{ value: 'productId', label: 'productName', children: 'children' }"
+        <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-            value-key="productId"
+            <el-form ref="productFormRef" :model="form" :rules="rules" label-width="80px">
-            placeholder="请选择父产品id"
+                            <el-form-item label="上级编号" prop="parentId">
-            check-strictly
+                                <el-tree-select
-          />
+                                    v-model="form.parentId"
-        </el-form-item>
+                                    :data="productOptions"
-        <el-form-item label="产品名称" prop="productName">
+                                    :props="{ value: 'productId', label: 'productName', children: 'children' }"
-          <el-input v-model="form.productName" placeholder="请输入产品名称" />
+                                    value-key="productId"
-        </el-form-item>
+                                    placeholder="请选择上级编号"
-        <el-form-item label="显示顺序" prop="orderNum">
+                                    check-strictly
-          <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
+                                />
-        </el-form-item>
+                            </el-form-item>
-        <el-form-item label="产品状态" prop="status">
+                                <el-form-item label="产品名称" prop="productName">
-          <el-radio-group v-model="form.status">
+                                    <el-input v-model="form.productName" placeholder="请输入产品名称" />
-            <el-radio
+                                </el-form-item>
-              v-for="dict in sys_student_status"
+                                <el-form-item label="显示顺序" prop="orderNum">
-              :key="dict.value"
+                                    <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
-              :label="dict.value"
+                                </el-form-item>
-            >{{dict.label}}</el-radio>
+                            <el-form-item label="产品状态" prop="status">
-          </el-radio-group>
+                                <el-radio-group v-model="form.status">
-        </el-form-item>
+                                    <el-radio
-        <el-form-item label="乐观锁" prop="version" v-show="false">
+                                        v-for="dict in sys_student_status"
-          <el-input v-model="form.version" placeholder="请输入乐观锁" />
+                                        :key="dict.value"
-        </el-form-item>
+                                        :label="dict.value"
-      </el-form>
+                                    >{{dict.label}}</el-radio>
-      <template #footer>
+                                </el-radio-group>
-        <div class="dialog-footer">
+                            </el-form-item>
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+                                <el-form-item label="乐观锁" prop="version" v-show="false">
-          <el-button @click="cancel">取 消</el-button>
+                                    <el-input v-model="form.version" placeholder="请输入乐观锁" />
-        </div>
+                                </el-form-item>
-      </template>
+            </el-form>
-    </el-dialog>
+            <template #footer>
-  </div>
+                <div class="dialog-footer">
+                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+                    <el-button @click="cancel">取 消</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <!-- 导入对话框 -->
+        <el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
+            <el-upload
+                ref="uploadRef"
+                :limit="1"
+                accept=".xlsx, .xls"
+                :headers="upload.headers"
+                :action="upload.url + '?updateSupport=' + upload.updateSupport"
+                :disabled="upload.isUploading"
+                :on-progress="handleFileUploadProgress"
+                :on-success="handleFileSuccess"
+                :auto-upload="false"
+                drag
+            >
+                <el-icon class="el-icon--upload">
+                    <i-ep-upload-filled />
+                </el-icon>
+                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <template #tip>
+                    <div class="text-center el-upload__tip">
+                        <div class="el-upload__tip">
+                            <el-checkbox v-model="upload.updateSupport" />
+                            是否更新已经存在的产品树数据
+                        </div>
+                        <span>仅允许导入xls、xlsx格式文件。</span>
+                        <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板 </el-link>
+                    </div>
+                </template>
+            </el-upload>
+            <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="Product" lang="ts">
+<script setup lang="ts">
-import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/mf/product";
+    import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/mf/product";
-import { ProductVO, ProductQuery, ProductForm } from '@/api/mf/product/types';
+    import { ProductVO, ProductQuery, ProductForm } from '@/api/mf/product/types';
+    import { globalHeaders } from '@/utils/request';
 
-type ProductOption = {
+    type ProductOption = {
-  productId: number;
+            productId: number;
-  productName: string;
+            productName: string;
-  children?: ProductOption[];
+        children?: ProductOption[];
-};
+    };
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-const { sys_student_status } = toRefs<any>(proxy?.useDict('sys_student_status'));
+    const { sys_student_status } = toRefs<any>(proxy?.useDict('sys_student_status'));
 
-const productList = ref<ProductVO[]>([]);
+    const productList = ref<ProductVO[]>([]);
-const productOptions = ref<ProductOption[]>([]);
+    const productOptions = ref<ProductOption[]>([]);
-const buttonLoading = ref(false);
+    const buttonLoading = ref(false);
-const showSearch = ref(true);
+    const showSearch = ref(true);
-const isExpandAll = ref(true);
+    const isExpandAll = ref(true);
-const loading = ref(false);
+    const loading = ref(false);
 
-const queryFormRef = ref<ElFormInstance>();
+    const queryFormRef = ref<ElFormInstance>();
-const productFormRef = ref<ElFormInstance>();
+    const productFormRef = ref<ElFormInstance>();
-const productTableRef = ref<ElTableInstance>()
+    const productTableRef = ref<ElTableInstance>()
+    const uploadRef = ref<ElUploadInstance>();
 
-const dialog = reactive<DialogOption>({
+    /*** 导入参数 */
-  visible: false,
+    const upload = reactive<ImportOption>({
-  title: ''
+        // 是否显示弹出层（导入）
-});
+        open: false,
+        // 弹出层标题（导入）
+        title: '',
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 1,
+        // 设置上传的请求头部
+        headers: globalHeaders(),
+        // 上传的地址
+        url: import.meta.env.VITE_APP_BASE_API + '/mf/product/importData'
+    });
+
+    const dialog = reactive<DialogOption>({
+        visible: false,
+        title: ''
+    });
 
 
-const initFormData: ProductForm = {
+    const initFormData: ProductForm = {
-  productId: undefined,
+                            productId: undefined,
-  parentId: undefined,
+                            parentId: undefined,
-  productName: undefined,
+                            productName: undefined,
-  orderNum: undefined,
+                            orderNum: undefined,
-  status: undefined,
+                            status: undefined,
-  version: 0,
+                            version: 0,
-};
+    };
 
-const data = reactive<PageData<ProductForm, ProductQuery>>({
+    const data = reactive<PageData<ProductForm, ProductQuery>>({
-  form: {...initFormData},
+        form: {...initFormData},
-  queryParams: {
+        queryParams: {
-    productName: undefined,
+                            productName: undefined,
-    status: undefined,
+                            status: undefined,
-    params: {
+            params: {
+            }
+        },
+        rules: {
+                            parentId: [
+                            { required: true, message: "上级编号不能为空", trigger: "blur" }
+                        ],
+                            productName: [
+                            { required: true, message: "产品名称不能为空", trigger: "blur" }
+                        ],
+                            orderNum: [
+                            { required: true, message: "显示顺序不能为空", trigger: "blur" }
+                        ],
+                            status: [
+                            { required: true, message: "产品状态不能为空", trigger: "change" }
+                        ],
+        }
+    });
+
+    const { queryParams, form, rules } = toRefs(data);
+
+    /** 查询产品树列表 */
+    const getList = async () => {
+        loading.value = true;
+        const res = await listProduct(queryParams.value);
+        const data = proxy?.handleTree<ProductVO>(res.data, 'productId', 'parentId');
+        if (data) {
+                productList.value = data;
+            loading.value = false;
+        }
+    };
+
+    /** 查询产品树下拉树结构 */
+    const getTreeselect = async () => {
+        const res = await listProduct();
+            productOptions.value = [];
+        const data: ProductOption = { productId: 0, productName: '顶级节点', children: [] };
+        data.children = proxy?.handleTree<ProductOption>(res.data, 'productId', 'parentId');
+            productOptions.value.push(data);
+    };
+
+    // 取消按钮
+    const cancel = () => {
+        reset();
+        dialog.visible = false;
+    };
+
+    // 表单重置
+    const reset = () => {
+        form.value = {...initFormData}
+            productFormRef.value?.resetFields();
+    };
+
+    /** 搜索按钮操作 */
+    const handleQuery = () => {
+        getList();
+    };
+
+    /** 重置按钮操作 */
+    const resetQuery = () => {
+        queryFormRef.value?.resetFields();
+        handleQuery();
+    };
+
+    /** 新增按钮操作 */
+    const handleAdd = (row?: ProductVO) => {
+        reset();
+        getTreeselect();
+        if (row != null && row.productId) {
+            form.value.parentId = row.productId;
+        } else {
+            form.value.parentId = 0;
+        }
+        dialog.visible = true;
+        dialog.title = '添加产品树';
+    };
+
+    /** 导出按钮操作 */
+    const handleExport = () => {
+        proxy?.download(
+            'mf/product/export',
+            {
+                ...queryParams.value
+            },
+            `product.xlsx`
+        );
+    };
+
+    /** 导入按钮操作 */
+    const handleImport = () => {
+        upload.title = '产品树导入';
+        upload.open = true;
+    };
+
+    /** 下载模板操作 */
+    const importTemplate = () => {
+        proxy?.download('mf/product/importTemplate', {}, `product_template.xlsx`);
+    };
+
+    /**文件上传中处理 */
+    const handleFileUploadProgress = () => {
+        upload.isUploading = true;
+    };
+    /** 文件上传成功处理 */
+    const handleFileSuccess = (response: any, file: UploadFile) => {
+        upload.open = false;
+        upload.isUploading = false;
+        uploadRef.value?.handleRemove(file);
+        ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
+            dangerouslyUseHTMLString: true
+        });
+        getList();
+    };
+
+    /** 提交上传文件 */
+    function submitFileForm() {
+        uploadRef.value?.submit();
     }
-  },
-  rules: {
-    parentId: [
-      { required: true, message: "父产品id不能为空", trigger: "blur" }
-    ],
-    productName: [
-      { required: true, message: "产品名称不能为空", trigger: "blur" }
-    ],
-    orderNum: [
-      { required: true, message: "显示顺序不能为空", trigger: "blur" }
-    ],
-    status: [
-      { required: true, message: "产品状态不能为空", trigger: "change" }
-    ],
-  }
-});
 
-const { queryParams, form, rules } = toRefs(data);
+    /** 展开/折叠操作 */
+    const handleToggleExpandAll = () => {
+        isExpandAll.value = !isExpandAll.value;
+        toggleExpandAll(productList.value, isExpandAll.value)
+    };
 
-/** 查询产品树列表 */
+    /** 展开/折叠操作 */
-const getList = async () => {
+    const toggleExpandAll = (data: ProductVO[], status: boolean) => {
-  loading.value = true;
+        data.forEach((item) => {
-  const res = await listProduct(queryParams.value);
+                productTableRef.value?.toggleRowExpansion(item, status)
-  const data = proxy?.handleTree<ProductVO>(res.data, 'productId', 'parentId');
+            if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
-  if (data) {
+        })
-    productList.value = data;
+    };
-    loading.value = false;
-  }
-};
 
-/** 查询产品树下拉树结构 */
+    /** 修改按钮操作 */
-const getTreeselect = async () => {
+    const handleUpdate = async (row: ProductVO) => {
-  const res = await listProduct();
+        reset();
-  productOptions.value = [];
+        await getTreeselect();
-  const data: ProductOption = { productId: 0, productName: '顶级节点', children: [] };
+        if (row != null) {
-  data.children = proxy?.handleTree<ProductOption>(res.data, 'productId', 'parentId');
+            form.value.parentId = row.parentId;
-  productOptions.value.push(data);
+        }
-};
+        const res = await getProduct(row.productId);
+        Object.assign(form.value, res.data);
+        dialog.visible = true;
+        dialog.title = '修改产品树';
+    };
 
-// 取消按钮
+    /** 提交按钮 */
-const cancel = () => {
+    const submitForm = () => {
-  reset();
+            productFormRef.value?.validate(async (valid: boolean) => {
-  dialog.visible = false;
+            if (valid) {
-};
+                buttonLoading.value = true;
+                if (form.value.productId) {
+                    await updateProduct(form.value).finally(() => buttonLoading.value = false);
+                } else {
+                    await addProduct(form.value).finally(() => buttonLoading.value = false);
+                }
+                proxy?.$modal.msgSuccess('操作成功');
+                dialog.visible = false;
+                getList();
+            }
+        });
+    };
 
-// 表单重置
+    /** 删除按钮操作 */
-const reset = () => {
+    const handleDelete = async (row: ProductVO) => {
-  form.value = {...initFormData}
+        await proxy?.$modal.confirm('是否确认删除产品树编号为"' + row.productId + '"的数据项？');
-  productFormRef.value?.resetFields();
+        loading.value = true;
-};
+        await delProduct(row.productId).finally(() => loading.value = false);
+        await getList();
+        proxy?.$modal.msgSuccess('删除成功');
+    };
 
-/** 搜索按钮操作 */
+    onMounted(() => {
-const handleQuery = () => {
+        getList();
-  getList();
+    });
-};
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-
-/** 新增按钮操作 */
-const handleAdd = (row?: ProductVO) => {
-  reset();
-  getTreeselect();
-  if (row != null && row.productId) {
-    form.value.parentId = row.productId;
-  } else {
-    form.value.parentId = 0;
-  }
-  dialog.visible = true;
-  dialog.title = '添加产品树';
-};
-
-/** 展开/折叠操作 */
-const handleToggleExpandAll = () => {
-  isExpandAll.value = !isExpandAll.value;
-  toggleExpandAll(productList.value, isExpandAll.value)
-};
-
-/** 展开/折叠操作 */
-const toggleExpandAll = (data: ProductVO[], status: boolean) => {
-  data.forEach((item) => {
-    productTableRef.value?.toggleRowExpansion(item, status)
-    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
-  })
-};
-
-/** 修改按钮操作 */
-const handleUpdate = async (row: ProductVO) => {
-  reset();
-  await getTreeselect();
-  if (row != null) {
-    form.value.parentId = row.parentId;
-  }
-  const res = await getProduct(row.productId);
-  Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改产品树';
-};
-
-/** 提交按钮 */
-const submitForm = () => {
-  productFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      buttonLoading.value = true;
-      if (form.value.productId) {
-        await updateProduct(form.value).finally(() => buttonLoading.value = false);
-      } else {
-        await addProduct(form.value).finally(() => buttonLoading.value = false);
-      }
-      proxy?.$modal.msgSuccess('操作成功');
-      dialog.visible = false;
-      getList();
-    }
-  });
-};
-
-/** 删除按钮操作 */
-const handleDelete = async (row: ProductVO) => {
-  await proxy?.$modal.confirm('是否确认删除产品树编号为"' + row.productId + '"的数据项？');
-  loading.value = true;
-  await delProduct(row.productId).finally(() => loading.value = false);
-  await getList();
-  proxy?.$modal.msgSuccess('删除成功');
-};
-
-onMounted(() => {
-  getList();
-});
 </script>

src/views/mf/student/index.vue

@@ -36,6 +36,9 @@
           <el-col :span="1.5">
             <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['mf:student:remove']">删除</el-button>
           </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Top" @click="handleImport()" v-hasPermi="['mf:student:import']">导入</el-button>
+          </el-col>
           <el-col :span="1.5">
             <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['mf:student:export']">导出</el-button>
           </el-col>
@@ -45,7 +48,7 @@
 
       <el-table v-loading="loading" :data="studentList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="编号" align="center" prop="studentId" v-if="false" />
+        <el-table-column label="编号" align="center" prop="studentId" v-if="true" />
         <el-table-column label="学生名称" align="center" prop="studentName" />
         <el-table-column label="年龄" align="center" prop="studentAge" />
         <el-table-column label="爱好" align="center" prop="studentHobby">
@@ -89,7 +92,7 @@
       />
     </el-card>
     <!-- 添加或修改学生信息表对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="780px" append-to-body>
       <el-form ref="studentFormRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="学生名称" prop="studentName">
             <el-input v-model="form.studentName" placeholder="请输入学生名称" />
@@ -145,27 +148,87 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 导入对话框 -->
+    <el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
+      <el-upload
+          ref="uploadRef"
+          :limit="1"
+          accept=".xlsx, .xls"
+          :headers="upload.headers"
+          :action="upload.url + '?updateSupport=' + upload.updateSupport"
+          :disabled="upload.isUploading"
+          :on-progress="handleFileUploadProgress"
+          :on-success="handleFileSuccess"
+          :auto-upload="false"
+          drag
+      >
+          <el-icon class="el-icon--upload">
+              <i-ep-upload-filled />
+          </el-icon>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <template #tip>
+              <div class="text-center el-upload__tip">
+                  <div class="el-upload__tip">
+                      <el-checkbox v-model="upload.updateSupport" />
+                      是否更新已经存在的学生信息表数据
+                  </div>
+                  <span>仅允许导入xls、xlsx格式文件。</span>
+                  <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板 </el-link>
+              </div>
+          </template>
+      </el-upload>
+      <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="Student" lang="ts">
+<script setup lang="ts">
 import { listStudent, getStudent, delStudent, addStudent, updateStudent } from '@/api/mf/student';
 import { StudentVO, StudentQuery, StudentForm } from '@/api/mf/student/types';
+import { globalHeaders } from '@/utils/request';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_student_status, sys_user_gender, sys_student_hobby } = toRefs<any>(proxy?.useDict('sys_student_status', 'sys_user_gender', 'sys_student_hobby'));
 
+// 表格数据
 const studentList = ref<StudentVO[]>([]);
 const buttonLoading = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
+// 选中数组
 const ids = ref<Array<string | number>>([]);
+// 非单个禁用
 const single = ref(true);
+// 非多个禁用
 const multiple = ref(true);
+// 总条数
 const total = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
 const studentFormRef = ref<ElFormInstance>();
+const uploadRef = ref<ElUploadInstance>();
+
+/*** 导入参数 */
+const upload = reactive<ImportOption>({
+    // 是否显示弹出层（导入）
+    open: false,
+    // 弹出层标题（导入）
+    title: '',
+    // 是否禁用上传
+    isUploading: false,
+    // 是否更新已经存在的用户数据
+    updateSupport: 1,
+    // 设置上传的请求头部
+    headers: globalHeaders(),
+    // 上传的地址
+    url: import.meta.env.VITE_APP_BASE_API + '/mf/student/importData'
+});
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -260,17 +323,17 @@ const handleSelectionChange = (selection: StudentVO[]) => {
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = "添加学生信息表";
+  dialog.title = '添加学生信息表';
 };
 
 /** 修改按钮操作 */
 const handleUpdate = async (row?: StudentVO) => {
   reset();
-  const _studentId = row?.studentId || ids.value[0]
+  const _studentId = row?.studentId || ids.value[0];
   const res = await getStudent(_studentId);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = "修改学生信息表";
+  dialog.title = '修改学生信息表';
 };
 
 /** 提交按钮 */
@@ -279,11 +342,11 @@ const submitForm = () => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.studentId) {
-        await updateStudent(form.value).finally(() =>  buttonLoading.value = false);
+        await updateStudent(form.value).finally(() => (buttonLoading.value = false));
       } else {
-        await addStudent(form.value).finally(() =>  buttonLoading.value = false);
+        await addStudent(form.value).finally(() => (buttonLoading.value = false));
       }
-      proxy?.$modal.msgSuccess("修改成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
     }
@@ -299,6 +362,7 @@ const handleDelete = async (row?: StudentVO) => {
   await getList();
 };
 
+
 /** 导出按钮操作 */
 const handleExport = () => {
   proxy?.download('mf/student/export', {
@@ -306,6 +370,37 @@ const handleExport = () => {
   }, `student_${new Date().getTime()}.xlsx`)
 };
 
+/** 导入按钮操作 */
+const handleImport = () => {
+    upload.title = '学生信息表导入';
+    upload.open = true;
+};
+
+/** 下载模板操作 */
+const importTemplate = () => {
+    proxy?.download('mf/student/importTemplate', {}, `student_template.xlsx`);
+};
+
+/**文件上传中处理 */
+const handleFileUploadProgress = () => {
+    upload.isUploading = true;
+};
+/** 文件上传成功处理 */
+const handleFileSuccess = (response: any, file: UploadFile) => {
+    upload.open = false;
+    upload.isUploading = false;
+    uploadRef.value?.handleRemove(file);
+    ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
+        dangerouslyUseHTMLString: true
+    });
+    getList();
+};
+
+/** 提交上传文件 */
+function submitFileForm() {
+    uploadRef.value?.submit();
+}
+
 onMounted(() => {
   getList();
 });

src/views/monitor/easyretry/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <i-frame v-model:src="url"></i-frame>
+  </div>
+</template>
+
+<script setup lang="ts">
+const url = ref(import.meta.env.VITE_APP_EASYRETRY_ADMIN);
+</script>

src/views/register.vue

@@ -63,7 +63,7 @@ import { to } from 'await-to-js';
 const router = useRouter();
 
 const registerForm = ref<RegisterForm>({
-  tenantId: '',
+  tenantId: 1,
   username: '',
   password: '',
   confirmPassword: '',
@@ -91,7 +91,8 @@ const registerRules: ElFormRules = {
   ],
   password: [
     { required: true, trigger: 'blur', message: '请输入您的密码' },
-    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
+    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
+    { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
   ],
   confirmPassword: [
     { required: true, trigger: 'blur', message: '请再次输入您的密码' },

src/views/system/oss/index.vue

@@ -1,21 +1,17 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-                :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
             <el-form-item label="文件名" prop="fileName">
-              <el-input v-model="queryParams.fileName" placeholder="请输入文件名" clearable style="width: 200px"
+              <el-input v-model="queryParams.fileName" placeholder="请输入文件名" clearable style="width: 200px" @keyup.enter="handleQuery" />
-                        @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="原名" prop="originalName">
-              <el-input v-model="queryParams.originalName" placeholder="请输入原名" clearable style="width: 200px"
+              <el-input v-model="queryParams.originalName" placeholder="请输入原名" clearable style="width: 200px" @keyup.enter="handleQuery" />
-                        @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="文件后缀" prop="fileSuffix">
-              <el-input v-model="queryParams.fileSuffix" placeholder="请输入文件后缀" clearable style="width: 200px"
+              <el-input v-model="queryParams.fileSuffix" placeholder="请输入文件后缀" clearable style="width: 200px" @keyup.enter="handleQuery" />
-                        @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="创建时间">
               <el-date-picker
@@ -150,6 +146,7 @@
 import { listOss, delOss } from '@/api/system/oss';
 import ImagePreview from '@/components/ImagePreview/index.vue';
 import { OssForm, OssQuery, OssVO } from '@/api/system/oss/types';
+import { parseTime } from '@/utils/ruoyi';
 
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -214,11 +211,10 @@ const getList = async () => {
   showTable.value = true;
 };
 
-function checkFileSuffix(fileSuffix: string[]) {
+function checkFileSuffix(fileSuffix: string | string[]) {
-  let arr = ['png', 'jpg', 'jpeg'];
+  const arr = [".png", ".jpg", ".jpeg"];
-  return arr.some((type) => {
+  const suffixArray = Array.isArray(fileSuffix) ? fileSuffix : [fileSuffix];
-    return fileSuffix.indexOf(type) > -1;
+  return suffixArray.some(suffix => arr.includes(suffix.toLowerCase()));
-  });
 }
 
 /** 取消按钮 */

src/views/system/user/index.vue

@@ -114,7 +114,7 @@
                              :show-overflow-tooltip="true" />
             <el-table-column v-if="columns[2].visible" key="nickName" label="用户昵称" align="center" prop="nickName"
                              :show-overflow-tooltip="true" />
-            <el-table-column v-if="columns[3].visible" key="deptName" label="部门" align="center" prop="deptName"
+            <el-table-column v-if="columns[3].visible" key="deptName" label="部门" align="center" prop="dept.deptName"
                              :show-overflow-tooltip="true" />
             <el-table-column v-if="columns[4].visible" key="phonenumber" label="手机号码" align="center"
                              prop="phonenumber" width="120" />
@@ -425,7 +425,8 @@ const initData: PageData<UserForm, UserQuery> = {
         max: 20,
         message: '用户密码长度必须介于 5 和 20 之间',
         trigger: 'blur'
-      }
+      },
+      { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
     ],
     email: [
       {
@@ -539,7 +540,12 @@ const handleResetPwd = async (row: UserVO) => {
       cancelButtonText: '取消',
       closeOnClickModal: false,
       inputPattern: /^.{5,20}$/,
-      inputErrorMessage: '用户密码长度必须介于 5 和 20 之间'
+      inputErrorMessage: '用户密码长度必须介于 5 和 20 之间',
+      inputValidator: (value) => {
+        if (/<|>|"|'|\||\\/.test(value)) {
+          return "不能包含非法字符：< > \" ' \\\ |"
+        }
+      }
     })
   );
   if (!err && res) {

src/views/system/user/profile/index.vue

@@ -27,7 +27,7 @@
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="tree" />所属部门
-                <div v-if="state.user.deptName" class="pull-right">{{ state.user.deptName }} / {{ state.postGroup }}</div>
+                <div v-if="state.user.dept" class="pull-right">{{ state.user.dept?.deptName }} / {{ state.postGroup }}</div>
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="peoples" />所属角色

src/views/system/user/profile/resetPwd.vue

@@ -44,7 +44,8 @@ const rules = ref({
       max: 20,
       message: '长度在 6 到 20 个字符',
       trigger: 'blur'
-    }
+    },
+    { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
   ],
   confirmPassword: [
     { required: true, message: '确认密码不能为空', trigger: 'blur' },

src/views/tool/gen/editTable.vue

@@ -182,7 +182,7 @@ const close = () => {
   proxy?.$tab.closeOpenPage(obj);
 };
 
-(async () => {
+onActivated(async ()=>{
   const tableId = route.params && (route.params.tableId as string);
   if (tableId) {
     // 获取表详细信息
@@ -194,5 +194,5 @@ const close = () => {
     const response = await getDictOptionselect();
     dictOptions.value = response.data;
   }
-})();
+});
 </script>

src/views/tool/gen/genInfoForm.vue

@@ -7,6 +7,7 @@
           <el-select v-model="infoForm.tplCategory" @change="tplSelectChange">
             <el-option label="单表（增删改查）" value="crud" />
             <el-option label="树表（增删改查）" value="tree" />
+            <el-option label="主子表（增删改查）" value="sub" />
           </el-select>
         </el-form-item>
       </el-col>
@@ -94,7 +95,6 @@
           <el-radio v-model="infoForm.genType" label="1">自定义路径</el-radio>
         </el-form-item>
       </el-col>
-
       <el-col v-if="infoForm.genType == '1'" :span="24">
         <el-form-item prop="genPath">
           <template #label>
@@ -120,6 +120,14 @@
           </el-input>
         </el-form-item>
       </el-col>
+      <el-col :span="12">
+          <el-form-item label="number" prop="editColumns" class="label-right-align">
+            <template #label>编辑页列数</template>
+            <el-input-number v-model="infoForm.editColumns" class="full-width-input" controls-position="right"
+              :min="1" :max="4" :precision="0" :step="1"></el-input-number>
+
+          </el-form-item>
+      </el-col>
     </el-row>
 
     <template v-if="info.tplCategory == 'tree'">