Skip to content

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

feat(finance): 新增直播间分类展开行内嵌表格的功能

同上
上级 19b17451
显示空白字符变更
内嵌 并排
正在显示 包含 158 行增加 和 38 行删除
src/api/bi/finance.js
浏览文件 @ 9af68ad0
......@@ -51,11 +51,18 @@ export const getFinanceListAPI = (data) => {
series: data.seriesPrdMap.map(o => o[0]),
goodsName: data.seriesPrdMap.map(o => o[1]),
startDate: parseTime(data.date[0], `{y}-{m}-{d}`),
endDate: parseTime(data.date[1], `{y}-{m}-{d}`)
endDate: parseTime(data.date[1], `{y}-{m}-{d}`),
pageNum: data.pageNum,
pageSize: data.pageSize
}
})
}
/**
* 获取订单详情
* @param {*} data
* @returns
*/
export const getFinanceDetailAPI = (data) => {
return request({
url: '/bi/finance/cost/detail/list',
......@@ -76,3 +83,31 @@ export const getFinanceDetailAPI = (data) => {
}
})
}
/**
* 直播间子数据列表
* @param {*} data
* @returns
*/
export const getFinanceSubListAPI = (data) => {
return request({
url: '/bi/finance/cost/subList',
method: 'POST',
data: {
subType: 0, // 直播间的
zbjQdType: data.zbjQdType,
flavor: data.flavorErp,
specName: data.specNameErp,
zbjQdTypeAll: data.zbjQdTypeAll,
flavorErpAll: data.flavorErpAll,
specNameErpAll: data.specNameErpAll,
series: data.seriesPrdMap.map(o => o[0]),
goodsName: data.seriesPrdMap.map(o => o[1]),
startDate: parseTime(data.date[0], `{y}-{m}-{d}`),
endDate: parseTime(data.date[1], `{y}-{m}-{d}`),
pageNum: data.pageNum,
pageSize: data.pageSize
}
})
}
\ No newline at end of file
src/views/bi/finance/index.vue
浏览文件 @ 9af68ad0
......@@ -114,20 +114,53 @@
<!-- 数据 -->
<el-table :data="tableList"
border
row-key="zbjQdType"
lazy
:load="load"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
@expand-change="expandChangeFn"
@mousedown="handleMouseDown">
<el-table-column type="expand">
<template #default="props">
<div class="expand-div">
<el-table :data="expandTableList"
show-overflow-tooltip
class="expand-table">
<el-table-column v-for="item in columns"
:key="item.prop"
:label="item.label"
:prop="item.prop"
:min-width="item.width"
:formatter="formatter"
:sortable="item.sortable">
</el-table-column>
<el-table-column label="操作"
width="120">
<template v-slot="scope">
<el-button type="primary"
link
@click="rowClick(scope.row)">订单详情</el-button>
</template>
</el-table-column>
</el-table>
<pagination :total="expandTotal"
v-model:page="expandQuery.pageNum"
v-model:limit="expandQuery.pageSize"
@pagination="expandChangeFn"></pagination>
</div>
</template>
</el-table-column>
<template v-for="item in columns">
<el-table-column v-if="item.visible"
:key="item.prop"
:label="item.label"
:prop="item.prop"
:min-width="item.width"
:formatter="formatter">
:formatter="formatter"
:sortable="item.sortable">
</el-table-column>
</template>
<el-table-column label="操作" width="120">
<el-table-column label="操作"
width="120">
<template v-slot="scope">
<el-button type="primary"
link
......@@ -135,6 +168,10 @@
</template>
</el-table-column>
</el-table>
<pagination :total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"></pagination>
<!-- 订单详情 -->
<el-dialog v-model="detailVisible"
title="订单详情"
......@@ -174,7 +211,7 @@
</template>
<script setup>
import { getBrandListAPI, getTasteListAPI, getSpecListAPI, getSeriesListAPI, getProductListAPI, getFinanceListAPI, getFinanceDetailAPI } from '@/api'
import { getBrandListAPI, getTasteListAPI, getSpecListAPI, getSeriesListAPI, getProductListAPI, getFinanceListAPI, getFinanceDetailAPI, getFinanceSubListAPI } from '@/api'
import { useDatePickerOptions } from '@/hooks'
import { formatNumberWithUnit, parseTime } from '@/utils'
......@@ -188,15 +225,21 @@ const data = reactive({
flavorErp: [], // 口味
specNameErp: [], // 规格
date: lastDate, // 日期
seriesPrdMap: [] // 系列商品
seriesPrdMap: [], // 系列商品
pageNum: 1,
pageSize: 10
},
detailQueryParams: { // 详情查询
pageNum: 1,
pageSize: 10
},
expandQuery: { // 展开查询
pageNum: 1,
pageSize: 10
}
})
const { queryParams, detailQueryParams } = toRefs(data)
const { queryParams, detailQueryParams, expandQuery } = toRefs(data)
const reset = () => {
queryParams.value = {
......@@ -204,7 +247,9 @@ const reset = () => {
flavorErp: [], // 口味
specNameErp: [], // 规格
date: lastDate, // 日期
seriesPrdMap: [] // 系列商品
seriesPrdMap: [], // 系列商品
pageNum: 1,
pageSize: 10
}
getList()
}
......@@ -292,88 +337,101 @@ const columns = ref([
prop: 'zbjQdType',
visible: true,
width: 140,
check: true // 根据查询条件有无，判断当前列实/隐
check: true, // 根据查询条件有无，判断当前列实/隐
sortable: false
},
{
label: '口味',
prop: 'flavorErp',
visible: true,
width: 120,
check: true
check: true,
sortable: false
},
{
label: '规格',
prop: 'specNameErp',
visible: true,
width: 140,
check: true
check: true,
sortable: false
},
{
label: '系列',
prop: 'series',
visible: true,
width: 140,
check: true
check: true,
sortable: false
},
{
label: '商品',
prop: 'goodsName',
visible: true,
width: 140,
check: true
check: true,
sortable: false
},
{
label: '分销商 id',
prop: 'fenxiaoId',
visible: true,
width: 100,
check: true
check: true,
sortable: false
},
{
label: '分销商名称',
prop: 'fenxiaoName',
visible: true,
width: 200,
check: true
check: true,
sortable: false
},
{
label: '分摊后总价',
prop: 'shareAmountSum',
visible: true,
width: 120,
check: false
check: false,
sortable: true
},
{
label: '实际成本',
prop: 'actualCostSum',
visible: true,
width: 120,
check: false
check: false,
sortable: true
},
{
label: '实际成本毛利',
prop: 'actualCostGrossProfitSum',
visible: true,
width: 120,
check: false
width: 160,
check: false,
sortable: true
},
{
label: '标准成本',
prop: 'standardCostSum',
visible: true,
width: 120,
check: false
check: false,
sortable: true
},
{
label: '标准成本毛利',
prop: 'standardCostGrossProfitSum',
visible: true,
width: 120,
check: false
width: 160,
check: false,
sortable: true
}
])
const tableList = ref([
])
const total = ref(0)
const getList = async () => {
// 直播间分类全选时，单独增加字段给后台
queryParams.value.zbjQdTypeAll = (queryParams.value.zbjQdType.length === brandList.value.length)
......@@ -383,10 +441,8 @@ const getList = async () => {
queryParams.value.specNameErpAll = (queryParams.value.specNameErp.length === specList.value.length)
const res = await getFinanceListAPI(queryParams.value)
tableList.value = res.data.list.map(o => {
o.hasChildren = true
return o
})
total.value = res.data.total
tableList.value = res.data.list
}
getList()
......@@ -398,6 +454,27 @@ const formatter = (row, column, value) => {
}
}
// 展开行
const expandTableList = ref([])
const expandTotal = ref(0)
let nowExpandRow = ref(null)
const expandChangeFn = async (row) => {
if (row) nowExpandRow = row
const res = await getFinanceSubListAPI({
...nowExpandRow,
...queryParams.value,
...expandQuery.value
})
expandTableList.value = res.data.list
expandTotal.value = res.data.total
}
const handleMouseDown = (event) => {
if (event.button === 1) { // 1 表示鼠标中键
event.preventDefault(); // 阻止默认的滚动行为
}
}
// 观察查询表单选择字段，则显示
// watch(queryParams, (val) => {
// // 日期无需决定列显示与否
......@@ -438,14 +515,7 @@ const formatter = (row, column, value) => {
// })
// 展开行
const load = (options) => {
// 请求某个展开行下属的数据
console.log(options)
// const { page, limit } = options
// queryParams.value.pageNum = page
// queryParams.value.pageSize = limit
// getList()
}
// 详情数据
const detailList = ref([])
......@@ -605,7 +675,8 @@ const rowClick = (row) => {
zbjQdType: row.zbjQdType && [row.zbjQdType], // 直播间
flavorErp: row.flavorErp && [row.flavorErp], // 口味
specNameErp: row.specNameErp && [row.specNameErp], // 规格
seriesPrdMap: row.seriesId && [{ value: row.seriesId, label: row.seriesName }], // TODO：行里没有系列字段等会看下
// seriesPrdMap: row.seriesId && [{ value: row.seriesId, label: row.seriesName }], // TODO：行里没有系列字段等会看下,现在格式应该是 [[系列id],[商品id]]
seriesPrdMap: [],
date: queryParams.value.date, // 日期
pageNum: 1,
pageSize: 10
......@@ -633,6 +704,7 @@ const detailFormatter = (row, column, value) => {
const changeShowOver = () => {
showOverFlowToolTip.value = !showOverFlowToolTip.value
}
</script>
<style scoped
......@@ -670,4 +742,15 @@ const changeShowOver = () => {
}
}
}
/* 展开行表格 */
.expand-div {
background-color: rgb(240, 240, 240);
padding: 20px !important;
}
.el-scrollbar__bar {
height: 0;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论