feat: 软件锁注册码+客户点击详情

package.json

@@ -58,6 +58,7 @@
     "ahooks": "^2.10.0",
     "antd": "4.16.12",
     "classnames": "^2.2.6",
+    "copy-to-clipboard": "^3.3.1",
     "crypto-js": "^4.0.0",
     "dayjs": "^1.10.4",
     "dragm": "^0.0.5",
@@ -66,6 +67,7 @@
     "omit.js": "^2.0.2",
     "qs": "^6.9.4",
     "react": "17.0.2",
+    "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "17.0.2",
     "react-helmet-async": "^1.0.4",
     "umi": "3.5.4",

src/global.less

@@ -174,3 +174,10 @@ input:-webkit-autofill:active {
 ::-webkit-scrollbar-thumb:hover {
   background: #636363;
 }
+.textPurple {
+  color: #967bbd;
+  cursor: pointer;
+  &:hover {
+    color: #967bbd;
+  }
+}

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

@@ -23,6 +23,12 @@
       color: #967bbd;
     }
   }
+  .nameContentWidth {
+    width: 70vw;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
   .unlinkIcon {
     padding: 0 3px;
     color: #fd3995;

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Card, message, Tooltip } from 'antd'
+import { Copy } from '@icon-park/react'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+import styles from '@/pages/Product/Lock/LockStore/components/ChangeClient/index.less'
+
+const CopyauthorizeStr = props => {
+  const { authorizeStr } = props.dataSource
+  return (
+    <div className={styles.companyInput}>
+      <Card size="small">
+        <div className="flex justify-between">
+          <div className={`${styles.nameContent} ${styles.nameContentWidth}`}>{authorizeStr}</div>
+          <CopyToClipboard onCopy={() => message.success('复制成功')} text={authorizeStr}>
+            <Tooltip placement="right" title="复制" className="ml-5px">
+              <span className={styles.switchIcon}>
+                <Copy />
+              </span>
+            </Tooltip>
+          </CopyToClipboard>
+        </div>
+      </Card>
+    </div>
+  )
+}
+
+export default CopyauthorizeStr

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

@@ -1,9 +1,11 @@
 import React from 'react'
 import { Row, Col, Divider } from 'antd'
+import { useModal } from '@/components/Modal'
 import { ProductLabel } from '@/pages/Product/Lock/LockStore'
 import ChangeClient from '@/pages/Product/Lock/LockStore/components/ChangeClient'
-
-// import EditableForm from '@/components/EditableForm'
+import CopyauthorizeStr from '@/pages/Product/Lock/LockStore/components/CopyauthorizeStr'
+import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
+import styles from '@/pages/Product/Lock/LockStore/components/ChangeClient/index.less'
 
 export const ChangeCompMap = {
   LONGLE: {
@@ -13,13 +15,31 @@ export const ChangeCompMap = {
 }
 
 const LockForm = props => {
-  const { longle } = props
+  const { longle, customerId } = props
+  console.log(customerId)
+  const { toggleDrawer, setDrawerProps } = useModal()
   const changeCopInputData = {
     clientName: longle.client,
     longleId: longle.id,
     clientId: longle.clientId,
     actionPayload: ChangeCompMap.LONGLE.key
   }
+  const copyAuthorizeStr = {
+    authorizeStr: longle.authorizeStr
+  }
+  const handleCompanyClick = () => {
+    toggleDrawer()
+    setDrawerProps({
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      children: <CompanyDetail dataId={customerId} />
+    })
+    toggleDrawer()
+  }
   const longleStatusNum = {
     1: '生成',
     2: '接收',
@@ -64,10 +84,21 @@ const LockForm = props => {
         <Col span={18}>
           <ChangeClient dataSource={changeCopInputData} />
         </Col>
-        {/* <Col span={18}>{longle.client}</Col> */}
         <Divider />
         <Col span={6}>客户</Col>
-        <Col span={18}>{longle.customerName}</Col>
+        <Col span={18}>
+          <span className="textPurple" onClick={handleCompanyClick}>
+            {longle.customerName}
+          </span>
+        </Col>
+        <Divider />
+        <Col span={6}>注册码</Col>
+        <Col span={18}>
+          <CopyauthorizeStr dataSource={copyAuthorizeStr} />
+        </Col>
+        <Divider />
+        <Col span={6}>升级文件</Col>
+        <Col span={18}>{longle.updateFile}</Col>
       </Row>
     </div>
   )

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

@@ -76,7 +76,7 @@ const Index = props => {
               </div>
             ) : null}
             <div className="sheet-left-panel pr-4">
-              <LockForm longle={state.longle} />
+              <LockForm longle={state.longle} customerId={state.longle.customerId} />
             </div>
           </Col>
           <Col span={12} className="sheet-box-right">