Skip to content

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

refactor(display_schedule_dashboard): 新增：店内执行上报_看板模块

上级 55378c04
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 1490 行增加 和 48 行删除
src/api/index.js
浏览文件 @ ee95dab8
......@@ -27,6 +27,7 @@ export * from './monitor/jobLog'
export * from './monitor/online'
export * from './monitor/server'
export * from './promotion/display_schedule'
export * from './promotion/display_schedule_dashboard'
export * from './promotion/plan'
export * from './promotion/task'
export * from './scm/logistics_receipt'
......
src/api/promotion/display_schedule_dashboard.js 0 → 100644
浏览文件 @ ee95dab8
import request from '@/utils/request'
// 查询，店内执行上报-看板
export const getDisplayScheduleDashboardList = (params) => {
return request({
url: '/operation/sales/ap_report/query/dept_cm',
params
})
}
\ No newline at end of file
src/layout/components/TagsView/ScrollPane.vue
浏览文件 @ ee95dab8
<template>
<el-scrollbar
ref="scrollContainer"
<el-scrollbar ref="scrollContainer"
:vertical="false"
class="scroll-container"
@wheel.prevent="handleScroll"
>
@wheel.prevent="handleScroll">
<slot />
</el-scrollbar>
</template>
......@@ -91,17 +89,37 @@ defineExpose({
})
</script>
<style lang='scss' scoped>
.scroll-container {
white-space: nowrap;
position: relative;
overflow: hidden;
width: 100%;
:deep(.el-scrollbar__bar) {
bottom: 0px;
}
:deep(.el-scrollbar__wrap) {
height: 39px;
<style lang='scss'
scoped>
.scroll-container {
white-space: nowrap;
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
:deep(.el-scrollbar__bar.is-vertical) {
display: none !important;
/* 完全隐藏垂直滚动条 */
}
:deep(.el-scrollbar__wrap) {
height: 34px !important;
/* 与tags-view-container高度保持一致 */
overflow-y: hidden !important;
/* 明确禁用垂直滚动 */
}
:deep(.el-scrollbar__bar.is-horizontal) {
bottom: 0px;
}
:deep(.el-scrollbar__bar) {
bottom: 0px;
}
:deep(.el-scrollbar__wrap) {
height: 39px;
}
}
}
</style>
\ No newline at end of file
src/views/promotion/components/SearchList/index.vue → src/views/promotion/display_schedule/components/SearchList/index.vue
浏览文件 @ ee95dab8
......@@ -36,6 +36,17 @@
@input="handleChange"
clearable />
</el-form-item>
<el-form-item label="数据筛选">
<el-select v-model="queryParams.rqStatus"
placeholder="请选择筛选状态"
@change="handleChange"
clearable>
<el-option label="全部"
value="" />
<el-option label="未填写"
value="未执行" />
</el-select>
</el-form-item>
</el-form>
</div>
</template>
......
src/views/promotion/display_schedule/tabs/display.vue
浏览文件 @ ee95dab8
......@@ -14,14 +14,14 @@
<script setup
lang="jsx">
import CustomTable from '@/views/promotion/components/Table'
import SearchList from '@/views/promotion/components/SearchList'
import CustomTable from '../components/Table'
import SearchList from '../components/SearchList'
import { getDisplayList, submitDisplayPlan } from '@/api'
import { parseTime } from '@/utils'
import { getDisplayConfig } from './data.jsx'
/*************** 表格操作相关 ***************/
// 提交变更
const tableColumns = getDisplayConfig(async (row, col) => {
// 需要特殊处理的
......@@ -97,11 +97,12 @@
item.storeNameCodeDealerName = item.storeName + '\n(' + item.storeCode + ')' + '\n(' + item.dealerName + ')'
// 特殊类型数据处理，前端要字符串''，后端要数字0
item.actualMainShelfQty = item.actualMainShelfQty || ''
item.actualEndCapQty = item.actualEndCapQty || ''
item.actualFloorStackArea = item.actualFloorStackArea || ''
item.actualFloorStackQty = item.actualFloorStackQty || ''
// item.actualMainShelfQty = item.actualMainShelfQty || ''
// item.actualEndCapQty = item.actualEndCapQty || ''
// item.actualFloorStackArea = item.actualFloorStackArea || ''
// item.actualFloorStackQty = item.actualFloorStackQty || ''
})
tableData.value = res.data.rows
total.value = res.data.total
isLoading.value = false
......@@ -146,5 +147,4 @@
margin: 0;
}
}
</style>
\ No newline at end of file
src/views/promotion/display_schedule/tabs/schedule.vue
浏览文件 @ ee95dab8
......@@ -39,8 +39,8 @@
<script setup
lang="jsx">
import CustomTable from '@/views/promotion/components/Table'
import SearchList from '@/views/promotion/components/SearchList'
import CustomTable from '../components/Table'
import SearchList from '../components/SearchList'
import { getDisplayScheduleList, submitDisplaySchedulePlan } from '@/api'
import { parseTime } from '@/utils'
import { getSchedulePlanConfig } from './data.jsx'
......@@ -89,7 +89,7 @@
const isLoading = ref(true)
const params = ref({
pageNum: 1,
pageSize: 50,
pageSize: 50,
salesMonth: new Date(),
deptName: '',
dealerCN: '',
......
src/views/promotion/display_schedule/tabs/schedule_dis.vue
浏览文件 @ ee95dab8
......@@ -14,8 +14,8 @@
<script setup
lang="jsx">
import CustomTable from '@/views/promotion/components/Table'
import SearchList from '@/views/promotion/components/SearchList'
import CustomTable from '../components/Table'
import SearchList from '../components/SearchList'
import { getDisplayScheduleDetail, submitDisplayScheduleDetail } from '@/api'
import { parseTime } from '@/utils'
import { getScheduleDisConfig } from './data'
......@@ -32,11 +32,11 @@
// 关联的公式计算列，需要特殊处理
for (const str of col.requestKey) {
const obj = getScheduleDisConfig().flatMap(item => {
if (item.children) {
return item.children.filter(child => !child.onlyFill);
}
return [];
}).find(item => item.prop === str)
if (item.children) {
return item.children.filter(child => !child.onlyFill);
}
return [];
}).find(item => item.prop === str)
if (obj && obj.type === 'formula') {
obj.func(row)
}
......@@ -61,7 +61,7 @@
const isLoading = ref(true)
const params = ref({
pageNum: 1,
pageSize: 50,
pageSize: 50,
salesMonth: new Date(),
deptName: '',
dealerCN: '',
......@@ -100,8 +100,8 @@
item.updateTime = parseTime(item.updateTime, '{y}-{m}-{d} {h}:{i}:{s}')
// 特殊类型处理
item.actualEndCapQty = item.actualEndCapQty || ''
item.actualFloorStackArea = item.actualFloorStackArea || ''
// item.actualEndCapQty = item.actualEndCapQty || ''
// item.actualFloorStackArea = item.actualFloorStackArea || ''
})
tableData.value = res.data.rows
total.value = res.data.total
......@@ -110,5 +110,5 @@
getTableList()
const showSearch = ref(true)
</script>
\ No newline at end of file
src/views/promotion/display_schedule/tabs/six_little_diamonds.vue
浏览文件 @ ee95dab8
......@@ -14,8 +14,8 @@
<script setup
lang="jsx">
import CustomTable from '@/views/promotion/components/Table'
import SearchList from '@/views/promotion/components/SearchList'
import CustomTable from '../components/Table'
import SearchList from '../components/SearchList'
import { getSixLittleDiamondsPlanList, submitSixLittleDiamondsPlan } from '@/api'
import { getSixLittleDiamondsConfig } from './data.jsx'
import { parseTime } from '@/utils'
......@@ -61,7 +61,7 @@
const params = ref({
pageNum: 1,
pageSize: 50,
pageSize: 50,
salesMonth: new Date(),
deptName: '',
dealerCN: '',
......
src/views/promotion/display_schedule/tabs/snack.vue
浏览文件 @ ee95dab8
......@@ -14,8 +14,8 @@
<script setup
lang="jsx">
import CustomTable from '@/views/promotion/components/Table'
import SearchList from '@/views/promotion/components/SearchList'
import CustomTable from '../components/Table'
import SearchList from '../components/SearchList'
import { getSnackPlanList, submitSnackPlan } from '@/api'
import { parseTime } from '@/utils'
import { getSnackCofing } from './data.jsx';
......@@ -93,7 +93,7 @@
const isLoading = ref(true)
const params = ref({
pageNum: 1,
pageSize: 50,
pageSize: 50,
salesMonth: new Date(),
deptName: '',
dealerCN: '',
......
src/views/promotion/display_schedule/tabs/three_two_seconds.vue
浏览文件 @ ee95dab8
......@@ -14,8 +14,8 @@
<script setup
lang="jsx">
import CustomTable from '@/views/promotion/components/Table'
import SearchList from '@/views/promotion/components/SearchList'
import CustomTable from '../components/Table'
import SearchList from '../components/SearchList'
import { getThreeMetersTwoSecondsPlanList, submitThreeMetersTwoSecondsPlan } from '@/api'
import { getThreeTwoSecondsConfig } from './data.jsx'
......
src/views/promotion/display_schedule_dashboard/components/Table/index.vue 0 → 100644
浏览文件 @ ee95dab8
<template>
<div class="flex-container">
<!-- 操作类型 -->
<el-row>
<el-form-item>
<el-radio-group v-model="operation">
<el-radio-button label="大区战区-分析"
value="大区战区-分析" />
<el-radio-button label="城市经理-分析"
value="城市经理-分析" />
</el-radio-group>
</el-form-item>
</el-row>
<el-table :data="tableData"
border
ref="tableRef"
v-loading="isLoading"
show-overflow-tooltip>
<template v-for="col in chooseColumns"
:key="col.prop">
<!-- 有子列的情况 -->
<el-table-column v-if="col.childColumns && col.childColumns.length > 0"
:label="col.label"
align="center"
:width="col.width">
<el-table-column v-for="childCol in col.childColumns"
:key="childCol.prop"
:label="childCol.label"
:prop="childCol.prop"
align="center"
:width="childCol.width">
</el-table-column>
</el-table-column>
<!-- 没有子列的独立列情况 -->
<el-table-column v-else
:label="col.label"
:prop="col.prop"
align="center"
:width="col.width">
</el-table-column>
</template>
</el-table>
</div>
</template>
<script setup>
import userStore from '@/store/modules/user'
const props = defineProps({
tableData: { // 数据源
type: Array,
default: () => []
},
baseColumns: { // 表格列
type: Array,
default: () => []
},
total: { // 总条数
type: Number,
default: 0
},
isLoading: { // 表格加载状态
type: Boolean,
default: false
},
formatter: { // 格式化函数
type: Function,
default: (row, col, cellValue) => cellValue
}
})
const emit = defineEmits(['getTableList', 'updateShowSearch'])
/*************** 工具栏 ***************/
const showFill = userStore().hasQcMarketEmpInfo // 是否启用填报模式
const operation = ref('大区战区-分析'); // 切换平铺/填报模式
const tableRef = ref(null)
const chooseColumns = ref([]) // 使用的列
watch(operation, (newVal) => {
// 如果是大区战区-分析，则隐藏城市经理列
if (newVal === '大区战区-分析') {
chooseColumns.value = props.baseColumns.filter(item => item.prop !== 'cityManager')
} else {
chooseColumns.value = props.baseColumns
}
}, {
immediate: true
})
const getTableList = () => {
emit('getTableList')
}
</script>
<style scoped
lang="scss">
/* 根容器设置为flex布局，占据整个可用空间 */
.flex-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 因为表格会被挪走，所以必须独立样式无法嵌套在别人内 */
/* 表格样式 */
.table-container {
flex: 1;
/* 这是关键，让表格容器自动占据剩余空间 */
display: flex;
flex-direction: column;
min-height: 0;
/* 解决flex子项内容溢出问题 */
.auto-fit-header-table {
flex: 1;
/* 列样式 */
.column-style {
/* 列头样式 */
.formula-column {
display: flex;
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;
}
}
/* 单元格样式 */
/* 展示模式单元格（仅展示模式生效） */
.show-cell-style {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 自定义单元格样式（仅填充模式生效） */
.cell-style {
>div {
display: flex;
flex-direction: column;
align-items: center;
>span {
text-align: left;
text-indent: 5px;
display: inline-block;
width: 80%;
background-color: #e1e2e6;
border-bottom: 1px solid #ebeef5;
}
}
/* 表格内下拉框 */
.el-select {
width: 100% !important;
padding: 10px;
/* 非 disabled 状态下的背景颜色 */
&.no-disabled ::v-deep(.el-select__wrapper) {
border: 4px solid var(--el-background-editor-cell) !important;
}
}
.el-input {
height: 32px !important;
/* box-sizing: content-box; */
padding: 0 10px;
width: 100%;
/* 非 disabled 状态下的背景颜色 */
&.no-disabled ::v-deep(.el-input__wrapper) {
border: 4px solid var(--el-background-editor-cell) !important;
}
}
.date-picker {
width: 100%;
padding: 10px;
/* 非 disabled 状态下的背景颜色 */
&.no-disabled ::v-deep(.el-input__wrapper) {
border: 4px solid var(--el-background-editor-cell) !important;
}
::v-deep(.el-input) {
width: 100%;
padding: 0;
}
}
}
/* 普通文字单元格（仅填充模式生效） */
.fill-span-wrap {
/* 超出省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 10px;
}
}
/* 填报模式-单元格 */
&.cell-no-padding {
/* 无上下内边距 */
::v-deep(.el-table__row) {
.el-table__cell {
padding-top: 0;
padding-bottom: 0;
.cell {
padding: 0 !important;
}
}
}
}
}
/* 分页器 */
.pagination-container {
margin: 10px;
}
}
</style>
<style lang="scss">
/* 表格弹窗 */
.table-dialog-modal {
padding: 0;
/* 关键：覆盖Element Plus对话框的默认最大宽度 */
.el-dialog {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
height: 100vh;
display: flex;
flex-direction: column;
.el-dialog__body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden !important;
padding-bottom: 5px;
.dialog-table-container {
flex: 1;
height: 100%;
.table-container {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
.pagination-container {
margin-left: auto;
}
}
}
}
}
}
// 不显示数字输入框的 spinner
.no-spinner input::-webkit-inner-spin-button,
.no-spinner input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.no-spinner {
-moz-appearance: textfield;
}
// 填入数字超过计划值时，红色文字提示
.red-text {
input {
color: red !important;
}
}
</style>
\ No newline at end of file
src/views/promotion/display_schedule_dashboard/index.vue 0 → 100644
浏览文件 @ ee95dab8
<template>
<div class="app-container">
<div class="container">
<el-tabs v-model="activeName"
class="demo-tabs"
@tab-click="handleClickTabs">
<el-tab-pane label="常规陈列"
name="常规陈列">
<Display />
</el-tab-pane>
<el-tab-pane label="档期计划"
name="档期计划">
<Schedule />
</el-tab-pane>
<el-tab-pane label="档期陈列"
name="档期陈列">
<ScheduleDis />
</el-tab-pane>
<el-tab-pane label="零食陈列"
name="零食陈列">
<Snack />
</el-tab-pane>
<el-tab-pane label="三米两秒"
name="三米两秒">
<ThreeTwoSeconds />
</el-tab-pane>
<el-tab-pane label="六小金刚"
name="六小金刚">
<SixLittleDiamonds />
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script setup>
import Display from './tabs/display.vue'
import Schedule from './tabs/schedule.vue'
import ScheduleDis from './tabs/schedule_dis.vue'
import Snack from './tabs/snack.vue'
import ThreeTwoSeconds from './tabs/three_two_seconds.vue'
import SixLittleDiamonds from './tabs/six_little_diamonds.vue'
const activeName = ref('常规陈列');
const handleClickTabs = (tab) => {
activeName.value = tab.name;
}
</script>
<style scoped
lang="scss">
.app-container {
padding: 10px;
.container {
padding: 10px;
}
}
</style>
\ No newline at end of file
src/views/promotion/display_schedule_dashboard/tabs/data.jsx 0 → 100644
浏览文件 @ ee95dab8
// 每个表格里的数据列信息集合
// 常规陈列
export const getDisplayConfig = () => {
return [
// {
// label: "计划月份",
// prop: "salesMonth",
// width: 100,
// childCol: []
// },
{
label: "大区",
prop: "regionName",
childCol: []
},
{
label: "战区",
prop: "districtName",
childCol: []
},
{
label: "城市经理",
prop: "cityManager",
childCol: []
},
{
label: '主货架',
prop: "mainShelf",
childColumns: [
{
label: '计划',
prop: "planMsStoreCnt",
},
{
label: '执行',
prop: "execMsStoreCnt",
},
{
label: '执行率',
prop: "msExecRate",
}
]
},
{
label: '端架',
prop: "endShelf",
childColumns: [
{
label: '计划',
prop: "planRegEndcapStoreCnt",
},
{
label: '执行',
prop: "execRegEndcapStoreCnt",
},
{
label: '执行率',
prop: "endcapExecRate",
}
]
},
{
label: '地堆',
prop: "endcapShelf",
childColumns: [
{
label: '计划',
prop: "planRegGsStoreCnt",
},
{
label: '执行',
prop: "execRegGsStoreCnt",
},
{
label: '执行率',
prop: "gsExecRate",
}
]
},
{
label: '多点陈列',
prop: "multiShelf",
childColumns: [
{
label: '计划',
prop: "planMpDispStoreCnt",
},
{
label: '执行',
prop: "execMpDispStoreCnt",
},
{
label: '执行率',
prop: "mpDispExecRate",
}
]
},
{
label: '挂条陈列',
prop: "hangShelf",
childColumns: [
{
label: '计划',
prop: "planHsStoreCnt",
},
{
label: '执行',
prop: "execHsStoreCnt",
},
{
label: '执行率',
prop: "HsExecRate",
}
]
}
]
}
// 档期计划
export const getSchedulePlanConfig = (submitChange) => {
return [
// {
// label: "计划月份",
// prop: "salesMonth",
// width: 100
// },
{
label: "大区",
prop: "regionName",
width: 100
},
{
label: "战区",
prop: "districtName",
width: 100
},
{
label: "城市经理",
prop: "cityManager",
width: 100
},
{
label: '大区反馈',
prop: "regionFeedback",
childColumns: [
{
label: '计划',
prop: "planPromoPeriStoreCnt",
},
{
label: '执行',
prop: "launchPromoPeriStoreCnt",
},
{
label: '执行率',
prop: "launchRatePromoPeriExec",
}
]
},
{
label: '规格',
prop: "spec",
childColumns: [
{
label: '执行',
prop: "execPsStoreCnt",
},
{
label: '执行率',
prop: "psExecRatePromoPeriExec",
}
]
},
{
label: '口味',
prop: "flavor",
childColumns: [
{
label: '执行',
prop: "execPfStoreCnt",
},
{
label: '执行率',
prop: "pfExecRatePromoPeriExec",
}
]
},
{
label: '价格',
prop: "price",
childColumns: [
{
label: '执行',
prop: "execPpStoreCnt",
},
{
label: '执行率',
prop: "ppExecRatePromoPeriExec",
}
]
},
{
label: '海报',
prop: "poster",
childColumns: [
{
label: '计划',
prop: "planPosterStoreCnt",
},
{
label: '执行',
prop: "execPosterStoreCnt",
},
{
label: '执行率',
prop: "posterExecRate",
}
]
},
]
}
// 档期陈列
export const getScheduleDisConfig = (submitChange) => {
return [
// {
// label: "计划月份",
// prop: "salesMonth",
// width: 100
// },
{
label: "大区",
prop: "regionName",
width: 100
},
{
label: "战区",
prop: "districtName",
width: 100
},
{
label: "城市经理",
prop: "cityManager",
width: 100
},
{
label: '端架',
prop: "endShelf",
childColumns: [
{
label: '计划',
prop: "planEndcapStoreCnt",
},
{
label: '执行',
prop: "execEndcapStoreCnt",
},
{
label: '执行率',
prop: "endcapExecRatePromoPeriDisp",
}
]
},
{
label: '地堆',
prop: "endcapShelf",
childColumns: [
{
label: '计划',
prop: "planGsStoreCnt",
},
{
label: '执行',
prop: "execGsStoreCnt",
},
{
label: '执行率',
prop: "gsExecRatePromoPeriDisp",
}
]
},
{
label: '其他陈列',
prop: "otherShelf",
childColumns: [
{
label: '计划',
prop: "planOtherDispStoreCnt",
},
{
label: '执行',
prop: "execOtherDispStoreCnt",
},
{
label: '执行率',
prop: "otherDispExecRatePromoPeriDisp",
}
]
},
]
}
// 零食陈列
export const getSnackCofing = (submitChange) => {
return [
// {
// label: "计划月份",
// prop: "salesMonth",
// width: 100
// },
{
label: "大区",
prop: "regionName",
width: 100
},
{
label: "战区",
prop: "districtName",
width: 100
},
{
label: "城市经理",
prop: "cityManager",
width: 100
},
{
label: '计划',
prop: "planSnackStoreCnt",
},
{
label: '执行',
prop: "execSnackStoreCnt",
},
{
label: '执行率',
prop: "snackExecRate",
}
]
}
// 三米两秒
export const getThreeTwoSecondsConfig = (submitChange) => {
return [
// {
// label: "计划月份",
// prop: "salesMonth",
// width: 100
// },
{
label: "大区",
prop: "regionName",
width: 100
},
{
label: "战区",
prop: "districtName",
width: 100
},
{
label: "城市经理",
prop: "cityManager",
width: 100
},
{
label: '计划',
prop: "planSLStoreCnt",
},
{
label: '执行',
prop: "execSLStoreCnt",
},
{
label: '执行率',
prop: "SLExecRate",
}
]
}
// 六小金刚
export const getSixLittleDiamondsConfig = (submitChange) => {
return [
// {
// label: "计划月份",
// prop: "salesMonth",
// width: 100
// },
{
label: "大区",
prop: "regionName",
width: 100
},
{
label: "战区",
prop: "districtName",
width: 100
},
{
label: "城市经理",
prop: "cityManager",
width: 100
},
{
label: '计划',
prop: "planSixJdStoreCnt",
},
{
label: '执行',
prop: "execSixJdStoreCnt",
},
{
label: '执行率',
prop: "sixJdExecRate",
}
]
}
src/views/promotion/display_schedule_dashboard/tabs/display.vue 0 → 100644
浏览文件 @ ee95dab8
<template>
<!-- 常规陈列 -->
<el-form :inline="true"
:model="queryParams"
class="demo-form-inline">
<el-form-item label="计划月份">
<el-date-picker v-model="queryParams.salesMonth"
type="month"
placeholder="选择计划月份"
@change="getTableList"
clearable />
</el-form-item>
</el-form>
<CustomTable :tableData="tableData"
:baseColumns="baseColumns"
:isLoading="isLoading"
@getTableList="getTableList"
@updateShowSearch="v => showSearch.value = v" />
</template>
<script setup
lang="jsx">
import CustomTable from '../components/Table'
import { getDisplayScheduleDashboardList } from '@/api'
import { getDisplayConfig } from './data.jsx'
import { parseTime } from '@/utils'
/*************** 表格操作相关 ***************/
// 提交变更
const tableColumns = getDisplayConfig()
// 全部列
const baseColumns = ref(tableColumns);
// 表格数据
const queryParams = reactive({
salesMonth: new Date(),
})
const tableData = ref([])
const isLoading = ref(true)
const total = ref(0)
// 筛选列表数据
const getTableList = async () => {
isLoading.value = true
const res = await getDisplayScheduleDashboardList({
...queryParams,
salesMonth: parseTime(queryParams.salesMonth, '{y}-{m}')
})
// 合并战区大区结构为扁平化
const { zq, dq } = res.data
tableData.value = [...zq, ...dq]
isLoading.value = false
}
getTableList()
</script>
<style lang="scss">
// 动态列内容的 render 内样式
// 操作提示列
.operation_tip_cell {
display: flex;
flex-direction: column;
align-items: flex-start;
p {
width: 100%;
margin: 0;
}
p:first-child {
background-color: #e1e2e6;
border-bottom: 1px solid #ebeef5;
}
p:last-child {
padding: 15px 0;
}
}
// 只在填报模式出现的门店名称+门店编码+经销山名称（合并到一起）
.store-name-render-cell {
display: flex;
flex-direction: column;
align-items: flex-start;
p {
width: 100%;
margin: 0;
}
}
</style>
\ No newline at end of file
src/views/promotion/display_schedule_dashboard/tabs/schedule.vue 0 → 100644
浏览文件 @ ee95dab8
<template>
<!-- 档期计划 -->
<!-- 隐藏门店搜索 -->
<el-form :inline="true"
:model="queryParams"
class="demo-form-inline">
<el-form-item label="计划月份">
<el-date-picker v-model="queryParams.salesMonth"
type="month"
placeholder="选择计划月份"
@change="getTableList"
clearable />
</el-form-item>
</el-form>
<CustomTable :tableData="tableData"
:baseColumns="baseColumns"
:isLoading="isLoading"
@getTableList="getTableList"
@updateShowSearch="v => showSearch.value = v" />
</template>
<script setup
lang="jsx">
import CustomTable from '../components/Table'
import { getDisplayScheduleDashboardList } from '@/api'
import { parseTime } from '@/utils'
import { getSchedulePlanConfig } from './data.jsx'
const { proxy } = getCurrentInstance()
/*************** 操作类型 ***************/
// 提交变更
const submitChange = async (row, col) => {
// 需要特殊处理的
// 实际主货架-形式，为空时，置空实际主货架-数量
if (col.prop === 'actualMainShelfType' && !row.actualMainShelfType) {
row.actualMainShelfQty = 0
}
let requestObj = {}
if (col.requestKey) {
// 关联的公式计算列，需要特殊处理
for (const str of col.requestKey) {
const obj = getSchedulePlanConfig().flatMap(item => {
if (item.children) {
return item.children.filter(child => !child.onlyFill);
}
return [];
}).find(item => item.prop == str)
if (obj && obj.type === 'formula') {
obj.func(row)
}
}
requestObj = col.requestKey.reduce((acc, key) => ({ ...acc, [key]: row[key] }), {})
}
await submitDisplaySchedulePlan({
id: row.sapId,
[col.prop]: row[col.prop], // 当前修改列的值
...requestObj,
actualPromotionFlavor: Array.isArray(row.actualPromotionFlavor) ? row.actualPromotionFlavor.join(',') : '-', // 档期执行-促销口味，为数组时，转成字符串
actualPromotionStartDate: row.actualPromotionStartDate ? parseTime(row.actualPromotionStartDate, '{y}-{m}-{d}') : '', // 档期执行-促销开始日期，为字符串时，转成日期格式
})
}
// 基础列配置
const baseColumns = ref(getSchedulePlanConfig(submitChange));
// 表格数据
const queryParams = reactive({
salesMonth: new Date(),
})
const tableData = ref([])
const isLoading = ref(true)
const total = ref(0)
// 筛选列表数据
const getTableList = async () => {
isLoading.value = true
const res = await getDisplayScheduleDashboardList({
...queryParams,
salesMonth: parseTime(queryParams.salesMonth, '{y}-{m}')
})
// 合并战区大区结构为扁平化
const { zq, dq } = res.data
tableData.value = [...zq, ...dq]
isLoading.value = false
}
getTableList()
</script>
src/views/promotion/display_schedule_dashboard/tabs/schedule_dis.vue 0 → 100644
浏览文件 @ ee95dab8
<template>
<!-- 档期陈列 -->
<el-form :inline="true"
:model="queryParams"
class="demo-form-inline">
<el-form-item label="计划月份">
<el-date-picker v-model="queryParams.salesMonth"
type="month"
placeholder="选择计划月份"
@change="getTableList"
clearable />
</el-form-item>
</el-form>
<CustomTable :tableData="tableData"
:baseColumns="baseColumns"
:isLoading="isLoading"
@getTableList="getTableList"
@updateShowSearch="v => showSearch.value = v" />
</template>
<script setup
lang="jsx">
import CustomTable from '../components/Table'
import { getDisplayScheduleDashboardList } from '@/api'
import { parseTime } from '@/utils'
import { getScheduleDisConfig } from './data'
/*************** 表格数据 ***************/
// 提交变更
const submitChange = async (row, col) => {
// 需要特殊处理的
// 1. 实际主货架-形式，为空时，置空实际主货架-数量
if (col.prop === 'actualMainShelfType' && !row.actualMainShelfType) {
row.actualMainShelfQty = 0
}
// 关联的公式计算列，需要特殊处理
for (const str of col.requestKey) {
const obj = getScheduleDisConfig().flatMap(item => {
if (item.children) {
return item.children.filter(child => !child.onlyFill);
}
return [];
}).find(item => item.prop === str)
if (obj && obj.type === 'formula') {
obj.func(row)
}
}
await submitDisplayScheduleDetail({
id: row.sapdId,
[col.prop]: row[col.prop], // 当前修改列的值
...col.requestKey.reduce((acc, key) => ({ ...acc, [key]: row[key] }), {}), // 额外携带影响的列字段值
// 特殊类型字段处理
// 端架数量实际
actualEndCapQty: row.actualEndCapQty || 0,
// 地堆平米数实际
actualFloorStackArea: row.actualFloorStackArea || 0,
})
}
// 全部列
const baseColumns = ref(getScheduleDisConfig(submitChange));
// 表格数据
const queryParams = reactive({
salesMonth: new Date(),
})
const tableData = ref([])
const isLoading = ref(true)
const total = ref(0)
// 筛选列表数据
const getTableList = async () => {
isLoading.value = true
const res = await getDisplayScheduleDashboardList({
...queryParams,
salesMonth: parseTime(queryParams.salesMonth, '{y}-{m}')
})
// 合并战区大区结构为扁平化
const { zq, dq } = res.data
tableData.value = [...zq, ...dq]
isLoading.value = false
}
getTableList()
</script>
\ No newline at end of file
src/views/promotion/display_schedule_dashboard/tabs/six_little_diamonds.vue 0 → 100644
浏览文件 @ ee95dab8
<template>
<!-- 六小金刚 -->
<el-form :inline="true"
:model="queryParams"
class="demo-form-inline">
<el-form-item label="计划月份">
<el-date-picker v-model="queryParams.salesMonth"
type="month"
placeholder="选择计划月份"
@change="getTableList"
clearable />
</el-form-item>
</el-form>
<CustomTable :tableData="tableData"
:baseColumns="baseColumns"
:isLoading="isLoading"
@getTableList="getTableList"
@updateShowSearch="v => showSearch.value = v" />
</template>
<script setup
lang="jsx">
import CustomTable from '../components/Table'
import { getDisplayScheduleDashboardList } from '@/api'
import { getSixLittleDiamondsConfig } from './data.jsx'
import { parseTime } from '@/utils'
const { proxy } = getCurrentInstance()
/*************** 搜索列表 ***************/
const showSearch = ref(true)
/*************** 表格 ***************/
// 提交变更
const submitChange = async (row, col) => {
let requestObj = {}
if (col.requestKey) {
// 关联的公式计算列，需要特殊处理
for (const str of col.requestKey) {
const obj = getSixLittleDiamondsConfig().flatMap(item => {
if (item.children) {
return item.children.filter(child => !child.onlyFill);
}
return [];
}).find(item => item.prop === str)
if (obj && obj.type === 'formula') {
obj.func(row)
}
}
requestObj = col.requestKey.reduce((acc, key) => ({ ...acc, [key]: row[key] }), {})
}
await submitSixLittleDiamondsPlan({
id: row.sadjId,
[col.prop]: row[col.prop], // 当前修改列的值
...requestObj
})
}
// 全部列
const baseColumns = ref(getSixLittleDiamondsConfig(submitChange));
// 表格数据
const queryParams = reactive({
salesMonth: new Date(),
})
const tableData = ref([])
const isLoading = ref(true)
const total = ref(0)
// 筛选列表数据
const getTableList = async () => {
isLoading.value = true
const res = await getDisplayScheduleDashboardList({
...queryParams,
salesMonth: parseTime(queryParams.salesMonth, '{y}-{m}')
})
// 合并战区大区结构为扁平化
const { zq, dq } = res.data
tableData.value = [...zq, ...dq]
isLoading.value = false
}
getTableList()
</script>
<style scoped></style>
\ No newline at end of file
src/views/promotion/display_schedule_dashboard/tabs/snack.vue 0 → 100644
浏览文件 @ ee95dab8
<template>
<!-- 零食陈列 -->
<el-form :inline="true"
:model="queryParams"
class="demo-form-inline">
<el-form-item label="计划月份">
<el-date-picker v-model="queryParams.salesMonth"
type="month"
placeholder="选择计划月份"
@change="getTableList"
clearable />
</el-form-item>
</el-form>
<CustomTable :tableData="tableData"
:baseColumns="baseColumns"
:isLoading="isLoading"
@getTableList="getTableList"
@updateShowSearch="v => showSearch.value = v" />
</template>
<script setup
lang="jsx">
import CustomTable from '../components/Table'
import { getDisplayScheduleDashboardList } from '@/api'
import { parseTime } from '@/utils'
import { getSnackCofing } from './data.jsx';
/*************** 操作类型 ***************/
// 提交变更
const submitChange = async (row, col) => {
// 需要特殊处理的
// 1. 实际主货架-形式，为空时，置空实际主货架-数量
// if (col.prop === 'actualMainShelfType' && !row.actualMainShelfType) {
// row.actualMainShelfQty = 0
// }
// 关联的公式计算列，需要特殊处理
for (const str of col.requestKey) {
const obj = getSnackCofing().flatMap(item => {
if (item.children) {
return item.children.filter(child => !child.onlyFill);
}
return [];
}).find(item => item.prop === str)
if (obj && obj.type === 'formula') {
obj.func(row)
}
}
await submitSnackPlan({
id: row.sasdId,
[col.prop]: row[col.prop], // 当前修改列的值
...col.requestKey.reduce((acc, key) => ({ ...acc, [key]: row[key] }), {}), // 额外携带影响的列字段值
})
}
// 全部列
const baseColumns = ref(getSnackCofing(submitChange));
// 表格数据
const queryParams = reactive({
salesMonth: new Date(),
})
const tableData = ref([])
const isLoading = ref(true)
const total = ref(0)
// 筛选列表数据
const getTableList = async () => {
isLoading.value = true
const res = await getDisplayScheduleDashboardList({
...queryParams,
salesMonth: parseTime(queryParams.salesMonth, '{y}-{m}')
})
// 合并战区大区结构为扁平化
const { zq, dq } = res.data
tableData.value = [...zq, ...dq]
isLoading.value = false
}
getTableList()
</script>
<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;
.pagination-container {
margin: 10px;
}
}
.formula-column {
display: flex;
justify-content: center;
align-items: center;
.el-icon {
margin-left: 2px;
}
}
}
}
.el-form-item {
align-items: center;
}
/* 表格区域 */
.auto-fit-header-table {
/* 优化超长文本的显示效果 */
.cell {
/* padding: 0 .2133rem; */
}
::v-deep(.el-table__row) {
.el-table__cell {
padding: 0;
}
}
::v-deep(.column-style) {
.cell-style {
/* margin: 0 -12px; */
>div {
display: flex;
flex-direction: column;
align-items: flex-start;
>span {
text-align: left;
text-indent: 5px;
display: inline-block;
width: 100%;
background-color: #e1e2e6;
border-bottom: 1px solid #ebeef5;
}
}
/* 表格内下拉框 */
.el-select {
width: 100% !important;
padding: 10px;
}
.el-input {
padding: 10px;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/promotion/display_schedule_dashboard/tabs/three_two_seconds.vue 0 → 100644
浏览文件 @ ee95dab8
<template>
<!-- 三米两秒 -->
<el-form :inline="true"
:model="queryParams"
class="demo-form-inline">
<el-form-item label="计划月份">
<el-date-picker v-model="queryParams.salesMonth"
type="month"
placeholder="选择计划月份"
@change="getTableList"
clearable />
</el-form-item>
</el-form>
<CustomTable :tableData="tableData"
:baseColumns="baseColumns"
:isLoading="isLoading"
@getTableList="getTableList"
@updateShowSearch="v => showSearch.value = v" />
</template>
<script setup
lang="jsx">
import CustomTable from '../components/Table'
import { getDisplayScheduleDashboardList } from '@/api'
import { getThreeTwoSecondsConfig } from './data.jsx'
import { parseTime } from '@/utils'
const { proxy } = getCurrentInstance()
/*************** 搜索列表 ***************/
const showSearch = ref(true)
/*************** 表格 ***************/
// 提交变更
const submitChange = async (row, col) => {
let requestObj = {}
if (col.requestKey) {
// 关联的公式计算列，需要特殊处理
for (const str of col.requestKey) {
const obj = getThreeTwoSecondsConfig().flatMap(item => {
if (item.children) {
return item.children.filter(child => !child.onlyFill);
}
return [];
}).find(item => item.prop === str)
if (obj && obj.type === 'formula') {
obj.func(row)
}
}
requestObj = col.requestKey.reduce((acc, key) => ({ ...acc, [key]: row[key] }), {})
}
await submitThreeMetersTwoSecondsPlan({
id: row.sadsId,
[col.prop]: row[col.prop], // 当前修改列的值
...requestObj
})
}
// 全部列
const baseColumns = ref(getThreeTwoSecondsConfig(submitChange));
// 表格数据
const queryParams = reactive({
salesMonth: new Date(),
})
const tableData = ref([])
const isLoading = ref(true)
const total = ref(0)
// 筛选列表数据
const getTableList = async () => {
isLoading.value = true
const res = await getDisplayScheduleDashboardList({
...queryParams,
salesMonth: parseTime(queryParams.salesMonth, '{y}-{m}')
})
// 合并战区大区结构为扁平化
const { zq, dq } = res.data
tableData.value = [...zq, ...dq]
isLoading.value = false
}
getTableList()
</script>
<style scoped></style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论