代码更新

This commit is contained in:
lyd
2022-10-28 15:12:52 +08:00
parent bb2cc1e67a
commit e5b8408441
5 changed files with 76 additions and 32 deletions

View File

@@ -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>

View File

@@ -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)

View File

@@ -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'
}

View File

@@ -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>

View File

@@ -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