现货明细

src/services/go/ermcp/report/interface.ts

@@ -76,7 +76,7 @@ export interface Ermcp3ExpourseReport {
  * 查询现货报表
  */
 export interface AreaSpotplReportReq {
-    userid: number,  //       用户ID
+    userid?: number,  //       用户ID
     querytype: number, //     查询类型 1-报表 2-报表明细
     cycletime: string,//      周期时间 日(YYYYMMDD) 月(YYYYMM) 季(YYYYQ) 年(YYYY) 周(YYYYMMDD周内任意一天) 全(0)【原值】
     cycletype: number,//      周期类型 - 0:日 1:月 2:季 3:年 4:周 5:全报表【原值】

src/views/report/spot-report/list/spot_report/index.vue

@@ -1,70 +1,120 @@
 <template>
   <!-- 现货报表 -->
-  <div class="spot-report"
+  <div class="table-detail-container table-height"
        :loading="loading">
-    <Filter @update="update"></Filter>
-    <contextMenu :contextMenuList="forDataBtn">
-      <a-table :columns="columns"
-               class="topOrderTable"
-               :pagination="false"
-               :expandedRowKeys="expandedRowKeys"
-               :customRow="Rowclick"
-               rowKey="key"
-               :data-source="tableList"
-               :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
-      </a-table>
-    </contextMenu>
+    <Filter @update="search"></Filter>
+    <a-table :columns="columns"
+             class="topOrderTable"
+             :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
+             :pagination="false"
+             :expandedRowKeys="expandedRowKeys"
+             :customRow="Rowclick"
+             rowKey="key"
+             :data-source="tableList">
+    </a-table>
+    <!-- 明细 -->
+    <Description v-if="visible"
+                 @close="closeDrawer"
+                 @changeTab="changeTab"
+                 :columns="columnsDetail"
+                 :tabList="tabList"
+                 :tableList="detailTableList" />
   </div>
 </template>
 
 <script lang="ts">
 import Filter from '../../components/filterTable/index.vue';
-import { defineComponent, initData, getTableColumns, getTableEvent, getBtnList, contextMenu, BtnList } from '@/common/export/table';
-import { queryTableList } from '@/views/report/setup';
+import { defineComponent, queryTableList } from '@/common/export/table';
 import { handleInitTypeAndTime } from '@/views/report/setup';
 import { qryAreaSpotplReport } from '@/services/go/ermcp/report';
-import { Ermcp3AreaSpotPLReport } from '@/services/go/ermcp/report/interface';
+import { AreaSpotplReportReq, Ermcp3AreaSpotPLReport } from '@/services/go/ermcp/report/interface';
 import { TypeAndTime } from '@/views/report/interface';
+import { ComposeTableDetailParam, handleComposeTable_detail } from '@/common/setup/table/compose';
+import Description from '@/common/components/description/index.vue';
+import { watchEffect } from 'vue';
+import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { TabList } from '@/common/setup/table/interface';
 
 export default defineComponent({
     name: 'spot-report',
     components: {
         Filter,
-        contextMenu,
-        BtnList,
+        Description,
     },
     setup() {
-        // 表头数据
-        const { columns, registerColumn, updateColumn } = getTableColumns();
-        // 表格事件
-        const { expandedRowKeys, selectedRow, Rowclick, btnClick } = getTableEvent<any>({});
-        // // 表格操作按钮列表
-        // const { commonBtn, forDataBtn } = getBtnList('warehouse_info_normal', true);
+        let cycletime = '';
         // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<Ermcp3AreaSpotPLReport>(qryAreaSpotplReport);
-        initData(() => {
+        const { loading, tableList, queryTable } = queryTableList<Ermcp3AreaSpotPLReport>();
+        // 获取列表数据
+        const queryTableAction = () => {
             const { getInitTime, getInitType } = handleInitTypeAndTime();
+            cycletime = getInitTime();
+            const param: AreaSpotplReportReq = {
+                cycletype: getInitType(),
+                cycletime,
+                querytype: 1,
+            };
             // 获取列表数据
-            queryTable({ cycletype: getInitType(), cycletime: getInitTime() });
-            // 注册表头信息 过滤
-            registerColumn('table_pcweb_spot_report', []);
-        });
-        function update(value: TypeAndTime) {
-            queryTable(value);
-        }
-
-        return {
+            queryTable(qryAreaSpotplReport, param);
+        };
+        const param: ComposeTableDetailParam = {
+            queryFn: queryTableAction, // 查询表格数据
+            tableName: 'table_pcweb_spot_report', // 表头key
+            tableFilterKey: [], // 表格过滤字段
+        };
+        const {
+            visible,
+            closeDrawer, // 控制 drawer 组件是否显示
             columns,
-
+            updateColumn, //  表头数据
+            columnsDetail,
+            registerColumnDetail,
+            detailTableList, // 明细表头数据
             expandedRowKeys,
             selectedRow,
-            Rowclick,
-            loading,
-            tableList,
-            queryTable,
-            btnClick,
-            update,
-        };
+            Rowclick, // 表格事件
+            tabList,
+        } = handleComposeTable_detail<Ermcp3AreaSpotPLReport>(param);
+
+        // 切换明细
+        function changeTab(index: number, current: TabList) {
+            const { code, lable } = current;
+            const data = selectedRow.value as Ermcp3AreaSpotPLReport;
+            const { cycletype, currencyid, deliverygoodsid } = data;
+            const param: AreaSpotplReportReq = {
+                querytype: 2,
+                cycletype,
+                cycletime,
+                deliverygoodsid,
+                currencyid,
+            };
+            if (code === 'spot_report_spot_detail') {
+                // 现货明细
+                // 注册表头
+                registerColumnDetail('table_pcweb_spot_report_details', []);
+            } else {
+                console.error(`${lable}没有配置对应的code: ${code},`);
+                return;
+            }
+            // 查询明细数据
+            queryResultLoadingAndInfo(qryAreaSpotplReport, loading, param).then((res) => {
+                detailTableList.value = res;
+            });
+        }
+        watchEffect(() => {
+            if (visible.value) {
+                if (tabList.value.length) {
+                    changeTab(0, tabList.value[0]);
+                }
+            }
+        });
+        function search(value: TypeAndTime) {
+            cycletime = value.cycletime;
+            const obj = Object.assign(value, { querytype: 1 });
+            queryTable(qryAreaSpotplReport, obj);
+        }
+
+        return { loading, tableList, visible, closeDrawer, columns, updateColumn, search, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab };
     },
 });
 </script>