feat: 联系人、客户功能完善

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "analyze": "cross-env ANALYZE=1 umi build",
     "build": "umi build",
-    "deploy": "npm run site && npm run gh-pages",
+    "deploy": "auto-deploy build -t win",
+    "deploy-gh-pages": "npm run site && npm run gh-pages",
     "dev": "npm run start:dev",
     "fetch:blocks": "pro fetch-blocks && npm run prettier",
     "gh-pages": "gh-pages -d dist",

src/pages/Customer/Company/components/PersonLabel/index.jsx

@@ -61,14 +61,13 @@ const PersonLabel = props => {
   } = props
   const [dropdownType, setDropdownType] = useState(DropdownTypeEnum.check)
 
-  if (modeType === 0) {
-    // console.log('tagIds', tagIds)
-  }
-  const [checkedIds, setCheckedIds] = useState([...tagIds])
+  const [checkedIds, setCheckedIds] = useState([])
 
-  if (modeType === 0) {
-    // console.log('222', checkedIds)
-  }
+  useEffect(() => {
+    if (modeType === LabelModeType.column && tagIds.length) {
+      setCheckedIds(tagIds)
+    }
+  }, [tagIds])
 
   const [showOkBtn, setShowOkBtn] = useState(false)
   const initData = () => {
@@ -150,7 +149,9 @@ const DropDownMenu = props => {
     initCallBack
   } = props
 
-  // console.log('checkedIds', checkedIds)
+  if (tagColumn === 0) {
+    console.log('checkedIds', checkedIds)
+  }
 
   const [activeState, setActiveState] = useState({
     id: '',

src/pages/Customer/Company/index.jsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import ProTable from '@ant-design/pro-table'
-import useAutoTable, { useTableScroll } from '@/hooks/useAutoTable'
+import { useTableScroll } from '@/hooks/useAutoTable'
 import { Button, message } from 'antd'
 import { connect } from 'dva'
 import consts from '@/consts'
@@ -20,45 +20,59 @@ import { apiBatchLink } from '@/services/customer'
 const Company = props => {
   const { personTagColorMap, teamTagColorMap, personTags, teamTags, dispatch } = props
   const { toggleDrawer, setDrawerProps } = useModal()
-  // const needSubtractHeight = 48 + 48 + 48 + 64 + 24 + 32 // 需要被裁掉的高度
-  // const needSubtractWidth = 48 + 48 + 48 // 需要被裁掉的高度
+  const tRef = useRef(null)
+  const [selectKeys, setSelectKeys] = useState([])
+
+  const [tagState, setTagState] = useState({
+    tagIds: [],
+    tagCooperationIds: []
+  })
+  const tag = useMemo(() => {
+    const personTagMap = {}
+    const teamTagMap = {}
+    personTags.forEach(item => {
+      personTagMap[item.id] = { text: item.name }
+    })
+    teamTags.forEach(item => {
+      teamTagMap[item.id] = { text: item.name }
+    })
 
-  // const [x, y] = useAutoTable(needSubtractHeight, needSubtractWidth)
+    return { personTagMap, teamTagMap }
+  }, [personTags, teamTags])
 
   const [state, setState] = useState({
-    data: [],
-    total: 0,
     id: '',
+    params: {},
     visible: false
   })
   const [addCompany, setAddCompany] = useState({
     visible: false,
     loading: false
   })
-  const initData = async payload => {
-    const {
-      code = -1,
-      data: { customer = [], total = 0 } = { customer: [], total: 0 }
-    } = await queryCompany(payload)
-    if (code === consts.RET_CODE.SUCCESS) {
-      setState({ ...state, data: customer, total })
-    }
+
+  // 重置到默认值，包括表单
+  const initData = () => {
+    tRef.current.reset()
   }
+
+  // 刷新
+  const refreshData = () => {
+    tRef.current.reload()
+  }
+
   const handleAddCompany = async values => {
     setAddCompany({ ...addCompany, loading: true })
     const params = formatValues(values)
     const { code = -1 } = await apiAddCompany(params)
     if (code === consts.RET_CODE.SUCCESS) {
       message.success('新增成功')
-      setState({ ...state, data: values })
     }
     // 请求完了
     setAddCompany({ ...addCompany, loading: false, visible: false })
-    await initData()
+    initData()
   }
 
   useEffect(() => {
-    initData()
     if (!personTags.length) {
       dispatch({
         type: 'company/fetchTags',
@@ -73,11 +87,11 @@ const Company = props => {
     }
   }, [])
   const handleSearch = value => {
-    initData({ search: value })
+    setState({ ...state, params: { ...state.params, search: value, current: 1 } })
   }
   const onDistrictChange = value => {
     const [province = '', city = '', area = ''] = value
-    initData({ province, city, area })
+    setState({ ...state, params: { ...state.params, current: 1, province, city, area } })
   }
 
   // 展示drawer
@@ -113,6 +127,7 @@ const Company = props => {
       dataIndex: 'biaoqian',
       key: 'biaoqian',
       width: 100,
+      valueEnum: tag.personTagMap,
       render: (_, record) => (
         <div className="zh-align-center zh-flex-wrap">
           {record.tagIds.map(item => (
@@ -127,39 +142,40 @@ const Company = props => {
             tagIds={record.tagIds}
             tagType={TagTypeEnum.PERSONTAG}
             tagColumn={TagDataTypeEnum.COMPANY}
-            checkCallBack={initData}
+            checkCallBack={refreshData}
+            modeType={LabelModeType.column}>
+            <IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
+          </PersonLabel>
+        </div>
+      )
+    },
+    {
+      title: '协作标签',
+      dataIndex: 'tagCooperationIds',
+      key: 'tagCooperationIds',
+      width: 80,
+      valueEnum: tag.teamTagMap,
+      render: (_, record) => (
+        <div className="zh-align-center zh-flex-wrap">
+          {record.tagCooperationIds.map(item => (
+            <span
+              key={record.id + item}
+              className="zh-circle-icon zh-mg-right-3"
+              style={{ backgroundColor: personTagColorMap[item] }}
+            />
+          ))}
+          <PersonLabel
+            dataId={record.id}
+            tagIds={record.tagCooperationIds}
+            tagType={TagTypeEnum.TEAM}
+            tagColumn={TagDataTypeEnum.COMPANY}
+            checkCallBack={refreshData}
             modeType={LabelModeType.column}>
             <IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
           </PersonLabel>
         </div>
       )
     },
-    // {
-    //   title: '协作标签',
-    //   dataIndex: 'tagCooperationIds',
-    //   key: 'tagCooperationIds',
-    //   width: 80,
-    //   render: (_, record) => (
-    //     <div className="zh-align-center zh-flex-wrap">
-    //       {record.tagCooperationIds.map(item => (
-    //         <span
-    //           key={record.id + item}
-    //           className="zh-circle-icon zh-mg-right-3"
-    //           style={{ backgroundColor: personTagColorMap[item] }}
-    //         />
-    //       ))}
-    //       <PersonLabel
-    //         dataId={record.id}
-    //         tagIds={record.tagCooperationIds}
-    //         tagType={TagTypeEnum.TEAM}
-    //         tagColumn={TagDataTypeEnum.COMPANY}
-    //         checkCallBack={initData}
-    //         modeType={LabelModeType.column}>
-    //         <IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
-    //       </PersonLabel>
-    //     </div>
-    //   )
-    // },
     {
       title: '联系人',
       dataIndex: 'clientTotal',
@@ -242,16 +258,10 @@ const Company = props => {
     }
   })
 
-  const [selectKeys, setSelectKeys] = useState([])
   const hanleRowSelectChange = selectedRowKeys => {
     setSelectKeys(selectedRowKeys)
   }
 
-  const [tagState, setTagState] = useState({
-    tagIds: [],
-    tagCooperationIds: []
-  })
-
   const toolbarOptionsChange = (type, ids) => {
     setTagState({ ...tagState, [type]: ids })
   }
@@ -276,7 +286,68 @@ const Company = props => {
         tagType: TagTypeEnum.PERSONTAG
       })
     }
-    initData()
+    refreshData()
+  }
+
+  const renderTableAlert = ({ selectedRowKeys }) => {
+    return (
+      <div className="zh-flex-row">
+        <div className="zh-mg-right-5">
+          <PersonLabel
+            tagType={TagTypeEnum.PERSONTAG}
+            tagColumn={TagDataTypeEnum.COMPANY}
+            checkCallBack={toolbarOptionsChange}
+            modeType={LabelModeType.toolbar}>
+            {tagState.tagIds.length ? (
+              <Button>
+                {tagState.tagIds.map(item => (
+                  <span
+                    key={item}
+                    className="zh-circle-icon zh-mg-right-3"
+                    style={{ backgroundColor: personTagColorMap[item] }}
+                  />
+                ))}
+                <IconPark type="down" />
+              </Button>
+            ) : (
+              <Button>
+                个人标签
+                <IconPark type="down" />
+              </Button>
+            )}
+          </PersonLabel>
+        </div>
+        <div className="zh-mg-right-5">
+          <PersonLabel
+            tagType={TagTypeEnum.TEAMTAG}
+            tagColumn={TagDataTypeEnum.COMPANY}
+            checkCallBack={toolbarOptionsChange}
+            modeType={LabelModeType.toolbar}>
+            {tagState.tagCooperationIds.length ? (
+              <Button>
+                {tagState.tagCooperationIds.map(item => (
+                  <span
+                    key={item}
+                    className="zh-square-icon zh-mg-right-3"
+                    style={{ backgroundColor: teamTagColorMap[item] }}
+                  />
+                ))}
+                <IconPark type="down" />
+              </Button>
+            ) : (
+              <Button>
+                协作标签
+                <IconPark type="down" />
+              </Button>
+            )}
+          </PersonLabel>
+        </div>
+        <Button onClick={() => tagsSettingConfirm(selectedRowKeys)}>
+          <IconPark type="check" size={14} />
+          确认
+        </Button>
+      </div>
+    )
   }
 
   return (
@@ -284,10 +355,24 @@ const Company = props => {
       <ProTable
         rowKey={record => record.id}
         search={false}
+        actionRef={tRef}
+        params={state.params}
+        request={async (params, sort, filter) => {
+          const {
+            code = -1,
+            data: { customer = [], total = 0 } = { customer: [], total: 0 }
+          } = await queryCompany({ ...params, ...sort, ...filter })
+          return {
+            data: customer,
+            success: code === consts.RET_CODE.SUCCESS,
+            total
+          }
+        }}
         headerTitle="客户"
         bordered
         toolbar={{
           search: {
+            allowClear: true,
             onSearch: handleSearch
           },
           actions: [
@@ -299,76 +384,11 @@ const Company = props => {
           onChange: hanleRowSelectChange,
           type: 'checkbox'
         }}
-        tableAlertRender={({ selectedRowKeys }) => {
-          return (
-            <div className="zh-flex-row">
-              <div className="zh-mg-right-5">
-                <PersonLabel
-                  tagType={TagTypeEnum.PERSONTAG}
-                  tagColumn={TagDataTypeEnum.COMPANY}
-                  checkCallBack={toolbarOptionsChange}
-                  modeType={LabelModeType.toolbar}>
-                  {tagState.tagIds.length ? (
-                    <Button>
-                      {tagState.tagIds.map(item => (
-                        <span
-                          key={item}
-                          className="zh-circle-icon zh-mg-right-3"
-                          style={{ backgroundColor: personTagColorMap[item] }}
-                        />
-                      ))}
-                      <IconPark type="down" />
-                    </Button>
-                  ) : (
-                    <Button>
-                      个人标签
-                      <IconPark type="down" />
-                    </Button>
-                  )}
-                </PersonLabel>
-              </div>
-              {/* <div className="zh-mg-right-5">
-                <PersonLabel
-                  tagType={TagTypeEnum.TEAMTAG}
-                  tagColumn={TagDataTypeEnum.COMPANY}
-                  checkCallBack={toolbarOptionsChange}
-                  modeType={LabelModeType.toolbar}>
-                  {tagState.tagCooperationIds.length ? (
-                    <Button>
-                      {tagState.tagCooperationIds.map(item => (
-                        <span
-                          key={item}
-                          className="zh-square-icon zh-mg-right-3"
-                          style={{ backgroundColor: teamTagColorMap[item] }}
-                        />
-                      ))}
-                      <IconPark type="down" />
-                    </Button>
-                  ) : (
-                    <Button>
-                      协作标签
-                      <IconPark type="down" />
-                    </Button>
-                  )}
-                </PersonLabel>
-              </div> */}
-              <Button onClick={() => tagsSettingConfirm(selectedRowKeys)}>
-                <IconPark type="check" size={14} />
-                确认
-              </Button>
-            </div>
-          )
-        }}
+        tableAlertRender={renderTableAlert}
         scroll={getScrollRef}
         columnsStateMap={columnsStateMap}
         onColumnsStateChange={map => setColumnsStateMap(map)}
         columns={columns}
-        dataSource={state.data}
-        pagination={{
-          pageSize: consts.PAGE_SIZE,
-          total: state.total,
-          onChange: (page, size) => initData({ page, size })
-        }}
       />
     </div>
   )

src/pages/Customer/Contact/index.jsx

@@ -1,12 +1,11 @@
 import ContactDetail from '@/pages/Customer/Contact/components/ContactDetail'
 import Addcontact from '@/pages/Customer/Contact/components/AddContact'
 import ProTable from '@ant-design/pro-table'
-import { Button, message, Tag } from 'antd'
-import { connect } from 'dva'
-import React, { useEffect, useState } from 'react'
+import { Button, Input, message, Tag } from 'antd'
+import { connect, useParams } from 'dva'
+import React, { useEffect, useState, useRef, useMemo } from 'react'
 import consts from '@/consts'
 import LazyCascader from '@/components/LazyCascader'
-import { useDebounceFn } from 'ahooks'
 import { useModal } from '@/components/Modal'
 import { formatValues } from '@/components/LazyCascader'
 import PersonLabel from '../Company/components/PersonLabel'
@@ -22,11 +21,25 @@ const Contact = props => {
   const { toggleDrawer, setDrawerProps } = useModal()
   const { personTagColorMap, teamTagColorMap, personTags, teamTags, dispatch } = props
 
+  const tRef = useRef()
   const [tagState, setTagState] = useState({
     tagIds: [],
     tagCooperationIds: []
   })
 
+  const tag = useMemo(() => {
+    const personTagMap = {}
+    const teamTagMap = {}
+    personTags.forEach(item => {
+      personTagMap[item.id] = { text: item.name }
+    })
+    teamTags.forEach(item => {
+      teamTagMap[item.id] = { text: item.name }
+    })
+
+    return { personTagMap, teamTagMap }
+  }, [personTags, teamTags])
+
   const toolbarOptionsChange = (type, ids) => {
     setTagState({ ...tagState, [type]: ids })
   }
@@ -36,54 +49,28 @@ const Contact = props => {
     setSelectKeys(selectedRowKeys)
   }
 
-  const [searchOpt, setSearchOpt] = useState({
-    page: 1,
-    size: 20
-  })
   const [state, setState] = useState({
-    data: [],
-    journal: [],
-    servicelog: [],
-    loading: false,
-    total: 0,
-    id: '',
-    tail: { department: 0, email: 0, telephone: 0 }
+    params: {},
+    id: ''
   })
 
-  const initData = async (payload = searchOpt) => {
-    console.log('payload', payload)
-    setState({ ...state, loading: true })
-    const {
-      code = -1,
-      data: { client = [], log = [], serviceLog = [], total = 0, tail } = {
-        client: [],
-        log: [],
-        serviceLog: [],
-        total: 0,
-        tail: { department: 0, email: 0, telephone: 0 }
-      }
-    } = await queryContact(payload)
-    if (code === consts.RET_CODE.SUCCESS) {
-      setState({
-        ...state,
-        data: client,
-        journal: log,
-        servicelist: serviceLog,
-        total,
-        tail,
-        loading: false
-      })
-      setSearchOpt({ ...searchOpt, ...payload })
-    }
+  // 重置到默认值，包括表单
+  const initData = () => {
+    tRef.current.reset()
+  }
+
+  // 刷新
+  const refreshData = () => {
+    tRef.current.reload()
   }
 
   const handleAddClient = async values => {
     const payload = formatValues(values)
     const { code = -1, msg = '新增失败' } = await apiAddClient(payload)
     if (code === consts.RET_CODE.SUCCESS) {
-      await initData()
+      message.success(msg)
+      initData()
     }
-    return message.success(msg)
   }
 
   // 展示drawer
@@ -102,6 +89,11 @@ const Contact = props => {
 
   const columns = [
     {
+      title: '关键字',
+      dataIndex: 'search',
+      hideInTable: true
+    },
+    {
       title: '联系人',
       dataIndex: 'clientName',
       key: 'clientName',
@@ -169,8 +161,8 @@ const Contact = props => {
     },
     {
       title: '个人标签',
-      dataIndex: 'tag',
-      key: 'tag',
+      dataIndex: 'tagIds',
+      key: 'tagIds',
       width: 100,
       render: (_, record) => (
         <div className="zh-align-center zh-flex-wrap">
@@ -186,46 +178,16 @@ const Contact = props => {
             tagIds={record.tagIds}
             tagType={TagTypeEnum.PERSONTAG}
             tagColumn={TagDataTypeEnum.CONTACT}
-            checkCallBack={initData}
+            checkCallBack={refreshData}
             modeType={LabelModeType.column}>
             <IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
           </PersonLabel>
         </div>
       ),
       filters: true,
-      // onFilter: true,
-      valueType: 'select',
-      valueEnum: {
-        all: { text: '全部', status: 'Default' },
-        green: {
-          text: '个人标签1',
-          status: 'green'
-        },
-        blue: {
-          text: '个人标签2',
-          status: 'blue'
-        },
-        purple: {
-          text: '个人标签3',
-          status: 'purple'
-        },
-        red: {
-          text: '个人标签4',
-          status: 'red'
-        },
-        brown: {
-          text: '个人标签5',
-          status: 'brown'
-        },
-        black: {
-          text: '个人标签6',
-          status: 'black'
-        },
-        yellow: {
-          text: '个人标签7',
-          status: 'yellow'
-        }
-      }
+      onFilter: true,
+      valueType: 'option',
+      valueEnum: tag.personTagMap
     },
     {
       title: '协作标签',
@@ -246,7 +208,7 @@ const Contact = props => {
             tagIds={record.tagCooperationIds}
             tagType={TagTypeEnum.TEAM}
             tagColumn={TagDataTypeEnum.CONTACT}
-            checkCallBack={initData}
+            checkCallBack={refreshData}
             modeType={LabelModeType.column}>
             <IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
           </PersonLabel>
@@ -254,37 +216,7 @@ const Contact = props => {
       ),
       filters: true,
       valueType: 'select',
-      valueEnum: {
-        all: { text: '全部', status: 'Default' },
-        green: {
-          text: '协作标签1',
-          status: 'green'
-        },
-        blue: {
-          text: '协作标签2',
-          status: 'blue'
-        },
-        purple: {
-          text: '协作标签3',
-          status: 'purple'
-        },
-        red: {
-          text: '协作标签4',
-          status: 'red'
-        },
-        brown: {
-          text: '协作标签5',
-          status: 'brown'
-        },
-        black: {
-          text: '协作标签6',
-          status: 'black'
-        },
-        yellow: {
-          text: '协作标签7',
-          status: 'yellow'
-        }
-      }
+      valueEnum: tag.teamTagMap
     },
     {
       title: '地址',
@@ -398,7 +330,7 @@ const Contact = props => {
   // 默认刷新一次列表请求数据
 
   useEffect(() => {
-    initData()
+    // initData()
     if (!personTags.length) {
       dispatch({
         type: 'contact/fetchTags',
@@ -414,18 +346,21 @@ const Contact = props => {
   }, [])
 
   const handleSearch = value => {
-    initData({ search: value })
+    setState({ ...state, params: { ...state.params, current: 1, search: value } })
   }
 
-  const searchOnchange = e => {
-    const { value = '' } = e.target
-    initData({ search: value })
-  }
-  const { run: handleSearchInputChange } = useDebounceFn(searchOnchange)
+  // const searchOnchange = e => {
+  //   const { value = '' } = e.target
+  //   tRef.current?.setFieldsValue({ search: value })
+  //   tRef.current?.submit()
+  //   // initData({ search: value })
+  // }
+  // const { run: handleSearchInputChange } = useDebounceFn(searchOnchange)
 
   const onDistrictChange = value => {
     const [province = '', city = '', area = ''] = value
-    initData({ province, city, area })
+    setState({ ...state, params: { ...state.params, current: 1, province, city, area } })
+    // initData({ province, city, area })
   }
 
   // 批量设置-确认触发
@@ -446,7 +381,7 @@ const Contact = props => {
         tagType: TagTypeEnum.PERSONTAG
       })
     }
-    initData()
+    refreshData()
   }
 
   const renderTableAlert = ({ selectedRowKeys }) => {
@@ -511,11 +446,22 @@ const Contact = props => {
   }
   return (
     <ProTable
-      loading={state.loading}
-      rowKey={record => record.id}
       bordered
+      params={state.params}
+      actionRef={tRef}
+      rowKey={record => record.id}
       columns={columns}
-      dataSource={state.data}
+      request={async (params, sort, filter) => {
+        const {
+          code = -1,
+          data: { client = [], total = 0 }
+        } = await queryContact({ ...params, ...sort, ...filter })
+        return {
+          data: client,
+          success: code === consts.RET_CODE.SUCCESS,
+          total
+        }
+      }}
       // summary={() => (
       //   <ProTable.Summary.Row>
       //     <ProTable.Summary.Cell>统计: 总数</ProTable.Summary.Cell>
@@ -525,14 +471,6 @@ const Contact = props => {
       //     <ProTable.Summary.Cell>未填写: {state.tail.email}</ProTable.Summary.Cell>
       //   </ProTable.Summary.Row>
       // )}
-      pagination={{
-        pageSize: consts.PAGE_SIZE,
-        total: state.total,
-        current: state.current,
-        onChange: (page, size) => {
-          initData({ page, size })
-        }
-      }}
       tableAlertRender={renderTableAlert}
       rowSelection={{
         onChange: hanleRowSelectChange,
@@ -542,8 +480,7 @@ const Contact = props => {
       toolbar={{
         search: {
           allowClear: true,
-          onSearch: handleSearch,
-          onChange: handleSearchInputChange
+          onSearch: handleSearch
         },
         actions: [
           <LazyCascader onChange={onDistrictChange} key="lazyCascader" />,

src/pages/Customer/Test/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useMemo, useState, useCallback } from 'react'
-import { Button, Card, Cascader, Dropdown, Input, Menu, Select } from 'antd'
+import { Button, Card, Cascader, Dropdown, Input, Menu, Select, Pagination } from 'antd'
 import EditableForm from '@/components/EditableForm'
 import { useModal } from '@/components/Modal'
 import { connect } from 'dva'
@@ -140,6 +140,12 @@ const Test = ({ natures, dispatch }) => {
       <PersonLabel tagType={TagTypeEnum.PERSONTAG} tagColumn={TagDataTypeEnum.CONTACT}>
         <Button>2222</Button>
       </PersonLabel>
+      <Pagination
+        total={500}
+        onChange={(page, size) => {
+          console.log(page, size)
+        }}
+      />
     </Card>
   )
 }

src/services/contact.js

@@ -1,14 +1,12 @@
 import request from '@/basic/utils/request'
-import consts from '@/consts'
 
 /**
  * 请求联系人列表
  * @param {*} payload 载荷
  */
 export async function queryContact(payload) {
-  const params = { page: 1, size: consts.PAGE_SIZE, ...payload }
   const data = await request('/api/client/list', {
-    params: { ...params }
+    params: { ...payload }
   })
   return data
 }