diff --git a/package.json b/package.json index 6aa84fa..7b2ffe7 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "preview": "vite preview --port 4173" }, "dependencies": { + "@jiaminghi/data-view": "^2.10.0", "axios": "^1.7.2", "element-ui": "^2.15.14", "vue": "^2.7.7", diff --git a/src/App.vue b/src/App.vue index 6826bbd..b627e8a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,7 +2,7 @@
- +
@@ -15,6 +15,10 @@ html, body, #app { overflow: hidden; } +#app > .flex { + height: 100%; +} + .components { background: #07193D; } diff --git a/src/assets/main.css b/src/assets/main.css index ed2c393..b9077d5 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -58,3 +58,55 @@ a, .green { margin-right: 8px; } +.dv-scroll-board { + overflow: hidden; +} + +.dv-scroll-board .header { + align-items: center; + padding: 6px 0; +} + +.dv-scroll-board .header-item, .tableHead .item { + height: initial !important; + line-height: 17px !important; + font-weight: bold; +} + +.dv-scroll-board .ceil { + padding: 6px 10px !important; +} + +.dv-scroll-board .row-item { + overflow: hidden; +} + +.dv-scroll-board .ceil, .dv-scroll-board .header-item { + text-wrap: unset !important; + word-break: break-all; + font-size: 12px; + line-height: 17px +} + +.summary { + height: 30px; + align-items: center; + color: #66FFFF; + background-image: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%); +} + +.tableHead { + height: 30px; + align-items: center; + background-color: rgba(13, 48, 99, 0.6); +} + +.summary .item, .tableHead .item { + font-size: 12px; + font-weight: bold; + padding: 0 10px; + align-items: center; + box-sizing: border-box; + line-height: 17px; + flex-shrink: 0; +} diff --git a/src/main.js b/src/main.js index e58b043..91b5951 100644 --- a/src/main.js +++ b/src/main.js @@ -5,10 +5,10 @@ import './assets/main.css' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import inject from './utils/inject' - +import dataV from '@jiaminghi/data-view' Vue.use(ElementUI); - +Vue.use(dataV) inject.then(() => { new Vue({ diff --git a/src/utils/inject.js b/src/utils/inject.js index a7443c2..484ce02 100644 --- a/src/utils/inject.js +++ b/src/utils/inject.js @@ -55,6 +55,7 @@ window.$waitFor = (target, t = 500) => new Promise(resolve => { resolve(target) } }) +window.evenRowBGC = (color = "#09265B") => `transparent;background-image: linear-gradient(-45deg, ${color} 0, ${color} 10%, transparent 10%, transparent 50%,${color} 50%, ${color} 60%, transparent 60%, transparent);background-size: 10px 10px;` Vue.prototype.$marketBoard = Vue.observable({ search: {"groupCodeList": ["20011061"], "currentDate": "20240701", "compareDate": "20240630", "hourNum": "18"} diff --git a/src/views/AppGroupMonitorTable.vue b/src/views/AppGroupMonitorTable.vue index ee04f05..42fc1fb 100644 --- a/src/views/AppGroupMonitorTable.vue +++ b/src/views/AppGroupMonitorTable.vue @@ -6,22 +6,48 @@ export default { return { tableData: [], columns: [ - {label: "课区", prop: "groupName",width:50,align:'center'}, - {label: "课长", prop: "supervisorName",width:50,align:'center'}, - {label: "销售额", prop: "saleAmt",width:60}, - {label: "外卖销售额", prop: "deliverySaleAmt",width:60}, - {label: "有效订单数", prop: "validOrderNum",width:60}, - {label: "客单价", prop: "customerUnitPrice",width:58}, - {label: "蛋糕销售额", prop: "cakeSaleAmt",width:60}, - {label: "西点销售额", prop: "westSaleAmt",width:60}, - {label: "现烤销售额", prop: "bakeSaleAmt",width:60}, - {label: "现烤损货比", prop: "lossAmtRate",width:60}, - {label: "环比(目标完成比)",prop: "targetRate"}, - ] + {label: "课区", prop: "groupName", width: 50, align: 'center'}, + {label: "课长", prop: "supervisorName", width: 60, align: 'center'}, + {label: "销售额", prop: "saleAmt", width: 60, align: 'right'}, + {label: "外卖销售额", prop: "deliverySaleAmt", width: 60, align: 'right'}, + {label: "有效订单数", prop: "validOrderNum", width: 60, align: 'right'}, + {label: "客单价", prop: "customerUnitPrice", width: 58, align: 'right'}, + {label: "蛋糕销售额", prop: "cakeSaleAmt", width: 60, align: 'right'}, + {label: "西点销售额", prop: "westSaleAmt", width: 60, align: 'right'}, + {label: "现烤销售额", prop: "bakeSaleAmt", width: 60, align: 'right'}, + {label: "现烤损货比", prop: "lossAmtRate", width: 60, align: 'right'}, + {label: "环比(目标完成比)", prop: "targetRate", align: 'right'}, + ], + summary: {} } }, computed: { - search: v => v.$marketBoard.search + search: v => v.$marketBoard.search, + tableConfig: v => { + return { + headerBGC: 'rgba(13, 48, 99, 0.6)', + oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent", + header: v.columns.map(e => e.label), + columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"), + align: v.columns.map(e => e.align || "left"), + data: v.tableData.map(e => v.columns.map(column => e[column.prop])), + } + }, + summaryRow: v => v.columns.map((column, i) => { + const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v) + const style = {textAlign: column.align} + if (column.width > 0) { + style.width = `${column.width}px` + } else { + style.flex = 1 + style.minWidth = 0 + } + return { + style, + value: isNumber(v.summary[column.prop]) ? v.summary[column.prop] : + i == 0 ? v.summary.groupName : "" + } + }) }, methods: { getTableData() { @@ -30,14 +56,15 @@ export default { ...this.search, limit: 999 })).then(res => { if (res?.data) { + this.summary = res.data.total this.tableData = res.data?.page?.records || [] } }) } }, - watch:{ + watch: { search: { - immediate:true,deep:true,handler(){ + immediate: true, deep: true, handler() { this.getTableData() } } @@ -47,9 +74,10 @@ export default { @@ -59,64 +87,7 @@ export default { box-sizing: border-box; } -.AppGroupMonitorTable .tableHeader { - background: rgba(13, 48, 99, 0.6) !important; - color: #fff; - border-color: transparent !important; -} - -.AppGroupMonitorTable .el-table tr { - background-color: transparent !important; -} - -.AppGroupMonitorTable .el-table { - background: transparent; - border-color: transparent; -} - -.AppGroupMonitorTable .el-table .el-table__footer-wrapper tr { - background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%); -} - -.AppGroupMonitorTable .el-table .el-table__footer-wrapper .is-leaf { - color: #66FFFF; - background: transparent; - border-color: transparent; -} - -.AppGroupMonitorTable .el-table:before { - background: transparent; -} - -.AppGroupMonitorTable .tableCell { - color: #fff; - border-color: transparent !important; -} - -.AppGroupMonitorTable .el-table tr.el-table__row--striped { - --odd-bg: #09265B; - background-color: #081F48; - background-image: linear-gradient( - -45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%, - var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent); - background-size: 10px 10px; -} - -.AppGroupMonitorTable .el-table tr.el-table__row--striped .tableCell { - background-color: transparent !important; -} - -.AppGroupMonitorTable .el-table tr:hover > .tableCell { - background-color: rgba(255, 255, 255, .1) !important; -} - -.AppGroupMonitorTable .subTitle { - line-height: 20px; - width: fit-content; - margin: 24px auto 12px; - background-image: url("http://10.0.97.209/img/kengee/kengee5.png"); - background-repeat: no-repeat; - background-size: 100% 2px; - background-position: center bottom; +.AppGroupMonitorTable .dv-scroll-board { + height: calc(100% - 30px) !important; } diff --git a/src/views/AppHourCount.vue b/src/views/AppHourCount.vue index 28a2483..0e28f28 100644 --- a/src/views/AppHourCount.vue +++ b/src/views/AppHourCount.vue @@ -11,26 +11,59 @@ export default { computed: { search: v => v.$marketBoard.search, columns: v => { + return [ + {label: '品类', prop: "categoryName", width: 100}, + {label: "总销售额", prop: "compareSaleAmt", align: 'right'}, + {label: "时段销售额", prop: "compareHourTotalAmt", align: 'right'}, + {label: "时段销售额", prop: "currentHourTotalAmt", align: 'right'}, + {label: "销售增长率", prop: "saleGrowthRate", align: 'right'}, + ] + }, + tableConfig: v => { + return { + headerBGC: 'rgba(13, 48, 99, 0.6)', + // headerBGC: '#003B51', + oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent", + header: v.columns.map(e => e.label), + columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"), + align: v.columns.map(e => e.align || "left"), + data: v.tableData.map(e => v.columns.map(column => e[column.prop])), + } + }, + summaryRow: v => v.columns.map((column, i) => { + const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v) + const style = {textAlign: column.align} + if (column.width > 0) { + style.width = `${column.width}px` + } else { + style.flex = 1 + style.minWidth = 0 + } + return { + style, + value: isNumber(v.summary[column.prop]) ? v.summary[column.prop] : + i == 0 ? v.summary.categoryName : "" + } + }), + specialRow: v => { let {currentDate, compareDate} = v.search - const {compareSaleAmt = 0, compareHourTotalAmt = 0, currentHourTotalAmt = 0, saleGrowthRate = 0} = v.summary const {dayjs} = window currentDate = currentDate ? dayjs(currentDate).format("YYYY-MM-DD") : "" compareDate = compareDate ? dayjs(compareDate).format("YYYY-MM-DD") : "" return [ - {label: "日期", width: 100, children: [{label: '总计', children: [{label: '品类', prop: "categoryName"}]}]}, - { - label: compareDate, width: 137, align: 'center', children: [ - {label: `${compareSaleAmt}`, align: 'right', children: [{label: "总销售额", prop: "compareSaleAmt", align: 'right'}]}, - {label: `${compareHourTotalAmt}`, align: 'right', children: [{label: "时段销售额", prop: "compareHourTotalAmt", align: 'right'}]}, - ] - }, - { - label: currentDate, width: 137, align: 'center', children: [ - {label: `${currentHourTotalAmt}`, align: 'right', children: [{label: "时段销售额", prop: "currentHourTotalAmt", align: 'right'}]}, - {label: `${saleGrowthRate}`, align: 'right', children: [{label: "销售增长率", prop: "saleGrowthRate", align: 'right'}]}, - ] + {value: "日期", width: 100}, + {value: compareDate, align: 'center',}, + {value: currentDate, align: 'center',}, + ].map(column => { + const style = {textAlign: column.align} + if (column.width > 0) { + style.width = `${column.width}px` + } else { + style.flex = 1 + style.minWidth = 0 } - ] + return {style, value: column.value} + }) } }, methods: { @@ -45,11 +78,6 @@ export default { } }) }, - getHeaderClass({rowIndex}) { - if (rowIndex === 1) { - return "summaryHeader" - } - } }, watch: { search: { @@ -63,9 +91,13 @@ export default { @@ -75,68 +107,7 @@ export default { box-sizing: border-box; } -.AppHourCount .tableHeader { - background: rgba(13, 48, 99, 0.6) !important; - color: #fff; - border-color: transparent !important; -} - -.AppHourCount .el-table tr { - background-color: transparent !important; -} - -.AppHourCount .el-table { - background: transparent; - border-color: transparent; -} - -.AppHourCount .el-table .el-table__footer-wrapper tr, .AppHourCount .el-table .summaryHeader { - background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%); -} - -.AppHourCount .summaryHeader .tableHeader { - background: transparent !important; -} - -.AppHourCount .el-table .summaryHeader .cell { - color: #66FFFF; -} - -.AppHourCount .el-table .el-table__footer-wrapper .is-leaf { - color: #66FFFF; - background: transparent; - border-color: transparent; -} - -.AppHourCount .tableCell { - color: #fff; - border-color: transparent !important; -} - -.AppHourCount .el-table tr.el-table__row--striped { - --odd-bg: #09265B; - background-color: #081F48; - background-image: linear-gradient( - -45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%, - var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent); - background-size: 10px 10px; -} - -.AppHourCount .el-table tr.el-table__row--striped .tableCell { - background-color: transparent !important; -} - -.AppHourCount .el-table tr:hover > .tableCell { - background-color: rgba(255, 255, 255, .1) !important; -} - -.AppHourCount .subTitle { - line-height: 20px; - width: fit-content; - margin: 24px auto 12px; - background-image: url("http://10.0.97.209/img/kengee/kengee5.png"); - background-repeat: no-repeat; - background-size: 100% 2px; - background-position: center bottom; +.AppHourCount .dv-scroll-board { + height: calc(100% - 60px); } diff --git a/src/views/AppHourSale.vue b/src/views/AppHourSale.vue index ca45791..d17a949 100644 --- a/src/views/AppHourSale.vue +++ b/src/views/AppHourSale.vue @@ -4,32 +4,67 @@ export default { label: "市场看板-全门店时段销售", data() { return { + summary: {}, tableData: [] } }, computed: { search: v => v.$marketBoard.search, - columns: v => { + columns: () => { + return [ + {label: "时段", width: 100, prop: "hour"}, + {label: "销售额", prop: "compareSaleAmt", align: 'center'}, + {label: "有效订单数", prop: "compareValidOrderNum", align: 'center'}, + {label: "销售额", prop: "currentSaleAmt", align: 'center'}, + {label: "有效订单数", prop: "currentValidOrderNum", align: 'center'}, + {label: "销售增长率", width: 80, align: 'center', prop: "saleGrowthRate"}, + ] + }, + tableConfig: v => { + return { + headerBGC: 'rgba(13, 48, 99, 0.6)', + oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent", + header: v.columns.map(e => e.label), rowNum: 16, + columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"), + align: v.columns.map(e => e.align || "left"), + data: v.tableData.map(e => v.columns.map(column => e[column.prop])), + } + }, + summaryRow: v => v.columns.map((column, i) => { + const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v) + const style = {textAlign: column.align} + if (column.width > 0) { + style.width = `${column.width}px` + } else { + style.flex = 1 + style.minWidth = 0 + } + return { + style, + value: isNumber(v.summary[column.prop]) ? v.summary[column.prop] : + i == 0 ? v.summary.hour : "" + } + }), + specialRow: v => { let {currentDate, compareDate} = v.search const {dayjs} = window currentDate = currentDate ? dayjs(currentDate).format("YYYY-MM-DD") : "" compareDate = compareDate ? dayjs(compareDate).format("YYYY-MM-DD") : "" return [ - {label: "日期", width: 100, children: [{label: '时段', prop: "hour"}]}, - { - label: compareDate, width: 137, align: 'center', children: [ - {label: "销售额", prop: "compareSaleAmt", align: 'center'}, - {label: "有效订单数", prop: "compareValidOrderNum", align: 'center'}, - ] - }, - { - label: currentDate, width: 137, align: 'center', children: [ - {label: "销售额", prop: "currentSaleAmt", align: 'center'}, - {label: "有效订单数", prop: "currentValidOrderNum", align: 'center'}, - ] - }, - {label: "销售增长率", width: 70, align: 'center', prop: "saleGrowthRate"}, - ] + {value: "日期", width: 100}, + {value: compareDate, align: 'center'}, + {value: currentDate, align: 'center'}, + {width: 80}, + ].map(column => { + const style = {textAlign: column.align} + if (column.width > 0) { + style.width = `${column.width}px` + } else { + style.flex = 1 + style.minWidth = 0 + } + return {style, value: column.value} + }) } }, methods: { @@ -39,7 +74,8 @@ export default { ...this.search, limit: 999 })).then(res => { if (res?.data) { - this.tableData = res.data?.page?.records?.map(e => ({...e, hour: `${`${e.hour-1}`.padStart(2, '0')}:00-${e.hour.padStart(2, '0')}:00`})) || [] + this.summary = res.data.total + this.tableData = res.data?.page?.records?.map(e => ({...e, hour: `${`${e.hour - 1}`.padStart(2, '0')}:00-${e.hour.padStart(2, '0')}:00`})) || [] } }) } @@ -56,9 +92,13 @@ export default { @@ -67,65 +107,7 @@ export default { color: #fff; box-sizing: border-box; } - -.AppHourSale .tableHeader { - background: rgba(13, 48, 99, 0.6) !important; - color: #fff; - border-color: transparent !important; -} - -.AppHourSale .el-table tr { - background-color: transparent !important; -} - -.AppHourSale .el-table { - background: transparent; - border-color: transparent; -} - -.AppHourSale .el-table .el-table__footer-wrapper tr { - background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%); -} - -.AppHourSale .el-table .el-table__footer-wrapper .is-leaf { - color: #66FFFF; - background: transparent; - border-color: transparent; -} - -.AppHourSale .el-table:before { - background: transparent; -} - -.AppHourSale .tableCell { - color: #fff; - border-color: transparent !important; -} - -.AppHourSale .el-table tr.el-table__row--striped { - --odd-bg: #09265B; - background-color: #081F48; - background-image: linear-gradient( - -45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%, - var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent); - background-size: 10px 10px; -} - -.AppHourSale .el-table tr.el-table__row--striped .tableCell { - background-color: transparent !important; -} - -.AppHourSale .el-table tr:hover > .tableCell { - background-color: rgba(255, 255, 255, .1) !important; -} - -.AppHourSale .subTitle { - line-height: 20px; - width: fit-content; - margin: 24px auto 12px; - background-image: url("http://10.0.97.209/img/kengee/kengee5.png"); - background-repeat: no-repeat; - background-size: 100% 2px; - background-position: center bottom; +.AppHourSale .dv-scroll-board { + height: calc(100% - 60px); } diff --git a/src/views/AppKeyGoods.vue b/src/views/AppKeyGoods.vue index 8ec607b..a0a51cf 100644 --- a/src/views/AppKeyGoods.vue +++ b/src/views/AppKeyGoods.vue @@ -7,21 +7,32 @@ export default { tableData: [], columns: [ {label: "重点单品", prop: "goodsCategoryName"}, - {label: "销售额", prop: "saleNum", width: "70px"}, - {label: "库存数量", prop: "stockNum", width: "70px"}, - {label: "销售目标", prop: "targetSaleNum", width: "70px"}, + {label: "销售额", prop: "saleNum", width: 70}, + {label: "库存数量", prop: "stockNum", width: 70}, + {label: "销售目标", prop: "targetSaleNum", width:70}, {label: "销售达成", prop: "saleAchieveRate"}, ] } }, computed: { - search: v => v.$marketBoard.search + search: v => v.$marketBoard.search, + tableConfig: v => { + return { + headerBGC: 'rgba(13, 48, 99, 0.6)', + // headerBGC: '#003B51', + oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent", + header: v.columns.map(e => e.label), + columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"), + align: v.columns.map(e => e.align || "left"), + data: v.tableData.map(e => v.columns.map(column => e[column.prop])), + } + }, }, methods: { getTableData() { const {$http, $waitFor} = window $waitFor($http).then(() => $http.post("/data-boot/la/screen/marketBoard/marketKeyGoods", { - ...this.search, limit: 999 + // ...this.search, limit: 999 })).then(res => { if (res?.data) { this.tableData = res.data?.records || [] @@ -41,9 +52,7 @@ export default { @@ -52,65 +61,4 @@ export default { color: #fff; box-sizing: border-box; } - -.AppKeyGoods .tableHeader { - background: rgba(13, 48, 99, 0.6) !important; - color: #fff; - border-color: transparent !important; -} - -.AppKeyGoods .el-table tr { - background-color: transparent !important; -} - -.AppKeyGoods .el-table { - background: transparent; - border-color: transparent; -} - -.AppKeyGoods .el-table .el-table__footer-wrapper tr { - background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%); -} - -.AppKeyGoods .el-table .el-table__footer-wrapper .is-leaf { - color: #66FFFF; - background: transparent; - border-color: transparent; -} - -.AppKeyGoods .el-table:before { - background: transparent; -} - -.AppKeyGoods .tableCell { - color: #fff; - border-color: transparent !important; -} - -.AppKeyGoods .el-table tr.el-table__row--striped { - --odd-bg: #09265B; - background-color: #081F48; - background-image: linear-gradient( - -45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%, - var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent); - background-size: 10px 10px; -} - -.AppKeyGoods .el-table tr.el-table__row--striped .tableCell { - background-color: transparent !important; -} - -.AppKeyGoods .el-table tr:hover > .tableCell { - background-color: rgba(255, 255, 255, .1) !important; -} - -.AppKeyGoods .subTitle { - line-height: 20px; - width: fit-content; - margin: 24px auto 12px; - background-image: url("http://10.0.97.209/img/kengee/kengee5.png"); - background-repeat: no-repeat; - background-size: 100% 2px; - background-position: center bottom; -} diff --git a/src/views/AppMarketBoardFilter.vue b/src/views/AppMarketBoardFilter.vue index ae970b7..8a3fd39 100644 --- a/src/views/AppMarketBoardFilter.vue +++ b/src/views/AppMarketBoardFilter.vue @@ -22,7 +22,7 @@ export default { this.getOptions().then(() => { const {dayjs} = window setTimeout(() => { - const compareDate = dayjs().subtract(1, "day").format("YYYYMMDD"), + const compareDate = dayjs().subtract(7, "day").format("YYYYMMDD"), currentDate = dayjs().format("YYYYMMDD"), hourNum = new Date().getHours(), groupCodeList = this.options?.[0].value diff --git a/src/views/AppStoreMonitor.vue b/src/views/AppStoreMonitor.vue index 13a68b3..9bcf135 100644 --- a/src/views/AppStoreMonitor.vue +++ b/src/views/AppStoreMonitor.vue @@ -15,12 +15,40 @@ export default { {label: "门店现烤领用额", prop: "bakeLyAmt"}, {label: "门店现烤惜食", prop: "bakeXsSaleAmt"}, ], - filter: "" + filter: "", + summary: {} } }, computed: { search: v => v.$marketBoard.search, - list: v => v.tableData.filter(e => !v.filter || e.supervisorName == v.filter) || [] + list: v => v.tableData.filter(e => !v.filter || e.supervisorName == v.filter) || [], + options: v => [...new Set(v.tableData.map(e => e.supervisorName))], + tableConfig: v => { + return { + headerBGC: 'rgba(13, 48, 99, 0.6)', + // headerBGC: '#003B51', + oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent", + header: v.columns.map(e => e.label), + columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"), + align: v.columns.map(e => e.align || "left"), + data: v.list.map(e => v.columns.map(column => e[column.prop])), + } + }, + summaryRow: v => v.columns.map((column, i) => { + const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v) + const style = {textAlign: column.align} + if (column.width > 0) { + style.width = `${column.width}px` + } else { + style.flex = 1 + style.minWidth = 0 + } + return { + style, + value: isNumber(v.summary[column.prop]) ? v.summary[column.prop] : + i == 0 ? v.summary.groupName : "" + } + }) }, methods: { getTableData() { @@ -29,6 +57,7 @@ export default { ...this.search, limit: 999 })).then(res => { if (res?.data) { + this.summary = res.data.total this.tableData = res.data?.page?.records || [] } }) @@ -49,70 +78,25 @@ export default {
- +
- - - + +
+
+