Merge branch 'master' of http://192.168.1.41:3000/outaozhen/cldV2react

src/basic/css/common.scss

@@ -453,3 +453,14 @@
 .sheet-btns {
   height: 54px;
 }
+
+.zh-circle-icon {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.zh-square-icon {
+  width: 12px;
+  height: 12px;
+}

src/hooks/useAutoTable.js

@@ -61,7 +61,7 @@ export function useTableScroll(columnsRef, selectKeysRef) {
     if (!headEl) return
     // Table height from bottom
     const { bottomIncludeBody, top } = getViewportOffset(headEl)
-    console.log('top', top)
+    // console.log('top', top)
 
     // const margginHeight = 48
     const paddingHeight = 64
@@ -100,11 +100,11 @@ export function useTableScroll(columnsRef, selectKeysRef) {
     const height =
       bottomIncludeBody - paddingHeight - paginationHeight - footerHeight - headerHeight
 
-    console.log('bottomIncludeBody', bottomIncludeBody)
-    console.log('paddingHeight', paddingHeight)
-    console.log('paginationHeight', paginationHeight)
-    console.log('footerHeight', footerHeight)
-    console.log('headerHeight', headerHeight)
+    // console.log('bottomIncludeBody', bottomIncludeBody)
+    // console.log('paddingHeight', paddingHeight)
+    // console.log('paginationHeight', paginationHeight)
+    // console.log('footerHeight', footerHeight)
+    // console.log('headerHeight', headerHeight)
     setTableHeight(height)
     bodyEl && (bodyEl.style.height = `${height}px`)
   }

src/models/customer.js

@@ -1,4 +1,5 @@
 import consts from '@/consts'
+import { TagTypeEnum } from '@/pages/Customer/Company/components/PersonLabel'
 import { LabelStatusColorMap } from '@/pages/Customer/Company/components/PersonLabel'
 import { queryNatures } from '@/services/contact'
 import { queryTagList } from '@/services/customer'
@@ -26,21 +27,21 @@ export default {
       }
     },
     *fetchTags({ payload }, { call, put }) {
+      console.log('payload', payload)
       const response = yield call(queryTagList, payload)
       if (response?.code === consts.RET_CODE.SUCCESS) {
         const { tagType } = payload
-
         yield put({
           type: 'changeState',
           payload: {
-            key: tagType === 0 ? 'personTags' : 'teamTags',
+            key: tagType === TagTypeEnum.PERSONTAG ? 'personTags' : 'teamTags',
             data: response.data
           }
         })
         yield put({
           type: 'changeState',
           payload: {
-            key: tagType === 0 ? 'personTagColorMap' : 'teamTagColorMap',
+            key: tagType === TagTypeEnum.PERSONTAG ? 'personTagColorMap' : 'teamTagColorMap',
             data: response.data.reduce((curr, prev, idx) => {
               const item = { ...curr, [prev.id]: LabelStatusColorMap[tagType][idx] }
               return item

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

@@ -11,8 +11,8 @@ const DropdownTypeEnum = {
 }
 // 数据类型
 export const TagDataTypeEnum = {
-  CONTACT: 0, // 联系人
-  COMPANY: 1 // 客户
+  CONTACT: 1, // 联系人
+  COMPANY: 2 // 客户
 }
 // 标签类型
 export const TagTypeEnum = {
@@ -31,7 +31,8 @@ export const LabelStatusColorMap = {
     '#f90000',
     '#B8651B',
     '#2C3E50',
-    '#efd200'
+    '#efd200',
+    '#f47300'
   ],
   [TagTypeEnum.TEAMTAG]: [
     '#F8AC59',
@@ -40,7 +41,8 @@ export const LabelStatusColorMap = {
     '#7186ab',
     '#778b72',
     '#c292ca',
-    '#a14751'
+    '#a14751',
+    '#57ECCC'
   ]
 }
 
@@ -53,8 +55,8 @@ const PersonLabel = props => {
     tagColumn,
     modeType = 'column',
     checkCallBack,
-    dispatch,
-    personTags
+    personTags,
+    dispatch
   } = props
   const [dropdownType, setDropdownType] = useState(DropdownTypeEnum.check)
 
@@ -67,13 +69,6 @@ const PersonLabel = props => {
     })
   }
 
-  // 监听勾选的标签的变化，实时显示确认按钮
-  useEffect(() => {
-    // 只对列操作起效
-    if (modeType === LabelModeType.column) {
-      setShowOkBtn(true)
-    }
-  }, [checkedIds])
   // 列操作->更新个人标签勾选情况
   const handleOnConfirm = async () => {
     const payload = {
@@ -87,11 +82,6 @@ const PersonLabel = props => {
       setShowOkBtn(false)
     }
   }
-  useEffect(() => {
-    if (!personTags?.length) {
-      initData()
-    }
-  }, [])
 
   const menu = (
     <div className="zh-mg-tb-7 zh-mg-lf-14">
@@ -100,7 +90,6 @@ const PersonLabel = props => {
         setCheckedIds={setCheckedIds}
         dataId={dataId}
         personTags={personTags}
-        tagIds={tagIds}
         menuType={dropdownType}
         tagType={tagType}
         tagColumn={tagColumn}
@@ -117,7 +106,9 @@ const PersonLabel = props => {
               编辑标签
             </span>
             {modeType === LabelModeType.column && showOkBtn ? (
-              <Button onClick={() => handleOnConfirm()}>确认</Button>
+              <Button size="small" onClick={() => handleOnConfirm()}>
+                确认
+              </Button>
             ) : null}
           </div>
         ) : (
@@ -138,7 +129,6 @@ const PersonLabel = props => {
 const DropDownMenu = props => {
   // 保存选中的checkbox ids
   const {
-    tagIds,
     checkedIds,
     setCheckedIds,
     dataId,
@@ -160,11 +150,25 @@ const DropDownMenu = props => {
 
   const handleOnchange = async (e, id) => {
     const { checked } = e.target
-    const ids = checked ? [...checkedIds, id] : checkedIds.filter(item => item)
-    setCheckedIds(ids)
-    // 如果是toolbar的操作则要触发对应
-    if (modeType === LabelModeType.toolbar) {
-      checkCallBack && checkCallBack(ids)
+    let canRender = true
+    const ids = checked ? [...checkedIds, id] : checkedIds.filter(item => item !== id)
+
+    if (modeType === LabelModeType.column) {
+      const { code = -1, msg = '操作失败' } = await apiConnOrDelTag({
+        type: checked,
+        payload: { dataId, tagId: id, dataType: tagColumn, tagType }
+      })
+      if (code !== consts.RET_CODE.SUCCESS) {
+        canRender = false
+        message.error(msg)
+      }
+      checkCallBack()
+    } else {
+      checkCallBack &&
+        checkCallBack(tagType === TagTypeEnum.PERSONTAG ? 'tagIds' : 'tagCooperationIds', ids)
+    }
+    if (canRender) {
+      setCheckedIds(ids)
     }
   }
 
@@ -233,7 +237,7 @@ const DropDownMenu = props => {
                       styles.statusIcon,
                       tagType === TagTypeEnum.PERSONTAG ? styles.suqare : ''
                     ].join(' ')}
-                    style={{ backgroundColor: statusColors[tagType][idx] }}
+                    style={{ backgroundColor: LabelStatusColorMap[tagType][idx] }}
                   />
 
                   {activeState.activeId === item.id ? (

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

@@ -29,7 +29,6 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      border-right: 1px solid #e5e5e5;
     }
     .editLabel {
       display: flex;

src/pages/Customer/Contact/index.jsx

@@ -1,14 +1,10 @@
 import ContactDetail from '@/pages/Customer/Contact/components/ContactDetail'
 import Addcontact from '@/pages/Customer/Contact/components/AddContact'
 import ProTable from '@ant-design/pro-table'
-// import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { message, Tag } from 'antd'
+import { Button, message, Tag } from 'antd'
 import { connect } from 'dva'
 import React, { useEffect, useState } from 'react'
-import useAutoTable, { useTableScroll } from '@/hooks/useAutoTable'
 import consts from '@/consts'
-import { queryContact, apiAddClient } from '@/services/contact'
-import styles from './index.less'
 import LazyCascader from '@/components/LazyCascader'
 import { useDebounceFn } from 'ahooks'
 import { useModal } from '@/components/Modal'
@@ -17,14 +13,23 @@ import PersonLabel from '../Company/components/PersonLabel'
 import { TagTypeEnum } from '../Company/components/PersonLabel'
 import { TagDataTypeEnum } from '../Company/components/PersonLabel'
 import { IconPark } from '@/components/SvgIcon'
+import { useTableScroll } from '@/hooks/useAutoTable'
+import { apiAddClient, queryContact } from '@/services/contact'
+import { LabelModeType } from '../Company/components/PersonLabel'
+import { apiBatchLink } from '@/services/customer'
 
 const Contact = props => {
   const { toggleDrawer, setDrawerProps } = useModal()
-  const { personTagColorMap, teamTagColorMap } = props
-  // const needSubtractHeight = 48 + 48 + 48 + 64 + 24 + 32 // 需要被裁掉的高度
-  // const needSubtractWidth = 48 + 48 + 48 // 需要被裁掉的高度
+  const { personTagColorMap, teamTagColorMap, personTags, teamTags, dispatch } = props
 
-  // const [x, y] = useAutoTable(needSubtractHeight, needSubtractWidth)
+  const [tagState, setTagState] = useState({
+    tagIds: [],
+    tagCooperationIds: []
+  })
+
+  const toolbarOptionsChange = (type, ids) => {
+    setTagState({ ...tagState, [type]: ids })
+  }
 
   const [selectKeys, setSelectKeys] = useState([])
   const hanleRowSelectChange = selectedRowKeys => {
@@ -67,12 +72,11 @@ const Contact = props => {
 
   const handleAddClient = async values => {
     const payload = formatValues(values)
-    const { code = -1 } = await apiAddClient(payload)
+    const { code = -1, msg = '新增失败' } = await apiAddClient(payload)
     if (code === consts.RET_CODE.SUCCESS) {
       await initData()
-      return message.success('新增成功')
     }
-    // 请求完了
+    return message.success(msg)
   }
 
   // 展示drawer
@@ -162,19 +166,22 @@ const Contact = props => {
       key: 'tag',
       width: 100,
       render: (_, record) => (
-        <div>
-          {record.tagIds.map((item, idx) => (
-            <Tag key={record.id + item.id} color={personTagColorMap[item]}>
-              {record.tagName[idx]}
-            </Tag>
+        <div className="zh-align-center zh-flex-wrap">
+          {record.tagIds.map(item => (
+            <span
+              key={record.id + item.id}
+              className="zh-circle-icon zh-mg-right-3"
+              style={{ backgroundColor: personTagColorMap[item] }}
+            />
           ))}
           <PersonLabel
             dataId={record.id}
             tagIds={record.tagIds}
             tagType={TagTypeEnum.PERSONTAG}
             tagColumn={TagDataTypeEnum.CONTACT}
-            checkCallBack={() => initData()}>
-            <IconPark type="add" fill="#868e96" size={14} />
+            checkCallBack={initData}
+            modeType={LabelModeType.column}>
+            <IconPark type="add" theme="filled" size="20" fill="#868e96" className="zh-pointer" />
           </PersonLabel>
         </div>
       ),
@@ -366,6 +373,18 @@ const Contact = props => {
 
   useEffect(() => {
     initData()
+    if (!personTags.length) {
+      dispatch({
+        type: 'customer/fetchTags',
+        payload: { tagType: TagTypeEnum.PERSONTAG, tagColumn: TagDataTypeEnum.CONTACT }
+      })
+    }
+    if (!teamTags.length) {
+      dispatch({
+        type: 'customer/fetchTags',
+        payload: { tagType: TagTypeEnum.TEAMTAG, tagColumn: TagDataTypeEnum.CONTACT }
+      })
+    }
   }, [])
 
   const handleSearch = value => {
@@ -383,6 +402,27 @@ const Contact = props => {
     initData({ province, city, area })
   }
 
+  // 批量设置-确认触发
+  const tagsSettingConfirm = async clientIds => {
+    if (tagState.tagIds.length) {
+      await apiBatchLink({
+        tagIds: tagState.tagIds,
+        dataIds: clientIds,
+        dataType: TagDataTypeEnum.CONTACT,
+        tagType: TagTypeEnum.PERSONTAG
+      })
+    }
+    if (tagState.tagCooperationIds.length) {
+      await apiBatchLink({
+        tagIds: tagState.tagIds,
+        dataIds: clientIds,
+        dataType: TagDataTypeEnum.CONTACT,
+        tagType: TagTypeEnum.PERSONTAG
+      })
+    }
+    initData()
+  }
+
   return (
     <ProTable
       rowKey={record => record.id}
@@ -405,7 +445,64 @@ const Contact = props => {
         onChange: (page, size) => initData({ page, size })
       }}
       tableAlertRender={({ selectedRowKeys }) => {
-        return <div>2222</div>
+        return (
+          <div className="zh-flex-row">
+            <div className="zh-mg-right-5">
+              <PersonLabel
+                tagType={TagTypeEnum.PERSONTAG}
+                tagColumn={TagDataTypeEnum.CONTACT}
+                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.CONTACT}
+                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>
+        )
       }}
       rowSelection={{
         onChange: hanleRowSelectChange,
@@ -439,5 +536,7 @@ const Contact = props => {
 
 export default connect(({ customer }) => ({
   personTagColorMap: customer.personTagColorMap,
-  teamTagColorMap: customer.teamTagColorMap
+  personTags: customer.personTags,
+  teamTagColorMap: customer.teamTagColorMap,
+  teamTags: customer.teamTags
 }))(Contact)

src/pages/Customer/Contact/index.less

@@ -1,2 +0,0 @@
-.tableContent {
-}

src/services/customer.js

@@ -42,8 +42,12 @@ export async function queryTagList(params) {
  * @param {*} payload
  * @returns
  */
-export async function apiConnOrDelTag(payload) {
-  const data = await request.post('/api/tag/link', { data: payload })
+export async function apiConnOrDelTag({ type, payload }) {
+  let url = '/api/tag/link/delete'
+  if (type) {
+    url = '/api/tag/link'
+  }
+  const data = await request.post(url, { data: payload })
   return data
 }
 
@@ -56,3 +60,13 @@ export async function apiUpdateTag(payload) {
   const data = await request.post('/api/tag/update', { data: payload })
   return data
 }
+
+/**
+ * 关联标签-批量数据类型
+ * @param {*} payload
+ * @returns
+ */
+export async function apiBatchLink(payload) {
+  const data = await request.post('/api/tag/batch/link', { data: payload })
+  return data
+}