feat: 1

src/components/EditableForm/src/editableFormItem.jsx

@@ -68,8 +68,8 @@ const EditableFormItem = ({
 
   // 单独设置一个依赖，防止dataId变化
   useEffect(() => {
+    let node = null
     function findTreeNode(tree, v) {
-      let node = null
       tree?.some(n => {
         if (n.value === v || n.id === v || n.key === v) {
           node = n
@@ -96,6 +96,7 @@ const EditableFormItem = ({
       }
       return options?.find(item => item.value === record)?.label || ''
     }
+
     setState({
       ...state,
       val: record,

src/components/EditableForm/src/useOptions.js

@@ -5,10 +5,16 @@ const genderOptions = [
   { label: '男', value: '男' },
   { label: '女', value: '女' }
 ]
+
+const marriageOptions = [
+  { label: '未婚', value: '0' },
+  { label: '已婚', value: '1' }
+]
 const typeEnum = {
   NATUREIDS: 'natureIds',
   GENDER: 'gender',
-  DEPARTMENTID: 'departmentId'
+  DEPARTMENTID: 'departmentId',
+  MARRIAGE: 'marriage'
 }
 
 export default function useOptions(type) {
@@ -41,5 +47,8 @@ export default function useOptions(type) {
     return store.getState().staff.departments
   }
 
+  if (type === typeEnum.MARRIAGE) {
+    return marriageOptions
+  }
   return null
 }

src/pages/Customer/Business/components/BusinessDetail/Form.jsx

@@ -5,6 +5,7 @@ import ChangeCompanyInput, {
   ChangeCompMap
 } from '@/pages/customer/Contact/components/ChangeCompany'
 import ChangeStaff from '../ChangeStaff/index'
+import Step from './Step/index'
 
 const Form = props => {
   const { business } = props
@@ -19,7 +20,8 @@ const Form = props => {
   }
 
   const changeStaffOpt = {
-    dataId: business.responsibleId,
+    responsibleId: business.responsibleId,
+    dataId: business.id,
     actionPayload: ChangeCompMap.BUSINESS.key,
     text: business.responsible
   }
@@ -68,7 +70,6 @@ const Form = props => {
         <Col span={8}>
           <h2 className="text-gray-500">商机</h2>
         </Col>
-        {/* className={[ 'text-right', styles.textMuted ]} */}
         <Col span={16} className="text-right text-gray-500">
           {business.staffName} 创建于{business.createTime}
         </Col>
@@ -76,6 +77,7 @@ const Form = props => {
           <h2 className="text-2xl pb-4">{business.name}</h2>
         </Col>
         <Col span={2} />
+        <Step />
       </Row>
       <EditableForm
         dataSource={business}

src/pages/Customer/Business/components/BusinessDetail/Step/index.jsx

@@ -0,0 +1,54 @@
+import { Select } from 'antd'
+import React from 'react'
+import styles from './index.less'
+
+const Step = () => {
+  return (
+    <div className={['busi-state', styles.businessStep].join(' ')}>
+      <div className="busi-state-item state-suc">
+        <span className="title ">验证客户</span>
+        <div className="state-circle circle-left" />
+        <div className="state-arrow arrow-right" />
+      </div>
+      <div className="busi-state-item state-doing">
+        <span className="title">需求分析</span>
+        <div className="state-arrow arrow-left" />
+        <div className="state-arrow arrow-right" />
+      </div>
+      <div className="busi-state-item state-doing">
+        <span className="title">需求分析</span>
+        <div className="state-arrow arrow-left" />
+        <div className="state-arrow arrow-right" />
+      </div>
+      <div className="busi-state-item state-doing">
+        <span className="title">需求分析</span>
+        <div className="state-arrow arrow-left" />
+        <div className="state-arrow arrow-right" />
+      </div>
+      <div className="busi-state-item state-undo">
+        <span className="title">方案/报价</span>
+        <div className="state-arrow arrow-left" />
+        <div className="state-arrow arrow-right" />
+      </div>
+      <div className="busi-state-item state-undo">
+        <span className="title">
+          <Select
+            dropdownStyle={{ width: '60px' }}
+            placeholder="结束"
+            dropdownMatchSelectWidth={false}
+            bordered={false}
+            options={[
+              { label: '赢单', value: '1' },
+              { label: '输单', value: '2' },
+              { label: '无效', value: '3' }
+            ]}
+          />
+        </span>
+        <div className="state-arrow arrow-left" />
+        <div className="state-circle circle-right" />
+      </div>
+    </div>
+  )
+}
+
+export default Step

src/pages/Customer/Business/components/BusinessDetail/Step/index.less

@@ -0,0 +1,13 @@
+.businessStep {
+  :global(.ant-select-arrow) {
+    right: 6px;
+    color: #967bbd;
+  }
+
+  :global(.ant-select-selection-placeholder) {
+    color: #967bbd;
+  }
+  :global(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
+    padding: 0;
+  }
+}

src/pages/Customer/Business/components/BusinessDetail/index.jsx

@@ -8,6 +8,7 @@ import consts from '@/consts'
 import { connect } from 'dva'
 import { Up, Down } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
+import './index.less'
 
 const Detail = props => {
   const { dispatch, shouldUpdate, visible, dataId = '', orderIds = [] } = props

src/pages/Customer/Business/components/BusinessDetail/index.less

@@ -0,0 +1,140 @@
+.busi-state {
+  display: flex;
+  padding-left: 20px;
+  font-size: 13px;
+}
+.busi-state-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 38px;
+  margin: 5px 5px 5px 0;
+  padding: 10px 10px 10px 30px;
+  border-top: 2px solid #ebebeb;
+  border-bottom: 2px solid #ebebeb;
+}
+.busi-state-item:first-child {
+  padding: 10px 10px 10px 10px;
+}
+.busi-state-item .state-arrow {
+  position: absolute;
+  width: 38px;
+  height: 38px;
+  background-color: #ffffff;
+  border-top: 2px solid #ebebeb;
+  border-right: 2px solid #ebebeb;
+  -webkit-transform: scale(0.707) rotate(45deg);
+  transform: scale(0.707) rotate(45deg);
+}
+.state-suc span.title {
+  position: relative;
+  z-index: 999;
+  cursor: pointer;
+}
+.state-doing span.title,
+.state-undo span.title {
+  position: relative;
+  z-index: 999;
+  color: #967bbd;
+  cursor: pointer;
+}
+.state-invalid span.title {
+  position: relative;
+  z-index: 999;
+}
+.busi-state-item .state-circle {
+  position: absolute;
+  z-index: -1;
+  width: 38px;
+  height: 38px;
+  background-color: #ffffff;
+  border-radius: 19px;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.circle-left {
+  top: -2px;
+  left: -17px;
+  border-bottom: 2px solid #ebebeb;
+  border-left: 2px solid #ebebeb;
+}
+.circle-right {
+  top: -2px;
+  right: -15.5px;
+  z-index: 1;
+  border-top: 2px solid #ebebeb;
+  border-right: 2px solid #ebebeb;
+}
+.arrow-right {
+  top: -2px;
+  right: -19px;
+  z-index: 1;
+}
+.arrow-left {
+  top: -2px;
+  left: -18px;
+}
+.state-suc .circle-left,
+.state-suc .circle-right {
+  background-color: #967bbd;
+  border-color: #967bbd;
+}
+.state-suc {
+  color: #ffffff;
+  background-color: #967bbd;
+  border-top: 2px solid #967bbd;
+  border-bottom: 2px solid #967bbd;
+}
+.state-suc .arrow-right {
+  background-color: #967bbd;
+  border-color: #967bbd;
+}
+.state-doing {
+  color: #967bbd;
+  background-color: #ffffff;
+  border-top: 2px solid #967bbd;
+  border-bottom: 2px solid #967bbd;
+}
+.state-doing .arrow-left,
+.state-doing .arrow-right,
+.state-doing .circle-left,
+.state-doing .circle-right {
+  background-color: #ffffff;
+  border-color: #967bbd;
+}
+.state-invalid .circle-left,
+.state-invalid .circle-right,
+.state-invalid .state-arrow,
+.state-invalid .state-circle {
+  background-color: #ebebeb;
+  border-color: #ebebeb;
+}
+.state-fail {
+  color: #ffffff;
+  background-color: #ff6767;
+  border-top: 2px solid #ff6767;
+  border-bottom: 2px solid #ff6767;
+}
+.state-fail .arrow-left {
+  background-color: #ffffff;
+  border-color: #ff6767;
+}
+.state-fail .circle-left,
+.state-fail .circle-right {
+  background-color: #ff6767;
+  border-color: #ff6767;
+}
+.state-invalid {
+  color: #666666;
+  background-color: #ebebeb;
+  border-top: 2px solid #ebebeb;
+  border-bottom: 2px solid #ebebeb;
+}
+.state-invalid .arrow-left {
+  background-color: #ffffff;
+  border-color: #ebebeb;
+}
+.state-invalid .arrow-right {
+  background-color: #ebebeb;
+  border-color: #ebebeb;
+}

src/pages/Customer/Business/components/ChangeStaff/index.jsx

@@ -11,7 +11,7 @@ import EmployeeDetail from '@/pages/Staff/Employee/components/EmployeeDetail'
 const ChangeStaff = props => {
   const dispatch = useDispatch()
   const { toggleModal, setModalProps, toggleDrawer, setDrawerProps } = useModal()
-  const { text = '', dataId, actionPayload } = props.dataSource
+  const { text = '', dataId, responsibleId, actionPayload } = props.dataSource
   const refreshClient = () => {
     dispatch({
       type: 'refresh/commitAction',
@@ -21,7 +21,9 @@ const ChangeStaff = props => {
   const handleConnectCustomer = () => {
     setModalProps({
       width: '60vw',
-      modalRender: () => <StaffModal onSelect={refreshClient} dataId={dataId} />,
+      modalRender: () => (
+        <StaffModal onSelect={refreshClient} id={dataId} postUrl="/business/change/responsible" />
+      ),
       onCancel: () => toggleModal()
     })
     toggleModal()
@@ -68,7 +70,7 @@ const ChangeStaff = props => {
   )
   return (
     <div className={styles.businessInput}>
-      {dataId !== consts.ENCRYPTION_ZERO ? normalValueRender : notValueRender}
+      {responsibleId !== consts.ENCRYPTION_ZERO ? normalValueRender : notValueRender}
     </div>
   )
 }

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

@@ -22,7 +22,7 @@ const ChangeSupervisor = props => {
   const handleConnectStaff = () => {
     setModalProps({
       width: '60vw',
-      modalRender: node => <StaffModal onSelect={refreshStaff} node={node} clientId={clientId} />,
+      modalRender: () => <StaffModal onSelect={refreshStaff} id={clientId} />,
       onCancel: () => toggleModal()
     })
     toggleModal()

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

@@ -88,6 +88,7 @@ const EmployeeForm = props => {
     {
       dataIndex: 'marriage',
       label: '婚姻状况',
+      editCellType: 'select',
       span: 12
     },
     {

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

@@ -5,10 +5,10 @@ import { useDispatch } from 'dva'
 import { useDebounceFn } from 'ahooks'
 import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
 import { queryStaff } from '@/services/staff'
-import { apiChangeSupervisor } from '@/services/staff'
 import styles from './index.less'
+import request from '@/basic/utils/request'
 
-const StaffModal = ({ clientId, onSelect }) => {
+const StaffModal = ({ id, onSelect, postUrl = '/staff/change/supervisor' }) => {
   const scrollRef = useRef()
   const dispatch = useDispatch()
   const [state, setState] = useState({
@@ -55,8 +55,8 @@ const StaffModal = ({ clientId, onSelect }) => {
   }
 
   // 关联上司
-  const connectStaff = async supervisorId => {
-    const { code = -1 } = await apiChangeSupervisor({ id: clientId, supervisorId })
+  const connectStaff = async dataId => {
+    const { code = -1 } = await request.post(postUrl, { data: { id, dataId } })
     if (code === consts.RET_CODE.SUCCESS) {
       onSelect()
       closeModal()

src/pages/Staff/Employee/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import consts from '@/consts'
 import ProTable from '@ant-design/pro-table'
 import { Button, Popconfirm, message } from 'antd'
@@ -12,7 +12,7 @@ import { connect } from 'dva'
 
 const Employee = props => {
   const { dispatch } = props
-  const [selectKeys, setSelectKeys] = useState([])
+  const [selectKeys] = useState([])
   const [state, setState] = useState({
     params: { id: '0' }
   })

src/services/staff.js

@@ -22,11 +22,7 @@ export async function apiStaffDetail(id) {
   return data
 }
 
-/**
- * 员工更换上司
- * @param {*} payload
- * @returns
- */
+/** 员工更换上司 */
 export async function apiChangeSupervisor(payload) {
   const data = await request.post('/staff/change/supervisor', { data: { ...payload } })
   return data

windi.config.ts

@@ -25,6 +25,9 @@ export default defineConfig({
       },
       boxShadow: {
         card: '0 0 13px 0 rgba(74, 53, 107, 0.08)'
+      },
+      zIndex: {
+        max: 999
       }
     }
   }