style: 调整report表格列宽度

src/views/Report/src/components/ReportDetail/src/components/FieldsTable.vue

@@ -18,7 +18,7 @@ const columnstest = ref([
     field: 'reference_no',
     displayName: 'Reference No. ',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -26,7 +26,7 @@ const columnstest = ref([
     field: 'purchase',
     displayName: 'Purchase',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -34,7 +34,7 @@ const columnstest = ref([
     field: 'house_bill_of_lading',
     displayName: '',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -42,7 +42,7 @@ const columnstest = ref([
     field: 'master_bill_of_lading',
     displayName: '',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -50,7 +50,7 @@ const columnstest = ref([
     field: 'vessel_name',
     displayName: '',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -58,7 +58,7 @@ const columnstest = ref([
     field: 'status',
     displayName: '',
     type: 'status',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -66,7 +66,7 @@ const columnstest = ref([
     field: 'container_number',
     displayName: '',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -74,33 +74,33 @@ const columnstest = ref([
     field: 'service_type',
     displayName: '',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
-  },
+  }
 ])
 const ColumnSortValue = ref('')
 const SelectedValue = ref('')
 const ColumnSortoptions = [
   {
     value: 'Option1',
-    label: 'Option1',
+    label: 'Option1'
   },
   {
     value: 'Option2',
-    label: 'Option2',
+    label: 'Option2'
   },
   {
     value: 'Option3',
-    label: 'Option3',
+    label: 'Option3'
   },
   {
     value: 'Option4',
-    label: 'Option4',
+    label: 'Option4'
   },
   {
     value: 'Option5',
-    label: 'Option5',
-  },
+    label: 'Option5'
+  }
 ]
 const sortOptions = ref([
   {
@@ -113,7 +113,6 @@ const sortOptions = ref([
   }
 ])
 
-const loadingState = useLoadingState()
 const tableLoadingColumn = ref(false)
 const tableLoadingTable = ref(false)
 const exportLoading = ref(false)
@@ -166,10 +165,10 @@ const getTableColumns = async () => {
   // tableLoadingColumn.value = true
   tableData.value.columns = handleColumns(columnstest.value)
   emit('getManageCoulumns', columnstest.value)
-  nextTick(() => {
-    tableRef.value && autoWidth(tableData.value, tableRef.value)
-    tableLoadingColumn.value = false
-  })
+  // nextTick(() => {
+  //   tableRef.value && autoWidth(tableData.value, tableRef.value)
+  //   tableLoadingColumn.value = false
+  // })
 }
 // 获取表格数据
 const getTableData = (isPageChange?: boolean) => {
@@ -201,7 +200,7 @@ const getTableData = (isPageChange?: boolean) => {
     })
     .finally(() => {
       nextTick(() => {
-        tableRef.value && autoWidth(tableData.value, tableRef.value)
+        // tableRef.value && autoWidth(tableData.value, tableRef.value)
         tableLoadingTable.value = false
       })
     })
@@ -212,11 +211,11 @@ const handleSearch = (val: any) => {
   tableLoadingTable.value = true
   setTimeout(() => {
     tableLoadingTable.value = false
-  }, 1000);
+  }, 1000)
 }
 // 下载
 const getExportTableData = (type: string, column: any) => {
-  if(column) {
+  if (column) {
     const newColumns = column.map((item: any) => {
       let curColumn: any = {
         title: item.displayName != '' ? item.displayName : item.title,
@@ -263,12 +262,14 @@ defineExpose({
   >
     <div class="SettingTable">
       <div class="flex">
-        <div class="Title">
-          Report Data Review
-        </div>
+        <div class="Title">Report Data Review</div>
         <div class="flex">
           <span class="sort-text">Sort by:</span>
-          <el-select style="width: 160px;margin: 0 8px;" v-model="ColumnSortValue" placeholder="Please select...">
+          <el-select
+            style="width: 160px; margin: 0 8px"
+            v-model="ColumnSortValue"
+            placeholder="Please select..."
+          >
             <el-option
               v-for="item in ColumnSortoptions"
               :key="item.value"
@@ -276,7 +277,7 @@ defineExpose({
               :value="item.value"
             />
           </el-select>
-          <el-select style="width: 124px;" v-model="SelectedValue" placeholder="Please select...">
+          <el-select style="width: 124px" v-model="SelectedValue" placeholder="Please select...">
             <el-option
               v-for="item in sortOptions"
               :key="item.value"
@@ -288,10 +289,10 @@ defineExpose({
       </div>
       <vxe-grid
         ref="tableRef"
-        :style="{ border: 'none'}"
+        :style="{ border: 'none' }"
         v-bind="tableData"
         :height="containerHeight"
-        v-vloading="tableLoadingColumn || tableLoadingTable || loadingState.trackingTableLoading"
+        v-vloading="tableLoadingColumn"
       >
         <!-- 空数据时的插槽 -->
         <template #empty>
@@ -364,4 +365,4 @@ defineExpose({
   font-size: 14px;
   font-weight: 700;
 }
-</style>
+</style>

src/views/Report/src/components/ReportSchedule/src/components/FieldsTable.vue

@@ -19,7 +19,7 @@ const columnstest = ref([
     field: 'reference_no',
     displayName: 'Reference No. ',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -27,7 +27,7 @@ const columnstest = ref([
     field: 'purchase',
     displayName: 'Purchase',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -35,7 +35,7 @@ const columnstest = ref([
     field: 'house_bill_of_lading',
     displayName: '',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -43,7 +43,7 @@ const columnstest = ref([
     field: 'master_bill_of_lading',
     displayName: '',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -51,7 +51,7 @@ const columnstest = ref([
     field: 'vessel_name',
     displayName: '',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -59,7 +59,7 @@ const columnstest = ref([
     field: 'status',
     displayName: '',
     type: 'status',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -67,7 +67,7 @@ const columnstest = ref([
     field: 'container_number',
     displayName: '',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
   },
   {
@@ -75,33 +75,33 @@ const columnstest = ref([
     field: 'service_type',
     displayName: '',
     type: 'normal',
-    formatter:'',
+    formatter: '',
     checked: true
-  },
+  }
 ])
 const ColumnSortValue = ref('')
 const ManageReportFieldsRef = ref()
 const ColumnSortoptions = [
   {
     value: 'Option1',
-    label: 'Option1',
+    label: 'Option1'
   },
   {
     value: 'Option2',
-    label: 'Option2',
+    label: 'Option2'
   },
   {
     value: 'Option3',
-    label: 'Option3',
+    label: 'Option3'
   },
   {
     value: 'Option4',
-    label: 'Option4',
+    label: 'Option4'
   },
   {
     value: 'Option5',
-    label: 'Option5',
-  },
+    label: 'Option5'
+  }
 ]
 
 const loadingState = useLoadingState()
@@ -155,10 +155,10 @@ const handleColumns = (columns: any) => {
 const getTableColumns = async () => {
   // tableLoadingColumn.value = true
   tableData.value.columns = handleColumns(columnstest.value)
-  nextTick(() => {
-    tableRef.value && autoWidth(tableData.value, tableRef.value)
-    tableLoadingColumn.value = false
-  })
+  // nextTick(() => {
+  //   tableRef.value && autoWidth(tableData.value, tableRef.value)
+  //   tableLoadingColumn.value = false
+  // })
 }
 // 获取表格数据
 const getTableData = (isPageChange?: boolean) => {
@@ -190,7 +190,7 @@ const getTableData = (isPageChange?: boolean) => {
     })
     .finally(() => {
       nextTick(() => {
-        tableRef.value && autoWidth(tableData.value, tableRef.value)
+        // tableRef.value && autoWidth(tableData.value, tableRef.value)
         tableLoadingTable.value = false
       })
     })
@@ -201,11 +201,11 @@ const handleSearch = (val: any) => {
   tableLoadingTable.value = true
   setTimeout(() => {
     tableLoadingTable.value = false
-  }, 1000);
+  }, 1000)
 }
 // 下载
 const getExportTableData = (type: string, column: any) => {
-  if(column) {
+  if (column) {
     const newColumns = column.map((item: any) => {
       let curColumn: any = {
         title: item.displayName != '' ? item.displayName : item.title,
@@ -260,12 +260,14 @@ defineExpose({
   >
     <div class="SettingTable">
       <div class="flex">
-        <div class="Title">
-          Report Data Review
-        </div>
+        <div class="Title">Report Data Review</div>
         <div class="flex">
           <span class="sort-text">Sort by:</span>
-          <el-select style="width: 160px;margin: 0 8px;" v-model="ColumnSortValue" placeholder="Please select...">
+          <el-select
+            style="width: 160px; margin: 0 8px"
+            v-model="ColumnSortValue"
+            placeholder="Please select..."
+          >
             <el-option
               v-for="item in ColumnSortoptions"
               :key="item.value"
@@ -276,12 +278,15 @@ defineExpose({
           <el-button type="default" @click="handleClickManageFields">
             <span class="font_family icon-icon_set_b"></span>Manage Fields
           </el-button>
-        <ManageReportFields ref="ManageReportFieldsRef" @ApplyNewColumn="ApplyNewColumn"></ManageReportFields>
+          <ManageReportFields
+            ref="ManageReportFieldsRef"
+            @ApplyNewColumn="ApplyNewColumn"
+          ></ManageReportFields>
         </div>
       </div>
       <vxe-grid
         ref="tableRef"
-        :style="{ border: 'none'}"
+        :style="{ border: 'none' }"
         v-bind="tableData"
         :height="containerHeight"
         v-vloading="tableLoadingColumn || tableLoadingTable || loadingState.trackingTableLoading"
@@ -358,4 +363,4 @@ defineExpose({
   font-size: 14px;
   font-weight: 700;
 }
-</style>
+</style>