소스 검색

perf: 优化软件锁table body高度问题+列表数据获取换成自动请求数据+软件锁列表宽度问题

outaozhen 5 년 전
부모
커밋
b30b4a13c3
2개의 변경된 파일21개의 추가작업 그리고 26개의 파일을 삭제
  1. 5 5
      src/pages/Product/Lock/Lockstore/components/LocksDetail/LockModal.jsx
  2. 16 21
      src/pages/Product/Lock/Lockstore/index.jsx

+ 5 - 5
src/pages/Product/Lock/Lockstore/components/LocksDetail/LockModal.jsx

@@ -209,15 +209,15 @@ const LockModal = props => {
               <Spin spinning={state.loading}>
                 {state.client.map((item, index) => (
                   <div key={index} className={styles.card}>
-                    <div className="zh-flex-sub">{item.clientName}</div>
-                    <div className="zh-flex-sub">{item.position}</div>
-                    <div className="zh-flex-sub">{item.telephone}</div>
-                    <div className="zh-flex-sub zh-justify-between">
+                    <span className="w-1/6">{item.clientName}</span>
+                    <span className="w-1/6">{item.position}</span>
+                    <span className="w-1/6">{item.telephone}</span>
+                    <span className="w-1/2 zh-justify-between">
                       <span>{item.companyName}</span>
                       <Button type="primary" size="small" onClick={() => connectClient(item.id)}>
                         选择ta
                       </Button>
-                    </div>
+                    </span>
                   </div>
                 ))}
               </Spin>

+ 16 - 21
src/pages/Product/Lock/Lockstore/index.jsx

@@ -42,31 +42,14 @@ const Lockstore = () => {
   const [selectKeys, setSelectKeys] = useState([])
   const { toggleDrawer, setDrawerProps } = useModal()
   const [state, setState] = useState({
+    params: {},
     data: [],
     total: 0,
     id: ''
   })
-  const initData = async payload => {
-    const {
-      code = -1,
-      data: { longle = [], log = [], total = 0 } = { longle: [], log: [], total: 0 }
-    } = await queryLock(payload)
-    if (code === consts.RET_CODE.SUCCESS) {
-      setState({ ...state, data: longle, log, total })
-    }
-  }
-  useEffect(() => {
-    // props.getlist();
-    initData()
-  }, [])
   const handleSearch = value => {
-    initData({ search: value })
-  }
-  const searchOnchange = e => {
-    const { value = '' } = e.target
-    initData({ search: value })
+    setState({ ...state, params: { ...state.params, search: value } })
   }
-  const { run: handleSearchInputChange } = useDebounceFn(searchOnchange)
   // 展示drawer
   const showDrawer = id => {
     setDrawerProps({
@@ -149,17 +132,29 @@ const Lockstore = () => {
       search={false}
       headerTitle="公共锁库"
       bordered
+      params={state.params}
       columns={columns}
-      dataSource={state.data}
       onLoadingChange={loadingStatus => {
         loadingStatus && redoHeight()
       }}
+      request={async params => {
+        const {
+          code = -1,
+          data: { longle = [], log = [], total = 0 } = { longle: [], log: [], total: 0 }
+        } = await queryLock({ ...params })
+        setState({ ...state, data: longle, log, total })
+        return {
+          data: longle,
+          success: code === consts.RET_CODE.SUCCESS,
+          total
+        }
+      }}
       scroll={getScrollRef}
       toolbar={{
         search: {
           allowClear: true,
           onSearch: handleSearch,
-          onChange: handleSearchInputChange
+          placeholder: '输入软件锁号'
         }
       }}
     />