Merge branch 'dev' of http://192.168.1.41:3000/outaozhen/cldV2react into dev

config/routes.js

@@ -70,13 +70,13 @@ export default [
         component: './Customer/Business',
         access: 'authRouteFilter',
         validatePerm: true
+      },
+      {
+        path: '/customer/test',
+        name: 'test',
+        icon: 'icon-usd-circle',
+        component: './Customer/Test'
       }
-      // {
-      //   path: '/customer/test',
-      //   name: 'test',
-      //   icon: 'icon-usd-circle',
-      //   component: './Customer/Test'
-      // }
     ]
   },
   {

src/global.less

@@ -59,6 +59,14 @@ body,
   background-color: unset;
 }
 
+.ant-btn-primary[disabled],
+.ant-btn-primary[disabled]:hover,
+.ant-btn-primary[disabled]:focus,
+.ant-btn-primary[disabled]:active {
+  color: white;
+  background: rgba(136, 106, 181, 0.5);
+}
+
 .ant-pro-top-nav-header-logo h1 {
   font-weight: 600;
   font-size: 18px;

src/pages/Customer/Business/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react'
-import { connect, useModel } from 'umi'
+import { connect, useAccess, useModel } from 'umi'
 import { getBusinessList } from '@/services/customer'
 import consts from '@/consts'
 import { Select, Tooltip, Input, Button } from 'antd'
@@ -13,6 +13,7 @@ import { useModal } from '@/components/ModalStore'
 
 const Business = ({ dispatch, groupList, shouldUpdate, loading, refreshGroupList }) => {
   const [defaultPermAuthCache, defaultStaffIds] = getPermAuthCache(PermDataTypeEunm.CUSTOMER)
+  const hasAddPerm = useAccess()?.validatePermByType('business_add')
   const dispatchModal = useModal()
   const tRef = useRef(null)
   const defaultGroupId = getAuthCache(BUSINESS_GROUP_KEY) || null
@@ -20,10 +21,6 @@ const Business = ({ dispatch, groupList, shouldUpdate, loading, refreshGroupList
     orderIds: [],
     params: { businessGroupId: defaultGroupId },
     groupParams: { staffIds: defaultStaffIds, dataPermission: defaultPermAuthCache }
-    // funnelData: groupList
-    //   ?.find(item => item.value === defaultGroupId)
-    //   ?.items?.filter(item => !item.endProcess)
-    //   ?.map(item => ({ ...item, percentage: parseInt(item.percentage, 10) }))
   })
 
   const funnelData = useMemo(() => {
@@ -82,7 +79,8 @@ const Business = ({ dispatch, groupList, shouldUpdate, loading, refreshGroupList
               group: groupList
             })
           }
-          className="text-primary cursor-pointer hover:text-hex-967bbd">
+          className="text-primary cursor-pointer hover:text-hex-967bbd"
+        >
           {text}
         </span>
       )
@@ -95,7 +93,8 @@ const Business = ({ dispatch, groupList, shouldUpdate, loading, refreshGroupList
         record.customerId && (
           <span
             onClick={() => dispatchModal('D_COMPANY_DETAIL', { dataId: record.customerId })}
-            className="text-primary cursor-pointer hover:text-hex-967bbd">
+            className="text-primary cursor-pointer hover:text-hex-967bbd"
+          >
             {text}
           </span>
         )
@@ -223,13 +222,16 @@ const Business = ({ dispatch, groupList, shouldUpdate, loading, refreshGroupList
               actions: [
                 <Button
                   type="primary"
+                  key="add_business"
                   className="flex items-center"
+                  disabled={!hasAddPerm}
                   onClick={() =>
                     dispatchModal('M_BUSINESS_ADD', {
                       groupList: state.groupList,
                       reload: () => tRef.current?.reload()
                     })
-                  }>
+                  }
+                >
                   <Plus className="mr-1" />
                   商机
                 </Button>

src/pages/Customer/Client/index.jsx

@@ -1,5 +1,5 @@
 import { Input, Button, message, Tooltip } from 'antd'
-import { connect, useModel } from 'umi'
+import { connect, useAccess, useModel } from 'umi'
 import React, { useEffect, useState, useRef, useMemo } from 'react'
 import consts from '@/consts'
 import LazyCascader, { formatValues } from '@/components/LazyCascader'
@@ -31,9 +31,9 @@ const Client = props => {
     loading,
     sourceList
   } = props
-  console.log(shouldUpdate)
 
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
+  const hasAddPerm = useAccess()?.validatePermByType('client_add') || false
   const tRef = useRef()
   const [tagState, setTagState] = useState({
     tagIds: [],
@@ -593,6 +593,7 @@ const Client = props => {
             <Button
               type="primary"
               key="addClientBtn"
+              disabled={!hasAddPerm}
               onClick={() =>
                 dispatchModal('M_CLIENT_ADD', {
                   onConfirm: handleAddClient,

src/pages/Customer/Company/index.jsx

@@ -28,7 +28,6 @@ const Company = props => {
     loading
   } = props
 
-  console.log(shouldUpdate)
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
 
   const hasAddPerm = useAccess()?.validatePermByType('company_add')
@@ -507,20 +506,20 @@ const Company = props => {
               className="hover:bg-[rgba(0,0,0,0.1)]"
               bordered={false}
             />,
-            hasAddPerm && (
-              <Button
-                type="primary"
-                onClick={() =>
-                  dispatchModal('M_COMPANY_ADD', {
-                    onConfirm: handleAddCompany,
-                    reload: () => tRef.current?.reload()
-                  })
-                }
-              >
-                <Plus className="mr-1" />
-                单位
-              </Button>
-            )
+            <Button
+              key="add_company"
+              disabled={!hasAddPerm}
+              type="primary"
+              onClick={() =>
+                dispatchModal('M_COMPANY_ADD', {
+                  onConfirm: handleAddCompany,
+                  reload: () => tRef.current?.reload()
+                })
+              }
+            >
+              <Plus className="mr-1" />
+              单位
+            </Button>
           ]
         }}
         rowSelection={{

src/pages/Customer/Test/index.tsx

@@ -0,0 +1,64 @@
+import { Input } from 'antd'
+import { useRef, useEffect, useState } from 'react'
+
+enum ReadyState {
+  '0' = '连接中',
+  '1' = '正常',
+  '2' = '断开中',
+  '3' = '断开'
+}
+
+const Test = () => {
+  const [state, setState] = useState({
+    address: 'ws://192.168.1.26:9000/m/v1/mail/fanout/progress',
+    status: ''
+  })
+  const [receviceMsg, setReceviceMsg] = useState([])
+  const ws = useRef(null)
+  useEffect(() => {
+    const websokcet = new WebSocket(state.address)
+    ws.current = websokcet
+  }, [])
+
+  useEffect(() => {
+    if (ws.current) {
+      ws.current.addEventListener('open', () => {
+        setState({ ...state, status: ReadyState[1] })
+      })
+      ws.current.addEventListener('close', () => {
+        setState({ ...state, status: ReadyState[3] })
+      })
+
+      ws.current.addEventListener('message', msg => {
+        const newMsg = JSON.parse(msg.data)
+        const newMsgList = [...receviceMsg, newMsg]
+        setReceviceMsg(newMsgList)
+      })
+    }
+  }, [ws.current])
+
+  return (
+    <div className="w-full h-full bg-hex-cccccc p-4 flex flex-row">
+      <div>
+        <Input
+          placeholder="请输入ws地址"
+          style={{ width: '450px' }}
+          defaultValue="ws://192.168.1.26:9000/m/v1/mail/fanout/progress"
+          onChange={e => setState({ ...state, address: e.target.value })}
+        />
+
+        <div>当前连接状态：{state.status}</div>
+      </div>
+      <div className="ml-4 border w-400px h-800px border-gray-400">
+        {receviceMsg.map(item => (
+          <div key={item.mail}>
+            <span>{item.mail}</span>
+            <span>{item.status}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Test

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

@@ -1,13 +1,16 @@
 import React, { useEffect } from 'react'
-import { Button, message, Tree, TreeSelect, Form } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
+import { Button, message, Tree, TreeSelect, Form, Popconfirm } from 'antd'
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'
 import consts from '@/consts'
-import { apiaddDepartment } from '@/services/hr'
+import { addDepartment, delDepartment } from '@/services/hr'
 import { connect, useAccess } from 'umi'
 import { ModalForm, ProFormText } from '@ant-design/pro-form'
+import './index.less'
+const { DirectoryTree } = Tree
 
 const RoleMenu = props => {
   const { dispatch, departments = [], onSelect } = props
+  const hasPerm = useAccess()?.validatePermByType('employee_del_department')
   const newList = [...departments]
   newList.unshift({
     children: [],
@@ -17,15 +20,51 @@ const RoleMenu = props => {
     name: '总全公司',
     title: '总全公司'
   })
-  const { DirectoryTree } = Tree
 
   const initData = () => {
     dispatch({
       type: 'staff/fetchDepartments'
     })
   }
+
+  const handleDelDepartment = async id => {
+    const { code = -1 } = await delDepartment(id)
+    if (code === consts.RET_CODE.SUCCESS) {
+      message.success('删除成功')
+      initData()
+    }
+  }
+
+  function renderTreeNode(tree) {
+    if (!hasPerm) return tree
+    return tree.map(item => {
+      const newItem = {
+        ...item,
+        title: (
+          <div className="department-node">
+            <div>{item.title}</div>
+            <div className="extra">
+              <Popconfirm
+                title="确认删除吗？"
+                onText="确认"
+                cancelText="取消"
+                onConfirm={() => handleDelDepartment(item.id)}
+              >
+                <DeleteOutlined />
+              </Popconfirm>
+            </div>
+          </div>
+        )
+      }
+      if (newItem.children.length) {
+        newItem.children = renderTreeNode(newItem.children)
+      }
+      return newItem
+    })
+  }
+
   const handleAddDepartment = async values => {
-    const { code = -1 } = await apiaddDepartment({ ...values })
+    const { code = -1 } = await addDepartment({ ...values })
     if (code === consts.RET_CODE.SUCCESS) {
       initData()
     }
@@ -43,10 +82,6 @@ const RoleMenu = props => {
     }
   }
 
-  const onExpand = () => {}
-
-  const hasPerm = useAccess()?.validatePermByType('employee_add_department')
-
   return (
     <div className="h-full w-12rem 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">
@@ -78,12 +113,6 @@ const RoleMenu = props => {
                 allowClear
               />
             </Form.Item>
-            {/* <ProFormTreeSelect
-            width="md"
-            options={departments.map(item => ({ label: item.name, value: item.id }))}
-            name="parentId"
-            label="上级部门"
-          /> */}
           </ModalForm>
         )}
       </div>
@@ -94,9 +123,8 @@ const RoleMenu = props => {
             defaultExpandAll
             defaultSelectedKeys={['0']}
             onSelect={keys => saveActiveId(keys[0])}
-            onExpand={onExpand}
             showIcon={false}
-            treeData={newList}
+            treeData={renderTreeNode(newList)}
           />
         ) : null}
       </div>
@@ -104,7 +132,6 @@ const RoleMenu = props => {
   )
 }
 
-// export default RoleMenu
 export default connect(({ staff }) => ({
   departments: staff.departments
 }))(RoleMenu)

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

@@ -0,0 +1,18 @@
+.department-node {
+  @apply flex justify-between items-center;
+  .extra {
+    display: none;
+    @apply mr-1 hover:cursor-pointer;
+  }
+
+  &:hover {
+    .extra {
+      display: block;
+    }
+  }
+}
+// .ant-tree-node-selected {
+//   .department-node > .extra {
+//     display: block;
+//   }
+// }

src/pages/Hr/Employee/index.jsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react'
 import consts from '@/consts'
-import { Button, Popconfirm, message } from 'antd'
+import { message } from 'antd'
 import RoleMenu from '@/pages/Hr/Employee/components/RoleMenu'
 import { queryStaff } from '@/services/staff'
-import { delDepartment } from '@/services/hr'
-import { connect, useAccess } from 'umi'
+import { connect } from 'umi'
 import BasicTable from '@/components/Table'
 import { useModal } from '@/components/ModalStore'
 
@@ -14,11 +13,6 @@ const Employee = props => {
   const [state, setState] = useState({
     params: { id: '0' }
   })
-  const initData = () => {
-    dispatch({
-      type: 'staff/fetchDepartments'
-    })
-  }
 
   const columns = [
     {
@@ -88,36 +82,11 @@ const Employee = props => {
     setState({ ...state, params: { id } })
   }
 
-  const handleDelDepartment = async id => {
-    const { code = -1 } = await delDepartment(id)
-    if (code === consts.RET_CODE.SUCCESS) {
-      message.success('删除成功')
-      initData()
-    }
-  }
-
-  const hasPerm = useAccess()?.validatePermByType('employee_del_department')
-
   return (
     <div className="h-full w-full flex flex-row">
       <RoleMenu onSelect={onSelect} />
       <div style={{ width: 'calc(100% - 12rem)' }}>
         <div className="ml-8 shadow-hex-3e2c5a">
-          {/* <div className="absolute right-33 top-3 z-100">
-            {hasPerm && state.params.id && (
-              <Popconfirm
-                title="确认删除吗？"
-                onText="确认"
-                cancelText="取消"
-                // onConfirm={() => console.log(state.params.id)}
-                onConfirm={() => handleDelDepartment(state.params.id)}
-              >
-                <Button danger size="small">
-                  删除部门
-                </Button>
-              </Popconfirm>
-            )}
-          </div> */}
           {state.params.id && (
             <BasicTable
               columnStateType="EMPLOYEE"
@@ -134,25 +103,6 @@ const Employee = props => {
                 }
               }}
               search={false}
-              toolbar={{
-                actions: [
-                  <>
-                    {hasPerm && state.params.id && (
-                      <Popconfirm
-                        title="确认删除吗？"
-                        onText="确认"
-                        cancelText="取消"
-                        // onConfirm={() => console.log(state.params.id)}
-                        onConfirm={() => handleDelDepartment(state.params.id)}
-                      >
-                        <Button danger size="small">
-                          删除部门
-                        </Button>
-                      </Popconfirm>
-                    )}
-                  </>
-                ]
-              }}
             />
           )}
         </div>

src/services/hr.js

@@ -12,7 +12,7 @@ export async function getDepartMentList(parentId) {
 /**
  * @description 新增部门
  */
-export async function apiaddDepartment(payload) {
+export async function addDepartment(payload) {
   return request('/department/add', { method: 'POST', data: payload })
 }