菜单管理

2024-11-18 16:02:19 +08:00
parent 5cdbee88b4
commit a57ebbcc62
14 changed files with 355 additions and 292 deletions
--- a/frontend/src/views/authority/resource/components/resourcePopup.vue
+++ b/frontend/src/views/authority/resource/components/resourcePopup.vue
@@ -3,11 +3,13 @@
      <el-form :model="formContent" ref='dialogFormRef' :rules='rules' >
        <el-form-item label="上级菜单" prop="pid" :label-width="100">
          <el-tree-select
-            v-model="formContent.pid"
+           v-model="displayPid"
            :data="functionList"
            check-strictly
            :render-after-expand="false"
+            show-checkbox
            check-on-click-node
+            node-key="id"
            :props="defaultProps"
          />
        </el-form-item>
@@ -20,7 +22,7 @@
        <el-form-item label="图标" prop="icon" :label-width="100">
          <IconSelect
          :iconValue="formContent.icon"
-          @update:iconValue="(value) => formContent.icon = value"
+          @update:icon-value="iconValue => formContent.icon = iconValue"
          placeholder="选择一个图标"
        />
        </el-form-item>
@@ -37,8 +39,8 @@
          <el-select v-model="formContent.type"  clearable placeholder="请选择资源类型">
            <el-option label="菜单" :value="0"></el-option>
            <el-option label="按钮" :value="1"></el-option>
-            <el-option label="公共资源" :value="2"></el-option>
-            <el-option label="服务间调用资源" :value="3"></el-option>
+            <!-- <el-option label="公共资源" :value="2"></el-option>
+            <el-option label="服务间调用资源" :value="3"></el-option> -->
          </el-select>
        </el-form-item>                             
        <el-form-item label="描述" prop="remark" :label-width="100">
@@ -67,8 +69,9 @@
  const defaultProps = {
    children: 'children',
    label: 'name',
+    value: 'id'
  };
-
+  const functionList = ref<Function.ResFunction[]>([])
  const dictStore = useDictStore()
 // 定义弹出组件元信息
 const dialogFormRef = ref()
@@ -91,7 +94,7 @@
    })
    return { dialogVisible, titleType, formContent }
  }
-  
+
  const { dialogVisible, titleType, formContent } = useMetaInfo()
 // 清空formContent
 const resetFormContent = () => {
@@ -136,12 +139,29 @@ const close = () => {
    dialogFormRef.value?.resetFields()
  }
  
+
+// 计算属性，用于控制显示的 pid
+const displayPid = computed({
+  get: () => {
+    return formContent.value.pid === '0' ? '' : formContent.value.pid;
+  },
+  set: (value) => {
+    formContent.value.pid = value;
+  }
+});
+
+
  // 保存数据
  const save = () => {
    try {
-      console.log(formContent.value)
        dialogFormRef.value?.validate(async (valid: boolean) => {
-
+        console.log(formContent.value)
+        if (formContent.value.pid === undefined || formContent.value.pid === null || formContent.value.pid === '') {
+            formContent.value.pid = '0';
+        }
+        if (formContent.value.pids === undefined || formContent.value.pids === null || formContent.value.pids === '') {
+            formContent.value.pids = '0';
+        }
        if (valid) {
          if (formContent.value.id) {
              await updateFunction(formContent.value);
@@ -152,20 +172,26 @@ const close = () => {
          close()
          // 刷新表格
          await props.refreshTable!()
+        
        }
      })
    } catch (err) {
-      //console.error('验证过程中出现错误', err)
+      console.error('验证过程中出现错误', err)
    }
  }
  
-  const functionList = ref<Function.ResFunction[]>([])
+
  // 打开弹窗，可能是新增，也可能是编辑
  const open = async (sign: string, data: Function.ResFunction) => {
    const response = await getFunctionListNoButton()
    functionList.value = response.data as unknown as Function.ResFunction[]
    titleType.value = sign
    dialogVisible.value = true
+
+    if (formContent.value.pid ==='0') {
+        formContent.value.pid = '';
+    }
+
    if (data.id) {
      formContent.value = { ...data }
    } else {
--- a/frontend/src/views/authority/resource/index.vue
+++ b/frontend/src/views/authority/resource/index.vue
@@ -28,11 +28,12 @@
  import { useHandleData } from '@/hooks/useHandleData'
    import type { Function } from "@/api/user/interface/function"
  import ProTable from '@/components/ProTable/index.vue'
-  import {CirclePlus, Delete, EditPen,HomeFilled} from '@element-plus/icons-vue'
+  import {Back, CirclePlus, Delete, EditPen,HomeFilled} from '@element-plus/icons-vue'
  import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
  import { useDictStore } from '@/stores/modules/dict'
  import ResourcePopup from './components/resourcePopup.vue'
  import {deleteFunction,getFunctionList} from '@/api/user/function/index'
+  import * as Icons from '@element-plus/icons-vue'
  const dictStore = useDictStore()
  const resourcePopup = ref()
  // ProTable 实例
@@ -45,6 +46,8 @@
      prop: 'name',
      label: '名称',
      minWidth: 150,
+      align:'left',
+      headerAlign: 'center',
      search: { el: 'input' },
    },
    {
@@ -73,7 +76,18 @@
      prop: 'icon',
      label: '图标',
      minWidth: 100,
-      
+      render: scope => {
+      const customIcons: { [key: string]: any } = Icons
+      const iconKey = scope.row.icon; // 
+      if (!iconKey || !customIcons[iconKey]) {
+      // 如果 iconKey 为空或未定义，或者 customIcons 中找不到对应的图标，返回一个空的 <span> 标签
+      return <span></span>;
+    }
+      const icon = customIcons[iconKey]; // 如果找不到图标，使用默认图标
+      return (
+        <el-button  icon={icon} />
+      );
+    },
    },
    {
      prop: 'path',
@@ -97,6 +111,7 @@
      minWidth: 70,
      render: scope => {
        return (
+         
          <el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '禁用'} </el-tag>
        )
      },
--- a/frontend/src/views/authority/user/components/userPopup.vue
+++ b/frontend/src/views/authority/user/components/userPopup.vue
@@ -9,8 +9,8 @@
        <el-form-item label="用户名" prop='name' :label-width="100">
          <el-input v-model="formContent.name" placeholder="请输入用户名" autocomplete="off" />
        </el-form-item>
-        <el-form-item label="登录名" prop='loginName'  :label-width="100">
-          <el-input v-model="formContent.loginName" placeholder="请输入登录名" autocomplete="off" />
+        <el-form-item label="登录名" prop='loginName'  :label-width="100" >
+          <el-input v-model="formContent.loginName" placeholder="请输入登录名" autocomplete="off" :disabled="LoginNameIsShow"/>
        </el-form-item>
        <el-form-item label="密码" prop='password' :label-width="100" v-if="IsPasswordShow">
          <el-input type="password" v-model="formContent.password" show-password placeholder="请输入密码" autocomplete="off" />
@@ -64,6 +64,7 @@
  const dialogFormRef = ref()
  const IsPasswordShow = ref(false)
  const roleList = ref<Role.RoleBO[]>([])
+  const LoginNameIsShow = ref(false)
  function useMetaInfo() {
    const dialogVisible = ref(false)
    const titleType = ref('add')
@@ -112,7 +113,7 @@
       // 指定正则，此处是数字正则
       { pattern: /^[A-Za-z\u4e00-\u9fa5]{1,16}$/, message: '名称需1~16位的英文或汉字', trigger: 'blur' }],
      loginName: [{ required: true, message: '登录名必填！', trigger: 'blur' },
-      { pattern: /^[a-zA-Z_.]{1}[a-zA-Z0-9_.]{2,15}$/, message: '登录名需2-15位的字母数字符号', trigger: 'blur' }],
+      { pattern: /^[a-zA-Z]{1}[a-zA-Z0-9]{2,15}$/, message: '格式错误，需以字母开头，长度为3-16位的字母或数字', trigger: 'blur' }],
      password: [{ required: true, message: '密码必填！', trigger: 'blur' },
      { pattern: /^(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,16}$/, message: '密码长度为8-16，需包含特殊字符', trigger: 'blur' }],
  })
@@ -156,9 +157,11 @@
    dialogVisible.value = true
    if (data.id) {
      IsPasswordShow.value = false
+      LoginNameIsShow.value = true
      formContent.value = { ...data }
    } else {
      IsPasswordShow.value = true
+      LoginNameIsShow.value = false
      resetFormContent()
    }
  }