现货头寸

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

@@ -25,11 +25,8 @@
 <script lang="ts">
 import { defineComponent, watchEffect } from 'vue';
 import filterCustomTable from '../../components/filterTable/index.vue';
-import contextMenu from '@/common/components/contextMenu/index.vue';
 import { QueryActualExposure, QueryActualExposureDetail, QueryAutualExposurePosition } from '@/services/go/ermcp/exposure/index';
 import { ErmcpRealExposureModel } from '@/services/go/ermcp/exposure/interface';
-import ThridMenu from '@/common/components/thirdMenu/index.vue';
-import BtnList from '@/common/components/buttonList/index.vue';
 import Description from '@/common/components/description/index.vue';
 import { queryTableList } from '@/common/setup/table';
 import { ComposeTableDetailParam } from '@/common/setup/table/interface';
@@ -40,10 +37,7 @@ export default defineComponent({
     name: 'exposure-real-time',
     components: {
         Description,
-        contextMenu,
         filterCustomTable,
-        ThridMenu,
-        BtnList,
     },
     setup() {
         // 表格列表数据

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

@@ -2,129 +2,82 @@
   <!-- 采敞口: 现货头寸-->
   <div class="exposure-spot table-height"
        :loading="loading">
-    <filterCustomTable @search="search">
-      <BtnList :btnList="commonBtn" />
+    <filterCustomTable @search="updateColumn">
     </filterCustomTable>
-    <contextMenu :contextMenuList="forDataBtn">
-      <a-table :columns="columns"
-               class="topTable"
-               :expandedRowKeys="expandedRowKeys"
-               :customRow="Rowclick"
-               :pagination="false"
-               rowKey="key"
-               :data-source="tableList">
-      </a-table>
-    </contextMenu>
-    <a-drawer placement="bottom"
-              :closable="false"
-              :visible="visible"
-              :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"
+                 :columns="columnsDetail"
+                 :tabList="tabList"
+                 :tableList="detailTableList" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref } 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 { QuerySpotPosition, QuerySpotPositionDetail } from '@/services/go/ermcp/exposure/index';
-import { Ermcp3AreaSpot, Ermcp3AreaSpotDetail } from '@/services/go/ermcp/exposure/interface';
-import { message } from 'ant-design-vue';
-import { handleTableEvent } from '@/common/setup/event/index';
-import BtnList from '@/common/components/buttonList/index.vue';
-import ThridMenu from '@/common/components/thirdMenu/index.vue';
-import { ColumnType } from '@/common/methods/table';
-
-// 获取表格数据
-function getExposure() {
-    const loading = ref<boolean>(false);
-    const tableList = ref<Ermcp3AreaSpot[]>([]);
-    function queryList() {
-        QuerySpotPosition()
-            .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>(false);
-    function closeDrawer() {
-        visible.value = !visible.value;
-    }
-    return { visible, closeDrawer };
-}
-
-// 明细
-function handleDeatil(loading: Ref<boolean>, selectedRow: Ermcp3AreaSpot) {
-    const tabList = [{ lable: '现货明细' }];
-    const detailTableList = ref<Ermcp3AreaSpotDetail[]>([]);
-    const detailColumns = ref<ColumnType[]>([]);
-    // 切换明细
-    function selectMenu(index: number) {
-        ActualExposureDetail();
-        const { columns, getColumns } = getColumsAndSearch('table_pcweb_exposure_spotposition', false);
-        getColumns();
-        detailColumns.value = columns.value;
-    }
-    selectMenu(0);
-    // 现货头寸明细
-    function ActualExposureDetail() {
-        loading.value = true;
-        const param = { deliverygoodsid: selectedRow.deliverygoodsid };
-        QuerySpotPositionDetail(param).then((res) => {
-            detailTableList.value = res.map((e, i) => {
-                return { ...e, key: String(i) };
-            });
-            loading.value = false;
-        });
-    }
-    return { tabList, selectMenu, detailTableList, detailColumns };
-}
+import { Ermcp3AreaSpot } from '@/services/go/ermcp/exposure/interface';
+import { ComposeTableDetailParam, handleComposeTable_detail } from '@/common/setup/table/compose';
+import { queryTableList } from '@/common/setup/table';
+import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import Description from '@/common/components/description/index.vue';
 
 export default defineComponent({
     name: 'exposure-spot',
     components: {
-        contextMenu,
+        Description,
         filterCustomTable,
-        ThridMenu,
-        BtnList,
     },
     setup() {
-        const { visible, closeDrawer } = handleDrawer();
-        const { columns, search, getColumns } = getColumsAndSearch('table_pcweb_exposure_spotposition', true);
-        const { expandedRowKeys, selectedRow, Rowclick } = handleTableEvent<Ermcp3AreaSpot>(closeDrawer);
-        const { loading, tableList, queryList } = getExposure();
-        initData(() => {
-            queryList();
-            getColumns();
+        // 表格列表数据
+        const { loading, tableList, queryTable } = queryTableList<Ermcp3AreaSpot>();
+        // 获取列表数据
+        const queryTableAction = () => queryTable(QuerySpotPosition);
+        const param: ComposeTableDetailParam = {
+            queryFn: queryTableAction, // 查询表格数据
+            tableName: 'table_pcweb_exposure_spotposition', // 表头key
+            tableFilterKey: [], // 表格过滤字段
+        };
+        const {
+            visible,
+            closeDrawer, // 控制 drawer 组件是否显示
+            columns,
+            updateColumn, //  表头数据
+            columnsDetail,
+            registerColumnDetail,
+            detailTableList, // 明细表头数据
+            expandedRowKeys,
+            selectedRow,
+            Rowclick, // 表格事件
+        } = handleComposeTable_detail<Ermcp3AreaSpot>(param);
+        // 现货明细
+        const tabList = [{ lable: '现货明细' }];
+        // 现货明细信息
+        function AEDetail() {
+            // 注册表头
+            registerColumnDetail('table_pcweb_exposure_spotposition', []);
+            const deliverygoodsid = selectedRow.value?.deliverygoodsid;
+            if (deliverygoodsid) {
+                queryResultLoadingAndInfo(QuerySpotPositionDetail, loading, { deliverygoodsid }).then((res) => {
+                    detailTableList.value = res;
+                });
+            }
+        }
+        watchEffect(() => {
+            if (visible.value) {
+                AEDetail();
+            }
         });
-        return { columns, search, expandedRowKeys, selectedRow, Rowclick, visible, closeDrawer, ...getBtnList('exposure_history', false), loading, tableList, ...handleDeatil(loading, (selectedRow as unknown) as Ermcp3AreaSpot) };
+        return { loading, tableList, visible, closeDrawer, columns, updateColumn, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList };
     },
 });
 </script>