完成权限新增、编辑、分配角色权限

src/stores/Account.js

@@ -45,6 +45,20 @@ export const fetchRoleList = async () => {
   return errcode !== 0 ? {} : result
 }
 
+export const fetchPermissionList = async () => {
+
+  const { errcode, result } = await fetchJSON(
+    `${HT_HOST}/service-CooperateSOA/get_all_permission_list`)
+  return errcode !== 0 ? {} : result
+}
+
+export const fetchPermissionListByRoleId = async (params) => {
+
+  const { errcode, result } = await fetchJSON(
+    `${HT_HOST}/service-CooperateSOA/get_role_permission_list`, params)
+  return errcode !== 0 ? {} : result
+}
+
 const useAccountStore = create((set, get) => ({
 
   accountList: [],
@@ -82,7 +96,7 @@ const useAccountStore = create((set, get) => ({
     const formData = new FormData()
     formData.append('role_id', formValues.role_id)
     formData.append('role_name', formValues.role_name)
-    formData.append('res_ids', '2,3')
+    formData.append('res_ids', formValues.res_array.join(','))
 
     return postRoleForm(formData)
   },

src/views/account/Management.jsx

@@ -1,9 +1,11 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Row, Col, Space, Button, Table, Select, TreeSelect, Typography, Modal, App, Form, Input } from 'antd'
 import { ExclamationCircleFilled } from '@ant-design/icons'
 import { useTranslation } from 'react-i18next'
 import useFormStore from '@/stores/Form'
 import useAuthStore from '@/stores/Auth'
+import dayjs from 'dayjs'
+import { isEmpty } from '@/utils/commons'
 import useAccountStore from '@/stores/Account'
 import { fetchRoleList } from '@/stores/Account'
 import SearchForm from '@/components/SearchForm'
@@ -40,6 +42,7 @@ function Management() {
     {
       title: t('account:lastLogin'),
       dataIndex: 'lastLogin',
+      render: (text) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD HH:mm:ss'))
     },
     {
       title: t('account:action'),
@@ -74,16 +77,21 @@ function Management() {
 
   const { notification, modal } = App.useApp()
 
+  useEffect (() => {
+    fetchRoleList()
+      .then((roleList) => {
+        setRoleAllList(roleList.map(r => {
+          return {
+            value: r.role_id,
+            label: r.role_name,
+            disabled: r.role_id === 1
+          }
+        }))
+      })
+  }, [])
+
   const onAccountSeleted = async (account) => {
     accountForm.setFieldsValue(account)
-    const roleList = await fetchRoleList()
-    setRoleAllList(roleList.map(r => {
-      return {
-        value: r.role_id,
-        label: r.role_name,
-        disabled: r.role_id === 1
-      }
-    }))
     setAccountModalOpen(true)
   }
 

src/views/account/RoleList.jsx

@@ -1,103 +1,15 @@
 import { useState, useEffect } from 'react'
-import { Row, Col, Space, Button, Table, Select, TreeSelect, Typography, Modal, App, Form, Input } from 'antd'
+import { Row, Col, Space, Button, Table, TreeSelect, Typography, Modal, App, Form, Input } from 'antd'
-import { ExclamationCircleFilled } from '@ant-design/icons'
 import { useTranslation } from 'react-i18next'
-import useFormStore from '@/stores/Form'
-import useAuthStore from '@/stores/Auth'
 import useAccountStore from '@/stores/Account'
-import { fetchRoleList } from '@/stores/Account'
+import { fetchRoleList, fetchPermissionList, fetchPermissionListByRoleId } from '@/stores/Account'
-import SearchForm from '@/components/SearchForm'
+import dayjs from 'dayjs'
+import { isEmpty } from '@/utils/commons'
 import RequireAuth from '@/components/RequireAuth'
 import { PERM_ROLE_NEW } from '@/config'
 
 const { Title } = Typography
 
-const permissionData = [
-  {
-    title: '海外供应商',
-    value: 'oversea-0',
-    key: 'oversea-0',
-    children: [
-      {
-        title: '所有海外功能',
-        value: 'oversea-0-0',
-        key: 'oversea-0-0',
-      },
-    ],
-  },
-  {
-    title: '机票管理',
-    value: '0-0',
-    key: '0-0',
-    children: [
-      {
-        title: '录入机票价格',
-        value: '0-0-0',
-        key: '0-0-0',
-      },
-    ],
-  },
-  {
-    title: '产品管理',
-    value: '0-1',
-    key: '0-1',
-    children: [
-      {
-        title: '搜索供应商产品',
-        value: 'B-1-0',
-        key: 'B-1-0',
-      },
-      {
-        title: '录入产品价格',
-        value: '0-1-0',
-        key: '0-1-0',
-      },
-      {
-        title: '新增产品描述',
-        value: '0-1-1',
-        key: '0-1-1',
-      },
-      {
-        title: '复制供应商产品信息',
-        value: '0-1-2',
-        key: '0-1-2',
-      },
-    ],
-  },
-  {
-    title: '账号管理',
-    value: '2-1',
-    key: '2-1',
-    children: [
-      {
-        title: '搜索账号',
-        value: '2-1-01',
-        key: '2-1-01',
-      },
-      {
-        title: '新增账号',
-        value: '2-1-11',
-        key: '2-1-11',
-      },
-      {
-        title: '禁用账号',
-        value: '2-1-21',
-        key: '2-1-21',
-      },
-      {
-        title: '重置账号密码',
-        value: '2-1-31',
-        key: '2-1-31',
-      },
-      {
-        title: '新增角色',
-        value: '2-1-41',
-        key: '2-1-41',
-      },
-    ],
-  },
-]
-
 function RoleList() {
   const { t } = useTranslation()
 
@@ -109,6 +21,7 @@ function RoleList() {
     {
       title: t('account:createdOn'),
       dataIndex: 'created_on',
+      render: (text) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD HH:mm:ss'))
     },
     {
       title: t('account:action'),
@@ -126,10 +39,16 @@ function RoleList() {
   }
 
   const onPermissionChange = (newValue) => {
-    console.log('onChange ', newValue)
     setPermissionValue(newValue)
   }
 
+  function groupByParam(array, param) {
+    return array.reduce((result, item) => {
+      (result[item[param]] = result[item[param]] || []).push(item)
+      return result
+    }, {})
+  }
+
   useEffect (() => {
     setDataLoading(true)
     fetchRoleList()
@@ -139,9 +58,38 @@ function RoleList() {
       .finally(() => {
         setDataLoading(false)
       })
+
+    const permissionTree = []
+    fetchPermissionList()
+      .then(r => {
+
+        const groupPermissionData = groupByParam(r, 'res_category')
+        const categoryKeys = Object.keys(groupPermissionData)
+
+        categoryKeys.forEach((categoryName) => {
+          const permissisonList = groupPermissionData[categoryName]
+          const categoryGroup = {
+            title: categoryName,
+            value: categoryName,
+            key: categoryName,
+            children: permissisonList.map(p => {
+              return {
+                disableCheckbox: p.res_id == 1,
+                title: p.res_name,
+                value: p.res_id,
+                key: p.res_id,
+              }
+            })
+          }
+          permissionTree.push(categoryGroup)
+        })
+
+        setPermissionTreeData(permissionTree)
+      })
   }, [])
 
-  const [permissionValue, setPermissionValue] = useState(['0-0-0'])
+  const [permissionValue, setPermissionValue] = useState(['4','5'])
+  const [permissionTreeData, setPermissionTreeData] = useState(['0-0-0'])
   const [isRoleModalOpen, setRoleModalOpen] = useState(false)
   const [dataLoading, setDataLoading] = useState(false)
   const [roleAllList, setRoleAllList] = useState([])
@@ -154,7 +102,11 @@ function RoleList() {
   const { notification, modal } = App.useApp()
 
   const onRoleSeleted = (role) => {
-    roleForm.setFieldsValue(role)
+    fetchPermissionListByRoleId({role_id: role.role_id})
+      .then(result => {
+        role.res_array = result.map(r => r.res_id)
+        roleForm.setFieldsValue(role)
+      })
     setRoleModalOpen(true)
   }
 
@@ -165,10 +117,14 @@ function RoleList() {
   }
 
   const onRoleFinish = (values) => {
-    console.log(values)
     saveOrUpdateRole(values)
+      .then(() => {
+        fetchRoleList()
+          .then(r => {
+            setRoleAllList(r)
+          })
+      })
       .catch(ex => {
-        console.info(ex.message)
         notification.error({
           message: 'Notification',
           description: ex.message,
@@ -179,7 +135,6 @@ function RoleList() {
   }
 
   const onRoleFailed = (error) => {
-    console.log('Failed:', error)
     // form.resetFields()
   }
 
@@ -225,8 +180,11 @@ function RoleList() {
           >
             <Input />
           </Form.Item>
-          <Form.Item label={t('account:management.permission')}>
+          <Form.Item
-            <TreeSelect treeData={permissionData} value={permissionValue}
+            label={t('account:management.permission')}
+            name='res_array'
+          >
+            <TreeSelect treeData={permissionTreeData} value={permissionValue}
               dropdownStyle={{
                 maxHeight: 600,
                 overflow: 'auto',