update

src/views/market/spot_trade/spot_trade_order_transaction/components/buy-sell-market/index.vue

@@ -10,7 +10,8 @@
         <div class="name">{{selectedRow.goodscode}} {{selectedRow.goodsname}}</div>
         <div class="arrowRightIcon"></div>
       </div>
-      <div class="green bdf1 ml20">
+      <div class="green bdf1 ml20"
+           @click="changeMarketOrDetail">
         <div class="numBlock ml15">
           <div class="first">卖价</div>
           <div class="last">{{selectedRow.sellprice}}</div>
@@ -34,7 +35,8 @@
                :record="selectedRow"
                @click="openComponent" />
     </div>
-    <a-row class="buySellHall">
+    <a-row class="buySellHall"
+           v-if="showMarketOrDetail">
       <a-col :span="12">
         <Sell ref="sellRef"
               :parantSelectedRow="deliverGoods" />
@@ -44,6 +46,8 @@
              :parantSelectedRow="deliverGoods" />
       </a-col>
     </a-row>
+    <StockExchange :deliverGoods="deliverGoods"
+                   v-else />
     <component :is="componentId"
                v-if="componentId"
                :selectedRow="deliverGoods"
@@ -69,6 +73,7 @@ import { BtnListType } from '@/common/components/btnList/interface';
 import moment, { Moment } from 'moment';
 import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
 import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
+import StockExchange from '../stock-exchange/index.vue';
 
 export default defineComponent({
     emits: ['cancel', 'update'],
@@ -90,6 +95,7 @@ export default defineComponent({
         LeftOutlined,
         Listing: defineAsyncComponent(() => import('../listing/index.vue')),
         Detail: defineAsyncComponent(() => import('../detail/index.vue')),
+        StockExchange,
     },
     setup(props, context) {
         const loading = ref<boolean>(false);
@@ -112,6 +118,11 @@ export default defineComponent({
         };
         const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, ref({}));
 
+        const showMarketOrDetail = ref<boolean>(true);
+        function changeMarketOrDetail() {
+            showMarketOrDetail.value = !showMarketOrDetail.value;
+        }
+
         TimerUtils.setInterval(
             () => {
                 queryFn();
@@ -131,6 +142,8 @@ export default defineComponent({
             closeComponent,
             openComponent,
             btnListData,
+            showMarketOrDetail,
+            changeMarketOrDetail,
         };
     },
 });

src/views/market/spot_trade/spot_trade_order_transaction/components/stock-exchange/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 成交明细  -->
-  <a-row class="buySellHall">
+  <a-row>
     <a-col :span="8">
       <a-table :columns="columnsList"
                class="srcollYTable"
@@ -11,7 +11,7 @@
                :data-source="tableList[0]">
       </a-table>
     </a-col>
-    <a-col :span="12">
+    <a-col :span="8">
       <a-table :columns="columnsList"
                class="srcollYTable"
                :pagination="false"
@@ -21,7 +21,7 @@
                :data-source="tableList[1]">
       </a-table>
     </a-col>
-    <a-col :span="12">
+    <a-col :span="8">
       <a-table :columns="columnsList"
                class="srcollYTable"
                :pagination="false"
@@ -53,10 +53,6 @@ export default defineComponent({
     emits: ['cancel', 'update'],
     name: 'stock-exchange',
     props: {
-        selectedRow: {
-            type: Object as PropType<QueryQuoteDayRsp>,
-            default: {},
-        },
         deliverGoods: {
             type: Object as PropType<QueryDeliveryRelationRsp>,
             default: {},