Skip to content

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

Merge branch 'ap' into dev

上级 fd207a95 e8ca781b
隐藏空白字符变更
内嵌 并排
正在显示 包含 158 行增加 和 166 行删除
src/views/promotion/display_schedule/components/Table/index.vue
浏览文件 @ 5f33bbc9
...@@ -42,7 +42,8 @@ ...@@ -42,7 +42,8 @@
class="auto-fit-header-table" class="auto-fit-header-table"
v-loading="isLoading" v-loading="isLoading"
show-overflow-tooltip show-overflow-tooltip
:class="{ 'cell-no-padding': operation === '填报模式' }"> :class="{ 'cell-no-padding': operation === '填报模式' }"
:row-style="tableRowStyle">
<template v-for="col in tableColumns"> <template v-for="col in tableColumns">
<el-table-column v-if="col.visible" <el-table-column v-if="col.visible"
:label="col.label" :label="col.label"
...@@ -72,7 +73,7 @@ ...@@ -72,7 +73,7 @@
<!-- 自定义渲染内容单元格 --> <!-- 自定义渲染内容单元格 -->
<div v-if="col.render" <div v-if="col.render"
class="cell-style"> class="cell-style">
<component :is="col.render(h, row, col)" /> <component :is="col.render(h, row, col, !isCurrentMonth(row.salesMonth))" />
</div> </div>
<!-- 公式计算 --> <!-- 公式计算 -->
<div v-else-if="col.type === 'formula'"> <div v-else-if="col.type === 'formula'">
...@@ -270,6 +271,28 @@ const handleDialogClose = () => { ...@@ -270,6 +271,28 @@ const handleDialogClose = () => {
// 然后关闭弹窗 // 然后关闭弹窗
showTableInDialog.value = false showTableInDialog.value = false
} }
/*************** 非当月置灰行 ***************/
// 获取当前月份的函数
const getCurrentMonth = () => {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
return `${year}-${month}`;
};
// 检查是否为当前月的函数
const isCurrentMonth = (salesMonth) => {
return salesMonth === getCurrentMonth();
};
// 行样式函数
const tableRowStyle = ({ row }) => {
if (!isCurrentMonth(row.salesMonth)) {
return { backgroundColor: '#f5f7fa' }; // 灰色背景
}
return {};
};
</script> </script>
<style scoped <style scoped
......
src/views/promotion/display_schedule/tabs/data.jsx
浏览文件 @ 5f33bbc9
...@@ -3791,7 +3791,8 @@ export const getSixLittleDiamondsConfig = (submitChange) => { ...@@ -3791,7 +3791,8 @@ export const getSixLittleDiamondsConfig = (submitChange) => {
) )
}, },
fill: true, fill: true,
width: 210 width: 210,
requestKey: ['gwExecuted6']
}, },
{ {
label: '六小金刚批发挂网陈列费', label: '六小金刚批发挂网陈列费',
...@@ -3803,15 +3804,13 @@ export const getSixLittleDiamondsConfig = (submitChange) => { ...@@ -3803,15 +3804,13 @@ export const getSixLittleDiamondsConfig = (submitChange) => {
}, },
{ {
label: '六小金刚批发挂网是否', label: '六小金刚批发挂网是否',
subLabel: '按实际执行', subLabel: '按计划执行',
prop: 'gwExecuted6', prop: 'gwExecuted6',
visible: true, visible: true,
type: 'formula', type: 'formula',
func: (row) => { func: (row) => {
// 判断区间，未执行，部分执行，执行 // 实际不等于计划的都是未执行
if (!row.actualGw6 || row.actualGw6 == 0) { if (row.actualGw6 !== row.plannedGw6) {
row.gwExecuted6 = '未执行'
} else if (row.actualGw6 !== row.plannedGw6) {
row.gwExecuted6 = '未执行' row.gwExecuted6 = '未执行'
} else { } else {
row.gwExecuted6 = '执行' row.gwExecuted6 = '执行'
......
src/views/promotion/display_schedule_dashboard/components/Table/index.vue
浏览文件 @ 5f33bbc9
...@@ -101,206 +101,157 @@ const getTableList = () => { ...@@ -101,206 +101,157 @@ const getTableList = () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
}
/* 因为表格会被挪走，所以必须独立样式无法嵌套在别人内 */ /* 表格样式 */
/* 表格样式 */ .table-container {
.table-container {
flex: 1;
/* 这是关键，让表格容器自动占据剩余空间 */
display: flex;
flex-direction: column;
min-height: 0;
/* 解决flex子项内容溢出问题 */
.auto-fit-header-table {
flex: 1; flex: 1;
/* 这是关键，让表格容器自动占据剩余空间 */
display: flex;
flex-direction: column;
min-height: 0;
/* 列样式 */ /* 解决flex子项内容溢出问题 */
.column-style { .auto-fit-header-table {
flex: 1;
/* 列头样式 */ /* 列样式 */
.formula-column { .column-style {
display: flex;
justify-content: center;
align-items: center;
.column { /* 列头样式 */
.formula-column {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column;
p { .column {
margin: 0; display: flex;
font-size: 12px; justify-content: center;
color: #606266; align-items: center;
flex-direction: column;
p {
margin: 0;
font-size: 12px;
color: #606266;
}
} }
}
.el-icon { .el-icon {
margin-left: 2px; margin-left: 2px;
}
} }
}
/* 单元格样式 */ /* 单元格样式 */
/* 展示模式单元格（仅展示模式生效） */ /* 展示模式单元格（仅展示模式生效） */
.show-cell-style { .show-cell-style {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
/* 自定义单元格样式（仅填充模式生效） */
.cell-style {
>div {
display: flex;
flex-direction: column;
align-items: center;
>span { /* 自定义单元格样式（仅填充模式生效） */
text-align: left; .cell-style {
text-indent: 5px; >div {
display: inline-block; display: flex;
width: 80%; flex-direction: column;
background-color: #e1e2e6; align-items: center;
border-bottom: 1px solid #ebeef5;
>span {
text-align: left;
text-indent: 5px;
display: inline-block;
width: 80%;
background-color: #e1e2e6;
border-bottom: 1px solid #ebeef5;
}
} }
}
/* 表格内下拉框 */ /* 表格内下拉框 */
.el-select { .el-select {
width: 100% !important; width: 100% !important;
padding: 10px; padding: 10px;
/* 非 disabled 状态下的背景颜色 */ /* 非 disabled 状态下的背景颜色 */
&.no-disabled ::v-deep(.el-select__wrapper) { &.no-disabled ::v-deep(.el-select__wrapper) {
border: 4px solid var(--el-background-editor-cell) !important; border: 4px solid var(--el-background-editor-cell) !important;
}
} }
}
.el-input { .el-input {
height: 32px !important; height: 32px !important;
/* box-sizing: content-box; */ /* box-sizing: content-box; */
padding: 0 10px; padding: 0 10px;
width: 100%; width: 100%;
/* 非 disabled 状态下的背景颜色 */
&.no-disabled ::v-deep(.el-input__wrapper) {
border: 4px solid var(--el-background-editor-cell) !important;
}
/* 非 disabled 状态下的背景颜色 */
&.no-disabled ::v-deep(.el-input__wrapper) {
border: 4px solid var(--el-background-editor-cell) !important;
} }
} .date-picker {
width: 100%;
padding: 10px;
.date-picker { /* 非 disabled 状态下的背景颜色 */
width: 100%; &.no-disabled ::v-deep(.el-input__wrapper) {
padding: 10px; border: 4px solid var(--el-background-editor-cell) !important;
}
/* 非 disabled 状态下的背景颜色 */ ::v-deep(.el-input) {
&.no-disabled ::v-deep(.el-input__wrapper) { width: 100%;
border: 4px solid var(--el-background-editor-cell) !important; padding: 0;
}
} }
}
::v-deep(.el-input) { /* 普通文字单元格（仅填充模式生效） */
width: 100%; .fill-span-wrap {
padding: 0; /* 超出省略号 */
} overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 10px;
} }
}
/* 普通文字单元格（仅填充模式生效） */
.fill-span-wrap {
/* 超出省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 10px;
} }
} /* 填报模式-单元格 */
&.cell-no-padding {
/* 填报模式-单元格 */
&.cell-no-padding {
/* 无上下内边距 */ /* 无上下内边距 */
::v-deep(.el-table__row) { ::v-deep(.el-table__row) {
.el-table__cell { .el-table__cell {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
.cell { .cell {
padding: 0 !important; padding: 0 !important;
}
} }
} }
} }
} }
}
/* 分页器 */ /* 分页器 */
.pagination-container { .pagination-container {
margin: 10px; margin: 10px;
}
} }
} }
</style> /* 加深表头背景颜色 */
::v-deep(.el-table__header-wrapper) {
<style lang="scss"> .el-table__header {
/* 表格弹窗 */ th {
.table-dialog-modal { background-color: #dcdfe6 !important;
padding: 0; color: #303133 !important;
font-weight: bold;
/* 关键：覆盖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 </style>
.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
浏览文件 @ 5f33bbc9
...@@ -46,6 +46,7 @@ const handleClickTabs = (tab) => { ...@@ -46,6 +46,7 @@ const handleClickTabs = (tab) => {
} }
</script> </script>
<style scoped <style scoped
lang="scss"> lang="scss">
.app-container { .app-container {
...@@ -53,6 +54,24 @@ const handleClickTabs = (tab) => { ...@@ -53,6 +54,24 @@ const handleClickTabs = (tab) => {
.container { .container {
padding: 10px; padding: 10px;
.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;
}
}
}
} }
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论