Skip to content

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

refactor(views/promotion/table): 样式：修改店内执行上报复用表格的样式

上级 11d86ae8
显示空白字符变更
内嵌 并排
正在显示 包含 321 行增加 和 382 行删除
src/views/promotion/components/CommonPlan/index.vue → src/views/promotion/components/Table/index.vue
浏览文件 @ d910a7c2
<template>
<!-- 操作类型 -->
<el-row>
<el-form-item>
<el-radio-group v-model="operation"
......@@ -6,7 +7,8 @@
<el-radio-button label="展示模式"
value="展示模式" />
<el-radio-button label="填报模式"
value="填报模式" v-if="useFill"/>
value="填报模式"
v-if="showFill" />
</el-radio-group>
</el-form-item>
<right-toolbar v-model:showSearch="showSearch"
......@@ -16,11 +18,11 @@
:defaultCheckedKeys="visibleProps">
</right-toolbar>
</el-row>
<!-- 筛选列组的按钮 -->
<!-- 数据表格 -->
<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">
......@@ -47,21 +49,19 @@
<!-- 填报模式 -->
<div v-if="operation === '填报模式'"
style="overflow: visible !important;">
<!-- 带选择框/输入框的操作单元格 -->
<!-- 自定义渲染内容单元格 -->
<div v-if="col.render"
class="cell-style">
<component :is="col.render(h, row, col)" />
</div>
<!-- 正常显示/公式计算 -->
<!-- 公式计算 -->
<div v-else-if="col.type === 'formula'">
{{ col.func(row) }}
</div>
<div v-else
class="overflow_wrap">
<!-- 超出部分显示省略号 -->
<span>
{{ row[col.prop] || '-' }}
</span>
<!-- 其他类型内容 -->
<div v-else>
<!-- 正常显示 -->
<span>{{ row[col.prop] || '-' }}</span>
</div>
</div>
<!-- 展示模式 -->
......@@ -79,21 +79,16 @@
<script setup>
import { h } from 'vue'
/*************** 操作类型 ***************/
const operation = ref('展示模式');
// const operation = ref('填报模式');
const tableRef = ref(null)
const props = defineProps({
tableColumns: { // 表格列
type: Array,
default: () => []
},
chooseColumns: { // 右上角工具选择列
chooseColumns: { // 显隐列数据结构
type: Array,
default: () => []
},
visibleProps: { // 右上角工具为树结构，默认勾选的列
visibleProps: { // 显隐列数据，默认勾选的列
type: Array,
default: () => []
},
......@@ -101,38 +96,36 @@ const props = defineProps({
type: Array,
default: () => []
},
isLoading: {
isLoading: { // 表格加载状态
type: Boolean,
default: false
},
total: {
total: { // 总条数
type: Number,
default: 0
},
params: {
params: { // 分页参数
type: Object,
default: () => ({
pageNum: 1,
pageSize: 10,
})
},
// 启用填报模式
useFill: {
showFill: { // 是否显示填报模式
type: Boolean,
default: false
},
// 格式化表格某列内容
formatter: {
formatter: { // 格式化函数
type: Function,
default: (row, col, cellValue) => cellValue
}
})
const emit = defineEmits(['updateColumns', 'getTableList', 'updateShowSearch'])
// 右上角工具
const showSearch = ref(true)
/*************** 工具栏 ***************/
// 切换平铺/填报模式
const operation = ref('展示模式');
const tableRef = ref(null)
const checkTableColumns = async () => {
// 通知外面传入 tableColumns / chooseColumns 数据源
await emit('updateColumns', operation.value)
......@@ -144,45 +137,32 @@ const checkTableColumns = async () => {
}
})
}
onMounted(() => {
checkTableColumns()
})
const getTableList = () => {
emit('getTableList')
}
// 控制搜索框显隐
const showSearch = ref(true)
watch(showSearch, (newVal) => {
emit('updateShowSearch', newVal)
})
// 刷新数据
const getTableList = () => {
emit('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;
/* 表格样式 */
.auto-fit-header-table {
height: 100%;
.el-tab-pane {
height: 100%;
display: flex;
flex-direction: column;
.pagination-container {
margin: 10px;
}
}
/* 列样式 */
.column-style {
/* 列头样式 */
.formula-column {
display: flex;
justify-content: center;
......@@ -192,45 +172,9 @@ watch(showSearch, (newVal) => {
margin-left: 2px;
}
}
}
}
.el-form-item {
align-items: center;
}
/* 表格区域 */
.auto-fit-header-table {
/* 优化超长文本的显示效果 */
.cell {
/* padding: 0 .2133rem; */
>div {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&.cell-no-padding {
::v-deep(.el-table__row) {
.el-table__cell {
padding: 0;
}
}
}
::v-deep(.column-style) {
.cell {
/* overflow: visible; */
>div {
/* overflow: visible !important; */
}
/* 单元格样式 */
/* 自定义渲染内容 */
.cell-style {
margin: 0 -12px;
......@@ -268,53 +212,23 @@ watch(showSearch, (newVal) => {
padding: 0;
}
}
}
}
}
}
}
/* 特殊动态渲染单元格样式 */
.render-cell {
p {
margin: 0;
}
}
/* 操作提示列 */
.operation_tip_cell {
display: flex;
flex-direction: column;
align-items: flex-start;
/* 填报模式-单元格 */
&.cell-no-padding {
p {
width: 100%;
margin: 0;
/* 无上下内边距 */
::v-deep(.el-table__row) {
.el-table__cell {
padding: 0;
}
p:first-child {
background-color: #e1e2e6;
border-bottom: 1px solid #ebeef5;
}
p:last-child {
padding: 15px 0;
}
}
/* 超出部分显示省略号 */
.overflow_wrap {
width: 100%;
/* 固定宽度 */
white-space: nowrap;
/* 不换行 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 显示省略号 */
display: inline-block;
/* 分页器 */
.pagination-container {
margin: 10px;
}
</style>
\ No newline at end of file
src/views/promotion/display_schedule/tabs/display.vue
浏览文件 @ d910a7c2
......@@ -2,14 +2,14 @@
<!-- 常规陈列 -->
<SearchList :showSearch="showSearch"
@change="searchChange" />
<CommonPlan :tableData="tableData"
<CustomTable :tableData="tableData"
:isLoading="isLoading"
:total="total"
:tableColumns="tableColumns"
:chooseColumns="chooseColumns"
:visibleProps="visibleProps"
:params="params"
:useFill="useFill"
:showFill="showFill"
@updateColumns="updateColumns"
@getTableList="getTableList"
@updateShowSearch="updateShowSearch" />
......@@ -17,7 +17,7 @@
<script setup
lang="jsx">
import CommonPlan from '@/views/promotion/components/CommonPlan'
import CustomTable from '@/views/promotion/components/Table'
import SearchList from '@/views/promotion/components/SearchList'
import { getDisplayList, submitDisplayPlan } from '@/api'
import { parseTime } from '@/utils'
......@@ -25,7 +25,7 @@
import userStore from '@/store/modules/user'
// 是否启用填报模式
const useFill = userStore().hasQcMarketEmpInfo
const showFill = userStore().hasQcMarketEmpInfo
/*************** 操作类型 ***************/
......@@ -153,7 +153,7 @@
},
{
label: "门店名称",
prop: "storeNameCodeDealerName", //d 新增动态列（只在填报列显示）
prop: "storeNameCodeDealerName", //新增动态列（只在填报列显示）
visible: true,
type: 'string',
fill: true,
......@@ -163,22 +163,11 @@
width: 225,
render: (h, row) => {
return h('div', {
class: 'render-cell',
style: {
alignItems: 'center',
whiteSpace: 'pre-line'
}
class: 'store-name-render-cell'
}, [
h('p', row.storeName),
h('p', row.storeCode),
h('p', {
style: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: '100%'
}
}, row.dealerName)
h('p', row.dealerName)
])
}
},
......@@ -1134,3 +1123,39 @@
}
}
</style>
<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/tabs/schedule.vue
浏览文件 @ d910a7c2
......@@ -4,32 +4,30 @@
<SearchList :showSearch="showSearch"
@change="searchChange"
:showStoreSearch="false" />
<CommonPlan :tableData="tableData"
<CustomTable :tableData="tableData"
:isLoading="isLoading"
:total="total"
:tableColumns="tableColumns"
:chooseColumns="chooseColumns"
:visibleProps="visibleProps"
:params="params"
:useFill="useFill"
:showFill="showFill"
:formatter="formatterFn"
@updateColumns="updateColumns"
@getTableList="getTableList"
@updateShowSearch="updateShowSearch"
/>
@updateShowSearch="updateShowSearch" />
</template>
<script setup
lang="jsx">
import CommonPlan from '@/views/promotion/components/CommonPlan'
import CustomTable from '@/views/promotion/components/Table'
import SearchList from '@/views/promotion/components/SearchList'
import { getDisplayScheduleList, submitDisplaySchedulePlan } from '@/api'
import { parseTime } from '@/utils'
import { onMounted } from 'vue';
import userStore from '@/store/modules/user'
// 是否启用填报模式
const useFill = userStore().hasQcMarketEmpInfo
const showFill = userStore().hasQcMarketEmpInfo
/*************** 操作类型 ***************/
function splitAndFilter(str) {
......@@ -227,227 +225,227 @@
prop: 'baseColumns',
visible: true
},
{
label: "档期基础信息",
children: [
{
label: "档期执行月份",
prop: "promotionExecutionMonth",
visible: true,
type: "string",
fill: false,
width: 110
},
{
label: "档期计划-促销规格",
prop: "plannedPromotionSpec",
showOverflowTooltip: true,
visible: true,
type: "string",
fill: false,
width: 140
},
{
label: "档期计划-促销口味",
prop: "plannedPromotionFlavor",
showOverflowTooltip: true,
visible: true,
type: "string",
fill: false,
width: 140
},
{
label: "档期执行-促销规格",
prop: "actualPromotionSpec",
visible: true,
type: 'select',
options: [
{
label: '虎皮105g',
value: '虎皮105g'
},
{
label: '虎皮210g',
value: '虎皮210g'
},
{
label: '去骨72g',
value: '去骨72g'
},
{
label: '去骨138g',
value: '去骨138g'
},
{
label: '小鸡腿80g',
value: '小鸡腿80g'
},
{
label: '老卤95g',
value: '老卤95g'
},
{
label: '鸡肉豆堡',
value: '鸡肉豆堡'
},
{
label: '牛肉豆堡',
value: '牛肉豆堡'
}
],
referenceKey: "plannedPromotionSpec",
fill: true,
width: 190,
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=""
clearable
>
{col.options.map(item => (
<el-option
key={item.value}
label={item.label}
value={item.value}
/>
))}
</el-select>
</div>
)
},
// 请求时需要额外携带影响的列字段值
requestKey: ["specExecutionStatus", "promotionExecutionStatus"]
},
// {
// label: "档期基础信息",
// children: [
// {
// label: "档期执行月份",
// prop: "promotionExecutionMonth",
// visible: true,
// type: "string",
// fill: false,
// width: 110
// },
// {
// label: "档期计划-促销规格",
// prop: "plannedPromotionSpec",
// showOverflowTooltip: true,
// visible: true,
// type: "string",
// fill: false,
// width: 140
// },
// {
// label: "档期计划-促销口味",
// prop: "plannedPromotionFlavor",
// showOverflowTooltip: true,
// visible: true,
// type: "string",
// fill: false,
// width: 140
// },
// {
// label: "档期执行-促销规格",
// prop: "actualPromotionSpec",
// visible: true,
// type: 'select',
// options: [
// {
// label: '虎皮105g',
// value: '虎皮105g'
// },
// {
// label: '虎皮210g',
// value: '虎皮210g'
// },
// {
// label: '去骨72g',
// value: '去骨72g'
// },
// {
// label: '去骨138g',
// value: '去骨138g'
// },
// {
// label: '小鸡腿80g',
// value: '小鸡腿80g'
// },
// {
// label: '老卤95g',
// value: '老卤95g'
// },
// {
// label: '鸡肉豆堡',
// value: '鸡肉豆堡'
// },
// {
// label: '牛肉豆堡',
// value: '牛肉豆堡'
// }
// ],
// referenceKey: "plannedPromotionSpec",
// fill: true,
// width: 190,
// 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=""
// clearable
// >
// {col.options.map(item => (
// <el-option
// key={item.value}
// label={item.label}
// value={item.value}
// />
// ))}
// </el-select>
// </div>
// )
// },
// // 请求时需要额外携带影响的列字段值
// requestKey: ["specExecutionStatus", "promotionExecutionStatus"]
// },
{
label: "档期规格是否执行",
prop: "specExecutionStatus",
visible: true,
type: 'formula',
func: (row) => {
// 如果参考值是空则返回 '-'
if (!row.plannedPromotionSpec) {
row.specExecutionStatus = '-';
return '-';
}
row.specExecutionStatus = row.plannedPromotionSpec === row.actualPromotionSpec ? '是' : '否';
return row.specExecutionStatus;
},
formulaStr: '公式：（档期计划促销规格 = 档期执行促销规格）',
fill: true,
width: 150
},
{
label: "档期执行-促销口味",
prop: "actualPromotionFlavor",
visible: true,
type: 'select',
options: [],
referenceKey: "plannedPromotionFlavor",
fill: true,
width: 170,
render: (_, row, col) => {
// options 根据参考属性值来决定（计划值）
let list = splitAndFilter(row[col.referenceKey])
let isFullFlavor = false
// 如果数组里有"全系列"/"全口味"则修改数组
if (list.includes('全口味')) {
list = [
{
label: '全口味',
value: '全口味'
},
{
label: '部分口味',
value: '部分口味'
}
]
isFullFlavor = true
} else {
list = list.map(item => ({
label: item,
value: item
}))
isFullFlavor = false
}
// span 标签超出宽度时显示省略号
return (
<div>
<el-tooltip placement="top" content={row[col.referenceKey] || '-'} disabled={!isContentOverflow(col.referenceKey, row[col.referenceKey], col)}>
<span >
{row[col.referenceKey] || '-'}
</span>
</el-tooltip>
<el-select modelValue={row[col.prop]}
onUpdate:modelValue={(value) => {
row[col.prop] = value;
submitChange(row, col);
}}
disabled={!row[col.referenceKey]}
placeholder=""
clearable
multiple={!isFullFlavor}
collapse-tags={!isFullFlavor}
collapse-tags-tooltip={!isFullFlavor}>
{list.map(item => (
<el-option
key={item.value}
label={item.label}
value={item.value}
/>
))}
</el-select>
</div>
)
},
// 请求时需要额外携带影响的列字段值
requestKey: ["flavorExecutionStatus", "promotionExecutionStatus"]
},
{
label: "档期口味是否执行",
prop: "flavorExecutionStatus",
visible: true,
type: 'formula',
func: (row) => {
// 如果参考值是空则返回 '-'
if (!row.plannedPromotionFlavor) {
row.flavorExecutionStatus = '-';
return '-';
}
// 处理逗号的口味形成数组
let ppromotionFlavor = splitAndFilter(row.plannedPromotionFlavor)
if (!row.actualPromotionFlavor) {
// 判断空字符串
row.flavorExecutionStatus = '未执行';
} else if (row.actualPromotionFlavor?.length === 0) {
// 空数组
row.flavorExecutionStatus = '未执行';
} else {
if (row.actualPromotionFlavor === '全口味') {
row.flavorExecutionStatus = '执行';
} else if (row.actualPromotionFlavor?.length === ppromotionFlavor.length) {
row.flavorExecutionStatus = '执行';
} else if (row.actualPromotionFlavor?.length !== ppromotionFlavor?.length) {
row.flavorExecutionStatus = '部分执行';
}
}
return row.flavorExecutionStatus;
},
formulaStr: '公式：（档期计划促销口味 = 档期执行促销口味）',
fill: true,
width: 150
}
],
prop: 'scheduleInfo',
visible: true
},
// {
// label: "档期规格是否执行",
// prop: "specExecutionStatus",
// visible: true,
// type: 'formula',
// func: (row) => {
// // 如果参考值是空则返回 '-'
// if (!row.plannedPromotionSpec) {
// row.specExecutionStatus = '-';
// return '-';
// }
// row.specExecutionStatus = row.plannedPromotionSpec === row.actualPromotionSpec ? '是' : '否';
// return row.specExecutionStatus;
// },
// formulaStr: '公式：（档期计划促销规格 = 档期执行促销规格）',
// fill: true,
// width: 150
// },
// {
// label: "档期执行-促销口味",
// prop: "actualPromotionFlavor",
// visible: true,
// type: 'select',
// options: [],
// referenceKey: "plannedPromotionFlavor",
// fill: true,
// width: 170,
// render: (_, row, col) => {
// // options 根据参考属性值来决定（计划值）
// let list = splitAndFilter(row[col.referenceKey])
// let isFullFlavor = false
// // 如果数组里有"全系列"/"全口味"则修改数组
// if (list.includes('全口味')) {
// list = [
// {
// label: '全口味',
// value: '全口味'
// },
// {
// label: '部分口味',
// value: '部分口味'
// }
// ]
// isFullFlavor = true
// } else {
// list = list.map(item => ({
// label: item,
// value: item
// }))
// isFullFlavor = false
// }
// // span 标签超出宽度时显示省略号
// return (
// <div>
// <el-tooltip placement="top" content={row[col.referenceKey] || '-'} disabled={!isContentOverflow(col.referenceKey, row[col.referenceKey], col)}>
// <span >
// {row[col.referenceKey] || '-'}
// </span>
// </el-tooltip>
// <el-select modelValue={row[col.prop]}
// onUpdate:modelValue={(value) => {
// row[col.prop] = value;
// submitChange(row, col);
// }}
// disabled={!row[col.referenceKey]}
// placeholder=""
// clearable
// multiple={!isFullFlavor}
// collapse-tags={!isFullFlavor}
// collapse-tags-tooltip={!isFullFlavor}>
// {list.map(item => (
// <el-option
// key={item.value}
// label={item.label}
// value={item.value}
// />
// ))}
// </el-select>
// </div>
// )
// },
// // 请求时需要额外携带影响的列字段值
// requestKey: ["flavorExecutionStatus", "promotionExecutionStatus"]
// },
// {
// label: "档期口味是否执行",
// prop: "flavorExecutionStatus",
// visible: true,
// type: 'formula',
// func: (row) => {
// // 如果参考值是空则返回 '-'
// if (!row.plannedPromotionFlavor) {
// row.flavorExecutionStatus = '-';
// return '-';
// }
// // 处理逗号的口味形成数组
// let ppromotionFlavor = splitAndFilter(row.plannedPromotionFlavor)
// if (!row.actualPromotionFlavor) {
// // 判断空字符串
// row.flavorExecutionStatus = '未执行';
// } else if (row.actualPromotionFlavor?.length === 0) {
// // 空数组
// row.flavorExecutionStatus = '未执行';
// } else {
// if (row.actualPromotionFlavor === '全口味') {
// row.flavorExecutionStatus = '执行';
// } else if (row.actualPromotionFlavor?.length === ppromotionFlavor.length) {
// row.flavorExecutionStatus = '执行';
// } else if (row.actualPromotionFlavor?.length !== ppromotionFlavor?.length) {
// row.flavorExecutionStatus = '部分执行';
// }
// }
// return row.flavorExecutionStatus;
// },
// formulaStr: '公式：（档期计划促销口味 = 档期执行促销口味）',
// fill: true,
// width: 150
// }
// ],
// prop: 'scheduleInfo',
// visible: true
// },
{
label: "合计费用",
prop: 'totalCostParent',
......
src/views/promotion/display_schedule/tabs/schedule_dis.vue
浏览文件 @ d910a7c2
......@@ -2,14 +2,14 @@
<!-- 档期陈列 -->
<SearchList :showSearch="showSearch"
@change="searchChange" />
<CommonPlan :tableData="tableData"
<CustomTable :tableData="tableData"
:isLoading="isLoading"
:total="total"
:tableColumns="tableColumns"
:chooseColumns="chooseColumns"
:visibleProps="visibleProps"
:params="params"
:useFill="useFill"
:showFill="showFill"
@updateColumns="updateColumns"
@getTableList="getTableList"
@updateShowSearch="updateShowSearch" />
......@@ -17,7 +17,7 @@
<script setup
lang="jsx">
import CommonPlan from '@/views/promotion/components/CommonPlan'
import CustomTable from '@/views/promotion/components/Table'
import SearchList from '@/views/promotion/components/SearchList'
import { getDisplayScheduleDetail, submitDisplayScheduleDetail } from '@/api'
import { parseTime } from '@/utils'
......@@ -25,7 +25,7 @@
import userStore from '@/store/modules/user'
// 是否启用填报模式
const useFill = userStore().hasQcMarketEmpInfo
const showFill = userStore().hasQcMarketEmpInfo
/*************** 操作类型 ***************/
// 全部列
......
src/views/promotion/display_schedule/tabs/snack.vue
浏览文件 @ d910a7c2
......@@ -2,14 +2,14 @@
<!-- 零食陈列 -->
<SearchList :showSearch="showSearch"
@change="searchChange" />
<CommonPlan :tableData="tableData"
<CustomTable :tableData="tableData"
:isLoading="isLoading"
:total="total"
:tableColumns="tableColumns"
:chooseColumns="chooseColumns"
:visibleProps="visibleProps"
:params="params"
:useFill="useFill"
:showFill="showFill"
@updateColumns="updateColumns"
@getTableList="getTableList"
@updateShowSearch="updateShowSearch" />
......@@ -17,7 +17,7 @@
<script setup
lang="jsx">
import CommonPlan from '@/views/promotion/components/CommonPlan'
import CustomTable from '@/views/promotion/components/Table'
import SearchList from '@/views/promotion/components/SearchList'
import { getSnackPlanList, submitSnackPlan } from '@/api'
import { parseTime } from '@/utils'
......@@ -25,7 +25,7 @@
import userStore from '@/store/modules/user'
// 是否启用填报模式
const useFill = userStore().hasQcMarketEmpInfo
const showFill = userStore().hasQcMarketEmpInfo
/*************** 操作类型 ***************/
// 全部列
const baseColumns = ref([
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论