员工列表表单

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

@@ -0,0 +1,226 @@
+import React from 'react'
+import { Col, Row } from 'antd'
+import EditableForm from '@/components/EditableForm'
+
+const EmployeeForm = () => {
+  const columns = [
+    {
+      dataIndex: 'jobNumber',
+      label: '工号',
+      span: 12
+    },
+    {
+      dataIndex: 'username',
+      label: '姓名',
+      span: 12
+    },
+    {
+      dataIndex: 'category',
+      label: '办事处',
+      span: 12
+    },
+    {
+      dataIndex: 'departmentName',
+      label: '部门上司',
+      span: 12
+    },
+    {
+      dataIndex: 'majorName',
+      label: '岗位',
+      span: 24
+    },
+    {
+      dataIndex: 'hiredate',
+      label: '入职时间',
+      span: 12
+    },
+    {
+      dataIndex: 'avtelephoneatar',
+      label: '手机',
+      span: 12
+    },
+    {
+      dataIndex: 'qq',
+      label: 'QQ',
+      span: 12
+    },
+    {
+      dataIndex: 'avtelephoneatarName',
+      label: '微信',
+      span: 12
+    },
+    {
+      dataIndex: 'phone',
+      label: '电话',
+      span: 12
+    },
+    {
+      dataIndex: 'email',
+      label: '邮箱',
+      span: 12
+    },
+    {
+      dataIndex: 'gender',
+      label: '性别',
+      span: 12
+    },
+    {
+      dataIndex: 'birthday',
+      label: '出生日期',
+      span: 12
+    },
+    {
+      dataIndex: 'position',
+      label: '民族',
+      span: 12
+    },
+    {
+      dataIndex: 'marriage',
+      label: '婚姻状况',
+      span: 12
+    },
+    {
+      dataIndex: 'IDcards',
+      label: '身份证',
+      span: 12
+    },
+    {
+      dataIndex: 'IDcardsValidity',
+      label: '身份证有效期',
+      span: 12
+    },
+    {
+      dataIndex: 'IDcardsImgA',
+      label: '身份证扫描件',
+      span: 12
+    },
+    {
+      dataIndex: 'nativePlace',
+      label: '籍贯',
+      span: 12
+    },
+    {
+      dataIndex: 'householdRegistrationType',
+      label: '户口类型',
+      span: 12
+    },
+    {
+      dataIndex: 'registeredResidence',
+      label: '户口所在地',
+      span: 24,
+      editCellType: 'textarea'
+    },
+    {
+      dataIndex: 'living',
+      label: '现居住地',
+      span: 24,
+      editCellType: 'textarea'
+    },
+    {
+      dataIndex: 'emergencyContacts',
+      label: '紧急联系人',
+      span: 24,
+      editCellType: 'textarea'
+    },
+    {
+      dataIndex: 'graduateInstitutions',
+      label: '毕业院校',
+      span: 24
+    },
+    {
+      dataIndex: 'major',
+      label: '所学专业',
+      span: 12
+    },
+    {
+      dataIndex: 'education',
+      label: '毕业学历',
+      span: 12
+    },
+    {
+      dataIndex: 'graduationTime',
+      label: '毕业时间',
+      span: 12
+    },
+    {
+      dataIndex: 'graduateInstitutionsName',
+      label: '毕业证书',
+      span: 12
+    },
+    {
+      dataIndex: 'certificate',
+      label: '学位证书',
+      span: 12
+    },
+    {
+      dataIndex: 'diploma',
+      label: '职称',
+      span: 12
+    },
+    {
+      dataIndex: 'stay',
+      label: '个人简历电子档',
+      span: 12
+    },
+    {
+      dataIndex: 'stayName',
+      label: '原单位离职证明',
+      span: 12
+    },
+    {
+      dataIndex: 'remittanceName',
+      label: '收款人户名',
+      span: 12
+    },
+    {
+      dataIndex: 'salaryBank',
+      label: '收款银行',
+      span: 12
+    },
+    {
+      dataIndex: 'bankName',
+      label: '收款开户银行名称',
+      span: 24
+    },
+    {
+      dataIndex: 'bankNumber',
+      label: '收款帐号',
+      span: 12
+    },
+    {
+      dataIndex: 'coupletNumber',
+      label: '联行号',
+      span: 12
+    },
+    {
+      dataIndex: 'salaryCard',
+      label: '银行卡号',
+      span: 24
+    },
+    {
+      dataIndex: 'salaryBankName',
+      label: '开户行',
+      span: 24,
+      editCellType: 'textarea'
+    }
+  ]
+  return (
+    <div>
+      <Row>
+        <Col span={8}>
+          <h2 className="text-gray-500">员工详情</h2>
+        </Col>
+        <Col span={16} className="zh-text-right zh-gray">
+          XXX创建于XXX
+        </Col>
+        <Col span={22}>
+          <h2 className="text-2xl pb-4">张三</h2>
+        </Col>
+        <Col span={2} />
+      </Row>
+      <EditableForm columns={columns} type="employee" />
+    </div>
+  )
+}
+
+export default EmployeeForm

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

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react'
+import { Col, Row } from 'antd'
+import consts from '@/consts'
+import { connect } from 'dva'
+import EmployeeForm from './EmployeeForm.jsx'
+import EmployeeLowerList from './EmployeeLowerList.jsx'
+import EmployeeTabList from './EmployeeTabList.jsx'
+import { apiStaffDetail } from '@/services/staff'
+
+const EmployeeDetail = props => {
+  const { dispatch, shouldUpdate, visible, dataId = '' } = props
+  const [state, setState] = useState({
+    loading: false,
+    data: {}
+  })
+  const initData = async id => {
+    setState({ ...state, loading: true })
+    const {
+      data: { data = {} },
+      code = -1
+    } = await apiStaffDetail(id)
+    if (code === consts.RET_CODE.SUCCESS) {
+      if (shouldUpdate) {
+        dispatch({
+          type: 'refresh/commitAction',
+          payload: 'contact'
+        })
+      }
+      setState({ ...state, data, loading: false })
+    }
+  }
+  useEffect(() => {
+    shouldUpdate && initData(dataId)
+  }, [shouldUpdate])
+  useEffect(() => {
+    visible && initData(dataId)
+  }, [visible])
+  return (
+    <div className="sheet-box">
+      <Row>
+        <Col span={12} className="sheet-box-left">
+          <div className="sheet-left-panel zh-pd-right-15">
+            <EmployeeForm />
+          </div>
+        </Col>
+        <Col span={12} className="sheet-box-right">
+          <EmployeeLowerList />
+          <EmployeeTabList />
+        </Col>
+      </Row>
+    </div>
+  )
+}
+
+// export default EmployeeDetail
+export default connect(({ refresh, single }) => ({
+  visible: single.drawer.visible,
+  shouldUpdate: refresh.contact
+}))(EmployeeDetail)

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

@@ -9,9 +9,6 @@ import { ModalForm, ProFormText } from '@ant-design/pro-form'
 const RoleMenu = props => {
   const { dispatch, departments = [], onSelect } = props
   const { DirectoryTree } = Tree
-  const [state, setState] = useState({
-    selestValue: ''
-  })
 
   const initData = () => {
     dispatch({
@@ -21,7 +18,7 @@ const RoleMenu = props => {
   const handleAddDepartment = async values => {
     const { code = -1 } = await apiaddDepartment({ ...values })
     if (code === consts.RET_CODE.SUCCESS) {
-      message.success('新增成功')
+      // message.success('新增成功')
       initData()
     }
   }
@@ -38,15 +35,12 @@ const RoleMenu = props => {
       onSelect(id)
     }
   }
-  const onChange = selestValue => {
-    setState({ ...state, selestValue })
-  }
 
   const onExpand = () => {}
 
   return (
     <div className="h-full w-max-234px rounded-4px roleMenu">
-      <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] flex justify-around items-center">
+      <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>
         <ModalForm
           title="创建部门"
@@ -69,9 +63,7 @@ const RoleMenu = props => {
               style={{ width: '100%' }}
               placeholder="请选择上司"
               treeDefaultExpandAll
-              onChange={onChange}
               treeData={departments}
-              value={state.selestValue}
               allowClear
             />
           </Form.Item>

src/pages/Staff/Employee/index.jsx

@@ -1,11 +1,31 @@
 import React, { useState, useEffect } from 'react'
 import consts from '@/consts'
 import ProTable from '@ant-design/pro-table'
+import { useModal } from '@/components/Modal'
 import RoleMenu from '@/pages/Staff/Employee/components/RoleMenu'
 import { queryStaff } from '@/services/staff'
 import { useTableScroll } from '@/hooks/useAutoTable'
+import EmployeeDetail from '@/pages/staff/Employee/components/EmployeeDetail'
 
 const Employee = () => {
+  const [selectKeys, setSelectKeys] = useState([])
+  const [state, setState] = useState({
+    params: { id: '0' }
+  })
+  const { toggleDrawer, setDrawerProps } = useModal()
+  // 展示员工详情
+  const showDrawer = () => {
+    setDrawerProps({
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      children: <EmployeeDetail />
+    })
+    toggleDrawer()
+  }
   const columns = [
     {
       title: '工号',
@@ -19,7 +39,14 @@ const Employee = () => {
       dataIndex: 'username',
       key: 'username',
       search: false,
-      width: 50
+      width: 50,
+      render: (username, record) => (
+        <span
+          onClick={() => showDrawer(record.id)}
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          {username}
+        </span>
+      )
     },
     {
       title: '手机',
@@ -71,10 +98,6 @@ const Employee = () => {
       width: 50
     }
   ]
-  const [selectKeys, setSelectKeys] = useState([])
-  const [state, setState] = useState({
-    params: { id: 'McjlMdO0O0Oi' }
-  })
   const { getScrollRef } = useTableScroll(columns, selectKeys)
   const onSelect = id => {
     setState({ ...state, params: { id } })