加密

src/api/crypto.js

@@ -0,0 +1,76 @@
+import CryptoJS from 'crypto-js'
+
+/**
+ * AES 加解密工具类
+ */
+class CryptoUtil {
+    // 默认密钥（生产环境应从配置或接口获取）
+    static KEY = '0123456789abcdef0123456789abcdef' // 32位密钥
+    static IV = '0123456789abcdef' // 16位初始向量
+
+    /**
+     * 加密
+     * @param {string} data 要加密的数据
+     * @param {string} key 密钥（可选）
+     * @param {string} iv 初始向量（可选）
+     * @returns {string} 加密后的Base64字符串
+     */
+    static encrypt(data, key = this.KEY, iv = this.IV) {
+        try {
+            const keyHex = CryptoJS.enc.Utf8.parse(key)
+            const ivHex = CryptoJS.enc.Utf8.parse(iv)
+
+            const encrypted = CryptoJS.AES.encrypt(data, keyHex, {
+                iv: ivHex,
+                mode: CryptoJS.mode.CBC,
+                padding: CryptoJS.pad.Pkcs7
+            })
+
+            return encrypted.toString()
+        } catch (error) {
+            console.error('加密失败:', error)
+            throw new Error('加密失败')
+        }
+    }
+
+    /**
+     * 解密
+     * @param {string} encryptedData 加密后的Base64字符串
+     * @param {string} key 密钥（可选）
+     * @param {string} iv 初始向量（可选）
+     * @returns {string} 解密后的原文
+     */
+    static decrypt(encryptedData, key = this.KEY, iv = this.IV) {
+        try {
+            const keyHex = CryptoJS.enc.Utf8.parse(key)
+            const ivHex = CryptoJS.enc.Utf8.parse(iv)
+
+            const decrypted = CryptoJS.AES.decrypt(encryptedData, keyHex, {
+                iv: ivHex,
+                mode: CryptoJS.mode.CBC,
+                padding: CryptoJS.pad.Pkcs7
+            })
+
+            return decrypted.toString(CryptoJS.enc.Utf8)
+        } catch (error) {
+            console.error('解密失败:', error)
+            throw new Error('解密失败')
+        }
+    }
+
+    /**
+     * 生成随机密钥
+     * @param {number} length 密钥长度（16/24/32对应128/192/256位）
+     * @returns {string} 随机密钥
+     */
+    static generateKey(length = 32) {
+        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+        let result = ''
+        for (let i = 0; i < length; i++) {
+            result += chars.charAt(Math.floor(Math.random() * chars.length))
+        }
+        return result
+    }
+}
+
+export default CryptoUtil

src/views/personManage/Person/config.js

@@ -1,4 +1,5 @@
 import { reactive } from 'vue'
+import CryptoUtil from "../../../api/crypto.js";
 
 // 根据下拉数据构建搜索表单配置
 // 注意：这里不直接发请求，只依赖调用方传入的 options，避免在模块顶层使用组合式 API
@@ -73,6 +74,7 @@ export const tableColumns = [
     {
         prop: 'phone',
         label: '电话',
+        formatter: (row) => (CryptoUtil.decrypt(row.phone)),
     },
     {
         prop: 'positionName',

src/views/system/user/index.vue

@@ -62,7 +62,11 @@
               <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns.userName.visible" :show-overflow-tooltip="true" />
               <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns.nickName.visible" :show-overflow-tooltip="true" />
               <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns.deptName.visible" :show-overflow-tooltip="true" />
-              <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns.phonenumber.visible" width="120" />
+              <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns.phonenumber.visible" width="120" >
+                <template #default="scope">
+                 {{phoneDes(scope.row.phonenumber)}}
+                </template>
+              </el-table-column>
               <el-table-column label="状态" align="center" key="status" v-if="columns.status.visible">
                 <template #default="scope">
                   <el-switch
@@ -219,6 +223,7 @@ import useAppStore from '@/store/modules/app'
 import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
+import CryptoUtil from "../../../api/crypto.js";
 
 const router = useRouter()
 const appStore = useAppStore()
@@ -549,6 +554,9 @@ function submitForm() {
   })
 }
 
+function phoneDes(prm){
+  return CryptoUtil.decrypt(prm)
+}
 onMounted(() => {
   getDeptTree()
   getList()