feat: 软件锁更换联系人相关

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

@@ -96,7 +96,6 @@ const ChangeSupervisor = props => {
   return (
     <div className={styles.companyInput}>
       {staffId !== consts.ENCRYPTION_ZERO ? normalValueRender : notValueRender}
-      {/* {staffId === consts.ENCRYPTION_ZERO && normalValueRender} */}
     </div>
   )
 }

src/pages/Product/Lock/Lockstore/components/ChangeClient/index.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { Switch, LinkOne } from '@icon-park/react'
+import { useModal } from '@/components/Modal'
+import { Card, Tooltip } from 'antd'
+import consts from '@/basic/consts'
+import { useDispatch } from 'dva'
+import ConnectClient from '@/pages/Customer/Client/components/ConnectClient'
+import styles from './index.less'
+
+export const ChangeCompMap = {
+  LONGLE: {
+    key: 'software',
+    title: '联系人'
+  }
+}
+
+const ChangeClient = props => {
+  const dispatch = useDispatch()
+  const { toggleModal, setModalProps } = useModal()
+  const {
+    dataSource: { longleId, clientId, clientName, actionPayload = ChangeCompMap.LONGLE.key }
+  } = props
+  const refreshClient = () => {
+    dispatch({
+      type: 'refresh/commitAction',
+      payload: 'clientlist'
+    })
+  }
+  const handleConnectClient = () => {
+    setModalProps({
+      width: '60vw',
+      modalRender: () => (
+        <ConnectClient
+          onSelect={refreshClient}
+          id={longleId}
+          clientId={clientId}
+          preUrl={actionPayload}
+        />
+      ),
+      onCancel: () => toggleModal()
+    })
+    toggleModal()
+  }
+  const notValueRender = (
+    <div onClick={handleConnectClient} className={styles.notCompanyContent}>
+      <LinkOne size="14" />
+      <span className="ml-5px">关联联系人</span>
+    </div>
+  )
+
+  const normalValueRender = (
+    <Card size="small">
+      <div className="flex justify-between">
+        <div className={styles.nameContent}>{clientName}</div>
+        <div className="max-w-55px">
+          <Tooltip
+            placement="right"
+            title="更换联系人"
+            className="ml-5px"
+            onClick={handleConnectClient}>
+            <span className={styles.switchIcon}>
+              <Switch />
+            </span>
+          </Tooltip>
+        </div>
+      </div>
+    </Card>
+  )
+  return (
+    <div className={styles.companyInput}>
+      {clientId !== consts.ENCRYPTION_ZERO ? normalValueRender : notValueRender}
+    </div>
+  )
+}
+
+export default ChangeClient

src/pages/Product/Lock/Lockstore/components/ChangeClient/index.less

@@ -0,0 +1,54 @@
+.companyInput {
+  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;
+  }
+  .notCompanyContent {
+    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;
+    }
+  }
+  .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;
+    }
+  }
+}

src/pages/Product/Lock/Lockstore/components/LocksDetail/LockForm.jsx

@@ -1,11 +1,17 @@
 import React from 'react'
 import { Row, Col, Divider } from 'antd'
 import { ProductLabel } from '@/pages/Product/Lock/LockStore'
+import ChangeClient from '@/pages/Product/Lock/LockStore/components/ChangeClient'
 
 // import EditableForm from '@/components/EditableForm'
 
 const LockForm = props => {
   const { longle } = props
+  const changeCopInputData = {
+    clientName: longle.client,
+    longleId: longle.id,
+    clientId: longle.clientId
+  }
   const longleStatusNum = {
     1: '生成',
     2: '接收',
@@ -47,12 +53,14 @@ const LockForm = props => {
         <Col span={18}>{longle.responsible}</Col>
         <Divider />
         <Col span={6}>联系人</Col>
-        <Col span={18}>{longle.client}</Col>
+        <Col span={18}>
+          <ChangeClient dataSource={changeCopInputData} />
+        </Col>
+        {/* <Col span={18}>{longle.client}</Col> */}
         <Divider />
         <Col span={6}>公司</Col>
         <Col span={18} />
       </Row>
-      {/* <EditableForm dataSource={longle} columns={columns}/> */}
     </div>
   )
 }

src/pages/Product/Lock/Lockstore/components/LocksDetail/index.jsx

@@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react'
 import { Row, Col } from 'antd'
 import consts from '@/consts'
 import { apiSoftwareDetail } from '@/services/lock'
-import LockForm from './LockForm.jsx'
-import LockLowerList from './LockLowerList'
-import LockTabList from './LockTabList'
+import LockForm from './Form.jsx'
+import LockLowerList from './LowerList'
+import LockTabList from './TabList'
 import { connect } from 'dva'
 
 const Index = props => {

src/services/lock.js

@@ -42,3 +42,13 @@ export async function apiReceiveOldLock(params) {
     data: params
   })
 }
+
+/**
+ * 软件锁更换联系人
+ * @param {*} payload
+ * @returns
+ */
+export async function apiChangeClient(preUrl, payload) {
+  const data = await request.post(`/${preUrl}/changeClient`, { data: { ...payload } })
+  return data
+}