软件锁相关框架

src/components/PopContent/Locks/LockRecover.jsx

@@ -1,9 +1,31 @@
+import { ModalForm } from '@ant-design/pro-form'
 import React from 'react'
+import { Button } from 'antd'
 
-const LockRecover = () => {
+const LockRecover = props => {
+  const { onConfirm } = props
+  const layout = {
+    layout: 'vertical'
+  }
   return (
     <div>
-      <a>收回</a>
+      <ModalForm
+        width={500}
+        {...layout}
+        title="确认收回"
+        trigger={
+          <Button type="primary" ghost size="small" className="zh-mg-right-3">
+            收回
+          </Button>
+        }
+        onFinish={async values => {
+          await onConfirm(values)
+          return true
+        }}>
+        <div>
+          收回锁号<b>HNYH-0654</b>
+        </div>
+      </ModalForm>
     </div>
   )
 }

src/components/PopContent/Locks/LockRemarks.jsx

@@ -1,9 +1,29 @@
+import { ModalForm, ProFormTextArea } from '@ant-design/pro-form'
 import React from 'react'
+import { Button } from 'antd'
 
-const LockRemarks = () => {
+const LockRemarks = props => {
+  const { onConfirm } = props
+  const layout = {
+    layout: 'vertical'
+  }
   return (
     <div>
-      <a></a>备注
+      <ModalForm
+        width={500}
+        {...layout}
+        title="备注信息"
+        trigger={
+          <Button type="primary" ghost size="small" className="zh-mg-right-3">
+            备注
+          </Button>
+        }
+        onFinish={async values => {
+          await onConfirm(values)
+          return true
+        }}>
+        <ProFormTextArea label="备注" name="mark"></ProFormTextArea>
+      </ModalForm>
     </div>
   )
 }

src/components/PopContent/Locks/LockReplace.jsx

@@ -1,9 +1,33 @@
+import { ModalForm, ProFormText } from '@ant-design/pro-form'
 import React from 'react'
+import { Button } from 'antd'
 
-const LockReplace = () => {
+const LockReplace = props => {
+  const { onConfirm } = props
+  const layout = {
+    layout: 'vertical'
+  }
   return (
     <div>
-      <a>更换</a>
+      <ModalForm
+        width={500}
+        {...layout}
+        title="更换软件锁"
+        trigger={
+          <Button type="primary" ghost size="small" className="zh-mg-right-3">
+            更换
+          </Button>
+        }
+        onFinish={async values => {
+          await onConfirm(values)
+          return true
+        }}>
+        <ProFormText
+          name="newLongleId"
+          label="新锁号"
+          placeholder="请选择新锁号"
+          rules={[{ required: true, message: '请选择新增产品' }]}></ProFormText>
+      </ModalForm>
     </div>
   )
 }

src/components/PopContent/Locks/LockTabList.jsx

@@ -1,14 +1,16 @@
 import React, { useState } from 'react'
-import { Row, Col, List, Tabs, Button } from 'antd'
+import { Row, Col, List, Tabs, message } from 'antd'
 import { dayjsFormat } from '@/utils/utils'
 import consts from '@/consts'
 import { apiSoftwareAddLonglelog } from '@/services/lock'
 import { ProductLabel } from '@/pages/Product/Lock/Lockstore'
 import LockUpgrade from './LockUpgrade'
+import LockReplace from './LockReplace'
+import LockRecover from './LockRecover'
+import LockRemarks from './LockRemarks'
 
 const LockTabList = props => {
   const { longleLog, clientId, longleId } = props
-  console.log(clientId)
   const [state, setState] = useState({
     visible: false
   })
@@ -82,18 +84,21 @@ const LockTabList = props => {
           </TabPane>
         </Tabs>
       </div>
-      <div className="sheet-btns zh-pd-left-15 zh-pd-top-15">
-        <Button
+      <div className="sheet-btns zh-pd-left-15 zh-pd-top-15 zh-flex">
+        {/* <Button
           type="primary"
           ghost
           size="small"
           className="zh-mg-right-3"
-          // onClick={() => setAddService({ ...setAddService, visible: true })}
+          onClick={() => setAddService({ ...setAddService, visible: true })}
         >
           借出/销售/赠送
-        </Button>
+        </Button> */}
         <LockUpgrade onConfirm={handleAddLonglelog} />
-        <Button type="primary" ghost size="small" className="zh-mg-right-3">
+        <LockReplace onConfirm={handleAddLonglelog}></LockReplace>
+        <LockRecover onConfirm={handleAddLonglelog}></LockRecover>
+        <LockRemarks onConfirm={handleAddLonglelog}></LockRemarks>
+        {/* <Button type="primary" ghost size="small" className="zh-mg-right-3">
           更换
         </Button>
         <Button type="primary" ghost size="small" className="zh-mg-right-3">
@@ -101,13 +106,7 @@ const LockTabList = props => {
         </Button>
         <Button type="primary" ghost size="small">
           备注
-        </Button>
-        {/* <LockUpgrade
-          onConfirm={handleAddLonglelog}
-          loading={addLonglelog.loading}
-          visible={addLonglelog.visible}
-          onCancel={() => setAddLonglelog({ ...addLonglelog, visible: false })}
-        /> */}
+        </Button> */}
       </div>
     </div>
   )

src/components/PopContent/Locks/LockUpgrade.jsx

@@ -1,23 +1,16 @@
-import React, { useEffect } from 'react'
-import { Button, Modal } from 'antd'
-import ProForm, { ProFormSelect, ModalForm } from '@ant-design/pro-form'
-import { useForm } from 'antd/lib/form/Form'
+import React from 'react'
+import { Button } from 'antd'
+import { ProFormSelect, ModalForm } from '@ant-design/pro-form'
 
 const LockUpgrade = props => {
-  // const [form] = useForm()
-  const { visible, onCancel, onConfirm, loading } = props
+  const { onConfirm } = props
   const layout = {
-    layout: 'horizontal'
+    layout: 'vertical'
   }
-  // useEffect(() => {
-  //   if (visible) {
-  //     form.resetFields()
-  //   }
-  // }, [])
   return (
     <div>
       <ModalForm
-        size="small"
+        width={500}
         {...layout}
         title="升级软件锁"
         trigger={
@@ -40,34 +33,6 @@ const LockUpgrade = props => {
           rules={[{ required: true, message: '请选择新增产品' }]}
         />
       </ModalForm>
-      {/* <Modal
-        {...layout}
-        title="升级软件锁"
-        visible={visible}
-        confirmLoading={loading}
-        onCancel={onCancel}
-        onOk={() => {
-          form.validateFields().then(values => {
-            onConfirm(values)
-          })
-        }}
-        width={500}>
-        <ProForm
-          submitter={{
-            resetButtonProps: {
-              style: {
-                display: 'none'
-              }
-            },
-            submitButtonProps: {
-              style: {
-                display: 'none'
-              }
-            }
-          }}>
-
-        </ProForm>
-      </Modal> */}
     </div>
   )
 }