fix: element-plus版本升级问题调整

Former-commit-id: 74a0b83abe42f3ace71c23b5091a5dc7cf487213

src/api/system/dept.ts

@@ -30,7 +30,7 @@ export function listSelectDepartments(): AxiosPromise<Option[]> {
  *
  * @param id
  */
-export function getDeptFormDetail(id: number): AxiosPromise<DeptFormData> {
+export function getDeptDetail(id: string): AxiosPromise<DeptFormData> {
     return request({
         url: '/youlai-admin/api/v1/depts/' + id,
         method: 'get'
@@ -57,7 +57,7 @@ export function addDept(data: DeptFormData) {
  * @param id
  * @param data
  */
-export function updateDept(id: number, data: DeptFormData) {
+export function updateDept(id: string, data: DeptFormData) {
     return request({
         url: '/youlai-admin/api/v1/depts/' + id,
         method: 'put',

src/api/system/menu.ts

@@ -40,7 +40,7 @@ export function listSelectMenus(): AxiosPromise<Option[]> {
  * 获取菜单详情
  * @param id
  */
-export function getMenuFormDetail(id: number): AxiosPromise<MenuFormData> {
+export function getMenuDetail(id: number): AxiosPromise<MenuFormData> {
     return request({
         url: '/youlai-admin/api/v1/menus/' + id,
         method: 'get'
@@ -66,7 +66,7 @@ export function addMenu(data: MenuFormData) {
  * @param id
  * @param data
  */
-export function updateMenu(id: number, data: MenuFormData) {
+export function updateMenu(id: string, data: MenuFormData) {
     return request({
         url: '/youlai-admin/api/v1/menus/' + id,
         method: 'put',

src/components/IconSelect/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="icon-body">
+  <div class="icon-select">
-    <el-input v-model="iconName" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons"
+    <el-input v-model="iconName"  clearable placeholder="请输入图标名称" @clear="filterIcons"
       @input="filterIcons">
       <template #suffix><i class="el-icon-search el-input__icon" /></template>
     </el-input>
-    <div class="icon-list">
+    <div class="icon-select__list">
       <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
         <svg-icon color="#999" :icon-class="item" style="height: 30px;width: 16px;margin-right: 5px" />
         <span>{{ item }}</span>
@@ -18,9 +18,9 @@ import { ref } from "vue";
 import SvgIcon from '@/components/SvgIcon/index.vue';
 
 const icons = [] as string[]
-const modules = import.meta.glob('../../assets/icons/svg/*.svg');
+const modules = import.meta.glob('../../assets/icons/*.svg');
 for (const path in modules) {
-  const p = path.split('assets/icons/svg/')[1].split('.svg')[0];
+  const p = path.split('assets/icons/')[1].split('.svg')[0];
   icons.push(p);
 }
 const iconList = ref(icons);
@@ -52,11 +52,11 @@ defineExpose({
 </script>
 
 <style lang='scss' scoped>
-.icon-body {
+.icon-select {
   width: 100%;
   padding: 10px;
 
-  .icon-list {
+  &__list {
     height: 200px;
     overflow-y: scroll;
 

src/components/SvgIcon/index.vue

@@ -14,7 +14,7 @@ const props=defineProps({
   },
   iconClass: {
     type: String,
-    required: true,
+    required: false
   },
   color: {
     type: String,

src/types/api/system/dept.d.ts

@@ -12,9 +12,9 @@ export interface DeptQueryParam {
  */
 
 export interface DeptItem {
-    id: number;
+    id: string;
     name: string;
-    parentId: number;
+    parentId: string;
     treePath: string;
     sort: number;
     status: number;
@@ -28,8 +28,8 @@ export interface DeptItem {
  * 部门表单类型声明
  */
 export interface DeptFormData {
-    id: number|undefined,
+    id?: string,
-    parentId: number,
+    parentId: string,
     name: string,
     sort: number,
     status: number

src/types/api/system/menu.d.ts

@@ -30,11 +30,11 @@ export interface MenuFormData {
     /**
      * 菜单ID
      */
-    id: number | undefined,
+    id: string ,
     /**
      * 父菜单ID
      */
-    parentId: number,
+    parentId: string,
     /**
      * 菜单名称
      */

src/views/system/dept/index.vue

@@ -87,7 +87,7 @@ import { onMounted, reactive, unref, ref, toRefs } from "vue";
 
 // API依赖
 import {
-  getDeptFormDetail,
+  getDeptDetail,
   deleteDept,
   updateDept,
   addDept,
@@ -177,11 +177,11 @@ function handleSelectionChange(selection: any) {
 /**
  * 加载部门下拉数据源
  */
-async function loadDeptOptions() {
+async function loadDeptData() {
   const deptOptions: any[] = [];
   listSelectDepartments().then((response) => {
     const rootDeptOption = {
-      id: 0,
+      value: "0",
       label: "顶级部门",
       children: response.data,
     };
@@ -194,11 +194,11 @@ async function loadDeptOptions() {
  * 添加部门
  */
 function handleAdd(row: any) {
-  loadDeptOptions();
+  loadDeptData();
   state.formData.parentId = row.id;
   state.dialog = {
     title: "添加部门",
-    visible: true,
+    visible: true
   };
 }
 
@@ -206,13 +206,13 @@ function handleAdd(row: any) {
  * 修改部门
  */
 async function handleUpdate(row: any) {
-  await loadDeptOptions();
+  await loadDeptData();
   const deptId = row.id || state.ids;
   state.dialog = {
     title: "修改部门",
-    visible: true,
+    visible: true
   };
-  getDeptFormDetail(deptId).then((response: any) => {
+  getDeptDetail(deptId).then((response: any) => {
     state.formData = response.data;
   });
 }
@@ -221,8 +221,7 @@ async function handleUpdate(row: any) {
  * 部门表单提交
  */
 function submitForm() {
-  const dataForm = unref(dataFormRef);
+  dataFormRef.value.validate((valid: any) => {
-  dataForm.validate((valid: any) => {
     if (valid) {
       if (state.formData.id) {
         updateDept(state.formData.id, state.formData).then(() => {
@@ -270,7 +269,6 @@ function handleDelete(row: any) {
  * 取消/关闭弹窗
  **/
 function cancel() {
-  state.formData.id = undefined;
   dataFormRef.value.resetFields();
   state.dialog.visible = false;
 }

src/views/system/menu/components/Menu.vue

@@ -33,6 +33,9 @@
         </template>
       </el-table-column>
 
+      <el-table-column label="排序" align="center" width="100" prop="sort">
+      </el-table-column>
+
       <el-table-column label="操作" align="center" width="200">
         <template #default="scope">
           <el-button type="success" :icon="Plus" circle plain @click.stop="handleAdd(scope.row)" />
@@ -43,7 +46,7 @@
     </el-table>
 
     <!-- 弹窗表单 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="750px">
+    <el-dialog :title="dialog.title" v-model="dialog.visible" @close="cancel" width="750px">
       <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="父级菜单" prop="parentId">
           <el-tree-select v-model="formData.parentId" placeholder="选择上级菜单" :data="menuOptions" filterable />
@@ -76,16 +79,16 @@
         </el-form-item>
 
         <el-form-item label="图标" prop="icon">
-          <el-popover placement="bottom-start" :width="570" trigger="click" visible="iconSelectVisible">
+          <el-popover ref="popoverRef" placement="bottom-start" :width="570" trigger="click">
-            <icon-select ref="iconSelectRef" @selected="selected" />
             <template #reference>
               <el-input v-model="formData.icon" placeholder="点击选择图标" readonly @click="iconSelectVisible = true">
                 <template #prefix>
-                  <svg-icon :icon-class="formData.icon ? formData.icon : 'color'" class="el-input__icon"
+                  <svg-icon :icon-class="formData.icon" style="margin: auto" />
-                    style="margin: auto" color="#999" />
                 </template>
               </el-input>
             </template>
+
+            <icon-select @selected="selected" />
           </el-popover>
         </el-form-item>
 
@@ -119,7 +122,7 @@
 import { reactive, ref, onMounted, toRefs } from "vue";
 
 import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
-import { ElForm, ElMessage, ElMessageBox } from "element-plus";
+import { ElForm, ElMessage, ElMessageBox, ElPopover } from "element-plus";
 
 import { isExternal } from "@/utils/validate";
 import {
@@ -132,21 +135,20 @@ import {
 // API 依赖
 import {
   listTableMenus,
-  getMenuFormDetail,
+  getMenuDetail,
   listSelectMenus,
   addMenu,
   deleteMenus,
-  updateMenu,
+  updateMenu
 } from "@/api/system/menu";
 
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import IconSelect from "@/components/IconSelect/index.vue";
 
 const emit = defineEmits(["menuClick"]);
-const iconSelectRef = ref(null);
-
 const queryFormRef = ref(ElForm);
 const dataFormRef = ref(ElForm);
+const popoverRef = ref(ElPopover)
 
 const state = reactive({
   loading: true,
@@ -160,7 +162,7 @@ const state = reactive({
   menuList: [] as MenuItem[],
   dialog: { visible: false } as Dialog,
   formData: {
-    parentId: 0,
+    parentId: "0",
     visible: 1,
     sort: 1,
     component: "Layout",
@@ -173,6 +175,7 @@ const state = reactive({
   menuOptions: [] as Option[],
   currentRow: undefined,
   isExternalPath: false,
+  // Icon选择器显示状态
   iconSelectVisible: false
 });
 
@@ -185,7 +188,7 @@ const {
   rules,
   menuOptions,
   isExternalPath,
-  iconSelectVisible,
+  iconSelectVisible
 } = toRefs(state);
 
 /**
@@ -204,10 +207,10 @@ function handleQuery() {
 /**
  * 加载菜单下拉树
  */
-async function loadTreeSelectMenuOptions() {
+async function loadMenuData() {
   const menuOptions: any[] = [];
   await listSelectMenus().then(({ data }) => {
-    const menuOption = { value: 0, label: "顶级菜单", children: data };
+    const menuOption = { value: "0", label: "顶级菜单", children: data };
     menuOptions.push(menuOption);
     state.menuOptions = menuOptions;
   });
@@ -227,7 +230,7 @@ function handleRowClick(row: any) {
 }
 
 async function handleAdd(row: any) {
-  await loadTreeSelectMenuOptions();
+  await loadMenuData();
   state.dialog = {
     title: "添加菜单",
     visible: true,
@@ -246,20 +249,22 @@ async function handleAdd(row: any) {
       state.formData.parentId = (state.currentRow as any).id;
       state.formData.component = "";
     } else {
-      state.formData.parentId = 0;
+      state.formData.parentId = "0";
       state.formData.component = "Layout";
     }
   }
 }
 
 async function handleUpdate(row: any) {
-  await loadTreeSelectMenuOptions();
+  await loadMenuData();
+  console.log('menuop',state.menuOptions)
   state.dialog = {
     title: "修改菜单",
-    visible: true,
+    visible: true
   };
   const id = row.id || state.ids;
-  getMenuFormDetail(id).then(({ data }) => {
+  console.log('id',id)
+  getMenuDetail(id).then(({ data }) => {
     state.formData = data;
     // 判断是否外部链接
     state.isExternalPath = isExternal(state.formData.path);
@@ -267,7 +272,7 @@ async function handleUpdate(row: any) {
 }
 
 /**
- * 表单提交
+ * 菜单表单提交
  */
 function submitForm() {
   dataFormRef.value.validate((isValid: boolean) => {
@@ -309,7 +314,6 @@ function handleDelete(row: any) {
  * 取消关闭弹窗
  */
 function cancel() {
-  state.formData.id = undefined;
   dataFormRef.value.resetFields();
   state.dialog.visible = false;
 }
@@ -322,6 +326,7 @@ function selected(name: string) {
   state.iconSelectVisible = false;
 }
 
+
 onMounted(() => {
   handleQuery();
 });

src/views/system/role/components/Menu.vue

@@ -1,19 +1,15 @@
 <template>
   <div class="menu-container">
-    <el-form>
-      <el-form-item>
     <el-row>
-          <el-col :span="16">
+      <el-col :span="12">
-            <el-button type="success" plain :icon="Switch" @click="toggleExpandAll">展开/折叠</el-button>
+        <el-button plain :icon="Switch" @click="toggleExpandAll">展开/折叠</el-button>
       </el-col>
-          <el-col :span="8" style="text-align: right">
+      <el-col :span="12" style="text-align: right">
         <el-button type="primary" :icon="Check" @click="handleSubmit">提交</el-button>
       </el-col>
     </el-row>
-      </el-form-item>
-    </el-form>
 
-    <el-tree ref="menuRef" v-if="refreshTree" :default-expanded-keys="expandedKeys" :default-expand-all="isExpandAll"
+    <el-tree class="menu-container__tree" ref="menuRef" v-if="refreshTree" :default-expanded-keys="expandedKeys" :default-expand-all="isExpandAll"
       :data="menuOptions" show-checkbox node-key="value" empty-text="加载菜单中..." :check-strictly="checkStrictly"
       highlight-current @node-click="handleNodeClick" />
   </div>
@@ -31,21 +27,19 @@ const emit = defineEmits(["menuClick"]);
 const props = defineProps({
   role: {
     type: Object,
-    default: () => {
+    default: () => { }
-      return {}
-    },
   },
 });
 
 const menuRef = ref(ElTree); // 属性名必须和元素的ref属性值一致
 
 watch(
-  () => props.role.id as any,
+  () => props.role.id,
-  () => {
+  (newVal) => {
-    const roleId = props.role.id;
+    if (newVal) {
-    if (roleId) {
       state.checkStrictly = true;
-      listRoleMenuIds(roleId).then(({ data }) => {
+      // 获取角色拥有的的菜单ID
+      listRoleMenuIds(newVal).then(({ data }) => {
         menuRef.value.setCheckedKeys(data);
         state.checkStrictly = false;
       });
@@ -67,7 +61,7 @@ const { expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree } =
 /**
  * 加载菜单树
  */
-async function loadTreeSelectMenuOptions() {
+async function loadMenuData() {
   await listSelectMenus().then(({ data }) => {
     state.menuOptions = data;
   });
@@ -101,12 +95,14 @@ function handleSubmit() {
 }
 
 onMounted(() => {
-  loadTreeSelectMenuOptions();
+  loadMenuData();
 });
 </script>
 
 <style lang="scss" scoped>
 .menu-container {
-  width: 100%;
+  &__tree{
+    margin-top: 10px;
+  }
 }
 </style>