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

src/api/bi/finance.js

@@ -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',
@@ -75,4 +82,32 @@ export const getFinanceDetailAPI = (data) => {
       pageSize: data.pageSize
     }
   })
+}
+
+/**
+ * 直播间子数据列表
+ * @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

@@ -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