feat: 更新权限选择样式；删除 Table Column Key

src/views/account/Management.jsx

@@ -10,8 +10,6 @@ import SearchForm from '@/components/SearchForm'
 
 const { Title } = Typography
 
-const { SHOW_PARENT } = TreeSelect
-
 const permissionData = [
   {
     title: '机票管理',
@@ -77,47 +75,46 @@ function Management() {
     {
       title: t('account:username'),
       dataIndex: 'username',
-      key: 'account:username',
+      render: accountRender
     },
     {
       title: t('account:realname'),
       dataIndex: 'realname',
-      key: 'account:realname',
     },
     {
       title: t('account:email'),
       dataIndex: 'email',
-      key: 'account:email'
     },
     {
       title: t('account:role'),
       dataIndex: 'role',
-      key: 'account:role'
     },
     {
       title: t('account:lastLogin'),
       dataIndex: 'lastLogin',
-      key: 'account:lastLogin'
     },
     {
       title: t('account:action'),
-      key: 'account:action',
       dataIndex: 'account:action',
       render: actionRender
     },
   ]
 
+  function accountRender(text) {
+    return (
+      <Button type='link' onClick={() => console.info('account:action.assignRole')}>{text}</Button>
+    )
+  }
+
   function actionRender() {
     return (
-      <Space size='middle'>
-        <Button type='link' onClick={() => console.info('account:action.disable')}>{t('account:action.disable')}</Button>
-        <Button type='link' onClick={() => console.info('account:action.resetPassword')}>{t('account:action.resetPassword')}</Button>
-        <Button type='link' onClick={() => console.info('account:action.assignRole')}>{t('account:action.assignRole')}</Button>
+      <Space key='actionRenderSpace' size='middle'>
+        <Button type='link' key='disable' onClick={() => console.info('account:action.disable')}>{t('account:action.disable')}</Button>
+        <Button type='link' key='resetPassword' onClick={() => console.info('account:action.resetPassword')}>{t('account:action.resetPassword')}</Button>
       </Space>
     )
   }
 
-
 	const onPermissionChange = (newValue) => {
     console.log('onChange ', newValue);
     setPermissionValue(newValue);
@@ -128,6 +125,7 @@ function Management() {
   const [dataLoading, setDataLoading] = useState(false)
   const [accountList, setaccountList] = useState([
     {
+      key: 1,
       username: 'bjyiran',
       realname: '怡小芳',
       email: 'xiaofang@yiran.com',
@@ -135,6 +133,7 @@ function Management() {
       lastLogin: '2024-06-12 13:53'
     },
     {
+      key: 2,
       username: 'int-robin',
       realname: 'Robin',
       email: 'robin@int.com',
@@ -142,6 +141,7 @@ function Management() {
       lastLogin: '2024-06-12 13:53'
     },
     {
+      key: 3,
       username: 'betty-wu',
       realname: '吴雪',
       email: 'betty@hainatravel.com',
@@ -149,6 +149,7 @@ function Management() {
       lastLogin: '2024-06-12 13:53'
     },
     {
+      key: 4,
       username: 'lancy',
       realname: '吴金倩',
       email: 'lancy@hainatravel.com',
@@ -156,6 +157,7 @@ function Management() {
       lastLogin: '2024-06-12 13:53'
     },
     {
+      key: 5,
       username: 'LYJ',
       realname: '廖一军',
       email: 'lyj@hainatravel.com',
@@ -167,7 +169,7 @@ function Management() {
   const formValuesToSub = useFormStore((state) => state.formValuesToSub)
 
   const [form] = Form.useForm()
-  const [fetchAllGuideList, fetchReservationList, reservationList, reservationPage, cityList, selectReservation, getCityListByReservationId] =
+  const [fetchReservationList] =
     useReservationStore((state) =>
       [state.fetchAllGuideList, state.fetchReservationList, state.reservationList, state.reservationPage, state.cityList, state.selectReservation, state.getCityListByReservationId])
 
@@ -221,11 +223,11 @@ function Management() {
         <Form.Item><Title level={2}>{t('account:management.newAccount')}</Title></Form.Item>
         <Form.Item
           label={t('account:management.username')}
-          name='currentPassword'
+          name='username'
           rules={[
             {
               required: true,
-              message: t('account:Validation.CurrentPassword'),
+              message: t('account:Validation.username'),
             },
           ]}
         >
@@ -233,11 +235,11 @@ function Management() {
         </Form.Item>
         <Form.Item
           label={t('account:management.realname')}
-          name='newPassword'
+          name='realname'
           rules={[
             {
               required: true,
-              message: t('account:Validation.NewPassword'),
+              message: t('account:Validation.realname'),
             },
           ]}
         >
@@ -245,11 +247,11 @@ function Management() {
         </Form.Item>
         <Form.Item
           label={t('account:management.email')}
-          name='reenterPassword'
+          name='email'
           rules={[
             {
               required: true,
-              message: t('account:Validation.ReenterPassword'),
+              message: t('account:Validation.email'),
             },
           ]}
         >
@@ -287,11 +289,11 @@ function Management() {
         <Form.Item><Title level={2}>{t('account:management.newRole')}</Title></Form.Item>
         <Form.Item
           label={t('account:management.roleName')}
-          name='currentPassword'
+          name='roleName'
           rules={[
             {
               required: true,
-              message: t('account:Validation.CurrentPassword'),
+              message: t('account:Validation.roleName'),
             },
           ]}
         >
@@ -299,14 +301,19 @@ function Management() {
         </Form.Item>
         <Form.Item label={t('account:management.permission')}>
         <TreeSelect treeData={permissionData} value={permissionValue}
+        dropdownStyle={{
+          maxHeight: 500,
+          overflow: 'auto',
+        }}
+        placement='bottomLeft'
         showSearch
         allowClear
         multiple
         treeDefaultExpandAll
         treeLine={true}
         onChange={onPermissionChange}
-    // treeCheckable={true}
-    showCheckedStrategy={SHOW_PARENT}
+    treeCheckable={true}
+    showCheckedStrategy={TreeSelect.SHOW_CHILD}
     placeholder={'Please select'}
     style={{
       width: '100%',
@@ -322,7 +329,7 @@ function Management() {
           //   }
           // }
           fieldsConfig={{
-            shows: ['referenceNo', 'dates'],
+            shows: ['username', 'referenceNo', 'dates'],
             fieldProps: {
               dates: { label: t('group:ArrivalDate') },
             },

src/views/reservation/Newest.jsx

@@ -16,7 +16,6 @@ function Newest() {
     {
       title: t('group:RefNo'),
       dataIndex: 'referenceNumber',
-      key: 'Reference number',
       render: (text, record) => {
         const after3Dayjs = dayjs().add(3, 'day');
         const lastDayjs = dayjs().subtract(1, 'day');
@@ -31,28 +30,23 @@ function Newest() {
     {
       title: t('group:ArrivalDate'),
       dataIndex: 'arrivalDate',
-      key: 'Arrival date',
 			render: (text, record) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')),
     },
     {
       title: t('group:Pax'),
-      key: 'Pax',
       dataIndex: 'pax'
     },
     {
       title: t('group:Status'),
-      key: 'Status',
       dataIndex: 'status'
     },
     {
       title: t('group:ResSendingDate'),
-      key: 'Reservation date',
       dataIndex: 'reservationDate',
 			render: (text, record) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')),
     },
     {
       title: t('group:Guide'),
-      key: 'Guide',
       dataIndex: 'guide',
       render: guideRender
     },
@@ -82,7 +76,7 @@ function Newest() {
         style={{
           width: 280,
         }}
-        bordered={false}
+        variant='borderless'
         allowClear
         placeholder='Select a guide'
         optionFilterProp='children'