!25 部分优化以及新增功能

Merge pull request !25 from ahaos/tspr

.eslintrc-auto-import.json

@@ -1,5 +1,36 @@
 {
   "globals": {
+    "ComponentInternalInstance": true,
+    "TransferKey": true,
+    "ElFormRules": true,
+    "CheckboxValueType": true,
+    "PropType": true,
+    "DateModelType": true,
+    "UploadFile": true,
+    "ElFormInstance": true,
+    "ElTableInstance": true,
+    "ElTreeInstance": true,
+    "ElTreeSelectInstance": true,
+    "ElSelectInstance": true,
+    "ElUploadInstance": true,
+    "ElCardInstance": true,
+    "ElDialogInstance": true,
+    "ElInputInstance": true,
+    "ElInputNumberInstance": true,
+    "ElRadioInstance": true,
+    "ElRadioGroupInstance": true,
+    "ElRadioButtonInstance": true,
+    "ElCheckboxInstance": true,
+    "ElCheckboxGroupInstance": true,
+    "ElSwitchInstance": true,
+    "ElDatePickerInstance": true,
+    "ElTimePickerInstance": true,
+    "ElTimeSelectInstance": true,
+    "ElScrollbarInstance": true,
+    "ElCascaderInstance": true,
+    "ElColorPickerInstance": true,
+    "ElRateInstance": true,
+    "ElSliderInstance": true,
     "useRouter": true,
     "useRoute": true,
     "EffectScope": true,

.eslintrc.js

@@ -29,7 +29,8 @@ module.exports = {
         // 关闭空类型检查 {}
         extendDefaults: true,
         types: {
-          '{}': false
+          '{}': false,
+          'Function': false
         }
       }
     ]

package.json

@@ -35,10 +35,12 @@
     "path-to-regexp": "6.2.0",
     "pinia": "2.0.22",
     "screenfull": "6.0.0",
+    "vform3-builds": "3.0.8",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
     "vue-i18n": "9.2.2",
-    "vue-router": "4.1.4"
+    "vue-router": "4.1.4",
+    "vue-types": "^5.0.3"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.40",
@@ -71,11 +73,11 @@
     "unplugin-auto-import": "0.13.0",
     "unplugin-icons": "0.15.1",
     "unplugin-vue-components": "0.23.0",
+    "vite": "4.3.1",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vitest": "^0.29.7",
-    "vite": "4.3.1",
     "vue-eslint-parser": "9.1.0",
     "vue-tsc": "0.35.0"
   }

src/api/system/user/index.ts

@@ -9,64 +9,64 @@ import { parseStrEmpty } from '@/utils/ruoyi';
  * 查询用户列表
  * @param query
  */
-export function listUser(query: UserQuery): AxiosPromise<UserVO[]> {
+export const listUser = (query: UserQuery): AxiosPromise<UserVO[]> => {
   return request({
     url: '/system/user/list',
     method: 'get',
     params: query
   });
-}
+};
 
 /**
  * 获取用户详情
  * @param userId
  */
-export function getUser(userId?: string | number): AxiosPromise<UserInfoVO> {
+export const getUser = (userId?: string | number): AxiosPromise<UserInfoVO> => {
   return request({
     url: '/system/user/' + parseStrEmpty(userId),
     method: 'get'
   });
-}
+};
 
 /**
  * 新增用户
  */
-export function addUser(data: UserForm) {
+export const addUser = (data: UserForm) => {
   return request({
     url: '/system/user',
     method: 'post',
     data: data
   });
-}
+};
 
 /**
  * 修改用户
  */
-export function updateUser(data: UserForm) {
+export const updateUser = (data: UserForm) => {
   return request({
     url: '/system/user',
     method: 'put',
     data: data
   });
-}
+};
 
 /**
  * 删除用户
  * @param userId 用户ID
  */
-export function delUser(userId: Array<string | number> | string | number) {
+export const delUser = (userId: Array<string | number> | string | number) => {
   return request({
     url: '/system/user/' + userId,
     method: 'delete'
   });
-}
+};
 
 /**
  * 用户密码重置
  * @param userId 用户ID
  * @param password 密码
  */
-export function resetUserPwd(userId: string | number, password: string) {
+export const resetUserPwd = (userId: string | number, password: string) => {
   const data = {
     userId,
     password
@@ -76,14 +76,14 @@ export function resetUserPwd(userId: string | number, password: string) {
     method: 'put',
     data: data
   });
-}
+};
 
 /**
  * 用户状态修改
  * @param userId 用户ID
  * @param status 用户状态
  */
-export function changeUserStatus(userId: number | string, status: string) {
+export const changeUserStatus = (userId: number | string, status: string) => {
   const data = {
     userId,
     status
@@ -93,36 +93,36 @@ export function changeUserStatus(userId: number | string, status: string) {
     method: 'put',
     data: data
   });
-}
+};
 
 /**
  * 查询用户个人信息
  */
-export function getUserProfile(): AxiosPromise<UserInfoVO> {
+export const getUserProfile = (): AxiosPromise<UserInfoVO> => {
   return request({
     url: '/system/user/profile',
     method: 'get'
   });
-}
+};
 
 /**
  * 修改用户个人信息
  * @param data 用户信息
  */
-export function updateUserProfile(data: UserForm) {
+export const updateUserProfile = (data: UserForm) => {
   return request({
     url: '/system/user/profile',
     method: 'put',
     data: data
   });
-}
+};
 
 /**
  * 用户密码重置
  * @param oldPassword 旧密码
  * @param newPassword 新密码
  */
-export function updateUserPwd(oldPassword: string, newPassword: string) {
+export const updateUserPwd = (oldPassword: string, newPassword: string) => {
   const data = {
     oldPassword,
     newPassword
@@ -132,49 +132,66 @@ export function updateUserPwd(oldPassword: string, newPassword: string) {
     method: 'put',
     params: data
   });
-}
+};
 
 /**
  * 用户头像上传
  * @param data 头像文件
  */
-export function uploadAvatar(data: FormData) {
+export const uploadAvatar = (data: FormData) => {
   return request({
     url: '/system/user/profile/avatar',
     method: 'post',
     data: data
   });
-}
+};
 
 /**
  * 查询授权角色
  * @param userId 用户ID
  */
-export function getAuthRole(userId: string | number): AxiosPromise<{ user: UserVO; roles: RoleVO[] }> {
+export const getAuthRole = (userId: string | number): AxiosPromise<{ user: UserVO; roles: RoleVO[] }> => {
   return request({
     url: '/system/user/authRole/' + userId,
     method: 'get'
   });
-}
+};
 
 /**
  * 保存授权角色
  * @param data 用户ID
  */
-export function updateAuthRole(data: { userId: string; roleIds: string }) {
+export const updateAuthRole = (data: { userId: string; roleIds: string }) => {
   return request({
     url: '/system/user/authRole',
     method: 'put',
     params: data
   });
-}
+};
 
 /**
  * 查询部门下拉树结构
  */
-export function deptTreeSelect(): AxiosPromise<DeptVO[]> {
+export const deptTreeSelect = (): AxiosPromise<DeptVO[]> => {
   return request({
     url: '/system/user/deptTree',
     method: 'get'
   });
-}
+};
+
+export default {
+  listUser,
+  getUser,
+  addUser,
+  updateUser,
+  delUser,
+  resetUserPwd,
+  changeUserStatus,
+  getUserProfile,
+  updateUserProfile,
+  updateUserPwd,
+  uploadAvatar,
+  getAuthRole,
+  updateAuthRole,
+  deptTreeSelect
+};

src/assets/styles/index.scss

@@ -26,6 +26,10 @@ html {
   box-sizing: border-box;
 }
 
+html.dark .svg-icon, html.dark svg {
+  fill: var(--el-text-color-regular);
+}
+
 #app {
   height: 100%;
 }
@@ -137,6 +141,7 @@ aside {
   border: 1px solid var(--el-border-color-light);
   background-color: var(--el-bg-color-overlay);
   padding: 0.75rem;
+  transition: all ease 0.3s;
 
   &:hover {
     box-shadow: 0 2px 12px #0000001a;

src/assets/styles/ruoyi.scss

@@ -90,8 +90,8 @@ h6 {
   .el-table__fixed-header-wrapper {
     th {
       word-break: break-word;
-      background-color: #f8f8f9 !important;
+      background-color: $table-header-bg !important;
-      color: #515a6e;
+      color: $table-header-text-color;
       height: 40px !important;
       font-size: 13px;
     }

src/assets/styles/sidebar.scss

@@ -84,7 +84,7 @@
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: $base-sub-menu-title-hover !important;
       }
     }
 
@@ -211,7 +211,7 @@
   .el-menu-item {
     &:hover {
       // you can use $sub-menuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      background-color: $base-menu-hover !important;
     }
   }
 

src/assets/styles/variables.module.scss

@@ -1,3 +1,38 @@
+// 全局SCSS变量
+:root {
+  --menuBg: #304156;
+  --menuColor: #bfcbd9;
+  --menuActiveText: #f4f4f5;
+  --menuHover: #263445;
+
+  --subMenuBg: #1f2d3d;
+  --subMenuActiveText: #f4f4f5;
+  --subMenuHover: #001528;
+  --subMenuTitleHover: #293444;
+
+  --tableHeaderBg: #f8f8f9;
+  --tableHeaderTextColor: #515a6e;
+}
+html.dark {
+  --menuBg: #1d1e1f;
+  --menuColor: #bfcbd9;
+  --menuActiveText: #f4f4f5;
+  --menuHover: #171819;
+
+  --subMenuBg: #1d1e1f;
+  --subMenuActiveText: #1d1e1f;
+  --subMenuHover: #171819;
+  --subMenuTitleHover: #171819;
+
+  --tableHeaderBg: var(--el-bg-color);
+  --tableHeaderTextColor: var(--el-text-color);
+
+  // 覆盖ele 高亮当前行的标准暗色
+  .el-tree-node__content {
+    --el-color-primary-light-9: #262727;
+  }
+}
+
 // base color
 $blue: #324157;
 $light-blue: #3a71a8;
@@ -9,32 +44,22 @@ $yellow: #fec171;
 $panGreen: #30b08f;
 
 // 默认菜单主题风格
-$base-menu-color: #bfcbd9;
+$base-menu-color: var(--menuColor);
-$base-menu-color-active: #f4f4f5;
+$base-menu-hover: var(--menuHover);
-$base-menu-background: #304156;
+$base-menu-color-active: var(--menuActiveText);
+$base-menu-background: var(--menuBg);
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color: rgba(0, 0, 0, 0.7);
 $base-menu-light-background: #ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background: #1f2d3d;
+$base-sub-menu-background: var(--subMenuBg);
-$base-sub-menu-hover: #001528;
+$base-sub-menu-hover: var(--subMenuHover);
-
+$base-sub-menu-title-hover: var(--subMenuTitleHover);
-// 自定义暗色菜单风格
+// 表单头背景色和标题颜色
-/**
+$table-header-bg: var(--tableHeaderBg);
-$base-menu-color:hsla(0,0%,100%,.65);
+$table-header-text-color: var(--tableHeaderTextColor);
-$base-menu-color-active:#fff;
-$base-menu-background:#001529;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
-
-$base-sub-menu-background:#000c17;
-$base-sub-menu-hover:#001528;
-*/
 
 $--color-primary: #409eff;
 $--color-success: #67c23a;

src/components/BuildCode/index.vue

@@ -0,0 +1,64 @@
+<!-- 代码构建 -->
+<script setup lang="ts">
+
+const props = defineProps({
+  showBtn: {
+    type: Boolean,
+    default: false
+  },
+  formJson: {
+    type: Object,
+    default: undefined
+  }
+})
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const buildRef = ref();
+const emits = defineEmits(['reJson', 'saveDesign']);
+
+
+
+//获取表单json
+const getJson = () => {
+  const formJson = JSON.stringify(buildRef.value.getFormJson())
+  const fieldJson = JSON.stringify(buildRef.value.getFieldWidgets())
+  let data = {
+    formJson, fieldJson
+  }
+  emits("saveDesign", data)
+}
+
+onMounted(() => {
+  if (props.formJson) {
+    buildRef.value.setFormJson(props.formJson)
+  }
+})
+</script>
+
+<template>
+  <div>
+    <v-form-designer
+      class="build"
+      ref="buildRef"
+      :designer-config="{ importJsonButton: true, exportJsonButton: true, exportCodeButton: true, generateSFCButton: true, formTemplates: true }"
+    >
+      <template #customToolButtons v-if="showBtn">
+        <el-button link type="primary" icon="Select" @click="getJson">保存</el-button>
+      </template>
+    </v-form-designer>
+  </div>
+</template>
+
+<style lang="scss">
+.build {
+  margin: 0 !important;
+  overflow-y: auto !important;
+
+  & header.main-header {
+    display: none;
+  }
+
+  & .right-toolbar-con {
+    text-align: right !important;
+  }
+}
+</style>

src/components/BuildCode/render.vue

@@ -0,0 +1,62 @@
+<!-- 动态表单渲染 -->
+<script setup name="Render">
+
+const props = defineProps({
+  formJson: {
+    type: [String, Object],
+    default: {}
+  },
+  formData: {
+    type: [String, Object],
+    default: {}
+  },
+  isView: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const vFormRef = ref(null)
+// 获取表单数据-异步
+const getFormData = () => {
+  return vFormRef.value.getFormData()
+}
+
+/**
+ * 设置表单内容
+ * @param {表单配置} formConf
+ * formConfig：{ formTemplate：表单模板，formData：表单数据，hiddenField：需要隐藏的字段字符串集合，disabledField：需要禁用的自读字符串集合}
+ */
+const initForm = (formConf) => {
+  const { formTemplate, formData, hiddenField, disabledField } = toRaw(formConf)
+  if (formTemplate) {
+    vFormRef.value.setFormJson(formTemplate)
+    if (formData) {
+      vFormRef.value.setFormData(formData)
+    }
+    if (disabledField && disabledField.length > 0) {
+      setTimeout(() => {
+        vFormRef.value.disableWidgets(disabledField)
+      }, 200)
+    }
+    if (hiddenField && hiddenField.length > 0) {
+      setTimeout(() => {
+        vFormRef.value.hideWidgets(hiddenField)
+      }, 200)
+    }
+    if (props.isView) {
+      console.log(props.isView)
+      setTimeout(() => {
+        vFormRef.value.disableForm()
+      }, 100)
+    }
+  }
+}
+defineExpose({ getFormData, initForm })
+</script>
+
+<template>
+  <div class="">
+    <v-form-render ref="vFormRef" :form-json="formJson" :form-data="formData" />
+  </div>
+</template>

src/components/DictTag/index.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue';
+import { propTypes } from '@/utils/propTypes';
 
 
 const props = defineProps({
@@ -36,10 +36,7 @@ const props = defineProps({
   // 当前的值
   value: [Number, String, Array] as PropType<number | string | Array<number | string>>,
   // 当未找到匹配的数据时，显示value
-  showValue: {
+  showValue: propTypes.bool.def(true),
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
 });
 
 const values = computed(() => {

src/components/Editor/index.vue

@@ -30,38 +30,21 @@
 import { QuillEditor, Quill } from '@vueup/vue-quill';
 import '@vueup/vue-quill/dist/vue-quill.snow.css';
 import { getToken } from "@/utils/auth";
-import { ComponentInternalInstance } from "vue";
+import { propTypes } from '@/utils/propTypes';
 
 const props = defineProps({
   /* 编辑器的内容 */
-    modelValue: {
+  modelValue: propTypes.string,
-        type: String,
-    },
   /* 高度 */
-    height: {
+  height: propTypes.number.def(400),
-        type: Number,
-        default: null,
-    },
   /* 最小高度 */
-    minHeight: {
+  minHeight: propTypes.number.def(400),
-        type: Number,
-        default: null,
-    },
   /* 只读 */
-    readOnly: {
+  readOnly: propTypes.bool.def(false),
-        type: Boolean,
-        default: false,
-    },
   /* 上传文件大小限制(MB) */
-    fileSize: {
+  fileSize: propTypes.number.def(5),
-        type: Number,
-        default: 5,
-    },
   /* 类型（base64格式、url格式） */
-    type: {
+  type: propTypes.string.def('url')
-        type: String,
-        default: "url",
-    }
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -82,7 +65,7 @@ const options = ref({
       container: [
         ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
         ["blockquote", "code-block"],                    // 引用  代码块
-                [{ list: "ordered" }, { list: "bullet"} ],       // 有序、无序列表
+        [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
         [{ indent: "-1" }, { indent: "+1" }],            // 缩进
         [{ size: ["small", false, "large", "huge"] }],   // 字体大小
         [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
@@ -166,16 +149,20 @@ const handleUploadError = (err: any) => {
 </script>
 
 <style>
-.editor, .ql-toolbar {
+.editor,
+.ql-toolbar {
   white-space: pre-wrap !important;
   line-height: normal !important;
 }
+
 .quill-img {
   display: none;
 }
+
 .ql-snow .ql-tooltip[data-mode="link"]::before {
   content: "请输入链接地址:";
 }
+
 .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
   border-right: 0;
   content: "保存";
@@ -190,14 +177,17 @@ const handleUploadError = (err: any) => {
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {
   content: "14px";
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
   content: "10px";
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
   content: "18px";
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
   content: "32px";
@@ -207,26 +197,32 @@ const handleUploadError = (err: any) => {
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
   content: "文本";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
   content: "标题1";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
   content: "标题2";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
   content: "标题3";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
   content: "标题4";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
   content: "标题5";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
   content: "标题6";
@@ -236,10 +232,12 @@ const handleUploadError = (err: any) => {
 .ql-snow .ql-picker.ql-font .ql-picker-item::before {
   content: "标准字体";
 }
+
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
   content: "衬线字体";
 }
+
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
   content: "等宽字体";

src/components/FileUpload/index.vue

@@ -45,31 +45,18 @@
 <script setup lang="ts">
 import { getToken } from "@/utils/auth";
 import { listByIds, delOss } from "@/api/system/oss";
-import { ComponentInternalInstance } from "vue";
+import { propTypes } from '@/utils/propTypes';
-import { ElUpload, UploadFile } from "element-plus";
 
 const props = defineProps({
     modelValue: [String, Object, Array],
     // 数量限制
-    limit: {
+    limit: propTypes.number.def(5),
-        type: Number,
-        default: 5,
-    },
     // 大小限制(MB)
-    fileSize: {
+    fileSize: propTypes.number.def(5),
-        type: Number,
-        default: 5,
-    },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
-    fileType: {
+    fileType: propTypes.array.def(["doc", "xls", "ppt", "txt", "pdf"]),
-        type: Array,
-        default: () => ["doc", "xls", "ppt", "txt", "pdf"],
-    },
     // 是否显示提示
-    isShowTip: {
+    isShowTip: propTypes.bool.def(true),
-        type: Boolean,
-        default: true
-    }
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -86,7 +73,7 @@ const showTip = computed(
     () => props.isShowTip && (props.fileType || props.fileSize)
 );
 
-const fileUploadRef = ref(ElUpload);
+const fileUploadRef = ref<ElUploadInstance>();
 
 watch(() => props.modelValue, async val => {
     if (val) {
@@ -104,7 +91,7 @@ watch(() => props.modelValue, async val => {
         }
         // 然后将数组转为对象数组
         fileList.value = list.map(item => {
-            item = {name: item.name, url: item.url, ossId: item.ossId};
+            item = { name: item.name, url: item.url, ossId: item.ossId };
             item.uid = item.uid || new Date().getTime() + temp++;
             return item;
         });
@@ -112,7 +99,7 @@ watch(() => props.modelValue, async val => {
         fileList.value = [];
         return [];
     }
-},{ deep: true, immediate: true });
+}, { deep: true, immediate: true });
 
 // 上传前校检格式和大小
 const handleBeforeUpload = (file: any) => {
@@ -150,7 +137,7 @@ const handleUploadError = () => {
 }
 
 // 上传成功回调
-const handleUploadSuccess = (res:any, file: UploadFile) => {
+const handleUploadSuccess = (res: any, file: UploadFile) => {
     if (res.code === 200) {
         uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
         uploadedSuccessfully();
@@ -158,7 +145,7 @@ const handleUploadSuccess = (res:any, file: UploadFile) => {
         number.value--;
         proxy?.$modal.closeLoading();
         proxy?.$modal.msgError(res.msg);
-        fileUploadRef.value.handleRemove(file);
+        fileUploadRef.value?.handleRemove(file);
         uploadedSuccessfully();
     }
 }
@@ -172,7 +159,7 @@ const handleDelete = (index: number) => {
 }
 
 // 上传结束处理
-const uploadedSuccessfully =() => {
+const uploadedSuccessfully = () => {
     if (number.value > 0 && uploadList.value.length === number.value) {
         fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
         uploadList.value = [];
@@ -209,18 +196,21 @@ const listToString = (list: any[], separator?: string) => {
 .upload-file-uploader {
     margin-bottom: 5px;
 }
+
 .upload-file-list .el-upload-list__item {
     border: 1px solid #e4e7ed;
     line-height: 2;
     margin-bottom: 10px;
     position: relative;
 }
+
 .upload-file-list .ele-upload-list__item-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: inherit;
 }
+
 .ele-upload-list__item-content-action .el-link {
     margin-right: 10px;
 }

src/components/Hamburger/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="padding: 0 15px;" @click="toggleClick">
-    <svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64">
+    <svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64">
       <path
         d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
       />
@@ -9,11 +9,10 @@
 </template>
 
 <script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
 defineProps({
-    isActive: {
+  isActive: propTypes.bool.def(false)
-        type: Boolean,
-        default: false
-    }
 })
 
 const emit = defineEmits(['toggleClick'])

src/components/HeaderSearch/index.vue

@@ -17,12 +17,12 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="HeaderSearch">
-import Fuse from 'fuse.js'
+import Fuse from 'fuse.js';
-import { getNormalPath } from '@/utils/ruoyi'
+import { getNormalPath } from '@/utils/ruoyi';
-import { isHttp } from '@/utils/validate'
+import { isHttp } from '@/utils/validate';
-import usePermissionStore from '@/store/modules/permission'
+import usePermissionStore from '@/store/modules/permission';
-import { RouteOption } from 'vue-router'
+import { RouteOption } from 'vue-router';
 
 type Router = Array<{
     path: string;
@@ -34,7 +34,7 @@ const options = ref<any>([]);
 const searchPool = ref<Router>([]);
 const show = ref(false);
 const fuse = ref();
-const headerSearchSelectRef = ref(ElSelect);
+const headerSearchSelectRef = ref<ElSelectInstance>();
 const router = useRouter();
 const routes = computed(() => usePermissionStore().routes);
 
@@ -123,9 +123,9 @@ onMounted(() => {
     searchPool.value = generateRoutes(routes.value);
 })
 
-watchEffect(() => {
+// watchEffect(() => {
-    searchPool.value = generateRoutes(routes.value)
+//     searchPool.value = generateRoutes(routes.value)
-})
+// })
 
 watch(show, (value) => {
     if (value) {

src/components/IconSelect/index.vue

@@ -31,17 +31,11 @@
 
 <script setup lang="ts">
 import icons from '@/components/IconSelect/requireIcons';
+import { propTypes } from '@/utils/propTypes';
 
 const props = defineProps({
-  modelValue: {
+  modelValue: propTypes.string.isRequired,
-    type: String,
+  width: propTypes.string.def('400px')
-    require: true
-  },
-  width: {
-    type: String,
-    require: false,
-    default: '400px'
-  }
 });
 
 const emit = defineEmits(['update:modelValue']);

src/components/ImagePreview/index.vue

@@ -9,11 +9,10 @@
 </template>
 
 <script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
 const props = defineProps({
-    src: {
+  src: propTypes.string.def(''),
-        type: String,
-        default: ""
-    },
   width: {
     type: [Number, String],
     default: ""
@@ -37,7 +36,7 @@ const realSrcList = computed(() => {
     return;
   }
   let real_src_list = props.src.split(",");
-    let srcList:string[] = [];
+  let srcList: string[] = [];
   real_src_list.forEach(item => {
     return srcList.push(item);
   });
@@ -58,13 +57,16 @@ const realHeight = computed(() =>
   border-radius: 5px;
   background-color: #ebeef5;
   box-shadow: 0 0 5px 1px #ccc;
+
   :deep(.el-image__inner) {
     transition: all 0.3s;
     cursor: pointer;
+
     &:hover {
       transform: scale(1.2);
     }
   }
+
   :deep(.image-slot) {
     display: flex;
     justify-content: center;

src/components/ImageUpload/index.vue

@@ -17,7 +17,9 @@
       :on-preview="handlePictureCardPreview"
       :class="{ hide: fileList.length >= limit }"
     >
-      <el-icon class="avatar-uploader-icon"><plus /></el-icon>
+      <el-icon class="avatar-uploader-icon">
+        <plus />
+      </el-icon>
     </el-upload>
     <!-- 上传提示 -->
     <div class="el-upload__tip" v-if="showTip">
@@ -42,25 +44,16 @@ import { getToken } from "@/utils/auth";
 import { listByIds, delOss } from "@/api/system/oss";
 import { ComponentInternalInstance, PropType } from "vue";
 import { OssVO } from "@/api/system/oss/types";
-import { ElUpload, UploadFile } from "element-plus";
+import { propTypes } from '@/utils/propTypes';
 
 const props = defineProps({
     modelValue: [String, Object, Array],
     // 图片数量限制
-    limit: {
+    limit: propTypes.number.def(5),
-        type: Number,
-        default: 5,
-    },
     // 大小限制(MB)
-    fileSize: {
+    fileSize: propTypes.number.def(5),
-        type: Number,
-        default: 5,
-    },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
-    fileType: {
+    fileType: propTypes.array.def(["png", "jpg", "jpeg"]),
-        type: Array as PropType<string[]>,
-        default: () => ["png", "jpg", "jpeg"],
-    },
     // 是否显示提示
     isShowTip: {
         type: Boolean,
@@ -84,12 +77,12 @@ const showTip = computed(
     () => props.isShowTip && (props.fileType || props.fileSize)
 );
 
-const imageUploadRef = ref(ElUpload);
+const imageUploadRef = ref<ElUploadInstance>();
 
 watch(() => props.modelValue, async val => {
     if (val) {
         // 首先将值转为数组
-        let list:OssVO[] = [];
+        let list: OssVO[] = [];
         if (Array.isArray(val)) {
             list = val as OssVO[];
         } else {
@@ -112,7 +105,7 @@ watch(() => props.modelValue, async val => {
         fileList.value = [];
         return [];
     }
-},{ deep: true, immediate: true });
+}, { deep: true, immediate: true });
 
 /** 上传前loading加载 */
 const handleBeforeUpload = (file: any) => {
@@ -122,7 +115,7 @@ const handleBeforeUpload = (file: any) => {
         if (file.name.lastIndexOf(".") > -1) {
             fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
         }
-        isImg = props.fileType.some((type) => {
+        isImg = props.fileType.some((type: any) => {
             if (file.type.indexOf(type) > -1) return true;
             if (fileExtension && fileExtension.indexOf(type) > -1) return true;
             return false;
@@ -161,7 +154,7 @@ const handleUploadSuccess = (res: any, file: UploadFile) => {
         number.value--;
         proxy?.$modal.closeLoading();
         proxy?.$modal.msgError(res.msg);
-        imageUploadRef.value.handleRemove(file);
+        imageUploadRef.value?.handleRemove(file);
         uploadedSuccessfully();
     }
 }
@@ -207,7 +200,7 @@ const listToString = (list: any[], separator?: string) => {
     let strs = "";
     separator = separator || ",";
     for (let i in list) {
-        if(undefined !== list[i].ossId && list[i].url.indexOf("blob:") !== 0) {
+        if (undefined !== list[i].ossId && list[i].url.indexOf("blob:") !== 0) {
             strs += list[i].ossId + separator;
         }
     }

src/components/Pagination/index.vue

@@ -22,52 +22,23 @@ export default {
 
 <script setup lang="ts">
 import { scrollTo } from '@/utils/scroll-to'
-import { PropType } from "vue";
+import { propTypes } from "@/utils/propTypes";
 
 const props = defineProps({
-    total: {
+    total: propTypes.number,
-        required: true,
+    page: propTypes.number.def(1),
-        type: Number
+    limit: propTypes.number.def(20),
-    },
-    page: {
-        type: Number,
-        default: 1
-    },
-    limit: {
-        type: Number,
-        default: 20
-    },
     pageSizes: {
       type: Array as PropType<number[]>,
-        default() {
+      default: () => [10, 20, 30, 50]
-            return [10, 20, 30, 50]
-        }
     },
     // 移动端页码按钮的数量端默认值5
-    pagerCount: {
+    pagerCount: propTypes.number.def(document.body.clientWidth < 992 ? 5 : 7),
-        type: Number,
+    layout: propTypes.string.def('total, sizes, prev, pager, next, jumper'),
-        default: document.body.clientWidth < 992 ? 5 : 7
+    background: propTypes.bool.def(true),
-    },
+    autoScroll: propTypes.bool.def(true),
-    layout: {
+    hidden: propTypes.bool.def(false),
-        type: String,
+    float: propTypes.string.def('right')
-        default: 'total, sizes, prev, pager, next, jumper'
-    },
-    background: {
-        type: Boolean,
-        default: true
-    },
-    autoScroll: {
-        type: Boolean,
-        default: true
-    },
-    hidden: {
-        type: Boolean,
-        default: false
-    },
-    float: {
-        type: String,
-        default: 'right'
-    }
 })
 
 const emit = defineEmits(['update:page', 'update:limit', 'pagination']);
@@ -106,7 +77,6 @@ function handleCurrentChange(val: number) {
 
 <style lang="scss" scoped>
 .pagination-container {
-  background: #fff;
   padding: 32px 16px;
   .el-pagination{
     float: v-bind(float);

src/components/RightToolbar/index.vue

@@ -18,25 +18,15 @@
 </template>
 
 <script setup lang="ts">
-import { TransferKey } from "element-plus";
+import { propTypes } from '@/utils/propTypes';
-import { PropType } from "vue";
 
 const props = defineProps({
-    showSearch: {
+    showSearch: propTypes.bool.def(true),
-        type: Boolean,
-        default: true,
-    },
     columns: {
         type: Array as PropType<FieldOption[]>,
     },
-    search: {
+    search: propTypes.bool.def(true),
-        type: Boolean,
+    gutter: propTypes.number.def(10),
-        default: true,
-    },
-    gutter: {
-        type: Number,
-        default: 10,
-    },
 })
 
 const emits = defineEmits(['update:showSearch', 'queryTable']);

src/components/SvgIcon/index.vue

@@ -5,19 +5,12 @@
 </template>
 
 <script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
 const props = defineProps({
-    iconClass: {
+    iconClass: propTypes.string.isRequired,
-        type: String,
+    className: propTypes.string.def(''),
-        required: true
+    color: propTypes.string.def(''),
-    },
-    className: {
-        type: String,
-        default: ''
-    },
-    color: {
-        type: String,
-        default: ''
-    },
 })
 const iconName =  computed(() => `#icon-${props.iconClass}`);
 const svgClass = computed(() => {

src/components/TreeSelect/index.vue

@@ -29,7 +29,6 @@
 </template>
 
 <script setup lang="ts">
-import { ElTreeSelect } from 'element-plus'
 
 const props = defineProps({
   /* 配置项 */
@@ -68,7 +67,7 @@ const props = defineProps({
 })
 
 
-const selectTree = ref(ElTreeSelect);
+const selectTree = ref<ElTreeSelectInstance>();
 
 const emit = defineEmits(['update:value']);
 
@@ -81,14 +80,14 @@ const valueId = computed({
 const valueTitle = ref('');
 const defaultExpandedKey = ref<any[]>([]);
 
-function initHandle() {
+const initHandle = () => {
   nextTick(() => {
     const selectedValue = valueId.value;
-  if(selectedValue !== null && typeof (selectedValue) !== 'undefined') {
+    if (selectedValue !== null && typeof (selectedValue) !== 'undefined') {
-    const node = selectTree.value.getNode(selectedValue)
+      const node = selectTree.value?.getNode(selectedValue)
       if (node) {
         valueTitle.value = node.data[props.objMap.label]
-    selectTree.value.setCurrentKey(selectedValue) // 设置默认选中
+        selectTree.value?.setCurrentKey(selectedValue) // 设置默认选中
         defaultExpandedKey.value = [selectedValue] // 设置默认展开
       }
     } else {
@@ -96,27 +95,27 @@ function initHandle() {
     }
   })
 }
-function handleNodeClick(node: any) {
+const handleNodeClick = (node: any) => {
   valueTitle.value = node[props.objMap.label]
   valueId.value = node[props.objMap.value];
   defaultExpandedKey.value = [];
-  selectTree.value.blur()
+  selectTree.value?.blur()
   selectFilterData('')
 }
-function selectFilterData(val: any) {
+const selectFilterData = (val: any) => {
-  selectTree.value.filter(val)
+  selectTree.value?.filter(val)
 }
-function filterNode(value: any, data: any) {
+const filterNode = (value: any, data: any) => {
   if (!value) return true
   return data[props.objMap['label']].indexOf(value) !== -1
 }
-function clearHandle() {
+const clearHandle = () => {
   valueTitle.value = ''
   valueId.value = ''
   defaultExpandedKey.value = [];
   clearSelected()
 }
-function clearSelected() {
+const clearSelected = () => {
   const allNode = document.querySelectorAll('#tree-option .el-tree-node')
   allNode.forEach((element) => element.classList.remove('is-current'))
 }
@@ -132,6 +131,7 @@ watch(valueId, () => {
 
 <style lang="scss" scoped>
 @import "@/assets/styles/variables.module.scss";
+
 .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
   padding: 0;
   background-color: #fff;

src/components/iFrame/index.vue

@@ -5,11 +5,10 @@
 </template>
 
 <script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
 const props = defineProps({
-  src: {
+  src: propTypes.string.isRequired
-    type: String,
-    required: true
-  }
 })
 
 const height = ref(document.documentElement.clientHeight - 94.5 + "px;")

src/layout/components/Navbar.vue

@@ -20,8 +20,13 @@
           <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
         </el-select>
 
-        <header-search id="header-search" class="right-menu-item" />
+        <!-- <header-search id="header-search" class="right-menu-item" /> -->
-
+        <search-menu ref="searchMenuRef" />
+        <el-tooltip content="搜索" effect="dark" placement="bottom">
+          <div class="right-menu-item hover-effect" @click="openSearchMenu">
+            <svg-icon class-name="search-icon" icon-class="search" />
+          </div>
+        </el-tooltip>
         <el-tooltip content="Github" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip>
@@ -68,17 +73,18 @@
 </template>
 
 <script setup lang="ts">
-import useAppStore from '@/store/modules/app'
+import SearchMenu from './topBar/search.vue';
-import useUserStore from '@/store/modules/user'
+import useAppStore from '@/store/modules/app';
-import useSettingsStore from '@/store/modules/settings'
+import useUserStore from '@/store/modules/user';
+import useSettingsStore from '@/store/modules/settings';
 import { getTenantList } from "@/api/login";
 import { dynamicClear, dynamicTenant } from "@/api/system/tenant";
 import { ComponentInternalInstance } from "vue";
 import { TenantVO } from "@/api/types";
 
-const appStore = useAppStore()
+const appStore = useAppStore();
-const userStore = useUserStore()
+const userStore = useUserStore();
-const settingsStore = useSettingsStore()
+const settingsStore = useSettingsStore();
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -89,6 +95,12 @@ const tenantList = ref<TenantVO[]>([]);
 const dynamic = ref(false);
 // 租户开关
 const tenantEnabled = ref(true);
+// 搜索菜单
+const searchMenuRef = ref<InstanceType<typeof SearchMenu>>();
+
+const openSearchMenu = () => {
+  searchMenuRef.value?.openSearch();
+}
 
 // 动态切换
 const dynamicTenantEvent = async (tenantId: string) => {
@@ -104,7 +116,7 @@ const dynamicClearEvent = async () => {
   await dynamicClear();
   dynamic.value = false;
   proxy?.$tab.closeAllPage();
-    proxy?.$router.push('/')
+  proxy?.$router.push('/');
 }
 
 /** 租户列表 */
@@ -121,7 +133,7 @@ defineExpose({
 })
 
 const toggleSideBar = () => {
-    appStore.toggleSideBar(false)
+  appStore.toggleSideBar(false);
 }
 
 const logout = async () => {
@@ -169,7 +181,7 @@ const handleCommand = (command: string) => {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
+  //background: #fff;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {

src/layout/components/Settings/index.vue

@@ -1,8 +1,7 @@
 <template>
   <el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px" close-on-click-modal>
-    <div class="setting-drawer-title">
     <h3 class="drawer-title">主题风格设置</h3>
-    </div>
+
     <div class="setting-drawer-block-checbox">
       <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
         <img src="@/assets/images/dark.svg" alt="dark" />
@@ -35,6 +34,13 @@
         <el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange" />
       </span>
     </div>
+    <div class="drawer-item">
+      <span>深色模式</span>
+      <span class="comp-style">
+        <el-switch v-model="isDark" @change="toggleDark" class="drawer-switch" />
+      </span>
+    </div>
+
     <el-divider />
 
     <h3 class="drawer-title">系统布局配置</h3>
@@ -102,7 +108,15 @@ const sideTheme = ref(settingsStore.sideTheme);
 const storeSettings = computed(() => settingsStore);
 const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
 
-/** 是否需要topnav */
+// 是否暗黑模式
+const isDark = useDark({
+  storageKey: 'useDarkKey',
+  valueDark: 'dark',
+  valueLight: 'light',
+});
+const toggleDark = () => useToggle(isDark);
+
+/** 是否需要topNav */
 const topNav = computed({
     get: () => storeSettings.value.topNav,
     set: (val) => {
@@ -234,7 +248,6 @@ defineExpose({
 }
 
 .drawer-item {
-  color: rgba(0, 0, 0, 0.65);
   padding: 12px 0;
   font-size: 14px;
 

src/layout/components/TagsView/ScrollPane.vue

@@ -6,22 +6,21 @@
 
 <script setup lang="ts">
 import useTagsViewStore from '@/store/modules/tagsView'
-import { ElScrollbar } from 'element-plus';
 import { TagView } from 'vue-router'
 const tagAndTagSpacing = ref(4);
 
-const scrollContainerRef = ref(ElScrollbar)
+const scrollContainerRef = ref<ElScrollbarInstance>()
-const scrollWrapper = computed(() => scrollContainerRef.value.$refs.wrapRef);
+const scrollWrapper = computed(() => scrollContainerRef.value?.$refs.wrapRef as any);
 
 onMounted(() => {
-    scrollWrapper.value.addEventListener('scroll', emitScroll, true)
+    scrollWrapper.value?.addEventListener('scroll', emitScroll, true)
 })
 onBeforeUnmount(() => {
-    scrollWrapper.value.removeEventListener('scroll', emitScroll)
+    scrollWrapper.value?.removeEventListener('scroll', emitScroll)
 })
 
 const handleScroll = (e: WheelEvent) => {
-    const eventDelta = (e as any).wheelDelta || -e.deltaY * 40
+    const eventDelta = (e as any).wheelDelta || - e.deltaY * 40
     const $scrollWrapper = scrollWrapper.value;
     $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
 }
@@ -34,7 +33,7 @@ const tagsViewStore = useTagsViewStore()
 const visitedViews = computed(() => tagsViewStore.visitedViews);
 
 const moveToTarget = (currentTag: TagView) => {
-    const $container = scrollContainerRef.value.$el
+    const $container = scrollContainerRef.value?.$el
     const $containerWidth = $container.offsetWidth
     const $scrollWrapper = scrollWrapper.value;
 

src/layout/components/TagsView/index.vue

@@ -125,6 +125,9 @@ const initTags = () => {
 }
 const addTags = () => {
     const { name } = route;
+    if(route.query.title) {
+        route.meta.title = route.query.title;
+    }
     if (name) {
         useTagsViewStore().addView(route);
         if (route.meta.link) {
@@ -237,8 +240,8 @@ onMounted(() => {
 .tags-view-container {
   height: 34px;
   width: 100%;
-  background: #fff;
+  background-color: var(--el-bg-color);
-  border-bottom: 1px solid #d8dce5;
+  border: 1px solid var(--el-border-color-light);
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
   .tags-view-wrapper {
     .tags-view-item {
@@ -247,13 +250,16 @@ onMounted(() => {
       cursor: pointer;
       height: 26px;
       line-height: 23px;
-      border: 1px solid #d8dce5;
+      background-color: var(--el-bg-color);
+      border: 1px solid var(--el-border-color-light);
       color: #495060;
-      background: #fff;
       padding: 0 8px;
       font-size: 12px;
       margin-left: 5px;
       margin-top: 4px;
+      &:hover {
+        color: var(--el-color-primary);
+      }
       &:first-of-type {
         margin-left: 15px;
       }
@@ -279,7 +285,7 @@ onMounted(() => {
   }
   .contextmenu {
     margin: 0;
-    background: #fff;
+    background: var(--el-bg-color);
     z-index: 3000;
     position: absolute;
     list-style-type: none;
@@ -287,7 +293,6 @@ onMounted(() => {
     border-radius: 4px;
     font-size: 12px;
     font-weight: 400;
-    color: #333;
     box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
     li {
       margin: 0;

src/layout/components/topBar/search.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="layout-search-dialog">
+    <el-dialog v-model="state.isShowSearch" destroy-on-close :show-close="false">
+      <template #footer>
+        <el-autocomplete
+          v-model="state.menuQuery"
+          :fetch-suggestions="menuSearch"
+          placeholder="搜索"
+          ref="layoutMenuAutocompleteRef"
+          @select="onHandleSelect"
+          :fit-input-width="true"
+        >
+          <template #prefix>
+            <svg-icon class-name="search-icon" icon-class="search" />
+          </template>
+          <template #default="{ item }">
+            <div>
+              <svg-icon :icon-class="item.icon" class="mr5" />
+              {{ item.title }}
+            </div>
+          </template>
+        </el-autocomplete>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="layoutBreadcrumbSearch">
+import { getNormalPath } from '@/utils/ruoyi';
+import { isHttp } from '@/utils/validate';
+import usePermissionStore from '@/store/modules/permission';
+import { RouteOption } from 'vue-router';
+type Router = Array<{
+	path: string;
+	icon: string;
+	title: string[];
+}>
+type SearchState<T = any> = {
+	isShowSearch: boolean;
+	menuQuery: string;
+	menuList: T[];
+};
+// 定义变量内容
+const layoutMenuAutocompleteRef = ref();
+const router = useRouter();
+const routes = computed(() => usePermissionStore().routes);
+const state = reactive<SearchState>({
+	isShowSearch: false,
+	menuQuery: '',
+	menuList: [],
+});
+
+// 搜索弹窗打开
+const openSearch = () => {
+	state.menuQuery = '';
+	state.isShowSearch = true;
+	state.menuList = generateRoutes(routes.value);
+	nextTick(() => {
+		setTimeout(() => {
+			layoutMenuAutocompleteRef.value.focus();
+		});
+	});
+};
+// 搜索弹窗关闭
+const closeSearch = () => {
+	state.isShowSearch = false;
+};
+// 菜单搜索数据过滤
+const menuSearch = (queryString: string, cb: Function) => {
+	let options = state.menuList.filter((item) => {
+		return item.title.indexOf(queryString) > -1;
+	});
+	cb(options);
+};
+
+// Filter out the routes that can be displayed in the sidebar
+// And generate the internationalized title
+const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: string[] = []) => {
+	let res: Router = []
+	routes.forEach(r => {
+        // skip hidden router
+		if (!r.hidden) {
+			const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
+				const data: any = {
+					path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
+					icon: r.meta?.icon,
+					title: [...prefixTitle]
+				}
+				if (r.meta && r.meta.title) {
+					data.title = [...data.title, r.meta.title];
+					if (r.redirect !== 'noRedirect') {
+						// only push the routes with title
+						// special case: need to exclude parent router without redirect
+            res.push(data);
+					}
+				}
+				// recursive child routes
+				if (r.children) {
+						const tempRoutes = generateRoutes(r.children, data.path, data.title);
+						if (tempRoutes.length >= 1) {
+								res = [...res, ...tempRoutes];
+						}
+				}
+		}
+	})
+	res.forEach((item: any) => {
+		if (item.title instanceof Array) {
+			item.title = item.title.join('/');
+		}
+	});
+	return res;
+}
+// 当前菜单选中时
+const onHandleSelect = (val: any) => {
+	const paths = val.path;
+	if (isHttp(paths)) {
+		// http(s):// 路径新窗口打开
+		const pindex = paths.indexOf("http");
+		window.open(paths.substring(pindex, paths.length), "_blank");
+	} else {
+		router.push(paths);
+	}
+	state.menuQuery = ''
+	closeSearch();
+
+};
+
+// 暴露变量
+defineExpose({
+	openSearch
+});
+</script>
+
+<style scoped lang="scss">
+.layout-search-dialog {
+	position: relative;
+	:deep(.el-dialog) {
+		.el-dialog__header,
+		.el-dialog__body {
+			display: none;
+		}
+		.el-dialog__footer {
+			width: 100%;
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+			top: -53vh;
+		}
+	}
+	:deep(.el-autocomplete) {
+		width: 560px;
+		position: absolute;
+		top: 150px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+</style>

src/plugins/modal.ts

@@ -1,57 +1,57 @@
-import { ElMessage, ElMessageBox, ElNotification, ElLoading, MessageBoxData } from 'element-plus';
+import { MessageBoxData } from 'element-plus';
 import { LoadingInstance } from 'element-plus/es/components/loading/src/loading';
 let loadingInstance: LoadingInstance;
 export default {
   // 消息提示
-  msg(content: string) {
+  msg(content: any) {
     ElMessage.info(content);
   },
   // 错误消息
-  msgError(content: string) {
+  msgError(content: any) {
     ElMessage.error(content);
   },
   // 成功消息
-  msgSuccess(content: string) {
+  msgSuccess(content: any) {
     ElMessage.success(content);
   },
   // 警告消息
-  msgWarning(content: string) {
+  msgWarning(content: any) {
     ElMessage.warning(content);
   },
   // 弹出提示
-  alert(content: string) {
+  alert(content: any) {
     ElMessageBox.alert(content, '系统提示');
   },
   // 错误提示
-  alertError(content: string) {
+  alertError(content: any) {
     ElMessageBox.alert(content, '系统提示', { type: 'error' });
   },
   // 成功提示
-  alertSuccess(content: string, s: string, p: { dangerouslyUseHTMLString: boolean }) {
+  alertSuccess(content: any) {
     ElMessageBox.alert(content, '系统提示', { type: 'success' });
   },
   // 警告提示
-  alertWarning(content: string) {
+  alertWarning(content: any) {
     ElMessageBox.alert(content, '系统提示', { type: 'warning' });
   },
   // 通知提示
-  notify(content: string) {
+  notify(content: any) {
     ElNotification.info(content);
   },
   // 错误通知
-  notifyError(content: string) {
+  notifyError(content: any) {
     ElNotification.error(content);
   },
   // 成功通知
-  notifySuccess(content: string) {
+  notifySuccess(content: any) {
     ElNotification.success(content);
   },
   // 警告通知
-  notifyWarning(content: string) {
+  notifyWarning(content: any) {
     ElNotification.warning(content);
   },
   // 确认窗体
-  confirm(content: string): Promise<MessageBoxData> {
+  confirm(content: any): Promise<MessageBoxData> {
     return ElMessageBox.confirm(content, '系统提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
@@ -59,7 +59,7 @@ export default {
     });
   },
   // 提交内容
-  prompt(content: string) {
+  prompt(content: any) {
     return ElMessageBox.prompt(content, '系统提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',

src/plugins/tab.ts

@@ -3,8 +3,11 @@ import router from '@/router';
 import { TagView, RouteLocationRaw } from 'vue-router';
 
 export default {
-  // 刷新当前tab页签
+  /**
-  async refreshPage(obj: TagView): Promise<void> {
+   * 刷新当前tab页签
+   * @param obj 标签对象
+   */
+  async refreshPage(obj?: TagView): Promise<void> {
     const { path, query, matched } = router.currentRoute.value;
     if (obj === undefined) {
       matched.forEach((m) => {
@@ -15,11 +18,16 @@ export default {
         }
       });
     }
-    // prettier-ignore
+    let query1: undefined | {} = {};
-    await useTagsViewStore().delCachedView(obj)
+    let path1: undefined | string = '';
-    router.replace({
+    if (obj) {
-      path: '/redirect' + obj.path,
+      query1 = obj.query;
-      query: obj.query
+      path1 = obj.path;
+    }
+    await useTagsViewStore().delCachedView(obj);
+    await router.replace({
+      path: '/redirect' + path1,
+      query: query1
     });
   },
   // 关闭当前tab页签，打开新页签
@@ -34,9 +42,9 @@ export default {
     if (obj === undefined) {
       // prettier-ignore
       const { visitedViews } = await useTagsViewStore().delView(router.currentRoute.value) as any
-      const latestView = visitedViews.slice(-1)[0]
+      const latestView = visitedViews.slice(-1)[0];
       if (latestView) {
-        return router.push(latestView.fullPath)
+        return router.push(latestView.fullPath);
       }
       return router.push('/');
     }
@@ -47,22 +55,31 @@ export default {
     return useTagsViewStore().delAllViews();
   },
   // 关闭左侧tab页签
-  closeLeftPage(obj: TagView) {
+  closeLeftPage(obj?: TagView) {
     return useTagsViewStore().delLeftTags(obj || router.currentRoute.value);
   },
   // 关闭右侧tab页签
-  closeRightPage(obj: TagView) {
+  closeRightPage(obj?: TagView) {
     return useTagsViewStore().delRightTags(obj || router.currentRoute.value);
   },
   // 关闭其他tab页签
-  closeOtherPage(obj: TagView) {
+  closeOtherPage(obj?: TagView) {
     return useTagsViewStore().delOthersViews(obj || router.currentRoute.value);
   },
-  // 打开tab页签
+  /**
-  openPage(url: RouteLocationRaw) {
+   * 打开tab页签
-    return router.push(url);
+   * @param url 路由地址
+   * @param title 标题
+   * @param query 参数
+   */
+  openPage(url: string, title?: string, query?: any) {
+    const obj = { path: url, query: { ...query, title } };
+    return router.push(obj);
   },
-  // 修改tab页签
+  /**
+   * 修改tab页签
+   * @param obj 标签对象
+   */
   updatePage(obj: TagView) {
     return useTagsViewStore().updateVisitedView(obj);
   }

src/store/modules/tagsView.ts

@@ -54,8 +54,11 @@ export const useTagsViewStore = defineStore('tagsView', () => {
       resolve([...visitedViews.value]);
     });
   };
-  const delCachedView = (view: TagView): Promise<string[]> => {
+  const delCachedView = (view?: TagView): Promise<string[]> => {
-    const viewName = view.name as string;
+    let viewName = '';
+    if (view) {
+      viewName = view.name as string;
+    }
     return new Promise((resolve) => {
       const index = cachedViews.value.indexOf(viewName);
       index > -1 && cachedViews.value.splice(index, 1);
@@ -167,6 +170,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
 
   const addCachedView = (view: TagView): void => {
     const viewName = view.name as string;
+    if (!viewName) return;
     if (cachedViews.value.includes(viewName)) return;
     if (!view.meta?.noCache) {
       cachedViews.value.push(viewName);

src/types/element.d.ts

@@ -1 +1,35 @@
-declare type ElTagType = '' | 'success' | 'warning' | 'info' | 'danger' | 'default' | 'primary';
+import type * as ep from 'element-plus';
+declare global {
+  declare type ElTagType = '' | 'success' | 'warning' | 'info' | 'danger' | 'default' | 'primary';
+  declare type ElFormInstance = InstanceType<typeof ep.ElForm>;
+  declare type ElTableInstance = InstanceType<typeof ep.ElTable>;
+  declare type ElTreeInstance = InstanceType<typeof ep.ElTree>;
+  declare type ElTreeSelectInstance = InstanceType<typeof ep.ElTreeSelect>;
+  declare type ElSelectInstance = InstanceType<typeof ep.ElSelect>;
+  declare type ElUploadInstance = InstanceType<typeof ep.ElUpload>;
+  declare type ElCardInstance = InstanceType<typeof ep.ElCard>;
+  declare type ElDialogInstance = InstanceType<typeof ep.ElDialog>;
+  declare type ElInputInstance = InstanceType<typeof ep.ElInput>;
+  declare type ElInputNumberInstance = InstanceType<typeof ep.ElInputNumber>;
+  declare type ElRadioInstance = InstanceType<typeof ep.ElRadio>;
+  declare type ElRadioGroupInstance = InstanceType<typeof ep.ElRadioGroup>;
+  declare type ElRadioButtonInstance = InstanceType<typeof ep.ElRadioButton>;
+  declare type ElCheckboxInstance = InstanceType<typeof ep.ElCheckbox>;
+  declare type ElCheckboxGroupInstance = InstanceType<typeof ep.ElCheckboxGroup>;
+  declare type ElSwitchInstance = InstanceType<typeof ep.ElSwitch>;
+  declare type ElDatePickerInstance = InstanceType<typeof ep.ElDatePicker>;
+  declare type ElTimePickerInstance = InstanceType<typeof ep.ElTimePicker>;
+  declare type ElTimeSelectInstance = InstanceType<typeof ep.ElTimeSelect>;
+  declare type ElCascaderInstance = InstanceType<typeof ep.ElCascader>;
+  declare type ElColorPickerInstance = InstanceType<typeof ep.ElColorPicker>;
+  declare type ElRateInstance = InstanceType<typeof ep.ElRate>;
+  declare type ElSliderInstance = InstanceType<typeof ep.ElSlider>;
+  declare type ElUploadInstance = InstanceType<typeof ep.ElUpload>;
+  declare type ElScrollbarInstance = InstanceType<typeof ep.ElScrollbar>;
+
+  declare type TransferKey = ep.TransferKey;
+  declare type CheckboxValueType = ep.CheckboxValueType;
+  declare type ElFormRules = ep.FormRules;
+  declare type DateModelType = ep.DateModelType;
+  declare type UploadFile = typeof ep.UploadFile;
+}

src/types/global.d.ts

@@ -1,9 +1,15 @@
-import { FormRules } from 'element-plus';
+import type { ComponentInternalInstance as ComponentInstance, PropType as VuePropType } from 'vue';
+
 declare global {
+  /** vue Instance */
+  declare type ComponentInternalInstance = ComponentInstance;
+  /**vue */
+  declare type PropType<T> = VuePropType<T>;
+
   /**
    * 界面字段隐藏属性
    */
-  interface FieldOption {
+  declare interface FieldOption {
     key: number;
     label: string;
     visible: boolean;
@@ -12,7 +18,7 @@ declare global {
   /**
    * 弹窗属性
    */
-  interface DialogOption {
+  declare interface DialogOption {
     /**
      * 弹窗标题
      */
@@ -23,7 +29,7 @@ declare global {
     visible: boolean;
   }
 
-  interface UploadOption {
+  declare interface UploadOption {
     /** 设置上传的请求头部 */
     headers: { [key: string]: any };
 
@@ -34,7 +40,7 @@ declare global {
   /**
    * 导入属性
    */
-  interface ImportOption extends UploadOption {
+  declare interface ImportOption extends UploadOption {
     /** 是否显示弹出层 */
     open: boolean;
     /** 弹出层标题 */
@@ -48,14 +54,14 @@ declare global {
   /**
    * 字典数据  数据配置
    */
-  interface DictDataOption {
+  declare interface DictDataOption {
     label: string;
     value: string;
     elTagType?: ElTagType;
     elTagClass?: string;
   }
 
-  interface BaseEntity {
+  declare interface BaseEntity {
     createBy?: any;
     createDept?: any;
     createTime?: string;
@@ -68,15 +74,15 @@ declare global {
    * T : 表单数据
    * D : 查询参数
    */
-  interface PageData<T, D> {
+  declare interface PageData<T, D> {
     form: T;
     queryParams: D;
-    rules: FormRules;
+    rules: ElFormRules;
   }
   /**
    * 分页查询参数
    */
-  interface PageQuery {
+  declare interface PageQuery {
     pageNum: number;
     pageSize: number;
   }

src/types/module.d.ts

@@ -1,23 +1,27 @@
-import modal from '@/plugins/modal';
+import type modal from '@/plugins/modal';
-import tab from '@/plugins/tab';
+import type tab from '@/plugins/tab';
-import { useDict } from '@/utils/dict';
+import type download from '@/plugins/download';
-import { addDateRange, handleTree, selectDictLabel, selectDictLabels, parseTime } from '@/utils/ruoyi';
+import type auth from '@/plugins/auth';
-import { getConfigKey, updateConfigByKey } from '@/api/system/config';
+import type cache from '@/plugins/cache';
-import { download as download1 } from '@/utils/request';
+import type animate from '@/animate';
-import download from '@/plugins/download';
+import type { useDict } from '@/utils/dict';
-import animate from '@/animate';
+import type { addDateRange, handleTree, selectDictLabel, selectDictLabels, parseTime } from '@/utils/ruoyi';
+import type { getConfigKey, updateConfigByKey } from '@/api/system/config';
+import type { download as rd } from '@/utils/request';
 
-declare module 'vue' {
+declare module '@vue/runtime-core' {
-  export interface ComponentCustomProperties {
+  interface ComponentCustomProperties {
     // 全局方法声明
     $modal: typeof modal;
     $tab: typeof tab;
     $download: typeof download;
+    $auth: typeof auth;
+    $cache: typeof cache;
     animate: typeof animate;
 
     useDict: typeof useDict;
     addDateRange: typeof addDateRange;
-    download: typeof download1;
+    download: typeof rd;
     handleTree: typeof handleTree;
     getConfigKey: typeof getConfigKey;
     updateConfigByKey: typeof updateConfigByKey;

src/types/router.d.ts

@@ -1,7 +1,7 @@
 import { RouteRecordRaw } from 'vue-router';
 
 declare module 'vue-router' {
-  type RouteOption = {
+  declare type RouteOption = {
     hidden?: boolean;
     permissions?: string[];
     roles?: string[];
@@ -16,15 +16,15 @@ declare module 'vue-router' {
     query?: string;
   } & RouteRecordRaw;
 
-  interface _RouteLocationBase {
+  declare interface _RouteLocationBase {
     children?: RouteOption[];
   }
 
-  interface RouteLocationOptions {
+  declare interface RouteLocationOptions {
     fullPath?: string;
   }
 
-  interface TagView extends Partial<_RouteLocationBase> {
+  declare interface TagView extends Partial<_RouteLocationBase> {
     title?: string;
     meta?: {
       link?: string;

src/types/vform3-builds.d.ts

@@ -0,0 +1,4 @@
+declare module 'vform3-builds' {
+  const content: any;
+  export = content;
+}

src/utils/propTypes.ts

@@ -0,0 +1,25 @@
+import { CSSProperties } from 'vue';
+import { createTypes, VueTypeValidableDef, VueTypesInterface } from 'vue-types';
+
+type PropTypes = VueTypesInterface & {
+  readonly style: VueTypeValidableDef<CSSProperties>;
+};
+
+const propTypes = createTypes({
+  func: undefined,
+  bool: undefined,
+  string: undefined,
+  number: undefined,
+  object: undefined,
+  integer: undefined
+}) as PropTypes;
+
+propTypes.extend([
+  {
+    name: 'style',
+    getter: true,
+    type: [String, Object],
+    default: undefined
+  }
+]);
+export { propTypes };

src/views/demo/demo/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
             <el-form-item label="部门id" prop="deptId">
               <el-input v-model="queryParams.deptId" placeholder="请输入部门id" clearable @keyup.enter="handleQuery" />
@@ -23,10 +24,11 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -36,7 +38,9 @@
             <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['demo:demo:edit']">修改</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['demo:demo:remove']">删除</el-button>
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['demo:demo:remove']"
+              >删除</el-button
+            >
           </el-col>
           <el-col :span="1.5">
             <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['demo:demo:export']">导出</el-button>
@@ -65,13 +69,7 @@
         </el-table-column>
       </el-table>
 
-      <pagination
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-          v-show="total>0"
-          :total="total"
-          v-model:page="queryParams.pageNum"
-          v-model:limit="queryParams.pageSize"
-          @pagination="getList"
-      />
     </el-card>
     <!-- 添加或修改测试单对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
@@ -105,8 +103,6 @@
 <script setup name="Demo" lang="ts">
 import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo';
 import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
-import { ComponentInternalInstance } from 'vue';
-import { ElForm } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -119,8 +115,8 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const demoFormRef = ref(ElForm);
+const demoFormRef = ref<ElFormInstance>();
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -136,7 +132,7 @@ const initFormData: DemoForm = {
   value: undefined,
 }
 const data = reactive<PageData<DemoForm, DemoQuery>>({
-  form: {...initFormData},
+  form: { ...initFormData },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -187,8 +183,8 @@ const cancel = () => {
 
 /** 表单重置 */
 const reset = () => {
-  form.value = {...initFormData};
+  form.value = { ...initFormData };
-  demoFormRef.value.resetFields();
+  demoFormRef.value?.resetFields();
 }
 
 /** 搜索按钮操作 */
@@ -199,7 +195,7 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 
@@ -235,7 +231,7 @@ const handleUpdate = (row?: DemoVO) => {
 
 /** 提交按钮 */
 const submitForm = () => {
-  demoFormRef.value.validate(async (valid: boolean) => {
+  demoFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.id) {

src/views/demo/tree/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
             <el-form-item label="树节点名" prop="treeName">
               <el-input v-model="queryParams.treeName" placeholder="请输入树节点名" clearable @keyup.enter="handleQuery" />
@@ -11,10 +12,11 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -89,8 +91,6 @@
 <script setup name="Tree" lang="ts">
 import { listTree, getTree, delTree, addTree, updateTree } from "@/api/demo/tree";
 import { TreeVO, TreeQuery, TreeForm } from '@/api/demo/tree/types';
-import { ComponentInternalInstance } from 'vue';
-import { ElForm, ElTable } from 'element-plus';
 
 
 type TreeOption = {
@@ -109,9 +109,9 @@ const showSearch = ref(true);
 const isExpandAll = ref(true);
 const loading = ref(false);
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const treeFormRef = ref(ElForm);
+const treeFormRef = ref<ElFormInstance>();
-const treeTableRef = ref(ElTable)
+const treeTableRef = ref<ElTableInstance>()
 
 const dialog = reactive<DialogOption>({
     visible: false,
@@ -185,7 +185,7 @@ const cancel = () => {
 // 表单重置
 const reset = () => {
   form.value = {...initFormData}
-  treeFormRef.value.resetFields();
+  treeFormRef.value?.resetFields();
 }
 
 /** 搜索按钮操作 */
@@ -195,7 +195,7 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 
@@ -223,7 +223,7 @@ const handleToggleExpandAll = () => {
 /** 展开/折叠操作 */
 const toggleExpandAll = (data: TreeVO[], status: boolean) => {
   data.forEach((item) => {
-    treeTableRef.value.toggleRowExpansion(item, status)
+    treeTableRef.value?.toggleRowExpansion(item, status)
     if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
   })
 }
@@ -247,7 +247,7 @@ const handleUpdate = (row: TreeVO) => {
 
 /** 提交按钮 */
 const submitForm = () => {
-  treeFormRef.value.validate(async (valid: boolean) => {
+  treeFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.id) {
@@ -257,7 +257,7 @@ const submitForm = () => {
       }
       proxy?.$modal.msgSuccess("操作成功");
       dialog.visible = false;
-      getList();
+      await getList();
     }
   });
 }

src/views/error/401.vue

@@ -21,7 +21,6 @@
 
 <script setup lang="ts">
 import errImage from '@/assets/401_images/401.gif';
-import { ComponentInternalInstance } from "vue";
 
 let { proxy } = getCurrentInstance() as ComponentInternalInstance;
 

src/views/login.vue

@@ -65,14 +65,14 @@ import Cookies from 'js-cookie';
 import { encrypt, decrypt } from '@/utils/jsencrypt';
 import { useUserStore } from '@/store/modules/user';
 import { LoginData, TenantVO } from '@/api/types';
-import { ElForm, FormRules } from 'element-plus';
 import { to } from 'await-to-js';
+import { HttpStatus } from "@/enums/RespEnum";
 
 const userStore = useUserStore();
 const router = useRouter();
 
 const loginForm = ref<LoginData>({
-  tenantId: "000000",
+  tenantId: '000000',
   username: 'admin',
   password: 'admin123',
   rememberMe: false,
@@ -80,7 +80,7 @@ const loginForm = ref<LoginData>({
   uuid: ''
 });
 
-const loginRules: FormRules = {
+const loginRules: ElFormRules = {
   tenantId: [{ required: true, trigger: "blur", message: "请输入您的租户编号" }],
   username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
   password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
@@ -98,12 +98,12 @@ const tenantEnabled = ref(true);
 // 注册开关
 const register = ref(false);
 const redirect = ref(undefined);
-const loginRef = ref(ElForm);
+const loginRef = ref<ElFormInstance>();
 // 租户列表
 const tenantList = ref<TenantVO[]>([]);
 
 const handleLogin = () => {
-  loginRef.value.validate(async (valid: boolean, fields: any) => {
+  loginRef.value?.validate(async (valid: boolean, fields: any) => {
     if (valid) {
       loading.value = true;
       // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
@@ -120,7 +120,6 @@ const handleLogin = () => {
         Cookies.remove('rememberMe');
       }
       // 调用action的登录方法
-      // prittier-ignore
       const [err] = await to(userStore.login(loginForm.value));
       if (!err) {
         await router.push({ path: redirect.value || '/' });
@@ -189,7 +188,7 @@ watch(() => loginForm.value.tenantId, (val: string) => {
  */
 const doSocialLogin = (type: string) => {
   authBinding(type).then((res: any) => {
-    if (res.code === 200) {
+    if (res.code === HttpStatus.SUCCESS) {
       // 获取授权地址跳转
       window.location.href = res.data;
     } else {

src/views/monitor/cache/index.vue

@@ -2,7 +2,7 @@
   <div class="p-2">
     <el-row>
       <el-col :span="24" class="card-box">
-        <el-card>
+        <el-card shadow="hover">
           <template #header>
             <Monitor style="width: 1em; height: 1em; vertical-align: middle;" />
             <span style="vertical-align: middle;">基本信息</span>
@@ -98,7 +98,7 @@
       </el-col>
 
       <el-col :span="12" class="card-box">
-        <el-card>
+        <el-card shadow="hover">
           <template #header>
             <PieChart style="width: 1em; height: 1em; vertical-align: middle;" />
             <span style="vertical-align: middle;">命令统计</span>
@@ -110,7 +110,7 @@
       </el-col>
 
       <el-col :span="12" class="card-box">
-        <el-card>
+        <el-card shadow="hover">
           <template #header>
             <Odometer style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">内存信息</span>
           </template>
@@ -126,7 +126,6 @@
 <script setup name="Cache" lang="ts">
 import { getCache } from '@/api/monitor/cache';
 import * as echarts from 'echarts';
-import { ComponentInternalInstance } from "vue";
 
 const cache = ref<any>({});
 const commandstats = ref();

src/views/monitor/logininfor/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
             <el-form-item label="登录地址" prop="ipaddr">
               <el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable style="width: 240px;" @keyup.enter="handleQuery" />
@@ -30,10 +31,11 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -98,9 +100,7 @@
 
 <script setup name="Logininfor" lang="ts">
 import { list, delLoginInfo, cleanLoginInfo, unlockLoginInfo } from "@/api/monitor/loginInfo";
-import { ComponentInternalInstance } from "vue";
 import { LoginInfoQuery, LoginInfoVO } from "@/api/monitor/loginInfo/types";
-import { DateModelType } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_common_status } = toRefs<any>(proxy?.useDict("sys_common_status"));
@@ -116,8 +116,8 @@ const total = ref(0);
 const dateRange = ref<[DateModelType,DateModelType]>(['', '']);
 const defaultSort = ref<any>({ prop: "loginTime", order: "descending" });
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const loginInfoTableRef = ref(ElTable);
+const loginInfoTableRef = ref<ElTableInstance>();
 // 查询参数
 const queryParams = ref<LoginInfoQuery>({
     pageNum: 1,
@@ -145,9 +145,9 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
     dateRange.value = ['', ''];
-    queryFormRef.value.resetFields();
+    queryFormRef.value?.resetFields();
     queryParams.value.pageNum = 1;
-    loginInfoTableRef.value.sort(defaultSort.value.prop, defaultSort.value.order);
+    loginInfoTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
 }
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: LoginInfoVO[]) => {
@@ -167,14 +167,14 @@ const handleDelete = async (row?: LoginInfoVO) => {
     const infoIds = row?.infoId || ids.value;
     await proxy?.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?');
     await delLoginInfo(infoIds);
-    getList();
+    await getList();
     proxy?.$modal.msgSuccess("删除成功");
 }
 /** 清空按钮操作 */
 const handleClean = async () => {
     await proxy?.$modal.confirm("是否确认清空所有登录日志数据项?");
     await cleanLoginInfo();
-    getList();
+    await getList();
     proxy?.$modal.msgSuccess("清空成功");
 }
 /** 解锁按钮操作 */

src/views/monitor/online/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="p-2">
-    <div class="search">
+    <div class="mb-[10px]">
+      <el-card shadow="hover">
         <el-form :model="queryParams" ref="queryFormRef" :inline="true">
           <el-form-item label="登录地址" prop="ipaddr">
             <el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable style="width: 200px" @keyup.enter="handleQuery" />
@@ -13,8 +14,9 @@
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
+      </el-card>
     </div>
-    <div class="panel">
+    <el-card shadow="hover">
       <el-table
         v-loading="loading"
         :data="onlineList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)"
@@ -48,13 +50,12 @@
       </el-table>
 
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" />
-    </div>
+    </el-card>
   </div>
 </template>
 
 <script setup name="Online" lang="ts">
 import { forceLogout, list as initData } from "@/api/monitor/online";
-import { ComponentInternalInstance } from "vue";
 import { OnlineQuery, OnlineVO } from "@/api/monitor/online/types";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -63,7 +64,7 @@ const onlineList = ref<OnlineVO[]>([]);
 const loading = ref(true);
 const total = ref(0);
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
 
 const queryParams = ref<OnlineQuery>({
   pageNum: 1,
@@ -87,7 +88,7 @@ const handleQuery = () => {
 }
 /** 重置按钮操作 */
 const resetQuery = () => {
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 /** 强退按钮操作 */

src/views/monitor/operlog/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
             <el-form-item label="系统模块" prop="title">
               <el-input v-model="queryParams.title" placeholder="请输入系统模块" clearable style="width: 240px;" @keyup.enter="handleQuery" />
@@ -35,10 +36,11 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -132,7 +134,7 @@
             <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="请求参数：">{{form.operParam}}</el-form-item>
+            <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
@@ -165,12 +167,10 @@
 
 <script setup name="Operlog" lang="ts">
 import { list, delOperlog, cleanOperlog } from '@/api/monitor/operlog';
-import { ComponentInternalInstance } from 'vue';
 import { OperLogForm, OperLogQuery, OperLogVO } from '@/api/monitor/operlog/types';
-import { DateModelType } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { sys_oper_type, sys_common_status } = toRefs<any>(proxy?.useDict("sys_oper_type","sys_common_status"));
+const { sys_oper_type, sys_common_status } = toRefs<any>(proxy?.useDict("sys_oper_type", "sys_common_status"));
 
 const operlogList = ref<OperLogVO[]>([]);
 const loading = ref(true);
@@ -181,8 +181,8 @@ const total = ref(0);
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
 const defaultSort = ref<any>({ prop: "operTime", order: "descending" });
 
-const operLogTableRef = ref(ElTable);
+const operLogTableRef = ref<ElTableInstance>();
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -247,9 +247,9 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   dateRange.value = ['', ''];
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   queryParams.value.pageNum = 1;
-    operLogTableRef.value.sort(defaultSort.value.prop, defaultSort.value.order);
+  operLogTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
 }
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: OperLogVO[]) => {
@@ -272,7 +272,7 @@ const handleDelete = async (row?: OperLogVO) => {
   const operIds = row?.operId || ids.value;
   await proxy?.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?');
   await delOperlog(operIds);
-    getList();
+  await getList();
   proxy?.$modal.msgSuccess("删除成功");
 }
 
@@ -280,7 +280,7 @@ const handleDelete = async (row?: OperLogVO) => {
 const handleClean = async () => {
   await proxy?.$modal.confirm("是否确认清空所有操作日志数据项?");
   await cleanOperlog();
-    getList();
+  await getList();
   proxy?.$modal.msgSuccess("清空成功");
 }
 

src/views/register.vue

@@ -58,7 +58,6 @@
 <script setup lang="ts">
 import { getCodeImg, register, getTenantList } from '@/api/login';
 import { RegisterForm, TenantVO } from '@/api/types';
-import { FormRules } from 'element-plus';
 import { to } from 'await-to-js';
 
 const router = useRouter();
@@ -85,7 +84,7 @@ const equalToPassword = (rule: any, value: string, callback: any) => {
   }
 };
 
-const registerRules: FormRules = {
+const registerRules: ElFormRules = {
   tenantId: [
     { required: true, trigger: "blur", message: "请输入您的租户编号" }
   ],

src/views/system/config/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
             <el-form-item label="参数名称" prop="configName">
               <el-input v-model="queryParams.configName" placeholder="请输入参数名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
@@ -30,9 +31,10 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -123,8 +125,6 @@
 <script setup name="Config" lang="ts">
 import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
 import { ConfigForm, ConfigQuery, ConfigVO } from "@/api/system/config/types";
-import { ComponentInternalInstance } from "vue";
-import { DateModelType } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_yes_no } = toRefs<any>(proxy?.useDict("sys_yes_no"));
@@ -138,8 +138,8 @@ const multiple = ref(true);
 const total = ref(0);
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const configFormRef = ref(ElForm);
+const configFormRef = ref<ElFormInstance>();
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -153,7 +153,7 @@ const initFormData: ConfigForm = {
   remark: ''
 }
 const data = reactive<PageData<ConfigForm, ConfigQuery>>({
-    form: {...initFormData},
+  form: { ...initFormData },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -185,8 +185,8 @@ const cancel = () => {
 }
 /** 表单重置 */
 const reset = () => {
-    form.value = {...initFormData};
+  form.value = { ...initFormData };
-    configFormRef.value.resetFields();
+  configFormRef.value?.resetFields();
 }
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -196,7 +196,7 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   dateRange.value = ['', ''];
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 /** 多选框选中数据 */
@@ -226,12 +226,12 @@ const handleUpdate = (row?: ConfigVO) => {
 }
 /** 提交按钮 */
 const submitForm = () => {
-    configFormRef.value.validate(async (valid: boolean) => {
+  configFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.configId ? await updateConfig(form.value) : await addConfig(form.value);
       proxy?.$modal.msgSuccess("操作成功");
       dialog.visible = false;
-            getList();
+      await getList();
     }
   });
 }
@@ -240,7 +240,7 @@ const handleDelete = async (row?: ConfigVO) => {
   const configIds = row?.configId || ids.value;
   await proxy?.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？');
   await delConfig(configIds);
-    getList();
+  await getList();
   proxy?.$modal.msgSuccess("删除成功");
 }
 /** 导出按钮操作 */

src/views/system/dept/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
             <el-form-item label="菜单名称" prop="menuName">
               <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable @keyup.enter="handleQuery" />
@@ -16,10 +17,11 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10">
           <el-col :span="1.5">
@@ -130,7 +132,6 @@
 
 <script setup name="Dept" lang="ts">
 import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"
-import { ComponentInternalInstance } from 'vue';
 import { DeptForm, DeptQuery, DeptVO } from "@/api/system/dept/types";
 
 interface DeptOptionsType {
@@ -155,9 +156,9 @@ const dialog = reactive<DialogOption>({
   title: ''
 });
 
-const deptTableRef = ref(ElTable);
+const deptTableRef = ref<ElTableInstance>();
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const deptFormRef = ref(ElForm);
+const deptFormRef = ref<ElFormInstance>();
 
 const initFormData: DeptForm = {
   deptId: undefined,
@@ -170,7 +171,7 @@ const initFormData: DeptForm = {
   status: "0"
 }
 const data = reactive<PageData<DeptForm, DeptQuery>>({
-    form: {...initFormData},
+  form: { ...initFormData },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -205,8 +206,8 @@ const cancel = () => {
 }
 /** 表单重置 */
 const reset = () => {
-    form.value = {...initFormData};
+  form.value = { ...initFormData };
-    deptFormRef.value.resetFields();
+  deptFormRef.value?.resetFields();
 }
 
 /** 搜索按钮操作 */
@@ -215,7 +216,7 @@ const handleQuery = () => {
 }
 /** 重置按钮操作 */
 const resetQuery = () => {
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery()
 }
 /** 新增按钮操作 */
@@ -243,8 +244,8 @@ const handleToggleExpandAll = () => {
 /** 展开/折叠所有 */
 const toggleExpandAll = (data: DeptVO[], status: boolean) => {
   data.forEach((item) => {
-        deptTableRef.value.toggleRowExpansion(item, status)
+    deptTableRef.value?.toggleRowExpansion(item, status)
-        if(item.children && item.children.length > 0) toggleExpandAll(item.children, status)
+    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
   })
 }
 
@@ -253,7 +254,7 @@ const handleUpdate = async (row: DeptVO) => {
   const res = await getDept(row.deptId);
   dialog.visible = true;
   dialog.title = "修改部门";
-    nextTick(async () => {
+  await nextTick(async () => {
     reset();
     form.value = res.data
     const response = await listDeptExcludeChild(row.deptId);
@@ -261,7 +262,11 @@ const handleUpdate = async (row: DeptVO) => {
     if (data) {
       deptOptions.value = data;
       if (data.length === 0) {
-                const noResultsOptions: DeptOptionsType = { deptId: res.data.parentId, deptName: res.data.parentName, children: [] };
+        const noResultsOptions: DeptOptionsType = {
+          deptId: res.data.parentId,
+          deptName: res.data.parentName,
+          children: []
+        };
         deptOptions.value.push(noResultsOptions);
       }
     }
@@ -269,12 +274,12 @@ const handleUpdate = async (row: DeptVO) => {
 }
 /** 提交按钮 */
 const submitForm = () => {
-    deptFormRef.value.validate(async (valid: boolean) => {
+  deptFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.deptId ? await updateDept(form.value) : await addDept(form.value);
       proxy?.$modal.msgSuccess("操作成功");
       dialog.visible = false;
-            getList();
+      await getList();
     }
   })
 }
@@ -282,7 +287,7 @@ const submitForm = () => {
 const handleDelete = async (row: DeptVO) => {
   await proxy?.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?');
   await delDept(row.deptId);
-    getList();
+  await getList();
   proxy?.$modal.msgSuccess("删除成功");
 }
 

src/views/system/dict/data.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
             <el-form-item label="字典名称" prop="dictType">
               <el-select v-model="queryParams.dictType" style="width: 200px">
@@ -21,9 +22,10 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -136,9 +138,7 @@ import useDictStore from '@/store/modules/dict'
 import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type";
 import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
 import { DictTypeVO } from '@/api/system/dict/type/types';
-import { ComponentInternalInstance } from "vue";
 import { DictDataForm, DictDataQuery, DictDataVO } from "@/api/system/dict/data/types";
-import { ElForm } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance
 const { sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_normal_disable"));
@@ -154,8 +154,8 @@ const total = ref(0);
 const defaultDictType = ref("");
 const typeOptions = ref<DictTypeVO[]>([]);
 
-const dataFormRef = ref(ElForm);
+const dataFormRef = ref<ElFormInstance>();
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
 
 
 const dialog = reactive<DialogOption>({
@@ -231,7 +231,7 @@ const cancel = () => {
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
-    dataFormRef.value.resetFields();
+  dataFormRef.value?.resetFields();
 }
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -245,7 +245,7 @@ const handleClose = () => {
 }
 /** 重置按钮操作 */
 const resetQuery = () => {
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   queryParams.value.dictType = defaultDictType.value;
   handleQuery();
 }
@@ -277,13 +277,13 @@ const handleUpdate = (row?: DictDataVO) => {
 }
 /** 提交按钮 */
 const submitForm = () => {
-    dataFormRef.value.validate(async (valid: boolean) => {
+  dataFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.dictCode ? await updateData(form.value) : await addData(form.value);
       useDictStore().removeDict(queryParams.value.dictType);
       proxy?.$modal.msgSuccess("操作成功");
       dialog.visible = false;
-            getList();
+      await getList();
 
     }
   });
@@ -293,7 +293,7 @@ const handleDelete = async (row?: DictDataVO) => {
   const dictCodes = row?.dictCode || ids.value;
   await proxy?.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？');
   await delData(dictCodes);
-    getList();
+  await getList();
   proxy?.$modal.msgSuccess("删除成功");
   useDictStore().removeDict(queryParams.value.dictType);
 

src/views/system/dict/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
             <el-form-item label="字典名称" prop="dictName">
               <el-input v-model="queryParams.dictName" placeholder="请输入字典名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
@@ -30,9 +31,10 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -123,9 +125,7 @@
 <script setup name="Dict" lang="ts">
 import useDictStore from '@/store/modules/dict'
 import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
-import { ComponentInternalInstance } from "vue";
 import { DictTypeForm, DictTypeQuery, DictTypeVO } from "@/api/system/dict/type/types";
-import { DateModelType } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_normal_disable"))
@@ -139,8 +139,8 @@ const multiple = ref(true);
 const total = ref(0);
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
 
-const dictFormRef = ref(ElForm);
+const dictFormRef = ref<ElFormInstance>();
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
 
 
 const dialog = reactive<DialogOption>({
@@ -156,7 +156,7 @@ const initFormData: DictTypeForm = {
   remark: ''
 }
 const data = reactive<PageData<DictTypeForm, DictTypeQuery>>({
-    form: {...initFormData},
+  form: { ...initFormData },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -188,8 +188,8 @@ const cancel = () => {
 }
 /** 表单重置 */
 const reset = () => {
-    form.value = {...initFormData};
+  form.value = { ...initFormData };
-    dictFormRef.value.resetFields();
+  dictFormRef.value?.resetFields();
 }
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -199,7 +199,7 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   dateRange.value = ['', ''];
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 /** 新增按钮操作 */
@@ -230,7 +230,7 @@ const handleUpdate = (row?: DictTypeVO) => {
 }
 /** 提交按钮 */
 const submitForm = () => {
-    dictFormRef.value.validate(async (valid: boolean) => {
+  dictFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.dictId ? await updateType(form.value) : await addType(form.value);
       proxy?.$modal.msgSuccess("操作成功");
@@ -260,7 +260,7 @@ const handleRefreshCache = async () => {
   useDictStore().cleanDict();
 }
 
-onMounted(()=>{
+onMounted(() => {
   getList();
 })
 </script>

src/views/system/menu/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
             <el-form-item label="菜单名称" prop="menuName">
               <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter="handleQuery" />
@@ -16,10 +17,11 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10">
           <el-col :span="1.5">
@@ -37,7 +39,6 @@
         :data="menuList"
         row-key="menuId"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-        border
         ref="menuTableRef"
         :default-expand-all="isExpandAll"
       >
@@ -262,9 +263,7 @@
 <script setup name="Menu" lang="ts">
 import { addMenu, delMenu, getMenu, listMenu, updateMenu } from '@/api/system/menu';
 import { MenuForm, MenuQuery, MenuVO } from '@/api/system/menu/types';
-import { ComponentInternalInstance } from 'vue';
 import { MenuTypeEnum } from '@/enums/MenuTypeEnum';
-import { ElTable, ElForm } from 'element-plus';
 
 interface MenuOptionsType {
   menuId: number;
@@ -286,8 +285,8 @@ const dialog = reactive<DialogOption>({
   title: ''
 });
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const menuFormRef = ref(ElForm);
+const menuFormRef = ref<ElFormInstance>();
 const initFormData = {
   path: '',
   menuId: undefined,
@@ -314,7 +313,7 @@ const data = reactive<PageData<MenuForm, MenuQuery>>({
   },
 })
 
-const menuTableRef = ref(ElTable);
+const menuTableRef = ref<ElTableInstance>();
 
 const { queryParams, form, rules } = toRefs<PageData<MenuForm, MenuQuery>>(data)
 /** 查询菜单列表 */
@@ -343,7 +342,7 @@ const cancel = () => {
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
-    menuFormRef.value.resetFields();
+  menuFormRef.value?.resetFields();
 }
 
 /** 搜索按钮操作 */
@@ -352,7 +351,7 @@ const handleQuery = () => {
 }
 /** 重置按钮操作 */
 const resetQuery = () => {
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 /** 新增按钮操作 */
@@ -374,7 +373,7 @@ const handleToggleExpandAll = () => {
 /** 展开/折叠所有 */
 const toggleExpandAll = (data: MenuVO[], status: boolean) => {
   data.forEach((item: MenuVO) => {
-        menuTableRef.value.toggleRowExpansion(item, status)
+    menuTableRef.value?.toggleRowExpansion(item, status)
     if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
   })
 }
@@ -394,12 +393,12 @@ const handleUpdate = async (row: MenuVO) => {
 }
 /** 提交按钮 */
 const submitForm = () => {
-    menuFormRef.value.validate(async (valid: boolean) => {
+  menuFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.menuId ? await updateMenu(form.value) : await addMenu(form.value);
       proxy?.$modal.msgSuccess("操作成功");
       dialog.visible = false;
-            getList();
+      await getList();
     }
   })
 }
@@ -407,7 +406,7 @@ const submitForm = () => {
 const handleDelete = async (row: MenuVO) => {
   await proxy?.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?');
   await delMenu(row.menuId);
-    getList();
+  await getList();
   proxy?.$modal.msgSuccess("删除成功");
 }
 

src/views/system/notice/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
             <el-form-item label="公告标题" prop="noticeTitle">
               <el-input v-model="queryParams.noticeTitle" placeholder="请输入公告标题" clearable style="width: 200px" @keyup.enter="handleQuery" />
@@ -19,10 +20,11 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -119,9 +121,7 @@
 
 <script setup name="Notice" lang="ts">
 import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
-import { ComponentInternalInstance } from "vue";
 import { NoticeForm, NoticeQuery, NoticeVO } from "@/api/system/notice/types";
-import { ElForm } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_notice_status, sys_notice_type } = toRefs<any>(proxy?.useDict("sys_notice_status", "sys_notice_type"));
@@ -134,8 +134,8 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const noticeFormRef = ref(ElForm);
+const noticeFormRef = ref<ElFormInstance>();
 
 
 const dialog = reactive<DialogOption>({
@@ -186,7 +186,7 @@ const cancel = () => {
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
-    noticeFormRef.value.resetFields();
+  noticeFormRef.value?.resetFields();
 }
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -195,7 +195,7 @@ const handleQuery = () => {
 }
 /** 重置按钮操作 */
 const resetQuery = () => {
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 /** 多选框选中数据 */
@@ -225,12 +225,12 @@ const handleUpdate = (row?: NoticeVO) => {
 }
 /** 提交按钮 */
 const submitForm = () => {
-    noticeFormRef.value.validate(async (valid: boolean) => {
+  noticeFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.noticeId ? await updateNotice(form.value) : await addNotice(form.value);
       proxy?.$modal.msgSuccess("修改成功");
       dialog.visible = false;
-            getList();
+      await getList();
     }
   });
 }
@@ -239,7 +239,7 @@ const handleDelete = async (row?: NoticeVO) => {
   const noticeIds = row?.noticeId || ids.value
   await proxy?.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？');
   await delNotice(noticeIds);
-    getList();
+  await getList();
   proxy?.$modal.msgSuccess("删除成功");
 }
 

src/views/system/oss/config.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
             <el-form-item label="配置key" prop="configKey">
               <el-input v-model="queryParams.configKey" placeholder="配置key" clearable style="width: 200px" @keyup.enter="handleQuery" />
@@ -20,10 +21,11 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -138,9 +140,7 @@ import {
   updateOssConfig,
   changeOssConfigStatus
 } from "@/api/system/ossConfig";
-import { ComponentInternalInstance } from "vue";
 import { OssConfigForm, OssConfigQuery, OssConfigVO } from "@/api/system/ossConfig/types";
-import { ElForm } from 'element-plus';
 
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance
@@ -155,8 +155,8 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const ossConfigFormRef = ref(ElForm);
+const ossConfigFormRef = ref<ElFormInstance>();
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -262,7 +262,7 @@ const cancel = () => {
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
-    ossConfigFormRef.value.resetFields();
+  ossConfigFormRef.value?.resetFields();
 }
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -271,7 +271,7 @@ const handleQuery = () => {
 }
 /** 重置按钮操作 */
 const resetQuery = () => {
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 /** 选择条数  */
@@ -303,7 +303,7 @@ const handleUpdate = (row?: OssConfigVO) => {
 }
 /** 提交按钮 */
 const submitForm = () => {
-    ossConfigFormRef.value.validate(async (valid: boolean) => {
+  ossConfigFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.ossConfigId) {

src/views/system/oss/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
             <el-form-item label="文件名" prop="fileName">
               <el-input v-model="queryParams.fileName" placeholder="请输入文件名" clearable style="width: 200px" @keyup.enter="handleQuery" />
@@ -31,10 +32,11 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -133,9 +135,7 @@
 <script setup name="Oss" lang="ts">
 import { listOss, delOss } from "@/api/system/oss";
 import ImagePreview from "@/components/ImagePreview/index.vue";
-import { ComponentInternalInstance } from "vue";
 import { OssForm, OssQuery, OssVO } from "@/api/system/oss/types";
-import { DateModelType } from 'element-plus';
 
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -161,8 +161,8 @@ const dialog = reactive<DialogOption>({
 // 默认排序
 const defaultSort = ref({ prop: 'createTime', order: 'ascending' });
 
-const ossFormRef = ref(ElForm);
+const ossFormRef = ref<ElFormInstance>();
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
 
 const initFormData = {
   file: undefined,
@@ -215,7 +215,7 @@ function cancel() {
 /** 表单重置 */
 function reset() {
   form.value = { ...initFormData };
-    ossFormRef.value.resetFields();
+  ossFormRef.value?.resetFields();
 }
 /** 搜索按钮操作 */
 function handleQuery() {
@@ -226,7 +226,7 @@ function handleQuery() {
 function resetQuery() {
   showTable.value = false;
   daterangeCreateTime.value = ['', ''];
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   queryParams.value.orderByColumn = defaultSort.value.prop;
   queryParams.value.isAsc = defaultSort.value.order;
   handleQuery();

src/views/system/post/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="70">
             <el-form-item label="岗位编码" prop="postCode">
               <el-input v-model="queryParams.postCode" placeholder="请输入岗位编码" clearable style="width: 200px" @keyup.enter="handleQuery" />
@@ -19,9 +20,10 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -107,7 +109,6 @@
 <script setup name="Post" lang="ts">
 import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post";
 import { PostForm, PostQuery, PostVO } from "@/api/system/post/types";
-import { ComponentInternalInstance } from "vue";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_normal_disable"));
@@ -120,8 +121,8 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 
-const postFormRef = ref(ElForm);
+const postFormRef = ref<ElFormInstance>();
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -138,7 +139,7 @@ const initFormData: PostForm = {
 }
 
 const data = reactive<PageData<PostForm, PostQuery>>({
-    form: {...initFormData},
+  form: { ...initFormData },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -170,8 +171,8 @@ const cancel = () => {
 }
 /** 表单重置 */
 const reset = () => {
-    form.value = {...initFormData};
+  form.value = { ...initFormData };
-    postFormRef.value.resetFields();
+  postFormRef.value?.resetFields();
 }
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -180,7 +181,7 @@ const handleQuery = () => {
 }
 /** 重置按钮操作 */
 const resetQuery = () => {
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 /** 多选框选中数据 */
@@ -210,12 +211,12 @@ const handleUpdate = (row?: PostVO) => {
 }
 /** 提交按钮 */
 const submitForm = () => {
-    postFormRef.value.validate(async (valid: boolean) => {
+  postFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.postId ? await updatePost(form.value) : await addPost(form.value);
       proxy?.$modal.msgSuccess("操作成功");
       dialog.visible = false;
-            getList();
+      await getList();
     }
   });
 }
@@ -224,7 +225,7 @@ const handleDelete = async (row?: PostVO) => {
   const postIds = row?.postId || ids.value;
   await proxy?.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？');
   await delPost(postIds);
-    getList();
+  await getList();
   proxy?.$modal.msgSuccess("删除成功");
 }
 /** 导出按钮操作 */

src/views/system/role/authUser.vue

@@ -58,13 +58,7 @@
         </el-table-column>
       </el-table>
 
-      <pagination
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-        v-show="total > 0"
-        :total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getList"
-      />
       <select-user ref="selectRef" :roleId="queryParams.roleId" @ok="handleQuery" />
     </el-card>
   </div>
@@ -73,10 +67,8 @@
 <script setup name="AuthUser" lang="ts">
 import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
 import { UserQuery } from "@/api/system/user/types";
-import { ComponentInternalInstance } from "vue";
 import { UserVO } from "@/api/system/user/types";
 import SelectUser from "./selectUser.vue";
-// import { ElForm, ElSelect} from 'element-plus';
 
 
 const route = useRoute();
@@ -90,8 +82,8 @@ const multiple = ref(true);
 const total = ref(0);
 const userIds = ref<Array<string | number>>([]);
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const selectRef = ref(SelectUser);
+const selectRef = ref<InstanceType<typeof SelectUser>>();
 
 const queryParams = reactive<UserQuery>({
   pageNum: 1,
@@ -115,29 +107,29 @@ const handleClose = () => {
   proxy?.$tab.closeOpenPage(obj);
 }
 /** 搜索按钮操作 */
-const handleQuery=() => {
+const handleQuery = () => {
   queryParams.pageNum = 1;
   getList();
 }
 /** 重置按钮操作 */
-const resetQuery=() =>{
+const resetQuery = () => {
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 // 多选框选中数据
-const handleSelectionChange = (selection: UserVO[]) =>{
+const handleSelectionChange = (selection: UserVO[]) => {
   userIds.value = selection.map(item => item.userId);
   multiple.value = !selection.length;
 }
 /** 打开授权用户表弹窗 */
 const openSelectUser = () => {
-    selectRef.value.show();
+  selectRef.value?.show();
 }
 /** 取消授权按钮操作 */
 const cancelAuthUser = async (row: UserVO) => {
   await proxy?.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？');
   await authUserCancel({ userId: row.userId, roleId: queryParams.roleId });
-    getList();
+  await getList();
   proxy?.$modal.msgSuccess("取消授权成功");
 }
 /** 批量取消授权按钮操作 */
@@ -146,7 +138,7 @@ const cancelAuthUserAll = async () => {
   const uIds = userIds.value.join(",");
   await proxy?.$modal.confirm("是否取消选中用户授权数据项?");
   await authUserCancelAll({ roleId: roleId, userIds: uIds });
-    getList();
+  await getList();
   proxy?.$modal.msgSuccess("取消授权成功");
 }
 

src/views/system/role/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <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: 240px" @keyup.enter="handleQuery" />
@@ -31,10 +32,11 @@
               <el-button @click="resetQuery" icon="Refresh">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10">
           <el-col :span="1.5">
@@ -196,8 +198,6 @@ import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updat
 import { roleMenuTreeselect, treeselect as menuTreeselect } from '@/api/system/menu/index';
 import { RoleVO, RoleForm, RoleQuery, DeptTreeOption } from '@/api/system/role/types';
 import { MenuTreeOption, RoleMenuTree } from '@/api/system/menu/types';
-import { ComponentInternalInstance } from 'vue';
-import { ElTree, ElForm, DateModelType } from 'element-plus';
 
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -228,11 +228,11 @@ const dataScopeOptions = ref([
   { value: "5", label: "仅本人数据权限" }
 ])
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const roleFormRef = ref(ElForm);
+const roleFormRef = ref<ElFormInstance>();
-const dataScopeRef = ref(ElForm);
+const dataScopeRef = ref<ElFormInstance>();
-const menuRef = ref(ElTree);
+const menuRef = ref<ElTreeInstance>();
-const deptRef = ref(ElTree);
+const deptRef = ref<ElTreeInstance>();
 
 const initForm: RoleForm = {
   roleId: undefined,
@@ -249,7 +249,7 @@ const initForm: RoleForm = {
 }
 
 const data = reactive<PageData<RoleForm, RoleQuery>>({
-    form: {...initForm},
+  form: { ...initForm },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -295,7 +295,7 @@ const handleQuery = () => {
 /** 重置 */
 const resetQuery = () => {
   dateRange.value = ['', '']
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 /**删除按钮操作 */
@@ -343,23 +343,25 @@ const getMenuTreeselect = async () => {
   menuOptions.value = res.data;
 }
 /** 所有部门节点数据 */
-const getDeptAllCheckedKeys = () => {
+const getDeptAllCheckedKeys = (): any => {
   // 目前被选中的部门节点
-    let checkedKeys = deptRef.value.getCheckedKeys();
+  let checkedKeys = deptRef.value?.getCheckedKeys();
   // 半选中的部门节点
-    let halfCheckedKeys = deptRef.value.getHalfCheckedKeys();
+  let halfCheckedKeys = deptRef.value?.getHalfCheckedKeys();
-    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+  if (halfCheckedKeys) {
+    checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys);
+  }
   return checkedKeys
 }
 /** 重置新增的表单以及其他数据  */
 const reset = () => {
-    menuRef.value.setCheckedKeys([]);
+  menuRef.value?.setCheckedKeys([]);
   menuExpand.value = false
   menuNodeAll.value = false
   deptExpand.value = true
   deptNodeAll.value = false
   form.value = { ...initForm };
-    roleFormRef.value.resetFields();
+  roleFormRef.value?.resetFields();
 
 }
 
@@ -379,7 +381,7 @@ const handleUpdate = async (row?: RoleVO) => {
   const { data } = await getRole(roleId);
   dialog.visible = true;
   dialog.title = "修改角色";
-    nextTick(() => {
+  await nextTick(() => {
     reset();
     Object.assign(form.value, data);
     form.value.roleSort = Number(form.value.roleSort);
@@ -388,7 +390,7 @@ const handleUpdate = async (row?: RoleVO) => {
       let checkedKeys = res.checkedKeys;
       checkedKeys.forEach((v) => {
         nextTick(() => {
-                    menuRef.value.setChecked(v, true, false);
+          menuRef.value?.setChecked(v, true, false);
         })
       })
     })
@@ -408,25 +410,29 @@ const getRoleDeptTreeSelect = async (roleId: string | number) => {
   return res.data;
 }
 /** 树权限（展开/折叠）*/
-const handleCheckedTreeExpand = (value: any, type: string) => {
+const handleCheckedTreeExpand = (value: boolean, type: string) => {
   if (type == "menu") {
     let treeList = menuOptions.value;
     for (let i = 0; i < treeList.length; i++) {
+      if (menuRef.value) {
         menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
       }
+    }
   } else if (type == "dept") {
     let treeList = deptOptions.value;
     for (let i = 0; i < treeList.length; i++) {
+      if (deptRef.value) {
         deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
       }
     }
+  }
 }
 /** 树权限（全选/全不选） */
 const handleCheckedTreeNodeAll = (value: any, type: string) => {
   if (type == "menu") {
-        menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
+    menuRef.value?.setCheckedNodes(value ? menuOptions.value as any : []);
   } else if (type == "dept") {
-        deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
+    deptRef.value?.setCheckedNodes(value ? deptOptions.value as any : []);
   }
 }
 /** 树权限（父子联动） */
@@ -438,17 +444,19 @@ const handleCheckedTreeConnect = (value: any, type: string) => {
   }
 }
 /** 所有菜单节点数据 */
-const getMenuAllCheckedKeys = () => {
+const getMenuAllCheckedKeys = (): any => {
   // 目前被选中的菜单节点
-    let checkedKeys = menuRef.value.getCheckedKeys();
+  let checkedKeys = menuRef.value?.getCheckedKeys();
   // 半选中的菜单节点
-    let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
+  let halfCheckedKeys = menuRef.value?.getHalfCheckedKeys();
-    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+  if (halfCheckedKeys) {
+    checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys);
+  }
   return checkedKeys;
 }
 /** 提交按钮 */
 const submitForm = () => {
-    roleFormRef.value.validate(async (valid: boolean) => {
+  roleFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.menuIds = getMenuAllCheckedKeys()
       form.value.roleId ? await updateRole(form.value) : await addRole(form.value);
@@ -466,7 +474,7 @@ const cancel = () => {
 /** 选择角色权限范围触发 */
 const dataScopeSelectChange = (value: string) => {
   if (value !== "2") {
-        deptRef.value.setCheckedKeys([])
+    deptRef.value?.setCheckedKeys([])
   }
 }
 /** 分配数据权限操作 */
@@ -476,9 +484,9 @@ const handleDataScope = async (row: RoleVO) => {
   Object.assign(form.value, response.data);
   openDataScope.value = true;
   dialog.title = "分配数据权限";
-    nextTick(async () => {
+  await nextTick(async () => {
     const res = await roleDeptTreeselect;
-        nextTick(() => {
+    await nextTick(() => {
       if (deptRef.value) {
         deptRef.value.setCheckedKeys(res.checkedKeys);
       }
@@ -497,8 +505,8 @@ const submitDataScope = async () => {
 }
 /** 取消按钮（数据权限）*/
 const cancelDataScope = () => {
-    dataScopeRef.value.resetFields();
+  dataScopeRef.value?.resetFields();
-    form.value = {...initForm};
+  form.value = { ...initForm };
   openDataScope.value = false;
 }
 

src/views/system/role/selectUser.vue

@@ -47,8 +47,6 @@
 import { authUserSelectAll, unallocatedUserList } from "@/api/system/role";
 import { UserVO } from '@/api/system/user/types';
 import { UserQuery } from '@/api/system/user/types';
-import { ComponentInternalInstance } from 'vue';
-import { ElForm, ElTable } from 'element-plus';
 
 
 const props = defineProps({
@@ -73,8 +71,8 @@ const queryParams = reactive<UserQuery>({
   phonenumber: undefined
 })
 
-const tableRef = ref(ElTable);
+const tableRef = ref<ElTableInstance>();
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
 
 const show = () => {
   queryParams.roleId = props.roleId;
@@ -86,7 +84,8 @@ const show = () => {
  * 选择行
  */
 const clickRow = (row: any) => {
-    tableRef.value.toggleRowSelection(row);
+  // ele的bug
+  tableRef.value?.toggleRowSelection(row);
 }
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: UserVO[]) => {
@@ -106,7 +105,7 @@ const handleQuery = () => {
 }
 /** 重置按钮操作 */
 const resetQuery = () => {
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   getList();
 }
 

src/views/system/tenant/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
             <el-form-item label="租户编号" prop="tenantId">
               <el-input v-model="queryParams.tenantId" placeholder="请输入租户编号" clearable @keyup.enter="handleQuery" />
@@ -20,10 +21,11 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -80,7 +82,7 @@
         </el-table-column>
       </el-table>
 
-      <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
     <!-- 添加或修改租户对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
@@ -143,8 +145,6 @@ import { listTenant, getTenant, delTenant, addTenant, updateTenant, changeTenant
 import { selectTenantPackage } from '@/api/system/tenantPackage';
 import { TenantForm, TenantQuery, TenantVO } from '@/api/system/tenant/types';
 import { TenantPkgVO } from '@/api/system/tenantPackage/types';
-import { ComponentInternalInstance } from 'vue';
-import { ElForm } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -158,8 +158,8 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const tenantFormRef = ref(ElForm);
+const tenantFormRef = ref<ElFormInstance>();
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -185,7 +185,7 @@ const initFormData: TenantForm = {
   status: '0',
 }
 const data = reactive<PageData<TenantForm, TenantQuery>>({
-    form: {...initFormData},
+  form: { ...initFormData },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -250,8 +250,8 @@ const cancel = () => {
 
 // 表单重置
 const reset = () => {
-    form.value = {...initFormData};
+  form.value = { ...initFormData };
-    tenantFormRef.value.resetFields();
+  tenantFormRef.value?.resetFields();
 }
 
 /** 搜索按钮操作 */
@@ -262,7 +262,7 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 
@@ -290,7 +290,7 @@ const handleUpdate = (row?: TenantVO) => {
   dialog.title = "修改租户";
   nextTick(async () => {
     reset();
-        getTenantPackage();
+    await getTenantPackage();
     const _id = row?.id || ids.value[0];
     const res = await getTenant(_id);
     loading.value = false;
@@ -300,7 +300,7 @@ const handleUpdate = (row?: TenantVO) => {
 
 /** 提交按钮 */
 const submitForm = () => {
-    tenantFormRef.value.validate(async (valid: boolean) => {
+  tenantFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.id) {
@@ -321,7 +321,7 @@ const handleDelete = async (row?: TenantVO) => {
   await proxy?.$modal.confirm('是否确认删除租户编号为"' + _ids + '"的数据项？')
   loading.value = true;
   await delTenant(_ids).finally(() => loading.value = false);
-    getList();
+  await getList();
   proxy?.$modal.msgSuccess("删除成功");
 
 
@@ -333,9 +333,9 @@ const handleSyncTenantPackage = async (row: TenantVO) => {
     await proxy?.$modal.confirm('是否确认同步租户套餐租户编号为"' + row.tenantId + '"的数据项？');
     loading.value = true;
     await syncTenantPackage(row.tenantId, row.packageId);
-        getList();
+    await getList();
     proxy?.$modal.msgSuccess("同步成功");
-    } catch {return} finally {
+  } catch { return } finally {
     loading.value = false;
   }
 }

src/views/system/tenantPackage/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
             <el-form-item label="套餐名称" prop="packageName">
               <el-input v-model="queryParams.packageName" placeholder="请输入套餐名称" clearable @keyup.enter="handleQuery" />
@@ -11,27 +12,28 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:tenantPackage:add']">新增</el-button>
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:tenantPackage:add']"> 新增 </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:tenantPackage:edit']"
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:tenantPackage:edit']">
-              >修改</el-button
+              修改
-            >
+            </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:tenantPackage:remove']"
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:tenantPackage:remove']">
-              >删除</el-button
+              删除
-            >
+            </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:tenantPackage:export']">导出</el-button>
+            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:tenantPackage:export']">导出 </el-button>
           </el-col>
           <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
@@ -53,13 +55,13 @@
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:tenantPackage:edit']"></el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:tenantPackage:remove']"> </el-button>
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:tenantPackage:remove']"></el-button>
             </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
 
     <!-- 添加或修改租户套餐对话框 -->
@@ -70,8 +72,8 @@
         </el-form-item>
         <el-form-item label="关联菜单">
           <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
-          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选 </el-checkbox>
-          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动 </el-checkbox>
           <el-tree
             class="tree-border"
             :data="menuOptions"
@@ -98,12 +100,17 @@
 </template>
 
 <script setup name="TenantPackage" lang="ts">
-import { listTenantPackage, getTenantPackage, delTenantPackage, addTenantPackage, updateTenantPackage, changePackageStatus } from "@/api/system/tenantPackage";
+import {
+  listTenantPackage,
+  getTenantPackage,
+  delTenantPackage,
+  addTenantPackage,
+  updateTenantPackage,
+  changePackageStatus
+} from "@/api/system/tenantPackage";
 import { treeselect as menuTreeselect, tenantPackageMenuTreeselect } from "@/api/system/menu";
-import { ComponentInternalInstance } from "vue";
 import { TenantPkgForm, TenantPkgQuery, TenantPkgVO } from "@/api/system/tenantPackage/types";
 import { MenuTreeOption } from "@/api/system/menu/types";
-import { CheckboxValueType, ElTree, ElForm } from 'element-plus';
 import to from "await-to-js";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -120,29 +127,29 @@ const menuExpand = ref(false);
 const menuNodeAll = ref(false);
 const menuOptions = ref<MenuTreeOption[]>([]);
 
-const menuTreeRef = ref(ElTree);
+const menuTreeRef = ref<ElTreeInstance>();
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const tenantPackageFormRef = ref(ElForm);
+const tenantPackageFormRef = ref<ElFormInstance>();
 
 const dialog = reactive<DialogOption>({
   visible: false,
-    title: ''
+  title: ""
 });
 
 
 const initFormData: TenantPkgForm = {
   packageId: undefined,
-    packageName: '',
+  packageName: "",
-    menuIds: '',
+  menuIds: "",
-    remark: '',
+  remark: "",
   menuCheckStrictly: true
 };
 const data = reactive<PageData<TenantPkgForm, TenantPkgQuery>>({
-    form: {...initFormData},
+  form: { ...initFormData },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-        packageName: ''
+    packageName: ""
   },
   rules: {
     packageId: [{ required: true, message: "租户套餐id不能为空", trigger: "blur" }],
@@ -153,27 +160,29 @@ const data = reactive<PageData<TenantPkgForm, TenantPkgQuery>>({
 const { queryParams, form, rules } = toRefs(data);
 
 /** 查询菜单树结构 */
-const getMenuTreeselect = async() => {
+const getMenuTreeselect = async () => {
   const { data } = await menuTreeselect();
   menuOptions.value = data;
-}
+};
 
 // 所有菜单节点数据
-const getMenuAllCheckedKeys = () => {
+const getMenuAllCheckedKeys = (): any => {
   // 目前被选中的菜单节点
-    let checkedKeys = menuTreeRef.value.getCheckedKeys();
+  let checkedKeys = menuTreeRef.value?.getCheckedKeys();
   // 半选中的菜单节点
-    let halfCheckedKeys = menuTreeRef.value.getHalfCheckedKeys();
+  let halfCheckedKeys = menuTreeRef.value?.getHalfCheckedKeys();
-    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+  if (halfCheckedKeys) {
+    checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys);
+  }
   return checkedKeys;
-}
+};
 
 /** 根据租户套餐ID查询菜单树结构 */
-const getPackageMenuTreeselect = async(packageId: string | number) => {
+const getPackageMenuTreeselect = async (packageId: string | number) => {
   const res = await tenantPackageMenuTreeselect(packageId);
   menuOptions.value = res.data.menus;
   return Promise.resolve(res);
-}
+};
 
 /** 查询租户套餐列表 */
 const getList = async () => {
@@ -182,77 +191,79 @@ const getList = async () => {
   tenantPackageList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
 
 // 租户套餐状态修改
 const handleStatusChange = async (row: TenantPkgVO) => {
   let text = row.status === "0" ? "启用" : "停用";
-    const [err] = await to(proxy?.$modal.confirm('确认要"' + text + '""' + row.packageName + '"套餐吗？') as Promise<any>)
+  const [err] = await to(proxy?.$modal.confirm("确认要\"" + text + "\"\"" + row.packageName + "\"套餐吗？") as Promise<any>);
   if (err) {
     row.status = row.status === "0" ? "1" : "0";
   } else {
     await changePackageStatus(row.packageId, row.status);
     proxy?.$modal.msgSuccess(text + "成功");
   }
-}
+};
 
 // 取消按钮
 const cancel = () => {
   reset();
   dialog.visible = false;
-}
+};
 
 // 表单重置
 const reset = () => {
-    menuTreeRef.value.setCheckedKeys([]);
+  menuTreeRef.value?.setCheckedKeys([]);
   menuExpand.value = false;
   menuNodeAll.value = false;
-    form.value = {...initFormData};
+  form.value = { ...initFormData };
-    tenantPackageFormRef.value.resetFields();
+  tenantPackageFormRef.value?.resetFields();
-}
+};
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 
 // 多选框选中数据
 const handleSelectionChange = (selection: TenantPkgVO[]) => {
   ids.value = selection.map(item => item.packageId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 
 // 树权限（展开/折叠）
 const handleCheckedTreeExpand = (value: CheckboxValueType, type: string) => {
-    if (type == 'menu') {
+  if (type == "menu") {
     let treeList = menuOptions.value;
     for (let i = 0; i < treeList.length; i++) {
-            menuTreeRef.value.store.nodesMap[treeList[i].id].expanded = value;
+      if (menuTreeRef.value) {
+        menuTreeRef.value.store.nodesMap[treeList[i].id].expanded = value as boolean;
       }
     }
-}
+  }
+};
 
 // 树权限（全选/全不选）
 const handleCheckedTreeNodeAll = (value: CheckboxValueType, type: string) => {
-    if (type == 'menu') {
+  if (type == "menu") {
-        menuTreeRef.value.setCheckedNodes(value ? menuOptions.value: []);
+    menuTreeRef.value?.setCheckedNodes(value ? menuOptions.value as any : []);
   }
-}
+};
 
 // 树权限（父子联动）
 const handleCheckedTreeConnect = (value: CheckboxValueType, type: string) => {
-    if (type == 'menu') {
+  if (type == "menu") {
     form.value.menuCheckStrictly = value as boolean;
   }
-}
+};
 
 /** 新增按钮操作 */
 const handleAdd = () => {
@@ -261,12 +272,12 @@ const handleAdd = () => {
   nextTick(() => {
     reset();
     getMenuTreeselect();
-    })
+  });
-}
+};
 
 /** 修改按钮操作 */
 const handleUpdate = (row?: TenantPkgVO) => {
-    loading.value = true
+  loading.value = true;
   dialog.visible = true;
   dialog.title = "修改租户套餐";
   nextTick(async () => {
@@ -276,21 +287,21 @@ const handleUpdate = (row?: TenantPkgVO) => {
     const response = await getTenantPackage(_packageId);
     loading.value = false;
     form.value = response.data;
-        nextTick(async () => {
+    await nextTick(async () => {
       const res = await packageMenu;
-            let checkedKeys = res.data.checkedKeys
+      let checkedKeys = res.data.checkedKeys;
       checkedKeys.forEach((v) => {
         nextTick(() => {
-                    menuTreeRef.value.setChecked(v, true ,false);
+          menuTreeRef.value?.setChecked(v, true, false);
-                })
-            })
         });
-    })
+      });
-}
+    });
+  });
+};
 
 /** 提交按钮 */
 const submitForm = () => {
-    tenantPackageFormRef.value.validate(async (valid: boolean) => {
+  tenantPackageFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       buttonLoading.value = true;
       form.value.menuIds = getMenuAllCheckedKeys();
@@ -301,31 +312,31 @@ const submitForm = () => {
       }
       proxy?.$modal.msgSuccess("操作成功");
       dialog.visible = false;
-            getList();
+      await getList();
     }
   });
-}
+};
 
 /** 删除按钮操作 */
 const handleDelete = async (row?: TenantPkgVO) => {
   const _packageIds = row?.packageId || ids.value;
-    await proxy?.$modal.confirm('是否确认删除租户套餐编号为"' + _packageIds + '"的数据项？').finally(() => {
+  await proxy?.$modal.confirm("是否确认删除租户套餐编号为\"" + _packageIds + "\"的数据项？").finally(() => {
     loading.value = false;
   });
   await delTenantPackage(_packageIds);
   loading.value = true;
-    getList();
+  await getList();
   proxy?.$modal.msgSuccess("删除成功");
-}
+};
 
 /** 导出按钮操作 */
 const handleExport = () => {
-    proxy?.download('system/tenantPackage/export', {
+  proxy?.download("system/tenantPackage/export", {
     ...queryParams.value
-    }, `tenantPackage_${new Date().getTime()}.xlsx`)
+  }, `tenantPackage_${new Date().getTime()}.xlsx`);
-}
+};
 
 onMounted(() => {
   getList();
-})
+});
 </script>

src/views/system/user/authRole.vue

@@ -55,11 +55,10 @@
 </template>
 
 <script setup name="AuthRole" lang="ts">
-import { RoleVO } from '@/api/system/role/types';
+import { RoleVO } from "@/api/system/role/types";
-import { getAuthRole, updateAuthRole } from '@/api/system/user';
+import { getAuthRole, updateAuthRole } from "@/api/system/user";
-import { UserForm } from '@/api/system/user/types';
+import { UserForm } from "@/api/system/user/types";
-import { ElTable } from "element-plus";
+
-import { ComponentInternalInstance } from 'vue';
 const route = useRoute();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -71,15 +70,16 @@ const roleIds = ref<Array<string | number>>([]);
 const roles = ref<RoleVO[]>([]);
 const form = ref<Partial<UserForm>>({
   nickName: undefined,
-    userName: '',
+  userName: "",
   userId: undefined
 });
 
-const tableRef = ref(ElTable)
+const tableRef = ref<ElTableInstance>();
 
 /** 单击选中行数据 */
 const clickRow = (row: RoleVO) => {
-    tableRef.value.toggleRowSelection(row);
+  // ele的方法有问题，selected应该为可选参数
+  tableRef.value?.toggleRowSelection(row);
 };
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: RoleVO[]) => {
@@ -98,30 +98,30 @@ const close = () => {
 const submitForm = async () => {
   const userId = form.value.userId;
   const rIds = roleIds.value.join(",");
-    await updateAuthRole({ userId: userId as string, roleIds: rIds })
+  await updateAuthRole({ userId: userId as string, roleIds: rIds });
   proxy?.$modal.msgSuccess("授权成功");
   close();
 };
 
-const getList = async() => {
+const getList = async () => {
   const userId = route.params && route.params.userId;
   if (userId) {
     loading.value = true;
     const res = await getAuthRole(userId as string);
-        Object.assign(form.value, res.data.user)
+    Object.assign(form.value, res.data.user);
-        Object.assign(roles.value, res.data.roles)
+    Object.assign(roles.value, res.data.roles);
     total.value = roles.value.length;
     await nextTick(() => {
       roles.value.forEach(row => {
         if (row?.flag) {
-                    tableRef.value.toggleRowSelection(row);
+          tableRef.value?.toggleRowSelection(row, true);
         }
       });
     });
     loading.value = false;
   }
-}
+};
 onMounted(() => {
   getList();
-})
+});
 </script>

src/views/system/user/index.vue

@@ -16,18 +16,25 @@
             highlight-current
             default-expand-all
             @node-click="handleNodeClick"
-          ></el-tree>
+          />
         </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 class="search" v-show="showSearch">
+          <div class="mb-[10px]" v-show="showSearch">
+            <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: 240px" @keyup.enter="handleQuery" />
                 </el-form-item>
                 <el-form-item label="手机号码" prop="phonenumber">
-                <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter="handleQuery" />
+                  <el-input
+                    v-model="queryParams.phonenumber"
+                    placeholder="请输入手机号码"
+                    clearable
+                    style="width: 240px"
+                    @keyup.enter="handleQuery"
+                  />
                 </el-form-item>
 
                 <el-form-item label="状态" prop="status">
@@ -50,6 +57,7 @@
                   <el-button @click="resetQuery" icon="Refresh">重置</el-button>
                 </el-form-item>
               </el-form>
+            </el-card>
           </div>
         </transition>
 
@@ -289,30 +297,19 @@
 </template>
 
 <script setup name="User" lang="ts">
-import {
+import api from "@/api/system/user"
-    changeUserStatus,
-    listUser,
-    resetUserPwd,
-    delUser,
-    getUser,
-    updateUser,
-    addUser,
-    deptTreeSelect
-} from "@/api/system/user"
 import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
-import { ComponentInternalInstance } from "vue";
 import { getToken } from "@/utils/auth";
 import { treeselect } from "@/api/system/dept";
 import { DeptVO } from "@/api/system/dept/types";
 import { RoleVO } from "@/api/system/role/types";
 import { PostVO } from "@/api/system/post/types";
-import { DateModelType, ElTree, ElUpload, UploadFile, ElForm } from 'element-plus';
 import { to } from "await-to-js";
+
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance
 const { sys_normal_disable, sys_user_sex } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
 
-
 const userList = ref<UserVO[]>();
 const loading = ref(true);
 const showSearch = ref(true)
@@ -320,7 +317,7 @@ const ids = ref<Array<number | string>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
-const dateRange = ref<[DateModelType, DateModelType]>(['','']);
+const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
 const deptName = ref('');
 const deptOptions = ref<DeptVO[]>([]);
 const initPassword = ref('123456');
@@ -353,10 +350,10 @@ const columns = ref<FieldOption[]>([
 ])
 
 
-const deptTreeRef = ref(ElTree);
+const deptTreeRef = ref<ElTreeInstance>();
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const userFormRef = ref(ElForm);
+const userFormRef = ref<ElFormInstance>();
-const uploadRef = ref(ElUpload);
+const uploadRef = ref<ElUploadInstance>();
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -405,7 +402,7 @@ const filterNode = (value: string, data: any) => {
 }
 /** 根据名称筛选部门树 */
 watchEffect(
-    () => {deptTreeRef.value.filter(deptName.value);},
+  () => { deptTreeRef.value?.filter(deptName.value); },
   {
     flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
   }
@@ -413,14 +410,14 @@ watchEffect(
 
 /** 查询部门下拉树结构 */
 const getTreeSelect = async () => {
-    const res = await deptTreeSelect();
+  const res = await api.deptTreeSelect();
   deptOptions.value = res.data;
 };
 
 /** 查询用户列表 */
 const getList = async () => {
   loading.value = true;
-    const res = await listUser(proxy?.addDateRange(queryParams.value, dateRange.value));
+  const res = await api.listUser(proxy?.addDateRange(queryParams.value, dateRange.value));
   loading.value = false;
   userList.value = res.rows;
   total.value = res.total;
@@ -440,11 +437,11 @@ const handleQuery = () => {
 }
 /** 重置按钮操作 */
 const resetQuery = () => {
-    dateRange.value = ['','']
+  dateRange.value = ['', '']
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   queryParams.value.pageNum = 1;
   queryParams.value.deptId = undefined;
-    deptTreeRef.value.setCurrentKey(null);
+  deptTreeRef.value?.setCurrentKey(undefined);
   handleQuery();
 }
 
@@ -453,7 +450,7 @@ const handleDelete = async (row?: UserVO) => {
   const userIds = row?.userId || ids.value;
   const [err] = await to(proxy?.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？') as any);
   if (!err) {
-        await delUser(userIds);
+    await api.delUser(userIds);
     await getList();
     proxy?.$modal.msgSuccess("删除成功");
   }
@@ -464,7 +461,7 @@ const handleStatusChange = async (row: UserVO) => {
   let text = row.status === "0" ? "启用" : "停用"
   try {
     await proxy?.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?');
-        await changeUserStatus(row.userId, row.status);
+    await api.changeUserStatus(row.userId, row.status);
     proxy?.$modal.msgSuccess(text + "成功");
   } catch (err) {
     row.status = row.status === "0" ? "1" : "0";
@@ -486,7 +483,7 @@ const handleResetPwd = async (row: UserVO) => {
     inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
   }))
   if (!err) {
-        await resetUserPwd(row.userId, res.value);
+    await api.resetUserPwd(row.userId, res.value);
     proxy?.$modal.msgSuccess("修改成功，新密码是：" + res.value);
   }
 }
@@ -523,14 +520,14 @@ const handleFileUploadProgress = () => {
 const handleFileSuccess = (response: any, file: UploadFile) => {
   upload.open = false;
   upload.isUploading = false;
-    uploadRef.value.handleRemove(file);
+  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();
+  uploadRef.value?.submit();
 }
 
 /** 初始化部门数据 */
@@ -546,7 +543,7 @@ const initTreeData = async () => {
 /** 重置操作表单 */
 const reset = () => {
   form.value = { ...initFormData };
-    userFormRef.value.resetFields();
+  userFormRef.value?.resetFields();
 }
 /** 取消按钮 */
 const cancel = () => {
@@ -561,7 +558,7 @@ const handleAdd = () => {
   nextTick(async () => {
     reset();
     await initTreeData();
-        const { data } = await getUser();
+    const { data } = await api.getUser();
     postOptions.value = data.posts;
     roleOptions.value = data.roles;
     form.value.password = initPassword.value;
@@ -575,7 +572,7 @@ const handleUpdate = (row?: UserForm) => {
     reset();
     await initTreeData();
     const userId = row?.userId || ids.value[0]
-        const { data } = await getUser(userId)
+    const { data } = await api.getUser(userId)
     Object.assign(form.value, data.user);
     postOptions.value = data.posts;
     roleOptions.value = data.roles;
@@ -588,9 +585,9 @@ const handleUpdate = (row?: UserForm) => {
 
 /** 提交按钮 */
 const submitForm = () => {
-    userFormRef.value.validate(async (valid: boolean) => {
+  userFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
-            form.value.userId ? await updateUser(form.value) : await addUser(form.value);
+      form.value.userId ? await api.updateUser(form.value) : await api.addUser(form.value);
       proxy?.$modal.msgSuccess("操作成功");
       dialog.visible = false;
       await getList();
@@ -611,8 +608,8 @@ const closeDialog = () => {
  * 重置表单
  */
 const resetForm = () => {
-    userFormRef.value.resetFields();
+  userFormRef.value?.resetFields();
-    userFormRef.value.clearValidate();
+  userFormRef.value?.clearValidate();
 
   form.value.id = undefined;
   form.value.status = '1';

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

@@ -74,11 +74,11 @@ import { getAuthList } from "@/api/system/social/auth";
 import { getUserProfile } from "@/api/system/user";
 
 const activeTab = ref("userinfo");
-const state = ref<{ user: any; roleGroup: string;  postGroup: string; auths:any[]}>({
+const state = ref<Record<string, any>>({
     user: {},
     roleGroup: '',
     postGroup: '',
-    auths: [],
+    auths: []
 });
 
 const userForm = ref({});

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

@@ -17,20 +17,15 @@
 </template>
 
 <script setup lang="ts">
-import { updateUserPwd } from '@/api/system/user';
+import { updateUserPwd } from "@/api/system/user";
-import { ComponentInternalInstance } from 'vue';
+import type { ResetPwdForm } from "@/api/system/user/types";
-import { ResetPwdForm } from '@/api/system/user/types'
-import { ElForm } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
+const pwdRef = ref<ElFormInstance>();
-
-const pwdRef = ref(ElForm);
-
 const user = ref<ResetPwdForm>({
-    oldPassword: '',
+  oldPassword: "",
-    newPassword: '',
+  newPassword: "",
-    confirmPassword: ''
+  confirmPassword: ""
 });
 
 const equalToPassword = (rule: any, value: string, callback: any) => {
@@ -42,15 +37,24 @@ const equalToPassword = (rule: any, value: string, callback: any) => {
 };
 const rules = ref({
   oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
-    newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }],
+  newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, {
-    confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
+    min: 6,
+    max: 20,
+    message: "长度在 6 到 20 个字符",
+    trigger: "blur"
+  }],
+  confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, {
+    required: true,
+    validator: equalToPassword,
+    trigger: "blur"
+  }]
 });
 
 /** 提交按钮 */
 const submit = () => {
-    pwdRef.value.validate(async (valid: boolean) => {
+  pwdRef.value?.validate(async (valid: boolean) => {
     if (valid) {
-            await updateUserPwd(user.value.oldPassword, user.value.newPassword)
+      await updateUserPwd(user.value.oldPassword, user.value.newPassword);
       proxy?.$modal.msgSuccess("修改成功");
     }
   });

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

@@ -29,7 +29,9 @@
           <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
             <el-button>
               选择
-              <el-icon class="el-icon--right"><Upload /></el-icon>
+              <el-icon class="el-icon--right">
+                <Upload />
+              </el-icon>
             </el-button>
           </el-upload>
         </el-col>
@@ -58,18 +60,17 @@ import "vue-cropper/dist/index.css";
 import { VueCropper } from "vue-cropper";
 import { uploadAvatar } from "@/api/system/user";
 import useUserStore from "@/store/modules/user";
-import { ComponentInternalInstance } from "vue";
 
 interface Options {
-    img: string | ArrayBuffer | null // 裁剪图片的地址
+  img: string | ArrayBuffer | null; // 裁剪图片的地址
-    autoCrop: boolean // 是否默认生成截图框
+  autoCrop: boolean; // 是否默认生成截图框
-    autoCropWidth: number // 默认生成截图框宽度
+  autoCropWidth: number; // 默认生成截图框宽度
-    autoCropHeight: number // 默认生成截图框高度
+  autoCropHeight: number; // 默认生成截图框高度
-    fixedBox: boolean // 固定截图框大小 不允许改变
+  fixedBox: boolean; // 固定截图框大小 不允许改变
-    fileName: string
+  fileName: string;
-    previews: any // 预览数据
+  previews: any; // 预览数据
-    outputType: string
+  outputType: string;
-    visible: boolean
+  visible: boolean;
 }
 
 
@@ -89,7 +90,7 @@ const options = reactive<Options>({
   autoCropHeight: 200,
   fixedBox: true,
   outputType: "png",
-    fileName: '',
+  fileName: "",
   previews: {},
   visible: false
 });
@@ -97,26 +98,27 @@ const options = reactive<Options>({
 /** 编辑头像 */
 const editCropper = () => {
   open.value = true;
-}
+};
 /** 打开弹出层结束时的回调 */
 const modalOpened = () => {
   visible.value = true;
-}
+};
 /** 覆盖默认上传行为 */
-const requestUpload = (): any => {}
+const requestUpload = (): any => {
+};
 /** 向左旋转 */
 const rotateLeft = () => {
   cropper.value.rotateLeft();
-}
+};
 /** 向右旋转 */
 const rotateRight = () => {
   cropper.value.rotateRight();
-}
+};
 /** 图片缩放 */
 const changeScale = (num: number) => {
   num = num || 1;
   cropper.value.changeScale(num);
-}
+};
 /** 上传预处理 */
 const beforeUpload = (file: any) => {
   if (file.type.indexOf("image/") == -1) {
@@ -129,7 +131,7 @@ const beforeUpload = (file: any) => {
       options.fileName = file.name;
     };
   }
-}
+};
 /** 上传图片 */
 const uploadImg = async () => {
   cropper.value.getCropBlob(async (data: any) => {
@@ -138,20 +140,20 @@ const uploadImg = async () => {
     const res = await uploadAvatar(formData);
     open.value = false;
     options.img = res.data.imgUrl;
-        userStore.avatar = options.img as string;
+    userStore.avatar = options.img as string
     proxy?.$modal.msgSuccess("修改成功");
     visible.value = false;
   });
-}
+};
 /** 实时预览 */
 const realTime = (data: any) => {
   options.previews = data;
-}
+};
 /** 关闭窗口 */
 const closeDialog = () => {
   options.img = userStore.avatar;
   options.visible = false;
-}
+};
 </script>
 
 <style lang="scss" scoped>

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

@@ -24,34 +24,36 @@
 
 <script setup lang="ts">
 import { updateUserProfile } from "@/api/system/user";
-import { FormRules } from "element-plus";
-import { ComponentInternalInstance } from "vue";
-import { PropType } from "vue";
-import { ElForm } from "element-plus";
 
 const props = defineProps({
   user: {
     type: Object as PropType<any>,
+    required: true
   }
 });
 const userForm = computed(() => props.user);
-
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
+const userRef = ref<ElFormInstance>();
-const userRef = ref(ElForm);
+const rules = ref<ElFormRules>({
-
-const rules = ref<FormRules>({
   nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-    email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+  email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, {
-    phonenumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
+    type: "email",
+    message: "请输入正确的邮箱地址",
+    trigger: ["blur", "change"]
+  }],
+  phonenumber: [{
+    required: true,
+    message: "手机号码不能为空",
+    trigger: "blur"
+  }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
 });
 
 
 /** 提交按钮 */
 const submit = () => {
-    userRef.value.validate(async (valid: boolean) => {
+  userRef.value?.validate(async (valid: boolean) => {
     if (valid) {
-            await updateUserProfile(props.user)
+      await updateUserProfile(props.user);
       proxy?.$modal.msgSuccess("修改成功");
     }
   });

src/views/tool/gen/basicInfoForm.vue

@@ -31,15 +31,10 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue';
+import { propTypes } from "@/utils/propTypes";
 
 const prop = defineProps({
-    info: {
+  info: propTypes.any.def({})
-        type: Object as PropType<any>,
-        default: () => {
-            return {};
-        }
-    }
 });
 
 const infoForm = computed(() => prop.info)

src/views/tool/gen/editTable.vue

@@ -117,9 +117,8 @@ import { getGenTable, updateGenTable } from '@/api/tool/gen';
 import { DbColumnVO, DbTableVO } from '@/api/tool/gen/types';
 import { optionselect as getDictOptionselect } from '@/api/system/dict/type';
 import { DictTypeVO } from '@/api/system/dict/type/types';
-import basicInfoForm from './basicInfoForm.vue';
+import BasicInfoForm from './basicInfoForm.vue';
-import genInfoForm from "./genInfoForm.vue";
+import GenInfoForm from "./genInfoForm.vue";
-import { ComponentInternalInstance } from "vue";
 
 const route = useRoute();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -131,13 +130,13 @@ const columns = ref<DbColumnVO[]>([]);
 const dictOptions = ref<DictTypeVO[]>([]);
 const info = ref<Partial<DbTableVO>>({});
 
-const basicInfo = ref(basicInfoForm);
+const basicInfo = ref<InstanceType<typeof BasicInfoForm>>();
-const genInfo = ref(genInfoForm);
+const genInfo = ref<InstanceType<typeof GenInfoForm>>();
 
 /** 提交按钮 */
 const submitForm = () => {
-  const basicForm = basicInfo.value.$refs.basicInfoForm;
+  const basicForm = basicInfo.value?.$refs.basicInfoForm;
-  const genForm = genInfo.value.$refs.genInfoForm;
+  const genForm = genInfo.value?.$refs.genInfoForm;
 
   Promise.all([basicForm, genForm].map(getFormPromise)).then(async res => {
     const validateResult = res.every(item => !!item);
@@ -168,7 +167,7 @@ const getFormPromise = (form: any) => {
   });
 }
 const close = () => {
-  const obj = {path: "/tool/gen", query: {t: Date.now(), pageNum: route.query.pageNum}};
+  const obj = { path: "/tool/gen", query: { t: Date.now(), pageNum: route.query.pageNum } };
   proxy?.$tab.closeOpenPage(obj);
 }
 

src/views/tool/gen/genInfoForm.vue

@@ -223,7 +223,7 @@
 
 <script setup lang="ts">
 import { listMenu } from '@/api/system/menu';
-import { ComponentInternalInstance, PropType } from 'vue';
+import { propTypes } from "@/utils/propTypes";
 
 interface MenuOptionsType {
   menuId: number | string;
@@ -236,14 +236,8 @@ const menuOptions = ref<Array<MenuOptionsType>>([]);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const props = defineProps({
-  info: {
+  info: propTypes.any.def(null),
-    type: Object as PropType<any>,
+  tables: propTypes.any.def(null)
-    default: null
-  },
-  tables: {
-    type: Array as PropType<any[]>,
-    default: null
-  }
 });
 
 const infoForm = computed(() => props.info);
@@ -252,11 +246,11 @@ const table = computed(() => props.tables);
 
 // 表单校验
 const rules = ref({
-  tplCategory: [{required: true, message: "请选择生成模板", trigger: "blur"}],
+  tplCategory: [{ required: true, message: "请选择生成模板", trigger: "blur" }],
-  packageName: [{required: true, message: "请输入生成包路径", trigger: "blur"}],
+  packageName: [{ required: true, message: "请输入生成包路径", trigger: "blur" }],
-  moduleName: [{required: true, message: "请输入生成模块名", trigger: "blur"}],
+  moduleName: [{ required: true, message: "请输入生成模块名", trigger: "blur" }],
-  businessName: [{required: true, message: "请输入生成业务名", trigger: "blur"}],
+  businessName: [{ required: true, message: "请输入生成业务名", trigger: "blur" }],
-  functionName: [{required: true, message: "请输入生成功能名", trigger: "blur"}]
+  functionName: [{ required: true, message: "请输入生成功能名", trigger: "blur" }]
 });
 const subSelectChange = () => {
   infoForm.value.subTableFkName = "";
@@ -268,7 +262,7 @@ const tplSelectChange = (value: string) => {
   }
 }
 const setSubTableColumns = (value: string) => {
-  table.value.forEach(item => {
+  table.value.forEach((item: any) => {
     const name = item.tableName;
     if (value === name) {
       subColumns.value = item.columns;

src/views/tool/gen/importTable.vue

@@ -26,7 +26,7 @@
         <el-table-column prop="createTime" label="创建时间"></el-table-column>
         <el-table-column prop="updateTime" label="更新时间"></el-table-column>
       </el-table>
-      <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-row>
     <template #footer>
       <div class="dialog-footer">
@@ -40,8 +40,6 @@
 <script setup lang="ts">
 import { listDbTable, importTable, getDataNames } from '@/api/tool/gen';
 import { DbTableQuery, DbTableVO } from '@/api/tool/gen/types';
-import { ComponentInternalInstance } from 'vue';
-import { ElTable, ElForm } from 'element-plus';
 
 const total = ref(0);
 const visible = ref(false);
@@ -49,8 +47,8 @@ const tables = ref<Array<string>>([]);
 const dbTableList = ref<Array<DbTableVO>>([]);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-const tableRef = ref(ElTable);
+const tableRef = ref<ElTableInstance>();
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
 
 const queryParams = reactive<DbTableQuery>({
   pageNum: 1,
@@ -66,7 +64,7 @@ const emit = defineEmits(["ok"]);
 /** 查询参数列表 */
 const show = (dataName: string) => {
   getDataNameList();
-    if(dataName){
+  if (dataName) {
     queryParams.dataName = dataName;
   } else {
     queryParams.dataName = 'master';
@@ -76,7 +74,8 @@ const show = (dataName: string) => {
 }
 /** 单击选择行 */
 const clickRow = (row: DbTableVO) => {
-    tableRef.value.toggleRowSelection(row);
+  // ele bug
+  tableRef.value?.toggleRowSelection(row);
 }
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: DbTableVO[]) => {
@@ -95,7 +94,7 @@ const handleQuery = () => {
 }
 /** 重置按钮操作 */
 const resetQuery = () => {
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 /** 导入按钮操作 */

src/views/tool/gen/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
             <el-form-item label="数据源" prop="dataName">
               <el-select v-model="queryParams.dataName" filterable clearable placeholder="请选择/输入数据源名称" style="width: 200px">
@@ -30,10 +31,11 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -99,9 +101,9 @@
           :name="(key as any).substring((key as any).lastIndexOf('/') + 1, (key as any).indexOf('.vm'))"
           :key="value"
         >
-          <el-link :underline="false" icon="DocumentCopy" v-copyText="value" v-copyText:callback="copyTextSuccess" style="float:right"
+          <el-link :underline="false" icon="DocumentCopy" v-copyText="value" v-copyText:callback="copyTextSuccess" style="float:right">
-            >&nbsp;复制</el-link
+            &nbsp;复制
-          >
+          </el-link>
           <pre>{{ value }}</pre>
         </el-tab-pane>
       </el-tabs>
@@ -114,9 +116,7 @@
 import { listTable, previewTable, delTable, genCode, synchDb, getDataNames } from '@/api/tool/gen';
 import { TableQuery, TableVO } from '@/api/tool/gen/types';
 import router from '@/router';
-import importTable from './importTable.vue';
+import ImportTable from './importTable.vue';
-import { ComponentInternalInstance } from 'vue';
-import { ElForm, DateModelType } from 'element-plus';
 
 const route = useRoute();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -132,8 +132,8 @@ const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
 const uniqueId = ref("");
 const dataNameList = ref<Array<string>>([]);
 
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref<ElFormInstance>();
-const importRef = ref(importTable);
+const importRef = ref<InstanceType<typeof ImportTable>>();
 
 const queryParams = ref<TableQuery>({
   pageNum: 1,
@@ -143,7 +143,7 @@ const queryParams = ref<TableQuery>({
   dataName: ""
 })
 
-const preview = ref <any>({
+const preview = ref<any>({
   data: {},
   activeName: 'domain.java'
 })
@@ -158,7 +158,7 @@ onActivated(() => {
     uniqueId.value = time as string;
     queryParams.value.pageNum = Number(route.query.pageNum);
     dateRange.value = ['', ''];
-        queryFormRef.value.resetFields();
+    queryFormRef.value?.resetFields();
     getList();
   }
 })
@@ -205,12 +205,12 @@ const handleSynchDb = async (row: TableVO) => {
 }
 /** 打开导入表弹窗 */
 const openImportTable = () => {
-    importRef.value.show(queryParams.value.dataName);
+  importRef.value?.show(queryParams.value.dataName);
 }
 /** 重置按钮操作 */
 const resetQuery = () => {
   dateRange.value = ['', ''];
-    queryFormRef.value.resetFields();
+  queryFormRef.value?.resetFields();
   handleQuery();
 }
 /** 预览按钮 */