标准代码表支持自适应列宽

@@ -10,6 +10,7 @@ import Table from '@/components/Table/index.vue'
 // import Dialog from '@/components/Dialog/index.vue'
 // import Dialog from '@/components/Dialog/index.vue'
 import useCatchStore from "@/store/modules/catch";
 import useCatchStore from "@/store/modules/catch";
 import { chunk } from '@/utils/common'
 import { chunk } from '@/utils/common'
+import { calcColumnWidth } from "@/utils/index";
 import { getStandardCodeDataList, getStandardCodeFields, 
 import { getStandardCodeDataList, getStandardCodeFields, 
   saveStandardCodeFieldsData, deleteStandardCodeFieldsData,
   saveStandardCodeFieldsData, deleteStandardCodeFieldsData,
   exportStandardCodeData
   exportStandardCodeData
@@ -120,6 +121,49 @@ const dialogInfo = ref({
   },
   },
 })
 })
 
 
+/** otherWidth表示使用标题宽度时添加标题排序图标等宽度 */
+const calcTableColumnWidth = (data: any[], prop, title, otherWidth = 0) => {
+  let d: any[] = [];
+  data.forEach((dt) => d.push(dt[prop]));
+  return calcColumnWidth(
+    d,
+    title,
+    {
+      fontSize: 14,
+      fontFamily: "SimSun",
+    },
+    {
+      fontSize: 14,
+      fontFamily: "SimSun",
+    },
+    otherWidth
+  );
+};
+
+/** 每列字段对应的列宽计算结果。 */
+const originTableFieldColumn = ref({});
+
+watch(
+  () => tableData.value,
+  (val: any[], oldVal) => {
+    if (!tableFields.value?.length) {
+    //  originTableFieldColumn.value = {};
+      return;
+    }
+    //originTableFieldColumn.value = {};
+    tableFields.value.forEach((field, index) => {
+      field.width = calcTableColumnWidth(
+        val?.slice(0, 30) || [],
+        field.field,
+        field.label,
+        24
+      );
+    });
+  },
+  {
+    deep: true,
+  }
+);
 
 
 const getFirstPageData = () => {
 const getFirstPageData = () => {
   page.value.curr = 1;
   page.value.curr = 1;
@@ -476,16 +520,6 @@ const setUploadDataInfo = async (info, setField = false) => {
   // chunkData()
   // chunkData()
 }
 }
 
 
-const chunkData = () => {
-  const data = orginData.value
-  tableChunkData.value = chunk(data, page.value.limit)
-  tableData.value = tableChunkData.value[page.value.curr - 1]
-  tableInfo.value.data = tableData.value
-  tableInfo.value.page.limit = page.value.limit
-  tableInfo.value.page.curr = page.value.curr
-  tableInfo.value.page.rows = orginData.value.length
-}
-
 const batching = (type) => {
 const batching = (type) => {
   if (type == 'delete') {
   if (type == 'delete') {
     if (selectRowData.value.length == 0) {
     if (selectRowData.value.length == 0) {

@@ -100,16 +100,16 @@ const tableInfo: any = ref({
   fixedSelection: true,
   fixedSelection: true,
   fields: [
   fields: [
     { label: "序号", type: "index", width: 56, align: "center" },
     { label: "序号", type: "index", width: 56, align: "center" },
-    { label: '代码名称', field: 'codeName', width: 140 },
+    { label: '代码名称', field: 'codeName', width: 160 },
     // { label: '代码编码', field: 'code', width: 140 },
     // { label: '代码编码', field: 'code', width: 140 },
     { label: '标准号', field: 'standard', width: 140 },
     { label: '标准号', field: 'standard', width: 140 },
-    { label: '标准名称', field: 'standardName', width: 140 },
+    { label: '标准名称', field: 'standardName', width: 160 },
     // { label: '启用状态', field: 'bizState', type: 'switch', activeText: '启用', inactiveText: '停用', activeValue: 1, inactiveValue: 0, switchWidth: 56, width: 100, align: 'center' },
     // { label: '启用状态', field: 'bizState', type: 'switch', activeText: '启用', inactiveText: '停用', activeValue: 1, inactiveValue: 0, switchWidth: 56, width: 100, align: 'center' },
     { label: '启用状态', field: 'bizState', type: 'tag', width: 100, align: 'center',getName: (scope) => {
     { label: '启用状态', field: 'bizState', type: 'tag', width: 100, align: 'center',getName: (scope) => {
         let status = scope.row.bizState;
         let status = scope.row.bizState;
         return status == 'Y' ? '启用' : '停用';
         return status == 'Y' ? '启用' : '停用';
       } },
       } },
-    { label: '创建时间', field: 'createTime', width: TableColumnWidth }
+    { label: '创建时间', field: 'createTime', width: TableColumnWidth.DATETIME }
   ],
   ],
   data: [],
   data: [],
   page: {
   page: {

@@ -243,6 +243,18 @@ function getTableFields () {
       const data = res.data
       const data = res.data
       standardFields.value = data
       standardFields.value = data
       let orderFieldIndex = null;
       let orderFieldIndex = null;
+      let columnWidths = {
+        'order_num': 80,
+        'data_type': 100,
+        'length': 100,
+       // 'inside_identifier': 100,
+        'indicate_format': 110,
+        'other_data_relationship': 150,
+        'unit': 100,
+        'meta_data_type': 150,
+        'definition': 300,
+        'explanation': 300
+      }
       const fields = data.map((item, index) => {
       const fields = data.map((item, index) => {
         if (currentObj.orderField && currentObj.orderField == item.fileNameCode) {
         if (currentObj.orderField && currentObj.orderField == item.fileNameCode) {
           orderFieldIndex = index;
           orderFieldIndex = index;
@@ -250,7 +262,7 @@ function getTableFields () {
         return {
         return {
           label: item.fileNameCodeName,
           label: item.fileNameCodeName,
           field: item.fileNameCode,
           field: item.fileNameCode,
-          width: 140
+          width: columnWidths[item.fileNameCode] || 140
         }
         }
       })
       })
       if (currentObj.orderField && currentObj.isDisplay == 'N') {
       if (currentObj.orderField && currentObj.isDisplay == 'N') {