feat: 后台人员管理的修改

fix: 111

fix: 1111

fix: 111

package.json

@@ -51,7 +51,6 @@
     "array-move": "^4.0.0",
     "classnames": "^2.2.6",
     "dayjs": "^1.11.3",
-    "lodash": "^4.17.11",
     "omit.js": "^2.0.2",
     "rc-menu": "^9.0.13",
     "rc-tween-one": "^3.0.6",

pnpm-lock.yaml

@@ -35,7 +35,6 @@ specifiers:
   eslint: ^8.17.0
   husky: ^8.0.0
   lint-staged: ^10.0.0
-  lodash: ^4.17.11
   omit.js: ^2.0.2
   prettier: ^2.6.1
   rc-menu: ^9.0.13
@@ -75,7 +74,6 @@ dependencies:
   array-move: 4.0.0
   classnames: 2.3.1
   dayjs: 1.11.3
-  lodash: 4.17.21
   omit.js: 2.0.2
   rc-menu: 9.6.0_ef5jwxihqo6n7gxfmzogljlgcm
   rc-tween-one: 3.0.6_ef5jwxihqo6n7gxfmzogljlgcm

src/pages/Permission/BackRole/components/ConnectModal/index.tsx

@@ -50,7 +50,7 @@ const ConnectModal = ({ dataId, onReload }) => {
         return true
       }}>
       <ProFormSelect
-        label="角色名称"
+        label="用户名称"
         name="accountIDs"
         className="w-full"
         options={menuRoles?.map(item => ({ value: item.ID, label: item.name }))}

src/pages/Permission/FrontRole/index.tsx

@@ -50,11 +50,13 @@ const Role = () => {
   const { run: tryFetchRoleListByMenu } = useRequest(fetchRoleList, {
     onSuccess: result => {
       setMenuRoles(
-        result.map(item => ({
-          key: item.ID,
-          title: item.name,
-          roleType: item.roleType
-        }))
+        result
+          .filter(item => !RoleType.SYSTEM.includes(item.roleType))
+          .map(item => ({
+            key: item.ID,
+            title: item.name,
+            roleType: item.roleType
+          }))
       )
 
       result?.length && onSelect?.(state.currentRoleID ?? result[0]?.ID, result[0]?.roleType)

src/pages/System/Account/hooks/useScripts.tsx

@@ -0,0 +1,127 @@
+import consts from '@/utils/consts'
+import { useState } from 'react'
+import { useRequest } from 'ahooks'
+import { Form, Input, message } from 'antd'
+import ProForm, { ProFormRadio, ProFormSelect, ProFormText } from '@ant-design/pro-form'
+import type { ModalAction } from '@/components/Modal'
+import {
+  addAccountBg,
+  delAccountBg,
+  fetchRoleBgList,
+  fetchRoleBgStaffListByRoleId,
+  updateAccountBg
+} from '@/services/api/permission'
+import { RoleType } from '@/pages/Permission/FrontRole/components/RoleLeftMenu'
+import { omit } from 'lodash'
+
+type iState = {
+  items: API.AccountBgParams[]
+  total: number
+}
+
+export default function useScripts(modal: ModalAction) {
+  const [state, setState] = useState<iState>({
+    items: [],
+    total: 0
+  })
+
+  const { refresh, loading } = useRequest(() => fetchRoleBgStaffListByRoleId(), {
+    onSuccess: result => {
+      setState({
+        ...state,
+        items: result?.data.items
+      })
+    }
+  })
+
+  const addOrEdit = (mode: 'add' | 'edit', accountValues?: API.AccountBgParams) => {
+    console.log(mode)
+
+    const text = mode === 'add' ? '添加人员' : '编辑人员'
+    modal.open({
+      title: text,
+      okText: '确定',
+      cancelText: '取消',
+      type: 'form',
+      initialValues: accountValues ?? { enable: true },
+      children: (
+        <ProForm submitter={false} layout="horizontal" labelCol={{ span: 5 }} isKeyPressSubmit>
+          <ProFormText hidden name="ID" />
+          <ProFormText
+            name="account"
+            disabled={mode === 'add' ? false : true}
+            label="账号"
+            rules={[{ required: true, message: '请输入' }]}
+          />
+          <ProFormText name="name" label="名称" rules={[{ required: true, message: '请输入' }]} />
+          <Form.Item
+            label="密码"
+            hidden={mode === 'add' ? false : true}
+            name="password"
+            rules={[{ required: mode === 'add' ? true : false, message: '请输入' }]}>
+            <Input.Password placeholder="请输入" />
+          </Form.Item>
+          <ProFormSelect
+            label="角色"
+            name="roleIDs"
+            className="w-full"
+            rules={[{ required: true, message: '请输入' }]}
+            request={async () => {
+              const params = await fetchRoleBgList()
+              return params.data
+                ?.filter(item => !RoleType.SYSTEM.includes(item.roleType))
+                .map(item => ({ value: item.ID, label: item.name }))
+            }}
+          />
+          <ProFormRadio.Group
+            options={[
+              { label: '启用', value: true },
+              { label: '停用', value: false }
+            ]}
+            name="enable"
+            label="状态"
+            rules={[{ required: true, message: '请选择' }]}
+          />
+        </ProForm>
+      ),
+      onOk: async (values: API.AccountBgParams) => {
+        let requestFn: Nullable<() => Promise<viod>> = null
+        if (mode === 'add') {
+          requestFn = addAccountBg
+        } else {
+          omit(values, ['account', 'password'])
+          // ['account', 'password'].forEach(function (k) {
+          //   delete values[k]
+          // })
+          requestFn = updateAccountBg
+        }
+        try {
+          await requestFn?.(values)
+          refresh()
+          modal.close()
+          message.success(text + '成功')
+        } catch (error) {}
+      }
+    })
+  }
+
+  const del = (ID: string) => {
+    modal.open({
+      title: '删除人员',
+      okText: '确定',
+      cancelText: '取消',
+      children: <div>确认删除该行数据？</div>,
+      onOk: async () => {
+        try {
+          const { code = -1 } = await delAccountBg({ ID })
+          if (code === consts.RET_CODE.SUCCESS) {
+            refresh()
+            modal.close()
+            message.success('删除成功')
+          }
+        } catch (error) {}
+      }
+    })
+  }
+  return { items: state.items, loading, addOrEdit, del }
+}

src/pages/System/Account/index.tsx

@@ -1,17 +1,9 @@
-import {
-  addAccountBg,
-  delAccountBg,
-  fetchRoleBgList,
-  fetchRoleBgStaffListByRoleId,
-  updateAccountBg
-} from '@/services/api/permission'
-import consts from '@/utils/consts'
 import { PageContainer } from '@ant-design/pro-layout'
 import ProTable from '@ant-design/pro-table'
-import { Button, Form, Input, message, Modal } from 'antd'
-import React, { useEffect, useRef, useState } from 'react'
-import { ModalForm, ProFormRadio, ProFormSelect, ProFormText } from '@ant-design/pro-form'
-import { useRequest } from '@umijs/max'
+import useModal from '@/components/Modal'
+import useScripts from './hooks/useScripts'
+import { Button } from 'antd'
+import React, { useState } from 'react'
 import classNames from 'classnames'
 export enum ModalType {
   ADD,
@@ -19,8 +11,6 @@ export enum ModalType {
 }
 
 const Account: React.FC = () => {
-  const tRef = useRef<ActionType>(null)
-  const formRef = useRef<ProFormInstance>(null)
   const [state, setState] = useState({
     params: {
       search: null
@@ -29,58 +19,13 @@ const Account: React.FC = () => {
     modalType: 'add',
     modalVisible: false
   })
-  const [menuRoles, setMenuRoles] = useState([])
-  const { run: tryFetchRoleBgListByMenu } = useRequest(fetchRoleBgList, {
-    onSuccess: result => {
-      setMenuRoles(result)
-    }
-  })
-  const { run: tryAddAccountBgRole } = useRequest(addAccountBg, {
-    manual: true,
-    onSuccess: () => {
-      message.success('添加成功')
-      tRef.current?.reload()
-    }
-  })
-
-  const { run: tryUpdateAccountBgRole } = useRequest(updateAccountBg, {
-    manual: true,
-    onSuccess: () => {
-      message.success('编辑成功')
-      tRef.current?.reload()
-    }
-  })
+  const [modal, ModalDOM] = useModal()
+  const { items, loading, addOrEdit, del } = useScripts(modal)
 
-  const { run: tryDelAccountBgRole } = useRequest(delAccountBg, {
-    manual: true,
-    onSuccess: () => {
-      message.success('删除成功')
-      tRef.current?.reload()
-    }
-  })
-
-  const handleDel = (ID: string) => {
-    Modal.confirm({
-      title: '删除',
-      content: (
-        <div>
-          <div>确认删除该行数据？</div>
-        </div>
-      ),
-      okButtonProps: {
-        danger: true
-      },
-      onOk: () => tryDelAccountBgRole({ ID })
-    })
-  }
-  useEffect(() => {
-    tryFetchRoleBgListByMenu()
-  }, [])
   const columns: ProColumnType<API.InstitutionRoleParams>[] = [
     {
       dataIndex: 'account',
       title: '账号',
-      // align: 'center',
       onHeaderCell: () => ({ style: { textAlign: 'center' } })
     },
     {
@@ -108,24 +53,12 @@ const Account: React.FC = () => {
         <div className="divide-x divide-bg-gray-400 flex flex-row justify-center">
           <span
             className="pr-2 text-primary cursor-pointer hover:text-hex-967bbd"
-            onClick={() => {
-              setTimeout(() => {
-                formRef.current?.setFieldsValue({ ...record })
-              }, 80)
-              setState({
-                ...state,
-                modalType: ModalType.UPDATE,
-                modalVisible: true,
-                ID: record.ID,
-                name: record.name,
-                enable: record.enable
-              })
-            }}>
+            onClick={() => addOrEdit('edit', record)}>
             编辑
           </span>
           <span
             className={'pl-2 text-red-500 cursor-pointer hover:text-red-600'}
-            onClick={() => handleDel(record.ID)}>
+            onClick={() => del(record.ID)}>
             删除
           </span>
         </div>
@@ -138,21 +71,11 @@ const Account: React.FC = () => {
         <div className="w-full h-full bg-white">
           <ProTable
             rowKey="ID"
-            actionRef={tRef}
-            params={state.params}
             columns={columns}
             search={false}
             scroll={{ y: document.body.clientHeight - 315 }}
-            request={async params => {
-              const { code = -1, data: { items = [], total = 0 } = {} } = await fetchRoleBgStaffListByRoleId({
-                ...params
-              })
-              return {
-                data: items,
-                success: code === consts.RET_CODE.SUCCESS,
-                total
-              }
-            }}
+            loading={loading}
+            dataSource={items}
             toolbar={{
               search: {
                 onSearch: val => setState({ ...state, params: { ...state.params, search: val } }),
@@ -161,76 +84,16 @@ const Account: React.FC = () => {
               },
               actions: [
                 <>
-                  <Button
-                    type="primary"
-                    key="add_flow_btn"
-                    onClick={() => {
-                      setState({
-                        ...state,
-                        modalType: ModalType.ADD,
-                        modalVisible: true
-                      })
-                    }}>
+                  <Button type="primary" key="add_flow_btn" onClick={() => addOrEdit('add')}>
                     添加人员
                   </Button>
                 </>
               ]
             }}
           />
-          <ModalForm
-            visible={state.modalVisible}
-            isKeyPressSubmit
-            layout="horizontal"
-            labelCol={{ span: 4 }}
-            modalProps={{
-              width: '30%'
-            }}
-            onVisibleChange={visible => {
-              setState({ ...state, modalVisible: visible })
-              setTimeout(() => {
-                if (!visible) formRef.current?.resetFields()
-              }, 80)
-            }}
-            initialValues={{ enable: true }}
-            title={`${state.modalType === ModalType.ADD ? '添加' : '编辑'}人员`}
-            formRef={formRef}
-            onFinish={async values => {
-              try {
-                if (state.modalType === ModalType.ADD) {
-                  await tryAddAccountBgRole(values)
-                } else {
-                  await tryUpdateAccountBgRole({ ...values, ID: state.ID })
-                }
-                tRef.current?.reload()
-                return true
-              } catch (error) {
-                message.error(error)
-                return false
-              }
-            }}>
-            <ProFormText name="account" label="账号" rules={[{ required: true, message: '请输入' }]} />
-            <ProFormText name="name" label="名称" rules={[{ required: true, message: '请输入' }]} />
-            <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入' }]}>
-              <Input.Password placeholder="请输入" />
-            </Form.Item>
-            <ProFormSelect
-              label="角色"
-              name="roleIDs"
-              className="w-full"
-              options={menuRoles?.map(item => ({ value: item.ID, label: item.name }))}
-            />
-            <ProFormRadio.Group
-              options={[
-                { label: '启用', value: true },
-                { label: '停用', value: false }
-              ]}
-              name="enable"
-              label="状态"
-              rules={[{ required: true, message: '请选择' }]}
-            />
-          </ModalForm>
         </div>
       </div>
+      {ModalDOM}
     </PageContainer>
   )
 }