1

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

@@ -1,6 +1,6 @@
 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 styles from './index.less'
 import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
 import { queryContact } from '@/services/contact'
 import { queryLock } from '@/services/lock'
@@ -54,78 +54,77 @@ const LockModal = props => {
     }
   }, [visible, type])
   return (
-    <Modal
-      title={modalTitleEnum[type]}
-      visible={visible}
-      confirmLoading={loading}
-      onCancel={onCancel}
-      onOk={() => {
-        form.validateFields().then(values => {
-          values.status = type
-          onConfirm(values)
-        })
-      }}
-      // width={800}
-    >
-      <Form {...layout} form={form}>
-        {type === lockTypeEnum.CHANGE ? (
-          <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>
+    // <Modal
+    //   title={modalTitleEnum[type]}
+    //   visible={visible}
+    //   confirmLoading={loading}
+    //   onCancel={onCancel}
+    //   onOk={() => {
+    //     form.validateFields().then(values => {
+    //       values.status = type
+    //       onConfirm(values)
+    //     })
+    //   }}
+    //   width={800}>
+    <Form {...layout} form={form}>
+      {type === lockTypeEnum.CHANGE ? (
+        <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>
-                ))}
-              </Spin>
-            </div>
+                </div>
+              ))}
+            </Spin>
           </div>
-        ) : // <Form.Item name="newLongleId" label="新锁号">
-        //   <Input />
-        // </Form.Item>
-        null}
+        </div>
+      ) : // <Form.Item name="newLongleId" label="新锁号">
+      //   <Input />
+      // </Form.Item>
+      null}
 
-        {type === lockTypeEnum.UPDATE ? (
-          <Form.Item name="product" label="新增产品">
-            <Select>
-              <Option key="重庆养护（营改增）">重庆养护（营改增）</Option>
-              <Option key="广东算量新定额">广东算量新定额</Option>
-            </Select>
-          </Form.Item>
-        ) : null}
+      {type === lockTypeEnum.UPDATE ? (
+        <Form.Item name="product" label="新增产品">
+          <Select>
+            <Option key="重庆养护（营改增）">重庆养护（营改增）</Option>
+            <Option key="广东算量新定额">广东算量新定额</Option>
+          </Select>
+        </Form.Item>
+      ) : null}
 
-        {type === lockTypeEnum.REMARK ? (
-          <Form.Item name="mark" label="备注">
-            <Input.TextArea />
-          </Form.Item>
-        ) : null}
+      {type === lockTypeEnum.REMARK ? (
+        <Form.Item name="mark" label="备注">
+          <Input.TextArea />
+        </Form.Item>
+      ) : null}
 
-        {type === lockTypeEnum.RECOVER ? (
-          <>
-            <p>
-              收回锁号 <b>{keyNum}</b>
-            </p>
-            <Form.Item name="longleId" hidden>
-              <Input />
-            </Form.Item>
-          </>
-        ) : null}
-      </Form>
-    </Modal>
+      {type === lockTypeEnum.RECOVER ? (
+        <>
+          <p>
+            收回锁号 <b>{keyNum}</b>
+          </p>
+          <Form.Item name="longleId" hidden>
+            <Input />
+          </Form.Item>
+        </>
+      ) : null}
+    </Form>
+    // </Modal>
   )
 }
 

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

@@ -0,0 +1,42 @@
+.modalContainer {
+  // width: 60vw;
+  .modalHeader {
+    position: relative;
+    padding: 0 1.5rem 1.5rem;
+    .inputSearch {
+      width: 99%;
+    }
+    .closeIcon {
+      position: absolute;
+      top: 5px;
+      right: 7px;
+    }
+  }
+  .modalContent {
+    height: 53vh;
+    max-height: 53vh;
+    padding: 1.5rem;
+    overflow-y: auto;
+    border-top: 1px solid #dee2e6;
+    // border-bottom: 1px solid #dee2e6;
+    .card {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem;
+      word-wrap: break-word;
+      background-color: #ffffff;
+      background-clip: border-box;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      border-radius: 4px;
+      box-shadow: 0 0 13px 0 rgb(74 53 107 / 8%) !important;
+      &:not(:last-of-type) {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+
+  .modalFooter {
+    padding: 1.5rem;
+  }
+}