feat: add dept management page

mock/demo/system.ts

@@ -1,7 +1,7 @@
 import { MockMethod } from 'vite-plugin-mock';
-import { resultPageSuccess } from '../_util';
+import { resultPageSuccess, resultSuccess } from '../_util';
 
-const list = (() => {
+const accountList = (() => {
   const result: any[] = [];
   for (let index = 0; index < 20; index++) {
     result.push({
@@ -10,8 +10,40 @@ const list = (() => {
       email: '@email',
       nickname: '@cname()',
       role: '@first',
-      updateTime: '@datetime',
-      remark: '@cword(0,20)',
+      createTime: '@datetime',
+      remark: '@cword(10,20)',
+      'status|1': ['0', '1'],
+    });
+  }
+  return result;
+})();
+
+const deptList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 3; index++) {
+    result.push({
+      id: `${index}`,
+      deptName: ['华东分部', '华南分部', '西北分部'][index],
+      orderNo: index + 1,
+      createTime: '@datetime',
+      remark: '@cword(10,20)',
+      'status|1': ['0', '0', '1'],
+      children: (() => {
+        const children: any[] = [];
+        for (let j = 0; j < 4; j++) {
+          children.push({
+            id: `${index}-${j}`,
+            deptName: ['研发部', '市场部', '商务部', '财务部'][j],
+            orderNo: j + 1,
+            createTime: '@datetime',
+            remark: '@cword(10,20)',
+            'status|1': ['0', '1'],
+            parentDept: `${index}`,
+            children: undefined,
+          });
+        }
+        return children;
+      })(),
     });
   }
   return result;
@@ -24,7 +56,15 @@ export default [
     method: 'get',
     response: ({ query }) => {
       const { page = 1, pageSize = 20 } = query;
-      return resultPageSuccess(page, pageSize, list);
+      return resultPageSuccess(page, pageSize, accountList);
+    },
+  },
+  {
+    url: '/api/system/getDeptList',
+    timeout: 100,
+    method: 'get',
+    response: () => {
+      return resultSuccess(deptList);
     },
   },
 ] as MockMethod[];

package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.6",
-    "@vueuse/core": "^4.3.0",
+    "@vueuse/core": "^4.3.1",
     "@zxcvbn-ts/core": "^0.2.0",
     "ant-design-vue": "2.0.1",
     "apexcharts": "^3.25.0",
@@ -80,10 +80,10 @@
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.6.0",
-    "esno": "^0.4.4",
+    "esno": "^0.4.5",
     "fs-extra": "^9.1.0",
     "http-server": "^0.12.3",
-    "husky": "^5.1.1",
+    "husky": "^5.1.2",
     "is-ci": "^3.0.0",
     "less": "^4.1.1",
     "lint-staged": "^10.5.4",
@@ -103,7 +103,7 @@
     "vite-plugin-imagemin": "^0.2.8",
     "vite-plugin-mock": "^2.1.5",
     "vite-plugin-purge-icons": "^0.7.0",
-    "vite-plugin-pwa": "^0.5.5",
+    "vite-plugin-pwa": "^0.5.6",
     "vite-plugin-style-import": "^0.7.5",
     "vite-plugin-theme": "^0.4.8",
     "vite-plugin-windicss": "0.6.2",

src/api/demo/model/systemModel.ts

@@ -1,21 +1,37 @@
 import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
 
-export type Params = BasicPageParams & {
+export type AccountParams = BasicPageParams & {
   account?: string;
   nickname?: string;
 };
 
-export interface DemoListItem {
+export type DeptParams = {
+  deptName?: string;
+  status?: string;
+};
+
+export interface AccountListItem {
   id: string;
   account: string;
   email: string;
   nickname: string;
   role: number;
-  updateTime: string;
+  createTime: string;
   remark: string;
+  status: number;
+}
+
+export interface DeptListItem {
+  id: string;
+  orderNo: string;
+  createTime: string;
+  remark: string;
+  status: number;
 }
 
 /**
  * @description: Request list return value
  */
-export type DemoListGetResultModel = BasicFetchResult<DemoListItem>;
+export type AccountListGetResultModel = BasicFetchResult<AccountListItem>;
+
+export type DeptListGetResultModel = BasicFetchResult<DeptListItem>;

src/api/demo/system.ts

@@ -1,10 +1,19 @@
-import { Params, DemoListGetResultModel } from './model/systemModel';
+import {
+  AccountParams,
+  DeptListItem,
+  DeptListGetResultModel,
+  AccountListGetResultModel,
+} from './model/systemModel';
 import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
   // The address does not exist
   AccountList = '/system/getAccountList',
+  DeptList = '/system/getDeptList',
 }
 
-export const getAccountList = (params: Params) =>
-  defHttp.get<DemoListGetResultModel>({ url: Api.AccountList, params });
+export const getAccountList = (params: AccountParams) =>
+  defHttp.get<AccountListGetResultModel>({ url: Api.AccountList, params });
+
+export const getDeptList = (params?: DeptListItem) =>
+  defHttp.get<DeptListGetResultModel>({ url: Api.DeptList, params });

src/components/Basic/src/BasicArrow.vue

@@ -4,7 +4,7 @@
 -->
 <template>
   <span :class="getClass">
-    <RightOutlined />
+    <Icon icon="ion:chevron-forward" :style="$attrs.iconStyle" />
   </span>
 </template>
 <script lang="ts">
@@ -15,9 +15,11 @@
 
   import { propTypes } from '/@/utils/propTypes';
 
+  import { Icon } from '/@/components/Icon';
+
   export default defineComponent({
     name: 'BasicArrow',
-    components: { RightOutlined },
+    components: { RightOutlined, Icon },
     props: {
       // Expand contract, expand by default
       expand: propTypes.bool,

src/components/Form/src/componentMap.ts

@@ -21,6 +21,7 @@ import {
 import RadioButtonGroup from './components/RadioButtonGroup.vue';
 import ApiSelect from './components/ApiSelect.vue';
 import { BasicUpload } from '/@/components/Upload';
+import { StrengthMeter } from '/@/components/StrengthMeter';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -51,6 +52,7 @@ componentMap.set('MonthPicker', DatePicker.MonthPicker);
 componentMap.set('RangePicker', DatePicker.RangePicker);
 componentMap.set('WeekPicker', DatePicker.WeekPicker);
 componentMap.set('TimePicker', TimePicker);
+componentMap.set('StrengthMeter', StrengthMeter);
 
 componentMap.set('Upload', BasicUpload);
 

src/components/Form/src/types/index.ts

@@ -91,7 +91,6 @@ export type ComponentType =
   | 'Select'
   | 'ApiSelect'
   | 'SelectOptGroup'
-  | 'SelectOption'
   | 'TreeSelect'
   | 'Transfer'
   | 'RadioButtonGroup'

src/components/Table/src/BasicTable.vue

@@ -65,6 +65,7 @@
   import { useDesign } from '/@/hooks/web/useDesign';
 
   import { basicProps } from './props';
+  import expandIcon from './components/ExpandIcon';
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
   import './style/index.less';
@@ -193,6 +194,7 @@
           size: 'middle',
           ...attrs,
           customRow,
+          expandIcon: expandIcon(),
           ...unref(getProps),
           ...unref(getHeaderProps),
           scroll: unref(getScrollRef),

src/components/Table/src/components/ExpandIcon.tsx

@@ -0,0 +1,19 @@
+import { BasicArrow } from '/@/components/Basic';
+
+export default () => {
+  return (props: Recordable) => {
+    if (!props.expandable) {
+      return null;
+    }
+    return (
+      <BasicArrow
+        class="mr-1"
+        iconStyle="margin-top: -2px;"
+        onClick={(e: Event) => {
+          props.onExpand(props.record, e);
+        }}
+        expand={props.expanded}
+      />
+    );
+  };
+};

src/components/Table/src/style/index.less

@@ -8,7 +8,7 @@
     padding: 16px;
 
     .ant-form {
-      padding: 20px 20px 4px 12px;
+      padding: 16px 16px 6px 12px;
       margin-bottom: 18px;
       background: #fff;
       border-radius: 4px;

src/locales/lang/en/routes/demo/system.ts

@@ -2,4 +2,8 @@ export default {
   moduleName: 'System management',
 
   account: 'Account management',
+
+  password: 'Change password',
+
+  dept: 'Department management',
 };

src/locales/lang/zh_CN/routes/demo/system.ts

@@ -2,4 +2,8 @@ export default {
   moduleName: '系统管理',
 
   account: '账号管理',
+
+  password: '修改密码',
+
+  dept: '部门管理',
 };

src/router/menus/modules/demo/system.ts

@@ -11,6 +11,16 @@ const menu: MenuModule = {
         path: 'account',
         name: t('routes.demo.system.account'),
       },
+
+      {
+        path: 'dept',
+        name: t('routes.demo.system.dept'),
+      },
+
+      {
+        path: 'changePassword',
+        name: t('routes.demo.system.password'),
+      },
     ],
   },
 };

src/router/routes/modules/demo/system.ts

@@ -15,12 +15,31 @@ const system: AppRouteModule = {
   children: [
     {
       path: 'account',
-      name: 'Account',
+      name: 'AccountManagement',
       meta: {
         title: t('routes.demo.system.account'),
+        ignoreKeepAlive: true,
       },
       component: () => import('/@/views/demo/system/account/index.vue'),
     },
+    {
+      path: 'dept',
+      name: 'DeptManagement',
+      meta: {
+        title: t('routes.demo.system.dept'),
+        ignoreKeepAlive: true,
+      },
+      component: () => import('/@/views/demo/system/dept/index.vue'),
+    },
+    {
+      path: 'changePassword',
+      name: 'ChangePassword',
+      meta: {
+        title: t('routes.demo.system.password'),
+        ignoreKeepAlive: true,
+      },
+      component: () => import('/@/views/demo/system/password/index.vue'),
+    },
   ],
 };
 

src/utils/http/axios/Axios.ts

@@ -83,9 +83,15 @@ export class VAxios {
     this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
       // If cancel repeat request is turned on, then cancel repeat request is prohibited
       const {
-        headers: { ignoreCancelToken = false },
+        headers: { ignoreCancelToken },
       } = config;
-      !ignoreCancelToken && axiosCanceler.addPending(config);
+
+      const ignoreCancel =
+        ignoreCancelToken !== undefined
+          ? ignoreCancelToken
+          : this.options.requestOptions?.ignoreCancelToken;
+
+      !ignoreCancel && axiosCanceler.addPending(config);
       if (requestInterceptors && isFunction(requestInterceptors)) {
         config = requestInterceptors(config);
       }

src/utils/http/axios/index.ts

@@ -202,6 +202,8 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
           apiUrl: globSetting.apiUrl,
           //  是否加入时间戳
           joinTime: true,
+          // 忽略重复请求
+          ignoreCancelToken: true,
         },
       },
       opt || {}

src/utils/http/axios/types.ts

@@ -17,6 +17,7 @@ export interface RequestOptions {
   errorMessageMode?: ErrorMessageMode;
   // Whether to add a timestamp
   joinTime?: boolean;
+  ignoreCancelToken?: boolean;
 }
 
 export interface CreateAxiosOptions extends AxiosRequestConfig {

src/views/demo/system/account/AccountModal.vue

@@ -24,6 +24,7 @@
       });
 
       const [registerModal, { setModalProps }] = useModalInner((data) => {
+        setModalProps({ confirmLoading: false });
         isUpdate.value = !!data?.isUpdate;
 
         if (unref(isUpdate)) {
@@ -42,7 +43,7 @@
           // TODO custom api
           console.log(values);
         } finally {
-          setModalProps({ confirmLoading: true });
+          setModalProps({ confirmLoading: false });
         }
       }