feat: 抽屉详情添加全局水印

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

@@ -9,9 +9,10 @@ import { connect, useModel } from 'umi'
 import { Up, Down } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 import './index.less'
+import { WaterMark } from '@ant-design/pro-layout'
 
 const Detail = props => {
-  const { initialState } = useModel('@@initialState')
+  const { initialState: { currentUser = {} } = {} } = useModel('@@initialState')
   const { visible, onClose, dispatch, updateKey = 'business', refresh, dataId, orderIds = [] } = props
   const shouldUpdate = refresh[dataId ?? updateKey] || false
   const [state, setState] = useState({
@@ -24,7 +25,7 @@ const Detail = props => {
   })
 
   const isOwner = useMemo(() => {
-    const { staffId } = initialState.currentUser || {}
+    const { staffId } = currentUser || {}
     return state.business.staffId === staffId
   }, [state.business.businessStatusId])
 
@@ -73,46 +74,58 @@ const Detail = props => {
       className="zh-drawer"
       getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
-        <div className="sheet-box">
-          <Row>
-            <Col span={10} className="sheet-box-left">
-              {orderIds.length ? (
-                <div className="mb-3">
-                  <Tooltip title="上一条记录">
-                    <Up
-                      fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
-                      size="20"
-                      onClick={() => flipFn(FlipOverEnum.UP)}
-                      className={[flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'].join(' ')}
-                    />
-                  </Tooltip>
-                  <Tooltip title="下一条记录">
-                    <Down
-                      fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
-                      size="20"
-                      onClick={() => flipFn(FlipOverEnum.DOWN)}
-                      className={[flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer', 'ml-1'].join(
-                        ' '
-                      )}
-                    />
-                  </Tooltip>
+        <WaterMark
+          fontColor="rgba(0,0,0,.1)"
+          offsetTop={200}
+          content={`${currentUser.username}  ${currentUser.telephone.slice(-4)}`}>
+          <div className="sheet-box">
+            <Row>
+              <Col span={10} className="sheet-box-left">
+                {orderIds.length ? (
+                  <div className="mb-3">
+                    <Tooltip title="上一条记录">
+                      <Up
+                        fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
+                        size="20"
+                        onClick={() => flipFn(FlipOverEnum.UP)}
+                        className={[flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'].join(
+                          ' '
+                        )}
+                      />
+                    </Tooltip>
+                    <Tooltip title="下一条记录">
+                      <Down
+                        fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
+                        size="20"
+                        onClick={() => flipFn(FlipOverEnum.DOWN)}
+                        className={[
+                          flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer',
+                          'ml-1'
+                        ].join(' ')}
+                      />
+                    </Tooltip>
+                  </div>
+                ) : null}
+                <div className="sheet-left-panel pr-15px">
+                  <Form
+                    isOwner={isOwner}
+                    business={state.business}
+                    groupStatus={state.groupStatus}
+                    updatePayload={{ main: updateKey, target: dataId }}
+                  />
                 </div>
-              ) : null}
-              <div className="sheet-left-panel pr-15px">
-                <Form
+              </Col>
+              <Col span={14} className="sheet-box-right">
+                <TabList
+                  businessId={state.business.id}
+                  clientList={state.linkClient.client}
                   isOwner={isOwner}
-                  business={state.business}
-                  groupStatus={state.groupStatus}
-                  updatePayload={{ main: updateKey, target: dataId }}
                 />
-              </div>
-            </Col>
-            <Col span={14} className="sheet-box-right">
-              <TabList businessId={state.business.id} clientList={state.linkClient.client} isOwner={isOwner} />
-              <LowerList log={state.log} serviceLog={state.serviceLog} />
-            </Col>
-          </Row>
-        </div>
+                <LowerList log={state.log} serviceLog={state.serviceLog} />
+              </Col>
+            </Row>
+          </div>
+        </WaterMark>
       </Spin>
     </Drawer>
   )

src/pages/Customer/Client/components/ClientDetail/index.jsx

@@ -5,12 +5,24 @@ import ClientTabList from './TabList.jsx'
 import ClientLowerList from './LowerList.jsx'
 import { apiClientDetail } from '@/services/customer'
 import consts from '@/consts'
-import { connect } from 'umi'
+import { connect, useModel } from 'umi'
 import { Up, Down } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
+import { WaterMark } from '@ant-design/pro-layout'
 
 const ClientDetail = props => {
-  const { refresh, visible, dispatch, updateKey = 'client', dataId, orderIds = [], ...resetDrawerProps } = props
+  const {
+    refresh,
+    visible,
+    dispatch,
+    updateKey = 'client',
+    dataId,
+    orderIds = [],
+    ...resetDrawerProps
+  } = props
+  const {
+    initialState: { currentUser }
+  } = useModel('@@initialState')
   const shouldUpdate = refresh?.[dataId ?? updateKey] || false
   const [state, setState] = useState({
     loading: false,
@@ -57,51 +69,59 @@ const ClientDetail = props => {
       className="zh-drawer"
       getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
-        <div className="sheet-box">
-          <Row>
-            <Col span={9} className="sheet-box-left">
-              {orderIds.length ? (
-                <div className="mb-3">
-                  <Tooltip title="上一条记录">
-                    <Up
-                      fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
-                      size="20"
-                      onClick={() => flipFn(FlipOverEnum.UP)}
-                      className={[flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'].join(' ')}
-                    />
-                  </Tooltip>
-                  <Tooltip title="下一条记录">
-                    <Down
-                      fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
-                      size="20"
-                      onClick={() => flipFn(FlipOverEnum.DOWN)}
-                      className={[flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer', 'ml-1'].join(
-                        ' '
-                      )}
-                    />
-                  </Tooltip>
+        <WaterMark
+          fontColor="rgba(0,0,0,.1)"
+          offsetTop={200}
+          content={`${currentUser.username}  ${currentUser.telephone.slice(-4)}`}>
+          <div className="sheet-box">
+            <Row>
+              <Col span={9} className="sheet-box-left">
+                {orderIds.length ? (
+                  <div className="mb-3">
+                    <Tooltip title="上一条记录">
+                      <Up
+                        fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
+                        size="20"
+                        onClick={() => flipFn(FlipOverEnum.UP)}
+                        className={[flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'].join(
+                          ' '
+                        )}
+                      />
+                    </Tooltip>
+                    <Tooltip title="下一条记录">
+                      <Down
+                        fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
+                        size="20"
+                        onClick={() => flipFn(FlipOverEnum.DOWN)}
+                        className={[
+                          flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer',
+                          'ml-1'
+                        ].join(' ')}
+                      />
+                    </Tooltip>
+                  </div>
+                ) : null}
+                <div className="sheet-left-panel pr-4">
+                  <ClientForm client={state.client} updatePayload={{ main: updateKey, target: dataId }} />
                 </div>
-              ) : null}
-              <div className="sheet-left-panel pr-4">
-                <ClientForm client={state.client} updatePayload={{ main: updateKey, target: dataId }} />
-              </div>
-            </Col>
-            <Col
-              span={15}
-              // sm={{ span: 24 }}
-              // md={{ span: 24 }}
-              // lg={{ span: 15 }}
-              // xl={{ span: 15 }}
-              className="sheet-box-right">
-              <ClientTabList
-                clientId={state.client.id}
-                software={state.software}
-                updatePayload={{ main: updateKey, target: dataId }}
-              />
-              <ClientLowerList log={state.log} servicelist={state.serviceLog} />
-            </Col>
-          </Row>
-        </div>
+              </Col>
+              <Col
+                span={15}
+                // sm={{ span: 24 }}
+                // md={{ span: 24 }}
+                // lg={{ span: 15 }}
+                // xl={{ span: 15 }}
+                className="sheet-box-right">
+                <ClientTabList
+                  clientId={state.client.id}
+                  software={state.software}
+                  updatePayload={{ main: updateKey, target: dataId }}
+                />
+                <ClientLowerList log={state.log} servicelist={state.serviceLog} />
+              </Col>
+            </Row>
+          </div>
+        </WaterMark>
       </Spin>
     </Drawer>
   )

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

@@ -5,12 +5,24 @@ import { apiCompanyDetail } from '@/services/customer'
 import CompanyForm from './Form'
 import CompanyLowerList from './LowerList'
 import CompanyTabList from './TabList'
-import { connect } from 'umi'
+import { connect, useModel } from 'umi'
 import { Up, Down } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
+import { WaterMark } from '@ant-design/pro-layout'
 
 const CompanyDetail = props => {
-  const { visible, dispatch, updateKey = 'company', dataId, orderIds = [], refresh, ...resetDrawerProps } = props
+  const {
+    visible,
+    dispatch,
+    updateKey = 'company',
+    dataId,
+    orderIds = [],
+    refresh,
+    ...resetDrawerProps
+  } = props
+  const {
+    initialState: { currentUser }
+  } = useModel('@@initialState')
   const shouldUpdate = refresh?.[dataId ?? updateKey] || false
   const [state, setState] = useState({
     loading: false,
@@ -54,63 +66,74 @@ const CompanyDetail = props => {
       className="zh-drawer"
       getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
-        <div className="sheet-box">
-          <Row>
-            <Col
-              span={9}
-              // sm={{ span: 24 }}
-              // md={{ span: 24 }}
-              // lg={{ span: 9 }}
-              // xl={{ span: 9 }}
-              className="sheet-box-left">
-              {orderIds.length ? (
-                <div className="mb-3">
-                  <Tooltip title="上一条记录">
-                    <Up
-                      fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
-                      size="20"
-                      onClick={() => flipFn(FlipOverEnum.UP)}
-                      className={[flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'].join(' ')}
-                    />
-                  </Tooltip>
-                  <Tooltip title="下一条记录">
-                    <Down
-                      fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
-                      size="20"
-                      onClick={() => flipFn(FlipOverEnum.DOWN)}
-                      className={[flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer', 'ml-1'].join(
-                        ' '
-                      )}
-                    />
-                  </Tooltip>
-                </div>
-              ) : null}
+        <WaterMark
+          fontColor="rgba(0,0,0,.1)"
+          offsetTop={200}
+          content={`${currentUser.username}  ${currentUser.telephone.slice(-4)}`}>
+          <div className="sheet-box">
+            <Row>
+              <Col
+                span={9}
+                // sm={{ span: 24 }}
+                // md={{ span: 24 }}
+                // lg={{ span: 9 }}
+                // xl={{ span: 9 }}
+                className="sheet-box-left">
+                {orderIds.length ? (
+                  <div className="mb-3">
+                    <Tooltip title="上一条记录">
+                      <Up
+                        fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
+                        size="20"
+                        onClick={() => flipFn(FlipOverEnum.UP)}
+                        className={[flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'].join(
+                          ' '
+                        )}
+                      />
+                    </Tooltip>
+                    <Tooltip title="下一条记录">
+                      <Down
+                        fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
+                        size="20"
+                        onClick={() => flipFn(FlipOverEnum.DOWN)}
+                        className={[
+                          flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer',
+                          'ml-1'
+                        ].join(' ')}
+                      />
+                    </Tooltip>
+                  </div>
+                ) : null}
 
-              <div className="sheet-left-panel pr-4">
-                <CompanyForm customer={state.customer} updatePayload={{ main: updateKey, target: dataId }} />
-              </div>
-            </Col>
-            <Col
-              span={15}
-              // sm={{ span: 24 }}
-              // md={{ span: 24 }}
-              // lg={{ span: 15 }}
-              // xl={{ span: 15 }}
-              flex={{ flexDirection: 'column' }}
-              className="sheet-box-right">
-              <CompanyTabList
-                updatePayload={{ main: updateKey, target: dataId }}
-                initData={initData}
-                customerId={flipConsts.curId}
-                software={state.software}
-                client={state.client}
-                customer={state.customer}
-                business={state.business}
-              />
-              <CompanyLowerList log={state.log} servicelist={state.serviceLog} />
-            </Col>
-          </Row>
-        </div>
+                <div className="sheet-left-panel pr-4">
+                  <CompanyForm
+                    customer={state.customer}
+                    updatePayload={{ main: updateKey, target: dataId }}
+                  />
+                </div>
+              </Col>
+              <Col
+                span={15}
+                // sm={{ span: 24 }}
+                // md={{ span: 24 }}
+                // lg={{ span: 15 }}
+                // xl={{ span: 15 }}
+                flex={{ flexDirection: 'column' }}
+                className="sheet-box-right">
+                <CompanyTabList
+                  updatePayload={{ main: updateKey, target: dataId }}
+                  initData={initData}
+                  customerId={flipConsts.curId}
+                  software={state.software}
+                  client={state.client}
+                  customer={state.customer}
+                  business={state.business}
+                />
+                <CompanyLowerList log={state.log} servicelist={state.serviceLog} />
+              </Col>
+            </Row>
+          </div>
+        </WaterMark>
       </Spin>
     </Drawer>
   )

src/pages/Hr/Employee/components/EmployeeDetail/index.jsx

@@ -1,14 +1,18 @@
 import React, { useState, useEffect } from 'react'
 import { Col, Drawer, Row } from 'antd'
 import consts from '@/consts'
-import { connect } from 'umi'
+import { connect, useModel } from 'umi'
 import EmployeeForm from './Form.jsx'
 import EmployeeLowerList from './LowerList.jsx'
 import EmployeeTabList from './TabList.jsx'
 import { apiStaffDetail } from '@/services/staff'
+import { WaterMark } from '@ant-design/pro-layout'
 
 const EmployeeDetail = props => {
   const { visible, dispatch, refresh, updateKey = 'staff', dataId, ...resetDrawerProps } = props
+  const {
+    initialState: { currentUser }
+  } = useModel('@@initialState')
   const shouldUpdate = refresh?.[dataId ?? updateKey] || false
   const [state, setState] = useState({
     loading: false,
@@ -45,21 +49,25 @@ const EmployeeDetail = props => {
       {...resetDrawerProps}
       visible={visible}
       className="zh-drawer"
-      getContainer={() => document.getElementById('root')}
-    >
-      <div className="sheet-box">
-        <Row>
-          <Col span={12} className="sheet-box-left">
-            <div className="sheet-left-panel pr-4">
-              <EmployeeForm staff={state.staff} actionPayload={{ main: updateKey, target: dataId }} />
-            </div>
-          </Col>
-          <Col span={12} className="sheet-box-right">
-            <EmployeeLowerList />
-            <EmployeeTabList log={state.log} />
-          </Col>
-        </Row>
-      </div>
+      getContainer={() => document.getElementById('root')}>
+      <WaterMark
+        fontColor="rgba(0,0,0,.1)"
+        offsetTop={200}
+        content={`${currentUser.username}  ${currentUser.telephone.slice(-4)}`}>
+        <div className="sheet-box">
+          <Row>
+            <Col span={12} className="sheet-box-left">
+              <div className="sheet-left-panel pr-4">
+                <EmployeeForm staff={state.staff} actionPayload={{ main: updateKey, target: dataId }} />
+              </div>
+            </Col>
+            <Col span={12} className="sheet-box-right">
+              <EmployeeLowerList />
+              <EmployeeTabList log={state.log} />
+            </Col>
+          </Row>
+        </div>
+      </WaterMark>
     </Drawer>
   )
 }

src/pages/Product/Lock/LockStore/components/LockDetail/index.jsx

@@ -5,12 +5,24 @@ import { apiSoftwareDetail } from '@/services/product'
 import LockForm from './Form'
 import LockLowerList from './LowerList'
 import LockTabList from './TabList'
-import { connect } from 'umi'
+import { connect, useModel } from 'umi'
 import { Down, Up } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
+import { WaterMark } from '@ant-design/pro-layout'
 
 const LockDetail = props => {
-  const { visible, dispatch, dataId, refresh, orderIds = [], updateKey = 'software', ...resetDrawerProps } = props
+  const {
+    visible,
+    dispatch,
+    dataId,
+    refresh,
+    orderIds = [],
+    updateKey = 'software',
+    ...resetDrawerProps
+  } = props
+  const {
+    initialState: { currentUser }
+  } = useModel('@@initialState')
   const shouldUpdate = refresh?.[dataId ?? updateKey] || false
   const [state, setState] = useState({
     loading: false,
@@ -57,46 +69,54 @@ const LockDetail = props => {
       className="zh-drawer"
       getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
-        <div className="sheet-box">
-          <Row>
-            <Col span={9} className="sheet-box-left">
-              {orderIds.length ? (
-                <div className="mb-3">
-                  <Tooltip title="上一条记录">
-                    <Up
-                      fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
-                      size="20"
-                      onClick={() => flipFn(FlipOverEnum.UP)}
-                      className={[flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'].join(' ')}
-                    />
-                  </Tooltip>
-                  <Tooltip title="下一条记录">
-                    <Down
-                      fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
-                      size="20"
-                      onClick={() => flipFn(FlipOverEnum.DOWN)}
-                      className={[flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer', 'ml-1'].join(
-                        ' '
-                      )}
-                    />
-                  </Tooltip>
+        <WaterMark
+          fontColor="rgba(0,0,0,.1)"
+          offsetTop={200}
+          content={`${currentUser.username}  ${currentUser.telephone.slice(-4)}`}>
+          <div className="sheet-box">
+            <Row>
+              <Col span={9} className="sheet-box-left">
+                {orderIds.length ? (
+                  <div className="mb-3">
+                    <Tooltip title="上一条记录">
+                      <Up
+                        fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
+                        size="20"
+                        onClick={() => flipFn(FlipOverEnum.UP)}
+                        className={[flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'].join(
+                          ' '
+                        )}
+                      />
+                    </Tooltip>
+                    <Tooltip title="下一条记录">
+                      <Down
+                        fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
+                        size="20"
+                        onClick={() => flipFn(FlipOverEnum.DOWN)}
+                        className={[
+                          flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer',
+                          'ml-1'
+                        ].join(' ')}
+                      />
+                    </Tooltip>
+                  </div>
+                ) : null}
+                <div className="sheet-left-panel pr-4">
+                  <LockForm longle={state.longle} actionPayload={{ main: updateKey, target: dataId }} />
                 </div>
-              ) : null}
-              <div className="sheet-left-panel pr-4">
-                <LockForm longle={state.longle} actionPayload={{ main: updateKey, target: dataId }} />
-              </div>
-            </Col>
-            <Col span={15} className="sheet-box-right">
-              <LockTabList
-                longleLog={state.longleLog}
-                longle={state.longle}
-                upgradeProduct={state.longle.product?.split('+') || []}
-                actionPayload={{ main: updateKey, target: dataId }}
-              />
-              <LockLowerList log={state.log} />
-            </Col>
-          </Row>
-        </div>
+              </Col>
+              <Col span={15} className="sheet-box-right">
+                <LockTabList
+                  longleLog={state.longleLog}
+                  longle={state.longle}
+                  upgradeProduct={state.longle.product?.split('+') || []}
+                  actionPayload={{ main: updateKey, target: dataId }}
+                />
+                <LockLowerList log={state.log} />
+              </Col>
+            </Row>
+          </div>
+        </WaterMark>
       </Spin>
     </Drawer>
   )

src/pages/Product/Road/Enterprise/components/Detail/index.jsx

@@ -1,7 +1,7 @@
 import { apiRoadcompanyDetail, apiRoadPricingUnLinkCustomer } from '@/services/product'
 import { Button, Col, Drawer, Row, Spin, Tooltip, Modal } from 'antd'
 import React, { useState, useEffect } from 'react'
-import { connect } from 'umi'
+import { connect, useModel } from 'umi'
 import consts from '@/consts'
 import EnterpriseForm from './Form'
 import EnterpriseLowerList from './LowerList'
@@ -9,9 +9,13 @@ import EnterpriseTabList from './TabList'
 import CldCompany from './CldCompany'
 import { LinkInterrupt, LinkOne } from '@icon-park/react'
 import { useModal } from '@/components/ModalStore'
+import { WaterMark } from '@ant-design/pro-layout'
 
 const EnterpriseDetail = props => {
   const { dispatch, updateKey = 'enterprise', refresh, visible, dataId = '', ...resetDrawerProps } = props
+  const {
+    initialState: { currentUser }
+  } = useModel('@@initialState')
   const [state, setState] = useState({
     loading: false,
     company: {},
@@ -94,49 +98,54 @@ const EnterpriseDetail = props => {
       className="zh-drawer"
       getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
-        <div className="sheet-box">
-          <Row>
-            <Col span={9} className="sheet-box-left">
-              <div className="sheet-left-panel pr-4">
-                <EnterpriseForm company={state.company} updateKey={updateKey} />
-                {state.company.cld?.customerId ? (
-                  <>
-                    <div className="mt-4">
-                      <CldCompany company={state.customer} />
-                    </div>
+        <WaterMark
+          fontColor="rgba(0,0,0,.1)"
+          offsetTop={200}
+          content={`${currentUser.username}  ${currentUser.telephone.slice(-4)}`}>
+          <div className="sheet-box">
+            <Row>
+              <Col span={9} className="sheet-box-left">
+                <div className="sheet-left-panel pr-4">
+                  <EnterpriseForm company={state.company} updateKey={updateKey} />
+                  {state.company.cld?.customerId ? (
+                    <>
+                      <div className="mt-4">
+                        <CldCompany company={state.customer} />
+                      </div>
+                      <div className="text-center mt-6">
+                        <Tooltip placement="right" title="移除CLD客户">
+                          <Button
+                            type="primary"
+                            ghost
+                            size="small"
+                            onClick={() => pricingUnLinkCompany(state.company.ID)}>
+                            <LinkInterrupt size="14" />
+                            <span className="ml-5px">移除CLD单位信息</span>
+                          </Button>
+                        </Tooltip>
+                      </div>
+                    </>
+                  ) : (
                     <div className="text-center mt-6">
-                      <Tooltip placement="right" title="移除CLD客户">
-                        <Button
-                          type="primary"
-                          ghost
-                          size="small"
-                          onClick={() => pricingUnLinkCompany(state.company.ID)}>
-                          <LinkInterrupt size="14" />
-                          <span className="ml-5px">移除CLD单位信息</span>
-                        </Button>
-                      </Tooltip>
+                      <Button type="primary" ghost size="small" onClick={handleConnectCompany}>
+                        <LinkOne size="14" />
+                        <span className="ml-5px">关联CLD单位信息</span>
+                      </Button>
                     </div>
-                  </>
-                ) : (
-                  <div className="text-center mt-6">
-                    <Button type="primary" ghost size="small" onClick={handleConnectCompany}>
-                      <LinkOne size="14" />
-                      <span className="ml-5px">关联CLD单位信息</span>
-                    </Button>
-                  </div>
-                )}
-              </div>
-            </Col>
-            <Col span={15} className="sheet-box-right">
-              <EnterpriseTabList
-                company={state.company}
-                reload={refreshDetail}
-                companyId={state.company.ID}
-              />
-              <EnterpriseLowerList log={state.log} />
-            </Col>
-          </Row>
-        </div>
+                  )}
+                </div>
+              </Col>
+              <Col span={15} className="sheet-box-right">
+                <EnterpriseTabList
+                  company={state.company}
+                  reload={refreshDetail}
+                  companyId={state.company.ID}
+                />
+                <EnterpriseLowerList log={state.log} />
+              </Col>
+            </Row>
+          </div>
+        </WaterMark>
       </Spin>
     </Drawer>
   )

src/pages/Product/Road/Personal/components/Detail/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { LinkOne, LinkInterrupt } from '@icon-park/react'
 import { Row, Col, Button, Tooltip, Spin, Modal, Drawer } from 'antd'
-import { connect } from 'umi'
+import { connect, useModel } from 'umi'
 import consts from '@/consts'
 import { apiRoadpricingDetailV2, apiRoadPricingUnLinkClientV2 } from '@/services/product'
 import Form from './Form'
@@ -10,6 +10,7 @@ import TabList from './TabList'
 import ClientDetail from '@/pages/Customer/Client/components/ClientDetail/Form'
 import { useModal } from '@/components/ModalStore'
 import CardClientDetail from '@/pages/Product/Cloud/components/CardDetail'
+import { WaterMark } from '@ant-design/pro-layout'
 
 const PersonalDetail = props => {
   const {
@@ -22,6 +23,9 @@ const PersonalDetail = props => {
     filterTag = true,
     ...resetDrawerProps
   } = props
+  const {
+    initialState: { currentUser }
+  } = useModel('@@initialState')
   const [state, setState] = useState({
     loading: false,
     cloudUser: {},
@@ -98,55 +102,64 @@ const PersonalDetail = props => {
       className="zh-drawer"
       getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
-        <div className="sheet-box">
-          <Row>
-            <Col span={9} className="sheet-box-left">
-              <div className="sheet-left-panel pr-4">
-                <Form cloudUser={state.cloudUser} updateKey={updateKey} projectType={projectType} />
-                {state.cloudUser.cld?.clientId ? (
-                  <>
-                    <div className="mt-4">
-                      <CardClientDetail client={state.client} />
-                      {/* <ClientDetail client={state.client} filterTag={filterTag} /> */}
-                    </div>
+        <WaterMark
+          fontColor="rgba(0,0,0,.1)"
+          offsetTop={200}
+          content={`${currentUser.username}  ${currentUser.telephone.slice(-4)}`}>
+          <div className="sheet-box">
+            <Row>
+              <Col span={9} className="sheet-box-left">
+                <div className="sheet-left-panel pr-4">
+                  <Form cloudUser={state.cloudUser} updateKey={updateKey} projectType={projectType} />
+                  {state.cloudUser.cld?.clientId ? (
+                    <>
+                      <div className="mt-4">
+                        <CardClientDetail client={state.client} />
+                        {/* <ClientDetail client={state.client} filterTag={filterTag} /> */}
+                      </div>
+                      <div className="text-center mt-6">
+                        <Tooltip placement="right" title="移除CLD客户">
+                          <Button
+                            type="primary"
+                            ghost
+                            size="small"
+                            onClick={() => {
+                              pricingUnLinkClient(state.cloudUser.cld?.clientId)
+                            }}>
+                            <LinkInterrupt size="14" />
+                            <span className="ml-5px">移除CLD客户</span>
+                          </Button>
+                        </Tooltip>
+                      </div>
+                    </>
+                  ) : (
                     <div className="text-center mt-6">
-                      <Tooltip placement="right" title="移除CLD客户">
-                        <Button
-                          type="primary"
-                          ghost
-                          size="small"
-                          onClick={() => {
-                            pricingUnLinkClient(state.cloudUser.cld?.clientId)
-                          }}>
-                          <LinkInterrupt size="14" />
-                          <span className="ml-5px">移除CLD客户</span>
-                        </Button>
-                      </Tooltip>
+                      <Button type="primary" ghost size="small" onClick={handleConnectClient}>
+                        <LinkOne size="14" />
+                        <span className="ml-5px">关联CLD客户</span>
+                      </Button>
                     </div>
-                  </>
-                ) : (
-                  <div className="text-center mt-6">
-                    <Button type="primary" ghost size="small" onClick={handleConnectClient}>
-                      <LinkOne size="14" />
-                      <span className="ml-5px">关联CLD客户</span>
-                    </Button>
-                  </div>
-                )}
-              </div>
-            </Col>
-            <Col
-              span={15}
-              // sm={{ span: 24 }}
-              // md={{ span: 24 }}
-              // lg={{ span: 15 }}
-              // xl={{ span: 15 }}
-              flex={{ flexDirection: 'column' }}
-              className="sheet-box-right">
-              <TabList cloudUser={state.cloudUser} projectType={projectType} ssoId={state.cloudUser.ssoID} />
-              <LowerList log={state.log} serviceLog={state.serviceLog} />
-            </Col>
-          </Row>
-        </div>
+                  )}
+                </div>
+              </Col>
+              <Col
+                span={15}
+                // sm={{ span: 24 }}
+                // md={{ span: 24 }}
+                // lg={{ span: 15 }}
+                // xl={{ span: 15 }}
+                flex={{ flexDirection: 'column' }}
+                className="sheet-box-right">
+                <TabList
+                  cloudUser={state.cloudUser}
+                  projectType={projectType}
+                  ssoId={state.cloudUser.ssoID}
+                />
+                <LowerList log={state.log} serviceLog={state.serviceLog} />
+              </Col>
+            </Row>
+          </div>
+        </WaterMark>
       </Spin>
     </Drawer>
   )