123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347 |
- import { useModel, useRequest } from 'umi'
- import { Delete } from '@icon-park/react'
- import ProForm, { ProFormDependency, ProFormSwitch, ProFormCheckbox } 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 styles from '@/pages/Role/index.less'
- import classNames from 'classnames'
- 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'
- import { PieChartOutlined } from '@ant-design/icons'
- import { PageContainer } from '@ant-design/pro-layout'
- 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)
- }
- if (
- values['showSoftware-usage'] ||
- values['showInvoice-aggregate'] ||
- values['showInvoice-trends'] ||
- values['showInvoice-receivables']
- ) {
- values.showProduct = true
- delete values['showSoftware-usage']
- delete values['showInvoice-aggregate']
- delete values['showInvoice-trends']
- delete values['showInvoice-receivables']
- }
- if (values['showCustomer-additions']) {
- values.showCustomer = true
- delete values['showCustomer-additions']
- }
- 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 (
- <PageContainer title={false} breadcrumb={false}>
- <div className="h-full w-full flex flex-row">
- <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
- <div className={classNames('w-max-3/4', styles.formItemWrap)}>
- <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({
- usage: [],
- aggregate: [],
- trends: [],
- additions: [],
- receivables: []
- })
- }
- }
- }}
- name="showProduct"
- label={
- <span className="flex items-center">
- <PieChartOutlined
- theme="outline"
- className="flex items-baseline mr-1"
- />
- 产品销售
- </span>
- }
- />
- <div className="ml-25px">
- <ProFormDependency name={['showProduct']}>
- {({ showProduct }) => (
- <>
- <ProFormCheckbox.Group
- name="usage"
- label="软件锁用量"
- options={[
- { value: 'access', label: '查看', disabled: !showProduct }
- ]}
- />
- <ProFormCheckbox.Group
- name="aggregate"
- label="发票收款入账汇总"
- options={[
- { value: 'access', label: '查看', disabled: !showProduct }
- ]}
- />
- <ProFormCheckbox.Group
- name="trends"
- label="发票收款入账趋势"
- options={[
- { value: 'access', label: '查看', disabled: !showProduct }
- ]}
- />
- <ProFormCheckbox.Group
- name="receivables"
- label="应收款统计"
- options={[
- { value: 'access', label: '查看', disabled: !showProduct }
- ]}
- />
- </>
- )}
- </ProFormDependency>
- </div>
- <ProFormSwitch
- fieldProps={{
- onChange(checked) {
- if (!checked) {
- formRef.current?.setFieldsValue({
- additions: []
- })
- }
- }
- }}
- name="showCustomer"
- label={
- <span className="flex items-center">
- <PieChartOutlined
- theme="outline"
- className="flex items-baseline mr-1"
- />
- 客户数据
- </span>
- }
- />
- <div className="ml-25px">
- <ProFormDependency name={['showCustomer']}>
- {({ showCustomer }) => (
- <ProFormCheckbox.Group
- name="additions"
- label="客户新增"
- options={[
- { value: 'access', label: '查看', disabled: !showCustomer }
- ]}
- />
- )}
- </ProFormDependency>
- </div>
- </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>
- </PageContainer>
- )
- }
- export default Statistic
|