1

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

@@ -10,16 +10,22 @@ export const lockTypeEnum = {
   UPDATE: 5,
   CHANGE: 6,
   REMARK: 8,
-  RECOVER: 7
+  RECOVER: 7,
+  CHANGE: 3,
+  CHANGE: 4,
+  CHANGE: 9
 }
 
 const LockModal = props => {
   const modalTitleEnum = {
     5: '升级软件锁',
-    6: '更换软件锁',
     8: '备注信息',
     7: '确认收回'
   }
+  const placeholderEnum = {
+    3: '搜索联系人（姓名、手机、QQ、公司名称）',
+    6: '输入新锁号'
+  }
   const [form] = Form.useForm()
   const { Option } = Select
   const { visible, onCancel, onConfirm, loading, type, longleId, keyNum, status } = props
@@ -54,29 +60,30 @@ 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}>
+    <Modal
+      title={
+        modalTitleEnum[type] ?? (
+          <Input
+            className={styles.inputSearch}
+            placeholder={placeholderEnum[type]}
+            prefix={<SearchOutlined />}
+            // onChange={handleInputChange}
+            allowClear={true}
+          />
+        )
+      }
+      visible={visible}
+      confirmLoading={loading}
+      onCancel={onCancel}
+      onOk={() => {
+        form.validateFields().then(values => {
+          values.status = type
+          onConfirm(values)
+        })
+      }}
+      width={800}>
       {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.modalContainer].join(' ')}>
           <div className={styles.modalContent}>
             <Spin spinning={state.laoding}>
               {state.longle.map(item => (
@@ -93,38 +100,36 @@ const LockModal = props => {
             </Spin>
           </div>
         </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.REMARK ? (
-        <Form.Item name="mark" label="备注">
-          <Input.TextArea />
-        </Form.Item>
-      ) : null}
+      <Form {...layout} form={form}>
+        {type === lockTypeEnum.UPDATE ? (
+          <Form.Item name="product" label="新增产品">
+            <Select>
+              <Option key="重庆养护（营改增）">重庆养护（营改增）</Option>
+              <Option key="广东算量新定额">广东算量新定额</Option>
+            </Select>
+          </Form.Item>
+        ) : null}
 
-      {type === lockTypeEnum.RECOVER ? (
-        <>
-          <p>
-            收回锁号 <b>{keyNum}</b>
-          </p>
-          <Form.Item name="longleId" hidden>
-            <Input />
+        {type === lockTypeEnum.REMARK ? (
+          <Form.Item name="mark" label="备注">
+            <Input.TextArea />
           </Form.Item>
-        </>
-      ) : null}
-    </Form>
-    // </Modal>
+        ) : null}
+
+        {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/LockTabList.jsx

@@ -88,8 +88,9 @@ const LockTabList = props => {
           ghost
           size="small"
           className="zh-mg-right-3"
-          // onClick={() => setAddService({ ...setAddService, visible: true })}
-        >
+          onClick={() =>
+            setAddLonglelog({ ...setAddLonglelog, visible: true, type: lockTypeEnum.CHANGE })
+          }>
           借出/销售/赠送
         </Button>
         <Button

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

@@ -1,24 +1,15 @@
+.inputSearch {
+  width: 95%;
+}
 .modalContainer {
-  // width: 60vw;
+  height: 53vh;
+  max-height: 53vh;
+  overflow-y: auto;
   .modalHeader {
     position: relative;
-    padding: 0 1.5rem 1.5rem;
-    .inputSearch {
-      width: 99%;
-    }
-    .closeIcon {
-      position: absolute;
-      top: 5px;
-      right: 7px;
-    }
+    padding: 1.5rem;
   }
   .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;