实时敞口

src/common/setup/table/compose.ts

@@ -0,0 +1,97 @@
+import { BtnList } from '@/common/components/btnList/interface';
+import { ContextMenuTemp } from "@/common/components/contextMenu/interface";
+import { handleContextMenu } from "@/common/components/contextMenu/setup";
+import { getTableColumns, getTableEvent, initData } from "@/common/export/table";
+import { handleModalComponent } from '@/common/setup/asyncComponent';
+import { onUnmounted, ref, Ref } from "vue";
+import { getBtnList_ } from "./button";
+import { handleTableDrawer } from "./drawer";
+import { ComposeTableDetailParam, ComposeTableParam, TableEventCB } from "./interface";
+
+
+// 表格 + 表头 + 右键 + 单击表格 + 按钮列表 通用处理逻辑
+export function handleComposeTable<T>({ queryFn, menuType, isDetail, tableName, tableFilterKey }: ComposeTableParam) {
+    // 右键逻辑
+    const { contextMenu, openContext, closeContext: closeContextAction } = handleContextMenu();
+    // 表头数据
+    const { columns, registerColumn, updateColumn } = getTableColumns();
+    // 右键回调函数
+    const eventsCB: TableEventCB = {
+        contextmenuCB: (record: T, value: ContextMenuTemp) => {
+            // 控制打开右键
+            contextMenu.value = value
+        }
+    }
+    // 表格事件
+    const { expandedRowKeys, selectedRow, Rowclick } = getTableEvent<T>(eventsCB);
+    // 表格操作按钮列表
+    const [firstBtn, secondBtn] = getBtnList_(menuType, isDetail).value;
+    // 控制异步组件
+    const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, selectedRow);
+    // 关闭右键
+    function closeContext(value: BtnList | null) {
+        // 打开对应的弹窗组件
+        if (value) openComponent(value, selectedRow.value)
+        // 关闭右键
+        closeContextAction()
+    }
+    onUnmounted(() => {
+        // 离开组件，手动关闭右键，防止出现bug
+        closeContextAction()
+    })
+    initData(() => {
+        // 获取列表数据
+        queryFn();
+        // 注册表头信息 过滤
+        registerColumn(tableName, tableFilterKey);
+    }); return {
+        contextMenu, openContext, closeContext, // 右键
+        columns, registerColumn, updateColumn,  // 表头
+        expandedRowKeys, selectedRow, Rowclick, // 表格折腾面板数据与单击、双击事件
+        componentId, closeComponent, openComponent,  // 控制异步组件
+        firstBtn, secondBtn, // 表格按钮
+    }
+}
+
+
+// 表格 + 表头 + 表格明细 + 单击表格  通用处理逻辑
+export function handleComposeTable_detail<T>({ queryFn, tableName, tableFilterKey }: ComposeTableDetailParam) {
+    // 控制 drawer 组件是否显示
+    const { visible, openDrawer, closeDrawer } = handleTableDrawer()
+    // 表头数据
+    const { columns, registerColumn, updateColumn } = getTableColumns();
+    // 明细列表数据
+    const detailTableList = ref<any[]>([])
+    // 明细表头数据
+    const { columns: columnsDetail, registerColumn: registerColumnDetail, updateColumn: updateColumnDetail } = getTableColumns();
+    // 缓存点击选中的数据
+    let cacheSelectedRow: null | Ref<T> = null
+    // 单击回调
+    const events: TableEventCB = {
+        clickCB: (value: T) => {
+            if (cacheSelectedRow) {
+                // 点击同一个
+                if (JSON.stringify(cacheSelectedRow.value) === JSON.stringify(value)) {
+                    visible.value ? closeDrawer() : openDrawer()
+                } else {
+                    openDrawer()
+                }
+            } else {
+                openDrawer()
+            }
+        },
+    };
+    // 表格事件
+    const { expandedRowKeys, selectedRow, Rowclick } = getTableEvent<T>(events);
+    cacheSelectedRow = selectedRow as Ref<T>
+    initData(() => {
+        queryFn();
+        registerColumn(tableName, tableFilterKey);
+    });
+    return {
+        visible, openDrawer, closeDrawer,   // 控制 drawer 组件是否显示
+        columns, registerColumn, updateColumn,  //  表头数据
+        columnsDetail, registerColumnDetail, updateColumnDetail, detailTableList,// 明细表头数据
+        expandedRowKeys, selectedRow, Rowclick, // 表格事件
+    }
+}

src/common/setup/table/drawer.ts

@@ -0,0 +1,12 @@
+import { ref } from "vue";
+
+export function handleTableDrawer() {
+    const visible = ref<boolean>(false);
+    function openDrawer() {
+        visible.value = true
+    }
+    function closeDrawer() {
+        visible.value = false
+    }
+    return { visible, openDrawer, closeDrawer }
+}

src/common/setup/table/event.ts

@@ -17,7 +17,7 @@ export function getTableEvent<T>(param: TableEventCB) {
     // 表格展开行
     const expandedRowKeys = ref<string[]>([]);
     // 表格选中的数据
-    const selectedRow = ref({})
+    const selectedRow = ref<T>()
     // 右键数据
     const contextMenu = ref<ContextMenuTemp>({
         position: { clientX: 0, clientY: 0 },
@@ -71,6 +71,7 @@ export interface ComposeTableParam {
     isDetail: boolean,  // 是否需要详情
 }
 
+// 表格 + 表头 + 右键 + 单击表格 + 按钮列表 通用处理逻辑
 export function handleComposeTable<T>({ queryFn, menuType, isDetail, tableName, tableFilterKey }: ComposeTableParam) {
     // 右键逻辑
     const { contextMenu, openContext, closeContext: closeContextAction } = handleContextMenu();
@@ -112,4 +113,4 @@ export function handleComposeTable<T>({ queryFn, menuType, isDetail, tableName,
         componentId, closeComponent, openComponent,  // 控制异步组件
         firstBtn, secondBtn, // 表格按钮
     }
-}
+}

src/common/setup/table/interface.ts

@@ -1,3 +1,5 @@
+import { TableKey } from "@/common/methods/table/interface";
+
 export interface TableEventCB {
     clickCB?: Function; // 单击事件回调函数
     contextmenuCB?: Function; // 右键事件回调函数
@@ -16,6 +18,20 @@ export interface BtnParam {
     second: string[],
     third: string[],
 }
+
+export interface ComposeTableParam {
+    queryFn: Function,  // 查询表格数据
+    menuType: keyof ButtonListKey,  // 操作按钮列表key
+    tableName: keyof TableKey, // 表头key
+    tableFilterKey: string[], // 表格过滤字段
+    isDetail: boolean,  // 是否需要详情
+}
+
+export interface ComposeTableDetailParam {
+    queryFn: Function,  // 查询表格数据
+    tableName: keyof TableKey, // 表头key
+    tableFilterKey: string[], // 表格过滤字段
+}
 export interface ButtonListKey {
     custom_info_normal: string; // 客户资料 正常
     custom_info_disabled: string; // 客户资料 停用

src/views/business/exposure/list/realTime/index.vue

@@ -3,150 +3,39 @@
   <div class="exposure-real-time table-height"
        :loading="loading">
     <filterCustomTable @search="updateColumn">
-      <BtnList :btnList="commonBtn" />
     </filterCustomTable>
-    <contextMenu :contextMenuList="forDataBtn">
-      <a-table :columns="columns"
-               class="topTable"
-               :expandedRowKeys="expandedRowKeys"
-               :customRow="Rowclick"
-               :pagination="false"
-               rowKey="key"
-               :data-source="tableList">
-      </a-table>
-    </contextMenu>
-    <Description v-if="visibleComponent"
-                 @close="closeComponent"
-                 :tabList="tabList" />
-    <!-- <a-drawer placement="bottom"
-              :closable="false"
-              :visible="true"
-              :get-container="false"
-              :wrap-style="{ position: 'absolute' }"
-              @close="closeDrawer">
-      <div class="bottomTable">
-        <a-table :columns="detailColumns"
-                 class="topTable"
-                 :pagination="false"
-                 rowKey="key"
-                 :data-source="detailTableList">
-        </a-table>
-        <ThridMenu :list="tabList"
-                   @selectMenu="selectMenu" />
-      </div>
-    </a-drawer> -->
+    <a-table :columns="columns"
+             class="topTable"
+             :expandedRowKeys="expandedRowKeys"
+             :customRow="Rowclick"
+             :pagination="false"
+             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 { defineComponent, Ref, ref, unref } from 'vue';
-import { initData } from '@/common/methods';
+import { defineComponent, watchEffect } from 'vue';
 import filterCustomTable from '../../components/filterTable/index.vue';
-import { getBtnList } from '@/common/setup/contextMenu/index';
 import contextMenu from '@/common/components/contextMenu/index.vue';
-import { getColumsAndSearch } from '../setup';
 import { QueryActualExposure, QueryActualExposureDetail, QueryAutualExposurePosition } from '@/services/go/ermcp/exposure/index';
-import { ErmcpRealExposureModel, Ermcp3ExposureDetail, ErmcpExposurePostion, ErmcpExposurePostionReq, Ermcp3ExposureReq } from '@/services/go/ermcp/exposure/interface';
-import { message } from 'ant-design-vue';
-import { handleTableEvent } from '@/common/setup/event/index';
+import { ErmcpRealExposureModel } from '@/services/go/ermcp/exposure/interface';
 import ThridMenu from '@/common/components/thirdMenu/index.vue';
-import { ColumnType } from '@/common/methods/table';
-import { TableKey } from '@/common/methods/table/interface';
 import BtnList from '@/common/components/buttonList/index.vue';
 import Description from '@/common/components/description/index.vue';
-import { handleControlComponentsIsShow } from '@/common/setup/control';
-import { getTableColumns, getTableEvent, queryTableList } from '@/common/setup/table';
-import { TableEventCB } from '@/common/setup/table/interface';
+import { queryTableList } from '@/common/setup/table';
+import { ComposeTableDetailParam } from '@/common/setup/table/interface';
+import { handleComposeTable_detail } from '@/common/setup/table/compose';
+import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 
-// 获取表格数据
-function getExposure() {
-    const loading = ref<boolean>(false);
-    const tableList = ref<ErmcpRealExposureModel[]>([]);
-    function queryList() {
-        QueryActualExposure()
-            .then((res) => {
-                tableList.value = res.map((e, i) => {
-                    return { ...e, key: String(i) };
-                });
-                loading.value = false;
-            })
-            .catch((err) => {
-                message.error(err);
-                loading.value = false;
-            });
-    }
-
-    return { loading, tableList, queryList };
-}
-
-// 控制是否打开明细
-function handleDrawer() {
-    const visible = ref<boolean>(true);
-    function closeDrawer() {
-        visible.value = !visible.value;
-    }
-    return { visible, closeDrawer };
-}
-
-// 明细
-function handleDeatil(loading: Ref<boolean>, selectedRow: ErmcpRealExposureModel) {
-    const tabList = [{ lable: '现货明细' }, { lable: '期货明细' }];
-    const detailTableList = ref<Ermcp3ExposureDetail[] | ErmcpExposurePostion[]>([]);
-    const detailColumns = ref<ColumnType[]>([]);
-    // 切换明细
-    function selectMenu(index: number) {
-        let tableKey: keyof TableKey = 'table_pcweb_exposure_detail';
-        if (index) {
-            AutualExposurePosition(); // 现货明细
-        } else {
-            ActualExposureDetail(); // 期货明细
-            tableKey = 'table_pcweb_exposure_futures_detail';
-        }
-        const { columns, getColumns } = getColumsAndSearch(tableKey, false);
-        getColumns();
-        detailColumns.value = columns.value;
-    }
-    selectMenu(0);
-    // 现货明细信息
-    function ActualExposureDetail() {
-        loading.value = true;
-        let param: Ermcp3ExposureReq = {
-            middlegoodsid: unref(selectedRow).MiddleGoodsID,
-        };
-        if (undefined !== unref(selectedRow).MiddleGoodsID) {
-            QueryActualExposureDetail(param)
-                .then((res) => {
-                    detailTableList.value = res.map((e, i) => {
-                        return { ...e, key: String(i) };
-                    });
-                    loading.value = false;
-                })
-                .catch((err) => {
-                    message.error(err);
-                    loading.value = false;
-                });
-        }
-    }
-    // 期货头寸明细
-    function AutualExposurePosition() {
-        loading.value = true;
-        let param: ErmcpExposurePostionReq = {
-            middlegoodsid: unref(selectedRow).MiddleGoodsID,
-        };
-        if (undefined !== unref(selectedRow).MiddleGoodsID) {
-            QueryAutualExposurePosition(param).then((res) => {
-                detailTableList.value = res.map((e, i) => {
-                    return { ...e, key: String(i) };
-                });
-                loading.value = false;
-            });
-        }
-    }
-    return { tabList, selectMenu, detailTableList, detailColumns };
-}
-interface Value extends ErmcpRealExposureModel {
-    key: string;
-}
 export default defineComponent({
     name: 'exposure-real-time',
     components: {
@@ -157,31 +46,62 @@ export default defineComponent({
         BtnList,
     },
     setup() {
-        // 控制是否加载组件
-        const { visibleComponent, openComponent, closeComponent } = handleControlComponentsIsShow();
-        const { visible, closeDrawer } = handleDrawer();
-        // 表头数据
-        const { columns, registerColumn, updateColumn } = getTableColumns();
-        // const { columns, search, getColumns } = getColumsAndSearch('table_pcweb_exposure', true);
-
-        // const { expandedRowKeys, selectedRow, Rowclick } = handleTableEvent<ErmcpRealExposureModel>(closeDrawer);
-        const events: TableEventCB = {
-            clickCB: (value: Value) => {
-                openComponent();
-            },
-        };
-        const { expandedRowKeys, selectedRow, Rowclick } = getTableEvent<ErmcpRealExposureModel>(events);
         // 表格列表数据
         const { loading, tableList, queryTable } = queryTableList<ErmcpRealExposureModel>();
-        // const { loading, tableList, queryList } = getExposure();
-        const { commonBtn, forDataBtn } = getBtnList('exposure_realtime', false);
+        // 获取列表数据
+        const queryTableAction = () => queryTable(QueryActualExposure);
+        const param: ComposeTableDetailParam = {
+            queryFn: queryTableAction, // 查询表格数据
+            tableName: 'table_pcweb_exposure', // 表头key
+            tableFilterKey: [], // 表格过滤字段
+        };
+        const {
+            visible,
+            closeDrawer, // 控制 drawer 组件是否显示
+            columns,
+            updateColumn, //  表头数据
+            columnsDetail,
+            registerColumnDetail,
+            detailTableList, // 明细表头数据
+            expandedRowKeys,
+            selectedRow,
+            Rowclick, // 表格事件
+        } = handleComposeTable_detail<ErmcpRealExposureModel>(param);
+        const tabList = [{ lable: '现货明细' }, { lable: '期货明细' }];
 
-        initData(() => {
-            queryTable(QueryActualExposure);
-            registerColumn('table_pcweb_exposure', []);
-            // getColumns();
+        // 现货明细信息
+        function AEDetail() {
+            // 注册表头
+            registerColumnDetail('table_pcweb_exposure_detail', []);
+            const middlegoodsid = selectedRow.value?.MiddleGoodsID;
+            if (middlegoodsid) {
+                queryResultLoadingAndInfo(QueryActualExposureDetail, loading, { middlegoodsid }).then((res) => {
+                    detailTableList.value = res;
+                });
+            }
+        }
+        // 期货头寸明细
+        function AEPostion() {
+            // 注册表头
+            registerColumnDetail('table_pcweb_exposure_futures_detail', []);
+            const middlegoodsid = selectedRow.value?.MiddleGoodsID;
+            if (middlegoodsid) {
+                queryResultLoadingAndInfo(QueryAutualExposurePosition, loading, { middlegoodsid }).then((res) => {
+                    detailTableList.value = res;
+                });
+            }
+        }
+        // 切换明细
+        function changeTab(index: number) {
+            index ? AEPostion() : AEDetail();
+        }
+        watchEffect(() => {
+            if (visible.value) {
+                AEDetail();
+            }
         });
-        return { commonBtn, forDataBtn, loading, tableList, visible, closeDrawer, columns, updateColumn, closeComponent, expandedRowKeys, visibleComponent, selectedRow, Rowclick, ...handleDeatil(loading, (selectedRow as unknown) as ErmcpRealExposureModel) };
+
+        return { loading, tableList, visible, closeDrawer, columns, updateColumn, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab };
     },
 });
 </script>