1

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

@@ -5,15 +5,14 @@ import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
 import { queryContact } from '@/services/contact'
 import { queryLock } from '@/services/lock'
 import consts from '@/basic/consts'
+import { useDebounceFn, useThrottleFn } from 'ahooks'
 
 export const lockTypeEnum = {
+  SALE: 3,
   UPDATE: 5,
   CHANGE: 6,
   REMARK: 8,
-  RECOVER: 7,
-  CHANGE: 3,
-  CHANGE: 4,
-  CHANGE: 9
+  RECOVER: 7
 }
 
 const LockModal = props => {
@@ -41,7 +40,7 @@ const LockModal = props => {
     total: 0
   })
   const initData = async params => {
-    const { data: { longle, total } = { customer: [], total: 0 }, code = -1 } = await queryLock(
+    const { data: { longle, total } = { longle: [], total: 0 }, code = -1 } = await queryLock(
       params
     )
     if (code === consts.RET_CODE.SUCCESS) {
@@ -51,6 +50,12 @@ const LockModal = props => {
   useEffect(() => {
     initData({ page: 1, size: 10 })
   }, [])
+  const onChange = e => {
+    const { value = '' } = e.target || e.currentTarget
+    initData({ search: value, page: state.page, size: state.size })
+  }
+
+  const { run: handleInputChange } = useDebounceFn(onChange)
   useEffect(() => {
     if (visible) {
       form.resetFields()
@@ -59,6 +64,12 @@ const LockModal = props => {
       }
     }
   }, [visible, type])
+
+  const handleOk = values => {
+    values.status = type
+    onConfirm(values)
+  }
+
   return (
     <Modal
       title={
@@ -67,7 +78,7 @@ const LockModal = props => {
             className={styles.inputSearch}
             placeholder={placeholderEnum[type]}
             prefix={<SearchOutlined />}
-            // onChange={handleInputChange}
+            onChange={handleInputChange}
             allowClear={true}
           />
         )
@@ -75,13 +86,14 @@ const LockModal = props => {
       visible={visible}
       confirmLoading={loading}
       onCancel={onCancel}
-      onOk={() => {
-        form.validateFields().then(values => {
-          values.status = type
-          onConfirm(values)
-        })
-      }}
-      width={800}>
+      // onOk={() => {
+      //   form.validateFields().then(values => {
+      //     values.status = type
+      //     onConfirm(values)
+      //   })
+      // }}
+      width={800}
+      footer={null}>
       {type === lockTypeEnum.CHANGE ? (
         <div className={[styles.modalContainer].join(' ')}>
           <div className={styles.modalContent}>
@@ -104,18 +116,38 @@ const LockModal = props => {
 
       <Form {...layout} form={form}>
         {type === lockTypeEnum.UPDATE ? (
-          <Form.Item name="product" label="新增产品">
-            <Select>
-              <Option key="重庆养护（营改增）">重庆养护（营改增）</Option>
-              <Option key="广东算量新定额">广东算量新定额</Option>
-            </Select>
-          </Form.Item>
+          <>
+            <Form.Item name="product" label="新增产品">
+              <Select>
+                <Option key="重庆养护（营改增）">重庆养护（营改增）</Option>
+                <Option key="广东算量新定额">广东算量新定额</Option>
+              </Select>
+            </Form.Item>
+            <div className={['zh-text-right', styles.modalFooter].join(' ')}>
+              <Button className="zh-mg-right-10" onClick={onCancel}>
+                取消
+              </Button>
+              <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
+                确定
+              </Button>
+            </div>
+          </>
         ) : null}
 
         {type === lockTypeEnum.REMARK ? (
-          <Form.Item name="mark" label="备注">
-            <Input.TextArea />
-          </Form.Item>
+          <>
+            <Form.Item name="mark" label="备注">
+              <Input.TextArea />
+            </Form.Item>
+            <div className={['zh-text-right', styles.modalFooter].join(' ')}>
+              <Button className="zh-mg-right-10" onClick={onCancel}>
+                取消
+              </Button>
+              <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
+                确定
+              </Button>
+            </div>
+          </>
         ) : null}
 
         {type === lockTypeEnum.RECOVER ? (
@@ -126,6 +158,14 @@ const LockModal = props => {
             <Form.Item name="longleId" hidden>
               <Input />
             </Form.Item>
+            <div className={['zh-text-right', styles.modalFooter].join(' ')}>
+              <Button className="zh-mg-right-10" onClick={onCancel}>
+                取消
+              </Button>
+              <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
+                确定
+              </Button>
+            </div>
           </>
         ) : null}
       </Form>

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

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

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

@@ -1,6 +1,9 @@
 .inputSearch {
   width: 95%;
 }
+.modalFooter {
+  padding: 1.5rem 0 0;
+}
 .modalContainer {
   height: 53vh;
   max-height: 53vh;
@@ -26,8 +29,4 @@
       }
     }
   }
-
-  .modalFooter {
-    padding: 1.5rem;
-  }
 }