Merge branch 'master' of http://192.168.1.41:3000/outaozhen/cldV2react

src/components/LazyCascader/LazyCascader.jsx

@@ -3,7 +3,7 @@ import React, { forwardRef, useEffect } from 'react'
 import { connect } from 'dva'
 
 const CLazyCascader = props => {
-  const { refinstance, options, dispatch, onChange, ...resetProps } = props
+  const { refinstance, options, dispatch, onChange, changeOnSelect = false, ...resetProps } = props
   // console.log(props.defaultValue)
   useEffect(() => {
     if (!options.length) {
@@ -48,7 +48,7 @@ const CLazyCascader = props => {
       onChange={handleOnChange}
       loadData={loadData}
       fieldNames={{ label: 'name', value: 'id' }}
-      // changeOnSelect
+      changeOnSelect={changeOnSelect}
     />
   )
 }

src/hooks/useAutoTable.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useLayoutEffect, useRef } from 'react'
-import { useDebounceFn } from 'ahooks'
+import { useDebounceFn, useMount, useUpdateLayoutEffect } from 'ahooks'
 import { useStore } from 'dva'
 import { getViewportOffset } from '@/utils/domUtils'
 import { useWindowSizeFn } from './event/useWindomSizeFn'
@@ -44,29 +44,23 @@ export function useTableScroll(columnsRef, selectKeysRef) {
   let bodyEl = null
   const [tableHeight, setTableHeight] = useState(null)
 
-  // const toolbarEl = null
   async function calcTableHeight() {
     const tableEl = document.getElementsByClassName('ant-table-wrapper')[0]
     if (!tableEl) return
-
     if (!bodyEl) {
-      bodyEl = tableEl.querySelector('.ant-table-tbody')
+      bodyEl = tableEl.querySelector('.ant-table-body')
       bodyEl && (bodyEl.style.height = 'unset')
     }
-
     // Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
 
     const headEl = tableEl.querySelector('.ant-table-thead ')
 
     if (!headEl) return
     // Table height from bottom
-    const { bottomIncludeBody, top } = getViewportOffset(headEl)
-    // console.log('top', top)
+    const { bottomIncludeBody } = getViewportOffset(headEl)
 
-    // const margginHeight = 48
     const paddingHeight = 64
 
-    // Pager height
     let paginationHeight = 2
 
     if (!paginationEl) {
@@ -99,14 +93,8 @@ export function useTableScroll(columnsRef, selectKeysRef) {
 
     const height =
       bottomIncludeBody - paddingHeight - paginationHeight - footerHeight - headerHeight
-
-    // console.log('bottomIncludeBody', bottomIncludeBody)
-    // console.log('paddingHeight', paddingHeight)
-    // console.log('paginationHeight', paginationHeight)
-    // console.log('footerHeight', footerHeight)
-    // console.log('headerHeight', headerHeight)
     setTableHeight(height)
-    bodyEl && (bodyEl.style.minHeight = `${height}px`)
+    bodyEl && (bodyEl.style.height = `${height}px`)
   }
 
   function redoHeight() {
@@ -117,11 +105,11 @@ export function useTableScroll(columnsRef, selectKeysRef) {
   // Greater than animation time 280
   useWindowSizeFn(calcTableHeight, 280)
 
-  useLayoutEffect(() => {
+  useMount(() => {
     debounceRedoHeight()
-  }, [])
+  })
 
-  useLayoutEffect(() => {
+  useUpdateLayoutEffect(() => {
     debounceRedoHeight()
   }, [selectKeysRef.length])
 

src/layouts/BasicLayout.less

@@ -1,12 +1,14 @@
 @import '~antd/es/style/themes/default.less';
-.layoutBg{
-  :global(.ant-pro-sider){
+.layoutBg {
+  :global(.ant-pro-sider) {
     color: #333333;
     background: #ffffff;
   }
-  :gloabl(.ant-menu-dark .ant-menu-inline.ant-menu-sub){
+  :gloabl(.ant-menu-dark .ant-menu-inline.ant-menu-sub) {
     color: #333333;
-    background: #ffffff ;
+    background: #ffffff;
   }
+  // :global(.ant-table-body) {
+  //   height: calc(100vh - 48px - 48px - 64px - 46px - 60px);
+  // }
 }
-

src/pages/Customer/Company/index.jsx

@@ -154,6 +154,7 @@ const Company = props => {
       key: 'biaoqian',
       width: 100,
       filters: true,
+
       valueEnum: tag.personTagMap,
       render: (_, record) => (
         <div className="zh-align-center zh-flex-wrap">
@@ -188,7 +189,7 @@ const Company = props => {
           {record.tagCooperationIds.map(item => (
             <span
               key={record.id + item}
-              className="zh-circle-icon zh-mg-right-3"
+              className="zh-square-icon zh-mg-right-3"
               style={{ backgroundColor: teamTagColorMap[item] }}
             />
           ))}
@@ -379,46 +380,44 @@ const Company = props => {
   }
 
   return (
-    <div className="zh-container">
-      <ProTable
-        rowKey={record => record.id}
-        search={false}
-        actionRef={tRef}
-        params={state.params}
-        request={async (params, sort, filter) => {
-          const {
-            code = -1,
-            data: { customer = [], total = 0 } = { customer: [], total: 0 }
-          } = await queryCompany({ ...params, ...sort, ...filter })
-          return {
-            data: customer,
-            success: code === consts.RET_CODE.SUCCESS,
-            total
-          }
-        }}
-        headerTitle="客户"
-        bordered
-        toolbar={{
-          search: {
-            allowClear: true,
-            onSearch: handleSearch
-          },
-          actions: [
-            <LazyCascader onChange={onDistrictChange} key="lazyCascader" />,
-            <AddCompany onConfirm={handleAddCompany} key="addCompanyBtn" />
-          ]
-        }}
-        rowSelection={{
-          onChange: hanleRowSelectChange,
-          type: 'checkbox'
-        }}
-        tableAlertRender={renderTableAlert}
-        scroll={getScrollRef}
-        columnsStateMap={columnsStateMap}
-        onColumnsStateChange={map => setColumnsStateMap(map)}
-        columns={columns}
-      />
-    </div>
+    <ProTable
+      rowKey={record => record.id}
+      search={false}
+      actionRef={tRef}
+      params={state.params}
+      request={async (params, sort, filter) => {
+        const {
+          code = -1,
+          data: { customer = [], total = 0 } = { customer: [], total: 0 }
+        } = await queryCompany({ ...params, ...sort, ...filter })
+        return {
+          data: customer,
+          success: code === consts.RET_CODE.SUCCESS,
+          total
+        }
+      }}
+      headerTitle="客户"
+      bordered
+      toolbar={{
+        search: {
+          allowClear: true,
+          onSearch: handleSearch
+        },
+        actions: [
+          <LazyCascader onChange={onDistrictChange} changeOnSelect={true} key="lazyCascader" />,
+          <AddCompany onConfirm={handleAddCompany} key="addCompanyBtn" />
+        ]
+      }}
+      rowSelection={{
+        onChange: hanleRowSelectChange,
+        type: 'checkbox'
+      }}
+      tableAlertRender={renderTableAlert}
+      scroll={getScrollRef}
+      columnsStateMap={columnsStateMap}
+      onColumnsStateChange={map => setColumnsStateMap(map)}
+      columns={columns}
+    />
   )
 }
 

src/pages/Customer/Contact/index.jsx

@@ -226,7 +226,7 @@ const Contact = props => {
           {record.tagCooperationIds.map(item => (
             <span
               key={record.id + item}
-              className="zh-circle-icon zh-mg-right-3"
+              className="zh-square-icon zh-mg-right-3"
               style={{ backgroundColor: teamTagColorMap[item] }}
             />
           ))}
@@ -510,7 +510,7 @@ const Contact = props => {
           onSearch: handleSearch
         },
         actions: [
-          <LazyCascader onChange={onDistrictChange} key="lazyCascader" />,
+          <LazyCascader onChange={onDistrictChange} changeOnSelect={true} key="lazyCascader" />,
           <Addcontact onConfirm={handleAddClient} key="addContactBtn" />
         ]
       }}

src/services/company.js

@@ -1,12 +1,10 @@
 import request from '@/basic/utils/request'
-import consts from '@/consts'
 
 /**
  * 请求客户列表
  * @param {*} payload 载荷
  */
-export async function queryCompany(payload) {
-  const params = { page: 1, size: consts.PAGE_SIZE, ...payload }
+export async function queryCompany(params) {
   const data = await request.post('/api/customer/list', {
     data: { ...params }
   })