|
|
@@ -0,0 +1,273 @@
|
|
|
+import { useModel, useRequest } from 'umi'
|
|
|
+import { Delete, EveryUser } from '@icon-park/react'
|
|
|
+import ProForm, { ProFormCheckbox, ProFormDependency, ProFormSwitch } from '@ant-design/pro-form'
|
|
|
+import type { FormInstance } from 'antd'
|
|
|
+import { message, Table, Tabs, Popconfirm } from 'antd'
|
|
|
+import React, { useRef, useMemo, useState, useEffect } from 'react'
|
|
|
+
|
|
|
+import {
|
|
|
+ fetchRoleStaffListByRoleId,
|
|
|
+ updateRolePermission,
|
|
|
+ getRolePermissions,
|
|
|
+ // updatePermDataByRoleId,
|
|
|
+ deleteStaff
|
|
|
+} from '@/services/user/api'
|
|
|
+import type { ColumnsType } from 'antd/lib/table'
|
|
|
+import { formatPermission } from '@/utils/utils'
|
|
|
+import RoleMenu from '../System/components/RoleMenu'
|
|
|
+import ConnectModal from '../System/components/ConnectModal'
|
|
|
+// import FormItem from 'antd/lib/form/FormItem'
|
|
|
+
|
|
|
+// const permData = [
|
|
|
+// {
|
|
|
+// label: '本人',
|
|
|
+// value: 'oneself'
|
|
|
+// },
|
|
|
+// {
|
|
|
+// label: '本人及下属',
|
|
|
+// value: 'underling'
|
|
|
+// },
|
|
|
+// {
|
|
|
+// label: '本部门',
|
|
|
+// value: 'department'
|
|
|
+// },
|
|
|
+// {
|
|
|
+// label: '本部门及下属部门',
|
|
|
+// value: 'departmentAll'
|
|
|
+// },
|
|
|
+// {
|
|
|
+// label: '全部',
|
|
|
+// value: 'all'
|
|
|
+// }
|
|
|
+// ]
|
|
|
+
|
|
|
+const Hr = () => {
|
|
|
+ const { TabPane } = Tabs
|
|
|
+ const formRef = useRef<FormInstance>(null)
|
|
|
+ const formRef2 = useRef<FormInstance>(null)
|
|
|
+
|
|
|
+ const { initialState } = useModel('@@initialState')
|
|
|
+ const menuId = useMemo(() => {
|
|
|
+ return initialState?.menuList?.find(item => item.name === '人资')?.id
|
|
|
+ }, initialState.menuList)
|
|
|
+
|
|
|
+ const [state, setState] = useState({
|
|
|
+ id: '',
|
|
|
+ roleStaff: [],
|
|
|
+ rolePermission: {},
|
|
|
+ dataPermission: {},
|
|
|
+ activeKey: ''
|
|
|
+ })
|
|
|
+ const onSelect = (id: string) => {
|
|
|
+ setState({ ...state, id })
|
|
|
+ }
|
|
|
+
|
|
|
+ const { run: tryGetRoleStaffList } = useRequest(
|
|
|
+ (id: string) => fetchRoleStaffListByRoleId({ id }),
|
|
|
+ {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: result => {
|
|
|
+ setState({ ...state, roleStaff: result })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
+ const { run: tryGetRolePermissions } = useRequest((id: string) => getRolePermissions({ id }), {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: (result: API.GetRolePermissionResultModel) => {
|
|
|
+ const values = { ...formatPermission('init', result.permission) }
|
|
|
+ setState({
|
|
|
+ ...state,
|
|
|
+ rolePermission: values,
|
|
|
+ dataPermission: result.dataPermission ? JSON.parse(result.dataPermission) : null
|
|
|
+ })
|
|
|
+ formRef.current?.setFieldsValue({ ...values })
|
|
|
+ formRef2.current?.setFieldsValue(
|
|
|
+ result.dataPermission ? JSON.parse(result.dataPermission) : null
|
|
|
+ )
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const { run: tryDeleteStaff } = useRequest(
|
|
|
+ (params: API.DeleteStaff) => {
|
|
|
+ return deleteStaff(params)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: () => {
|
|
|
+ message.success('移除员工成功')
|
|
|
+ tryGetRoleStaffList(state.id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (state.id) {
|
|
|
+ tryGetRoleStaffList(state.id)
|
|
|
+ tryGetRolePermissions(state.id)
|
|
|
+ }
|
|
|
+ if (state.activeKey === '2') {
|
|
|
+ // console.log('333', state.rolePermission)
|
|
|
+ formRef.current?.setFieldsValue({ ...state.rolePermission })
|
|
|
+ }
|
|
|
+ if (state.activeKey === '3') {
|
|
|
+ formRef2.current?.setFieldsValue({ ...state.dataPermission })
|
|
|
+ }
|
|
|
+ }, [state.id, state.activeKey])
|
|
|
+
|
|
|
+ const columns: ColumnsType<API.RoleStaffListItem> = [
|
|
|
+ {
|
|
|
+ title: '用户',
|
|
|
+ dataIndex: 'username',
|
|
|
+ width: '15%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '手机',
|
|
|
+ dataIndex: 'phone',
|
|
|
+ width: '20%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '部门',
|
|
|
+ dataIndex: 'departmentName',
|
|
|
+ width: '20%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '岗位',
|
|
|
+ dataIndex: 'position',
|
|
|
+ width: '15%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '角色',
|
|
|
+ dataIndex: 'age',
|
|
|
+ width: '20%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'opreate',
|
|
|
+ width: '20%',
|
|
|
+ render: (_, record) => (
|
|
|
+ <Popconfirm
|
|
|
+ title="确认删除吗？"
|
|
|
+ okText="确认"
|
|
|
+ cancelText="取消"
|
|
|
+ onConfirm={() => tryDeleteStaff({ id: state.id, staffId: record.staffId })}>
|
|
|
+ <div className="pl-2 text-hex-fd3995 cursor-pointer hover:text-hex-e7026e">
|
|
|
+ <Delete />
|
|
|
+ </div>
|
|
|
+ </Popconfirm>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="h-full w-full flex flex-row">
|
|
|
+ <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
|
|
|
+ <div className="w-max-3/4">
|
|
|
+ <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
|
|
|
+ <div className="absolute right-4 top-4 z-100">
|
|
|
+ {state.id && (
|
|
|
+ <ConnectModal
|
|
|
+ title="关联员工"
|
|
|
+ dataId={state.id}
|
|
|
+ postUrl="/role/staff/add"
|
|
|
+ onReload={() => tryGetRoleStaffList(state.id)}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ <Tabs
|
|
|
+ defaultActiveKey="1"
|
|
|
+ type="card"
|
|
|
+ onChange={key => setState({ ...state, activeKey: key })}>
|
|
|
+ <TabPane tab="员工列表" key="1">
|
|
|
+ <Table<API.RoleStaffListItem>
|
|
|
+ dataSource={state.roleStaff}
|
|
|
+ columns={columns}
|
|
|
+ rowKey={row => row.staffId}
|
|
|
+ />
|
|
|
+ </TabPane>
|
|
|
+ <TabPane tab="角色权限" key="2">
|
|
|
+ <div className="ml-4">
|
|
|
+ {state.id && (
|
|
|
+ <ProForm
|
|
|
+ formRef={formRef}
|
|
|
+ layout="horizontal"
|
|
|
+ onFinish={async values => {
|
|
|
+ const newValues = formatPermission('submit', values)
|
|
|
+ await updateRolePermission({
|
|
|
+ permission: JSON.stringify(newValues),
|
|
|
+ id: state.id
|
|
|
+ })
|
|
|
+ message.success('设置成功')
|
|
|
+ }}>
|
|
|
+ <ProFormSwitch
|
|
|
+ fieldProps={{
|
|
|
+ onChange(checked) {
|
|
|
+ if (!checked) {
|
|
|
+ formRef.current?.setFieldsValue({ client: [] })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ name="showDepartment"
|
|
|
+ label={
|
|
|
+ <span className="flex items-center">
|
|
|
+ <EveryUser className="mr-1" className="flex items-baseline mr-1" />
|
|
|
+ 人资
|
|
|
+ </span>
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <ProFormDependency name={['showDepartment']}>
|
|
|
+ {({ showDepartment }) => (
|
|
|
+ <ProFormCheckbox.Group
|
|
|
+ wrapperCol={{ offset: 1 }}
|
|
|
+ name="department"
|
|
|
+ options={[
|
|
|
+ { value: 'access', label: '查看', disabled: !showDepartment },
|
|
|
+ { value: 'add', label: '添加', disabled: !showDepartment },
|
|
|
+ { value: 'delete', label: '删除', disabled: !showDepartment }
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </ProFormDependency>
|
|
|
+ </ProForm>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </TabPane>
|
|
|
+ {/* <TabPane tab="数据权限" key="3">
|
|
|
+ {state.id && (
|
|
|
+ <ProForm
|
|
|
+ formRef={formRef2}
|
|
|
+ layout="vertical"
|
|
|
+ onFinish={async values => {
|
|
|
+ try {
|
|
|
+ await updatePermDataByRoleId({
|
|
|
+ id: state.id,
|
|
|
+ dataPermission: JSON.stringify(values)
|
|
|
+ })
|
|
|
+ } catch (error) {
|
|
|
+ return message.error(error.toString())
|
|
|
+ }
|
|
|
+ message.success('设置成功')
|
|
|
+ return true
|
|
|
+ }}>
|
|
|
+ <FormItem name="access" label="联系人/客户可见" required>
|
|
|
+ <Radio.Group>
|
|
|
+ <Space direction="vertical">
|
|
|
+ {permData.map(item => (
|
|
|
+ <Radio key={item.value} value={item.value}>
|
|
|
+ {item.label}
|
|
|
+ </Radio>
|
|
|
+ ))}
|
|
|
+ </Space>
|
|
|
+ </Radio.Group>
|
|
|
+ </FormItem>
|
|
|
+ </ProForm>
|
|
|
+ )}
|
|
|
+ </TabPane> */}
|
|
|
+ </Tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+export default Hr
|
lanjianrong