From e5b84084410a69491e34ac50f04d259094cd013d Mon Sep 17 00:00:00 2001
From: lyd <1419499670@qq.com>
Date: Fri, 28 Oct 2022 15:12:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../template/generator/front/index.ftl        |  6 +--
 acs/nladmin-ui/src/main.js                    |  3 +-
 acs/nladmin-ui/src/utils/nladmin.js           | 43 ++++++++++++++++
 .../template/generator/front/index.ftl        |  6 +--
 lms/nladmin-ui/src/views/wms/pdm/bi/index.vue | 50 +++++++++----------
 5 files changed, 76 insertions(+), 32 deletions(-)

diff --git a/acs/nladmin-system/src/main/resources/template/generator/front/index.ftl b/acs/nladmin-system/src/main/resources/template/generator/front/index.ftl
index b1e1bab4c..742c99096 100644
--- a/acs/nladmin-system/src/main/resources/template/generator/front/index.ftl
+++ b/acs/nladmin-system/src/main/resources/template/generator/front/index.ftl
@@ -80,15 +80,15 @@
             <#list columns as column>
             <#if column.columnShow>
           <#if (column.dictName)?? && (column.dictName)!="">
-        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>">
+        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" :min-width="flexWidth('${column.changeColumnName}',crud.data,'<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>')">
           <template slot-scope="scope">
             {{ dict.label.${column.dictName}[scope.row.${column.changeColumnName}] }}
           </template>
         </el-table-column>
           <#elseif column.columnType != 'Timestamp'>
-        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" />
+        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" :min-width="flexWidth('${column.changeColumnName}',crud.data,'<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>')"/>
                 <#else>
-        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>">
+        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" :min-width="flexWidth('${column.changeColumnName}',crud.data,'<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>')">
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.${column.changeColumnName}) }}</span>
           </template>
diff --git a/acs/nladmin-ui/src/main.js b/acs/nladmin-ui/src/main.js
index 2647e8fcb..1fe4089b3 100644
--- a/acs/nladmin-ui/src/main.js
+++ b/acs/nladmin-ui/src/main.js
@@ -42,7 +42,7 @@ import '@logicflow/extension/lib/style/index.css'
 import Tinymce from '@/views/system/build/tinymce/index.vue'
 import request from '@/utils/request' // 实现 form generator 使用自己定义的 axios request 对象
 
-import { addDateRange, handleTree, parseTime, resetForm, selectDictLabel, selectDictLabels } from '@/utils/nladmin'
+import { addDateRange, handleTree, parseTime, resetForm, selectDictLabel, selectDictLabels, flexWidth } from '@/utils/nladmin'
 
 import { getValueByCode } from '@/api/system/param'
 
@@ -59,6 +59,7 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.handleTree = handleTree
 Vue.prototype.getValueByCode = getValueByCode
+Vue.prototype.flexWidth = flexWidth
 
 Vue.use(scroll)
 
diff --git a/acs/nladmin-ui/src/utils/nladmin.js b/acs/nladmin-ui/src/utils/nladmin.js
index 42ee3a53f..0c105ce1f 100644
--- a/acs/nladmin-ui/src/utils/nladmin.js
+++ b/acs/nladmin-ui/src/utils/nladmin.js
@@ -222,3 +222,46 @@ export async function blobValidate(data) {
     return true
   }
 }
+
+/**
+ * 自动列宽
+ * flexWidth: https://blog.csdn.net/luoyumeiluoyumei/article/details/125853152?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-125853152-blog-123421632.pc_relevant_recovery_v2&spm=1001.2101.3001.4242.2&utm_relevant_index=4
+ * @param prop 每列的prop 不能为空
+ * @param tableData 表格数据
+ * @param title 标题长内容短的，传标题  不能为空
+ * @param num 列中有标签等加的富余量
+ * @returns 列的宽度
+ * 注：prop,title有一个必传
+ */
+export function flexWidth(prop, tableData, title, num = 0) {
+  if (tableData.length === 0) { // 表格没数据不做处理
+    return
+  }
+  let flexWidth = 0// 初始化表格列宽
+  let columnContent = ''// 占位最宽的内容
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+  context.font = '14px Microsoft YaHei'
+  // 获取占位最宽的内容
+  let index = 0
+  for (let i = 0; i < tableData.length; i++) { // 循环表格内容，获取表格内容中最长的数据
+    const now_temp = tableData[i][prop] + ''
+    const max_temp = tableData[index][prop] + ''
+    const now_temp_w = context.measureText(now_temp).width
+    const max_temp_w = context.measureText(max_temp).width
+    if (now_temp_w > max_temp_w) {
+      index = i
+    }
+  }
+  columnContent = tableData[index][prop]
+  const column_w = context.measureText(columnContent).width
+  const title_w = context.measureText(title).width
+  if (column_w < title_w) {
+    columnContent = title || '留四个字'
+  }
+  // 计算最宽内容的列宽
+  const width = context.measureText(columnContent)
+  flexWidth = width.width + 20 + num
+  return flexWidth + 'px'
+}
+
diff --git a/lms/nladmin-system/src/main/resources/template/generator/front/index.ftl b/lms/nladmin-system/src/main/resources/template/generator/front/index.ftl
index 07d095500..8fe068dd7 100644
--- a/lms/nladmin-system/src/main/resources/template/generator/front/index.ftl
+++ b/lms/nladmin-system/src/main/resources/template/generator/front/index.ftl
@@ -80,15 +80,15 @@
             <#list columns as column>
             <#if column.columnShow>
           <#if (column.dictName)?? && (column.dictName)!="">
-        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" :width="flexWidth('${column.changeColumnName}',crud.data,'<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>')">
+        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" :min-width="flexWidth('${column.changeColumnName}',crud.data,'<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>')">
           <template slot-scope="scope">
             {{ dict.label.${column.dictName}[scope.row.${column.changeColumnName}] }}
           </template>
         </el-table-column>
           <#elseif column.columnType != 'Timestamp'>
-        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" :width="flexWidth('${column.changeColumnName}',crud.data,'<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>')"/>
+        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" :min-width="flexWidth('${column.changeColumnName}',crud.data,'<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>')"/>
                 <#else>
-        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" :width="flexWidth('${column.changeColumnName}',crud.data,'<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>')">
+        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" :min-width="flexWidth('${column.changeColumnName}',crud.data,'<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>')">
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.${column.changeColumnName}) }}</span>
           </template>
diff --git a/lms/nladmin-ui/src/views/wms/pdm/bi/index.vue b/lms/nladmin-ui/src/views/wms/pdm/bi/index.vue
index db18e0bbd..e72588b9b 100644
--- a/lms/nladmin-ui/src/views/wms/pdm/bi/index.vue
+++ b/lms/nladmin-ui/src/views/wms/pdm/bi/index.vue
@@ -88,40 +88,40 @@
       <!--表格渲染-->
       <el-table ref="table" v-loading="crud.loading" style="width: 100%" :data="crud.data" size="mini" @selection-change="crud.selectionChangeHandler">
         <el-table-column type="selection" />
-        <el-table-column prop="package_box_SN" label="木箱码" :width="flexWidth('package_box_SN',crud.data,'木箱码')" />
-        <el-table-column prop="quanlity_in_box" label="箱内子卷数量" :width="flexWidth('quanlity_in_box',crud.data,'箱内子卷数量')" />
-        <el-table-column prop="box_weight" label="木箱自身重量" :width="flexWidth('box_weight',crud.data,'木箱自身重量')" />
-        <el-table-column prop="quality_guaran_period" label="保质期" :width="flexWidth('quality_guaran_period',crud.data,'保质期')"/>
+        <el-table-column prop="package_box_SN" label="木箱码" :min-width="flexWidth('package_box_SN',crud.data,'木箱码')" />
+        <el-table-column prop="quanlity_in_box" label="箱内子卷数量" :min-width="flexWidth('quanlity_in_box',crud.data,'箱内子卷数量')" />
+        <el-table-column prop="box_weight" label="木箱自身重量" :min-width="flexWidth('box_weight',crud.data,'木箱自身重量')" />
+        <el-table-column prop="quality_guaran_period" label="保质期" :min-width="flexWidth('quality_guaran_period',crud.data,'保质期')"/>
         <el-table-column v-if="false" prop="sale_order_name" label="销售订单及行号" class-name="leave-alone"/>
-        <el-table-column prop="customer_description" label="客户名称" :width="flexWidth('customer_description',crud.data,'客户名称')" />
-        <el-table-column v-if="false" prop="product_name" label="产品编码" :width="flexWidth('product_name',crud.data,'产品编码')" />
-        <el-table-column prop="product_description" label="产品描述" :width="flexWidth('product_description',crud.data,'产品描述')"/>
-        <el-table-column prop="date_of_FG_inbound" label="入库日期" :width="flexWidth('date_of_FG_inbound',crud.data,'入库日期')" />
-        <el-table-column prop="container_name" label="子卷号" :width="flexWidth('container_name',crud.data,'子卷号')" />
-        <el-table-column prop="width" label="产品规格(幅宽)" :width="flexWidth('width',crud.data,'产品规格(幅宽)')" />
-        <el-table-column prop="thickness" label="产品厚度" :width="flexWidth('thickness',crud.data,'产品厚度')" />
-        <el-table-column prop="mass_per_unit_area" label="单位面积质量" :formatter="crud.formatNum3" :width="flexWidth('mass_per_unit_area',crud.data,'单位面积质量')" />
-        <el-table-column prop="net_weight" label="净重" :formatter="crud.formatNum3" :width="flexWidth('net_weight',crud.data,'净重')" />
-        <el-table-column prop="length" label="长度" :formatter="crud.formatNum3" :width="flexWidth('length',crud.data,'长度')" />
-        <el-table-column prop="date_of_production" label="制造完成日期" :width="flexWidth('date_of_production',crud.data,'制造完成日期')" />
-        <el-table-column prop="is_un_plan_production" label="计划外分切的子卷" :width="flexWidth('is_un_plan_production',crud.data,'计划外分切的子卷')" >
+        <el-table-column prop="customer_description" label="客户名称" :min-width="flexWidth('customer_description',crud.data,'客户名称')" />
+        <el-table-column v-if="false" prop="product_name" label="产品编码" :min-width="flexWidth('product_name',crud.data,'产品编码')" />
+        <el-table-column prop="product_description" label="产品描述" :min-width="flexWidth('product_description',crud.data,'产品描述')"/>
+        <el-table-column prop="date_of_FG_inbound" label="入库日期" :min-width="flexWidth('date_of_FG_inbound',crud.data,'入库日期')" />
+        <el-table-column prop="container_name" label="子卷号" :min-width="flexWidth('container_name',crud.data,'子卷号')" />
+        <el-table-column prop="width" label="产品规格(幅宽)" :min-width="flexWidth('width',crud.data,'产品规格(幅宽)')" />
+        <el-table-column prop="thickness" label="产品厚度" :min-width="flexWidth('thickness',crud.data,'产品厚度')" />
+        <el-table-column prop="mass_per_unit_area" label="单位面积质量" :formatter="crud.formatNum3" :min-width="flexWidth('mass_per_unit_area',crud.data,'单位面积质量')" />
+        <el-table-column prop="net_weight" label="净重" :formatter="crud.formatNum3" :min-width="flexWidth('net_weight',crud.data,'净重')" />
+        <el-table-column prop="length" label="长度" :formatter="crud.formatNum3" :min-width="flexWidth('length',crud.data,'长度')" />
+        <el-table-column prop="date_of_production" label="制造完成日期" :min-width="flexWidth('date_of_production',crud.data,'制造完成日期')" />
+        <el-table-column prop="is_un_plan_production" label="计划外分切的子卷" :min-width="flexWidth('is_un_plan_production',crud.data,'计划外分切的子卷')" >
           <template slot-scope="scope">
             {{ dict.label.IS_OR_NOT[scope.row.is_un_plan_production] }}
           </template>
         </el-table-column>
-        <el-table-column prop="un_plan_product_property1" label="子卷的物性值1" :width="flexWidth('un_plan_product_property1',crud.data,'子卷的物性值1')" />
-        <el-table-column prop="un_plan_product_property2" label="子卷的物性值2" :width="flexWidth('un_plan_product_property2',crud.data,'子卷的物性值2')" />
-        <el-table-column prop="un_plan_product_property3" label="子卷的物性值3" :width="flexWidth('un_plan_product_property3',crud.data,'子卷的物性值3')" />
-        <el-table-column prop="remark" label="备注" :width="flexWidth('remark',crud.data,'备注')" />
-        <el-table-column prop="create_name" label="创建人" :width="flexWidth('create_name',crud.data,'创建人')" />
-        <el-table-column prop="create_time" label="创建时间" :width="flexWidth('create_time',crud.data,'创建时间')" />
-        <el-table-column prop="status" label="状态" :width="flexWidth('status',crud.data,'状态')" >
+        <el-table-column prop="un_plan_product_property1" label="子卷的物性值1" :min-width="flexWidth('un_plan_product_property1',crud.data,'子卷的物性值1')" />
+        <el-table-column prop="un_plan_product_property2" label="子卷的物性值2" :min-width="flexWidth('un_plan_product_property2',crud.data,'子卷的物性值2')" />
+        <el-table-column prop="un_plan_product_property3" label="子卷的物性值3" :min-width="flexWidth('un_plan_product_property3',crud.data,'子卷的物性值3')" />
+        <el-table-column prop="remark" label="备注" :min-width="flexWidth('remark',crud.data,'备注')" />
+        <el-table-column prop="create_name" label="创建人" :min-width="flexWidth('create_name',crud.data,'创建人')" />
+        <el-table-column prop="create_time" label="创建时间" :min-width="flexWidth('create_time',crud.data,'创建时间')" />
+        <el-table-column prop="status" label="状态" :min-width="flexWidth('status',crud.data,'状态')" >
           <template slot-scope="scope">
             {{ dict.label.sub_package_relation[scope.row.status] }}
           </template>
         </el-table-column>
-        <el-table-column prop="isRePrintPackageBoxLabel" label="是否需要重打外包装标签" :width="flexWidth('isRePrintPackageBoxLabel',crud.data,'是否需要重打外包装标签')" />
-        <el-table-column prop="isUnPackBox" label="是否需要拆包重打子卷标签" :width="flexWidth('isUnPackBox',crud.data,'是否需要拆包重打子卷标签')" />
+        <el-table-column prop="isRePrintPackageBoxLabel" label="是否需要重打外包装标签" :min-width="flexWidth('isRePrintPackageBoxLabel',crud.data,'是否需要重打外包装标签')" />
+        <el-table-column prop="isUnPackBox" label="是否需要拆包重打子卷标签" :min-width="flexWidth('isUnPackBox',crud.data,'是否需要拆包重打子卷标签')" />
         <el-table-column v-permission="[]" label="操作" align="center" fixed="right" min-width="120">
           <template slot-scope="scope">
             <udOperation