feat: 商机模块进度30%

src/pages/Customer/Business/components/AddBusiness.jsx

@@ -9,10 +9,11 @@ import ModalDrag from '@/components/DragmModal'
 import { Button, Row, Col, message } from 'antd'
 import { Plus } from '@icon-park/react'
 import React from 'react'
+import { connect } from 'umi'
 import { addBusiness } from '@/services/customer'
 
 const AddBusiness = props => {
-  const { groupList = [] } = props
+  const { groupList = [], reload } = props
   const layout = {
     layout: 'horizontal',
     labelCol: { flex: '100px' }
@@ -30,6 +31,7 @@ const AddBusiness = props => {
       onFinish={async values => {
         try {
           await addBusiness(values)
+          reload()
           return true
         } catch (error) {
           message.error('添加失败，请重试')
@@ -74,4 +76,6 @@ const AddBusiness = props => {
   )
 }
 
-export default AddBusiness
+export default connect(({ business }) => ({
+  groupList: business.groupList
+}))(AddBusiness)

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

@@ -1,21 +1,28 @@
 import { Row, Col } from 'antd'
 import React from 'react'
 import EditableForm from '@/components/EditableForm'
-import ChangeCompanyInput from '@/pages/customer/Contact/components/ChangeCompany'
-import { ChangeCompMap } from '@/pages/Customer/Contact/components/ChangeCompany'
+import ChangeCompanyInput, {
+  ChangeCompMap
+} from '@/pages/customer/Contact/components/ChangeCompany'
+import ChangeStaff from '../ChangeStaff/index'
 
 const Form = props => {
   const { business } = props
 
   const changeCopInputData = {
-    customerName: business.companyName,
-    customerId: business.companyId,
+    customerName: business.customerName,
+    customerId: business.customerId,
     targetName: business.name,
     dataId: business.id,
     actionPayload: ChangeCompMap.BUSINESS.key,
     title: ChangeCompMap.BUSINESS.title
   }
 
+  const changeStaffOpt = {
+    dataId: business.responsibleId,
+    actionPayload: ChangeCompMap.BUSINESS.key,
+    text: business.responsible
+  }
   const columns = [
     {
       dataIndex: 'name',
@@ -23,87 +30,29 @@ const Form = props => {
       span: 24
     },
     {
-      dataIndex: 'companyName',
+      dataIndex: 'customerId',
       label: '客户名称',
       editCellType: 'custom',
       customCell: <ChangeCompanyInput dataSource={changeCopInputData} />,
       span: 24
     },
     {
-      dataIndex: 'gender',
-      label: '性别',
-      editCellType: 'select',
-      span: 12
-    },
-    {
-      dataIndex: 'niceName',
-      label: '昵称',
-      span: 12
-    },
-    {
-      dataIndex: 'telephone',
-      label: '手机',
-      span: 12
-    },
-    {
-      dataIndex: 'qq',
-      label: 'QQ',
-      span: 12
-    },
-    {
-      dataIndex: 'phone',
-      label: '电话',
-      span: 12
-    },
-    {
-      dataIndex: 'email',
-      label: '邮箱',
-      span: 12
-    },
-    {
-      dataIndex: 'fax',
-      label: '传真',
-      span: 12
-    },
-    {
-      dataIndex: 'department',
-      label: '部门',
+      dataIndex: 'price',
+      label: '商机金额(元)',
       span: 12
     },
     {
-      dataIndex: 'position',
-      label: '职务',
+      dataIndex: 'finalTime',
+      label: '预计成交',
+      editCellType: 'datePicker',
       span: 12
     },
     {
-      dataIndex: 'office',
-      label: '办公室',
-      span: 24,
-      editCellType: 'textarea'
-    },
-    {
-      dataIndex: 'address',
-      label: '联系人地址',
-      span: 24,
-      editCellType: 'textarea'
-    },
-    {
-      dataIndex: 'ride',
-      label: '联系人乘车',
-      span: 24,
-      editCellType: 'textarea'
-    },
-    {
-      dataIndex: 'landmarks',
-      label: '联系人地标',
-      span: 24,
-      editCellType: 'textarea'
-    },
-    {
-      dataIndex: 'price',
-      label: '商机金额',
-      span: 24,
-      editCellType: 'textarea'
+      dataIndex: 'responsibleId',
+      label: '负责人',
+      editCellType: 'custom',
+      customCell: <ChangeStaff dataSource={changeStaffOpt} />,
+      span: 24
     },
     {
       dataIndex: 'remark',
@@ -117,22 +66,22 @@ const Form = props => {
     <div>
       <Row>
         <Col span={8}>
-          <h2 className="text-gray-500">联系人</h2>
+          <h2 className="text-gray-500">商机</h2>
         </Col>
         {/* className={[ 'text-right', styles.textMuted ]} */}
-        <Col span={16} className="zh-text-right zh-gray">
+        <Col span={16} className="text-right text-gray-500">
           {business.staffName} 创建于{business.createTime}
         </Col>
         <Col span={22}>
-          <h2 className="text-2xl pb-4">{business.clientName}</h2>
+          <h2 className="text-2xl pb-4">{business.name}</h2>
         </Col>
         <Col span={2} />
       </Row>
       <EditableForm
         dataSource={business}
         columns={columns}
-        tartgetUrl="/client/update"
-        type="contact"
+        tartgetUrl="/business/update"
+        type="business"
       />
     </div>
   )

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

@@ -1,6 +1,6 @@
 import { Row, Col, Spin, Tooltip } from 'antd'
 import React, { useState, useEffect } from 'react'
-// import Form from './Form.jsx'
+import Form from './Form.jsx'
 // import TabList from './TabList.jsx'
 // import LowerList from './LowerList.jsx'
 import { getBusinessDetailById } from '@/services/customer'
@@ -77,8 +77,8 @@ const Detail = props => {
                 </Tooltip>
               </div>
             ) : null}
-            <div className="sheet-left-panel zh-pd-right-15">
-              {/* <Form business={state.business} /> */}
+            <div className="sheet-left-panel pr-15px">
+              <Form business={state.business} />
             </div>
           </Col>
           <Col span={12} className="sheet-box-right">

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

@@ -0,0 +1,76 @@
+import React from 'react'
+import { useModal } from '@/components/Modal'
+import { LinkOne, Switch } from '@icon-park/react'
+import { Card, Tooltip } from 'antd'
+import { useDispatch } from 'dva'
+import consts from '@/consts'
+import StaffModal from '@/pages/Staff/Employee/components/StaffModal'
+import styles from './index.less'
+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 refreshClient = () => {
+    dispatch({
+      type: 'refresh/commitAction',
+      payload: actionPayload
+    })
+  }
+  const handleConnectCustomer = () => {
+    setModalProps({
+      width: '60vw',
+      modalRender: () => <StaffModal onSelect={refreshClient} dataId={dataId} />,
+      onCancel: () => toggleModal()
+    })
+    toggleModal()
+  }
+  const notValueRender = (
+    <div onClick={handleConnectCustomer} className={styles.notBusinessContent}>
+      <LinkOne size="14" />
+      <span className="ml-5px">关联负责人</span>
+    </div>
+  )
+
+  const handleCompanyClick = () => {
+    toggleDrawer()
+    setDrawerProps({
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      children: <EmployeeDetail dataId={dataId} />
+    })
+    toggleDrawer()
+  }
+  const normalValueRender = (
+    <Card size="small">
+      <div className="flex justify-between">
+        <div className={styles.nameContent} onClick={handleCompanyClick}>
+          {text}
+        </div>
+        <div className="w-55px">
+          <Tooltip
+            placement="right"
+            title="更换负责人"
+            className="ml-5px"
+            onClick={handleConnectCustomer}>
+            <span className={styles.switchIcon}>
+              <Switch />
+            </span>
+          </Tooltip>
+        </div>
+      </div>
+    </Card>
+  )
+  return (
+    <div className={styles.businessInput}>
+      {dataId !== consts.ENCRYPTION_ZERO ? normalValueRender : notValueRender}
+    </div>
+  )
+}
+
+export default ChangeStaff

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

@@ -0,0 +1,60 @@
+.businessInput {
+  padding: 8px 12px 6px;
+  color: @primary-color;
+  background: #f7f7f7;
+  border: 1px solid #f7f7f7;
+  &:hover {
+    background: #f2f2f2;
+    border-color: #f2f2f2;
+  }
+  :global(.ant-card-small > .ant-card-body) {
+    padding: 0.5rem;
+  }
+  .notBusinessContent {
+    cursor: pointer;
+    &:hover {
+      color: #967bbd;
+    }
+  }
+  .nameContent {
+    color: @primary-color;
+    cursor: pointer;
+    &:hover {
+      color: #967bbd;
+    }
+  }
+  .unlinkIcon {
+    padding: 0 3px;
+    color: #fd3995;
+    line-height: 1.15rem;
+    border: 1px solid #fd3995;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    &:hover {
+      color: #ffffff;
+      background-color: #fd3995;
+      border-color: #fd3995;
+      transition: all 0.2s ease-in-out;
+    }
+    // &:active {
+    //   box-shadow: 0 2px 5px rgb(0 0 0 / 15%) inset;
+    // }
+  }
+  .switchIcon {
+    padding: 0 3px;
+    color: #886ab5;
+    line-height: 1.15rem;
+    border: 1px solid #886ab5;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    &:hover {
+      color: #ffffff;
+      background-color: #886ab5;
+      border-color: #886ab5;
+      transition: all 0.2s ease-in-out;
+    }
+    // &:active {
+    //   box-shadow: 0 2px 5px rgb(0 0 0 / 15%) inset;
+    // }
+  }
+}

src/pages/Customer/Business/index.jsx

@@ -1,32 +1,26 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { Select } from 'antd'
-import { useRequest } from 'umi'
-import { getBusinessGroupList, getBusinessList } from '@/services/customer'
+import { connect } from 'umi'
+import { getBusinessList } from '@/services/customer'
 import ProTable from '@ant-design/pro-table'
 import consts from '@/consts'
 import AddBusiness from './components/AddBusiness'
 import Detail from './components/BusinessDetail'
 import { useModal } from '@/components/Modal'
 
-const Business = () => {
+const Business = ({ dispatch, groupList }) => {
+  const tableRef = useRef(null)
   const { toggleDrawer, setDrawerProps } = useModal()
   const [state, setState] = useState({
-    groupList: [],
-    activeItem: null
+    orderIds: []
   })
-  useRequest(getBusinessGroupList, {
-    onSuccess: result => {
-      setState({
-        ...state,
-        groupList: result.map(item => ({
-          label: item.name,
-          value: item.id,
-          items: item.status
-        })),
-        activeItem: result[0]?.id
+  useEffect(() => {
+    if (!groupList.length) {
+      dispatch({
+        type: 'business/fetchGroup'
       })
     }
-  })
+  }, [])
 
   // 展示drawer
   const showDrawer = id => {
@@ -37,7 +31,7 @@ const Business = () => {
         height: '100vh',
         overflowY: 'hidden'
       },
-      children: <Detail dataId={id} orderIds={state.orderIds} />
+      children: <Detail dataId={id} orderIds={state.orderIds} group={groupList} />
     })
     toggleDrawer()
   }
@@ -60,7 +54,8 @@ const Business = () => {
     },
     {
       dataIndex: 'businessGroupName',
-      title: '装机状态组'
+      title: '装机状态组',
+      width: '20%'
     },
     {
       dataIndex: 'name',
@@ -79,7 +74,7 @@ const Business = () => {
       title: '最后跟进时间'
     },
     {
-      dataIndex: 'createTime ',
+      dataIndex: 'createTime',
       title: '创建时间'
     },
     {
@@ -93,13 +88,13 @@ const Business = () => {
         <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] flex justify-around items-center">
           <div className="w-1/2 text-md">商机漏斗</div>
           <div className="w-1/2">
-            {state.activeItem && (
+            {groupList[0]?.value && (
               <Select
                 size="small"
                 className="w-full"
                 bordered={false}
-                options={state.groupList}
-                defaultValue={state.activeItem}
+                options={groupList}
+                defaultValue={groupList[0]?.value}
               />
             )}
           </div>
@@ -112,6 +107,7 @@ const Business = () => {
         <div className="ml-8 bg-white p-4 shadow-card">
           <ProTable
             bordered
+            actionRef={tableRef}
             rowKey={record => record.id}
             columns={columns}
             request={async (params, sort, filter) => {
@@ -119,6 +115,7 @@ const Business = () => {
                 code = -1,
                 data: { business = [], total = 0 }
               } = await getBusinessList({ ...params, ...sort, ...filter })
+              setState({ ...state, orderIds: business.map(item => item.id) })
               return {
                 data: business,
                 success: code === consts.RET_CODE.SUCCESS,
@@ -127,7 +124,13 @@ const Business = () => {
             }}
             search={false}
             toolbar={{
-              actions: [<AddBusiness key="add" groupList={state.groupList} />]
+              actions: [
+                <AddBusiness
+                  key="add"
+                  groupList={state.groupList}
+                  reload={() => tableRef.current?.reload()}
+                />
+              ]
             }}
           />
         </div>
@@ -136,4 +139,6 @@ const Business = () => {
   )
 }
 
-export default Business
+export default connect(({ business }) => ({
+  groupList: business.groupList
+}))(Business)

src/pages/Customer/Business/model.js

@@ -0,0 +1,36 @@
+import consts from '@/consts'
+import { getBusinessGroupList } from '@/services/customer'
+
+export default {
+  namespace: 'business',
+  state: {
+    groupList: []
+  },
+  effects: {
+    *fetchGroup({ payload }, { call, put }) {
+      const response = yield call(getBusinessGroupList, payload)
+      if (response && response.code === consts.RET_CODE.SUCCESS) {
+        yield put({
+          type: 'changeState',
+          payload: {
+            key: 'groupList',
+            data: response.data.map(item => ({
+              label: item.name,
+              value: item.id,
+              items: item.status
+            }))
+          }
+        })
+      }
+    }
+  },
+  reducers: {
+    // 通用reducer
+    changeState(state, action) {
+      return {
+        ...state,
+        [action.payload.key]: action.payload.data
+      }
+    }
+  }
+}

src/pages/Customer/Test/index.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
 
 export default function Index() {
-  return <div />
+  return (
+    <div>
+      <iconpark-icon name="address-book" />
+    </div>
+  )
 }