修改敞口

src/common/setup/event/index.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue';
 
-export function handleTableEvent<T>() {
+export function handleTableEvent<T>(clickCB?: Function) {
     const expandedRowKeys = ref<string[]>([]); // 表格展开行
     const selectedRow = ref<T>()
     function Rowclick(record: T, index: number) {
@@ -9,6 +9,7 @@ export function handleTableEvent<T>() {
                 selectedRow.value = record;
                 const value = expandedRowKeys.value;
                 expandedRowKeys.value = value.length ? [] : [`${index}`];
+                clickCB && clickCB()
             },
             // onDblclick: () => { // 双击
             //     console.log('onDblclick');

src/services/go/ermcp/exposure/index.ts

@@ -34,7 +34,7 @@ export function QueryActualExposureDetail(req: Ermcp3ExposureReq): Promise<Ermcp
  */
 export function QueryAutualExposurePosition(req: ErmcpExposurePostionReq): Promise<ErmcpExposurePostion[]> {
     const areaUserId = APP.get('userAccount').memberuserid; // 所属机构id
-    return commonSearch_go('/Ermcp3/QueryExposureDetail', { areaUserId, ...req }).catch((err) => {
+    return commonSearch_go('/Ermcp/QueryRealtimeExposurePosition', { areaUserId, ...req }).catch((err) => {
         throw new Error(`查询敞口 ->实时敞口 -> 期货明细: ${err.message}`);
     });
 }

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

@@ -1,184 +1,184 @@
 /**
  * 实时敞口信息返回
  */
-export interface ErmcpRealExposureModel{
-    AreaUserID	:number;//所属机构
-    BuyFutureQty	:number;//买入期货数量
-    BuyPlanQty	:number;//采购计划数量
-    BuyPricedQty	:number;//采购合同已定价数量
-    MiddleGoodsCode	:string;//套保品种代码
-    MiddleGoodsHedgeRatio	:number;//应套保比例
-    MiddleGoodsID	:number;//套保品种
-    MiddleGoodsName	:string;//套保品种名称
-    NeedHedgeExposoure	:number;//应套保敞口
-    NeedHedgeRatio	:number;//应套保敞口比例
-    OriBuyFutureQty	:number;//期初买入期货数量
-    OriBuyPlanQty	:number;//期初采购计划数量
-    OriBuyPricedQty	:number;//期初采购合同已定价数量
-    OriSellFutureQty	:number;//期初卖出期货数量
-    OriSellPlanQty	:number;//期初销售计划数量
-    OriSellPricedQty	:number;//期初销售合同已定价数量
-    SellFutureQty	:number;//卖出期货数量
-    SellPlanQty	:number;//销售计划数量
-    SellPricedQty	:number;//销售合同已定价数量
-    TotalExposure	:number;//总敞口
-    TotalFutureQty	:number;//期货数量
-    TotalHedgeRatio	:number;//敞口比例
-    TotalNeedHedgeQty	:number;//期货应套保量
-    TotalSpotQty	:number;//现货数量
-    diffFutuQty	:number;//今日变动量(期货) = (买入 - 买入期初) - (卖出 - 卖出期初)
-    diffSpotQty	:number;//今日变动量(现货) = 现货数量 - 期初现货数量
-    enumdicname	:string;//单位名称
-    oriTotalFutuQty	:number;//期初期货数量=期初买入期货数量-期初卖出期货数量
-    oriTotalSpotQty	:number;//期初现货数量=(期初销售计划数量-期初销售合同已定价数量)-(期初采购计划数量-期初采购合同已定价数量)
+export interface ErmcpRealExposureModel {
+    AreaUserID: number;//所属机构
+    BuyFutureQty: number;//买入期货数量
+    BuyPlanQty: number;//采购计划数量
+    BuyPricedQty: number;//采购合同已定价数量
+    MiddleGoodsCode: string;//套保品种代码
+    MiddleGoodsHedgeRatio: number;//应套保比例
+    MiddleGoodsID: number;//套保品种
+    MiddleGoodsName: string;//套保品种名称
+    NeedHedgeExposoure: number;//应套保敞口
+    NeedHedgeRatio: number;//应套保敞口比例
+    OriBuyFutureQty: number;//期初买入期货数量
+    OriBuyPlanQty: number;//期初采购计划数量
+    OriBuyPricedQty: number;//期初采购合同已定价数量
+    OriSellFutureQty: number;//期初卖出期货数量
+    OriSellPlanQty: number;//期初销售计划数量
+    OriSellPricedQty: number;//期初销售合同已定价数量
+    SellFutureQty: number;//卖出期货数量
+    SellPlanQty: number;//销售计划数量
+    SellPricedQty: number;//销售合同已定价数量
+    TotalExposure: number;//总敞口
+    TotalFutureQty: number;//期货数量
+    TotalHedgeRatio: number;//敞口比例
+    TotalNeedHedgeQty: number;//期货应套保量
+    TotalSpotQty: number;//现货数量
+    diffFutuQty: number;//今日变动量(期货) = (买入 - 买入期初) - (卖出 - 卖出期初)
+    diffSpotQty: number;//今日变动量(现货) = 现货数量 - 期初现货数量
+    enumdicname: string;//单位名称
+    oriTotalFutuQty: number;//期初期货数量=期初买入期货数量-期初卖出期货数量
+    oriTotalSpotQty: number;//期初现货数量=(期初销售计划数量-期初销售合同已定价数量)-(期初采购计划数量-期初采购合同已定价数量)
 }
 
 /**
  * 查询实时敞口现货明细请求
  */
-export interface Ermcp3ExposureReq{
+export interface Ermcp3ExposureReq {
     middlegoodsid: number  //    套保商品
 }
 
 /**
  * 实时敞口现货明细返回
  */
-export interface Ermcp3ExposureDetail{
-    areauserid	:number;//机构ID
-    changeQty	:number;//套保变动量
-    contracttype	:number;//现货合同类型 - 1:采购 -1:销售
-    convertfactor	:number;//标仓系数
-    convertratio	:number;//套保系数
-    createtime	:string;//时间
-    deliverygoodscode	:string;//现货品种代码
-    deliverygoodsid	:number;//现货品种id
-    deliverygoodsname	:string;//现货品种名称
-    enumdicname	:string;//现货商品单位名称
-    logtype	:number;//类型 - 1:套保计划 2:现货合同
-    middlegoodsId	:number;//套保商品id
-    middlegoodscode	:string;//套保商品代码
-    middlegoodsname	:string;//套保商品名称
-    qty	:number;//数量
-    relateNo	:string;//现货合同/套保计划编号
+export interface Ermcp3ExposureDetail {
+    areauserid: number;//机构ID
+    changeQty: number;//套保变动量
+    contracttype: number;//现货合同类型 - 1:采购 -1:销售
+    convertfactor: number;//标仓系数
+    convertratio: number;//套保系数
+    createtime: string;//时间
+    deliverygoodscode: string;//现货品种代码
+    deliverygoodsid: number;//现货品种id
+    deliverygoodsname: string;//现货品种名称
+    enumdicname: string;//现货商品单位名称
+    logtype: number;//类型 - 1:套保计划 2:现货合同
+    middlegoodsId: number;//套保商品id
+    middlegoodscode: string;//套保商品代码
+    middlegoodsname: string;//套保商品名称
+    qty: number;//数量
+    relateNo: string;//现货合同/套保计划编号
 }
 
 /**
  * 实时敞口期货明细请求
  */
-export interface ErmcpExposurePostionReq{
+export interface ErmcpExposurePostionReq {
     middleGoodsId: number //套保商品ID
 }
 
 /**
  * 实时敞口期货明细返回
  */
-export interface ErmcpExposurePostion{
-    agreeunit	:string;//合约单位
-    areauserid	:number;//所属机构id
-    convertratio	:number;//期货品种系数(折算系数)
-    curqty	:number;//当前持仓
-    diffhedgeqty	:number;//套保品种变动量=持仓变动量期货合约单位期货品种系数
-    diffqty	:number;//持仓变动量=当前持仓-昨日持仓
-    goodscode	:string;//商品代码
-    goodsid	:number;//商品id
-    goodsname	:string;//商品名称
-    middlegoodsid	:number;//套保商品id
-    ydqty	:number;//昨日持仓
+export interface ErmcpExposurePostion {
+    agreeunit: string;//合约单位
+    areauserid: number;//所属机构id
+    convertratio: number;//期货品种系数(折算系数)
+    curqty: number;//当前持仓
+    diffhedgeqty: number;//套保品种变动量=持仓变动量期货合约单位期货品种系数
+    diffqty: number;//持仓变动量=当前持仓-昨日持仓
+    goodscode: string;//商品代码
+    goodsid: number;//商品id
+    goodsname: string;//商品名称
+    middlegoodsid: number;//套保商品id
+    ydqty: number;//昨日持仓
 }
 
 
 /**
  * 敞口现货头寸返回
  */
-export interface Ermcp3AreaSpot{
-    areauserid	:number;//所属机构
-    decreaseqty	:number;//减少数量=-(销售已定价数量+采购计划数量)
-    deliverygoodscode	:string;//现货品种代码
-    deliverygoodsid	:number;//现货品种id
-    deliverygoodsname	:string;//现货品种名称
-    enumdicname	:string;//单位名称
-    goodsunitid	:number;//现货品种单位id
-    increaseqty	:number;//增加数量=销售计划数量+采购已定价数量
-    oritoalspotqty	:number;//昨日数量
-    totalspotqty	:number;//当前数量(现货头寸总量) = (销售计划数量 - 销售已定价数量) - (采购计划数量 - 采购已定价数量)
-    updatetime	:string;//更新时间
+export interface Ermcp3AreaSpot {
+    areauserid: number;//所属机构
+    decreaseqty: number;//减少数量=-(销售已定价数量+采购计划数量)
+    deliverygoodscode: string;//现货品种代码
+    deliverygoodsid: number;//现货品种id
+    deliverygoodsname: string;//现货品种名称
+    enumdicname: string;//单位名称
+    goodsunitid: number;//现货品种单位id
+    increaseqty: number;//增加数量=销售计划数量+采购已定价数量
+    oritoalspotqty: number;//昨日数量
+    totalspotqty: number;//当前数量(现货头寸总量) = (销售计划数量 - 销售已定价数量) - (采购计划数量 - 采购已定价数量)
+    updatetime: string;//更新时间
 }
 
 /**
  * 敞口现货头寸明细请求
  */
-export interface Ermcp3AreaSpotDetailReq{
+export interface Ermcp3AreaSpotDetailReq {
     deliverygoodsid: number  // 现货品种ID
 }
 
 /**
  * 敞口现货头寸明细(敞口 -> 现货头寸 ->现货明细)
  */
-export interface Ermcp3AreaSpotDetail{
-    contracttype	:number;//合同类型 1-采购 -1-销售
-    createtime	:string;//创建时间
-    deliverygoodscode	:string;//现货品种代码
-    deliverygoodsid	:number;//现货品种id
-    deliverygoodsname	:string;//现货品种名称
-    enumdicname	:string;//现货商品单位名称
-    logtype	:number;//记录类型 1-套保 2-现货合同
-    qty	:number;//数量
-    recordname	:string;//类型名称
-    relatedid	:string;//套保计划ID/现货合同ID
-    relatedno	:string;//编号
-    strtime	:string;//时间
+export interface Ermcp3AreaSpotDetail {
+    contracttype: number;//合同类型 1-采购 -1-销售
+    createtime: string;//创建时间
+    deliverygoodscode: string;//现货品种代码
+    deliverygoodsid: number;//现货品种id
+    deliverygoodsname: string;//现货品种名称
+    enumdicname: string;//现货商品单位名称
+    logtype: number;//记录类型 1-套保 2-现货合同
+    qty: number;//数量
+    recordname: string;//类型名称
+    relatedid: string;//套保计划ID/现货合同ID
+    relatedno: string;//编号
+    strtime: string;//时间
 }
 
 /**
  * 敞口 -> 期货头寸 敞口期货头寸返回
  */
-export interface ErmcpHedgePosition{
-    accountid	:number;//资金账号[外部母账户]
-    curbuyposition	:number;//期末买头寸
-    cursellposition	:number;//期末卖头寸
-    curtdbuyposition	:number;//期末今日买头寸
-    curtdsellposition	:number;//期末今日卖头寸
-    curydbuyposition	:number;//期末上日买头寸
-    curydsellposition	:number;//期末上日卖头寸
-    decreaseqty	:number;//减少数量 = (期末卖头寸 - 期初卖头寸)-1
-    fretdbuyposition	:number;//冻结今日买头寸
-    fretdsellposition	:number;//冻结今日卖头寸
-    freydbuyposition	:number;//冻结上日买头寸
-    freydsellposition	:number;//冻结上日卖头寸
-    goodscode	:string;//商品代码
-    goodsid	:number;//商品id
-    goodsname	:string;//商品名称
-    hedgeaccountcode	:string;//对冲账号
-    hedgegoodsid	:number;//对冲合约ID
-    increaseqty	:number;//增加数量 = 期末买头寸 - 期初买头寸
-    marketid	:number;//市场ID
-    relateduserid	:number;//关联用户id
-    totalcurqty	:number;//当前数量(净头寸) = 期末买头寸 - 期末卖头寸
-    totalydqty	:number;//昨日数量(净头寸) = 期初买头寸 - 期初卖头寸
-    tradedate	:string;//交易日(yyyyMMdd)
-    ydbuyposition	:number;//期初买头寸
-    ydsellposition	:number;//期初卖头寸
+export interface ErmcpHedgePosition {
+    accountid: number;//资金账号[外部母账户]
+    curbuyposition: number;//期末买头寸
+    cursellposition: number;//期末卖头寸
+    curtdbuyposition: number;//期末今日买头寸
+    curtdsellposition: number;//期末今日卖头寸
+    curydbuyposition: number;//期末上日买头寸
+    curydsellposition: number;//期末上日卖头寸
+    decreaseqty: number;//减少数量 = (期末卖头寸 - 期初卖头寸)-1
+    fretdbuyposition: number;//冻结今日买头寸
+    fretdsellposition: number;//冻结今日卖头寸
+    freydbuyposition: number;//冻结上日买头寸
+    freydsellposition: number;//冻结上日卖头寸
+    goodscode: string;//商品代码
+    goodsid: number;//商品id
+    goodsname: string;//商品名称
+    hedgeaccountcode: string;//对冲账号
+    hedgegoodsid: number;//对冲合约ID
+    increaseqty: number;//增加数量 = 期末买头寸 - 期初买头寸
+    marketid: number;//市场ID
+    relateduserid: number;//关联用户id
+    totalcurqty: number;//当前数量(净头寸) = 期末买头寸 - 期末卖头寸
+    totalydqty: number;//昨日数量(净头寸) = 期初买头寸 - 期初卖头寸
+    tradedate: string;//交易日(yyyyMMdd)
+    ydbuyposition: number;//期初买头寸
+    ydsellposition: number;//期初卖头寸
 }
 
 /**
  * 查询敞口期货头寸期货明细 请求
  */
-export interface ErmcpHedgePositionDetailReq{
+export interface ErmcpHedgePositionDetailReq {
     goodsId: number // 商品id
 }
 
 /**
  * 查询敞口期货头寸期货明细  敞口 -> 期货头寸 -> 期货明细
  */
-export interface ErmcpHedgePositionDetail{
-    buyorsell	:number;//买卖方向 number;
-//-买 1-卖
-    channelbuildtype	:number;//开平方向 1-建仓 2-平仓
-    goodscode	:string;//商品代码
-    goodsname	:string;//商品名称
-    hedgegoodsid	:number;//商品id
-    tradeqty	:number;//数量(成交数量)
-    tradetime	:string;//时间(成交时间)
+export interface ErmcpHedgePositionDetail {
+    buyorsell: number;//买卖方向 number;
+    //-买 1-卖
+    channelbuildtype: number;//开平方向 1-建仓 2-平仓
+    goodscode: string;//商品代码
+    goodsname: string;//商品名称
+    hedgegoodsid: number;//商品id
+    tradeqty: number;//数量(成交数量)
+    tradetime: string;//时间(成交时间)
 }
 
 

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

@@ -1,83 +1,133 @@
 <template>
-    <!-- 采购: 现货头寸-->
-    <div class="spot-contract-peddding">
-        采购: 现货头寸
-    </div>
+  <!-- 采购: 现货头寸-->
+  <div class="spot-contract-peddding table-height"
+       :loading="loading">
+    <filterCustomTable @search="search">
+      <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>
+    <a-drawer placement="bottom"
+              :closable="false"
+              :visible="visible"
+              :get-container="false"
+              :wrap-style="{ position: 'absolute' }"
+              @close="closeDrawer">
+      <div>
+        <a-table :columns="detailColumns"
+                 class="topTable"
+                 :pagination="false"
+                 rowKey="key"
+                 :data-source="detailTableList">
+        </a-table>
+        <ThridMenu :list="tabList"
+                   @selectMenu="selectMenu" />
+      </div>
+    </a-drawer>
+  </div>
 </template>
 
 <script lang="ts">
-    import { defineComponent, ref } from 'vue';
-    import { QueryCustomInfo } from '@/services/go/ermcp/customInfo/index';
-    import { QueryCustomInfoType } from '@/services/go/ermcp/customInfo/interface';
-    import { message } from 'ant-design-vue';
-    import { initData } from '@/common/methods';
+import { defineComponent, Ref, ref } from 'vue';
+import { initData } from '@/common/methods';
+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';
+import { TableKey } from '@/common/methods/table/interface';
 
-    // 查询客户资料列表
-    function getCustomList() {
-        // const filteredInfo = ref();
-        // const sortedInfo = ref();
-        // const columns = computed(() => {
-        //     const filtered = filteredInfo.value || {};
-        //     const sorted = sortedInfo.value || {};
-        //     return [
-        //         {
-        //             title: '序号',
-        //             dataIndex: 'index',
-        //             key: 'index',
-        //             align: 'center',
-        //             width: 50,
-        //             customRender: (param: any) => `${param.index + 1}`,
-        //         },
-        //         {
-        //             title: 'Age',
-        //             dataIndex: 'age',
-        //             key: 'age',
-        //             sorter: (a: DataItem, b: DataItem) => a.age - b.age,
-        //             sortOrder: sorted.columnKey === 'age' && sorted.order,
-        //         },
-        //         {
-        //             title: 'Address',
-        //             dataIndex: 'address',
-        //             key: 'address',
-        //             filters: [
-        //                 { text: 'London', value: 'London' },
-        //                 { text: 'New York', value: 'New York' },
-        //             ],
-        //             filteredValue: filtered.address || null,
-        //             onFilter: (value: string, record: DataItem) => record.address.includes(value),
-        //             sorter: (a: DataItem, b: DataItem) => a.address.length - b.address.length,
-        //             sortOrder: sorted.columnKey === 'address' && sorted.order,
-        //             ellipsis: true,
-        //         },
-        //     ];
-        // });
-        const customList = ref<QueryCustomInfoType[]>([]);
-        function actionQuery() {
-            QueryCustomInfo(4)
-                .then((res) => {
-                    console.log('L', res);
-                })
-                .catch((err) => message.error(err));
-        }
+// 获取表格数据
+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;
+                console.log('获取表格数据', tableList);
+            })
+            .catch((err) => {
+                message.error(err);
+                loading.value = false;
+            });
+    }
+
+    return { loading, tableList, queryList };
+}
 
-        return { customList, actionQuery };
+// 明细
+function handleDrawer(loading: Ref<boolean>, selectedRow: Ermcp3AreaSpot) {
+    const visible = ref<boolean>(true);
+    const tabList = [{ lable: '期货明细' }];
+    const detailTableList = ref<Ermcp3AreaSpotDetail[]>([]);
+    const detailColumns = ref<ColumnType[]>([]);
+    function closeDrawer() {
+        visible.value = false;
+    }
+    // 切换明细
+    function selectMenu(index: number) {
+        ActualExposureDetail();
+        const { columns, getColumns } = getColumsAndSearch('table_pcweb_exposure_spotposition', false);
+        getColumns();
+        detailColumns.value = columns.value;
     }
 
-    export default defineComponent({
-        name: 'spot-contract-peddding',
-        components: {},
-        setup() {
-            const { customList, actionQuery } = getCustomList();
-            initData(() => {
-                actionQuery();
-                // 加载数据在这里
+    // 现货明细信息
+    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;
+                console.log('现货明细信息', detailTableList);
+            })
+            .catch((err) => {
+                message.error(err);
+                loading.value = false;
             });
-            return { customList };
-        },
-    });
+    }
+    return { visible, closeDrawer, tabList, selectMenu, detailTableList, detailColumns };
+}
+
+export default defineComponent({
+    name: 'spot-contract-peddding',
+    components: {},
+    setup() {
+        const { columns, search, getColumns } = getColumsAndSearch('table_pcweb_exposure_spotposition', true);
+        const { expandedRowKeys, selectedRow, Rowclick } = handleTableEvent<Ermcp3AreaSpot>();
+        const { loading, tableList, queryList } = getExposure();
+        initData(() => {
+            queryList();
+            getColumns();
+        });
+        return { columns, search, expandedRowKeys, selectedRow, Rowclick, ...getBtnList('exposure_spot', false), loading, tableList };
+    },
+});
 </script>
 
 <style lang="less">
-    .spot-contract-peddding {
-    }</style
+.spot-contract-peddding {
+}
+</style
 >;

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

@@ -1,6 +1,7 @@
 <template>
   <!-- 实时敞口-->
-  <div class="purchase-real-time table-height">
+  <div class="purchase-real-time table-height"
+       :loading="loading">
     <filterCustomTable @search="search">
       <BtnList :btnList="commonBtn" />
     </filterCustomTable>
@@ -12,16 +13,6 @@
                :pagination="false"
                rowKey="key"
                :data-source="tableList">
-        <!-- 额外的展开行 -->
-        <!-- <template #expandedRowRender="{  }">
-          <BtnList :btnList="forDataBtn" />
-        </template> -->
-        <!-- <template #warehousetype="{ text }">
-          <span>{{ getWareHouseType(text) }}</span>
-        </template>
-        <template #warehousestatus="{ text }">
-          <span>{{ getWareHouseStatus(text) }}</span>
-        </template> -->
       </a-table>
     </contextMenu>
     <a-drawer placement="bottom"
@@ -31,7 +22,12 @@
               :wrap-style="{ position: 'absolute' }"
               @close="closeDrawer">
       <div>
-        <p>Some contents...</p>
+        <a-table :columns="detailColumns"
+                 class="topTable"
+                 :pagination="false"
+                 rowKey="key"
+                 :data-source="detailTableList">
+        </a-table>
         <ThridMenu :list="tabList"
                    @selectMenu="selectMenu" />
       </div>
@@ -40,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref } from 'vue';
+import { defineComponent, Ref, ref, unref } from 'vue';
 import { initData } from '@/common/methods';
 import filterCustomTable from '../../components/filterTable/index.vue';
 import { getBtnList } from '@/common/setup/contextMenu/index';
@@ -50,10 +46,10 @@ import { QueryActualExposure, QueryActualExposureDetail, QueryAutualExposurePosi
 import { ErmcpRealExposureModel, Ermcp3ExposureDetail, ErmcpExposurePostion } 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';
 import { TableKey } from '@/common/methods/table/interface';
+import BtnList from '@/common/components/buttonList/index.vue';
 
 // 获取表格数据
 function getExposure() {
@@ -66,7 +62,7 @@ function getExposure() {
                     return { ...e, key: String(i) };
                 });
                 loading.value = false;
-                console.log('查询列表', tableList);
+                console.log('获取表格数据', tableList);
             })
             .catch((err) => {
                 message.error(err);
@@ -76,17 +72,24 @@ function getExposure() {
 
     return { loading, tableList, queryList };
 }
+
+// 控制是否打开明细
+function handleDrawer() {
+    const visible = ref<boolean>(false);
+    function closeDrawer() {
+        visible.value = !visible.value;
+    }
+    return { visible, closeDrawer };
+}
+
 // 明细
-function handleDrawer(loading: Ref<boolean>, selectedRow: ErmcpRealExposureModel) {
-    const visible = ref<boolean>(true);
+function handleDeatil(loading: Ref<boolean>, selectedRow: ErmcpRealExposureModel) {
     const tabList = [{ lable: '现货明细' }, { lable: '期货明细' }];
     const detailTableList = ref<Ermcp3ExposureDetail[] | ErmcpExposurePostion[]>([]);
     const detailColumns = ref<ColumnType[]>([]);
-    function closeDrawer() {
-        visible.value = false;
-    }
+    // 切换明细
     function selectMenu(index: number) {
-        let tableKey: keyof TableKey = 'table_pcweb_exposure_detail';
+        let tableKey: keyof TableKey = 'table_pcweb_exposure_spotposition';
         if (index) {
             AutualExposurePosition();
         } else {
@@ -101,7 +104,7 @@ function handleDrawer(loading: Ref<boolean>, selectedRow: ErmcpRealExposureModel
     // 现货明细信息
     function ActualExposureDetail() {
         loading.value = true;
-        const param = { middlegoodsid: selectedRow.MiddleGoodsID };
+        const param = { middlegoodsid: unref(selectedRow).MiddleGoodsID };
         QueryActualExposureDetail(param)
             .then((res) => {
                 detailTableList.value = res.map((e, i) => {
@@ -118,7 +121,7 @@ function handleDrawer(loading: Ref<boolean>, selectedRow: ErmcpRealExposureModel
     // 期货头寸明细
     function AutualExposurePosition() {
         loading.value = true;
-        const param = { middleGoodsId: selectedRow.MiddleGoodsID };
+        const param = { middleGoodsId: unref(selectedRow).MiddleGoodsID };
         QueryAutualExposurePosition(param)
             .then((res) => {
                 detailTableList.value = res.map((e, i) => {
@@ -132,7 +135,7 @@ function handleDrawer(loading: Ref<boolean>, selectedRow: ErmcpRealExposureModel
                 loading.value = false;
             });
     }
-    return { visible, closeDrawer, tabList, selectMenu };
+    return { tabList, selectMenu, detailTableList, detailColumns };
 }
 
 export default defineComponent({
@@ -141,10 +144,13 @@ export default defineComponent({
         contextMenu,
         filterCustomTable,
         ThridMenu,
+        BtnList,
     },
     setup() {
+        const { visible, closeDrawer } = handleDrawer();
         const { columns, search, getColumns } = getColumsAndSearch('table_pcweb_exposure', true);
-        const { expandedRowKeys, selectedRow, Rowclick } = handleTableEvent<ErmcpRealExposureModel>();
+
+        const { expandedRowKeys, selectedRow, Rowclick } = handleTableEvent<ErmcpRealExposureModel>(closeDrawer);
         const { loading, tableList, queryList } = getExposure();
         const { commonBtn, forDataBtn } = getBtnList('exposure_realtime', false);
 
@@ -152,7 +158,7 @@ export default defineComponent({
             queryList();
             getColumns();
         });
-        return { commonBtn, forDataBtn, loading, tableList, columns, search, expandedRowKeys, selectedRow, Rowclick, ...handleDrawer(loading, (selectedRow as unknown) as ErmcpRealExposureModel) };
+        return { commonBtn, forDataBtn, loading, tableList, visible, closeDrawer, columns, search, expandedRowKeys, selectedRow, Rowclick, ...handleDeatil(loading, (selectedRow as unknown) as ErmcpRealExposureModel) };
     },
 });
 </script>
@@ -160,5 +166,6 @@ export default defineComponent({
 <style lang="less">
 .purchase-real-time {
     position: relative;
+    overflow: hidden;
 }
 </style>;