feat: 增加客户、员工与部门的按钮权限

config/config.js

@@ -32,9 +32,9 @@ export default defineConfig({
     // default true, when it is true, will use `navigator.language` overwrite default
     baseNavigator: false
   },
-  // dynamicImport: {
-  //   loading: '@/components/PageLoading/index'
-  // },
+  dynamicImport: {
+    loading: '@/components/PageLoading/index'
+  },
   targets: {
     ie: 11
   },

src/access.ts

@@ -35,9 +35,14 @@ export default function (initialState) {
     return false
   }
 
+  const validatePermByType = (type: string): boolean => {
+    return roles.includes(type)
+  }
+
   return {
     authRouteFilter,
     authPermDataFilter,
-    canEditTag
+    canEditTag,
+    validatePermByType
   }
 }

src/components/RightContent/index.tsx

@@ -60,7 +60,7 @@ const GlobalHeaderRight: React.FC = () => {
       >
         <QuestionCircleOutlined />
       </span> */}
-      {/* <Notify /> */}
+      <Notify />
       <Avatar />
       {REACT_APP_ENV && REACT_APP_ENV !== 'prod' && (
         <span>

src/hooks/core/useWebSocketFn.tsx

@@ -35,7 +35,7 @@ export default function useWebSocketFn() {
   const { currentUser } = initialState
 
   const { disconnect, connect, webSocketIns } = useWebSocket(
-    `ws://192.168.1.26:8848/summon/v1/chat/link?username=${currentUser.username}&id=${currentUser.staffId}`,
+    `ws://cld2qa.com/summon/v1/chat/link?username=${currentUser.username}&id=${currentUser.staffId}`,
     {
       manual: true,
       reconnectLimit: 3,

src/pages/Customer/Company/components/ConnectCompany/index.jsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.less'
 import { SearchOutlined } from '@ant-design/icons'
 import { useDebounceFn } from 'ahooks'
-import { useDispatch } from 'umi'
+import { useDispatch, useAccess } from 'umi'
 import AddCompany from '@/pages/Customer/Company/components/AddCompany'
 import { createCustomer, queryCustomers } from '@/services/customer'
 import consts from '@/basic/consts'
@@ -12,6 +12,7 @@ import { apiChangeCustomer } from '@/services/customer'
 import CustomModal from '@/components/Modal/src/components/CustomModal'
 
 const ConnectCompany = ({ dataId, onSelect, preUrl }) => {
+  const hasAddPerm = useAccess()?.validatePermByType('company_add')
   const dispatch = useDispatch()
   const scrollRef = useRef()
   const [state, setState] = useState({
@@ -108,12 +109,14 @@ const ConnectCompany = ({ dataId, onSelect, preUrl }) => {
           placeholder="输入单位名称搜索"
           onChange={handleInputChange}
         />
-      }>
+      }
+    >
       <div
         className={styles.modalContent}
         ref={scrollRef}
         onScroll={handleListScroll}
-        style={{ paddingBottom: 0 }}>
+        style={{ paddingBottom: 0 }}
+      >
         <Spin spinning={state.laoding}>
           {state.customer.map(item => (
             <div key={item.id} className={styles.card}>
@@ -129,9 +132,11 @@ const ConnectCompany = ({ dataId, onSelect, preUrl }) => {
         </Spin>
         {state.noMore && <div className="text-center text-gray-400 my-4">已到底部</div>}
       </div>
-      <div className={styles.modalFooter}>
-        <AddCompany onConfirm={addConfirm} dataId={dataId} dataType={preUrl} />
-      </div>
+      {hasAddPerm && (
+        <div className={styles.modalFooter}>
+          <AddCompany onConfirm={addConfirm} dataId={dataId} dataType={preUrl} />
+        </div>
+      )}
     </CustomModal>
   )
 }

src/pages/Customer/Company/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { Input, Button, message, Tooltip } from 'antd'
-import { connect, useModel } from 'umi'
+import { connect, useModel, useAccess } from 'umi'
 import consts from '@/consts'
 import { queryCompany, apiAddCompany } from '@/services/customer'
 import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
@@ -32,6 +32,7 @@ const Company = props => {
 
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
 
+  const hasAddPerm = useAccess()?.validatePermByType('company_add')
   const { toggleDrawer, setDrawerProps } = useModal()
   const tRef = useRef(null)
 
@@ -470,7 +471,6 @@ const Company = props => {
         columnStateType="COMPANY"
         params={state.params}
         request={async (params, sort, filter) => {
-          console.log('filter', filter)
           const srotOrder = refactorSortField(sort)
           const nFilter = refactorFilterField(filter)
           const { code = -1, data: { customer = [], total = 0 } = { customer: [], total: 0 } } =
@@ -507,11 +507,13 @@ const Company = props => {
             //   className="hover:bg-[rgba(0,0,0,0.1)]"
             //   bordered={false}
             // />,
-            <AddCompany
-              onConfirm={handleAddCompany}
-              key="addCompanyBtn"
-              reload={() => tRef.current?.reload()}
-            />
+            hasAddPerm && (
+              <AddCompany
+                onConfirm={handleAddCompany}
+                key="addCompanyBtn"
+                reload={() => tRef.current?.reload()}
+              />
+            )
           ]
         }}
         rowSelection={{

src/pages/Hr/Employee/components/RoleMenu/index.jsx

@@ -3,7 +3,7 @@ import { Button, message, Tree, TreeSelect, Form } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
 import consts from '@/consts'
 import { apiaddDepartment } from '@/services/department'
-import { connect } from 'dva'
+import { connect, useAccess } from 'umi'
 import { ProFormText } from '@ant-design/pro-form'
 import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
 
@@ -48,42 +48,47 @@ const RoleMenu = props => {
 
   const onExpand = () => {}
 
+  const hasPerm = useAccess()?.validatePermByType('employee_add_department')
+
   return (
     <div className="h-full w-max-234px rounded-4px">
       <div className="p-4 pb-3 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] flex justify-around items-center">
         <span className="text-[0.9375rem]">组织架构</span>
-        <ModalDragForm
-          title="创建部门"
-          width="500px"
-          trigger={
-            <Button size="small" type="primary" ghost>
-              <PlusOutlined />
-              创建部门
-            </Button>
-          }
-          onFinish={async values => {
-            await handleAddDepartment(values)
-            message.success('添加成功')
-            return true
-          }}>
-          <ProFormText name="backstageMenuId" hidden />
-          <ProFormText name="name" label="新增部门" rules={[{ message: '请输入部门名称' }]} />
-          <Form.Item label="上级部门" name="parentId">
-            <TreeSelect
-              style={{ width: '100%' }}
-              placeholder="请选择上司"
-              treeDefaultExpandAll
-              treeData={departments}
-              allowClear
-            />
-          </Form.Item>
-          {/* <ProFormTreeSelect
+        {hasPerm && (
+          <ModalDragForm
+            title="创建部门"
+            width="500px"
+            trigger={
+              <Button size="small" type="primary" ghost>
+                <PlusOutlined />
+                创建部门
+              </Button>
+            }
+            onFinish={async values => {
+              await handleAddDepartment(values)
+              message.success('添加成功')
+              return true
+            }}
+          >
+            <ProFormText name="backstageMenuId" hidden />
+            <ProFormText name="name" label="新增部门" rules={[{ message: '请输入部门名称' }]} />
+            <Form.Item label="上级部门" name="parentId">
+              <TreeSelect
+                style={{ width: '100%' }}
+                placeholder="请选择上司"
+                treeDefaultExpandAll
+                treeData={departments}
+                allowClear
+              />
+            </Form.Item>
+            {/* <ProFormTreeSelect
             width="md"
             options={departments.map(item => ({ label: item.name, value: item.id }))}
             name="parentId"
             label="上级部门"
           /> */}
-        </ModalDragForm>
+          </ModalDragForm>
+        )}
       </div>
       <div className="p-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
         {departments.length ? (

src/pages/Hr/Employee/index.jsx

@@ -6,7 +6,7 @@ import RoleMenu from '@/pages/Hr/Employee/components/RoleMenu'
 import { queryStaff } from '@/services/staff'
 import EmployeeDetail from '@/pages/Hr/Employee/components/EmployeeDetail'
 import { delDepartment } from '@/services/department'
-import { connect } from 'dva'
+import { connect, useAccess } from 'umi'
 import BasicTable from '@/components/Table'
 
 const Employee = props => {
@@ -48,7 +48,8 @@ const Employee = props => {
       render: (username, record) => (
         <span
           onClick={() => showDrawer(record.id)}
-          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          className="text-primary cursor-pointer hover:text-[#967bbd]"
+        >
           {username}
         </span>
       )
@@ -108,19 +109,22 @@ const Employee = props => {
     }
   }
 
+  const hasPerm = useAccess()?.validatePermByType('employee_del_department')
+
   return (
     <div className="h-full w-full flex flex-row">
       <RoleMenu onSelect={onSelect} />
       <div className="w-max-3/4">
         <div className="ml-8 shadow-hex-3e2c5a relative">
           <div className="absolute right-33 top-3 z-100">
-            {state.params.id && (
+            {hasPerm && state.params.id && (
               <Popconfirm
                 title="确认删除吗？"
                 onText="确认"
                 cancelText="取消"
                 // onConfirm={() => console.log(state.params.id)}
-                onConfirm={() => handleDelDepartment(state.params.id)}>
+                onConfirm={() => handleDelDepartment(state.params.id)}
+              >
                 <Button danger size="small">
                   删除部门
                 </Button>