软件锁升级相关

src/pages/Customer/Contact/components/CustomerModal/index.less

@@ -4,7 +4,7 @@
     position: relative;
     padding: 1.5rem;
     .inputSearch {
-      width: 90%;
+      width: 99%;
     }
     .closeIcon {
       position: absolute;

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

@@ -1,5 +1,10 @@
-import React, { useEffect } from 'react'
-import { Modal, Form, Select, Input } from 'antd'
+import React, { useState, useEffect } from 'react'
+import { Modal, Form, Select, Input, Spin, Button } from 'antd'
+import styles from '@/pages/Customer/Contact/components/CustomerModal/index.less'
+import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
+import { queryContact } from '@/services/contact'
+import { queryLock } from '@/services/lock'
+import consts from '@/basic/consts'
 
 export const lockTypeEnum = {
   UPDATE: 5,
@@ -21,6 +26,25 @@ const LockModal = props => {
   const layout = {
     layout: 'vertical'
   }
+  const [state, setState] = useState({
+    laoding: true,
+    longle: [],
+    searchVal: '',
+    page: 1,
+    size: 10,
+    total: 0
+  })
+  const initData = async params => {
+    const { data: { longle, total } = { customer: [], total: 0 }, code = -1 } = await queryLock(
+      params
+    )
+    if (code === consts.RET_CODE.SUCCESS) {
+      setState({ ...state, longle: state.longle.concat(longle), total, laoding: false })
+    }
+  }
+  useEffect(() => {
+    initData({ page: 1, size: 10 })
+  }, [])
   useEffect(() => {
     if (visible) {
       form.resetFields()
@@ -41,13 +65,40 @@ const LockModal = props => {
           onConfirm(values)
         })
       }}
-      width={500}>
+      // width={800}
+    >
       <Form {...layout} form={form}>
         {type === lockTypeEnum.CHANGE ? (
-          <Form.Item name="newLongleId" label="新锁号">
-            <Input />
-          </Form.Item>
-        ) : null}
+          <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
+            <div className={styles.modalHeader}>
+              <Input
+                prefix={<SearchOutlined />}
+                className={styles.inputSearch}
+                placeholder="输入新锁号"
+                // onChange={handleInputChange}
+              />
+            </div>
+            <div className={styles.modalContent}>
+              <Spin spinning={state.laoding}>
+                {state.longle.map(item => (
+                  <div key={item.id} className={styles.card}>
+                    <div className="zh-flex-sub">{item.keyNum}</div>
+                    <div className="zh-flex-sub zh-justify-between">
+                      <span>{item.product}</span>
+                      <Button type="primary" size="small">
+                        关联
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </Spin>
+            </div>
+          </div>
+        ) : // <Form.Item name="newLongleId" label="新锁号">
+        //   <Input />
+        // </Form.Item>
+        null}
+
         {type === lockTypeEnum.UPDATE ? (
           <Form.Item name="product" label="新增产品">
             <Select>