|
|
@@ -0,0 +1,326 @@
|
|
|
+import { useModel, useRequest } from 'umi'
|
|
|
+import { Delete } from '@icon-park/react'
|
|
|
+import ProForm from '@ant-design/pro-form'
|
|
|
+import type { FormInstance } from 'antd'
|
|
|
+import { message, Table, Tabs, Radio, Space, 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'
|
|
|
+import { permData } from '../Customer'
|
|
|
+
|
|
|
+const Statistic = () => {
|
|
|
+ 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 = {
|
|
|
+ client: [],
|
|
|
+ company: [],
|
|
|
+ business: [],
|
|
|
+ ...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') {
|
|
|
+ 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"
|
|
|
+ closeAfterSelect={false}
|
|
|
+ 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="showClient"
|
|
|
+ label={
|
|
|
+ <span className="flex items-center">
|
|
|
+ <EveryUser className="mr-1" className="flex items-baseline mr-1" />
|
|
|
+ 客户
|
|
|
+ </span>
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <ProFormDependency name={['showClient']}>
|
|
|
+ {({ showClient }) => (
|
|
|
+ <ProFormCheckbox.Group
|
|
|
+ wrapperCol={{ offset: 1 }}
|
|
|
+ name="client"
|
|
|
+ options={[
|
|
|
+ { value: 'access', label: '查看', disabled: !showClient },
|
|
|
+ { value: 'add', label: '添加客户', disabled: !showClient },
|
|
|
+ // { value: 'delete', label: '删除客户', disabled: !showClient },
|
|
|
+ {
|
|
|
+ value: 'edit_team_tags',
|
|
|
+ label: '编辑协作标签',
|
|
|
+ disabled: !showClient
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </ProFormDependency>
|
|
|
+ <ProFormSwitch
|
|
|
+ fieldProps={{
|
|
|
+ onChange(checked) {
|
|
|
+ if (!checked) {
|
|
|
+ formRef.current?.setFieldsValue({ company: [] })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ name="showCompany"
|
|
|
+ label={
|
|
|
+ <span className="flex items-center">
|
|
|
+ <EveryUser className="mr-1" className="flex items-baseline mr-1" />
|
|
|
+ 单位
|
|
|
+ </span>
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <ProFormDependency name={['showCompany']}>
|
|
|
+ {({ showCompany }) => (
|
|
|
+ <ProFormCheckbox.Group
|
|
|
+ wrapperCol={{ offset: 1 }}
|
|
|
+ // initialValue={}
|
|
|
+ name="company"
|
|
|
+ options={[
|
|
|
+ { value: 'access', label: '查看', disabled: !showCompany },
|
|
|
+ { value: 'add', label: '添加单位', disabled: !showCompany },
|
|
|
+ // { value: 'delete', label: '删除单位', disabled: !showCompany },
|
|
|
+ {
|
|
|
+ value: 'edit_team_tags',
|
|
|
+ label: '编辑协作标签',
|
|
|
+ disabled: !showCompany
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </ProFormDependency>
|
|
|
+ <ProFormSwitch
|
|
|
+ fieldProps={{
|
|
|
+ onChange(checked) {
|
|
|
+ if (!checked) {
|
|
|
+ formRef.current?.setFieldsValue({ bisiness: [] })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ name="showBusiness"
|
|
|
+ label={
|
|
|
+ <span className="flex items-center">
|
|
|
+ <EveryUser className="mr-1" className="flex items-baseline mr-1" />
|
|
|
+ 商机
|
|
|
+ </span>
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <ProFormDependency name={['showBusiness']}>
|
|
|
+ {({ showBusiness }) => (
|
|
|
+ <ProFormCheckbox.Group
|
|
|
+ wrapperCol={{ offset: 1 }}
|
|
|
+ name="business"
|
|
|
+ options={[
|
|
|
+ { value: 'access', label: '查看', disabled: !showBusiness },
|
|
|
+ { value: 'add', label: '添加商机', disabled: !showBusiness }
|
|
|
+ // { value: 'delete', label: '删除商机', disabled: !showBusiness }
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </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 Statistic
|
lanjianrong