Skip to content

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

feat(display_schedule): 新增：合并陈列计划和档期计划在同一个菜单，用 tab 区分，并完成了陈列计划的接口调用对接完成

上级 6612037f
显示空白字符变更
内嵌 并排
正在显示 包含 150 行增加 和 21 行删除
src/api/promotion/display.js
浏览文件 @ 89998429
......@@ -6,3 +6,14 @@ export function getDisplayList(params) {
params
});
}
// 填报-陈列计划
export function submitDisplayPlan(data) {
return request({
url: `/operation/sales/ap_display/core/${data.id}`,
method: 'PUT',
data: {
display: data
}
});
}
src/views/promotion/display/index.vue → src/views/promotion/display_schedule/index.vue
浏览文件 @ 89998429
<template>
<div class="app-container">
<div class="container">
<el-tabs v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="handleClickTabs">
<el-tab-pane label="陈列计划"
name="陈列计划">
<el-row>
<el-form-item label="操作类型">
<el-radio-group v-model="operation"
......@@ -20,16 +26,28 @@
</el-row>
<!-- 筛选列组的按钮 -->
<el-table :data="tableData"
height="100%"
border
:scroll-x="'max-content'"
class="auto-fit-header-table"
fit
:loading="isLoading">
v-loading="isLoading">
<el-table-column v-for="col in tableColumns"
:label="col.label"
align="center"
:min-width="getColumnMinWidth(col)"
show-overflow-tooltip>
<template #header="{ column }">
<!-- 只为特定列添加问号图标 -->
<span class="formula-column">
{{ column.label }}
<el-tooltip v-if="col.type === 'formula'"
:content="col.formulaStr"
placement="top">
<el-icon><question-filled /></el-icon>
</el-tooltip>
</span>
</template>
<template #default="{ row }">
<div v-if="col.type === 'select'">
<!-- 实际主货架-数量（要根据实际主货架-形式不为空时才可以选择否则为 0） -->
......@@ -37,7 +55,8 @@
<el-select :disabled="!row.actualMainShelfType"
v-model="row[col.prop]"
placeholder="请选择"
clearable>
clearable
@change="submitChange(row, col)">
<el-option v-for="item in col.options"
:key="item.value"
:label="item.label"
......@@ -47,7 +66,8 @@
<el-select v-else
v-model="row[col.prop]"
placeholder="请选择"
clearable>
clearable
@change="submitChange(row, col)">
<el-option v-for="item in col.options"
:key="item.value"
:label="item.label"
......@@ -62,7 +82,7 @@
<div v-else-if="col.type === 'input'">
<el-input v-model="row[col.prop]"
placeholder="请输入"
@input="col.func(row)" />
@input="submitChange(row, col)" />
</div>
<!-- 为其他类型或未定义类型提供默认显示 -->
<div v-else>
......@@ -71,12 +91,27 @@
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination :total="total"
v-model:page="params.pageNum"
v-model:limit="params.pageSize"
@pagination="getTableList" />
</el-tab-pane>
<el-tab-pane label="档期计划"
name="档期计划">Config</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script setup>
import { getDisplayList } from '@/api'
import { getDisplayList, submitDisplayPlan } from '@/api'
const activeName = ref('陈列计划');
const handleClickTabs = (tab) => {
activeName.value = tab.name;
}
/*************** 操作类型 ***************/
const operation = ref('全部列');
......@@ -161,7 +196,8 @@ const baseColumns = ref([
func: (row) => {
row.actualMainShelfExecuted = ((parseInt(row.actualMainShelfType) >= parseInt(row.plannedMainShelfType)) && (parseInt(row.actualMainShelfQty) >= parseInt(row.plannedMainShelfQty))) ? '是' : '否';
return row.actualMainShelfExecuted;
}
},
formulaStr: '公式：（实际主货架形式 >= 计划主货架形式）并且（实际主货架数量 >= 计划主货架数量）',
},
{ label: "计划端架-数量", prop: "plannedEndCapQty", visible: true },
{ label: "计划端架-总费用", prop: "plannedEndCapTotalCost", visible: true },
......@@ -186,7 +222,8 @@ const baseColumns = ref([
func: (row) => {
row.actualEndCapExecuted = ((parseFloat(row.actualEndCapQty) >= parseFloat(row.plannedEndCapQty))) ? '是' : '否';
return row.actualEndCapExecuted;
}
},
formulaStr: '公式：（实际端架数量 >= 计划端架数量）',
},
{
label: "计划地堆-平米数（㎡）",
......@@ -242,7 +279,8 @@ const baseColumns = ref([
func: (row) => {
row.actualFloorStackExecuted = ((parseFloat(row.actualFloorStackArea) >= parseFloat(row.plannedFloorStackArea)) && (parseInt(row.actualFloorStackQty) >= parseInt(row.plannedFloorStackQty))) ? '是' : '否';
return row.actualFloorStackExecuted;
}
},
formulaStr: '公式：（实际地堆平米数 >= 计划地堆平米数）并且（实际地堆数量 >= 计划地堆数量）',
},
{ label: "计划多点陈列-数量+形式", prop: "plannedMultiDisplay", visible: true },
{ label: "计划多点陈列-总费用", prop: "plannedMultiDisplayTotalCost", visible: true },
......@@ -292,10 +330,11 @@ const baseColumns = ref([
]);
// 填报列
const fillColumns = ref([
{ label: "经销商名称", prop: "dealerName", visible: true },
{ label: "系统名称", prop: "lineName", visible: true, type: 'string' },
{ label: "门店编码", prop: "storeCode", visible: true },
{ label: "门店名称", prop: "storeName", visible: true },
// 从fpColumns中提取的匹配对象
{ label: "计划主货架-形式", prop: "plannedMainShelfType", visible: true, type: 'string' },
{ label: "计划主货架-数量", prop: "plannedMainShelfQty", visible: true, type: 'string' },
{
label: "实际主货架-形式",
prop: "actualMainShelfType",
......@@ -327,8 +366,10 @@ const fillColumns = ref([
func: (row) => {
row.actualMainShelfExecuted = ((parseInt(row.actualMainShelfType) >= parseInt(row.plannedMainShelfType)) && (parseInt(row.actualMainShelfQty) >= parseInt(row.plannedMainShelfQty))) ? '是' : '否';
return row.actualMainShelfExecuted;
}
},
formulaStr: '公式：（实际主货架形式 >= 计划主货架形式）并且（实际主货架数量 >= 计划主货架数量）',
},
{ label: "计划端架-数量", prop: "plannedEndCapQty", visible: true },
{
label: "实际端架-数量",
prop: "actualEndCapQty",
......@@ -349,8 +390,16 @@ const fillColumns = ref([
func: (row) => {
row.actualEndCapExecuted = ((parseFloat(row.actualEndCapQty) >= parseFloat(row.plannedEndCapQty))) ? '是' : '否';
return row.actualEndCapExecuted;
}
},
formulaStr: '公式：（实际端架数量 >= 计划端架数量）',
},
{
label: "计划地堆-平米数（㎡）",
prop: "plannedFloorStackArea",
visible: true
},
{ label: "计划地堆-数量", prop: "plannedFloorStackQty", visible: true },
{ label: "计划主题地堆-是否", prop: "plannedThemedFloorStack", visible: true },
{
label: "实际地堆-平米数（㎡）",
prop: "actualFloorStackArea",
......@@ -396,8 +445,11 @@ const fillColumns = ref([
func: (row) => {
row.actualFloorStackExecuted = ((parseFloat(row.actualFloorStackArea) >= parseFloat(row.plannedFloorStackArea)) && (parseInt(row.actualFloorStackQty) >= parseInt(row.plannedFloorStackQty))) ? '是' : '否';
return row.actualFloorStackExecuted;
}
},
formulaStr: '公式：（实际地堆平米数 >= 计划地堆平米数）并且（实际地堆数量 >= 计划地堆数量）',
},
{ label: "计划多点陈列-数量+形式", prop: "plannedMultiDisplay", visible: true },
{ label: "计划多点陈列-总费用", prop: "plannedMultiDisplayTotalCost", visible: true },
{
label: "实际多点陈列-数量+形式",
prop: "actualMultiDisplay",
......@@ -418,6 +470,8 @@ const fillColumns = ref([
{ label: '否', value: '否' },
]
},
{ label: "合计费用-费用", prop: "totalCost", visible: true },
{ label: "合计费用-费率", prop: "totalCostRate", visible: true },
{
label: "常规陈列是否执行",
prop: "regularDisplayExecuted",
......@@ -427,7 +481,8 @@ const fillColumns = ref([
// 实际主货架-是否执行 && 实际端架-是否执行 && 实际地堆-是否执行 && 实际多点陈列-是否执行
row.regularDisplayExecuted = (row.actualMainShelfExecuted === '是' && row.actualEndCapExecuted === '是' && row.actualFloorStackExecuted === '是' && row.actualMultiDisplayExecuted === '是') ? '是' : '否';
return row.regularDisplayExecuted;
}
},
formulaStr: '公式：（实际主货架是否执行 = 是）并且（实际端架是否执行 = 是）并且（实际地堆是否执行 = 是）并且（实际多点陈列是否执行 = 是）',
}
])
......@@ -435,8 +490,6 @@ const fillColumns = ref([
const tableColumns = ref([])
// 右上角工具选择列
const chooseColumns = ref([])
// 加载进度
const isLoading = ref(false)
// 计算列具体数据
const checkTableColumns = () => {
if (operation.value === '全部列') {
......@@ -451,7 +504,6 @@ const checkTableColumns = () => {
}).filter(Boolean); // 过滤掉空数组项
} else if (operation.value === '填报列') {
chooseColumns.value = fillColumns.value
console.log(fillColumns, 'fill')
tableColumns.value = fillColumns.value.filter(item => item.visible);
}
}
......@@ -476,9 +528,48 @@ watch(
{ deep: true }
);
// 提交变更
const submitChange = async (row, col) => {
// 有个类型输入框的需要调用 func
if (col.type === 'input') {
col.func(row)
}
await submitDisplayPlan({
id: row.sadId,
[col.prop]: row[col.prop]
})
// 这些提交变化的，同时会影响公式计算的，需要把公式计算的字段列结果，一起发给后台
// 主货架
if (['actualMainShelfType', 'actualMainShelfQty'].includes(col.prop)) {
await submitDisplayPlan({
id: row.sadId,
actualMainShelfExecuted: row.actualMainShelfExecuted,
})
}
// 端架
if (['actualEndCapQty'].includes(col.prop)) {
await submitDisplayPlan({
id: row.sadId,
actualEndCapExecuted: row.actualEndCapExecuted,
})
}
// 地堆
if (['actualFloorStackArea', 'actualFloorStackQty'].includes(col.prop)) {
await submitDisplayPlan({
id: row.sadId,
actualFloorStackExecuted: row.actualFloorStackExecuted,
})
}
// 常规陈列是否执行
await submitDisplayPlan({
id: row.sadId,
regularDisplayExecuted: row.regularDisplayExecuted,
})
}
// 表格数据
const tableData = ref([])
const isLoading = ref(true)
const params = reactive({
pageNum: 1,
pageSize: 10,
......@@ -494,10 +585,7 @@ const getTableList = async () => {
})
tableData.value = res.data.rows
total.value = res.data.total
setTimeout(() => {
isLoading.value = false
}, 3000)
}
getTableList()
......@@ -536,7 +624,8 @@ const getColumnMinWidth = (column) => {
'actualFloorStackArea': 170,
'actualMultiDisplay': 190,
'plannedMultiDisplay': 190,
'actualMultiDisplayExecuted': 170
'actualMultiDisplayExecuted': 170,
'actualMainShelfExecuted': 190,
};
return widthMap[column.prop] || 150; // 默认宽度
......@@ -547,6 +636,35 @@ const getColumnMinWidth = (column) => {
<style scoped
lang="scss">
.container {
.el-tabs {
height: 100%;
display: flex;
flex-direction: column-reverse;
.el-tabs__content {
display: flex;
flex-direction: column;
height: 100%;
.el-tab-pane {
height: 100%;
display: flex;
flex-direction: column;
}
.formula-column {
display: flex;
justify-content: center;
align-items: center;
.el-icon {
margin-left: 2px;
}
}
}
}
.el-form-item {
align-items: center;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论