feat: 增加角色权限-产品模块

config/routes.ts

@@ -51,6 +51,12 @@
         name: 'workbench',
         component: './role/workbench',
         access: 'authRouteFilter'
+      },
+      {
+        path: '/role/product',
+        name: 'product',
+        component: './role/product',
+        access: 'authRouteFilter'
       }
     ]
   },

src/locales/zh-CN/menu.ts

@@ -9,6 +9,7 @@ export default {
   'menu.role.customer': '客户',
   'menu.role.hr': '人资',
   'menu.role.workbench': '工作台',
+  'menu.role.product': '产品',
   'menu.business': '业务参数',
   'menu.business.attendance': '考勤',
   'menu.business.contact': '客户',

src/pages/Role/Product/index.tsx

@@ -0,0 +1,281 @@
+import { useModel, useRequest } from 'umi'
+import { Delete, DataLock } from '@icon-park/react'
+import ProForm, { ProFormCheckbox, ProFormDependency, ProFormSwitch } 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'
+
+const permData = [
+  {
+    label: '本人',
+    value: 'oneself'
+  },
+  {
+    label: '本人及下属',
+    value: 'underling'
+  },
+  {
+    label: '本部门',
+    value: 'department'
+  },
+  {
+    label: '本部门及下属部门',
+    value: 'departmentAll'
+  },
+  {
+    label: '全部',
+    value: 'all'
+  }
+]
+
+const Product = () => {
+  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"
+                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="showLockstore"
+                      label={
+                        <span className="flex items-center">
+                          <DataLock
+                            theme="outline"
+                            className="mr-1"
+                            className="flex items-baseline mr-1"
+                          />
+                          软件锁-公共锁库
+                        </span>
+                      }
+                    />
+                    <ProFormDependency name={['showLockstore']}>
+                      {({ showLockstore }) => (
+                        <ProFormCheckbox.Group
+                          wrapperCol={{ offset: 1 }}
+                          name="lockstore"
+                          options={[
+                            { value: 'access', label: '查看', disabled: !showLockstore },
+                            { value: 'delete', label: '删除', disabled: !showLockstore }
+                          ]}
+                        />
+                      )}
+                    </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 Product

src/pages/user/Login/index.tsx

@@ -2,7 +2,7 @@ import { LockOutlined, UserOutlined } from '@ant-design/icons'
 import { Alert, message, Tabs } from 'antd'
 import React, { useState } from 'react'
 import ProForm, { ProFormCheckbox, ProFormText } from '@ant-design/pro-form'
-import { useIntl, Link, history, FormattedMessage, SelectLang, useModel, useRequest } from 'umi'
+import { useIntl, history, FormattedMessage, SelectLang, useModel, useRequest } from 'umi'
 import Footer from '@/components/Footer'
 import { login } from '@/services/user/api'
 // import { getFakeCaptcha } from '@/services/ant-design-pro/login'
@@ -83,10 +83,10 @@ const Login: React.FC = () => {
       <div className={styles.content}>
         <div className={styles.top}>
           <div className={styles.header}>
-            <Link to="/" className="flex justify-center">
+            <div className="flex justify-center">
               <img alt="logo" className={styles.logo} src="/logo.svg" />
               <span className={styles.title}>CLD.V2</span>
-            </Link>
+            </div>
           </div>
           <div className={styles.desc}>
             {intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}