提交 c8964e1a authored 作者: lidongxu's avatar lidongxu

refactor(promotion): 调整:店内执行上报填充模式的常规陈列的样式

上级 29d1bf3a
......@@ -50,7 +50,8 @@ const props = defineProps({
}
})
const queryParams = reactive({
salesMonth: '',
// 当月
salesMonth: new Date(),
deptName: '',
dealerCN: '',
lineNameLike: '',
......
......@@ -40,7 +40,10 @@
<template #header="{ column }">
<!-- 只为特定公式列添加问号图标 -->
<span class="formula-column">
{{ column.label }}
<div class="column">
<p>{{ column.label }}</p>
<p v-if="col.subLabel">{{ col.subLabel }}</p>
</div>
<el-tooltip v-if="col.type === 'formula'"
:content="col.formulaStr"
placement="top">
......@@ -128,6 +131,7 @@ const emit = defineEmits(['updateColumns', 'getTableList', 'updateShowSearch'])
/*************** 工具栏 ***************/
// 切换平铺/填报模式
const operation = ref('展示模式');
// const operation = ref('填报模式');
const tableRef = ref(null)
const checkTableColumns = async () => {
// 通知外面传入 tableColumns / chooseColumns 数据源
......@@ -184,6 +188,19 @@ const getTableList = () => {
justify-content: center;
align-items: center;
.column {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
p {
margin: 0;
font-size: 12px;
color: #606266;
}
}
.el-icon {
margin-left: 2px;
}
......@@ -197,7 +214,7 @@ const getTableList = () => {
white-space: nowrap;
}
.cell-style {
>div {
......@@ -220,19 +237,27 @@ const getTableList = () => {
width: 100% !important;
padding: 10px;
/* 非 disabled 状态下的背景颜色 */
&.no-disabled {
background-color: var(--el-background-editor-cell);
::v-deep(.el-select__wrapper) {
border: 4px solid var(--el-background-editor-cell) !important;
}
/* 非 disabled 状态下的背景颜色 */
/* &.no-disabled {
background-color: ;
} */
}
.el-input {
padding: 10px;
&.no-disabled {
background-color: var(--el-background-editor-cell);
::v-deep(.el-input__wrapper) {
border: 4px solid var(--el-background-editor-cell) !important;
}
/* &.no-disabled {
background-color: var(--el-background-editor-cell);
} */
}
.date-picker {
......@@ -253,11 +278,13 @@ const getTableList = () => {
/* 填报模式-单元格 */
&.cell-no-padding {
/* 无上下内边距 */
::v-deep(.el-table__row) {
.el-table__cell {
padding: 0;
.cell{
.cell {
padding: 0 !important;
}
}
......
......@@ -34,31 +34,30 @@
{
label: "基础信息", // 类型标题
children: [
{
label: '操作提示',
prop: 'operationTip', // 列属性
visible: true, // 是否显示
type: 'string', // 列类型
fill: true, // 是否为填报列
fixed: 'left', // 是否固定在左侧
width: 100,
onlyFill: true, // 只在填报列显示
render: (_, row, col) => {
return (
<div class="operation_tip_cell">
<p>计划</p>
<p>实际</p>
</div>
)
}
},
// {
// label: '操作提示',
// prop: 'operationTip', // 列属性
// visible: true, // 是否显示
// type: 'string', // 列类型
// fill: true, // 是否为填报列
// fixed: 'left', // 是否固定在左侧
// width: 100,
// onlyFill: true, // 只在填报列显示
// render: (_, row, col) => {
// return (
// <div class="operation_tip_cell">
// <p>计划</p>
// <p>实际</p>
// </div>
// )
// }
// },
{
label: '计划月份', // 列标题
prop: 'salesMonth', // 列属性
visible: true, // 是否显示
type: 'string', // 列类型
fill: true, // 是否为填报列
fixed: 'left', // 是否固定在左侧
fill: false, // 是否为填报列
width: 90
},
{
......@@ -150,35 +149,35 @@
fill: false,
width: 90
},
{
label: "门店名称",
prop: "storeNameCodeDealerName", //新增动态列(只在填报列显示)
visible: true,
type: 'string',
fill: true,
// showOverflowTooltip: true,
onlyFill: true,// 仅仅在填报模式下生效
fixed: 'left',
width: 225,
render: (h, row) => {
return h('div', {
class: 'store-name-render-cell'
}, [
h('p', row.storeName),
h('p', row.storeCode),
h('p', row.dealerName)
])
}
},
// {
// label: "门店名称",
// prop: "storeNameCodeDealerName", //新增动态列(只在填报列显示)
// visible: true,
// type: 'string',
// fill: true,
// // showOverflowTooltip: true,
// onlyFill: true,// 仅仅在填报模式下生效
// fixed: 'left',
// width: 225,
// render: (h, row) => {
// return h('div', {
// class: 'store-name-render-cell'
// }, [
// h('p', row.storeName),
// h('p', row.storeCode),
// h('p', row.dealerName)
// ])
// }
// },
{
label: "门店名称",
prop: "storeName",
showOverflowTooltip: true,
visible: true,
type: 'string',
fill: false,
fill: true,
fixed: 'left',
width: 175
width: 195
},
{
label: "门店编码",
......@@ -186,8 +185,7 @@
showOverflowTooltip: true,
visible: true,
type: 'string',
fill: false,
fixed: 'left',
fill: true,
width: 125
},
{
......@@ -196,8 +194,8 @@
showOverflowTooltip: true,
visible: true,
type: 'string',
fill: false,
fixed: 'left',
fill: true,
// fixed: 'left',
width: 215
},
{
......@@ -337,23 +335,17 @@
prop: 'fpColumns',
children: [
{
label: "计划主货架-形式",
label: "主货架形式",
subLabel: '计划',
prop: "plannedMainShelfType",
visible: true,
type: 'string',
fill: false,
width: 130
},
{
label: "计划主货架-数量",
prop: "plannedMainShelfQty",
visible: true,
type: 'string',
fill: false,
width: 130
fill: true,
width: 100
},
{
label: "计划主货架-单个费用",
label: "主货架单个费用计划",
prop: "plannedMainShelfUnitCost",
visible: true,
type: 'string',
......@@ -361,7 +353,7 @@
width: 155
},
{
label: "计划主货架-总费用",
label: "主货架总费用计划",
prop: "plannedMainShelfTotalCost",
visible: true,
type: 'string',
......@@ -369,7 +361,8 @@
width: 145
},
{
label: "实际主货架-形式",
label: "主货架形式",
subLabel: '实际',
prop: "actualMainShelfType",
visible: true,
type: 'select',
......@@ -383,11 +376,11 @@
],
referenceKey: "plannedMainShelfType",
fill: true,
width: 140,
width: 110,
render: (_, row, col) => {
return (
<div>
<span>{row[col.referenceKey] || '-'}</span>
{/* <span>{row[col.referenceKey] || '-'}</span> */}
<el-select modelValue={row[col.prop]}
onUpdate:modelValue={(value) => {
row[col.prop] = value;
......@@ -410,9 +403,19 @@
},
// 请求时需要额外携带影响的列字段值
requestKey: ["actualMainShelfQty", "actualMainShelfExecuted", "regularDisplayExecuted"]
},
{
label: "主货架数量",
subLabel: '计划',
prop: "plannedMainShelfQty",
visible: true,
type: 'string',
fill: true,
width: 130
},
{
label: "实际主货架-数量",
label: "主货架数量",
subLabel: '实际',
prop: "actualMainShelfQty",
visible: true,
type: 'input',
......@@ -427,7 +430,7 @@
render: (_, row, col) => {
return (
<div>
<span>{row[col.referenceKey] || '-'}</span>
{/* <span>{row[col.referenceKey] || '-'}</span> */}
<el-input modelValue={row[col.prop]}
onUpdate:modelValue={(value) => {
const numValue = value === '' ? 0 : Number(value);
......@@ -447,7 +450,7 @@
requestKey: ["actualMainShelfExecuted", "regularDisplayExecuted"]
},
{
label: "实际主货架-是否执行",
label: "主货架是否执行实际",
prop: "actualMainShelfExecuted",
visible: true,
type: 'formula',
......@@ -476,15 +479,16 @@
width: 170
},
{
label: "计划端架-数量",
label: "端架数量",
subLabel: '计划',
prop: "plannedEndCapQty",
visible: true,
type: 'string',
fill: false,
fill: true,
width: 115
},
{
label: "计划端架-总费用",
label: "端架总费用计划",
prop: "plannedEndCapTotalCost",
visible: true,
type: 'string',
......@@ -492,7 +496,7 @@
width: 130
},
{
label: "计划端架-单个费用",
label: "端架单个费用计划",
prop: "plannedEndCapUnitCost",
visible: true,
type: 'string',
......@@ -500,7 +504,8 @@
width: 140
},
{
label: "实际端架-数量",
label: "端架数量",
subLabel: '实际',
prop: "actualEndCapQty",
visible: true,
type: 'select',
......@@ -516,7 +521,7 @@
render: (_, row, col) => {
return (
<div>
<span>{row[col.referenceKey] || '-'}</span>
{/* <span>{row[col.referenceKey] || '-'}</span> */}
<el-select modelValue={row[col.prop]}
onUpdate:modelValue={(value) => {
// 判断空字符串给 0
......@@ -545,7 +550,7 @@
requestKey: ["actualEndCapExecuted", "regularDisplayExecuted"]
},
{
label: "实际端架-是否执行",
label: "端架是否执行实际",
prop: "actualEndCapExecuted",
visible: true,
type: 'formula',
......@@ -563,23 +568,17 @@
width: 155
},
{
label: "计划地堆-平米数(㎡)",
label: "地堆平米数(㎡)",
subLabel: '计划',
prop: "plannedFloorStackArea",
visible: true,
type: 'string',
fill: false,
fill: true,
width: 170
},
{
label: "计划地堆-数量",
prop: "plannedFloorStackQty",
visible: true,
type: 'string',
fill: false,
width: 115
},
{
label: "计划主题地堆-是否",
label: "主题地堆是否计划",
prop: "plannedThemedFloorStack",
visible: true,
type: 'string',
......@@ -587,7 +586,7 @@
width: 140
},
{
label: "计划地堆-总费用",
label: "地堆总费用计划",
prop: "plannedFloorStackTotalCost",
visible: true,
type: 'string',
......@@ -595,7 +594,7 @@
width: 130
},
{
label: "计划折算1㎡-单个费用",
label: "折算1㎡单个费用计划",
prop: "plannedFloorStackUnitCostPerSqm",
visible: true,
type: 'string',
......@@ -603,7 +602,8 @@
width: 160
},
{
label: "实际地堆-平米数(㎡)",
label: "地堆平米数(㎡)",
subLabel: '实际',
prop: "actualFloorStackArea",
visible: true,
type: 'select',
......@@ -624,7 +624,7 @@
render: (_, row, col) => {
return (
<div>
<span>{row[col.referenceKey] || '-'}</span>
{/* <span>{row[col.referenceKey] || '-'}</span> */}
<el-select modelValue={row[col.prop]}
onUpdate:modelValue={(value) => {
// 判断空字符串给 0
......@@ -653,7 +653,17 @@
requestKey: ["actualFloorStackExecuted", "regularDisplayExecuted"]
},
{
label: "实际地堆-数量",
label: "地堆数量",
subLabel: '计划',
prop: "plannedFloorStackQty",
visible: true,
type: 'string',
fill: true,
width: 115
},
{
label: "地堆数量",
subLabel: '实际',
prop: "actualFloorStackQty",
visible: true,
type: 'select',
......@@ -670,7 +680,7 @@
render: (_, row, col) => {
return (
<div>
<span>{row[col.referenceKey] || '-'}</span>
{/* <span>{row[col.referenceKey] || '-'}</span> */}
<el-select modelValue={row[col.prop]}
onUpdate:modelValue={(value) => {
// 判断空字符串给 0
......@@ -699,7 +709,7 @@
requestKey: ["actualFloorStackExecuted", "regularDisplayExecuted"]
},
{
label: "实际主题地堆-是否",
label: "主题地堆是否实际",
prop: "actualThemedFloorStack",
referenceKey: "plannedThemedFloorStack",
visible: true,
......@@ -734,7 +744,7 @@
}
},
{
label: "实际地堆是否执行",
label: "地堆是否执行实际",
prop: "actualFloorStackExecuted",
visible: true,
type: 'formula',
......@@ -751,17 +761,17 @@
fill: true,
width: 150
},
{
label: "计划多点陈列-数量+形式",
label: "多点陈列数量形式",
subLabel: '计划',
prop: "plannedMultiDisplay",
visible: true,
type: 'string',
fill: false,
fill: true,
width: 175
},
{
label: "计划多点陈列-总费用",
label: "多点陈列总费用计划",
prop: "plannedMultiDisplayTotalCost",
visible: true,
type: 'string',
......@@ -769,7 +779,8 @@
width: 155
},
{
label: "实际多点陈列-数量+形式",
label: "多点陈列数量形式",
subLabel: '实际',
prop: "actualMultiDisplay",
visible: true,
type: 'select',
......@@ -783,7 +794,7 @@
render: (_, row, col) => {
return (
<div>
<span>{row[col.referenceKey] || '-'}</span>
{/* <span>{row[col.referenceKey] || '-'}</span> */}
<el-select modelValue={row[col.prop]}
onUpdate:modelValue={(value) => {
row[col.prop] = value;
......@@ -808,7 +819,7 @@
requestKey: ["actualMultiDisplayExecuted"]
},
{
label: "实际多点陈列-是否执行",
label: "多点陈列是否执行实际",
prop: "actualMultiDisplayExecuted",
referenceKey: 'actualMultiDisplay',
visible: true,
......@@ -827,15 +838,17 @@
width: 180,
},
{
label: "计划挂条-数量+形式",
label: "挂条数量形式",
subLabel: '计划',
prop: "plannedHangingStripQuantityForm",
visible: true,
type: 'string',
fill: false,
fill: true,
width: 175
},
{
label: "实际挂条-数量+形式",
label: "挂条数量形式",
subLabel: '实际',
prop: "actualHangingStripQuantityForm",
visible: true,
type: 'select',
......@@ -849,7 +862,7 @@
render: (_, row, col) => {
return (
<div>
<span>{row[col.referenceKey] || '-'}</span>
{/* <span>{row[col.referenceKey] || '-'}</span> */}
<el-select modelValue={row[col.prop]}
onUpdate:modelValue={(value) => {
row[col.prop] = value;
......@@ -940,7 +953,7 @@
// width: 160
// },
{
label: "付费陈列- 是否",
label: "付费陈列-是否",
prop: "paidDisplay",
visible: true,
type: 'string',
......@@ -948,7 +961,7 @@
width: 120
},
{
label: "计划-当月拜访目标",
label: "当月拜访目标计划",
prop: "monthlyVisitTarget",
visible: true,
type: 'string',
......@@ -956,7 +969,7 @@
width: 135
},
{
label: "实际-当月是否拜访",
label: "当月是否拜访实际",
prop: "monthlyVisited",
visible: true,
type: 'string',
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论