联系人优化

src/components/PopContent/Contacts/ContanctForm.jsx

@@ -7,7 +7,6 @@ const ContanctForm = props => {
   const actionRef = useRef()
   const [form] = Form.useForm()
   const { client } = props
-  // 浏览器实际宽度
 
   useEffect(() => {
     console.log(client)

src/components/PopContent/Contacts/ContanctLowerList.jsx

@@ -1,6 +1,7 @@
 import { Tabs, Table, List } from 'antd'
 import React, { useEffect } from 'react'
 import { connect } from 'umi'
+import useAutoTable from '@/hooks/useAutoTable'
 
 const ContanctLowerList = props => {
   useEffect(() => {
@@ -20,7 +21,11 @@ const ContanctLowerList = props => {
     // servicelisData()
   }, [])
   const { TabPane } = Tabs
-  const { journalName, servicelistName } = props
+  const { journalName, servicelistName,collapsed } = props
+  const needSubtractHeight = 48 + 48 + 48 + 64 + 24 // 需要被裁掉的高度
+  // const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
+
+  const [x, y] = useAutoTable(collapsed, needSubtractHeight)
   const journallist = [...journalName.list]
   const servicelist = [...servicelistName.lists]
   const servicecolumns = [
@@ -40,12 +45,12 @@ const ContanctLowerList = props => {
       <div className="zh-pd-left-15">
         <Tabs type="card">
           <TabPane tab="服务记录" key="服务记录">
-            <div className="sheet-panel-record">
+            <div className="sheet-panel-record" style={{ height:y-230,overflowY:'auto' }}>
               <Table columns={servicecolumns} dataSource={servicelist} pagination={false} />
             </div>
           </TabPane>
           <TabPane tab="日志" key="日志">
-            <div className="sheet-panel-record">
+            <div className="sheet-panel-record" style={{ height:y-230,overflowY:'auto' }}>
               <List
                 dataSource={journallist}
                 split={false}

src/components/PopContent/Contacts/index.jsx

@@ -13,7 +13,6 @@ const Popcontent = props => {
   const needSubtractHeight = 55 // 需要被裁掉的高度
   // const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
   const [x,y] = useAutoTable(collapsed, needSubtractHeight)
-  console.log(y)
 
 
   // 浏览器实际宽度

src/components/PopContent/index.scss

@@ -6,7 +6,7 @@
   overflow-x: hidden;
 }
 .sheet-right-panel {
-  height: 340px;
+  height: 230px;
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -14,7 +14,6 @@
   height: 54px;
 }
 .sheet-panel-record {
-  height: 340px;
+  // height: 340px;
   overflow-x: hidden;
-  overflow-y: auto;
 }

src/pages/Customer/Contact/index.jsx

@@ -58,7 +58,7 @@ const Contact = props => {
       title: '联系人',
       dataIndex: 'clientname',
       key: 'clientname',
-      width: 100,
+      width: 80,
       fixed: 'left',
       render: (clientname, record) => <a onClick={() => showDrawer(record.id)}>{clientname}</a>
     },
@@ -66,13 +66,15 @@ const Contact = props => {
       title: '客户名称',
       dataIndex: 'companyname',
       key: 'companyname',
-      width: 300,
+      width: 420,
+      ellipsis: true,
       render: companyname => <a>{companyname}</a>
     },
     {
       title: '部门',
       dataIndex: 'department',
       key: 'department',
+      ellipsis: true,
       width: 100
     },
     {
@@ -85,7 +87,7 @@ const Contact = props => {
       title: '手机',
       dataIndex: 'phone',
       key: 'phone',
-      width: 100
+      width: 150
     },
     {
       title: 'QQ',
@@ -97,7 +99,7 @@ const Contact = props => {
       title: '邮箱',
       dataIndex: 'email',
       key: 'email',
-      width: 100
+      width: 180
     },
     {
       title: '职务',
@@ -108,21 +110,23 @@ const Contact = props => {
     {
       title: '办公室',
       dataIndex: 'office',
-      key: 'office'
+      key: 'office',
+      width: 150,
+      ellipsis: true
     },
     {
       title: '地区',
       dataIndex: 'local',
       key: 'local',
-      width: 100
+      width: 200
     },
     {
       title: '个人标签',
       dataIndex: 'tag',
       key: 'tag',
+      width: 100,
       render: (_, record) => <Tag color="#16A085">{record.tag}</Tag>,
       filters: true,
-      width: 100,
       // onFilter: true,
       valueType: 'select',
       valueEnum: {
@@ -204,58 +208,61 @@ const Contact = props => {
       title: '地址',
       dataIndex: 'address',
       key: 'address',
-      width: 100,
-      ellipsis: true
+      ellipsis: true,
+      width: 350
     },
     {
       title: '乘车',
       dataIndex: 'ride',
       key: 'ride',
-      width: 100,
-      ellipsis: true
+      ellipsis: true,
+      width: 350
     },
     {
       title: '地标',
       dataIndex: 'landmarks',
       key: 'landmarks',
-      width: 100
+      ellipsis: true,
+      width: 150
     },
     {
       title: '住宿',
       dataIndex: 'stay',
       key: 'stay',
-      width: 100
+      ellipsis: true,
+      width: 250
     },
     {
       title: '备注',
       dataIndex: 'mark',
       key: 'mark',
-      width: 100
+      ellipsis: true,
+      width: 150
     },
     {
       title: '软件锁',
       dataIndex: 'keynum',
       key: 'keynum',
-      width: 100,
+      width: 150,
       render: keynum => <a>{keynum}</a>
     },
     {
       title: '大司空',
       dataIndex: 'dasikong',
       key: 'dasikong',
-      width: 100
+      width: 150
     },
     {
       title: '养护云',
       dataIndex: 'yanghuyun',
       key: 'yanghuyun',
-      width: 100
+      width: 150
     },
     {
       title: '创建人',
       dataIndex: 'chuanpeople',
       key: 'chuanpeople',
-      width: 100
+      width: 150
     }
   ]
   // const { data = [], total = 0 } = props
@@ -276,17 +283,35 @@ const Contact = props => {
     office: {
       show: false
     },
-    // local: {
-    //   show: false
-    // },
+    local: {
+      show: false
+    },
     stay: {
       show: false
     },
+    keynum:{
+      show:false
+    },
+    mark:{
+      show:false
+    },
+    ride:{
+      show:false
+    },
+    landmarks:{
+      show:false
+    },
+    address:{
+      show:false
+    },
     dasikong: {
       show: false
     },
     yanghuyun: {
       show: false
+    },
+    chuanpeople:{
+      show:false
     }
   })
   useEffect(() => {