Skip to content

W
wangxiaolu-sfa-ui
提交 65b07095 authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

refactor(display_schedule/*): 修复：AP 执行上报_已知的宽度和 tooltip 超出容器宽度显示问题，日期类型添加年份并且改变需要提交到后台保存接口调通

上级 9a8a94f1
隐藏空白字符变更
内嵌 并排
正在显示 包含 126 行增加 和 47 行删除
src/views/promotion/components/CommonPlan/index.vue
浏览文件 @ 65b07095
......@@ -20,7 +20,8 @@
<el-table :data="tableData"
border
ref="tableRef"
class="auto-fit-header-table"
class="auto-fit-header-table "
:class="{ 'cell-no-padding': operation === '填报模式' }"
v-loading="isLoading">
<template v-for="col in tableColumns">
<el-table-column v-if="col.visible"
......@@ -44,7 +45,8 @@
</template>
<template #default="{ row }">
<!-- 填报模式 -->
<div v-if="operation === '填报模式'" style="overflow: visible !important;">
<div v-if="operation === '填报模式'"
style="overflow: visible !important;">
<!-- 带选择框/输入框的操作单元格 -->
<div v-if="col.render"
class="cell-style">
......@@ -194,13 +196,16 @@ const getTableList = () => {
}
}
::v-deep(.el-table__row) {
.el-table__cell {
padding: 0;
&.cell-no-padding {
::v-deep(.el-table__row) {
.el-table__cell {
padding: 0;
}
}
}
::v-deep(.column-style) {
.cell {
......@@ -268,14 +273,17 @@ const getTableList = () => {
display: flex;
flex-direction: column;
align-items: flex-start;
p{
p {
width: 100%;
margin: 0;
}
p:first-child {
background-color: #e1e2e6;
border-bottom: 1px solid #ebeef5;
}
p:last-child {
padding: 15px 0;
}
......
src/views/promotion/display_schedule/tabs/display.vue
浏览文件 @ 65b07095
<template>
<!-- 常规陈列 -->
<CommonPlan :tableData="tableData"
:isLoading="isLoading"
:total="total"
......@@ -150,7 +151,7 @@
showOverflowTooltip: true,
onlyFill: true,// 仅仅在填报模式下生效
fixed: 'left',
width: 215,
width: 225,
render: (h, row) => {
return h('div', {
class: 'render-cell',
......@@ -185,15 +186,17 @@
{
label: "门店编码",
prop: "storeCode",
showOverflowTooltip: true,
visible: true,
type: 'string',
fill: false,
fixed: 'left',
width: 105
width: 125
},
{
label: "经销商名称",
prop: "dealerName",
showOverflowTooltip: true,
visible: true,
type: 'string',
fill: false,
......@@ -228,10 +231,11 @@
{
label: "系统名称",
prop: "lineName",
showOverflowTooltip: true,
visible: true,
type: 'string',
fill: false,
width: 90
width: 130
},
{
label: "渠道大类",
......@@ -268,10 +272,11 @@
{
label: "门店面积",
prop: "storeArea",
showOverflowTooltip: true,
visible: true,
type: 'string',
fill: false,
width: 90
width: 140
},
{
label: "门店分级（销量坎级）",
......@@ -280,7 +285,7 @@
showOverflowTooltip: true,
type: 'string',
fill: false,
width: 165
width: 215
},
{
label: "门店地址",
......@@ -289,7 +294,7 @@
visible: true,
type: 'string',
fill: false,
width: 255
width: 325
},
{
label: "品项数",
......@@ -801,11 +806,11 @@
visible: true,
type: 'formula',
func: (row) => {
// 实际主货架-是否执行 && 实际端架-是否执行 && 实际地堆-是否执行 && 实际多点陈列-是否执行
// 实际主货架-执行 && 实际端架-执行 && 实际地堆-执行 && 实际多点陈列-执行
row.regularDisplayExecuted = (row.actualMainShelfExecuted === '是' && row.actualEndCapExecuted === '是' && row.actualFloorStackExecuted === '是' && row.actualMultiDisplayExecuted === '是') ? '是' : '否';
return row.regularDisplayExecuted;
},
formulaStr: '公式：（实际主货架是否执行，并且实际端架是否执行，并且实际地堆是否执行，并且实际多点陈列是否执行）',
formulaStr: '公式：（实际主货架执行，并且实际端架执行，并且实际地堆执行，并且实际多点陈列执行）',
fill: true,
width: 150
},
......
src/views/promotion/display_schedule/tabs/schedule.vue
浏览文件 @ 65b07095
<template>
<!-- 档期计划 -->
<CommonPlan :tableData="tableData"
:isLoading="isLoading"
:total="total"
......@@ -51,7 +52,7 @@
prop: 'salesMonth',
visible: true,
type: 'string',
fill: false,
fill: true,
fixed: 'left',
width: 90
},
......@@ -103,7 +104,7 @@
type: "string",
fill: true,
fixed: 'left',
width: 215
width: 225
},
{
label: "经销商类型",
......@@ -112,7 +113,7 @@
showOverflowTooltip: true,
type: "string",
fill: false,
width: 115
width: 155
},
{
label: "开户日期",
......@@ -161,7 +162,7 @@
type: "string",
fill: true,
fixed: 'left',
width: 90
width: 180
},
{
label: "系统类型",
......@@ -354,8 +355,8 @@
// span 标签超出宽度时显示省略号
return (
<div>
<el-tooltip placement="top" content={row[col.referenceKey] || '-'} disabled={!isContentOverflow(col.referenceKey, row[col.referenceKey])}>
<span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%;">
<el-tooltip placement="top" content={row[col.referenceKey] || '-'} disabled={!isContentOverflow(col.referenceKey, row[col.referenceKey], col)}>
<span >
{row[col.referenceKey] || '-'}
</span>
</el-tooltip>
......@@ -505,7 +506,6 @@
prop: "actualPromotionStartDate",
visible: true,
type: 'date',
format: 'MM-DD',
referenceKey: "plannedPromotionStartDate",
fill: true,
width: 140,
......@@ -523,12 +523,12 @@
placeholder=""
clearable
type="date"
value-format="MM-DD"
/>
</div>
</div>
)
}
},
requestKey: ["timeExecutionStatus", 'promotionImplementationStatus']
},
{
label: "计划-档期结束时间",
......@@ -551,7 +551,6 @@
prop: "actualPromotionEndDate",
visible: true,
type: 'date',
format: 'MM-DD',
fill: true,
referenceKey: "plannedPromotionEndDate",
width: 140,
......@@ -569,13 +568,12 @@
placeholder=""
clearable
type="date"
value-format="MM-DD"
/>
</div>
</div>
)
},
requestKey: ["plannedPromotionEndDate"]
requestKey: ["timeExecutionStatus", 'promotionImplementationStatus']
},
{
label: "档期是否开展",
......@@ -596,15 +594,13 @@
visible: true,
type: 'formula',
func: (row) => {
row.timeExecutionStatus = (row.actualPromotionStartDate === row.plannedPromotionStartDate) && (row.actualPromotionEndDate === row.plannedPromotionEndDate) ? '是' : '否';
row.timeExecutionStatus = (parseTime(row.actualPromotionStartDate) === parseTime(row.plannedPromotionStartDate)) && parseTime(row.actualPromotionEndDate) === parseTime(row.plannedPromotionEndDate) ? '是' : '否';
return row.timeExecutionStatus;
},
formulaStr: '公式：（实际档期开始时间 = 计划档期开始时间，并且实际档期结束时间 = 计划档期结束时间）',
fill: true,
width: 125
},
{
label: "计划促销机制",
prop: "plannedPromotionMechanism",
......@@ -620,7 +616,7 @@
type: 'input',
referenceKey: "plannedPromotionMechanism",
fill: true,
width: 115,
width: 185,
render: (_, row, col) => {
return (
<div>
......@@ -1039,7 +1035,7 @@
// 提交变更
const submitChange = async (row, col) => {
// 需要特殊处理的
// 1. 实际主货架-形式，为空时，置空实际主货架-数量
// 实际主货架-形式，为空时，置空实际主货架-数量
if (col.prop === 'actualMainShelfType' && !row.actualMainShelfType) {
row.actualMainShelfQty = 0
}
......@@ -1049,6 +1045,7 @@
// 关联的公式计算列，需要特殊处理
for (const str of col.requestKey) {
const obj = tableColumns.value.find(item => item.prop == str)
console.log(obj, str, 'y')
if (obj.type === 'formula') {
obj.func(row)
}
......@@ -1059,11 +1056,13 @@
await submitDisplaySchedulePlan({
id: row.sapId,
[col.prop]: row[col.prop], // 当前修改列的值
...requestObj
...requestObj,
actualPromotionFlavor: Array.isArray(row.actualPromotionFlavor) ? row.actualPromotionFlavor.join(',') : '-', // 档期执行-促销口味，为数组时，转成字符串
actualPromotionStartDate: row.actualPromotionStartDate ? parseTime(row.actualPromotionStartDate, '{y}-{m}-{d}') : '', // 档期执行-促销开始日期，为字符串时，转成日期格式
})
}
// // 表格数据
// 表格数据
const tableData = ref([])
const isLoading = ref(true)
const params = reactive({
......@@ -1072,7 +1071,7 @@
})
const total = ref(0)
// // 获取表格数据
// 获取表格数据
const getTableList = async () => {
isLoading.value = true
const res = await getDisplayScheduleList({
......@@ -1090,6 +1089,8 @@
item.actualPromotionEndDate = parseTime(item.actualPromotionEndDate, '{y}-{m}-{d}')
item.totalCostRate = item.totalCostRate ? `${(item.totalCostRate).toFixed(2)}%` : '-'
item.adjustmentCostRatio = item.adjustmentCostRatio ? `${(item.adjustmentCostRatio).toFixed(2)}%` : '-'
// 档期执行-促销口味从字符串转成数组
item.actualPromotionFlavor = item.actualPromotionFlavor ? item.actualPromotionFlavor.split(',') : []
// 修改时间
item.updateTime = parseTime(item.updateTime, '{y}-{m}-{d} {h}:{i}:{s}')
})
......@@ -1103,10 +1104,10 @@
getTableList()
})
const isContentOverflow = (key, content) => {
// 创建临时元素用于测量
if (!content) return false;
const isContentOverflow = (key, content, col) => {
if (!content) return false; // 没有内容则直接禁用
// 创建 DOM 计算
const tempSpan = document.createElement('span');
tempSpan.textContent = content;
tempSpan.className = 'ellipsis-tooltip';
......@@ -1115,16 +1116,14 @@
document.body.appendChild(tempSpan);
// 获取元素宽度和内容宽度
const { width } = tempSpan.getBoundingClientRect();
const scrollWidth = tempSpan.scrollWidth;
const width = tempSpan.getBoundingClientRect().width;
// 移除临时元素
document.body.removeChild(tempSpan);
// 当内容宽度大于元素宽度时，表示内容溢出
return scrollWidth > width;
return width > col.width;
};
</script>
<style scoped
......
src/views/promotion/display_schedule/tabs/schedule_dis.vue
浏览文件 @ 65b07095
<!-- 档期陈列 -->
<template>
<!-- 档期陈列 -->
<CommonPlan :tableData="tableData"
:isLoading="isLoading"
:total="total"
......@@ -43,6 +43,15 @@
)
}
},
{
label: '计划月份', // 列标题
prop: 'salesMonth', // 列属性
visible: true, // 是否显示
type: 'string', // 列类型
fill: true, // 是否为填报列
fixed: 'left', // 是否固定在左侧
width: 90
},
{
"label": "销售大区",
"prop": "regionName",
......@@ -473,7 +482,7 @@
"label": "0.5",
"value": 0.5
},
{
{
"label": "0.8",
"value": 0.8
},
......@@ -544,6 +553,28 @@
"value": 3
}
],
render: (_, row, col) => {
return (
<div>
<span>{row[col.referenceKey] || '-'}</span>
<el-select modelValue={row[col.prop]}
onUpdate:modelValue={(value) => {
row[col.prop] = value;
submitChange(row, col);
}}
disabled={!row[col.referenceKey]}
placeholder="">
{col.options.map(item => (
<el-option
key={item.value}
label={item.label}
value={item.value}
/>
))}
</el-select>
</div>
)
},
requestKey: ["actualFloorStackExecuted", "promotionDisplayExecuted"]
},
{
......@@ -758,7 +789,7 @@
})
res.data.rows.forEach(item => {
// 计划月份
item.promotionExecutionMonth = parseTime(item.promotionExecutionMonth, '{y}-{m}-{d}')
item.salesMonth = parseTime(item.salesMonth, '{y}-{m}')
// 开户日期
item.openingDate = parseTime(item.openingDate, '{y}-{m}-{d}')
// 闭户日期
......
src/views/promotion/display_schedule/tabs/snack.vue
浏览文件 @ 65b07095
<template>
<!-- 零食陈列 -->
<CommonPlan :tableData="tableData"
:isLoading="isLoading"
:total="total"
......@@ -42,6 +43,15 @@
)
}
},
{
label: '计划月份', // 列标题
prop: 'salesMonth', // 列属性
visible: true, // 是否显示
type: 'string', // 列类型
fill: true, // 是否为填报列
fixed: 'left', // 是否固定在左侧
width: 90
},
{
"label": "销售大区",
"prop": "regionName",
......@@ -246,7 +256,7 @@
"type": "select",
referenceKey: "plannedDisplay",
"fill": true,
"width": 130,
"width": 160,
"options": [
{
"label": "端架",
......@@ -264,7 +274,11 @@
render: (_, row, col) => {
return (
<div>
<span>{row[col.referenceKey] || '-'}</span>
<el-tooltip placement="top" content={row[col.referenceKey] || '-'} disabled={!isContentOverflow(col.referenceKey, row[col.referenceKey], col)}>
<span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%;">
{row[col.referenceKey] || '-'}
</span>
</el-tooltip>
<el-select modelValue={row[col.prop]}
onUpdate:modelValue={(value) => {
row[col.prop] = value;
......@@ -561,6 +575,28 @@
isLoading.value = false
}
getTableList()
const isContentOverflow = (key, content, col) => {
if (!content) return false; // 没有内容则直接禁用
// 创建 DOM 计算
const tempSpan = document.createElement('span');
tempSpan.textContent = content;
tempSpan.className = 'ellipsis-tooltip';
tempSpan.style.visibility = 'hidden';
tempSpan.style.position = 'absolute';
document.body.appendChild(tempSpan);
// 获取元素宽度和内容宽度
const width = tempSpan.getBoundingClientRect().width;
// 移除临时元素
document.body.removeChild(tempSpan);
// 当内容宽度大于元素宽度时，表示内容溢出
return width > col.width;
};
</script>
<style scoped
......
src/views/scm/logistics_receipt/index.vue
浏览文件 @ 65b07095
......@@ -197,7 +197,7 @@ const columns = ref([
{
label: '快递单号',
prop: 'expressNo',
width: 150
width: 220
},
{
label: 'DD 单号',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论