update

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

@@ -1,9 +1,6 @@
 <template>
   <!-- 买卖大厅 -->
   <div class="buy-sell-market">
-    <!--<div>
-             <button @click="cancel">关闭</button>
-        </div>-->
     <div class="buy-sell-market-title">
       <a class="backIcon"
          @click="cancel">
@@ -47,23 +44,32 @@
         <div class="last red">6291.0</div>
         <LineChartOutlined />
       </div>
-      <a-button class="publishBuy">发布求购</a-button>
-      <a-button class="detailBtn">详情</a-button>
+      <BtnList :btnList="firstBtn"
+               :record="selectedRow"
+               @click="openComponent" />
+      <!-- <a-button class="publishBuy">发布求购</a-button>
+      <a-button class="detailBtn">详情</a-button> -->
     </div>
     <a-row>
-      <a-col :span="12">
+      <a-col :span="12"
+             v-if="buyMarket.isMarket">
         <Buy />
       </a-col>
-      <a-col :span="12">
+      <a-col :span="12"
+             v-if="sellMarket.isMarket">
         <Sell />
       </a-col>
     </a-row>
+    <component :is="componentId"
+               v-if="componentId"
+               :selectedRow="selectedRow"
+               @cancel="closeComponent"></component>
   </div>
 </template>
 
 <script lang="ts">
 import { EnumRouterName } from '@/common/constants/enumRouterName';
-import { ComposeTableParam, defineComponent, handleComposeTable, ModalEnum, queryTableList } from '@/common/export/commonTable';
+import { ComposeTableParam, defineAsyncComponent, defineComponent, BtnList, handleComposeTable, ModalEnum, queryTableList } from '@/common/export/commonTable';
 import { _closeModal } from '@/common/setup/modal/modal';
 import { queryOrderQuoteDetail } from '@/services/go/wrtrade';
 import { QueryOrderQuoteDetailReq, WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
@@ -72,6 +78,10 @@ import { handleBuyAndSellList } from './setup';
 import Buy from './components/buy/index.vue';
 import Sell from './components/sell/index.vue';
 import { LineChartOutlined } from '@ant-design/icons-vue';
+// import { getBuyAndSellMarketData } from '../../setup';
+import { handleModalComponent } from '@/common/setup/asyncComponent';
+import { PropType, ref } from 'vue';
+import { handleSpotBtnList } from '../../setup';
 
 export default defineComponent({
     emits: ['cancel'],
@@ -86,19 +96,40 @@ export default defineComponent({
             default: 0, // 是否有仓单 0-没有 1-有(仓单贸易填1,仓单预售填0)
             type: Number,
         },
+        selectedRow: {
+            type: Object as PropType<any>,
+            default: {},
+        },
+        enumName: {
+            default: '',
+            type: String as PropType<EnumRouterName>,
+        },
     },
     components: {
         Buy,
         Sell,
+        BtnList,
         LeftOutlined,
         LineChartOutlined,
+        [ModalEnum.spot_trade_warehouse_detail]: defineAsyncComponent(() => import('../detail/index.vue')),
+        [ModalEnum.spot_trade_warehouse_post_buying]: defineAsyncComponent(() => import('../post_buying/index.vue')),
     },
     setup(props, context) {
         const { visible, cancel } = _closeModal(context);
-
+        // 买卖大厅 配置数据
+        // 表格操作按钮列表
+        const { firstBtn, buyMarket, sellMarket } = handleSpotBtnList(props.enumName);
+        function init() {}
+        const { componentId, closeComponent, openComponent } = handleModalComponent(init, ref({}));
         return {
             cancel,
             visible,
+            firstBtn,
+            buyMarket,
+            sellMarket,
+            componentId,
+            closeComponent,
+            openComponent,
         };
     },
 });

src/views/market/spot_trade/components/buy-sell-market/setup.ts

@@ -1,22 +1,18 @@
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { TableKey } from '@/common/methods/table/interface';
 import { getTableColumns, getTableEvent, queryTableList } from "@/common/setup/table";
-import { getBtnList_ } from '@/common/setup/table/button';
-import { WrOrderQuoteDetail } from "@/services/go/wrtrade/interface";
 
 
 export function handleBuyAndSellList<T>(menuType: EnumRouterName, isDetail: boolean, tableName: keyof TableKey) {
     // 表格列表数据
-    const { loading, tableList, queryTable } = queryTableList<WrOrderQuoteDetail>();
+    const { loading, tableList, queryTable } = queryTableList<T>();
     // 表头数据
     const { columns, registerColumn } = getTableColumns();
     // 表格事件
     const { expandedRowKeys, selectedRow, Rowclick } = getTableEvent<T>({});
-    // 表格操作按钮列表
-    const [firstBtn, secondBtn] = getBtnList_(menuType, isDetail).value;
     // 注册表头信息 过滤
     registerColumn(tableName, []);
     return {
-        loading, tableList, columns, expandedRowKeys, selectedRow, Rowclick, firstBtn, secondBtn, queryTable
+        loading, tableList, columns, expandedRowKeys, selectedRow, Rowclick, queryTable
     }
 }

src/views/market/spot_trade/setup.ts

@@ -9,49 +9,21 @@ import { OperationTabMenu } from '@/services/go/commonService/interface';
 import { onUnmounted, ref } from "vue";
 import { BuyAndSellMarket } from './interface';
 
-// 报价大厅操作按钮列表
-const priceBtnList = ref<BtnList[]>([])
+const buyAndSellEunm = 'buyAndSell'
 
-// 买大厅数据
-const buyMarket: BuyAndSellMarket = {
-    isMarket: true,
-    btnList: []
-}
-
-// 卖大厅数据
-const sellMarket: BuyAndSellMarket = {
-    isMarket: true,
-    btnList: []
-}
-
-
-// 表格 + 表头 + 右键 + 单击表格 + 按钮列表 通用处理逻辑
-export function handleComposeTable<T>({ queryFn, menuType, isDetail, tableName, tableFilterKey }: ComposeTableParam) {
-    // 右键逻辑
-    const { contextMenu, openContext, closeContext: closeContextAction } = handleContextMenu();
-    // 表头数据
-    const { columns, registerColumn, updateColumn } = getTableColumns();
-    // 控制异步组件
-    const componentId = ref<string>('');
-    // 关闭组件
-    function closeComponent(isRefresh: boolean) {
-        componentId.value = '';
-        if (isRefresh) {
-            queryFn()
-        }
+export function handleSpotBtnList(menuType: EnumRouterName) {
+    let firstBtn: BtnList[] = []
+    // 买大厅数据
+    const buyMarket: BuyAndSellMarket = {
+        isMarket: true,
+        btnList: []
     }
-    // 右键回调函数
-    const eventsCB: TableEventCB = {
-        contextmenuCB: (record: T, value: ContextMenuTemp) => {
-            // 控制打开右键
-            contextMenu.value = value
-        },
-        clickCB: (record: T) => {
-            componentId.value = 'warehouse_receipt_trade_floating_price_delisting'
-        }
+
+    // 卖大厅数据
+    const sellMarket: BuyAndSellMarket = {
+        isMarket: true,
+        btnList: []
     }
-    // 表格事件
-    const { expandedRowKeys, selectedRow, Rowclick } = getTableEvent<T>(eventsCB);
     // 表格操作按钮列表
     const list = findChildList(menuType);
     if (list) {
@@ -63,8 +35,7 @@ export function handleComposeTable<T>({ queryFn, menuType, isDetail, tableName,
         }
         // 过滤报价大厅按钮列表
         const temp = list.children.filter(e => e.type === 2)
-        priceBtnList.value = fnMap(temp)
-        priceBtnList.value.push({ lable: '买卖大厅', code: 'buyAndSell', className: 'btnPrimary' })
+        firstBtn = fnMap(temp)
 
         const fn = (code: EnumRouterName) => {
             const findResult = list.children.find(e => e.code === code)
@@ -82,6 +53,39 @@ export function handleComposeTable<T>({ queryFn, menuType, isDetail, tableName,
         // 处理卖大厅
         Object.assign(sellMarket, fn(EnumRouterName.spot_trade_warehouse_sell_hall))
     }
+    return { firstBtn, buyMarket, sellMarket }
+}
+
+// 表格 + 表头 + 右键 + 单击表格 + 按钮列表 通用处理逻辑
+export function handleComposeTable<T>({ queryFn, menuType, isDetail, tableName, tableFilterKey }: ComposeTableParam) {
+    // 右键逻辑
+    const { contextMenu, openContext, closeContext: closeContextAction } = handleContextMenu();
+    // 表头数据
+    const { columns, registerColumn, updateColumn } = getTableColumns();
+    // 控制异步组件
+    const componentId = ref<string>('');
+    // 关闭组件
+    function closeComponent(isRefresh: boolean) {
+        componentId.value = '';
+        if (isRefresh) {
+            queryFn()
+        }
+    }
+    // 右键回调函数
+    const eventsCB: TableEventCB = {
+        contextmenuCB: (record: T, value: ContextMenuTemp) => {
+            // 控制打开右键
+            contextMenu.value = value
+        },
+        clickCB: (record: T) => {
+            componentId.value = buyAndSellEunm
+        }
+    }
+    // 表格事件
+    const { expandedRowKeys, selectedRow, Rowclick } = getTableEvent<T>(eventsCB);
+    // 表格操作按钮列表
+    const { firstBtn } = handleSpotBtnList(menuType)
+    firstBtn.push({ lable: '买卖大厅', code: buyAndSellEunm, className: 'btnPrimary' })
 
     // 关闭右键
     function closeContext(value: BtnList | null) {
@@ -104,10 +108,6 @@ export function handleComposeTable<T>({ queryFn, menuType, isDetail, tableName,
         columns, registerColumn, updateColumn,  // 表头
         expandedRowKeys, selectedRow, Rowclick, // 表格折腾面板数据与单击、双击事件
         componentId, closeComponent,  // 控制异步组件
-        firstBtn: priceBtnList, // 表格按钮
+        firstBtn, // 表格按钮
     }
 }
-
-export function getBuyAndSellMarketData() {
-    return { buyMarket, sellMarket }
-}

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_floating_price/index.vue

@@ -16,6 +16,7 @@
                  :list="firstBtn"></contextMenu>
     <component :is="componentId"
                v-if="componentId"
+               :enumName="name"
                :selectedRow="selectedRow"
                @cancel="closeComponent"></component>
   </div>
@@ -59,6 +60,7 @@ export default defineComponent({
         };
         return {
             ...handleComposeTable<WrOrderQuote>(param),
+            name: EnumRouterName.warehouse_receipt_trade_floating_price,
             loading,
             tableList,
         };

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_price/index.vue

@@ -16,6 +16,7 @@
                  :list="firstBtn"></contextMenu>
     <component :is="componentId"
                v-if="componentId"
+               :enumName="name"
                :selectedRow="selectedRow"
                @cancel="closeComponent"></component>
   </div>
@@ -59,6 +60,7 @@ export default defineComponent({
         };
         return {
             ...handleComposeTable<WrOrderQuote>(param),
+            name: EnumRouterName.warehouse_receipt_trade_price,
             loading,
             tableList,
         };