111

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

@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react'
+import { Modal, Form, Select, Input } from 'antd'
+
+export const lockTypeEnum = {
+  UPDATE: 'update',
+  CHANGE: 'change',
+  REMARK: 'remark',
+  RECOVER: 'recover'
+}
+
+const LockModal = props => {
+  const modalTitleEnum = {
+    update: '升级软件锁',
+    change: '更换软件锁',
+    remark: '备注',
+    recover: '回收软件锁'
+  }
+  const [form] = Form.useForm()
+  const { Option } = Select
+  const { visible, onCancel, onConfirm, loading, type, longleId, keyNum } = props
+  console.log(type)
+  const layout = {
+    layout: 'vertical'
+  }
+  useEffect(() => {
+    if (visible) {
+      form.resetFields()
+      if (type === lockTypeEnum.RECOVER) {
+        form.setFieldsValue({ longleId })
+      }
+    }
+  }, [visible, type])
+  return (
+    <Modal
+      title={modalTitleEnum[type]}
+      visible={visible}
+      confirmLoading={loading}
+      onCancel={onCancel}
+      onOk={() => {
+        form.validateFields().then(values => {
+          onConfirm(values)
+        })
+      }}
+      width={500}>
+      <Form {...layout} form={form}>
+        {type === lockTypeEnum.CHANGE ? (
+          <Form.Item name="newLongleId" label="新锁号">
+            <Input />
+          </Form.Item>
+        ) : null}
+        {type === lockTypeEnum.UPDATE ? (
+          <Form.Item name="name" 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.RECOVER ? (
+          <>
+            <p>
+              回收锁号<span className="zh-fw-600">{keyNum}</span>
+            </p>
+            <Form.Item name="longleId" hidden>
+              <Input />
+            </Form.Item>
+          </>
+        ) : null}
+      </Form>
+    </Modal>
+  )
+}
+
+export default LockModal

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

@@ -4,35 +4,19 @@ 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 LockUpgrade from './LockUpgrade'
-// import LockReplace from './LockReplace'
-// import LockRecover from './LockRecover'
-// import LockRemarks from './LockRemarks'
+import LockModal from './LockModal'
+import { lockTypeEnum } from './LockModal'
+import { servicelogEnum, showProductsStatus } from './consts'
 
 const LockTabList = props => {
   const { longleLog, clientId, longleId } = props
-  // console.log(longleId)
   const [state, setState] = useState({
     visible: false
   })
   const { TabPane } = Tabs
-  const servicelogEnum = {
-    1: '生成',
-    2: '接收',
-    3: '借出',
-    4: '销售',
-    5: '升级',
-    6: '更换',
-    7: '收回',
-    8: '备注',
-    9: '赠送'
-  }
-  const servicelogAAA = {
-    1: '生成',
-    8: '备注'
-  }
+
   const [addLonglelog, setAddLonglelog] = useState({
+    type: '',
     visible: false,
     loading: false
   })
@@ -48,21 +32,6 @@ const LockTabList = props => {
     setAddLonglelog({ ...addLonglelog, loading: false, visible: false })
   }
 
-  // const handleAddLonglelog = async values => {
-  //   setAddLonglelog({ ...addLonglelog, loading: true })
-  //   const { code = -1 } = await apiSoftwareAddLonglelog({ ...values, clientId, longleId })
-  //   if (code === consts.RET_CODE.SUCCESS) {
-  //     message.success('新增成功')
-  //     setState({ ...state, data: values })
-  //   }
-  //   // 请求完了
-  //   setAddLonglelog({ ...addLonglelog, loading: false, visible: false })
-  //   // 刷新数据
-  //   // dispatch({
-  //   //   type: 'refresh/commitAction',
-  //   //   payload: 'contact'
-  //   // })
-  // }
   return (
     <div>
       <div className="zh-pd-left-15">
@@ -90,10 +59,7 @@ const LockTabList = props => {
                           description={ dayjsFormat(item.updatetime, 'MM-DD HH:mm')}
                         /> */}
                       </Col>
-                      <Col span="16">
-                        {servicelogAAA[item.status]}
-                        {/* <ProductLabel data={[item.status]} /> */}
-                      </Col>
+                      <Col span="16">{/* <RenderXXX data={item}></RenderXXX> */}</Col>
                     </Row>
                   </List.Item>
                 )}
@@ -112,36 +78,66 @@ const LockTabList = props => {
         >
           借出/销售/赠送
         </Button>
-        {/* <LockUpgrade onConfirm={handleAddLonglelog} /> */}
-        {/* <LockReplace onConfirm={handleAddLonglelog}></LockReplace>
-        <LockRecover onConfirm={handleAddLonglelog}></LockRecover>
-        <LockRemarks onConfirm={handleAddLonglelog}></LockRemarks> */}
         <Button
           type="primary"
           ghost
           size="small"
           className="zh-mg-right-3"
-          onClick={() => setAddLonglelog({ ...setAddLonglelog, visible: true })}>
+          onClick={() =>
+            setAddLonglelog({ ...setAddLonglelog, visible: true, type: lockTypeEnum.UPDATE })
+          }>
           升级
         </Button>
-        <Button type="primary" ghost size="small" className="zh-mg-right-3">
+        <Button
+          type="primary"
+          ghost
+          size="small"
+          className="zh-mg-right-3"
+          onClick={() =>
+            setAddLonglelog({ ...setAddLonglelog, visible: true, type: lockTypeEnum.CHANGE })
+          }>
           更换
         </Button>
-        <Button type="primary" ghost size="small" className="zh-mg-right-3">
+        <Button
+          type="primary"
+          ghost
+          size="small"
+          className="zh-mg-right-3"
+          onClick={() =>
+            setAddLonglelog({ ...setAddLonglelog, visible: true, type: lockTypeEnum.RECOVER })
+          }>
           收回
         </Button>
-        <Button type="primary" ghost size="small">
+        <Button
+          type="primary"
+          ghost
+          size="small"
+          onClick={() =>
+            setAddLonglelog({ ...setAddLonglelog, visible: true, type: lockTypeEnum.REMARK })
+          }>
           备注
         </Button>
-        <LockUpgrade
+        <LockModal
           onConfirm={handleAddLonglelog}
           loading={addLonglelog.loading}
           visible={addLonglelog.visible}
           onCancel={() => setAddLonglelog({ ...addLonglelog, visible: false })}
+          type={addLonglelog.type}
         />
       </div>
     </div>
   )
 }
 
+// const RenderXXX = ({data}) => {
+//   // const { } = item
+//   return (
+//     <>
+//       {showProductsStatus.includes(item.status) ? (
+//                           <ProductLabel data={item.product} />
+//                         ) : null}
+//     </>
+//   )
+// }
+
 export default LockTabList

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

@@ -1,129 +0,0 @@
-import React, { useEffect } from 'react'
-import { Modal, Form, Select } from 'antd'
-// import ProForm from '@ant-design/pro-form'
-import { useForm } from 'antd/lib/form/Form'
-
-const LockUpgrade = props => {
-  const [form] = useForm()
-  const { Option } = Select
-  const { visible, onCancel, onConfirm, loading } = props
-  const layout = {
-    layout: 'vertical'
-  }
-  useEffect(() => {
-    if (visible) {
-      form.resetFields()
-    }
-  }, [])
-  return (
-    <div>
-      <Modal
-        title="升级软件锁"
-        visible={visible}
-        confirmLoading={loading}
-        onCancel={onCancel}
-        onOk={() => {
-          form.validateFields().then(values => {
-            onConfirm(values)
-          })
-        }}
-        width={500}>
-        <Form {...layout} form={form}>
-          <Form.Item label="新增产品">
-            <Select width="sm" name="name">
-              <Option key="重庆养护（营改增）">重庆养护（营改增）</Option>
-              <Option key="广东算量新定额">广东算量新定额</Option>
-            </Select>
-          </Form.Item>
-          {/* <ProFormSelect
-            options={[
-              {
-                value: '广东算量新定额',
-                label: '广东算量新定额'
-              }
-            ]}
-            width="sm"
-            name="name"
-            label="新增产品"></ProFormSelect> */}
-        </Form>
-      </Modal>
-      {/* <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
-        }}>
-        <ProFormSelect
-          name="product"
-          label="新增产品"
-          valueEnum={{
-            open: 'aaa',
-            closer: 'fwfwuf'
-          }}
-          placeholder="请选择新增产品"
-          rules={[{ required: true, message: '请选择新增产品' }]}
-        />
-      </ModalForm> */}
-      {/* <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>
-      <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>
-      <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>
-  )
-}
-
-export default LockUpgrade

src/pages/Product/Lock/Lockstore/components/LocksDetail/consts.js

@@ -0,0 +1,13 @@
+export const servicelogEnum = {
+  1: '生成',
+  2: '接收',
+  3: '借出',
+  4: '销售',
+  5: '升级',
+  6: '更换',
+  7: '收回',
+  8: '备注',
+  9: '赠送'
+}
+
+export const showProductsStatus = [4, 5, 6]