1

src/components.d.ts

@@ -7,7 +7,6 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
@@ -22,9 +21,7 @@ declare module 'vue' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@@ -35,7 +32,6 @@ declare module 'vue' {
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     MapSelector: typeof import('./components/MapSelector.vue')['default']
     Pagination: typeof import('./components/Pagination/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/router/index.js

@@ -181,9 +181,9 @@ router.beforeEach(async (to, from, next) => {
   const userStore = useUserStore()
 
   // 如果没有 token，并且不在白名单中，则重定向到登录
-  // if (!userStore.token && !whiteList.includes(to.path)) {
+  if (!userStore.token && !whiteList.includes(to.path)) {
-  //   return next('/login')
+    return next('/login')
-  // }
+  }
 
   // 如果有 token 但还没有添加动态路由
   // if (userStore.token && !hasAddRoutes) {

src/stores/user.js

@@ -30,9 +30,9 @@ export const useUserStore = defineStore('user', () => {
     routerList.value = []
 
     // 重置路由
-    import('@/router').then(({ resetRouter }) => {
+    // import('@/router').then(({ resetRouter }) => {
-      resetRouter()
+    //   resetRouter()
-    })
+    // })
   }
   return { token, setToken, setUserInfo, userInfo, logout }
 })

src/views/AuthManage/HandleDialog.vue

@@ -6,7 +6,8 @@ const props = defineProps({
     required: true,
   },
   row: [Object],
-  categoryList: {
+  current_parent_id: [String, Number],
+  originData: {
     type: Array,
     default: [],
   },
@@ -57,6 +58,8 @@ if (!isAdd.value) {
   formField.value = {
     ...props.row,
   }
+} else {
+  formField.value.parent_id = props.current_parent_id
 }
 </script>
 
@@ -78,6 +81,16 @@ if (!isAdd.value) {
       v-loading="loading"
       label-width="100"
     >
+      <el-form-item prop="parent_id" label="上级目录">
+        <el-select placeholder="请输入" v-model="formField.parent_id" disabled="">
+          <el-option
+            v-for="item in originData"
+            :value="item.id"
+            :label="item.name"
+            :key="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
       <el-form-item prop="name" label="名称">
         <el-input placeholder="请输入" v-model="formField.name" />
       </el-form-item>

src/views/AuthManage/index.vue

@@ -14,12 +14,12 @@
           placeholder="请输入"
           style="width: 220px"
           v-model="queryParams.name"
-          @keyup.enter="handleQuery"
+          @keyup.enter="getList"
         />
       </el-form-item>
 
       <el-form-item label-width="100px">
-        <el-button icon="Search" type="primary" @click="handleQuery"> 搜索 </el-button>
+        <el-button icon="Search" type="primary" @click="getList"> 搜索 </el-button>
         <el-button icon="RefreshRight" @click="resetQuery"> 重置 </el-button>
       </el-form-item>
     </el-form>
@@ -33,19 +33,23 @@
         :data="tableData"
         v-loading="loading"
         header-row-class-name="table-header"
+        row-key="id"
       >
-        <el-table-column align="center" label="名称" prop="name" show-overflow-tooltip />
+        <el-table-column label="名称" prop="name" show-overflow-tooltip />
         <el-table-column align="center" label="字段" prop="code" show-overflow-tooltip />
         <el-table-column align="center" label="描述" prop="description" show-overflow-tooltip />
-        <el-table-column align="center" label="类型" prop="type">
+        <el-table-column align="center" label="类型" prop="type" width="100">
           <template #default="{ row }">
             <span v-if="row.type == 1">目录</span>
             <span v-if="row.type == 2">菜单</span>
             <span v-if="row.type == 3">按钮</span>
           </template>
         </el-table-column>
-        <el-table-column align="center" label="操作" width="120">
+        <el-table-column align="center" label="操作" width="180">
           <template #default="{ row }">
+            <el-button v-if="row.status != 1" link type="primary" @click="addChildren(row)">
+              添加子项
+            </el-button>
             <el-button v-if="row.status != 1" link type="primary" @click="edit(row)">
               编辑
             </el-button>
@@ -58,13 +62,13 @@
       </el-table>
     </div>
 
-    <pagination
+    <!-- <pagination
       v-show="total > 0"
       :total="total"
       v-model:limit="queryParams.limit"
       v-model:page="queryParams.page"
       @pagination="getList"
-    />
+    /> -->
 
     <HandleDialog
       v-if="isShowDialog"
@@ -73,12 +77,15 @@
       :categoryList="categoryList"
       @closed="isShowDialog = false"
       @on-success="getList"
+      :originData="originData"
+      :current_parent_id="current_parent_id"
     />
   </div>
 </template>
 
 <script setup>
 import { useTableRPC } from '@/utils/hook'
+import RPC from '@/utils/rpc'
 import HandleDialog from './HandleDialog.vue'
 
 const rowType = ref('')
@@ -86,6 +93,13 @@ const currentRow = ref(null)
 const add = () => {
   isShowDialog.value = true
   currentRow.value = null
+  current_parent_id.value = 0
+  rowType.value = 'add'
+}
+const addChildren = (row) => {
+  isShowDialog.value = true
+  currentRow.value = null
+  current_parent_id.value = row.id
   rowType.value = 'add'
 }
 const edit = (row) => {
@@ -94,32 +108,109 @@ const edit = (row) => {
   currentRow.value = row
 }
 
-const {
+const current_parent_id = ref(0)
-  loading,
+
-  tableData,
+// const {
-  tableRef,
+//   loading,
-  searchFormRef,
+//   tableData,
-  total,
+//   tableRef,
-  queryParams,
+//   searchFormRef,
-  getList,
+//   total,
-  handleQuery,
+//   queryParams,
-  resetQuery,
+//   getList,
-  handleDelete,
+//   handleQuery,
-  isShowDialog,
+//   resetQuery,
-  maxHeight,
+//   handleDelete,
-  tableContainerEl,
+//   isShowDialog,
-} = useTableRPC({
+//   maxHeight,
-  queryParams: {},
+//   tableContainerEl,
-  remoteDataFn: '/permission/list',
+// } = useTableRPC({
-  deleteConfig: {
+//   queryParams: {},
-    remote: '/permission/delete',
+//   remoteDataFn: '/permission/list',
-    key: 'id',
+//   deleteConfig: {
-    message(row) {
+//     remote: '/permission/delete',
-      return `确认删除 “${row.name}”`
+//     key: 'id',
-    },
+//     message(row) {
-  },
+//       return `确认删除 “${row.name}”`
+//     },
+//   },
+// })
+const loading = ref(false)
+const tableData = ref([])
+const queryParams = ref({})
+const isShowDialog = ref(false)
+const transformParams = (params) => {
+  const _params = {
+    page: 1,
+    limit: -1,
+    orderby: params.orderby || null,
+    like: {},
+  }
+  for (const k in params) {
+    if (params[k] && k !== 'page' && k !== 'limit' && k !== 'orderby') {
+      _params.like[k] = [`%${params[k]}%`]
+    }
+  }
+  return _params
+}
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`确认删除 “${row.name}”`, '提醒', {
+    type: 'warning',
+  })
+    .then(() => {
+      RPC.post('/permission/delete', { id: row.id })
+        .then(() => {
+          getList()
+          ElMessage.success('删除成功')
+        })
+        .catch((e) => {
+          console.error(`删除失败：${e}`)
+        })
+    })
+    .catch(() => {
+      onError?.()
+    })
+}
+const resetQuery = () => {
+  queryParams.value = {}
+  getList()
+}
+function buildTree(data, rootId = 0) {
+  // 1. 建立一个 id -> 节点 的映射表，方便快速查找
+  const map = {}
+  data.forEach((item) => {
+    map[item.id] = { ...item, children: [] }
+  })
+
+  // 2. 遍历数据，组装父子关系
+  const tree = []
+  data.forEach((item) => {
+    const node = map[item.id]
+    if (item.parent_id === rootId) {
+      // 顶级节点
+      tree.push(node)
+    } else if (map[item.parent_id]) {
+      // 非顶级，挂到父节点的 children
+      map[item.parent_id].children.push(node)
+    }
   })
 
+  return tree
+}
+const originData = ref([{ id: 0, name: '无' }])
+const getList = () => {
+  loading.value = true
+  RPC.post('/permission/list', transformParams(queryParams.value))
+    .then((res) => {
+      console.log(res)
+      originData.value = [{ id: 0, name: '无' }, ...res.rows] || [{ id: 0, name: '无' }]
+      tableData.value = buildTree(res.rows || [])
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
 getList()
 </script>
 

src/views/Login/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="login">
-    <div class="container">
     <div class="titleBox">
       <div class="col"></div>
       <div class="title">
-          WELCOME
+        <!-- WELCOME -->
         <div class="text">智能电梯图纸生成后台</div>
       </div>
     </div>
+    <div class="container">
       <el-form ref="loginRef" class="login-form" :model="loginForm" :rules="loginRules">
         <el-form-item prop="username">
           <el-input
@@ -105,34 +105,35 @@ const handleLogin = () => {
 .login {
   height: 98vh;
   position: relative;
-  background: center / cover url('@/assets/images/login/login_bg.jpg') no-repeat;
+  background: center / cover url('@/assets/images/login/login_bg.png') no-repeat;
-
-  .container {
-    width: 380px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
   .titleBox {
     font-size: 32px;
     font-weight: bold;
     display: flex;
     color: #fff;
     align-items: center;
+    position: fixed;
+    top: 40px;
+    left: 30px;
 
     .col {
       width: 1px;
-        height: 86px;
+      height: 30px;
       background-color: #fff;
-        margin-right: 38px;
+      margin-right: 20px;
     }
 
     .text {
       font-size: 26px;
-        margin-top: 10px;
+      // margin-top: 10px;
     }
   }
+  .container {
+    width: 380px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 
     .login-form {
       width: 380px;