feat(inject): 实现库存数量小于等于0时红色闪烁提醒- 在 main.css 中添加了 flashOpacity 动画样式
- 在 inject.js 中实现了 rowClassName 方法,为符合条件的行添加 flash-opacity 类 - 在多个 Vue 组件中为库存数量列添加了 flash: 1 属性,以触发闪烁效果
This commit is contained in:
@@ -249,3 +249,20 @@ a, .green {
|
|||||||
.AppSubTitle .el-select {
|
.AppSubTitle .el-select {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes flashOpacity {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1; /* 完全不透明 */
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0; /* 完全透明 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 应用动画到元素 */
|
||||||
|
.flash-opacity {
|
||||||
|
.cell > span {
|
||||||
|
animation: flashOpacity 1s infinite; /* 动画名称、持续时间、重复次数 */
|
||||||
|
color: red
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -135,6 +135,10 @@ Vue.component("scrollTable", {
|
|||||||
return h('el-table', {
|
return h('el-table', {
|
||||||
props: {
|
props: {
|
||||||
headerCellClassName: 'tableHeader', cellClassName: 'tableCell', stripe: !0, height: '100%',
|
headerCellClassName: 'tableHeader', cellClassName: 'tableCell', stripe: !0, height: '100%',
|
||||||
|
rowClassName({row}) {
|
||||||
|
const item = columns.find(e => e.flash == 1)
|
||||||
|
return item?.prop && row[item.prop] <= 0 ? 'flash-opacity' : ''
|
||||||
|
},
|
||||||
...config, data: tableData,
|
...config, data: tableData,
|
||||||
}, class: 'scrollTable',
|
}, class: 'scrollTable',
|
||||||
on: {
|
on: {
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ export default {
|
|||||||
{label: "昨日销售数量", prop: "yesterdaySaleNum", width: 70},
|
{label: "昨日销售数量", prop: "yesterdaySaleNum", width: 70},
|
||||||
{label: "上周同天销售数量", prop: "lastWeekSaleNum", width: 70},
|
{label: "上周同天销售数量", prop: "lastWeekSaleNum", width: 70},
|
||||||
{label: "今日销售数量", prop: "saleNum", width: 70},
|
{label: "今日销售数量", prop: "saleNum", width: 70},
|
||||||
{label: "现在库存数量", prop: "stockNum", width: 70},
|
{label: "现在库存数量", prop: "stockNum", width: 70, flash: 1},
|
||||||
{label: "剩余时间预计销售数量", prop: "preSaleNum"},
|
{label: "剩余时间预计销售数量", prop: "preSaleNum"},
|
||||||
// {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
|
// {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ export default {
|
|||||||
columns: [
|
columns: [
|
||||||
{label: "重点单品", prop: "goodsName"},
|
{label: "重点单品", prop: "goodsName"},
|
||||||
{label: "销售数量", prop: "saleNum", width: 70},
|
{label: "销售数量", prop: "saleNum", width: 70},
|
||||||
{label: "库存数量", prop: "stockNum", width: 70},
|
{label: "库存数量", prop: "stockNum", width: 70, flash: 1},
|
||||||
{label: "销售目标", prop: "targetSaleNum", width: 70},
|
{label: "销售目标", prop: "targetSaleNum", width: 70},
|
||||||
{label: "销售达成", prop: "saleAchieveRate"},
|
{label: "销售达成", prop: "saleAchieveRate"},
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ export default {
|
|||||||
{label: "重点单品", prop: "goodsName"},
|
{label: "重点单品", prop: "goodsName"},
|
||||||
{label: "当日目标", prop: "targetNum", width: 70},
|
{label: "当日目标", prop: "targetNum", width: 70},
|
||||||
{label: "销售数量", prop: "saleNum", width: 70},
|
{label: "销售数量", prop: "saleNum", width: 70},
|
||||||
{label: "库存数量", prop: "stockNum", width: 70},
|
{label: "库存数量", prop: "stockNum", width: 70, flash: 1},
|
||||||
{label: "预计销售数量", prop: "preSaleNum", width: 70},
|
{label: "预计销售数量", prop: "preSaleNum", width: 70},
|
||||||
{label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
|
{label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ export default {
|
|||||||
{label: "昨日销售数量", prop: "yesterdaySaleNum", width: 70},
|
{label: "昨日销售数量", prop: "yesterdaySaleNum", width: 70},
|
||||||
{label: "上周同天销售数量", prop: "lastWeekSaleNum", width: 70},
|
{label: "上周同天销售数量", prop: "lastWeekSaleNum", width: 70},
|
||||||
{label: "今日销售数量", prop: "saleNum", width: 70},
|
{label: "今日销售数量", prop: "saleNum", width: 70},
|
||||||
{label: "现在库存数量", prop: "stockNum", width: 70},
|
{label: "现在库存数量", prop: "stockNum", width: 70, flash: 1},
|
||||||
{label: "剩余时间预计销售数量", prop: "preSaleNum"},
|
{label: "剩余时间预计销售数量", prop: "preSaleNum"},
|
||||||
// {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
|
// {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user