代码更新

lms/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)
 

lms/nladmin-ui/src/utils/nladmin.js

@@ -222,3 +222,45 @@ 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'
+}

lms/nladmin-ui/src/views/wms/sch/region/index.vue

@@ -58,13 +58,13 @@
       >
         <el-table-column type="selection" width="55" />
         <el-table-column v-if="false" prop="region_id" label="区域标识" />
-        <el-table-column prop="region_code" label="区域编码" min-width="120" />
-        <el-table-column prop="region_name" label="区域名称" min-width="130" />
-        <el-table-column prop="point_type_explain" label="点位类型说明" min-width="150" />
-        <el-table-column prop="point_status_explain" label="点位状态说明" min-width="120" />
-        <el-table-column prop="remark" label="备注" />
-        <el-table-column prop="create_name" label="创建人" />
-        <el-table-column prop="create_time" label="创建时间" min-width="140" show-overflow-tooltip />
+        <el-table-column prop="region_code" label="区域编码" :width="flexWidth('region_code',crud.data,'区域编码')"/>
+        <el-table-column prop="region_name" label="区域名称" :width="flexWidth('region_name',crud.data,'区域名称')" />
+        <el-table-column prop="point_type_explain" label="点位类型说明" :width="flexWidth('point_type_explain',crud.data,'点位类型说明')" />
+        <el-table-column prop="point_status_explain" label="点位状态说明" :width="flexWidth('point_status_explain',crud.data,'点位状态说明')" />
+        <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 v-permission="[]" label="操作" width="120px" align="center" fixed="right">
           <template slot-scope="scope">
             <udOperation