Update publicUnit.vue

policeManagement/src/views/query/publicUnit.vue

@@ -9,7 +9,7 @@
       :request-api="reqApi"
       :columns="columns"
       :searchFormOptions="searchFormOptions"
-      :scroll="{ x }"
+      :scroll="{ x: x }"
     >
       <template #tableHeader>
         <a-space>
@@ -53,6 +53,7 @@ const columns: TableProps['columns'] = [
   {
     dataIndex: 'name',
     title: '单位名称',
+    width: 200,
   },
 
   {
@@ -61,11 +62,14 @@ const columns: TableProps['columns'] = [
     customRender: ({ record }) => {
       return `${record?.provinceName}/${record?.cityName}/${record?.districtsName}/${record?.streetName}`
     },
+    width: 300,
   },
 
   {
     dataIndex: 'address',
     title: '详细地址',
+    width: 200,
+    ellipsis: true,
   },
 
   {
@@ -74,6 +78,7 @@ const columns: TableProps['columns'] = [
     customRender: ({ record }) => {
       return record?.contactPersonInfo?.name
     },
+    width: 200,
   },
   {
     dataIndex: 'contactPersonInfo',
@@ -81,16 +86,21 @@ const columns: TableProps['columns'] = [
     customRender: ({ record }) => {
       return record?.contactPersonInfo?.telephone
     },
+    width: 150,
   },
   {
     dataIndex: 'createTime',
     title: '创建时间',
+    width: 120,
+    ellipsis: true,
   },
   {
     dataIndex: 'remark',
-    title: '备注',
+    width: 120,
+    ellipsis: true,
   },
   {
+    width: 200,
     dataIndex: 'opt',
     title: '操作',
     customRender: ({ record }) => (
@@ -136,7 +146,11 @@ const columns: TableProps['columns'] = [
     ),
   },
 ]
-const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
+// const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
+const x: number = columns.reduce((a, b) => {
+  console.log('x_____________________', a, b, b.width)
+  return a + (b.width as number)
+}, 0)
 
 const saveOrUpdateEnterprisesUnit = (params: _FormType, callback: Function) => {
   const _formRef = ref<FormExpose>(null)
@@ -627,34 +641,31 @@ const expandedRowRender: TableProMaxProps['expandedRowRender'] = ({ record }) =>
       },
     },
   ]
-  // const x2: number = _columns.reduce((a, b) => a + (b.width as number), 0)
+  const x2: number = _columns.reduce((a, b) => a + (b.width as number), 0)
   const _reqApi: _TableProps['requestApi'] = async () => {
     // @ts-ignore
     return await api.get('/m2/eu/listSp', { enterprisesUnitId: record?.snowFlakeId })
   }
   return (
-    <div style={{ width: '100%' }}>
-      <TableProMax
-        style={{ width: '1600px' }}
-        scroll={{ x: '1600px' }}
-        ref={_tableRef}
-        size='small'
-        columns={_columns}
-        requestApi={_reqApi}
-        isPagination={false}
-        v-slots={{
-          tableHeader: () => {
-            return (
-              <Space>
-                <Button type={'primary'} onClick={() => addService(record)}>
-                  新增服务项目
-                </Button>
-              </Space>
-            )
-          },
-        }}
-      />
-    </div>
+    <TableProMax
+      scroll={{ x: x2 }}
+      ref={_tableRef}
+      size='small'
+      columns={_columns}
+      requestApi={_reqApi}
+      isPagination={false}
+      v-slots={{
+        tableHeader: () => {
+          return (
+            <Space>
+              <Button type={'primary'} onClick={() => addService(record)}>
+                新增服务项目
+              </Button>
+            </Space>
+          )
+        },
+      }}
+    />
   )
 }