软件锁抽屉内容提交

src/components/PopContent/Locks/LockForm.jsx

@@ -0,0 +1,40 @@
+import React,{ useEffect } from 'react'
+import { Row, Col } from 'antd'
+// import EditableForm from '@/components/EditableForm'
+
+const LockForm = props => {
+  const { longle } = props
+  useEffect(() => {
+  }, [longle])
+  return (
+    <div>
+      <Row>
+        <Col span={16}>
+          <h2>{longle.keyNum}</h2>
+        </Col>
+        <Col span={8} className="zh-text-right zh-gray">
+        {longle.staffName} 创建于 {longle.makeDay}
+        </Col>
+      </Row>
+      <Row>
+        <Col span={8}>锁号</Col>
+        <Col span={16}>{longle.keyNum}</Col>
+        <Col span={8}>产品</Col>
+        <Col span={16}>{longle.product}</Col>
+        <Col span={8}>期限</Col>
+        <Col span={16}>{longle.allotedTime}</Col>
+        <Col span={8}>使用状态</Col>
+        <Col span={16}>{longle.statusT}</Col>
+        <Col span={8}>负责人</Col>
+        <Col span={16}>{longle.responsible}</Col>
+        <Col span={8}>联系人</Col>
+        <Col span={16}>{longle.client}</Col>
+        <Col span={8}>公司</Col>
+        <Col span={16} />
+      </Row>
+      {/* <EditableForm dataSource={longle} columns={columns}/> */}
+    </div>
+  )
+}
+
+export default LockForm

src/components/PopContent/Locks/LockLowerList.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const LockLowerList = () => {
+  return (
+    <div>
+      dasda
+    </div>
+  )
+}
+
+export default LockLowerList

src/components/PopContent/Locks/LockTabList.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const LockTabList = () => {
+  return (
+    <div>
+      dasdasdasd
+    </div>
+  )
+}
+
+export default LockTabList

src/components/PopContent/Locks/index.jsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react'
+import { Drawer, Row, Col } from 'antd'
+import useAutoTable from '@/hooks/useAutoTable'
+import consts from '@/consts'
+import { apiSoftwareDetail } from '@/services/lock'
+import LockForm from '@/components/PopContent/Locks/LockForm'
+import LockLowerList from '@/components/PopContent/Locks/LockLowerList'
+import LockTabList from '@/components/PopContent/Locks/LockTabList'
+
+const index = props => {
+  const { visible, onClose,collapsed, id = '' } = props
+  const needSubtractHeight = 55 // 需要被裁掉的高度
+  // const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
+  const [x,y] = useAutoTable(collapsed, needSubtractHeight)
+  const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
+  const [state, setState] = useState({
+    longle: {}
+  })
+  const initData = async () => {
+    const {
+      data: { longle = {} },
+      code = -1
+    } = await apiSoftwareDetail(id)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setState({ ...state, longle })
+    }
+  }
+  useEffect(() => {
+    if (visible) {
+      initData()
+    }
+    window.addEventListener('resize', () => {
+      setClientWidth(document.body.clientWidth * 0.7)
+    })
+    return () => {
+      window.removeEventListener('resize', () => {})
+    }
+  }, [visible])
+  return (
+    <div>
+      <div className='sheet-box'>
+        <Drawer
+            title="软件锁"
+            placement="right"
+            bodyStyle={{
+              height:y,
+              overflowY:'hidden'
+            }}
+            width={clientWidth}
+            closable
+            onClose={onClose}
+            visible={visible}
+            // mask={false}
+          >
+          <Row>
+            <Col span={12} className="sheet-box-left" style={{ height:y-25,overflowY:'auto' }}>
+              <div className="sheet-left-panel zh-pd-right-15">
+                <LockForm longle={state.longle}/>
+              </div>
+            </Col>
+            <Col span={12}>
+              <LockTabList />
+              <LockLowerList />
+            </Col>
+          </Row>
+        </Drawer>
+      </div>
+    </div>
+  )
+}
+
+export default index

src/models/lock.js

@@ -0,0 +1,35 @@
+import consts from '@/consts'
+import { queryLock } from '@/services/lock'
+
+export default {
+  namespace: 'lock',
+  state: {
+    data: [],
+    total: 0
+  },
+  // 用于处理异步操作和业务逻辑，由action触发，但不能修改state
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryLock, payload)
+      if (response && response.code === consts.RET_CODE.SUCCESS) {
+        yield put({
+          type: 'show',
+          payload: response.data
+        })
+
+      }
+      // console.log(response)
+    }
+  },
+  // reducers:用于处理同步操作，由action触发，可修改state
+  reducers: {
+    // action:是由reducers及effects的触发器，一般是第一个对象，如：{type:'add',payload:todo}
+    show(state, action) {
+      return {
+        ...state,
+        data: action.payload.longle,
+        total: action.payload.total
+      }
+    }
+  }
+}

src/pages/Product/Lock/Lockstore/index.jsx

@@ -1,12 +1,112 @@
-import React from 'react'
-import { Card } from 'antd'
+import React,{ useState, useEffect } from 'react'
+// import { Card } from 'antd'
+import ProTable from '@ant-design/pro-table'
+import useAutoTable from '@/hooks/useAutoTable'
+import consts from '@/consts'
+import { queryLock } from '@/services/lock'
+import Locks from '@/components/PopContent/Locks'
 
-const Lockstore = () => {
-  // const { modalVisible, onCancel } = props;
+const Lockstore = props => {
+  const { collapsed } = props
+  const needSubtractHeight = 48 + 48 + 48 + 64 + 24 + 32 // 需要被裁掉的高度
+  const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
+
+  const [x, y] = useAutoTable(collapsed, needSubtractHeight, needSubtractWidth)
+  const [state, setState] = useState({
+    data: [],
+    total: 0,
+    id: ''
+  })
+  const initData = async payload => {
+    const {
+      code = -1,
+      data: { longle = [], total = 0 } = { longle: [], total: 0 }
+    } = await queryLock(payload)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setState({ ...state, data: longle, total })
+    }
+  }
+  useEffect(() => {
+    // props.getlist();
+    initData()
+  }, [])
+  // 展示drawer
+  const showDrawer = id => {
+    // console.log(id);
+    setState({ ...state, id, visible: true })
+  }
+
+  // 隐藏drawer
+  const hideDrawer = () => {
+    setState({ ...state, visible: false, id: '' })
+  }
+  const onCreate = values => {
+    console.log(values)
+  }
+  const columns = [
+    {
+      title: '锁号',
+      dataIndex: 'keyNum',
+      key: 'keyNum',
+      width: 150,
+      render: (keyNum, record) => <a onClick={() => showDrawer(record.id)}>{keyNum}</a>
+    },
+    {
+      title: '产品',
+      dataIndex: 'product',
+      key: 'product',
+      width: 350
+    },
+    {
+      title: '办事处',
+      dataIndex: 'category',
+      key: 'category',
+      width: 150
+    },
+    {
+      title: '出库时间',
+      dataIndex: 'makeDay',
+      key: 'makeDay',
+      width: 150
+    },
+    {
+      title: '销售/借出/赠送时间',
+      dataIndex: 'allotedTime',
+      key: 'allotedTime',
+      width: 160
+    },
+    {
+      title: '责任人',
+      dataIndex: 'responsible',
+      key: 'responsible',
+      width: 150
+    },
+    {
+      title: '状态',
+      dataIndex: 'statusT',
+      key: 'statusT',
+      width: 150
+    },
+    {
+      title: '联系人',
+      dataIndex: 'client',
+      key: 'client',
+      width: 150
+    }
+  ]
   return (
-    <Card bordered={false}>
-      Lockstore
-    </Card>
+    <div>
+      <ProTable
+        rowKey={record => record.id}
+        search={false}
+        headerTitle="公共锁库"
+        bordered
+        columns={columns}
+        dataSource={state.data}
+        scroll={{ x, y }}
+      />
+      <Locks onClose={hideDrawer} visible={state.visible} onCreate={onCreate} id={state.id} />
+    </div>
   )
 }
 

src/services/lock.js

@@ -0,0 +1,34 @@
+import request from '@/basic/utils/request'
+import consts from '@/consts'
+
+/**
+ * 请求客户列表
+ * @param {*} payload 载荷
+ */
+export async function queryLock(payload) {
+  const params = { page: 1, size: consts.PAGE_SIZE, ...payload }
+  const data = await request('/api/software/list', {
+    params: { ...params }
+  })
+  return data
+}
+
+/**
+ * 获得软件锁详情
+ * @param {string} id 软件锁记录id
+ */
+export async function apiSoftwareDetail(id) {
+  const params = { id }
+  const data = await request('/api/software/detail', { params })
+  return data
+}
+
+/**
+ * 记录软件锁日志
+ * @param {string} id 软件锁记录id
+ */
+export async function apiSoftwareAddLonglelog(id) {
+  const params = { id }
+  const data = await request('/api/software/add/longlelog', { params })
+  return data
+}