启用正式接口

.env.development

@@ -5,7 +5,7 @@ VITE_PUBLIC_PATH = '/'
 VITE_APP_USE_MOCK = false
 
 # proxy
-VITE_PROXY = [["/api-dev","http://127.0.0.1:8002/api"]]
+VITE_PROXY = [["/api-dev","http://192.168.11.11:9070/api"]]
 
 # base api
 VITE_APP_GLOB_BASE_API = '/api-dev'

.env.localhost

@@ -2,7 +2,7 @@
 VITE_PUBLIC_PATH = '/'
 
 # 是否启用MOCK
-VITE_APP_USE_MOCK = true
+VITE_APP_USE_MOCK = false
 
 # proxy
 VITE_PROXY = [["/api-local","http://127.0.0.1:8002/api"],["/api-mock","http://127.0.0.1:8003"]]

mock/system/index.js

@@ -174,12 +174,14 @@ export default [
     timeout: 1000,
     method: 'get',
     response: config => {
-      // const { page = 1, limit = 10 } = config.query
-      // const mockList = deptList.filter(item => {
-      // return true
-      // })
-      // const List = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
-      return deptList
+      const { page = 1, limit = 10 } = config.query
+      const data = {
+        list: deptList,
+        page: Number(page),
+        limit: Number(limit),
+        total: 5
+      }
+      return resultSuccess(data)
     }
   }
 ]

package-lock.json

@@ -11,6 +11,7 @@
         "@vicons/antd": "^0.10.0",
         "@vicons/ionicons5": "^0.10.0",
         "axios": "^0.26.1",
+        "dayjs": "^1.11.2",
         "mockjs": "^1.1.0",
         "pinia": "^2.0.13",
         "vue": "^3.2.16",
@@ -3533,6 +3534,11 @@
         "date-fns": ">=2.0.0"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
+      "integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -14042,6 +14048,11 @@
       "dev": true,
       "requires": {}
     },
+    "dayjs": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
+      "integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.json

@@ -12,7 +12,7 @@
     "@vicons/antd": "^0.10.0",
     "@vicons/ionicons5": "^0.10.0",
     "axios": "^0.26.1",
-    "dayjs": "^1.11.0",
+    "dayjs": "^1.11.2",
     "mockjs": "^1.1.0",
     "pinia": "^2.0.13",
     "vue": "^3.2.16",

src/api/auth/index.js

@@ -4,13 +4,13 @@ export const login = (data) => {
   return request({
     url: '/auth/login',
     method: 'post',
-    data,
+    data
   })
 }
 
 export const refreshToken = () => {
   return request({
     url: '/auth/refreshToken',
-    method: 'post',
+    method: 'post'
   })
 }

src/api/login/index.js

@@ -1,5 +1,10 @@
-import { mockAxios as request } from '@/utils/http'
+import { defAxios as request } from '@/utils/http'
 
+/**
+ * 登录接口
+ * @param {Object} 用户名以及密码
+ * @returns 返回token信息
+ */
 export function userLogin(data = {}) {
   return request({
     url: '/login/login',
@@ -7,9 +12,25 @@ export function userLogin(data = {}) {
     data
   })
 }
+
+/**
+ * 获取验证码
+ * @returns 验证码图片
+ */
 export function userCaptcha() {
   return request({
     url: '/login/captcha',
     method: 'get'
   })
 }
+
+/**
+ * 退出登录
+ * @returns
+ */
+export function loginOut() {
+  return request({
+    url: '/login/logout',
+    method: 'GET'
+  })
+}

src/api/post/index.js

@@ -1,39 +0,0 @@
-import { defAxios as request } from '@/utils/http'
-
-export function getPosts(data = {}) {
-  return request({
-    url: '/posts',
-    method: 'get',
-    data,
-  })
-}
-
-export function getPostById({ id }) {
-  return request({
-    url: `/post/${id}`,
-    method: 'get',
-  })
-}
-
-export function savePost(id, data = {}) {
-  if (id) {
-    return request({
-      url: `/post/${id}`,
-      method: 'put',
-      data,
-    })
-  }
-
-  return request({
-    url: '/post',
-    method: 'post',
-    data,
-  })
-}
-
-export function deletePost(id) {
-  return request({
-    url: `/post/${id}`,
-    method: 'delete',
-  })
-}

src/api/system/dept/index.js

@@ -1,4 +1,4 @@
-import { mockAxios as request } from '@/utils/http'
+import { defAxios as request } from '@/utils/http'
 /**
  * 获取部门分页数据接口
  * @returns 部门分页

src/api/system/index.js

@@ -1,4 +1,4 @@
-import { mockAxios as request } from '@/utils/http'
+import { defAxios as request } from '@/utils/http'
 
 export function getMenu() {
   return request({

src/api/system/menu/index.js

@@ -0,0 +1,59 @@
+import { defAxios as request } from '@/utils/http'
+/**
+ * 获取菜单分页数据接口
+ * @returns 菜单分页数据
+ */
+export function getMenuList(params) {
+  return request({
+    url: '/menu/index',
+    method: 'GET',
+    params
+  })
+}
+
+/**
+ * 获取菜单全部数据接口
+ * @returns 菜单全部数据
+ */
+export function getMenu(params) {
+  return request({
+    url: '/menu/getMenuAll',
+    method: 'GET',
+    params
+  })
+}
+
+/**
+ * 添加菜单
+ * params
+ */
+export function addMenu(data) {
+  return request({
+    url: '/menu/add',
+    method: 'POST',
+    data
+  })
+}
+
+/**
+ * 编辑菜单
+ * params
+ */
+export function editMenu(data) {
+  return request({
+    url: '/menu/edit',
+    method: 'PUT',
+    data
+  })
+}
+
+/**
+ * 删除菜单
+ * params
+ */
+export function deleteMenu(id) {
+  return request({
+    url: `/menu/delete${[id]}`,
+    method: 'DELETE'
+  })
+}

src/api/system/role/index.js

@@ -0,0 +1,95 @@
+import { defAxios as request } from '@/utils/http'
+/**
+ * 获取角色分页数据接口
+ * @returns 角色分页数据
+ */
+export function getRoleList(params) {
+  return request({
+    url: '/role/index',
+    method: 'GET',
+    params
+  })
+}
+
+/**
+ * 获取角色全部数据接口
+ * @returns 角色全部数据
+ */
+export function getRoleAll(params) {
+  return request({
+    url: '/role/getRoleList',
+    method: 'GET',
+    params
+  })
+}
+
+/**
+ * 添加角色
+ * params
+ */
+export function addRole(data) {
+  return request({
+    url: '/role/add',
+    method: 'POST',
+    data
+  })
+}
+
+/**
+ * 编辑角色
+ * params
+ */
+export function editRole(data) {
+  return request({
+    url: '/role/edit',
+    method: 'PUT',
+    data
+  })
+}
+
+/**
+ * 设置角色状态
+ * params
+ */
+export function setRoleStatus(data) {
+  return request({
+    url: '/role/status',
+    method: 'PUT',
+    data
+  })
+}
+
+/**
+ * 删除角色
+ * params
+ */
+export function deleteRole(id) {
+  return request({
+    url: `/role/delete${[id]}`,
+    method: 'DELETE'
+  })
+}
+
+/**
+ * 获取角色权限数据
+ * @param 角色id
+ * @returns 角色全部权限数据
+ */
+export function getRolePermission(id) {
+  return request({
+    url: `/role/getPermissionList/${id}`,
+    method: 'GET'
+  })
+}
+
+/**
+ * 保存角色权限信息
+ * params
+ */
+export function savePermission(data) {
+  return request({
+    url: '/role/savePermission',
+    method: 'POST',
+    data
+  })
+}

src/api/system/user/index.js

@@ -1,4 +1,4 @@
-import { mockAxios as request } from '@/utils/http'
+import { defAxios as request } from '@/utils/http'
 /**
  * 获取用户分页数据接口
  * @returns 用户分页
@@ -57,3 +57,15 @@ export function setUserStatus(data) {
     data
   })
 }
+
+/**
+ * 重置用户密码
+ * params
+ */
+export function resetPassword(data) {
+  return request({
+    url: '/user/resetPwd',
+    method: 'PUT',
+    data
+  })
+}

src/api/user/index.js

@@ -4,7 +4,7 @@ export function getUsers(data = {}) {
   return request({
     url: '/users',
     method: 'get',
-    data,
+    data
   })
 }
 
@@ -12,12 +12,12 @@ export function getUser(id) {
   if (id) {
     return request({
       url: `/user/${id}`,
-      method: 'get',
+      method: 'get'
     })
   }
   return request({
     url: '/user',
-    method: 'get',
+    method: 'get'
   })
 }
 
@@ -26,13 +26,13 @@ export function saveUser(data = {}, id) {
     return request({
       url: '/user',
       method: 'put',
-      data,
+      data
     })
   }
 
   return request({
     url: `/user/${id}`,
     method: 'put',
-    data,
+    data
   })
 }

src/components/DataTable/tools/toTree.js

@@ -0,0 +1,69 @@
+/**
+ * pid形式数据转children形式
+ * @param data 需要转换的数组
+ * @param idKey id字段名
+ * @param pidKey pid字段名
+ * @param childKey 生成的children字段名
+ * @param pid 顶级的pid
+ * @param addPIds 是否添加所有父级id的字段
+ * @param parentsKey 所有父级id的字段名称，默认parentIds
+ * @param parentIds 所有父级id
+ * @returns {[]}
+ */
+export function toTreeData(data, idKey, pidKey, childKey, pid, addPIds, parentsKey, parentIds) {
+  if (typeof data === 'object' && !Array.isArray(data)) {
+    idKey = data.idKey
+    pidKey = data.pidKey
+    childKey = data.childKey
+    pid = data.pid
+    addPIds = data.addPIds
+    parentsKey = data.parentsKey
+    parentIds = data.parentIds
+    data = data.data
+  }
+  if (!childKey) {
+    childKey = 'children'
+  }
+  if (typeof pid === 'undefined') {
+    pid = []
+    data.forEach((d) => {
+      let flag = true
+      for (let i = 0; i < data.length; i++) {
+        if (d[pidKey] === data[i][idKey]) {
+          flag = false
+          break
+        }
+      }
+      if (flag) {
+        pid.push(d[pidKey])
+      }
+    })
+  }
+  const result = []
+  data.forEach((d) => {
+    if (d[idKey] === d[pidKey]) {
+      console.error('data error: ', d)
+      return
+    }
+    if (Array.isArray(pid) ? (pid.indexOf(d[pidKey]) !== -1) : (d[pidKey] === pid)) {
+      const children = toTreeData({
+        data: data,
+        idKey: idKey,
+        pidKey: pidKey,
+        childKey: childKey,
+        pid: d[idKey],
+        addPIds: addPIds,
+        parentsKey: parentsKey,
+        parentIds: (parentIds || []).concat([d[idKey]])
+      })
+      if (children.length > 0) {
+        d[childKey] = children
+      }
+      if (addPIds) {
+        d[parentsKey || 'parentIds'] = parentIds || []
+      }
+      result.push(d)
+    }
+  })
+  return result
+}

src/components/DataTable/tools/useDataSource.js

@@ -1,5 +1,6 @@
 import { ref, unref, computed, onMounted } from 'vue'
 import { isBoolean } from '@/utils/is'
+import { toTreeData } from './toTree'
 
 export function useDataSource(propsRef, { getPaginationInfo, setPagination, setLoading, tableData }, emit) {
   const dataSourceRef = ref([])
@@ -42,6 +43,7 @@ export function useDataSource(propsRef, { getPaginationInfo, setPagination, setL
           fetch(opt)
         }
       }
+      // 处理数据结构
       const resultInfo = res[listField] ? res[listField] : []
       dataSourceRef.value = dataType === 'tree' ? dealTree(resultInfo) : resultInfo
       setPagination({
@@ -67,8 +69,12 @@ export function useDataSource(propsRef, { getPaginationInfo, setPagination, setL
     }
   }
 
-  function dealTree() {
-    const tree = []
+  /**
+   * 递归遍历数据处理成树形结构
+   * @returns 返回树形结构数据
+   */
+  function dealTree(info) {
+    const tree = toTreeData(info.data, 'id', 'pid', 'children')
     return tree
   }
 

src/utils/http/interceptors.js

@@ -1,5 +1,5 @@
 import { router } from '@/router'
-import { getToken } from '@/utils/token'
+import { getToken, removeToken } from '@/utils/token'
 import { isWithoutToken } from './help'
 
 export function setupInterceptor(service) {
@@ -21,7 +21,7 @@ export function setupInterceptor(service) {
          * * jwt token
          * ! 认证方案: Bearer
          */
-        config.headers.Authorization = 'Bearer ' + token
+        config.headers.Authorization = token
 
         return config
       }
@@ -43,40 +43,40 @@ export function setupInterceptor(service) {
     (response) => response?.data,
     (error) => {
       const { code, message } = error.response?.data
-      return Promise.reject({ code, message })
+      // return Promise.reject({ code, message })
 
       /**
        * TODO 此处可以根据后端返回的错误码自定义框架层面的错误处理
        */
-      // switch (code) {
-      //   case 401:
-      //     // 未登录（可能是token过期或者无效了）
-      //     console.error(message)
-      //     removeToken()
       // const { currentRoute } = router
-      //     router.replace({
-      //       path: '/login',
+      switch (code) {
+        case 401:
+          // 未登录（可能是token过期或者无效了）
+          console.error(message)
+          removeToken()
+          router.replace({
+            path: '/login'
             // query: { ...currentRoute.query, redirect: currentRoute.path }
-      //     })
-      //     break
-      //   case 403:
-      //     // 没有权限
-      //     console.error(message)
-      //     break
-      //   case 404:
-      //     // 资源不存在
-      //     console.error(message)
-      //     break
-      //   default:
-      //     break
-      // }
-      // // 已知错误resolve，在业务代码中作提醒，未知错误reject，捕获错误统一提示接口异常（9000以上为业务类型错误，需要跟后端确定好）
-      // if ([401, 403, 404].includes(code) || code >= 9000) {
-      //   return Promise.resolve({ code, message })
-      // } else {
-      //   console.error('【err】' + error)
-      //   return Promise.reject({ message: '接口异常，请稍后重试！' })
-      // }
+          })
+          break
+        case 403:
+          // 没有权限
+          console.error(message)
+          break
+        case 404:
+          // 资源不存在
+          console.error(message)
+          break
+        default:
+          break
+      }
+      // 已知错误resolve，在业务代码中作提醒，未知错误reject，捕获错误统一提示接口异常（9000以上为业务类型错误，需要跟后端确定好）
+      if ([401, 403, 404].includes(code) || code >= 9000) {
+        return Promise.resolve({ code, message })
+      } else {
+        console.error('【err】' + error)
+        return Promise.reject({ message: '接口异常，请稍后重试！' })
+      }
     }
   )
 }

src/views/system/dept/index.vue

@@ -1,16 +1,22 @@
 <template>
   <div>
-    <data-table :columns="data.columns" :data="data.data" :pagination="data.pagination" size="large" scroll-x="1200">
+    <n-card>
+      <data-table
+        :columns="data.columns"
+        :data="data.data"
+        :pagination="data.pagination"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        data-type="tree"
+        size="large"
+        scroll-x="1200"
+      >
         <template #tableTitle>
-        <n-button type="primary">
-          新建
-        </n-button>
-        <n-button type="primary">
-          删除
-        </n-button>
+          <n-button type="primary"> 新建 </n-button>
+          <n-button type="primary"> 删除 </n-button>
         </template>
       </data-table>
-
+    </n-card>
   </div>
 </template>
 
@@ -18,9 +24,8 @@
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
 import { getDeptList } from '@/api/system/index.js'
-import { h, onMounted } from 'vue'
+import { h, onMounted, unref } from 'vue'
 import { reactive } from 'vue'
-import { toTreeData } from '@/utils/handleData.js'
 export default {
   name: 'MenuPage',
   components: { dataTable },
@@ -52,7 +57,6 @@ export default {
           title: '排序',
           key: 'sort',
           align: 'center'
-
         },
         {
           title: '备注',
@@ -124,21 +128,27 @@ export default {
         limit: 10
       }
       const res = await getDeptList(params)
-      const dataList = toTreeData(res.data.map(d => {
-        d.index = d.id
-        return d
-      }), 'id', 'pid')
-      data.data = dataList
+      data.data = res.data
+    }
+    const params = reactive({
+      name: 'xiaoMa'
+    })
+
+    const loadDataTable = async(res) => {
+      const _params = {
+        ...unref(params),
+        ...res
+      }
+      return await getDeptList(_params)
     }
 
     onMounted(() => {
       fetchList()
     })
 
-    return { data }
+    return { data, loadDataTable }
   }
 }
-
 </script>
 <style scoped lang='scss'>
 .n-button + .n-button {

src/views/system/role/index.vue

@@ -37,7 +37,8 @@ export default {
         {
           title: '用户编号',
           key: 'code',
-          align: 'center'
+          align: 'center',
+          minWidth: 80
         },
         {
           title: '头像',
@@ -51,52 +52,56 @@ export default {
                 src: row.avatar
               }
             })
-          }
+          },
+          minWidth: 80
         },
         {
           title: '用户账号',
           key: 'username',
-          align: 'center'
+          align: 'center',
+          minWidth: 80
         },
         {
           title: '用户姓名',
           key: 'realname',
-          align: 'center'
+          align: 'center',
+          minWidth: 80
         },
         {
           title: '用户类型',
           key: 'type',
           align: 'center',
-          width: 100
+          minWidth: 80
         },
         {
           title: '角色',
           key: 'roles',
-          align: 'center'
-
+          align: 'center',
+          minWidth: 100
         },
         {
           title: '状态',
           key: 'status',
           align: 'center',
-          width: 100
+          minWidth: 80
         },
         {
           title: '部门',
           key: 'deptName',
-          align: 'center'
+          align: 'center',
+          minWidth: 120
         },
         {
           title: '创建时间',
           key: 'createTime',
           align: 'center',
-          width: 160
+          minWidth: 160
         },
         {
           title: '更新时间',
           key: 'updateTime',
           align: 'center',
-          width: 160
+          minWidth: 160
         },
         {
           title: '操作',

src/views/system/user/index.vue

@@ -1,16 +1,21 @@
 <template>
   <div>
-    <data-table :columns="data.columns" :data="data.data" :pagination="data.pagination" size="large" scroll-x="1200">
+    <n-card>
+      <data-table
+        :columns="data.columns"
+        :data="data.data"
+        :pagination="data.pagination"
+        :row-key="(row) => row.id"
+        :request="loadDataTable"
+        size="large"
+        scroll-x="1200"
+      >
         <template #tableTitle>
-        <n-button type="primary">
-          新建
-        </n-button>
-        <n-button type="primary">
-          删除
-        </n-button>
+          <n-button type="primary"> 新建 </n-button>
+          <n-button type="primary"> 删除 </n-button>
         </template>
       </data-table>
-
+    </n-card>
   </div>
 </template>
 
@@ -18,8 +23,8 @@
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
 import TableImage from '@/components/DataTable/tools/Image.vue'
-import { getUserList } from '@/api/system/index.js'
-import { h, onMounted } from 'vue'
+import { getUserList } from '@/api/system/user/index.js'
+import { h, onMounted, unref } from 'vue'
 import { reactive } from 'vue'
 export default {
   name: 'MenuPage',
@@ -66,7 +71,6 @@ export default {
           title: '角色',
           key: 'roles',
           align: 'center'
-
         },
         {
           title: '状态',
@@ -146,14 +150,24 @@ export default {
       data.data = res.data
     }
 
+    const params = reactive({
+      name: 'xiaoMa'
+    })
+
+    const loadDataTable = async(res) => {
+      const _params = {
+        ...unref(params),
+        ...res
+      }
+      return await getUserList(_params)
+    }
     onMounted(() => {
       fetchList()
     })
 
-    return { data }
+    return { data, loadDataTable }
   }
 }
-
 </script>
 <style scoped lang='scss'>
 .n-button + .n-button {