feat: 账号角色管理增加中文；统一 userId；

public/locales/zh/account.json

@@ -8,5 +8,24 @@
     "CurrentPassword": "请输入密码。",
     "NewPassword": "请输入新密码。",
     "ReenterPassword": "请重复输入密码。"
-  }
+  },
+  "createdOn": "创建时间",
+  "action": "操作",
+  "action.edit": "编辑",
+  "action.disable": "禁用",
+  "action.resetPassword": "重置密码",
+
+  "accountList": "管理账号",
+  "newAccount": "新增账号",
+  "detail": "详细信息",
+  "username": "用户名",
+  "realname": "姓名",
+  "travelAgencyName": "供应商名称",
+  "email": "邮箱地址",
+  "lastLogin": "最后登陆时间",
+
+  "roleList": "管理角色",
+  "newRole": "新增角色",
+  "roleName": "角色名称",
+  "permission": "权限"
 }

src/stores/Auth.js

@@ -85,7 +85,7 @@ const useAuthStore = create(obervseLifecycle((set, get) => ({
     const { startTokenInterval, loadUserPermission } = get()
     const { setStorage } = usingStorage()
 
-    const { token: loginToken, WU_ID: userId  } = await fetchLoginToken(usr, pwd)
+    const { token: loginToken  } = await fetchLoginToken(usr, pwd)
     const userDetail = await fetchUserDetail(loginToken)
     await loadUserPermission(userId)
 
@@ -95,7 +95,7 @@ const useAuthStore = create(obervseLifecycle((set, get) => ({
     }))
 
     setStorage(KEY_LOGIN_TOKEN, loginToken)
-    setStorage(KEY_USER_ID, userId)
+    setStorage(KEY_USER_ID, userDetail.LMI_SN)
     setStorage(KEY_TRAVEL_AGENCY_ID, userDetail.LMI_VEI_SN)
     appendRequestParams('token', loginToken)
     // loadPageSpy(`${json.Result.VName}-${json.Result.LoginName}`)

src/views/App.jsx

@@ -160,8 +160,9 @@ function App() {
 										items: [...[
                       { label: <Link to='/account/change-password'>{t('ChangePassword')}</Link>, key: '0' },
                       { label: <Link to='/account/profile'>{t('Profile')}</Link>, key: '1' },
-                      isPermitted(PERM_ACCOUNT_MANAGEMENT) ? { label: <Link to='/account/management'>{t('account:management.tile')}</Link>, key: '3' } : null,
-                      isPermitted(PERM_ROLE_NEW) ? { label: <Link to='/account/role-list'>{t('account:management.roleList')}</Link>, key: '4' } : null,
+                      { type: 'divider' },
+                      isPermitted(PERM_ACCOUNT_MANAGEMENT) ? { label: <Link to='/account/management'>{t('account:accountList')}</Link>, key: '3' } : null,
+                      isPermitted(PERM_ROLE_NEW) ? { label: <Link to='/account/role-list'>{t('account:roleList')}</Link>, key: '4' } : null,
                       { type: 'divider' },
                       { label: <Link to='/logout'>{t('Logout')}</Link>, key: '99' },
                     ]

src/views/account/Management.jsx

@@ -1,14 +1,12 @@
-import { useState, useEffect } from 'react'
-import { Row, Col, Space, Button, Table, Select, TreeSelect, Typography, Modal, App, Form, Input } from 'antd'
+import SearchForm from '@/components/SearchForm'
+import useAccountStore, { fetchRoleList, fetchTravelAgencyByName } from '@/stores/Account'
+import useFormStore from '@/stores/Form'
+import { isEmpty } from '@/utils/commons'
 import { ExclamationCircleFilled } from '@ant-design/icons'
-import { useTranslation } from 'react-i18next'
-import { fetchTravelAgencyByName } from '@/stores/Account'
+import { App, Button, Col, Form, Input, Modal, Row, Select, Space, Table, Typography } from 'antd'
 import dayjs from 'dayjs'
-import { isEmpty } from '@/utils/commons'
-import useAccountStore from '@/stores/Account'
-import useFormStore from '@/stores/Form'
-import { fetchRoleList } from '@/stores/Account'
-import SearchForm from '@/components/SearchForm'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 const { Title } = Typography
 
@@ -26,7 +24,7 @@ function Management() {
       dataIndex: 'realname',
     },
     {
-      title: t('account:travelAgency'),
+      title: t('account:travelAgencyName'),
       dataIndex: 'travelAgencyName',
     },
     {
@@ -34,7 +32,7 @@ function Management() {
       dataIndex: 'email',
     },
     {
-      title: t('account:role'),
+      title: t('account:roleName'),
       dataIndex: 'role'
     },
     {
@@ -43,7 +41,7 @@ function Management() {
       render: (text) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD HH:mm:ss'))
     },
     {
-      title: t('account:action'),
+      title: t('account:action.edit'),
       dataIndex: 'account:action',
       render: actionRender
     },
@@ -78,7 +76,7 @@ function Management() {
   const formValues = useFormStore(state => state.formValues)
   const { notification, modal } = App.useApp()
 
-  useEffect (() => {
+  useEffect(() => {
     fetchRoleList()
       .then((roleList) => {
         setRoleAllList(roleList.map(r => {
@@ -189,7 +187,6 @@ function Management() {
               duration: 60,
             })
           })
-        console.log('ResetPassword')
       },
       onCancel() {
       },
@@ -204,32 +201,32 @@ function Management() {
           autoFocus: true,
           htmlType: 'submit',
         }}
-        title={t('account:management.newAccount')}
+        title={t('account:detail')}
         open={isAccountModalOpen} onOk={() => setAccountModalOpen(false)} onCancel={() => setAccountModalOpen(false)}
         destroyOnClose={true}
         clearOnDestroy={true}
         modalRender={(dom) => (
           <Form
-          name='AccountForm'
-          form={accountForm}
-          layout='vertical'
-          size='large'
-          style={{
-            maxWidth: 600,
-          }}
-          onFinish={onAccountFinish}
-          onFinishFailed={onAccountFailed}
-          autoComplete='off'
-        >
+            name='AccountForm'
+            form={accountForm}
+            layout='vertical'
+            size='large'
+            style={{
+              maxWidth: 600,
+            }}
+            onFinish={onAccountFinish}
+            onFinishFailed={onAccountFailed}
+            autoComplete='off'
+          >
             {dom}
           </Form>
         )}
       >
-      <Form.Item name='userId' className='hidden' ><Input /></Form.Item>
-      <Form.Item name='lmi_sn' className='hidden' ><Input /></Form.Item>
-      <Form.Item name='lmi2_sn' className='hidden' ><Input /></Form.Item>
+        <Form.Item name='userId' className='hidden' ><Input /></Form.Item>
+        <Form.Item name='lmi_sn' className='hidden' ><Input /></Form.Item>
+        <Form.Item name='lmi2_sn' className='hidden' ><Input /></Form.Item>
         <Form.Item
-          label={t('account:management.username')}
+          label={t('account:username')}
           name='username'
           rules={[
             {
@@ -241,7 +238,7 @@ function Management() {
           <Input />
         </Form.Item>
         <Form.Item
-          label={t('account:management.realname')}
+          label={t('account:realname')}
           name='realname'
           rules={[
             {
@@ -253,7 +250,7 @@ function Management() {
           <Input />
         </Form.Item>
         <Form.Item
-          label={t('account:management.email')}
+          label={t('account:email')}
           name='email'
           rules={[
             {
@@ -265,7 +262,7 @@ function Management() {
           <Input />
         </Form.Item>
         <Form.Item
-          label={t('account:management.travelAgency')}
+          label={t('account:travelAgencyName')}
           name='travelAgencyId'
           rules={[
             {
@@ -287,7 +284,7 @@ function Management() {
           </Select>
         </Form.Item>
         <Form.Item
-          label={t('account:management.role')}
+          label={t('account:roleName')}
           name='roleId'
           rules={[
             {
@@ -296,17 +293,22 @@ function Management() {
             },
           ]}
         >
-          <Select options={roleAllList}>
+          <Select
+            options={roleAllList}
+            filterOption={false}
+            notFoundContent={null}
+          >
           </Select>
         </Form.Item>
       </Modal>
       <Space direction='vertical' style={{ width: '100%' }}>
-        <Title level={3}>{t('account:management.tile')}</Title>
+        <Title level={3}>{t('account:accountList')}</Title>
         <SearchForm
           fieldsConfig={{
-            shows: ['username', 'realname', 'dates'],
+            shows: ['username', 'realname'],
             fieldProps: {
-              dates: { label: t('group:ArrivalDate') },
+              username: { label: t('account:username') },
+              realname: { label: t('account:realname') },
             },
           }}
           onSubmit={() => {
@@ -316,7 +318,7 @@ function Management() {
         <Row>
           <Col span={24}>
             <Space>
-              <Button onClick={() => setAccountModalOpen(true)}>{t('account:management.newAccount')}</Button>
+              <Button onClick={() => setAccountModalOpen(true)}>{t('account:newAccount')}</Button>
             </Space>
           </Col>
         </Row>

src/views/account/RoleList.jsx

@@ -1,12 +1,14 @@
-import { useState, useEffect } from 'react'
-import { Row, Col, Space, Button, Table, TreeSelect, Typography, Modal, App, Form, Input } from 'antd'
-import { useTranslation } from 'react-i18next'
-import useAccountStore from '@/stores/Account'
-import { fetchRoleList, fetchPermissionList, fetchPermissionListByRoleId } from '@/stores/Account'
-import dayjs from 'dayjs'
-import { isEmpty } from '@/utils/commons'
 import RequireAuth from '@/components/RequireAuth'
 import { PERM_ROLE_NEW } from '@/config'
+import useAccountStore, { fetchPermissionList, fetchPermissionListByRoleId, fetchRoleList } from '@/stores/Account'
+import { isEmpty } from '@/utils/commons'
+import {
+  SyncOutlined,
+} from '@ant-design/icons'
+import { App, Button, Col, Form, Input, Modal, Row, Space, Table, Tag, TreeSelect, Typography } from 'antd'
+import dayjs from 'dayjs'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 const { Title } = Typography
 
@@ -15,7 +17,7 @@ function RoleList() {
 
   const roleListColumns = [
     {
-      title: t('account:rolename'),
+      title: t('account:roleName'),
       dataIndex: 'role_name',
     },
     {
@@ -30,8 +32,10 @@ function RoleList() {
     },
   ]
 
-  function actionRender(text, role) {
-    if (role.role_id > 1) {
+  function actionRender(_, role) {
+    if (role.role_id == 1) {
+      return (<Tag icon={<SyncOutlined spin />} color='warning'>不能修改</Tag>)
+    } else {
       return (
         <Button type='link' key='edit' onClick={() => onRoleSeleted(role)}>{t('account:action.edit')}</Button>
       )
@@ -49,7 +53,7 @@ function RoleList() {
     }, {})
   }
 
-  useEffect (() => {
+  useEffect(() => {
     setDataLoading(true)
     fetchRoleList()
       .then(r => {
@@ -110,7 +114,7 @@ function RoleList() {
   const { notification, modal } = App.useApp()
 
   const onRoleSeleted = (role) => {
-    fetchPermissionListByRoleId({role_id: role.role_id})
+    fetchPermissionListByRoleId({ role_id: role.role_id })
       .then(result => {
         role.res_array = result.map(r => r.res_id)
         roleForm.setFieldsValue(role)
@@ -154,71 +158,71 @@ function RoleList() {
           autoFocus: true,
           htmlType: 'submit',
         }}
-        title={t('account:management.newRole')}
+        title={t('account:detail')}
         open={isRoleModalOpen} onOk={() => setRoleModalOpen(false)} onCancel={() => setRoleModalOpen(false)}
         destroyOnClose={true}
         clearOnDestroy={true}
         modalRender={(dom) => (
           <Form
-          name='RoleForm'
-          form={roleForm}
-          layout='vertical'
-          size='large'
-          style={{
-            maxWidth: 600,
-          }}
-          onFinish={onRoleFinish}
-          onFinishFailed={onRoleFailed}
-          autoComplete='off'
-        >
+            name='RoleForm'
+            form={roleForm}
+            layout='vertical'
+            size='large'
+            style={{
+              maxWidth: 600,
+            }}
+            onFinish={onRoleFinish}
+            onFinishFailed={onRoleFailed}
+            autoComplete='off'
+          >
             {dom}
           </Form>
         )}
       >
-      <Form.Item name='role_id' className='hidden' ><Input /></Form.Item>
-          <Form.Item
-            label={t('account:management.roleName')}
-            name='role_name'
-            rules={[
-              {
-                required: true,
-                message: t('account:Validation.roleName'),
-              },
-            ]}
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label={t('account:management.permission')}
-            name='res_array'
-          >
-            <TreeSelect treeData={permissionTreeData} value={permissionValue}
-              dropdownStyle={{
-                maxHeight: 600,
-                overflow: 'auto',
-              }}
-              placement='bottomLeft'
-              showSearch
-              allowClear
-              multiple
-              treeDefaultExpandAll
-              treeLine={true}
-              onChange={onPermissionChange}
-              treeCheckable={true}
-              showCheckedStrategy={TreeSelect.SHOW_CHILD}
-              placeholder={'Please select'}
-              style={{
-                width: '100%',
-              }} />
-          </Form.Item>
+        <Form.Item name='role_id' className='hidden' ><Input /></Form.Item>
+        <Form.Item
+          label={t('account:roleName')}
+          name='role_name'
+          rules={[
+            {
+              required: true,
+              message: t('account:Validation.roleName'),
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t('account:permission')}
+          name='res_array'
+        >
+          <TreeSelect treeData={permissionTreeData} value={permissionValue}
+            dropdownStyle={{
+              maxHeight: 600,
+              overflow: 'auto',
+            }}
+            placement='bottomLeft'
+            showSearch
+            allowClear
+            multiple
+            treeDefaultExpandAll
+            treeLine={true}
+            onChange={onPermissionChange}
+            treeCheckable={true}
+            showCheckedStrategy={TreeSelect.SHOW_CHILD}
+            placeholder={'Please select'}
+            style={{
+              width: '100%',
+            }} />
+        </Form.Item>
       </Modal>
       <Space direction='vertical' style={{ width: '100%' }}>
-        <Title level={3}>{t('account:management.roleList')}</Title>
+        <Title level={3}>{t('account:roleList')}</Title>
         <Row>
           <Col span={24}>
             <Space>
               <RequireAuth subject={PERM_ROLE_NEW}>
-                <Button onClick={() => onNewRole()}>{t('account:management.newRole')}</Button>
+                <Button onClick={() => onNewRole()}>{t('account:newRole')}</Button>
               </RequireAuth>
             </Space>
           </Col>
@@ -230,6 +234,7 @@ function RoleList() {
               loading={dataLoading}
               rowKey='role_id'
               pagination={{
+                pageSize: 20,
                 showQuickJumper: true,
                 showLessItems: true,
                 showSizeChanger: true,