From a49d433ea1b4afd07470305ba4ee5d5cc34c81e9 Mon Sep 17 00:00:00 2001 From: lyd <1419499670@qq.com> Date: Fri, 28 Oct 2022 14:39:14 +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 | 42 +++++++++++++++++++ .../views/acs/history/instRecord/index.vue | 26 ++++++------ .../template/generator/front/index.ftl | 6 +-- lms/nladmin-ui/src/main.js | 3 +- lms/nladmin-ui/src/utils/nladmin.js | 42 +++++++++++++++++++ .../src/views/wms/sch/region/index.vue | 14 +++---- 8 files changed, 114 insertions(+), 28 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 b1e1bab..01e8632 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)!=""> - + <#elseif column.columnType != 'Timestamp'> - + <#else> - + diff --git a/acs/nladmin-ui/src/main.js b/acs/nladmin-ui/src/main.js index 2647e8f..1fe4089 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 42ee3a5..371bcb1 100644 --- a/acs/nladmin-ui/src/utils/nladmin.js +++ b/acs/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' +} diff --git a/acs/nladmin-ui/src/views/acs/history/instRecord/index.vue b/acs/nladmin-ui/src/views/acs/history/instRecord/index.vue index e5cf3a9..516624b 100644 --- a/acs/nladmin-ui/src/views/acs/history/instRecord/index.vue +++ b/acs/nladmin-ui/src/views/acs/history/instRecord/index.vue @@ -96,25 +96,25 @@ @selection-change="crud.selectionChangeHandler" > - - - - + + + + - - - - - - - - - + + + + + + + + + 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 1c4665f..07d0955 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)!=""> - + <#elseif column.columnType != 'Timestamp'> - + <#else> - + diff --git a/lms/nladmin-ui/src/main.js b/lms/nladmin-ui/src/main.js index 2647e8f..1fe4089 100644 --- a/lms/nladmin-ui/src/main.js +++ b/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) diff --git a/lms/nladmin-ui/src/utils/nladmin.js b/lms/nladmin-ui/src/utils/nladmin.js index 42ee3a5..371bcb1 100644 --- a/lms/nladmin-ui/src/utils/nladmin.js +++ b/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' +} diff --git a/lms/nladmin-ui/src/views/wms/sch/region/index.vue b/lms/nladmin-ui/src/views/wms/sch/region/index.vue index 133af91..34e4c3d 100644 --- a/lms/nladmin-ui/src/views/wms/sch/region/index.vue +++ b/lms/nladmin-ui/src/views/wms/sch/region/index.vue @@ -58,13 +58,13 @@ > - - - - - - - + + + + + + +