菜单

src/main.ts

@@ -6,6 +6,10 @@ import '@/styles/index.scss' // global css
 //import element-plus
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
 app.use(ElementPlus)
 // import zhCn from 'element-plus/es/locale/lang/zh-cn'
 // app.use(ElementPlus, { size: 'small', locale: zhCn })

src/router/routes/routes-file-two.ts

@@ -1,21 +1,38 @@
-import Layout from "@/layout";
+import Layout from '@/layout'
 
 const HomeRoutes = {
-  path: "/systemSettings",
+  path: '/systemSettings',
   component: Layout,
-  name: "systemSettings",
-  redirect: "/systemSettings",
+  name: 'systemSettings',
+  redirect: '/systemSettings',
   //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
-  meta: { title: "系统配置", elSvgIcon: "Fold", breadcrumb: false },
+  meta: { title: '系统配置', elSvgIcon: 'Fold', breadcrumb: false },
   children: [
     {
-      path: "/systemSettings/systemconfiguration",
-      name: "FlightQuery",
-      meta: { title: "菜单管理" },
+      path: '/systemSettings/systemconfiguration',
+      name: 'FlightQuery',
+      meta: { title: '菜单管理' },
       component: () =>
-        import("@/views/systemSettings/systemconfiguration/index.vue"),
+        import('@/views/systemSettings/systemconfiguration/index.vue'),
     },
   ],
-};
+}
 
-export default [HomeRoutes];
+const AuthRoutes = {
+  path: '/userManagement',
+  component: Layout,
+  name: 'UserManagement',
+  redirect: '/userManagement/permission',
+  //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
+  meta: { title: '权限管理', elSvgIcon: 'Fold' },
+  children: [
+    {
+      path: '/userManagement/permission',
+      name: 'Permission',
+      meta: { title: '权限项管理' },
+      component: () => import('@/views/userManagement/permission/index.vue'),
+    },
+  ],
+}
+
+export default [HomeRoutes, AuthRoutes]

src/views/systemSettings/systemconfiguration/index.vue

@@ -6,105 +6,68 @@
           <div class="status flex-wrap">
             <div class="manageTitle">菜单管理</div>
           </div>
-        </template></Minheader
-      >
+        </template>
+      </Minheader>
       <div class="app-containers">
-        <el-table
-          :data="tableData"
-          style="width: 100%"
-          :row-style="rowStyle"
-          :row-class-name="tableRowClassName"
-          :cell-class-name="cellClassName"
-          :row-key="
+        <el-table :data="tableData" style="width: 100%" :row-style="rowStyle" :row-class-name="tableRowClassName" :cell-class-name="cellClassName" :row-key="
             props.tableProperty.rowKey
               ? props.tableProperty.rowKey
               : tablePropertyDefault.rowKey
-          "
-          :height="
+          " :height="
             props.tableProperty.height
               ? props.tableProperty.height
               : tablePropertyDefault.height
-          "
-          :max-height="
+          " :max-height="
             props.tableProperty.maxHeight
               ? props.tableProperty.maxHeight
               : tablePropertyDefault.maxHeight
-          "
-          :stripe="
+          " :stripe="
             props.tableProperty.stripe
               ? props.tableProperty.stripe
               : tablePropertyDefault.stripe
-          "
-          :border="
+          " :border="
             props.tableProperty.border
               ? props.tableProperty.border
               : tablePropertyDefault.border
-          "
-          :highlight-current-row="
+          " :highlight-current-row="
             props.tableProperty.highlightCurrentRow
               ? props.tableProperty.highlightCurrentRow
               : tablePropertyDefault.highlightCurrentRow
-          "
-          :header-cell-class-name="
+          " :header-cell-class-name="
             props.tableProperty.headerRowClassName
               ? props.tableProperty.headerRowClassName
               : tablePropertyDefault.headerRowClassName
-          "
-          :tooltip-effect="
+          " :tooltip-effect="
             props.tableProperty.tooltipEffect
               ? props.tableProperty.tooltipEffect
               : tablePropertyDefault.tooltipEffect
-          "
-          :show-summary="
+          " :show-summary="
             props.tableProperty.showSummary
               ? props.tableProperty.showSummary
               : tablePropertyDefault.showSummary
-          "
-        >
+          ">
           <el-table-column label="菜单名称" class="infinite-list-item">
             <template #default="scope">
               <div style="display: flex; align-items: center">
-                <el-icon><timer /></el-icon>
+                <el-icon>
+                  <timer />
+                </el-icon>
                 <span style="margin-left: 10px">{{ scope.row.menuName }}</span>
               </div>
             </template>
           </el-table-column>
-          <el-table-column
-            prop="menuCode"
-            label="菜单编码"
-            class="infinite-list-item"
-          />
-          <el-table-column
-            prop="treeSort"
-            label="排序"
-            class="infinite-list-item"
-          />
-          <el-table-column
-            prop="menuType"
-            label="菜单类型"
-            class="infinite-list-item"
-          >
+          <el-table-column prop="menuCode" label="菜单编码" class="infinite-list-item" />
+          <el-table-column prop="treeSort" label="排序" class="infinite-list-item" />
+          <el-table-column prop="menuType" label="菜单类型" class="infinite-list-item">
             <template #default="scope">
               <div class="catalogue">
                 <span>{{ scope.row.menuType }}</span>
               </div>
             </template>
           </el-table-column>
-          <el-table-column
-            prop="visible"
-            label="可见"
-            class="infinite-list-item"
-          />
-          <el-table-column
-            prop="perms"
-            label="权限标识"
-            class="infinite-list-item"
-          />
-          <el-table-column
-            prop="component"
-            label="组件路径"
-            class="infinite-list-item"
-          />
+          <el-table-column prop="visible" label="可见" class="infinite-list-item" />
+          <el-table-column prop="perms" label="权限标识" class="infinite-list-item" />
+          <el-table-column prop="component" label="组件路径" class="infinite-list-item" />
           <el-table-column label="状态" class="infinite-list-item">
             <template #default="scope">
               <div style="display: flex; align-items: center">
@@ -113,21 +76,9 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column
-            v-if="tableBtnGroup.length"
-            label="操作"
-            width="300px"
-            :align="props.tableColumnProperty.align"
-          >
+          <el-table-column v-if="tableBtnGroup.length" label="操作" width="300px" :align="props.tableColumnProperty.align">
             <template #default="scope">
-              <el-button
-                v-for="(btn, index) in tableBtnGroup"
-                :key="index"
-                size="small"
-                @click="handleClick(scope.$index, scope.row, btn.param)"
-                :class="btn.className"
-                >{{ btn.name }}</el-button
-              >
+              <el-button v-for="(btn, index) in tableBtnGroup" :key="index" size="small" @click="handleClick(scope.$index, scope.row, btn.param)" :class="btn.className">{{ btn.name }}</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -139,49 +90,20 @@
           @btnClick="btnClick"
         /> -->
       </div>
-      <Dialog
-        width="628px"
-        :flag="flag"
-        :type="type"
-        :msgTitle="msgTitle"
-        @resetForm="resetForm"
-        @delRest="delRest"
-      >
+      <Dialog width="628px" :flag="flag" :type="type" :msgTitle="msgTitle" @resetForm="resetForm" @delRest="delRest">
         <div class="diacont">
-          <el-form
-            :model="tableForm"
-            :rules="formRules"
-            ref="systemconfiguration"
-          >
+          <el-form :model="tableForm" :rules="formRules" ref="systemconfiguration">
             <el-row :gutter="24">
               <el-col :span="12">
                 <el-form-item label="上级菜单" size="default">
-                  <el-select
-                    style="width: 100%"
-                    v-model="tableForm.parentId"
-                    class="input-shadow"
-                    filterable
-                    default-first-option
-                    clearable
-                    placeholder="主目录"
-                  >
-                    <el-option
-                      v-for="item in tableOptionser"
-                      :key="item.v"
-                      :label="item.k"
-                      :value="item.v"
-                    >
+                  <el-select style="width: 100%" v-model="tableForm.parentId" class="input-shadow" filterable default-first-option clearable placeholder="主目录">
+                    <el-option v-for="item in tableOptionser" :key="item.v" :label="item.k" :value="item.v">
                     </el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item
-                  label="菜单类型"
-                  size="default"
-                  :rules="formRules.isNotNull"
-                  prop="menuType"
-                >
+                <el-form-item label="菜单类型" size="default" :rules="formRules.isNotNull" prop="menuType">
                   <el-radio-group v-model="tableForm.menuType" size="default">
                     <el-radio-button label="目录" />
                     <el-radio-button label="菜单" />
@@ -191,68 +113,29 @@
               </el-col>
               <el-col>
                 <el-form-item label="图标" size="default">
-                  <el-select
-                    style="width: 100%"
-                    v-model="tableForm.icon"
-                    class="input-shadow"
-                    filterable
-                    default-first-option
-                    clearable
-                    placeholder=""
-                  >
-                    <el-option
-                      v-for="item in tableOptionser"
-                      :key="item.v"
-                      :label="item.k"
-                      :value="item.v"
-                    >
+                  <el-select style="width: 100%" v-model="tableForm.icon" class="input-shadow" filterable default-first-option clearable placeholder="">
+                    <el-option v-for="item in tableOptionser" :key="item.v" :label="item.k" :value="item.v">
                     </el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item
-                  label="菜单编码"
-                  size="default"
-                  :rules="formRules.isNotNull"
-                  prop="menuCode"
-                >
-                  <el-input
-                    v-model="tableForm.menuCode"
-                    placeholder="请输入菜单编码"
-                  />
+                <el-form-item label="菜单编码" size="default" :rules="formRules.isNotNull" prop="menuCode">
+                  <el-input v-model="tableForm.menuCode" placeholder="请输入菜单编码" />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item
-                  label="菜单名称"
-                  size="default"
-                  :rules="formRules.isNotNull"
-                  prop="menuName"
-                >
-                  <el-input
-                    v-model="tableForm.menuName"
-                    placeholder="请输入菜单名称"
-                  />
+                <el-form-item label="菜单名称" size="default" :rules="formRules.isNotNull" prop="menuName">
+                  <el-input v-model="tableForm.menuName" placeholder="请输入菜单名称" />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item
-                  label="排序"
-                  size="default"
-                  :rules="formRules.isNotNull"
-                  prop="treeSort"
-                >
+                <el-form-item label="排序" size="default" :rules="formRules.isNotNull" prop="treeSort">
                   <el-input v-model="tableForm.treeSort" placeholder="" />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item
-                  label="是否外链"
-                  size="default"
-                  :rules="formRules.isNotNull"
-                  prop="isFrame"
-                >
+                <el-form-item label="是否外链" size="default" :rules="formRules.isNotNull" prop="isFrame">
                   <el-radio-group v-model="tableForm.isFrame" size="default">
                     <el-radio-button label="是" />
                     <el-radio-button label="否" />
@@ -260,22 +143,12 @@
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item
-                  label="路由地址"
-                  size="default"
-                  :rules="formRules.isNotNull"
-                  prop="path"
-                >
+                <el-form-item label="路由地址" size="default" :rules="formRules.isNotNull" prop="path">
                   <el-input v-model="tableForm.path" placeholder="" />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item
-                  label="是否显示"
-                  size="default"
-                  :rules="formRules.isNotNull"
-                  prop="visible"
-                >
+                <el-form-item label="是否显示" size="default" :rules="formRules.isNotNull" prop="visible">
                   <el-radio-group v-model="tableForm.visible" size="default">
                     <el-radio-button label="是" />
                     <el-radio-button label="否" />
@@ -283,32 +156,17 @@
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item
-                  label="组件路径"
-                  size="default"
-                  :rules="formRules.isNotNull"
-                  prop="component"
-                >
+                <el-form-item label="组件路径" size="default" :rules="formRules.isNotNull" prop="component">
                   <el-input v-model="tableForm.component" placeholder="" />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item
-                  label="权限标识"
-                  size="default"
-                  :rules="formRules.isNotNull"
-                  prop="perms"
-                >
+                <el-form-item label="权限标识" size="default" :rules="formRules.isNotNull" prop="perms">
                   <el-input v-model="tableForm.perms" placeholder="" />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item
-                  label="状态"
-                  size="default"
-                  :rules="formRules.isNotNull"
-                  prop="status"
-                >
+                <el-form-item label="状态" size="default" :rules="formRules.isNotNull" prop="status">
                   <el-radio-group v-model="tableForm.status" size="default">
                     <el-radio-button label="开启" />
                     <el-radio-button label="关闭" />
@@ -316,12 +174,7 @@
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item
-                  label="是否缓存"
-                  size="default"
-                  :rules="formRules.isNotNull"
-                  prop="isCache"
-                >
+                <el-form-item label="是否缓存" size="default" :rules="formRules.isNotNull" prop="isCache">
                   <el-radio-group v-model="tableForm.isCache" size="default">
                     <el-radio-button label="缓存" />
                     <el-radio-button label="不缓存" />
@@ -330,11 +183,7 @@
               </el-col>
               <el-col>
                 <el-form-item label="备注" size="default">
-                  <el-input
-                    type="textarea"
-                    v-model="tableForm.remark"
-                    placeholder="请输入备注"
-                  />
+                  <el-input type="textarea" v-model="tableForm.remark" placeholder="请输入备注" />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -398,9 +247,9 @@ const tablePropertyDefault = {
 const tableOptionser = ref([]); //弹窗下拉
 const flag = ref<Boolean>(false); //弹窗开关
 const type = ref<String>(""); //判断是否删除
-const TagsAll = ref<Array>([]);
+const TagsAll = ref<any>([]);
 const currentval = ref<String>("");
-const TagsAlls = ref<Array>([]);
+const TagsAlls = ref<any>([]);
 const currentvals = ref<String>("");
 const msgTitle = ref<String>("新增登录策略"); //弹窗标题
 const tableColsCopys = reactive<Object>({}); //弹窗

src/views/userManagement/hooks/useIcons.ts

@@ -0,0 +1,1175 @@
+const icons = [
+  {
+    k: 'AddLocation',
+    v: 'AddLocation',
+  },
+  {
+    k: 'Aim',
+    v: 'Aim',
+  },
+  {
+    k: 'AlarmClock',
+    v: 'AlarmClock',
+  },
+  {
+    k: 'Apple',
+    v: 'Apple',
+  },
+  {
+    k: 'ArrowDown',
+    v: 'ArrowDown',
+  },
+  {
+    k: 'ArrowDownBold',
+    v: 'ArrowDownBold',
+  },
+  {
+    k: 'ArrowLeft',
+    v: 'ArrowLeft',
+  },
+  {
+    k: 'ArrowLeftBold',
+    v: 'ArrowLeftBold',
+  },
+  {
+    k: 'ArrowRight',
+    v: 'ArrowRight',
+  },
+  {
+    k: 'ArrowRightBold',
+    v: 'ArrowRightBold',
+  },
+  {
+    k: 'ArrowUp',
+    v: 'ArrowUp',
+  },
+  {
+    k: 'ArrowUpBold',
+    v: 'ArrowUpBold',
+  },
+  {
+    k: 'Avatar',
+    v: 'Avatar',
+  },
+  {
+    k: 'Back',
+    v: 'Back',
+  },
+  {
+    k: 'Baseball',
+    v: 'Baseball',
+  },
+  {
+    k: 'Basketball',
+    v: 'Basketball',
+  },
+  {
+    k: 'Bell',
+    v: 'Bell',
+  },
+  {
+    k: 'BellFilled',
+    v: 'BellFilled',
+  },
+  {
+    k: 'Bicycle',
+    v: 'Bicycle',
+  },
+  {
+    k: 'Bottom',
+    v: 'Bottom',
+  },
+  {
+    k: 'BottomLeft',
+    v: 'BottomLeft',
+  },
+  {
+    k: 'BottomRight',
+    v: 'BottomRight',
+  },
+  {
+    k: 'Bowl',
+    v: 'Bowl',
+  },
+  {
+    k: 'Box',
+    v: 'Box',
+  },
+  {
+    k: 'Briefcase',
+    v: 'Briefcase',
+  },
+  {
+    k: 'Brush',
+    v: 'Brush',
+  },
+  {
+    k: 'BrushFilled',
+    v: 'BrushFilled',
+  },
+  {
+    k: 'Burger',
+    v: 'Burger',
+  },
+  {
+    k: 'Calendar',
+    v: 'Calendar',
+  },
+  {
+    k: 'Camera',
+    v: 'Camera',
+  },
+  {
+    k: 'CameraFilled',
+    v: 'CameraFilled',
+  },
+  {
+    k: 'CaretBottom',
+    v: 'CaretBottom',
+  },
+  {
+    k: 'CaretLeft',
+    v: 'CaretLeft',
+  },
+  {
+    k: 'CaretRight',
+    v: 'CaretRight',
+  },
+  {
+    k: 'CaretTop',
+    v: 'CaretTop',
+  },
+  {
+    k: 'Cellphone',
+    v: 'Cellphone',
+  },
+  {
+    k: 'ChatDotRound',
+    v: 'ChatDotRound',
+  },
+  {
+    k: 'ChatDotSquare',
+    v: 'ChatDotSquare',
+  },
+  {
+    k: 'ChatLineRound',
+    v: 'ChatLineRound',
+  },
+  {
+    k: 'ChatLineSquare',
+    v: 'ChatLineSquare',
+  },
+  {
+    k: 'ChatRound',
+    v: 'ChatRound',
+  },
+  {
+    k: 'ChatSquare',
+    v: 'ChatSquare',
+  },
+  {
+    k: 'Check',
+    v: 'Check',
+  },
+  {
+    k: 'Checked',
+    v: 'Checked',
+  },
+  {
+    k: 'Cherry',
+    v: 'Cherry',
+  },
+  {
+    k: 'Chicken',
+    v: 'Chicken',
+  },
+  {
+    k: 'ChromeFilled',
+    v: 'ChromeFilled',
+  },
+  {
+    k: 'CircleCheck',
+    v: 'CircleCheck',
+  },
+  {
+    k: 'CircleCheckFilled',
+    v: 'CircleCheckFilled',
+  },
+  {
+    k: 'CircleClose',
+    v: 'CircleClose',
+  },
+  {
+    k: 'CircleCloseFilled',
+    v: 'CircleCloseFilled',
+  },
+  {
+    k: 'CirclePlus',
+    v: 'CirclePlus',
+  },
+  {
+    k: 'CirclePlusFilled',
+    v: 'CirclePlusFilled',
+  },
+  {
+    k: 'Clock',
+    v: 'Clock',
+  },
+  {
+    k: 'Close',
+    v: 'Close',
+  },
+  {
+    k: 'CloseBold',
+    v: 'CloseBold',
+  },
+  {
+    k: 'Cloudy',
+    v: 'Cloudy',
+  },
+  {
+    k: 'Coffee',
+    v: 'Coffee',
+  },
+  {
+    k: 'CoffeeCup',
+    v: 'CoffeeCup',
+  },
+  {
+    k: 'Coin',
+    v: 'Coin',
+  },
+  {
+    k: 'ColdDrink',
+    v: 'ColdDrink',
+  },
+  {
+    k: 'Collection',
+    v: 'Collection',
+  },
+  {
+    k: 'CollectionTag',
+    v: 'CollectionTag',
+  },
+  {
+    k: 'Comment',
+    v: 'Comment',
+  },
+  {
+    k: 'Compass',
+    v: 'Compass',
+  },
+  {
+    k: 'Connection',
+    v: 'Connection',
+  },
+  {
+    k: 'Coordinate',
+    v: 'Coordinate',
+  },
+  {
+    k: 'CopyDocument',
+    v: 'CopyDocument',
+  },
+  {
+    k: 'Cpu',
+    v: 'Cpu',
+  },
+  {
+    k: 'CreditCard',
+    v: 'CreditCard',
+  },
+  {
+    k: 'Crop',
+    v: 'Crop',
+  },
+  {
+    k: 'DArrowLeft',
+    v: 'DArrowLeft',
+  },
+  {
+    k: 'DArrowRight',
+    v: 'DArrowRight',
+  },
+  {
+    k: 'DCaret',
+    v: 'DCaret',
+  },
+  {
+    k: 'DataAnalysis',
+    v: 'DataAnalysis',
+  },
+  {
+    k: 'DataBoard',
+    v: 'DataBoard',
+  },
+  {
+    k: 'DataLine',
+    v: 'DataLine',
+  },
+  {
+    k: 'Delete',
+    v: 'Delete',
+  },
+  {
+    k: 'DeleteFilled',
+    v: 'DeleteFilled',
+  },
+  {
+    k: 'DeleteLocation',
+    v: 'DeleteLocation',
+  },
+  {
+    k: 'Dessert',
+    v: 'Dessert',
+  },
+  {
+    k: 'Discount',
+    v: 'Discount',
+  },
+  {
+    k: 'Dish',
+    v: 'Dish',
+  },
+  {
+    k: 'DishDot',
+    v: 'DishDot',
+  },
+  {
+    k: 'Document',
+    v: 'Document',
+  },
+  {
+    k: 'DocumentAdd',
+    v: 'DocumentAdd',
+  },
+  {
+    k: 'DocumentChecked',
+    v: 'DocumentChecked',
+  },
+  {
+    k: 'DocumentCopy',
+    v: 'DocumentCopy',
+  },
+  {
+    k: 'DocumentDelete',
+    v: 'DocumentDelete',
+  },
+  {
+    k: 'DocumentRemove',
+    v: 'DocumentRemove',
+  },
+  {
+    k: 'Download',
+    v: 'Download',
+  },
+  {
+    k: 'Drizzling',
+    v: 'Drizzling',
+  },
+  {
+    k: 'Edit',
+    v: 'Edit',
+  },
+  {
+    k: 'EditPen',
+    v: 'EditPen',
+  },
+  {
+    k: 'Eleme',
+    v: 'Eleme',
+  },
+  {
+    k: 'ElemeFilled',
+    v: 'ElemeFilled',
+  },
+  {
+    k: 'ElementPlus',
+    v: 'ElementPlus',
+  },
+  {
+    k: 'Expand',
+    v: 'Expand',
+  },
+  {
+    k: 'Failed',
+    v: 'Failed',
+  },
+  {
+    k: 'Female',
+    v: 'Female',
+  },
+  {
+    k: 'Files',
+    v: 'Files',
+  },
+  {
+    k: 'Film',
+    v: 'Film',
+  },
+  {
+    k: 'Filter',
+    v: 'Filter',
+  },
+  {
+    k: 'Finished',
+    v: 'Finished',
+  },
+  {
+    k: 'FirstAidKit',
+    v: 'FirstAidKit',
+  },
+  {
+    k: 'Flag',
+    v: 'Flag',
+  },
+  {
+    k: 'Fold',
+    v: 'Fold',
+  },
+  {
+    k: 'Folder',
+    v: 'Folder',
+  },
+  {
+    k: 'FolderAdd',
+    v: 'FolderAdd',
+  },
+  {
+    k: 'FolderChecked',
+    v: 'FolderChecked',
+  },
+  {
+    k: 'FolderDelete',
+    v: 'FolderDelete',
+  },
+  {
+    k: 'FolderOpened',
+    v: 'FolderOpened',
+  },
+  {
+    k: 'FolderRemove',
+    v: 'FolderRemove',
+  },
+  {
+    k: 'Food',
+    v: 'Food',
+  },
+  {
+    k: 'Football',
+    v: 'Football',
+  },
+  {
+    k: 'ForkSpoon',
+    v: 'ForkSpoon',
+  },
+  {
+    k: 'Fries',
+    v: 'Fries',
+  },
+  {
+    k: 'FullScreen',
+    v: 'FullScreen',
+  },
+  {
+    k: 'Goblet',
+    v: 'Goblet',
+  },
+  {
+    k: 'GobletFull',
+    v: 'GobletFull',
+  },
+  {
+    k: 'GobletSquare',
+    v: 'GobletSquare',
+  },
+  {
+    k: 'GobletSquareFull',
+    v: 'GobletSquareFull',
+  },
+  {
+    k: 'GoldMedal',
+    v: 'GoldMedal',
+  },
+  {
+    k: 'Goods',
+    v: 'Goods',
+  },
+  {
+    k: 'GoodsFilled',
+    v: 'GoodsFilled',
+  },
+  {
+    k: 'Grape',
+    v: 'Grape',
+  },
+  {
+    k: 'Grid',
+    v: 'Grid',
+  },
+  {
+    k: 'Guide',
+    v: 'Guide',
+  },
+  {
+    k: 'Handbag',
+    v: 'Handbag',
+  },
+  {
+    k: 'Headset',
+    v: 'Headset',
+  },
+  {
+    k: 'Help',
+    v: 'Help',
+  },
+  {
+    k: 'HelpFilled',
+    v: 'HelpFilled',
+  },
+  {
+    k: 'Hide',
+    v: 'Hide',
+  },
+  {
+    k: 'Histogram',
+    v: 'Histogram',
+  },
+  {
+    k: 'HomeFilled',
+    v: 'HomeFilled',
+  },
+  {
+    k: 'HotWater',
+    v: 'HotWater',
+  },
+  {
+    k: 'House',
+    v: 'House',
+  },
+  {
+    k: 'IceCream',
+    v: 'IceCream',
+  },
+  {
+    k: 'IceCreamRound',
+    v: 'IceCreamRound',
+  },
+  {
+    k: 'IceCreamSquare',
+    v: 'IceCreamSquare',
+  },
+  {
+    k: 'IceDrink',
+    v: 'IceDrink',
+  },
+  {
+    k: 'IceTea',
+    v: 'IceTea',
+  },
+  {
+    k: 'InfoFilled',
+    v: 'InfoFilled',
+  },
+  {
+    k: 'Iphone',
+    v: 'Iphone',
+  },
+  {
+    k: 'Key',
+    v: 'Key',
+  },
+  {
+    k: 'KnifeFork',
+    v: 'KnifeFork',
+  },
+  {
+    k: 'Lightning',
+    v: 'Lightning',
+  },
+  {
+    k: 'Link',
+    v: 'Link',
+  },
+  {
+    k: 'List',
+    v: 'List',
+  },
+  {
+    k: 'Loading',
+    v: 'Loading',
+  },
+  {
+    k: 'Location',
+    v: 'Location',
+  },
+  {
+    k: 'LocationFilled',
+    v: 'LocationFilled',
+  },
+  {
+    k: 'LocationInformation',
+    v: 'LocationInformation',
+  },
+  {
+    k: 'Lock',
+    v: 'Lock',
+  },
+  {
+    k: 'Lollipop',
+    v: 'Lollipop',
+  },
+  {
+    k: 'MagicStick',
+    v: 'MagicStick',
+  },
+  {
+    k: 'Magnet',
+    v: 'Magnet',
+  },
+  {
+    k: 'Male',
+    v: 'Male',
+  },
+  {
+    k: 'Management',
+    v: 'Management',
+  },
+  {
+    k: 'MapLocation',
+    v: 'MapLocation',
+  },
+  {
+    k: 'Medal',
+    v: 'Medal',
+  },
+  {
+    k: 'Memo',
+    v: 'Memo',
+  },
+  {
+    k: 'Menu',
+    v: 'Menu',
+  },
+  {
+    k: 'Message',
+    v: 'Message',
+  },
+  {
+    k: 'MessageBox',
+    v: 'MessageBox',
+  },
+  {
+    k: 'Mic',
+    v: 'Mic',
+  },
+  {
+    k: 'Microphone',
+    v: 'Microphone',
+  },
+  {
+    k: 'MilkTea',
+    v: 'MilkTea',
+  },
+  {
+    k: 'Minus',
+    v: 'Minus',
+  },
+  {
+    k: 'Money',
+    v: 'Money',
+  },
+  {
+    k: 'Monitor',
+    v: 'Monitor',
+  },
+  {
+    k: 'Moon',
+    v: 'Moon',
+  },
+  {
+    k: 'MoonNight',
+    v: 'MoonNight',
+  },
+  {
+    k: 'More',
+    v: 'More',
+  },
+  {
+    k: 'MoreFilled',
+    v: 'MoreFilled',
+  },
+  {
+    k: 'MostlyCloudy',
+    v: 'MostlyCloudy',
+  },
+  {
+    k: 'Mouse',
+    v: 'Mouse',
+  },
+  {
+    k: 'Mug',
+    v: 'Mug',
+  },
+  {
+    k: 'Mute',
+    v: 'Mute',
+  },
+  {
+    k: 'MuteNotification',
+    v: 'MuteNotification',
+  },
+  {
+    k: 'NoSmoking',
+    v: 'NoSmoking',
+  },
+  {
+    k: 'Notebook',
+    v: 'Notebook',
+  },
+  {
+    k: 'Notification',
+    v: 'Notification',
+  },
+  {
+    k: 'Odometer',
+    v: 'Odometer',
+  },
+  {
+    k: 'OfficeBuilding',
+    v: 'OfficeBuilding',
+  },
+  {
+    k: 'Open',
+    v: 'Open',
+  },
+  {
+    k: 'Operation',
+    v: 'Operation',
+  },
+  {
+    k: 'Opportunity',
+    v: 'Opportunity',
+  },
+  {
+    k: 'Orange',
+    v: 'Orange',
+  },
+  {
+    k: 'Paperclip',
+    v: 'Paperclip',
+  },
+  {
+    k: 'PartlyCloudy',
+    v: 'PartlyCloudy',
+  },
+  {
+    k: 'Pear',
+    v: 'Pear',
+  },
+  {
+    k: 'Phone',
+    v: 'Phone',
+  },
+  {
+    k: 'PhoneFilled',
+    v: 'PhoneFilled',
+  },
+  {
+    k: 'Picture',
+    v: 'Picture',
+  },
+  {
+    k: 'PictureFilled',
+    v: 'PictureFilled',
+  },
+  {
+    k: 'PictureRounded',
+    v: 'PictureRounded',
+  },
+  {
+    k: 'PieChart',
+    v: 'PieChart',
+  },
+  {
+    k: 'Place',
+    v: 'Place',
+  },
+  {
+    k: 'Platform',
+    v: 'Platform',
+  },
+  {
+    k: 'Plus',
+    v: 'Plus',
+  },
+  {
+    k: 'Pointer',
+    v: 'Pointer',
+  },
+  {
+    k: 'Position',
+    v: 'Position',
+  },
+  {
+    k: 'Postcard',
+    v: 'Postcard',
+  },
+  {
+    k: 'Pouring',
+    v: 'Pouring',
+  },
+  {
+    k: 'Present',
+    v: 'Present',
+  },
+  {
+    k: 'PriceTag',
+    v: 'PriceTag',
+  },
+  {
+    k: 'Printer',
+    v: 'Printer',
+  },
+  {
+    k: 'Promotion',
+    v: 'Promotion',
+  },
+  {
+    k: 'QuartzWatch',
+    v: 'QuartzWatch',
+  },
+  {
+    k: 'QuestionFilled',
+    v: 'QuestionFilled',
+  },
+  {
+    k: 'Rank',
+    v: 'Rank',
+  },
+  {
+    k: 'Reading',
+    v: 'Reading',
+  },
+  {
+    k: 'ReadingLamp',
+    v: 'ReadingLamp',
+  },
+  {
+    k: 'Refresh',
+    v: 'Refresh',
+  },
+  {
+    k: 'RefreshLeft',
+    v: 'RefreshLeft',
+  },
+  {
+    k: 'RefreshRight',
+    v: 'RefreshRight',
+  },
+  {
+    k: 'Refrigerator',
+    v: 'Refrigerator',
+  },
+  {
+    k: 'Remove',
+    v: 'Remove',
+  },
+  {
+    k: 'RemoveFilled',
+    v: 'RemoveFilled',
+  },
+  {
+    k: 'Right',
+    v: 'Right',
+  },
+  {
+    k: 'ScaleToOriginal',
+    v: 'ScaleToOriginal',
+  },
+  {
+    k: 'School',
+    v: 'School',
+  },
+  {
+    k: 'Scissor',
+    v: 'Scissor',
+  },
+  {
+    k: 'Search',
+    v: 'Search',
+  },
+  {
+    k: 'Select',
+    v: 'Select',
+  },
+  {
+    k: 'Sell',
+    v: 'Sell',
+  },
+  {
+    k: 'SemiSelect',
+    v: 'SemiSelect',
+  },
+  {
+    k: 'Service',
+    v: 'Service',
+  },
+  {
+    k: 'SetUp',
+    v: 'SetUp',
+  },
+  {
+    k: 'Setting',
+    v: 'Setting',
+  },
+  {
+    k: 'Share',
+    v: 'Share',
+  },
+  {
+    k: 'Ship',
+    v: 'Ship',
+  },
+  {
+    k: 'Shop',
+    v: 'Shop',
+  },
+  {
+    k: 'ShoppingBag',
+    v: 'ShoppingBag',
+  },
+  {
+    k: 'ShoppingCart',
+    v: 'ShoppingCart',
+  },
+  {
+    k: 'ShoppingCartFull',
+    v: 'ShoppingCartFull',
+  },
+  {
+    k: 'ShoppingTrolley',
+    v: 'ShoppingTrolley',
+  },
+  {
+    k: 'Smoking',
+    v: 'Smoking',
+  },
+  {
+    k: 'Soccer',
+    v: 'Soccer',
+  },
+  {
+    k: 'SoldOut',
+    v: 'SoldOut',
+  },
+  {
+    k: 'Sort',
+    v: 'Sort',
+  },
+  {
+    k: 'SortDown',
+    v: 'SortDown',
+  },
+  {
+    k: 'SortUp',
+    v: 'SortUp',
+  },
+  {
+    k: 'Stamp',
+    v: 'Stamp',
+  },
+  {
+    k: 'Star',
+    v: 'Star',
+  },
+  {
+    k: 'StarFilled',
+    v: 'StarFilled',
+  },
+  {
+    k: 'Stopwatch',
+    v: 'Stopwatch',
+  },
+  {
+    k: 'SuccessFilled',
+    v: 'SuccessFilled',
+  },
+  {
+    k: 'Sugar',
+    v: 'Sugar',
+  },
+  {
+    k: 'Suitcase',
+    v: 'Suitcase',
+  },
+  {
+    k: 'SuitcaseLine',
+    v: 'SuitcaseLine',
+  },
+  {
+    k: 'Sunny',
+    v: 'Sunny',
+  },
+  {
+    k: 'Sunrise',
+    v: 'Sunrise',
+  },
+  {
+    k: 'Sunset',
+    v: 'Sunset',
+  },
+  {
+    k: 'Switch',
+    v: 'Switch',
+  },
+  {
+    k: 'SwitchButton',
+    v: 'SwitchButton',
+  },
+  {
+    k: 'SwitchFilled',
+    v: 'SwitchFilled',
+  },
+  {
+    k: 'TakeawayBox',
+    v: 'TakeawayBox',
+  },
+  {
+    k: 'Ticket',
+    v: 'Ticket',
+  },
+  {
+    k: 'Tickets',
+    v: 'Tickets',
+  },
+  {
+    k: 'Timer',
+    v: 'Timer',
+  },
+  {
+    k: 'ToiletPaper',
+    v: 'ToiletPaper',
+  },
+  {
+    k: 'Tools',
+    v: 'Tools',
+  },
+  {
+    k: 'Top',
+    v: 'Top',
+  },
+  {
+    k: 'TopLeft',
+    v: 'TopLeft',
+  },
+  {
+    k: 'TopRight',
+    v: 'TopRight',
+  },
+  {
+    k: 'TrendCharts',
+    v: 'TrendCharts',
+  },
+  {
+    k: 'Trophy',
+    v: 'Trophy',
+  },
+  {
+    k: 'TrophyBase',
+    v: 'TrophyBase',
+  },
+  {
+    k: 'TurnOff',
+    v: 'TurnOff',
+  },
+  {
+    k: 'Umbrella',
+    v: 'Umbrella',
+  },
+  {
+    k: 'Unlock',
+    v: 'Unlock',
+  },
+  {
+    k: 'Upload',
+    v: 'Upload',
+  },
+  {
+    k: 'UploadFilled',
+    v: 'UploadFilled',
+  },
+  {
+    k: 'User',
+    v: 'User',
+  },
+  {
+    k: 'UserFilled',
+    v: 'UserFilled',
+  },
+  {
+    k: 'Van',
+    v: 'Van',
+  },
+  {
+    k: 'VideoCamera',
+    v: 'VideoCamera',
+  },
+  {
+    k: 'VideoCameraFilled',
+    v: 'VideoCameraFilled',
+  },
+  {
+    k: 'VideoPause',
+    v: 'VideoPause',
+  },
+  {
+    k: 'VideoPlay',
+    v: 'VideoPlay',
+  },
+  {
+    k: 'View',
+    v: 'View',
+  },
+  {
+    k: 'Wallet',
+    v: 'Wallet',
+  },
+  {
+    k: 'WalletFilled',
+    v: 'WalletFilled',
+  },
+  {
+    k: 'WarnTriangleFilled',
+    v: 'WarnTriangleFilled',
+  },
+  {
+    k: 'Warning',
+    v: 'Warning',
+  },
+  {
+    k: 'WarningFilled',
+    v: 'WarningFilled',
+  },
+  {
+    k: 'Watch',
+    v: 'Watch',
+  },
+  {
+    k: 'Watermelon',
+    v: 'Watermelon',
+  },
+  {
+    k: 'WindPower',
+    v: 'WindPower',
+  },
+  {
+    k: 'ZoomIn',
+    v: 'ZoomIn',
+  },
+  {
+    k: 'ZoomOut',
+    v: 'ZoomOut',
+  },
+]
+export default icons

src/views/userManagement/hooks/useTable.ts

@@ -0,0 +1,49 @@
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { GeneralDataReception, Query } from '@/api/dataIntegration'
+import { IdType } from '../type'
+const tableHeader = ref<any>([])
+const tableData = ref<any>([])
+const getTable = async (id: IdType, dataContent) => {
+  try {
+    const { code, returnData, message } = await Query({
+      id: id,
+      needPage: 1,
+      dataContent: [...dataContent],
+    })
+    if (code == 0 && returnData) {
+      const { columnSet, listValues } = returnData
+      tableHeader.value = columnSet
+      tableData.value = listValues
+      return {
+        tableHeader,
+        tableData,
+      }
+    } else {
+      ElMessage.error(message)
+      return {
+        tableHeader,
+        tableData,
+      }
+    }
+  } catch (err: any) {
+    return {
+      tableHeader,
+      tableData,
+    }
+  }
+}
+
+const dataChange = async (id: IdType, event: IdType, data) => {
+  const obj = Object.assign(data, { event })
+  const { code, message } = await GeneralDataReception({
+    serviceId: id,
+    dataContent: JSON.stringify(obj),
+  })
+  return {
+    code,
+    message,
+  }
+}
+
+export default { getTable, dataChange }

src/views/userManagement/hooks/useTree.ts

@@ -0,0 +1,47 @@
+import { Query } from '@/api/dataIntegration'
+import { translateDataToTreeAll } from '@/utils/validate'
+import { ref } from 'vue'
+import * as _ from 'lodash'
+const dataObj = ref<any>({
+  auth_id: -1,
+  auth_name: '所有权限',
+  auth_status: true,
+  up_auth_id: -1,
+  auth_type: 0,
+  disabled: true,
+  children: [] as Array<any>,
+})
+const data = ref<any>([])
+const newData = ref<any>([])
+const setTree = (arr: Array<any>, upkey = 'up_auth_id', key = 'auth_id') => {
+  if (arr.length) {
+    const datas = translateDataToTreeAll(arr, upkey, key)
+    dataObj.value.children = datas
+  }
+  return dataObj
+}
+
+const getTree = async () => {
+  try {
+    const { returnData, code } = await Query({
+      id: DATACONTENT_ID.authTreeNewId,
+      dataContent: [sessionStorage.getItem('User_Id')],
+    })
+    if (code == 0 && returnData.listValues) {
+      newData.value = _.cloneDeep(returnData.listValues)
+      data.value = [setTree(returnData.listValues)]
+      return data
+    } else {
+      data.value = [dataObj]
+      return data
+    }
+  } catch (error) {
+    data.value = [dataObj]
+    return data
+  }
+}
+export default {
+  setTree,
+  getTree,
+  newData,
+}

src/views/userManagement/permission/index.vue

@@ -0,0 +1,644 @@
+<template>
+  <div class="permission scroll-y">
+    <div class="permission-head rowSS">
+      <div class="manageTitle">权限项管理</div>
+      <div class="status0"><span class="icon"></span>交互权限</div>
+      <div class="status1"><span class="icon"></span>API接口</div>
+      <div class="status2"><span class="icon"></span>数据读写</div>
+    </div>
+    <div class="permission-content rowSS">
+      <div class="permission-content-tree box">
+        <div class="manageTitle">权限树</div>
+        <div class="contentTree">
+          <el-tree :data="data" :props="defaultProps" node-key="auth_id" highlight-current :default-expanded-keys="currentKey" :expand-on-click-node="false" @node-click="handleNodeClick" />
+        </div>
+      </div>
+      <div class="permission-content-card box">
+        <div class="grid-contentBottom">
+          <div class="capTitle rowBS">
+            <div class="manageTitle">下级权限</div>
+            <div class="btn-create">
+              <el-button size="default" plain class="btn-white" @click="addAuth">新增</el-button>
+            </div>
+          </div>
+          <div class="content">
+            <template v-if="childrenData.length">
+              <el-row :gutter="24">
+                <el-col v-for="data in childrenData" :key="data.auth_id" :span="6">
+                  <div class="account-left-content-teams">
+                    <div class="team">
+                      <div class="bg" :class="data.auth_type == 1 ? 'status0' : data.auth_type == 2 ? 'status1' : 'status2'"></div>
+                      <div class="list" :class="data.QueryTarget == 1 ? 'activeStatus' : ''">
+                        <div class="rowBS info">
+                          <div :title="data.auth_name" class="name">
+                            {{ data.auth_name }}
+                          </div>
+                          <div v-if="data.auth_type > 0" class="icon">
+                            <el-tooltip effect="dark" :content="`修改${data.auth_name}`" placement="bottom">
+                              <span class="cap cap-edit" @click="renderEdit(data)"></span>
+                            </el-tooltip>
+                          </div>
+                        </div>
+                        <div v-if="data.auth_type > 0" class="rowBS details">
+                          <div class="details-msg">
+                            状态：<span :class="data.auth_status ? 'success' : 'error'">{{ data.auth_status ? "启用" : "禁用" }}</span>
+                          </div>
+                          <div class="details-info">
+                            <el-switch v-model="data.auth_status" active-color="#AC014D" @change="renderChange(data)"> </el-switch>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div v-if="data.auth_type !== 0" class="info-close" @click.stop="onNodeClick(data)">
+                        <CloseBold class="icon" :class="data.auth_type === 1 ? 'close1' : data.auth_type > 2 ? 'close2' : ''" />
+                      </div>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </template>
+            <template v-else>
+              <el-empty description="暂无数据" />
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--删除弹框-->
+    <Dialog :flag="flag" msgTitle="删除权限" type="del" :delName="title" @delRest="delRest" @delRemove="remove" />
+    <!--新增/编辑-->
+    <Dialog :flag="editDialogVisible" :msg-title="editDialogTitle" @submitForm="submitForm(ruleFormRef)" @reset-form="resetForm(ruleFormRef)" width="628px" :show-flag="true">
+      <div class="authForm">
+        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="110px" class="demo-ruleForm">
+          <el-form-item label="权限名称" prop="auth_name">
+            <el-input v-model="ruleForm.auth_name" size="default" placeholder="请输入权限名称" />
+          </el-form-item>
+          <div class="flex">
+            <el-form-item label="权限类型" prop="auth_type">
+              <el-select v-model="ruleForm.auth_type" size="default" placeholder="请选择">
+                <el-option v-for="(item, index) in optionsType" :key="index" :label="item.label" :value="item.value"> </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="父级权限" prop="auth_id">
+              <el-select v-model="ruleForm.auth_id" size="default" placeholder="请选择">
+                <el-option v-for="(item, index) in optionsParent" :key="index" :label="item.label" :value="item.value"> </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <el-form-item class="flex1" label="所属应用" prop="app_name">
+            <el-select v-model="ruleForm.app_name" style="display: block" size="default" placeholder="请选择">
+              <el-option v-for="(item, index) in optionsApp" :key="index" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="权限标识符" prop="auth_ident">
+            <el-input v-model="ruleForm.auth_ident" size="default" type="textarea" :rows="3" placeholder="请输入权限标识符" />
+          </el-form-item>
+          <el-form-item label="数据项描述" prop="auth_comment">
+            <el-input v-model="ruleForm.auth_comment" size="default" type="textarea" :rows="3" placeholder="请输入数据项描述" />
+          </el-form-item>
+          <template v-if="tableForm.show_type != 3" :span="12">
+            <el-form-item label="状态" size="default" prop="auth_status">
+              <el-radio-group v-model="ruleForm.auth_status" size="default">
+                <el-radio-button :label="true">开启</el-radio-button>
+                <el-radio-button :label="false">关闭</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </template>
+        </el-form>
+      </div>
+      <div v-if="ruleForm.auth_type == 1" class="diacont">
+        <el-form :model="tableForm" label-width="85px" ref="systemconfiguration">
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="菜单类型" size="default" prop="menuType">
+                <el-radio-group v-model="tableForm.show_type" size="default">
+                  <el-radio-button :label="1">目录</el-radio-button>
+                  <el-radio-button :label="2">菜单</el-radio-button>
+                  <el-radio-button :label="3">按钮</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="图标" size="default">
+                <el-select style="width: 100%" v-model="tableForm.show_icon" class="input-shadow" filterable default-first-option clearable placeholder="">
+                  <el-option v-for="item in tableOptionser" :key="item.v" :label="item.k" :value="item.v">
+                    <el-icon :size="20">
+                      <component :is="item.k"></component>
+                    </el-icon>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="菜单编码" size="default" prop="code">
+                <el-input v-model="tableForm.code" placeholder="请输入菜单编码" />
+              </el-form-item>
+            </el-col>
+            <el-col v-if="tableForm.show_type == 2" :span="12">
+              <el-form-item label="查询模板ID" size="default" prop="queryTemplateID">
+                <el-input v-model="tableForm.queryTemplateID" placeholder="请输入queryTemplateID" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="排序" size="default" prop="show_index">
+                <el-input v-model="tableForm.show_index" placeholder="" />
+              </el-form-item>
+            </el-col>
+            <el-col v-if="tableForm.show_type != 3" :span="12">
+              <el-form-item label="是否外链" size="default" prop="is_link">
+                <el-radio-group v-model="tableForm.is_link" size="default">
+                  <el-radio-button :label="1">是</el-radio-button>
+                  <el-radio-button :label="0">否</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col v-if="tableForm.show_type != 3" :span="12">
+              <el-form-item label="路由地址" size="default" prop="route_info">
+                <el-input v-model="tableForm.route_info" placeholder="" />
+              </el-form-item>
+            </el-col>
+            <el-col v-if="tableForm.show_type != 3" :span="12">
+              <el-form-item label="是否显示" size="default" prop="is_show">
+                <el-radio-group v-model="tableForm.is_show" size="default">
+                  <el-radio-button :label="1">是</el-radio-button>
+                  <el-radio-button :label="0">否</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col v-if="tableForm.show_type == 2" :span="12">
+              <el-form-item label="组件路径" size="default" prop="file_link">
+                <el-input v-model="tableForm.file_link" placeholder="" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onBeforeMount } from "vue";
+import { CloseBold } from "@element-plus/icons-vue";
+import Dialog from "@/components/dialog/index.vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { GeneralDataReception } from "@/api/dataIntegration";
+import * as _ from "lodash";
+import tree from "../hooks/useTree";
+import icons from "../hooks/useIcons";
+const formRules = useElement().formRules;
+//当前选中数据
+const currData = ref<any>({});
+//当前要删除的数据
+const delObj = ref<any>({});
+//下级权限数据
+const childrenData = ref<any>([]);
+//默认展开
+const currentKey = ref([-1]);
+//权限树
+const data = ref<any>([]);
+//删除弹框
+const flag = ref(false);
+//新增编辑弹框
+const editDialogVisible = ref(false);
+//新增编辑类型
+const editType = ref("add");
+//删除弹框标题
+const title = ref("");
+//删除id
+const auId = ref("");
+//新增编辑弹框-标题
+const editDialogTitle = ref("新增下级权限");
+//新增编辑弹框-表单
+const ruleForm = ref<any>({
+  auth_name: "",
+  auth_type: "",
+  auth_comment: "",
+  app_name: "",
+  auth_ident: "",
+  app_id: "",
+  auth_status: "",
+  auth_id: "",
+});
+const tableOptionser = icons; //弹窗下拉
+const tableForm = ref<any>({
+  show_type: "",
+  show_icon: "",
+  show_index: "",
+  is_link: "",
+  route_info: "",
+  file_link: "",
+  is_show: "",
+  queryTemplateID: "",
+  code: "",
+});
+const optionsType = ref([
+  {
+    label: "前端权限",
+    value: 1,
+  },
+  {
+    label: "API权限",
+    value: 2,
+  },
+  {
+    label: "数据权限",
+    value: 3,
+  },
+]);
+const optionsParent: any = ref([]);
+const optionsApp: any = ref([]);
+const ruleFormRef = ref<FormInstance>();
+const rules = reactive<FormRules>({
+  auth_name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
+});
+const defaultProps = {
+  children: "children",
+  label: "auth_name",
+};
+
+const getAuthTree = async () => {
+  const res = await tree.getTree();
+  data.value = res.value;
+};
+
+onBeforeMount(() => {
+  getAuthTree();
+});
+
+//权限树点击
+const handleNodeClick = (data) => {
+  if (data.children) {
+    const newData = _.cloneDeep(data);
+    currData.value = newData;
+    childrenData.value = newData.children;
+  } else {
+    childrenData.value = [];
+  }
+};
+
+//启用禁用
+const renderChange = (data) => {
+  if (data.children) {
+    delete data.children;
+  }
+  data.event = 2;
+  changeAuth(data);
+};
+
+// 重置表单
+const resetFormData = (data) => {
+  ruleForm.value.app_id = data.app_id;
+  ruleForm.value.app_name = data.app_name;
+  ruleForm.value.auth_comment = data.auth_comment;
+  ruleForm.value.auth_id = data.auth_id;
+  ruleForm.value.auth_ident = data.auth_ident;
+  ruleForm.value.auth_name = data.auth_name;
+  ruleForm.value.auth_status = data.auth_status;
+  ruleForm.value.auth_type = data.auth_type;
+  ruleForm.value.up_auth_id = data.up_auth_id;
+  tableForm.value.show_type = data.show_type;
+  tableForm.value.show_icon = data.show_icon;
+  tableForm.value.show_index = data.show_index;
+  tableForm.value.code = data.code;
+  tableForm.value.is_link = data.is_link;
+  tableForm.value.is_show = data.is_show;
+  tableForm.value.route_info = data.route_info;
+  tableForm.value.file_link = data.file_link;
+  tableForm.value.queryTemplateID = data.queryTemplateID;
+};
+
+//修改
+const renderEdit = (data) => {
+  optionsApp.value = [];
+  optionsParent.value = [];
+  editDialogVisible.value = true;
+  editDialogTitle.value = "编辑下级权限";
+  editType.value = "edit";
+  resetFormData(data);
+  optionsApp.value.push({
+    label: data.app_name,
+    value: data.app_id,
+  });
+  optionsParent.value.push({
+    label: currData.value.auth_name,
+    value: data.auth_id,
+  });
+};
+const delRest = () => {
+  flag.value = false;
+};
+//删除弹框
+const onNodeClick = (data) => {
+  flag.value = true;
+  title.value = data.auth_name;
+  auId.value = data.auth_id;
+  delObj.value = data;
+};
+
+//删除
+const remove = () => {
+  delObj.value.event = 3;
+  changeAuth(delObj.value, "del");
+};
+
+//判断对象是否为空
+const isEmptyObj = (obj: object) => Object.keys(obj).length === 0;
+
+//新增
+const addAuth = () => {
+  if (isEmptyObj(currData.value)) {
+    ElMessage.error("请选择权限后再操作");
+    return false;
+  }
+  resetFormData({});
+  optionsApp.value = [];
+  optionsParent.value = [];
+  editDialogVisible.value = true;
+  editDialogTitle.value = "新增下级权限";
+  editType.value = "add";
+  optionsApp.value.push({
+    label: currData.value.app_name,
+    value: currData.value.app_id,
+  });
+  optionsParent.value.push({
+    label: currData.value.auth_name,
+    value: currData.value.auth_id,
+  });
+};
+
+//增删改
+const changeAuth = async (obj?, type?) => {
+  const { code, message } = await GeneralDataReception({
+    serviceId: SERVICE_ID.authScId,
+    dataContent: JSON.stringify(obj),
+  });
+  if (code == 0) {
+    ElMessage.success(message);
+    getAuthTree();
+  } else {
+    ElMessage.error(message);
+  }
+  if (type == "form") {
+    // ruleForm.value = {};
+    editDialogVisible.value = false;
+  } else if (type == "del") {
+    flag.value = false;
+  }
+};
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (editType.value == "add") {
+        ruleForm.value.app_id = ruleForm.value.app_name;
+        ruleForm.value.app_name = currData.value.app_name;
+        ruleForm.value.auth_status = 1;
+        ruleForm.value.event = 1;
+        if (ruleForm.value.auth_id) {
+          ruleForm.value.up_auth_id = ruleForm.value.auth_id;
+          delete ruleForm.value.auth_id;
+        }
+        const obj = Object.assign(ruleForm.value, tableForm.value);
+        changeAuth(obj, "form");
+      } else {
+        ruleForm.value.event = 2;
+        const obj = Object.assign(ruleForm.value, tableForm.value);
+        changeAuth(obj, "form");
+      }
+      editDialogVisible.value = false;
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  editDialogVisible.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.permission {
+  &-head {
+    line-height: 35px;
+    font-size: 14px;
+    margin-bottom: 30px;
+    .icon {
+      width: 14px;
+      height: 14px;
+      background: #58c274;
+      border-radius: 2px;
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 10px;
+      position: relative;
+      top: -2px;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .status2 {
+      margin-left: 28px;
+      .icon {
+        background: #2d67e3;
+      }
+    }
+    .status0 {
+      margin-right: 28px;
+      .icon {
+        background: #d8b53b;
+      }
+    }
+  }
+  &-content {
+    height: calc(100% - 65px);
+    &-tree {
+      width: 504px;
+      height: 100%;
+      margin-right: 24px;
+      .contentTree {
+        margin-top: 30px;
+      }
+    }
+    &-card {
+      height: 100%;
+      flex: 1;
+    }
+  }
+  .account-left-content-teams {
+    position: relative;
+    margin-top: 24px;
+    .info-close {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      background: #000000;
+      border-radius: 50%;
+      top: -12px;
+      right: -12px;
+      z-index: 5;
+      cursor: pointer;
+      .icon {
+        color: #fff;
+        font-weight: 600;
+        width: 12px;
+        height: 12px;
+      }
+    }
+    .list {
+      background-color: #f5f7fa;
+      .info {
+        line-height: normal;
+        margin-bottom: 37px;
+        .name {
+          font-size: 16px;
+          font-weight: bold;
+          max-width: 120px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .cap {
+          width: 16px;
+          height: 16px;
+          display: inline-block;
+          background-repeat: no-repeat;
+          background-size: 100%;
+          transition: all 0.3s;
+          margin-left: 16px;
+          &:first-child {
+            margin-right: 0;
+          }
+        }
+        .cap-plus {
+          background-image: url("@/assets/status/ic_plus.png");
+          &:hover {
+            background-image: url("@/assets/status/ic_plus_hovar.png");
+          }
+        }
+        .cap-edit {
+          background-image: url("@/assets/status/ic_edit_default.png");
+          &:hover {
+            background-image: url("@/assets/status/ic_edit_hovar.png");
+          }
+        }
+        .cap-sub {
+          background-image: url("@/assets/status/ic_permissions_add_default.png");
+          &:hover {
+            background-image: url("@/assets/status/ic_permissions_add_hoavr.png");
+          }
+        }
+        .cap-job {
+          background-image: url("@/assets/status/ic_jobs.png");
+          &:hover {
+            background-image: url("@/assets/status/ic_jobs_hovar.png");
+          }
+        }
+        .cap-member {
+          background-image: url("@/assets/status/ic_member.png");
+          &:hover {
+            background-image: url("@/assets/status/ic_member_hovar.png");
+          }
+        }
+      }
+    }
+    .team {
+      background: #fff;
+      border-radius: 4px;
+      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      .bg {
+        height: 4px;
+        background: #6f81bc;
+      }
+      .status0 {
+        background: #d8b53b;
+      }
+      .status1 {
+        background: #58c274;
+      }
+      .status2 {
+        background: #2d67e3;
+      }
+    }
+    .list {
+      padding: 23px 24px;
+      position: relative;
+      min-width: 240px;
+      min-height: 118px;
+      .info {
+        margin-bottom: 20px;
+        .info-avoutr {
+          display: flex;
+          .avoutr {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: #303133;
+            img {
+              max-width: 100%;
+            }
+          }
+          .msg {
+            margin-left: 20px;
+            p {
+              margin: 0;
+              padding: 0;
+              height: 20px;
+              line-height: 20px;
+            }
+            .name {
+              font-weight: bold;
+              color: #303133;
+              font-size: 18px;
+              margin-bottom: 8px;
+            }
+            .group {
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #303133;
+            }
+          }
+        }
+        .icon {
+          font-size: 16px;
+          cursor: pointer;
+        }
+      }
+      .time,
+      .ip {
+        height: 16px;
+        line-height: 16px;
+        font-size: 16px;
+        .glr {
+          color: #909399;
+        }
+      }
+      .ip {
+        margin-top: 23px;
+        margin-bottom: 38px;
+      }
+      .details {
+        height: 24px;
+        line-height: 24px;
+        font-size: 14px;
+        .success {
+          color: #2d67e3;
+        }
+        .error {
+          color: #909399;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/userManagement/type.d.ts

@@ -0,0 +1 @@
+export type IdType = string | number

vite.config.ts

@@ -41,19 +41,21 @@ export default ({ command, mode }: any) => {
       //fix "path" module issue
       'process.platform': null,
       'process.version': null,
-      GLOBAL_STRING: JSON.stringify('i am global var from vite.config.js define'),
+      GLOBAL_STRING: JSON.stringify(
+        'i am global var from vite.config.js define'
+      ),
       GLOBAL_VAR: {
-        test: 'i am global var from vite.config.js define'
-      }
+        test: 'i am global var from vite.config.js define',
+      },
     },
     clearScreen: false,
     server: {
       hmr: { overlay: false }, // 禁用或配置 HMR 连接 设置 server.hmr.overlay 为 false 可以禁用服务器错误遮罩层
-      port: 5003, // 类型： number 指定服务器端口;
+      port: 6003, // 类型： number 指定服务器端口;
       open: false, // 类型： boolean | string在服务器启动时自动在浏览器中打开应用程序；
       cors: true, // 类型： boolean | CorsOptions 为开发服务器配置 CORS。默认启用并允许任何源
       host: true,
-      https: false //whether open https 开启https首次运行比较慢 且有个输入密码过程
+      https: false, //whether open https 开启https首次运行比较慢 且有个输入密码过程
       //proxy look for https://vitejs.cn/config/#server-proxy
       // proxy: {
       //   '/api': {
@@ -66,7 +68,7 @@ export default ({ command, mode }: any) => {
     preview: {
       port: 5008,
       host: true,
-      strictPort: true
+      strictPort: true,
     },
     plugins: [
       vue({ reactivityTransform: true }),
@@ -75,7 +77,7 @@ export default ({ command, mode }: any) => {
       // }),
       vueJsx(),
       UnoCSS({
-        presets: [presetUno(), presetAttributify(), presetIcons()]
+        presets: [presetUno(), presetAttributify(), presetIcons()],
       }),
 
       DefineOptions(),
@@ -87,9 +89,12 @@ export default ({ command, mode }: any) => {
       // }),
       viteSvgIcons({
         // config svg dir that can config multi
-        iconDirs: [path.resolve(process.cwd(), 'src/icons/common'), path.resolve(process.cwd(), 'src/icons/nav-bar')],
+        iconDirs: [
+          path.resolve(process.cwd(), 'src/icons/common'),
+          path.resolve(process.cwd(), 'src/icons/nav-bar'),
+        ],
         // appoint svg icon using mode
-        symbolId: 'icon-[dir]-[name]'
+        symbolId: 'icon-[dir]-[name]',
       }),
       //https://github.com/anncwb/vite-plugin-mock/blob/HEAD/README.zh_CN.md
       viteMockServe({
@@ -101,7 +106,7 @@ export default ({ command, mode }: any) => {
           import { setupProdMockServer } from './mockProdServer';
           setupProdMockServer();
         `,
-        logger: true
+        logger: true,
       }),
       // VueSetupExtend(),using  DefineOptions instant of it
       //https://github.com/antfu/unplugin-auto-import/blob/HEAD/src/types.ts
@@ -114,7 +119,7 @@ export default ({ command, mode }: any) => {
           // import icons
           // https://github.com/antfu/unplugin-icons
           // IconsResolver(),
-        ]
+        ],
       }),
       AutoImport({
         // resolvers: [ElementPlusResolver()],
@@ -126,15 +131,15 @@ export default ({ command, mode }: any) => {
             '@/hooks/global/useCommon': ['useCommon'],
             '@/hooks/global/useElement': ['useElement'],
             '@/hooks/global/useVueRouter': ['useVueRouter'],
-            '@/utils/axiosReq': ['axiosReq']
-          }
+            '@/utils/axiosReq': ['axiosReq'],
+          },
         ],
         eslintrc: {
           enabled: true, // Default `false`
           filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
-          globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
+          globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
         },
-        dts: true //auto generation auto-imports.d.ts file
+        dts: true, //auto generation auto-imports.d.ts file
       }),
       // auto config of index.html title
       createHtmlPlugin({
@@ -142,10 +147,10 @@ export default ({ command, mode }: any) => {
           // Inject data into ejs template
           data: {
             title: setting.title,
-            injectScript: `<script src="./demo.js"></script>`
-          }
-        }
-      })
+            injectScript: `<script src="./demo.js"></script>`,
+          },
+        },
+      }),
     ],
     // logLevel: 'error',
     build: {
@@ -160,8 +165,8 @@ export default ({ command, mode }: any) => {
         compress: {
           drop_console: false,
           pure_funcs: ['console.log', 'console.info'],
-          drop_debugger: true
-        }
+          drop_debugger: true,
+        },
       },
       //build assets Separate
       assetsDir: 'static/assets',
@@ -169,15 +174,15 @@ export default ({ command, mode }: any) => {
         output: {
           chunkFileNames: 'static/js/[name]-[hash].js',
           entryFileNames: 'static/js/[name]-[hash].js',
-          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
-        }
-      }
+          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
+        },
+      },
     },
     resolve: {
       alias: {
         '~/': `${pathSrc}/`,
-        '@/': `${pathSrc}/`
-      }
+        '@/': `${pathSrc}/`,
+      },
       //why remove it , look for https://github.com/vitejs/vite/issues/6026
       // extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.mjs']
     },
@@ -207,7 +212,7 @@ export default ({ command, mode }: any) => {
     optimizeDeps: {
       //include: [...optimizeDependencies,...optimizeElementPlus] //on-demand element-plus use this
       // include: [...optimizeDependencies]
-      include: ['moment-mini']
-    }
+      include: ['moment-mini'],
+    },
   }
 }