feat: 增加协作标签数据权限

src/access.ts

@@ -1,3 +1,5 @@
+import { TagDataTypeEnum } from './pages/Customer/Company/components/PersonLabel/const'
+
 // eslint-disable-next-line func-names
 export default function (initialState) {
   const { roles = [], currentUser = {}, permData = {} } = initialState || {}
@@ -26,8 +28,16 @@ export default function (initialState) {
     return false
   }
 
+  /** 协作标签 */
+  const canEditTag = (type: 0 | 1): boolean => {
+    if (type === TagDataTypeEnum.CLIENT) return roles.includes('client_edit_team_tags')
+    if (type === TagDataTypeEnum.COMPANY) return roles.includes('company_edit_team_tags')
+    return false
+  }
+
   return {
     authRouteFilter,
-    authPermDataFilter
+    authPermDataFilter,
+    canEditTag
   }
 }

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

@@ -1,6 +1,6 @@
 import { Button, Checkbox, Popover, Input, message, Spin } from 'antd'
 import React, { useState, useRef, useEffect, useMemo } from 'react'
-import { connect } from 'dva'
+import { connect, useAccess } from 'umi'
 import styles from './index.less'
 import { apiConnOrDelTag, apiUpdateTag } from '@/services/customer'
 import consts from '@/basic/consts'
@@ -12,113 +12,6 @@ import {
   TagTypeEnum
 } from './const'
 
-const PersonLabel = props => {
-  const {
-    children,
-    dataId,
-    tagIds = [],
-    tagType,
-    tagColumn,
-    modeType = LabelModeType.column,
-    checkCallBack,
-    dispatch,
-    loadingClient,
-    loadingCompany
-  } = props
-  const [dropdownType, setDropdownType] = useState(DropdownTypeEnum.check)
-
-  const tags = useMemo(() => {
-    if (tagColumn === TagDataTypeEnum.CLIENT) {
-      // 客户
-      if (tagType === TagTypeEnum.PERSONTAG) {
-        return props.clientPersonTags
-      }
-      return props.clientTeamTags
-    }
-    if (tagColumn === TagDataTypeEnum.COMPANY) {
-      // 单位
-      if (tagType === TagTypeEnum.PERSONTAG) {
-        return props.companyPersonTags
-      }
-      return props.companyTeamTags
-    }
-    return []
-  }, [tagType, tagColumn, tagColumn === TagDataTypeEnum.CLIENT ? loadingClient : loadingCompany])
-
-  const [checkedIds, setCheckedIds] = useState([])
-  useEffect(() => {
-    if (dataId && tagIds?.length && modeType === LabelModeType.column) {
-      setCheckedIds(tagIds)
-    }
-  }, [tagIds, dataId])
-
-  const [showOkBtn, setShowOkBtn] = useState(false)
-  const initData = () => {
-    dispatch({
-      type: `${tagColumn === TagDataTypeEnum.COMPANY ? 'company' : 'client'}/fetchTags`,
-      payload: { tagType, tagColumn }
-    })
-  }
-
-  // 列操作->更新个人标签勾选情况
-  const handleOnConfirm = async () => {
-    const payload = {
-      tagIds: checkedIds,
-      dataId,
-      dataType: tagColumn,
-      tagType
-    }
-    const { code = -1 } = await apiConnOrDelTag(payload)
-    if (code === consts.RET_CODE.SUCCESS) {
-      setShowOkBtn(false)
-    }
-  }
-  const menu = () => (
-    <div className="my-5px">
-      <DropDownMenu
-        checkedIds={checkedIds}
-        setCheckedIds={setCheckedIds}
-        dataId={dataId}
-        tags={tags}
-        menuType={dropdownType}
-        tagType={tagType}
-        tagColumn={tagColumn}
-        modeType={modeType}
-        checkCallBack={checkCallBack}
-        initCallBack={initData}
-      />
-      <div className="mt-5px">
-        {dropdownType === DropdownTypeEnum.check ? (
-          <div className="flex justify-between">
-            <span
-              onClick={() => setDropdownType(DropdownTypeEnum.edit)}
-              className="text-primary cursor-pointer ml-3">
-              编辑标签
-            </span>
-            {modeType === LabelModeType.column && showOkBtn ? (
-              <Button size="small" onClick={() => handleOnConfirm()}>
-                确认
-              </Button>
-            ) : null}
-          </div>
-        ) : (
-          <Button
-            size="small"
-            className="ml-5px"
-            onClick={() => setDropdownType(DropdownTypeEnum.check)}>
-            返回
-          </Button>
-        )}
-      </div>
-    </div>
-  )
-  return (
-    <Popover content={menu} trigger="click" overlayClassName={styles.dropdownMenu}>
-      {children}
-    </Popover>
-  )
-}
-
 const DropDownMenu = props => {
   // 保存选中的checkbox ids
   const {
@@ -198,7 +91,8 @@ const DropDownMenu = props => {
                 key={item.id}
                 className={[styles.menuItem, checkedIds.includes(item.id) && styles.select].join(
                   ' '
-                )}>
+                )}
+              >
                 <div className={styles.labelText}>
                   <div
                     className={[
@@ -229,7 +123,8 @@ const DropDownMenu = props => {
                 styles.editMenuItem,
                 styles.menuItemWithBorder,
                 item.id === activeState.activeId ? styles.active : ''
-              ].join(' ')}>
+              ].join(' ')}
+            >
               <li onClick={() => labelOnClick(item.id)} style={{ width: '100%' }}>
                 <div className={styles.editLabel}>
                   <div
@@ -261,6 +156,120 @@ const DropDownMenu = props => {
   )
 }
 
+const PersonLabel = props => {
+  const {
+    children,
+    dataId,
+    tagIds = [],
+    tagType,
+    tagColumn,
+    modeType = LabelModeType.column,
+    checkCallBack,
+    dispatch,
+    loadingClient,
+    loadingCompany
+  } = props
+  const [dropdownType, setDropdownType] = useState(DropdownTypeEnum.check)
+
+  const hasPermEdit = useAccess()?.canEditTag(tagColumn)
+
+  const tags = useMemo(() => {
+    if (tagColumn === TagDataTypeEnum.CLIENT) {
+      // 客户
+      if (tagType === TagTypeEnum.PERSONTAG) {
+        return props.clientPersonTags
+      }
+      return props.clientTeamTags
+    }
+    if (tagColumn === TagDataTypeEnum.COMPANY) {
+      // 单位
+      if (tagType === TagTypeEnum.PERSONTAG) {
+        return props.companyPersonTags
+      }
+      return props.companyTeamTags
+    }
+    return []
+  }, [tagType, tagColumn, tagColumn === TagDataTypeEnum.CLIENT ? loadingClient : loadingCompany])
+
+  const [checkedIds, setCheckedIds] = useState([])
+  useEffect(() => {
+    if (dataId && tagIds?.length && modeType === LabelModeType.column) {
+      setCheckedIds(tagIds)
+    }
+  }, [tagIds, dataId])
+
+  const [showOkBtn, setShowOkBtn] = useState(false)
+  const initData = () => {
+    dispatch({
+      type: `${tagColumn === TagDataTypeEnum.COMPANY ? 'company' : 'client'}/fetchTags`,
+      payload: { tagType, tagColumn }
+    })
+  }
+
+  // 列操作->更新个人标签勾选情况
+  const handleOnConfirm = async () => {
+    const payload = {
+      tagIds: checkedIds,
+      dataId,
+      dataType: tagColumn,
+      tagType
+    }
+    const { code = -1 } = await apiConnOrDelTag(payload)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setShowOkBtn(false)
+    }
+  }
+  const menu = () => (
+    <div className="my-5px">
+      <DropDownMenu
+        checkedIds={checkedIds}
+        setCheckedIds={setCheckedIds}
+        dataId={dataId}
+        tags={tags}
+        menuType={dropdownType}
+        tagType={tagType}
+        tagColumn={tagColumn}
+        modeType={modeType}
+        checkCallBack={checkCallBack}
+        initCallBack={initData}
+      />
+      <div className="mt-5px">
+        {dropdownType === DropdownTypeEnum.check ? (
+          <div className="flex justify-between">
+            {hasPermEdit ? (
+              <span
+                onClick={() => setDropdownType(DropdownTypeEnum.edit)}
+                className="text-primary cursor-pointer ml-3"
+              >
+                编辑标签
+              </span>
+            ) : null}
+
+            {modeType === LabelModeType.column && showOkBtn ? (
+              <Button size="small" onClick={() => handleOnConfirm()}>
+                确认
+              </Button>
+            ) : null}
+          </div>
+        ) : (
+          <Button
+            size="small"
+            className="ml-5px"
+            onClick={() => setDropdownType(DropdownTypeEnum.check)}
+          >
+            返回
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+  return (
+    <Popover content={menu} trigger="click" overlayClassName={styles.dropdownMenu}>
+      {children}
+    </Popover>
+  )
+}
+
 export default connect(({ client, company, loading }) => ({
   clientPersonTags: client.personTags,
   clientTeamTags: client.teamTags,