update

src/common/components/description/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- 明细 公共组件 -->
+  <!-- 明细 公共组件------------------------------待确认后期废除 -->
   <a-drawer placement="bottom" :closable="false" :visible="show" :get-container="false" :wrap-style="{ position: 'absolute' }" @close="close">
     <div class="bottomTable">
       <slot></slot>

src/common/components/tableDetail/index.less

@@ -0,0 +1,24 @@
+.mtp-table-detail {
+    flex      : none !important;
+    height    : 35% !important;
+    transition: height 300ms;
+
+    &:not(.is-open) {
+        height: 28px !important;
+
+        .conditionIcon {
+            transform: rotate(180deg);
+        }
+    }
+
+    .conditionIcon {
+        display        : inline-flex;
+        justify-content: center;
+        align-items    : center;
+        height         : initial;
+        font-size      : 16px;
+        color          : @m-grey1;
+        box-sizing     : content-box;
+        padding        : 0 10px;
+    }
+}

src/common/components/tableDetail/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <!-- 表格明细 -->
+  <mtp-table-scroll :class="['mtp-table-detail', isShow ? 'is-open' : 'is-close']">
+    <template #default="{ scroll }">
+      <a-table :columns="columns" class="srcollYTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="dataSource" :scroll="scroll">
+        <template v-for="item in columns" v-slot:[item.dataIndex]="{ text, record }" :key="item.key">
+          <slot :name="item.dataIndex" :text="text" :record="record">
+            {{text}}
+          </slot>
+        </template>
+      </a-table>
+    </template>
+    <template #footer>
+      <ThridMenu :list="tabs" @selectMenu="changeTab">
+        <div class="conditionIcon icon iconfont icon-shouqi" @click="isShow = !isShow"></div>
+      </ThridMenu>
+    </template>
+  </mtp-table-scroll>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue';
+import ThridMenu from '@/common/components/thirdMenu/index.vue';
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
+import { ColumnType } from '@/common/methods/table';
+import { BtnListType } from '@/common/components/btnList/interface';
+
+export default defineComponent({
+  emits: ['update:visible', 'change'],
+  components: {
+    ThridMenu,
+    MtpTableScroll,
+  },
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => ([])
+    },
+    columns: {
+      type: Array as PropType<ColumnType[]>,
+      default: () => ([])
+    },
+    tabs: {
+      type: Array as PropType<BtnListType[]>,
+      default: () => ([])
+    },
+    visible: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props, { emit }) {
+    // 控制表格显示/隐藏
+    const isShow = computed({
+      get() {
+        return props.visible;
+      },
+      set(val) {
+        emit('update:visible', val);
+      }
+    })
+
+    // 切换标签
+    const changeTab = (index: number, tab: BtnListType) => {
+      emit('update:visible', true);
+      emit('change', index, tab);
+    }
+
+    return {
+      isShow,
+      changeTab,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/common/components/tableScroll/index.less

@@ -5,6 +5,10 @@
     flex-direction: column;
     height        : 100%;
 
+    &:not(:first-child) {
+        margin-top: 2px;
+    }
+
     &__container {
         flex      : 1;
         overflow-y: auto;

src/common/components/thirdMenu/index.vue

@@ -54,6 +54,9 @@ export default defineComponent({
     border-bottom: none;
 }
 .thirdMenu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     width: 100%;
     padding-top: 2px;
     background-color: @m-black5;

src/common/methods/request/resultInfo.ts

@@ -96,7 +96,6 @@ export async function queryResultLoadingAndInfo(fn: Function, loading: Ref<boole
                     }
                 })
             }
-            console.log('查询数据成功：', result)
             loading.value = false;
             resolve(result as any[]);
         }).catch((err: string) => {

src/layout/components/bottom.vue

@@ -109,11 +109,14 @@ export default defineComponent({
 }
 .layout-bottom-hidden {
     height: 36px;
+    .conditionIcon {
+        transform: rotate(180deg);
+    }
 }
 .layout-bottom {
     display: flex;
     width: 100%;
-    transition: height 0.5s;
+    transition: height 300ms;
     overflow: hidden;
     .capital-info-container {
         border-right: 1px solid @m-black2;
@@ -126,7 +129,7 @@ export default defineComponent({
         position: relative;
         overflow: hidden;
         .conditionIcon {
-            display: flex;
+            display: inline-flex;
             justify-content: center;
             align-items: center;
             height: initial;

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

@@ -22,36 +22,33 @@
     </template>
   </mtp-table-scroll>
   <!-- 明细 -->
-  <Description v-if="visible" @close="closeDrawer" @changeTab="changeTab" :tabList="tabList">
-    <a-table :columns="columnsDetail" class="topTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="detailTableList" :scroll="{ x: '100%', y: '175px' }">
-      <!-- 买卖方向 -->
-      <template #buyorsell="{ record }">
-        <span>{{ getBuyOrSellName(record.buyorsell) }}</span>
-      </template>
-      <!-- 开屏方向 -->
-      <template #channelbuildtype="{ record }">
-        <span>{{ getChannelBuildName(record.channelbuildtype) }}</span>
-      </template>
-    </a-table>
-  </Description>
+  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab">
+    <!-- 买卖方向 -->
+    <template #buyorsell="{ record }">
+      <span>{{ getBuyOrSellName(record.buyorsell) }}</span>
+    </template>
+    <!-- 开屏方向 -->
+    <template #channelbuildtype="{ record }">
+      <span>{{ getChannelBuildName(record.channelbuildtype) }}</span>
+    </template>
+  </mtp-table-detail>
 </template>
 
 <script lang="ts">
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
-import { defineComponent, watchEffect } from 'vue';
+import { defineComponent, watch, ref } from 'vue';
 import filterCustomTable from '../../components/filterTable/index.vue';
 import { QueryExposureHedgePositionDetail, QueryExposureHedgePosition } from '@/services/go/ermcp/exposure/index';
 import { ErmcpHedgePosition } from '@/services/go/ermcp/exposure/interface';
 import { queryTableList } from '@/common/setup/table';
 import { ComposeTableDetailParam } from '@/common/setup/table/interface';
 import { handleComposeTable_detail } from '@/common/setup/table/compose';
-import { TabList } from '@/common/components/description/interface';
 import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
-import Description from '@/common/components/description/index.vue';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { getBuyOrSellName, getChannelBuildName } from '@/common/constants/enumsName';
 import { getTableButton } from '@/common/setup/table/button';
 import { columns, columnsDetail } from './setup';
+import MtpTableDetail from '@/common/components/tableDetail/index.vue';
 import moment from 'moment';
 
 export default defineComponent({
@@ -59,13 +56,19 @@ export default defineComponent({
   components: {
     MtpTableScroll,
     filterCustomTable,
-    Description,
+    MtpTableDetail,
   },
   setup() {
     // 表格列表数据
     const { loading, tableList, queryTable } = queryTableList<ErmcpHedgePosition>();
+    // 控制明细显示/隐藏
+    const visible = ref(true);
     // 获取列表数据
-    const queryTableAction = () => queryTable(QueryExposureHedgePosition);
+    const queryTableAction = () => queryTable(QueryExposureHedgePosition).then((res) => {
+      if (res.length) {
+        selectedRow.value = res[0];
+      }
+    });
     const param: ComposeTableDetailParam = {
       queryFn: queryTableAction, // 查询表格数据
       tableName: 'table_pcweb_exposure_futuresposition', // 表头key
@@ -73,8 +76,6 @@ export default defineComponent({
       menuType: EnumRouterName.exposure_futures, // 当前tab页对应的code
     };
     const {
-      visible,
-      closeDrawer, // 控制 drawer 组件是否显示
       updateColumn, //  表头数据
       registerColumnDetail,
       detailTableList, // 明细表头数据
@@ -85,10 +86,13 @@ export default defineComponent({
 
     // 底部明细标签
     const tabList = getTableButton(['position_futures_details']);
+    // 当前选中的标签
+    const tabIndex = ref(0);
 
     // 切换明细
-    function changeTab(index: number, current: TabList) {
-      const { code, lable } = current;
+    function changeTab(index: number) {
+      tabIndex.value = index;
+      const { code, lable } = tabList[index];
       if (code === 'position_futures_details') {
         // 现货明细
         // 注册表头
@@ -105,22 +109,14 @@ export default defineComponent({
         });
       }
     }
-    watchEffect(() => {
-      if (visible.value) {
-        if (tabList.length) {
-          changeTab(0, tabList[0]);
-        }
+    watch(selectedRow, () => {
+      detailTableList.value = [];
+      if (tabList.length) {
+        visible.value = true;
+        changeTab(tabIndex.value);
       }
-    });
-    return { loading, tableList, visible, closeDrawer, columns, changeTab, updateColumn, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, getBuyOrSellName, getChannelBuildName };
+    })
+    return { loading, tableList, visible, columns, changeTab, updateColumn, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, getBuyOrSellName, getChannelBuildName };
   },
 });
-</script>
-
-<style lang="less">
-.exposure-futures {
-    position: relative;
-    overflow: hidden;
-}
-</style
->;
+</script>

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

@@ -26,56 +26,53 @@
     </template>
   </mtp-table-scroll>
   <!-- 明细 -->
-  <Description v-if="visible" @close="closeDrawer" @changeTab="changeTab" :tabList="tabList">
-    <a-table :columns="columnsDetail" class="topTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="detailTableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
-      <!-- 套保品种/代码 -->
-      <template #middlegoodsname="{ record }" v-if="!isPingAnOem()">
-        <span>{{ record.middlegoodsname + '/' + record.middlegoodscode }}</span>
-      </template>
-      <template #convertfactor="{record}">
-        <span>{{record.convertratio}}</span>
-      </template>
-      <template #goodsname="{ record }" v-if="!isPingAnOem()">
-        <span>{{ record.goodsname + '/' + record.goodscode }}</span>
-      </template>
-      <template v-if="isPingAnOem()" #index="{ index }">
-        <span>{{ index + 1 }}</span>
-      </template>
-      <!-- 类型 -->
-      <template #contracttype="{ record }">
-        <span>{{ getPlanContractType(record.contracttype) }}</span>
-      </template>
-    </a-table>
-  </Description>
+  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab">
+    <!-- 套保品种/代码 -->
+    <template #middlegoodsname="{ record }" v-if="!isPingAnOem()">
+      <span>{{ record.middlegoodsname + '/' + record.middlegoodscode }}</span>
+    </template>
+    <template #convertfactor="{record}">
+      <span>{{record.convertratio}}</span>
+    </template>
+    <template #goodsname="{ record }" v-if="!isPingAnOem()">
+      <span>{{ record.goodsname + '/' + record.goodscode }}</span>
+    </template>
+    <template v-if="isPingAnOem()" #index="{ index }">
+      <span>{{ index + 1 }}</span>
+    </template>
+    <!-- 类型 -->
+    <template #contracttype="{ record }">
+      <span>{{ getPlanContractType(record.contracttype) }}</span>
+    </template>
+  </mtp-table-detail>
 </template>
 
 <script lang="ts">
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
-import { defineComponent, onUnmounted, ref, watchEffect } from 'vue';
+import { defineComponent, onUnmounted, ref, watch } from 'vue';
 import filterCustomTable from '../../components/filterTable/index.vue';
 import { QueryActualExposure, QueryActualExposureDetail, QueryAutualExposurePosition } from '@/services/go/ermcp/exposure/index';
 import { ErmcpRealExposureModel } from '@/services/go/ermcp/exposure/interface';
-import Description from '@/common/components/description/index.vue';
 import { queryTableList } from '@/common/setup/table';
 import { ComposeTableDetailParam } from '@/common/setup/table/interface';
-import { TabList } from '@/common/components/description/interface';
 import { handleComposeTable_detail } from '@/common/setup/table/compose';
 import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
-import { formatValue, initData } from '@/common/methods';
+import { initData } from '@/common/methods';
 import { formatNumber } from '@/common/methods/format';
-import { getBizTypeName, getContractTypeName, getLogType } from '@/common/constants/enumsName';
+import { getBizTypeName, getLogType } from '@/common/constants/enumsName';
 import { getPlanContractType } from '@/views/business/plan/setup';
 import timerUtil from '@/utils/timer/timerUtil';
 import { isPingAnOem } from '@/common/config/projectName';
 import { pingan_realTime_columns } from './setup';
 import { getTableButton } from '@/common/setup/table/button';
+import MtpTableDetail from '@/common/components/tableDetail/index.vue';
 
 export default defineComponent({
   name: EnumRouterName.exposure_realtime,
   components: {
     MtpTableScroll,
-    Description,
+    MtpTableDetail,
     filterCustomTable,
   },
   setup() {
@@ -89,8 +86,14 @@ export default defineComponent({
     const isStart = ref<boolean>(false);
     // 表格列表数据
     const { loading, tableList, queryTable } = queryTableList<ErmcpRealExposureModel>(true, 2);
+    // 控制明细显示/隐藏
+    const visible = ref(true);
     // 获取列表数据
-    const queryTableAction = () => queryTable(QueryActualExposure);
+    const queryTableAction = () => queryTable(QueryActualExposure).then((res) => {
+      if (res.length) {
+        selectedRow.value = res[0];
+      }
+    });
     const param: ComposeTableDetailParam = {
       queryFn: queryTableAction, // 查询表格数据
       // tableName: 'table_pcweb_exposure', // 表头key
@@ -119,7 +122,7 @@ export default defineComponent({
         );
       }
     }
-    watchEffect(() => {
+    watch(num, () => {
       if (num.value === 0) {
         timerUtil.clearInterval('countdown');
         num.value = 0;
@@ -149,8 +152,6 @@ export default defineComponent({
       }
     }
     const {
-      visible,
-      closeDrawer, // 控制 drawer 组件是否显示
       columns,
       updateColumn, //  表头数据
       columnsDetail,
@@ -163,6 +164,8 @@ export default defineComponent({
 
     // 底部明细标签
     const tabList = getTableButton(['exposure_realtime_spot_details', 'exposure_realtime_futures_details', 'exposure_realtime_params_details']);
+    // 当前选中的标签
+    const tabIndex = ref(0);
 
     const { listColumns, spotColumns } = pingan_realTime_columns();
     initData(() => {
@@ -172,9 +175,10 @@ export default defineComponent({
     });
 
     // 切换明细
-    function changeTab(index: number, current: TabList) {
+    function changeTab(index: number) {
+      tabIndex.value = index;
       detailTableList.value = [];
-      const { code, lable } = current;
+      const { code, lable } = tabList[index];
       let fn = null;
       if (code === 'exposure_realtime_spot_details') {
         // 现货明细信息
@@ -204,15 +208,15 @@ export default defineComponent({
         return;
       }
     }
-    watchEffect(() => {
-      if (visible.value) {
-        if (tabList.length) {
-          changeTab(0, tabList[0]);
-        }
+    watch(selectedRow, () => {
+      detailTableList.value = [];
+      if (tabList.length) {
+        visible.value = true;
+        changeTab(tabIndex.value);
       }
-    });
+    })
 
-    return { loading, tableList, visible, closeDrawer, columns, updateColumn, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab, formatNumber, getBizTypeName, getPlanContractType, getLogType, diffTimes, timer, timerChange, isStart, setTimerAction, isPingAnOem, num };
+    return { loading, tableList, visible, columns, updateColumn, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab, formatNumber, getBizTypeName, getPlanContractType, getLogType, diffTimes, timer, timerChange, isStart, setTimerAction, isPingAnOem, num };
   },
 });
 </script>

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

@@ -9,43 +9,47 @@
     </template>
   </mtp-table-scroll>
   <!-- 明细 -->
-  <Description v-if="visible" @close="closeDrawer" @changeTab="changeTab" :tabList="tabList">
-    <a-table :columns="columnsDetail" class="topTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="detailTableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"> </a-table>
+  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab">
     <!-- 类型 -->
     <template #logtype="{ record }">
       <span>{{ getLogType(record.logtype) }}</span>
     </template>
-  </Description>
+  </mtp-table-detail>
 </template>
 
 <script lang="ts">
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
-import { defineComponent, watchEffect } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 import filterCustomTable from '../../components/filterTable/index.vue';
 import { QuerySpotPosition, QuerySpotPositionDetail } from '@/services/go/ermcp/exposure/index';
 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';
-import { TabList } from '@/common/components/description/interface';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { getLogType } from '@/common/constants/enumsName';
 import { getTableButton } from '@/common/setup/table/button';
 import { columns, columnsDetail } from './setup';
+import MtpTableDetail from '@/common/components/tableDetail/index.vue';
 
 export default defineComponent({
   name: EnumRouterName.exposure_spot,
   components: {
     MtpTableScroll,
-    Description,
+    MtpTableDetail,
     filterCustomTable,
   },
   setup() {
     // 表格列表数据
     const { loading, tableList, queryTable } = queryTableList<Ermcp3AreaSpot>(true, 2);
+    // 控制明细显示/隐藏
+    const visible = ref(true);
     // 获取列表数据
-    const queryTableAction = () => queryTable(QuerySpotPosition);
+    const queryTableAction = () => queryTable(QuerySpotPosition).then((res) => {
+      if (res.length) {
+        selectedRow.value = res[0];
+      }
+    });
     const param: ComposeTableDetailParam = {
       queryFn: queryTableAction, // 查询表格数据
       tableName: 'table_pcweb_exposure_spotposition', // 表头key
@@ -53,8 +57,6 @@ export default defineComponent({
       menuType: EnumRouterName.exposure_spot, // 当前tab页对应的code
     };
     const {
-      visible,
-      closeDrawer, // 控制 drawer 组件是否显示
       updateColumn, //  表头数据
       registerColumnDetail,
       detailTableList, // 明细表头数据
@@ -65,10 +67,13 @@ export default defineComponent({
 
     // 底部明细标签
     const tabList = getTableButton();
+    // 当前选中的标签
+    const tabIndex = ref(0);
 
     // 切换明细
-    function changeTab(index: number, current: TabList) {
-      const { code, lable } = current;
+    function changeTab(index: number) {
+      tabIndex.value = index;
+      const { code, lable } = tabList[index];
       if (code === 'position_spot_details') {
         // 现货明细
         // 注册表头
@@ -84,18 +89,17 @@ export default defineComponent({
         });
       }
     }
-    watchEffect(() => {
-      if (visible.value) {
-        if (tabList.length) {
-          changeTab(0, tabList[0]);
-        }
+    watch(selectedRow, () => {
+      detailTableList.value = [];
+      if (tabList.length) {
+        visible.value = true;
+        changeTab(tabIndex.value);
       }
-    });
+    })
     return {
       loading,
       tableList,
       visible,
-      closeDrawer,
       changeTab,
       updateColumn,
       columnsDetail,
@@ -109,23 +113,4 @@ export default defineComponent({
     };
   },
 });
-</script>
-
-<style lang="less">
-.exposure-spot {
-    position: relative;
-    overflow: hidden;
-    .bottomTable {
-        width: 100%;
-        .flex;
-        flex-direction: column;
-        .topTable {
-            height: calc(100% - 46px);
-            .ant-table {
-                background-color: transparent;
-            }
-        }
-    }
-}
-</style
->;
+</script>

src/views/order/futures_information/components/futures_information_entrust/columns.tsx

@@ -44,12 +44,14 @@ export function getColumns() {
         },
         {
             title: '委托价',
-            key: 'orderprice'
+            key: 'orderprice',
+            customRender: ({ text }: { text: number }) => text.toFixed(2)
         },
         {
             title: '冻结保证金',
             key: 'openfreezemargin',
             width: 120,
+            customRender: ({ text }: { text: number }) => text.toFixed(2)
         },
         {
             title: '订单状态',

src/views/order/futures_information/components/futures_information_success/columns.tsx

@@ -32,13 +32,14 @@ export function getColumns() {
         },
         {
             title: '成交价格',
-            key: 'tradeprice'
+            key: 'tradeprice',
+            customRender: ({ text }: { text: number }) => text.toFixed(2)
         },
         {
             title: '手续费',
             key: 'closecharge',
             customRender: ({ record }: { record: QueryErmcpTradeDetailsRsp }) => {
-                return record.channelbuildtype === BuildType.open ? record.opencharge : record.closecharge
+                return record.channelbuildtype === BuildType.open ? record.opencharge.toFixed(2) : record.closecharge.toFixed(2)
             }
         },
         {

src/views/report/exposure-report/list/exposure_report/index.vue

@@ -1,28 +1,25 @@
 <template>
+  <Filter @update="search" @filter="updateColumn"></Filter>
   <!-- 敞口报表 -->
   <mtp-table-scroll>
-    <template #header>
-      <Filter @update="search" @filter="updateColumn"></Filter>
-    </template>
     <template #default="{ scroll }">
       <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList"> </a-table>
     </template>
   </mtp-table-scroll>
   <!-- 明细 -->
-  <Description v-if="visible" @close="closeDrawer" @changeTab="changeTab" :tabList="tabList">
-    <a-table :columns="columnsDetail" class="topTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="detailTableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
-      <!-- 合同类型 -->
-      <template #contracttype="{ text }">
-        <a>{{ getContractTypeName(text) }}</a>
-      </template>
-      <template #biztype="{ text }">
-        <a>{{ getBizTypeName(text) }}</a>
-      </template>
-      <template #buyorsell="{ text }">
-        <a>{{ getBuyOrSellName(text) }}</a>
-      </template>
-    </a-table>
-  </Description>
+  <!-- 明细 -->
+  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab">
+    <!-- 合同类型 -->
+    <template #contracttype="{ text }">
+      <a>{{ getContractTypeName(text) }}</a>
+    </template>
+    <template #biztype="{ text }">
+      <a>{{ getBizTypeName(text) }}</a>
+    </template>
+    <template #buyorsell="{ text }">
+      <a>{{ getBuyOrSellName(text) }}</a>
+    </template>
+  </mtp-table-detail>
 </template>
 
 <script lang="ts">
@@ -34,25 +31,27 @@ import { handleInitTypeAndTime } from '@/views/report/setup';
 import { AreaExpourseReportReq, Ermcp3ExpourseReport, QryAreaExpourseHedgeplanDetailReq } from '@/services/go/ermcp/report/interface';
 import { qryAreaExpourseContractDetail, qryAreaExpourseFutuDetail, qryAreaExpourseHedgeplanDetail, qryAreaExpourseParamChLogDetail, qryAreaExpourseReport } from '@/services/go/ermcp/report';
 import { ComposeTableDetailParam, handleComposeTable_detail } from '@/common/setup/table/compose';
-import Description from '@/common/components/description/index.vue';
-import { ref, watchEffect } from 'vue';
+import { ref, watch } from 'vue';
 import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { TabList } from '@/common/components/description/interface';
 import { getBizTypeName, getBuyOrSellName, getContractTypeName } from '@/common/constants/enumsName';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { getTableButton } from '@/common/setup/table/button';
+import MtpTableDetail from '@/common/components/tableDetail/index.vue';
 
 export default defineComponent({
   name: EnumRouterName.exposure_report_exposure,
   components: {
     MtpTableScroll,
+    MtpTableDetail,
     Filter,
-    Description,
   },
   setup() {
     let cycletime = '';
     // 表格列表数据
     const { loading, tableList, queryTable } = queryTableList<Ermcp3ExpourseReport>(true, 2);
+    // 控制明细显示/隐藏
+    const visible = ref(true);
     // 获取列表数据
     const queryTableAction = () => {
       const { getInitTime, getInitType } = handleInitTypeAndTime();
@@ -63,7 +62,11 @@ export default defineComponent({
         querytype: 1,
       };
       // 获取列表数据
-      queryTable(qryAreaExpourseReport, param);
+      queryTable(qryAreaExpourseReport, param).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     };
     const param: ComposeTableDetailParam = {
       queryFn: queryTableAction, // 查询表格数据
@@ -72,8 +75,6 @@ export default defineComponent({
       menuType: EnumRouterName.exposure_report_exposure, // 当前tab页对应的code
     };
     const {
-      visible,
-      closeDrawer, // 控制 drawer 组件是否显示
       columns,
       updateColumn, //  表头数据
       columnsDetail,
@@ -87,10 +88,13 @@ export default defineComponent({
 
     // 底部明细标签
     const tabList = getTableButton();
+    // 当前选中的标签
+    const tabIndex = ref(0);
 
     // 切换明细
-    function changeTab(index: number, current: TabList) {
-      const { code, lable } = current;
+    function changeTab(index: number) {
+      tabIndex.value = index;
+      const { code, lable } = tabList[index];
       const data = selectedRow.value as Ermcp3ExpourseReport;
       const { cycletype, middlegoodsid } = data;
       const param: QryAreaExpourseHedgeplanDetailReq = {
@@ -130,26 +134,30 @@ export default defineComponent({
       });
     }
 
-    watchEffect(() => {
-      if (visible.value) {
-        if (tabList.length) {
-          changeTab(0, tabList[0]);
-        }
+    watch(selectedRow, () => {
+      detailTableList.value = [];
+      if (tabList.length) {
+        visible.value = true;
+        changeTab(tabIndex.value);
       }
-    });
+    })
 
     function search(value: TypeAndTime) {
+      detailTableList.value = [];
       chaceSearchValue.value = value;
       cycletime = value.cycletime;
       const obj = Object.assign(value, { querytype: 1 });
-      queryTable(qryAreaExpourseReport, obj);
+      queryTable(qryAreaExpourseReport, obj).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     }
 
     return {
       loading,
       tableList,
       visible,
-      closeDrawer,
       columns,
       updateColumn,
       search,
@@ -166,7 +174,4 @@ export default defineComponent({
     };
   },
 });
-</script>
-
-<style lang="less">
-</style>;
+</script>

src/views/report/finance-report/list/finance_report_finance/index.vue

@@ -1,17 +1,13 @@
 <template>
+  <Filter @update="search"></Filter>
   <!-- 财务报表 -->
   <mtp-table-scroll>
-    <template #header>
-      <Filter @update="search"></Filter>
-    </template>
     <template #default="{ scroll }">
       <a-table :columns="columns" class="srcollYTable" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList" :scroll="scroll"> </a-table>
     </template>
   </mtp-table-scroll>
   <!-- 明细 -->
-  <Description v-if="visible" @close="closeDrawer" @changeTab="changeTab" :tabList="tabList">
-    <a-table :columns="columnsDetail" class="topTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="detailTableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"> </a-table>
-  </Description>
+  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab" />
 </template>
 
 <script lang="ts">
@@ -23,24 +19,25 @@ import { handleInitTypeAndTime } from '@/views/report/setup';
 import { Ermcp3FinanceReport, FinanceReportReq } from '@/services/go/ermcp/report/interface';
 import { qryFinanceReport } from '@/services/go/ermcp/report';
 import { ComposeTableDetailParam, handleComposeTable_detail } from '@/common/setup/table/compose';
-import Description from '@/common/components/description/index.vue';
-import { TabList } from '@/common/components/description/interface';
 import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
-import { ref, watchEffect } from 'vue';
+import { ref, watch } from 'vue';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { getTableButton } from '@/common/setup/table/button';
+import MtpTableDetail from '@/common/components/tableDetail/index.vue';
 
 export default defineComponent({
   name: 'finance-report',
   components: {
     MtpTableScroll,
     Filter,
-    Description,
+    MtpTableDetail,
   },
   setup() {
     let cycletime = '';
     // 表格列表数据
     const { loading, tableList, queryTable } = queryTableList<Ermcp3FinanceReport>();
+    // 控制明细显示/隐藏
+    const visible = ref(true);
     // 获取列表数据
     const queryTableAction = () => {
       const { getInitTime, getInitType } = handleInitTypeAndTime();
@@ -51,7 +48,11 @@ export default defineComponent({
         querytype: 1,
       };
       // 获取列表数据
-      queryTable(qryFinanceReport, param);
+      queryTable(qryFinanceReport, param).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     };
     const param: ComposeTableDetailParam = {
       queryFn: queryTableAction, // 查询表格数据
@@ -60,8 +61,6 @@ export default defineComponent({
       menuType: EnumRouterName.finance_report_finance, // 当前tab页对应的code
     };
     const {
-      visible,
-      closeDrawer, // 控制 drawer 组件是否显示
       columns,
       updateColumn, //  表头数据
       columnsDetail,
@@ -75,10 +74,13 @@ export default defineComponent({
 
     // 底部明细标签
     const tabList = getTableButton();
+    // 当前选中的标签
+    const tabIndex = ref(0);
 
     // 切换明细
-    function changeTab(index: number, current: TabList) {
-      const { code, lable } = current;
+    function changeTab(index: number) {
+      tabIndex.value = index;
+      const { code, lable } = tabList[index];
       const data = selectedRow.value as Ermcp3FinanceReport;
       const { cycletype, currencyid } = data;
       const param: FinanceReportReq = {
@@ -108,21 +110,26 @@ export default defineComponent({
         detailTableList.value = res;
       });
     }
-    watchEffect(() => {
-      if (visible.value) {
-        if (tabList.length) {
-          changeTab(0, tabList[0]);
-        }
+    watch(selectedRow, () => {
+      detailTableList.value = [];
+      if (tabList.length) {
+        visible.value = true;
+        changeTab(tabIndex.value);
       }
-    });
+    })
     function search(value: TypeAndTime) {
+      detailTableList.value = [];
       chaceSearchValue.value = value;
       cycletime = value.cycletime;
       const obj = Object.assign(value, { querytype: 1 });
-      queryTable(qryFinanceReport, obj);
+      queryTable(qryFinanceReport, obj).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     }
 
-    return { loading, tableList, visible, closeDrawer, columns, updateColumn, search, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab };
+    return { loading, tableList, visible, columns, updateColumn, search, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab };
   },
 });
 </script>

src/views/report/future_report/list/future_report/index.vue

@@ -1,9 +1,7 @@
 <template>
+  <Filter @update="search"></Filter>
   <!-- 期货报表 -->
   <mtp-table-scroll>
-    <template #header>
-      <Filter @update="search"></Filter>
-    </template>
     <template #default="{ scroll }">
       <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList">
         <!-- 持仓方向 -->
@@ -14,14 +12,12 @@
     </template>
   </mtp-table-scroll>
   <!-- 明细 -->
-  <Description v-if="visible" @close="closeDrawer" @changeTab="changeTab" :tabList="tabList">
-    <a-table :columns="columnsDetail" class="topTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="detailTableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
-      <!-- 持仓方向 -->
-      <template #buyorsell="{ record }">
-        <a>{{ record.buyorsell === 1 ? '卖出' : '买入' }}</a>
-      </template>
-    </a-table>
-  </Description>
+  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab">
+    <!-- 持仓方向 -->
+    <template #buyorsell="{ record }">
+      <a>{{ record.buyorsell === 1 ? '卖出' : '买入' }}</a>
+    </template>
+  </mtp-table-detail>
 </template>
 
 <script lang="ts">
@@ -29,28 +25,29 @@ import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import Filter from '../../components/filterTable/index.vue';
 import { defineComponent, queryTableList } from '@/common/export/table';
 import { ComposeTableDetailParam, handleComposeTable_detail } from '@/common/setup/table/compose';
-import Description from '@/common/components/description/index.vue';
-import { ref, watchEffect } from 'vue';
+import { ref, watch } from 'vue';
 import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { handleInitTypeAndTime } from '@/views/report/setup';
 import { qryTaFutureDataReport } from '@/services/go/ermcp/report';
 import { Ermcp3TaFutuReDataReport, QryTaFutureDataReportReq } from '@/services/go/ermcp/report/interface';
 import { TypeAndTime } from '@/views/report/interface';
-import { TabList } from '@/common/components/description/interface';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { getTableButton } from '@/common/setup/table/button';
+import MtpTableDetail from '@/common/components/tableDetail/index.vue';
 
 export default defineComponent({
   name: 'inventory_report_inventory_category',
   components: {
     MtpTableScroll,
+    MtpTableDetail,
     Filter,
-    Description,
   },
   setup() {
     let cycletime = '';
     // 表格列表数据
     const { loading, tableList, queryTable } = queryTableList<Ermcp3TaFutuReDataReport>();
+    // 控制明细显示/隐藏
+    const visible = ref(true);
     // 获取列表数据
     const queryTableAction = () => {
       const { getInitTime, getInitType } = handleInitTypeAndTime();
@@ -61,7 +58,11 @@ export default defineComponent({
         querytype: 1,
       };
       // 获取列表数据
-      queryTable(qryTaFutureDataReport, param);
+      queryTable(qryTaFutureDataReport, param).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     };
     const param: ComposeTableDetailParam = {
       queryFn: queryTableAction, // 查询表格数据
@@ -70,8 +71,6 @@ export default defineComponent({
       menuType: EnumRouterName.future_report_future, // 当前tab页对应的code
     };
     const {
-      visible,
-      closeDrawer, // 控制 drawer 组件是否显示
       columns,
       updateColumn, //  表头数据
       columnsDetail,
@@ -85,10 +84,13 @@ export default defineComponent({
 
     // 底部明细标签
     const tabList = getTableButton();
+    // 当前选中的标签
+    const tabIndex = ref(0);
 
     // 切换明细
-    function changeTab(index: number, current: TabList) {
-      const { code, lable } = current;
+    function changeTab(index: number) {
+      tabIndex.value = index;
+      const { code, lable } = tabList[index];
       const data = selectedRow.value as Ermcp3TaFutuReDataReport;
       const { cycletype, currencyid, goodsgroupid, goodsid, buyorsell } = data;
       const param: QryTaFutureDataReportReq = {
@@ -114,21 +116,28 @@ export default defineComponent({
         detailTableList.value = res;
       });
     }
-    watchEffect(() => {
-      if (visible.value) {
-        if (tabList.length) {
-          changeTab(0, tabList[0]);
-        }
-      }
-    });
+
     function search(value: TypeAndTime) {
+      detailTableList.value = [];
       chaceSearchValue.value = value;
       cycletime = value.cycletime;
       const obj = Object.assign(value, { querytype: 1 });
-      queryTable(qryTaFutureDataReport, obj);
+      queryTable(qryTaFutureDataReport, obj).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     }
 
-    return { loading, tableList, visible, closeDrawer, columns, updateColumn, search, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab };
+    watch(selectedRow, () => {
+      detailTableList.value = [];
+      if (tabList.length) {
+        visible.value = true;
+        changeTab(tabIndex.value);
+      }
+    })
+
+    return { loading, tableList, visible, columns, updateColumn, search, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab };
   },
 });
 </script>

src/views/report/inventory-report/list/category/index.vue

@@ -1,17 +1,13 @@
 <template>
+  <Filter @update="search" @filter="updateColumn"></Filter>
   <!-- 库存报表(品类) -->
   <mtp-table-scroll>
-    <template #header>
-      <Filter @update="search" @filter="updateColumn"></Filter>
-    </template>
     <template #default="{ scroll }">
       <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList"> </a-table>
     </template>
   </mtp-table-scroll>
   <!-- 明细 -->
-  <Description v-if="visible" @close="closeDrawer" @changeTab="changeTab" :tabList="tabList">
-    <a-table :columns="columnsDetail" class="topTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="detailTableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"> </a-table>
-  </Description>
+  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab" />
 </template>
 
 <script lang="ts">
@@ -19,28 +15,29 @@ import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import Filter from '../../components/filterTable/index.vue';
 import { defineComponent, queryTableList } from '@/common/export/table';
 import { ComposeTableDetailParam, handleComposeTable_detail } from '@/common/setup/table/compose';
-import Description from '@/common/components/description/index.vue';
-import { ref, watchEffect } from 'vue';
+import { ref, watch } from 'vue';
 import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { handleInitTypeAndTime } from '@/views/report/setup';
 import { qryAreaStockReport } from '@/services/go/ermcp/report';
 import { AreaStockReportReq, Ermcp3AreaStockReport } from '@/services/go/ermcp/report/interface';
 import { TypeAndTime } from '@/views/report/interface';
-import { TabList } from '@/common/components/description/interface';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { getTableButton } from '@/common/setup/table/button';
+import MtpTableDetail from '@/common/components/tableDetail/index.vue';
 
 export default defineComponent({
   name: 'inventory_report_inventory_category',
   components: {
     MtpTableScroll,
     Filter,
-    Description,
+    MtpTableDetail,
   },
   setup() {
     let cycletime = '';
     // 表格列表数据
     const { loading, tableList, queryTable } = queryTableList<Ermcp3AreaStockReport>();
+    // 控制明细显示/隐藏
+    const visible = ref(true);
     const chaceSearchValue = ref<TypeAndTime>();
     // 获取列表数据
     const queryTableAction = () => {
@@ -53,7 +50,11 @@ export default defineComponent({
         sumfields: '1,2',
       };
       // 获取列表数据
-      queryTable(qryAreaStockReport, param);
+      queryTable(qryAreaStockReport, param).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     };
     const param: ComposeTableDetailParam = {
       queryFn: queryTableAction, // 查询表格数据
@@ -63,8 +64,6 @@ export default defineComponent({
     };
 
     const {
-      visible,
-      closeDrawer, // 控制 drawer 组件是否显示
       columns,
       updateColumn, //  表头数据
       columnsDetail,
@@ -77,10 +76,13 @@ export default defineComponent({
 
     // 底部明细标签
     const tabList = getTableButton();
+    // 当前选中的标签
+    const tabIndex = ref(0);
 
     // 切换明细
-    function changeTab(index: number, current: TabList) {
-      const { code, lable } = current;
+    function changeTab(index: number) {
+      tabIndex.value = index;
+      const { code, lable } = tabList[index];
       const data = selectedRow.value as Ermcp3AreaStockReport;
       const { cycletype, deliverygoodsid, wrstandardid, spotgoodsbrandid, warehouseinfoid } = data;
 
@@ -115,21 +117,26 @@ export default defineComponent({
         detailTableList.value = res;
       });
     }
-    watchEffect(() => {
-      if (visible.value) {
-        if (tabList.length) {
-          changeTab(0, tabList[0]);
-        }
+    watch(selectedRow, () => {
+      detailTableList.value = [];
+      if (tabList.length) {
+        visible.value = true;
+        changeTab(tabIndex.value);
       }
-    });
+    })
     function search(value: TypeAndTime) {
+      detailTableList.value = [];
       chaceSearchValue.value = value;
       cycletime = value.cycletime;
       const obj = Object.assign(value, { querytype: 1, sumfields: '1,2' });
-      queryTable(qryAreaStockReport, obj);
+      queryTable(qryAreaStockReport, obj).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     }
 
-    return { loading, tableList, visible, closeDrawer, columns, updateColumn, search, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab };
+    return { loading, tableList, visible, columns, updateColumn, search, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab };
   },
 });
 </script>

src/views/report/inventory-report/list/warehouse/index.vue

@@ -1,17 +1,13 @@
 <template>
+  <Filter @update="search" @filter="updateColumn"></Filter>
   <!-- 库存报表(仓库) -->
   <mtp-table-scroll>
-    <template #header>
-      <Filter @update="search" @filter="updateColumn"></Filter>
-    </template>
     <template #default="{ scroll }">
       <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList"> </a-table>
     </template>
   </mtp-table-scroll>
   <!-- 明细 -->
-  <Description v-if="visible" @close="closeDrawer" @changeTab="changeTab" :tabList="tabList">
-    <a-table :columns="columnsDetail" class="topTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="detailTableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"> </a-table>
-  </Description>
+  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab" />
 </template>
 
 <script lang="ts">
@@ -19,28 +15,29 @@ import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import Filter from '../../components/filterTable/index.vue';
 import { defineComponent, queryTableList } from '@/common/export/table';
 import { ComposeTableDetailParam, handleComposeTable_detail } from '@/common/setup/table/compose';
-import Description from '@/common/components/description/index.vue';
-import { ref, watchEffect } from 'vue';
+import { ref, watch } from 'vue';
 import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { handleInitTypeAndTime } from '@/views/report/setup';
 import { qryAreaStockReport } from '@/services/go/ermcp/report';
 import { AreaStockReportReq, Ermcp3AreaStockReport } from '@/services/go/ermcp/report/interface';
 import { TypeAndTime } from '@/views/report/interface';
-import { TabList } from '@/common/components/description/interface';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { getTableButton } from '@/common/setup/table/button';
+import MtpTableDetail from '@/common/components/tableDetail/index.vue';
 
 export default defineComponent({
   name: 'inventory_report_warehouse',
   components: {
     MtpTableScroll,
     Filter,
-    Description,
+    MtpTableDetail,
   },
   setup() {
     let cycletime = '';
     // 表格列表数据
     const { loading, tableList, queryTable } = queryTableList<Ermcp3AreaStockReport>();
+    // 控制明细显示/隐藏
+    const visible = ref(true);
     // 获取列表数据
     const queryTableAction = () => {
       const { getInitTime, getInitType } = handleInitTypeAndTime();
@@ -52,7 +49,11 @@ export default defineComponent({
         sumfields: '1,2,4',
       };
       // 获取列表数据
-      queryTable(qryAreaStockReport, param);
+      queryTable(qryAreaStockReport, param).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     };
     const param: ComposeTableDetailParam = {
       queryFn: queryTableAction, // 查询表格数据
@@ -61,8 +62,6 @@ export default defineComponent({
       menuType: EnumRouterName.inventory_report_warehouse, // 当前tab页对应的code
     };
     const {
-      visible,
-      closeDrawer, // 控制 drawer 组件是否显示
       columns,
       updateColumn, //  表头数据
       columnsDetail,
@@ -76,10 +75,13 @@ export default defineComponent({
 
     // 底部明细标签
     const tabList = getTableButton();
+    // 当前选中的标签
+    const tabIndex = ref(0);
 
     // 切换明细
-    function changeTab(index: number, current: TabList) {
-      const { code, lable } = current;
+    function changeTab(index: number) {
+      tabIndex.value = index;
+      const { code, lable } = tabList[index];
       const data = selectedRow.value as Ermcp3AreaStockReport;
       const { cycletype, deliverygoodsid, wrstandardid, spotgoodsbrandid, warehouseinfoid } = data;
 
@@ -107,21 +109,26 @@ export default defineComponent({
         detailTableList.value = res;
       });
     }
-    watchEffect(() => {
-      if (visible.value) {
-        if (tabList.length) {
-          changeTab(0, tabList[0]);
-        }
+    watch(selectedRow, () => {
+      detailTableList.value = [];
+      if (tabList.length) {
+        visible.value = true;
+        changeTab(tabIndex.value);
       }
-    });
+    })
     function search(value: TypeAndTime) {
+      detailTableList.value = [];
       chaceSearchValue.value = value;
       cycletime = value.cycletime;
       const obj = Object.assign(value, { querytype: 1, sumfields: '1,2,4' });
-      queryTable(qryAreaStockReport, obj);
+      queryTable(qryAreaStockReport, obj).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     }
 
-    return { loading, tableList, visible, closeDrawer, columns, updateColumn, search, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab };
+    return { loading, tableList, visible, columns, updateColumn, search, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab };
   },
 });
 </script>

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

@@ -1,9 +1,7 @@
 <template>
+  <Filter @update="search" @filter="updateColumn" :tableList="tableList"></Filter>
   <!-- 现货报表 -->
   <mtp-table-scroll>
-    <template #header>
-      <Filter @update="search" @filter="updateColumn" :tableList="tableList"></Filter>
-    </template>
     <template #default="{ scroll }">
       <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList">
         <template #curaverageprice="{ record }">
@@ -40,40 +38,38 @@
     </template>
   </mtp-table-scroll>
   <!-- 明细 -->
-  <Description v-if="visible" @close="closeDrawer" @changeTab="changeTab" :tabList="tabList">
-    <a-table :columns="columnsDetail" class="topTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="detailTableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
-      <template #curaverageprice="{ record }">
-        <span>{{ record.curaverageprice.toFixed(2) }}</span>
-      </template>
-      <template #oriaverageprice="{ record }">
-        <span>{{ record.oriaverageprice.toFixed(2) }}</span>
-      </template>
-      <template #oriamount="{ record }">
-        <span>{{ record.oriamount.toFixed(2) }}</span>
-      </template>
-      <template #todaybuyamount="{ record }">
-        <span>{{ record.todaybuyamount.toFixed(2) }}</span>
-      </template>
-      <template #todaybuyaverageprice="{ record }">
-        <span>{{ record.todaybuyaverageprice.toFixed(2) }}</span>
-      </template>
-      <template #todaysellaverageprice="{ record }">
-        <span>{{ record.todaysellaverageprice.toFixed(2) }}</span>
-      </template>
-      <template #actualpl="{ record }">
-        <span>{{ record.actualpl.toFixed(2) }}</span>
-      </template>
-      <template #curspotprice="{ record }">
-        <span>{{ record.curspotprice.toFixed(2) }}</span>
-      </template>
-      <template #floatpl="{ record }">
-        <span>{{ record.floatpl.toFixed(2) }}</span>
-      </template>
-      <template #curmarketvalue="{ record }">
-        <span>{{ record.curmarketvalue.toFixed(2) }}</span>
-      </template>
-    </a-table>
-  </Description>
+  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab">
+    <template #curaverageprice="{ record }">
+      <span>{{ record.curaverageprice.toFixed(2) }}</span>
+    </template>
+    <template #oriaverageprice="{ record }">
+      <span>{{ record.oriaverageprice.toFixed(2) }}</span>
+    </template>
+    <template #oriamount="{ record }">
+      <span>{{ record.oriamount.toFixed(2) }}</span>
+    </template>
+    <template #todaybuyamount="{ record }">
+      <span>{{ record.todaybuyamount.toFixed(2) }}</span>
+    </template>
+    <template #todaybuyaverageprice="{ record }">
+      <span>{{ record.todaybuyaverageprice.toFixed(2) }}</span>
+    </template>
+    <template #todaysellaverageprice="{ record }">
+      <span>{{ record.todaysellaverageprice.toFixed(2) }}</span>
+    </template>
+    <template #actualpl="{ record }">
+      <span>{{ record.actualpl.toFixed(2) }}</span>
+    </template>
+    <template #curspotprice="{ record }">
+      <span>{{ record.curspotprice.toFixed(2) }}</span>
+    </template>
+    <template #floatpl="{ record }">
+      <span>{{ record.floatpl.toFixed(2) }}</span>
+    </template>
+    <template #curmarketvalue="{ record }">
+      <span>{{ record.curmarketvalue.toFixed(2) }}</span>
+    </template>
+  </mtp-table-detail>
 </template>
 
 <script lang="ts">
@@ -85,25 +81,26 @@ import { QryAreaSpotplReport } from '@/services/go/ermcp/report';
 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 { ref, watchEffect } from 'vue';
+import { ref, watch } from 'vue';
 import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
-import { TabList } from '@/common/components/description/interface';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { getTableButton } from '@/common/setup/table/button';
 import { columns } from './setup';
+import MtpTableDetail from '@/common/components/tableDetail/index.vue';
 
 export default defineComponent({
   name: 'spot-report',
   components: {
     MtpTableScroll,
+    MtpTableDetail,
     Filter,
-    Description,
   },
   setup() {
     let cycletime = '';
     // 表格列表数据
     const { loading, tableList, queryTable } = queryTableList<Ermcp3AreaSpotPLReport>();
+    // 控制明细显示/隐藏
+    const visible = ref(true);
     // 获取列表数据
     const queryTableAction = () => {
       const { getInitTime, getInitType } = handleInitTypeAndTime();
@@ -114,7 +111,11 @@ export default defineComponent({
         querytype: 1,
       };
       // 获取列表数据
-      queryTable(QryAreaSpotplReport, param);
+      queryTable(QryAreaSpotplReport, param).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     };
     const param: ComposeTableDetailParam = {
       queryFn: queryTableAction, // 查询表格数据
@@ -123,8 +124,6 @@ export default defineComponent({
       menuType: EnumRouterName.spot_report_spot, // 当前tab页对应的code
     };
     const {
-      visible,
-      closeDrawer, // 控制 drawer 组件是否显示
       updateColumn, //  表头数据
       columnsDetail,
       registerColumnDetail,
@@ -137,10 +136,13 @@ export default defineComponent({
 
     // 底部明细标签
     const tabList = getTableButton();
+    // 当前选中的标签
+    const tabIndex = ref(0);
 
     // 切换明细
-    function changeTab(index: number, current: TabList) {
-      const { code, lable } = current;
+    function changeTab(index: number) {
+      tabIndex.value = index;
+      const { code, lable } = tabList[index];
       const data = selectedRow.value as Ermcp3AreaSpotPLReport;
       const { cycletype, currencyid, deliverygoodsid } = data;
       const param: AreaSpotplReportReq = {
@@ -164,25 +166,29 @@ export default defineComponent({
         detailTableList.value = res;
       });
     }
-    watchEffect(() => {
-      if (visible.value) {
-        if (tabList.length) {
-          changeTab(0, tabList[0]);
-        }
+    watch(selectedRow, () => {
+      detailTableList.value = [];
+      if (tabList.length) {
+        visible.value = true;
+        changeTab(tabIndex.value);
       }
-    });
+    })
     function search(value: TypeAndTime) {
+      detailTableList.value = [];
       chaceSearchValue.value = value;
       cycletime = value.cycletime;
       const obj = Object.assign(value, { querytype: 1 });
-      queryTable(QryAreaSpotplReport, obj);
+      queryTable(QryAreaSpotplReport, obj).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     }
 
     return {
       loading,
       tableList,
       visible,
-      closeDrawer,
       columns,
       updateColumn,
       search,

src/views/report/sum_pl_report/list/sum_pl_report/index.vue

@@ -1,40 +1,34 @@
 <template>
+  <Filter @update="search"></Filter>
   <!-- 汇总损益报表 -->
   <mtp-table-scroll>
-    <template #header>
-      <Filter @update="search"></Filter>
-    </template>
     <template #default="{ scroll }">
       <a-table :columns="getColumns()" class="srcollYTable" :scroll="scroll" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="customRow" :rowKey="(record,index)=>index" :data-source="tableList"></a-table>
     </template>
   </mtp-table-scroll>
   <!-- 明细 -->
-  <Description v-if="visible" @close="closeDrawer" @changeTab="changeTab" :tabList="tabList">
-    <a-table :columns="columnsDetail" class="topTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="detailTableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
-      <!-- 出现浮点失真  强行处理 * 2-->
-      <template #spotactualpl="{ record }">
-        <span>{{ record.spotactualpl.toFixed(2) }}</span>
-      </template>
-      <template #spotfloatpl="{ record }">
-        <span>{{ record.spotfloatpl.toFixed(2) }}</span>
-      </template>
-      <template #futureactualpl="{ record }">
-        <span>{{ record.futureactualpl.toFixed(2) }}</span>
-      </template>
-      <template #sumactualpl="{ record }">
-        <span>{{ record.sumactualpl.toFixed(2) }}</span>
-      </template>
-      <template #sumpl="{ record }">
-        <span>{{ record.sumpl.toFixed(2) }}</span>
-      </template>
-    </a-table>
-  </Description>
+  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab">
+    <!-- 出现浮点失真  强行处理 * 2-->
+    <template #spotactualpl="{ record }">
+      <span>{{ record.spotactualpl.toFixed(2) }}</span>
+    </template>
+    <template #spotfloatpl="{ record }">
+      <span>{{ record.spotfloatpl.toFixed(2) }}</span>
+    </template>
+    <template #futureactualpl="{ record }">
+      <span>{{ record.futureactualpl.toFixed(2) }}</span>
+    </template>
+    <template #sumactualpl="{ record }">
+      <span>{{ record.sumactualpl.toFixed(2) }}</span>
+    </template>
+    <template #sumpl="{ record }">
+      <span>{{ record.sumpl.toFixed(2) }}</span>
+    </template>
+  </mtp-table-detail>
 </template>
 
 <script lang="ts">
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
-import Description from '@/common/components/description/index.vue';
-import { TabList } from '@/common/components/description/interface';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { defineComponent, queryTableList } from '@/common/export/table';
 import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
@@ -44,16 +38,17 @@ import { qryAreaSumPL } from '@/services/go/ermcp/report';
 import { Ermcp3ArealSumPL, QryAreaSumPLReq } from '@/services/go/ermcp/report/interface';
 import { TypeAndTime } from '@/views/report/interface';
 import { handleInitTypeAndTime } from '@/views/report/setup';
-import { ref, watchEffect } from 'vue';
+import { ref, watch } from 'vue';
 import Filter from '../../components/filterTable/index.vue';
 import { getColumns } from './setup';
+import MtpTableDetail from '@/common/components/tableDetail/index.vue';
 
 export default defineComponent({
   name: 'sum_pl_report',
   components: {
     MtpTableScroll,
     Filter,
-    Description,
+    MtpTableDetail,
   },
   setup() {
     let cycletime = '';
@@ -61,6 +56,8 @@ export default defineComponent({
     const cycletype = ref(0);
     // 表格列表数据
     const { loading, tableList, queryTable } = queryTableList<Ermcp3ArealSumPL>(true, 2);
+    // 控制明细显示/隐藏
+    const visible = ref(true);
     // 获取列表数据
     const queryTableAction = () => {
       const { getInitTime, getInitType } = handleInitTypeAndTime();
@@ -71,7 +68,11 @@ export default defineComponent({
         querytype: 1,
       };
       // 获取列表数据
-      queryTable(qryAreaSumPL, param);
+      queryTable(qryAreaSumPL, param).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     };
     const param: ComposeTableDetailParam = {
       queryFn: queryTableAction, // 查询表格数据
@@ -80,8 +81,6 @@ export default defineComponent({
       menuType: EnumRouterName.sum_pl_report_sum_pl, // 当前tab页对应的code
     };
     const {
-      visible,
-      closeDrawer, // 控制 drawer 组件是否显示
       updateColumn, //  表头数据
       columnsDetail,
       registerColumnDetail,
@@ -94,6 +93,8 @@ export default defineComponent({
 
     // 底部明细标签
     const tabList = getTableButton();
+    // 当前选中的标签
+    const tabIndex = ref(0);
 
     // 自定义表格事件
     const customRow = (record: Ermcp3ArealSumPL, index: number) => {
@@ -105,8 +106,9 @@ export default defineComponent({
     };
 
     // 切换明细
-    function changeTab(index: number, current: TabList) {
-      const { code, lable } = current;
+    function changeTab(index: number) {
+      tabIndex.value = index;
+      const { code, lable } = tabList[index];
       const data = selectedRow.value as Ermcp3ArealSumPL;
       const { cycletype, currencyid } = data;
       const param: QryAreaSumPLReq = {
@@ -129,27 +131,31 @@ export default defineComponent({
         detailTableList.value = res;
       });
     }
-    watchEffect(() => {
-      if (visible.value) {
-        if (tabList.length) {
-          changeTab(0, tabList[0]);
-        }
+    watch(selectedRow, () => {
+      detailTableList.value = [];
+      if (tabList.length) {
+        visible.value = true;
+        changeTab(tabIndex.value);
       }
-    });
+    })
 
     function search(value: TypeAndTime) {
+      detailTableList.value = [];
       cycletype.value = value.cycletype;
       chaceSearchValue.value = value;
       cycletime = value.cycletime;
       const obj = Object.assign(value, { querytype: 1 });
-      queryTable(qryAreaSumPL, obj);
+      queryTable(qryAreaSumPL, obj).then((res) => {
+        if (res.length) {
+          selectedRow.value = res[0];
+        }
+      });
     }
 
     return {
       loading,
       tableList,
       visible,
-      closeDrawer,
       getColumns,
       updateColumn,
       search,