feat: 人资员工弹窗组件

src/models/refresh.js

@@ -5,7 +5,8 @@ export default {
     contact: false,
     company: false,
     longle: false,
-    department: false
+    department: false,
+    stafflist: false
   },
   // 用于处理异步操作和业务逻辑，由action触发，但不能修改state
   effects: {

src/pages/Customer/Contact/components/ChangeCompany/index.jsx

@@ -71,7 +71,7 @@ const ChangeCompanyInput = props => {
   }
   const normalValueRender = (
     <Card size="small">
-      <div className="flex-row justify-between">
+      <div className="flex-row flex justify-between">
         <div className={styles.nameContent}>{customerName}</div>
         <div className="w-55px">
           <Tooltip placement="right" title="移除客户">

src/pages/Customer/Contact/components/CustomerModal/index.jsx

@@ -2,7 +2,7 @@ import { Input, Button, Spin, message } from 'antd'
 import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.less'
 import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
-import { useDebounceFn, useThrottleFn } from 'ahooks'
+import { useDebounceFn } from 'ahooks'
 import { useDispatch } from 'dva'
 import AddCustomerModal from '../AddCustomerModal'
 import { createCustomer, queryCustomers } from '@/services/customer'
@@ -22,10 +22,8 @@ const SearchModal = ({ clientId, onSelect }) => {
     total: 0
   })
   const initData = async params => {
-    const {
-      data: { customer, total } = { customer: [], total: 0 },
-      code = -1
-    } = await queryCustomers(params)
+    const { data: { customer, total } = { customer: [], total: 0 }, code = -1 } =
+      await queryCustomers(params)
     if (code === consts.RET_CODE.SUCCESS) {
       if (params?.page === 1) {
         // 请求的是第一页

src/pages/Staff/Employee/components/ChangeSupervisor/index.jsx

@@ -1,8 +1,9 @@
 import React from 'react'
+import styles from '@/pages/customer/Contact/components/ChangeCompany/index.less'
 
 const ChangeSupervisor = () => {
   return (
-    <div>
+    <div className={styles.companyInput}>
       <span>更换上司</span>
     </div>
   )

src/pages/Staff/Employee/components/EmployeeDetail/EmployeeForm.jsx

@@ -18,13 +18,13 @@ const EmployeeForm = props => {
     {
       dataIndex: 'departmentId',
       label: '办事处',
-      span: 24,
+      span: 12,
       editCellType: 'treeSelect'
     },
     {
       dataIndex: 'departmentName',
       label: '部门上司',
-      span: 12
+      span: 24
     },
     {
       dataIndex: 'majorName',

src/pages/Staff/Employee/components/EmployeeDetail/EmployeeLowerList.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Tabs } from 'antd'
+import StaffModal from '../StaffModal'
 
 const EmployeeLowerList = () => {
   const { TabPane } = Tabs
@@ -9,6 +10,7 @@ const EmployeeLowerList = () => {
         <Tabs>
           <TabPane tab="软件锁" key="软件锁">
             <div className="sheet-right-panel">目前功能暂时不开放</div>
+            <StaffModal />
           </TabPane>
         </Tabs>
       </div>

src/pages/Staff/Employee/components/StaffModal/index.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import { Input, Button, Spin } from 'antd'
+import styles from './index.less'
+import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
+
+const StaffModal = () => {
+  const [state, setState] = useState({
+    loading: false
+  })
+  return (
+    <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
+      <div className={styles.modalHeader}>
+        <Input
+          prefix={<SearchOutlined />}
+          className={styles.inputSearch}
+          placeholder="输入员工名称搜索"
+        />
+        <span className={styles.closeIcon}>
+          <CloseOutlined />
+        </span>
+      </div>
+      <div className={styles.modalContent}>
+        <Spin spinning={state.loading}>
+          <div className={styles.card}>
+            <span className="w-1/6">张三</span>
+            <span className="w-1/6">总部</span>
+            <span className="w-1/6">测试</span>
+            <span className="w-1/2 zh-justify-between">
+              <span>15800000001</span>
+              <Button type="primary" size="small">
+                关联
+              </Button>
+            </span>
+          </div>
+        </Spin>
+      </div>
+    </div>
+  )
+}
+
+export default StaffModal

src/pages/Staff/Employee/components/StaffModal/index.less

@@ -0,0 +1,42 @@
+.modalContainer {
+  width: 60vw;
+  .modalHeader {
+    position: relative;
+    padding: 1.5rem;
+    .inputSearch {
+      width: 99%;
+    }
+    .closeIcon {
+      position: absolute;
+      top: 5px;
+      right: 7px;
+    }
+  }
+  .modalContent {
+    height: 63vh;
+    max-height: 63vh;
+    padding: 1.5rem;
+    overflow-y: auto;
+    border-top: 1px solid #dee2e6;
+    border-bottom: 1px solid #dee2e6;
+    .card {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem;
+      word-wrap: break-word;
+      background-color: #ffffff;
+      background-clip: border-box;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      border-radius: 4px;
+      box-shadow: 0 0 13px 0 rgba(74, 53, 107, 0.08);
+      &:not(:last-of-type) {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+
+  .modalFooter {
+    padding: 1.5rem;
+  }
+}