update

src/common/components/btnList/index.vue

@@ -11,14 +11,14 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { BtnList } from './interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 
 export default defineComponent({
     props: {
         btnList: {
             // 按钮列表数据
             default: [],
-            type: Array as PropType<BtnList[]>,
+            type: Array as PropType<BtnListType[]>,
         },
         record: {
             default: {},
@@ -26,7 +26,7 @@ export default defineComponent({
         },
     },
     setup(props, context) {
-        function onClick(item: BtnList) {
+        function onClick(item: BtnListType) {
             console.log(`${item.lable}:${item.code}`);
             context.emit('click', item, props.record);
         }

src/common/components/btnList/interface.ts

@@ -1,6 +1,7 @@
 export type BtnClassName = 'btnDeafault' | 'btnPrimary' | 'btnDanger' | 'operBtn'
-export interface BtnList {
+export interface BtnListType {
     lable: string;  // 按钮名字
     code: string;   //
+    callback?: Function;
     className: BtnClassName    // 按钮 class 名字
 }

src/common/components/contextMenu/temp.vue

@@ -1,15 +1,20 @@
 <template>
-    <div class="context-menus-container" v-if="contextMenu.show" @click="close">
-        <ul class="context-menu" :style="styleParam">
-            <li v-for="(item, index) in list" :key="index" @click.stop="choose(item)">{{item.lable}}</li>
-        </ul>
-    </div>
+  <div class="context-menus-container"
+       v-if="contextMenu.show"
+       @click="close">
+    <ul class="context-menu"
+        :style="styleParam">
+      <li v-for="(item, index) in list"
+          :key="index"
+          @click.stop="choose(item)">{{item.lable}}</li>
+    </ul>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, computed, watch, watchEffect, ref, reactive } from 'vue';
 import { ContextMenuTemp } from './interface';
-import { BtnList } from '../btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 
 export default defineComponent({
     name: 'context-menu',
@@ -23,11 +28,11 @@ export default defineComponent({
         },
         list: {
             default: [],
-            type: Array as PropType<BtnList[]>,
+            type: Array as PropType<BtnListType[]>,
         },
     },
     setup(props, context) {
-        function choose(item: BtnList) {
+        function choose(item: BtnListType) {
             console.log(`${item.lable}:${item.code}`);
             context.emit('cancel', item);
         }

src/common/setup/asyncComponent/index.ts

@@ -1,4 +1,4 @@
-import { BtnList as btnType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { Ref, ref } from "vue";
 
 // 控制异步组件的关闭功能
@@ -19,7 +19,7 @@ export function handleModalComponent<T>(callback: Function, selectedRow: Ref<T>)
      * @param item
      * @param record
      */
-    function openComponent(item: btnType, record: T) {
+    function openComponent(item: BtnListType, record: T) {
         console.log('打开组件: ', item.code)
         // 更新点击的数据，处理例如，修改之后，再次打开页面是之前的数据的问题
         if (record && selectedRow) {

src/common/setup/table/button.ts

@@ -1,11 +1,11 @@
-import { BtnList as btnType } from '@/common/components/btnList/interface';
+import { BtnClassName, BtnListType } from '@/common/components/btnList/interface';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { ModalName } from '@/common/constants/modalName';
 import { OperationTabMenu } from '@/services/go/commonService/interface';
 import { sessionStorageUtil } from "@/utils/storage";
 import { inject, ref, Ref, toRaw, unref } from 'vue';
 import { openModal } from "../modal";
-import { BtnClassName, BtnList, ButtonListKey } from './interface';
+import { ButtonListKey } from './interface';
 
 /**
  * 获取class 名
@@ -44,14 +44,14 @@ export function getThirdMenuData(): OperationTabMenu[] {
 }
 // 旧的获取配置按钮逻辑，
 export function handleBtnList(list: OperationTabMenu | undefined, menuType: keyof ButtonListKey, hasDetail: boolean, commonName: string[] = ['新增']) {
-    const commonBtn = ref<BtnList[]>([]); // 通用按钮列表，不用选中数据才显示
-    const forDataBtn = ref<BtnList[]>([]); // 针对数据按钮列表，选中某条数据才显示
+    const commonBtn = ref<BtnListType[]>([]); // 通用按钮列表，不用选中数据才显示
+    const forDataBtn = ref<BtnListType[]>([]); // 针对数据按钮列表，选中某条数据才显示
     if (list && list.children) {
         list.children.forEach(e => {
             const { code, type, title, isshow } = e;
             if (type === 2 && isshow) { // 按钮类型
                 const { openAction } = openModal(code as keyof ModalName);
-                const item = { lable: title, callback: openAction, className: getClassName(code) }
+                const item = { lable: title, callback: openAction, className: getClassName(code), code: code }
                 if (commonName.includes(title)) { //
                     commonBtn.value.push(item)
                 } else {
@@ -65,14 +65,14 @@ export function handleBtnList(list: OperationTabMenu | undefined, menuType: keyo
     // 详情
     if (hasDetail) {
         const { openAction } = openModal('detail')
-        forDataBtn.value.push({ lable: '详情', callback: openAction, className: getClassName('') })
+        forDataBtn.value.push({ lable: '详情', callback: openAction, className: getClassName(''), code: 'detail' })
     }
     return { commonBtn, forDataBtn }
 }
 
 // 新的获取按钮逻辑，有时间把旧的都替换掉
 export function _handleBtnList_(list: OperationTabMenu | undefined, hasDetail: boolean,) {
-    const result = ref<btnType[][]>([])
+    const result = ref<BtnListType[][]>([])
     const temp: [number, OperationTabMenu[] | undefined] = [0, list?.children]
     while (temp[1] && temp[1].length) {
         temp[1].forEach((e) => {
@@ -117,7 +117,7 @@ export function _handleBtnList_(list: OperationTabMenu | undefined, hasDetail: b
 }
 
 export function _handleBtnList(list: OperationTabMenu | undefined, hasDetail: boolean,) {
-    const result = ref<BtnList[][]>([])
+    const result = ref<BtnListType[][]>([])
     const temp: [number, OperationTabMenu[] | undefined] = [0, list?.children]
     while (temp[1] && temp[1].length) {
         temp[1].forEach((e) => {
@@ -128,7 +128,7 @@ export function _handleBtnList(list: OperationTabMenu | undefined, hasDetail: bo
             }
             if (type === 2 && isshow) { // 按钮类型 并且显示
                 const { openAction } = openModal(code as keyof ModalName);
-                const item = { lable: title, callback: openAction, className: getClassName(code) }
+                const item = { lable: title, callback: openAction, className: getClassName(code), code: code }
                 result.value[index].push(item)
             }
         })
@@ -143,7 +143,7 @@ export function _handleBtnList(list: OperationTabMenu | undefined, hasDetail: bo
     // 详情
     if (hasDetail) {
         const { openAction } = openModal('detail')
-        const item = { lable: '详情', callback: openAction, className: getClassName('') }
+        const item = { lable: '详情', callback: openAction, className: getClassName(''), code: 'detail' }
         const len = result.value.length;
         if (len) {
             result.value[len - 1].push(item)
@@ -158,7 +158,7 @@ export function _handleBtnList(list: OperationTabMenu | undefined, hasDetail: bo
 
 // 获取单据按钮列表
 export function getOrderBtnList(list: OperationTabMenu[], hasDetail = false) {
-    const result = ref<btnType[]>([])
+    const result = ref<BtnListType[]>([])
     list.forEach(el => {
         const { code, type, title, isshow } = el;
         if (type === 2 && isshow) {
@@ -187,7 +187,7 @@ export function getBtnList(menuType: keyof ButtonListKey, hasDetail: boolean, co
     return handleBtnList(list, menuType, hasDetail, commonName)
 }
 
-export function _getBtnList(menuType: keyof ButtonListKey, hasDetail: boolean): Ref<BtnList[][]> {
+export function _getBtnList(menuType: keyof ButtonListKey, hasDetail: boolean): Ref<BtnListType[][]> {
     const data = getThirdMenuData()
     const list = data.find((e) => e.code === menuType);
     return _handleBtnList(list, hasDetail)

src/common/setup/table/compose.ts

@@ -1,4 +1,4 @@
-import { BtnList } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { ContextMenuTemp } from "@/common/components/contextMenu/interface";
 import { handleContextMenu } from "@/common/components/contextMenu/setup";
 import { TabList } from '@/common/components/description/interface';
@@ -6,8 +6,9 @@ import { getTableColumns, getTableEvent, initData } from "@/common/export/table"
 import { handleModalComponent } from '@/common/setup/asyncComponent';
 import { onUnmounted, ref, Ref } from "vue";
 import { getBtnList_, getOrderBtnList, getThirdMenuData } from "./button";
+import { handleTableColums } from './clolumn';
 import { handleTableDrawer } from "./drawer";
-import { ComposeOrderTableParam, ComposeTableDetailParam, ComposeTableParam, TableEventCB } from "./interface";
+import { ComposeOrderTableParam, ComposeTableDetailParam, ComposeTableParam, TableEventCB, TableParam } from "./interface";
 
 export type { ComposeTableParam, ComposeTableDetailParam };
 
@@ -31,7 +32,7 @@ export function handleComposeTable<T>({ queryFn, menuType, isDetail, tableName,
     // 控制异步组件
     const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, selectedRow);
     // 关闭右键
-    function closeContext(value: BtnList | null) {
+    function closeContext(value: BtnListType | null) {
         // 打开对应的弹窗组件
         if (value) openComponent(value, selectedRow.value)
         // 关闭右键
@@ -131,7 +132,7 @@ export function handleComposeOrderTable<T>({ queryFn, recordList, isDetail, tabl
     // 控制异步组件
     const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, selectedRow);
     // 关闭右键
-    function closeContext(value: BtnList | null) {
+    function closeContext(value: BtnListType | null) {
         // 打开对应的弹窗组件
         if (value) openComponent(value, selectedRow.value)
         // 关闭右键
@@ -153,4 +154,46 @@ export function handleComposeOrderTable<T>({ queryFn, recordList, isDetail, tabl
         componentId, closeComponent, openComponent,  // 控制异步组件
         btnList, // 表格按钮
     }
+}
+
+
+export function handleTableEventAndData<T>({ queryFn, columnsList, clickName }: TableParam) {
+    // 右键逻辑
+    const { contextMenu, openContext, closeContext: closeContextAction } = handleContextMenu();
+    // 表头
+    const { columns, updateColumn } = handleTableColums(columnsList);
+    // 控制异步组件
+    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) => {
+            clickName && (componentId.value = clickName)
+        }
+    }
+    // 表格事件
+    const { expandedRowKeys, selectedRow, Rowclick } = getTableEvent<T>(eventsCB);
+    // 关闭右键
+    function closeContext(value: BtnListType | null) {
+        // 打开对应的弹窗组件
+        if (value) componentId.value = value.code;
+        // 关闭右键
+        closeContextAction()
+    }
+    return {
+        contextMenu, openContext, closeContext, // 右键
+        columns, updateColumn,  // 表头
+        expandedRowKeys, selectedRow, Rowclick, // 表格折腾面板数据与单击、双击事件
+        componentId, closeComponent,  // 控制异步组件
+    }
 }

src/common/setup/table/event.ts

@@ -7,7 +7,7 @@ import { TableEventCB } from './interface';
  * @param param TableEventCB
  * @returns
  */
-export function getTableEvent<T>(param: TableEventCB) {
+export function getTableEvent<T>(param: TableEventCB = {}) {
     // 表格展开行
     const expandedRowKeys = ref<string[]>([]);
     // 表格选中的数据

src/common/setup/table/interface.ts

@@ -1,5 +1,5 @@
 import { EnumRouterName } from "@/common/constants/enumRouterName";
-import { TableKey } from "@/common/methods/table/interface";
+import { ColumnType, TableKey } from "@/common/methods/table/interface";
 import { OperationTabMenu } from "@/services/go/commonService/interface";
 
 export interface TableEventCB {
@@ -37,6 +37,13 @@ export interface ComposeTableDetailParam {
     menuType: EnumRouterName
 }
 
+export interface TableParam {
+    queryFn: Function,
+    columnsList: ColumnType[],
+    clickName?: string,
+}
+
+
 export interface ComposeOrderTableParam {
     queryFn: Function,  // 查询表格数据
     recordList: OperationTabMenu[], // 当前tab页配置数据

src/views/business/plan/list/uncommitted/index.vue

@@ -46,7 +46,7 @@ import { queryTableList, BtnList, contextMenu, defineAsyncComponent, defineCompo
 
 import { Filter } from '../../components';
 import { getPlanContractType, getPlanStatusName } from '@/views/business/plan/setup';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { Ermcp3HedgePlan } from '@/services/go/ermcp/plan/interface';
 import { QueryHedgePlan } from '@/services/go/ermcp/plan';
 import { EnumRouterName } from '@/common/constants/enumRouterName';

src/views/information/account_info/list/setup.ts

@@ -1,5 +1,4 @@
-import { BtnList } from '@/common/components/btnList/interface';
-import { BtnList as OldBtnType } from "@/common/setup/table/interface";
+import { BtnListType } from '@/common/components/btnList/interface';
 import { ErmcpLoginUserEx } from "@/services/go/ermcp/account/interface";
 import { reactive, ref, Ref } from "vue";
 
@@ -97,7 +96,7 @@ export function handleModalData<T extends object>() {
     return { selectedData, openAction }
 }
 
-export function _handleTableList(fn: Function, tableList: Ref<ErmcpLoginUserEx[]>, btnList: BtnList[]) {
+export function _handleTableList(fn: Function, tableList: Ref<ErmcpLoginUserEx[]>, btnList: BtnListType[]) {
     fn().then(() => {
         tableList.value.forEach((el) => {
             // 过滤无效
@@ -119,7 +118,7 @@ export function _handleTableList(fn: Function, tableList: Ref<ErmcpLoginUserEx[]
     });
 }
 
-export function handleTableList(fn: Function, tableList: Ref<ErmcpLoginUserEx[]>, btnList: OldBtnType[]) {
+export function handleTableList(fn: Function, tableList: Ref<ErmcpLoginUserEx[]>, btnList: BtnListType[]) {
     fn().then(() => {
         tableList.value.forEach((el) => {
             // 过滤无效

src/views/manage/business-review/list/settlement/index.vue

@@ -64,7 +64,7 @@ import { Column, ColumnType } from '@/common/setup/table';
 import { getPriceTypeName, getContractTypeName, getApplyStatusName } from '@/common/constants/enumsName';
 import { getAnalogueName } from '@/views/information/spot-contract/setup';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 const Detail = defineAsyncComponent(() => import('../../components/settlementDetail/index.vue'));
 const Audit = defineAsyncComponent(() => import('../../components/settlementAudit/index.vue'));
 const Cancel = defineAsyncComponent(() => import('../../components/settlementCancel/index.vue'));

src/views/manage/business-review/list/someprice/index.vue

@@ -61,7 +61,7 @@ import { getPriceTypeName, getContractStatusName, getContractTypeName, getApplyS
 import { getAnalogueName } from '@/views/information/spot-contract/setup';
 import { Column, ColumnType } from '@/common/setup/table';
 import { ref } from 'vue';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 const Detail = defineAsyncComponent(() => import('../../components/somepriceDetail/index.vue'));
 const Audit = defineAsyncComponent(() => import('../../components/somepriceAudit/index.vue'));

src/views/manage/finance-review/list/funds/index.vue

@@ -72,7 +72,7 @@ import { invoiceStatusName, operateApplyTypeName, stateName } from '@/views/mana
 import { getContractTypeName, getApplyStatusName } from '@/common/constants/enumsName';
 import { Column, ColumnType } from '@/common/setup/table';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 
 const Detail = defineAsyncComponent(() => import('../../components/fundsDetail/index.vue'));
 const Audit = defineAsyncComponent(() => import('../../components/fundsAudit/index.vue'));

src/views/manage/finance-review/list/invoice/index.vue

@@ -62,7 +62,7 @@ import { invoiceStatusName, operateApplyTypeName } from '@/views/manage/finance-
 import { Column, ColumnType } from '@/common/setup/table';
 import { getContractTypeName, getApplyStatusName } from '@/common/constants/enumsName';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 
 const Detail = defineAsyncComponent(() => import('../../components/invoiceDetail/index.vue'));
 const Audit = defineAsyncComponent(() => import('../../components/invoiceAudit/index.vue'));

src/views/manage/inventory-review/list/checkin/index.vue

@@ -64,7 +64,7 @@ import { operateApplyTypeName } from '@/views/manage/finance-review/setup';
 import { InOutTypeName } from '@/views/manage/inventory-review/setup';
 import { Column, ColumnType } from '@/common/setup/table';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 const Detail = defineAsyncComponent(() => import('../../components/checkinDetail/index.vue'));
 const Audit = defineAsyncComponent(() => import('../../components/checkinAudit/index.vue'));
 const Cancel = defineAsyncComponent(() => import('../../components/checkinCancel/index.vue'));

src/views/manage/inventory-review/list/checkout/index.vue

@@ -63,7 +63,7 @@ import { operateApplyTypeName } from '@/views/manage/finance-review/setup';
 import { InOutTypeName } from '@/views/manage/inventory-review/setup';
 import { Column, ColumnType } from '@/common/setup/table';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 const Detail = defineAsyncComponent(() => import('../../components/checkoutDetail/index.vue'));
 const Audit = defineAsyncComponent(() => import('../../components/checkoutAudit/index.vue'));
 const Cancel = defineAsyncComponent(() => import('../../components/checkoutCancel/index.vue'));

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

@@ -1,41 +1,35 @@
 <template>
-    <!--  现货贸易 - 买卖大厅 - 卖报价牌 -->
-    <a-table
-        :columns="handleColumn(columns)"
-        :class="['buyHallTable', isBottom ? '' : 'buyHallTableHigh', tableList.length ? '' : 'noDataTable']"
-        :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 470px)' : 'calc(100vh - 180px)' }"
-        :pagination="false"
-        :loading="loading"
-        :expandedRowKeys="expandedRowKeys"
-        :customRow="Rowclick"
-        :expandIcon="expandIcon"
-        :expandIconAsCell="false"
-        rowKey="key"
-        :data-source="tableList"
-    >
-        <!-- ,  -->
-        <!-- 额外的展开行 -->
-        <template #expandedRowRender="{ record }">
-            <BtnList
-                :btnList="btnList"
-                :record="record"
-                class="btn-list-sticky"
-                @click="openComponent"
-            />
-        </template>
-        <template #username="{text, record }">
-            <span>{{record.userid + " "}}{{text}}</span>
-        </template>
-    </a-table>
-    <component
-        :is="componentId"
-        v-if="componentId"
-        :selectedRow="selectedRow"
-        :buyOrSell="BuyOrSell.buy"
-        :enumName="enumName"
-        :parantSelectedRow="parantSelectedRow"
-        @cancel="closeComponent"
-    ></component>
+  <!--  现货贸易 - 买卖大厅 - 卖报价牌 -->
+  <a-table :columns="handleColumn(columns)"
+           :class="['buyHallTable', isBottom ? '' : 'buyHallTableHigh', tableList.length ? '' : 'noDataTable']"
+           :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 470px)' : 'calc(100vh - 180px)' }"
+           :pagination="false"
+           :loading="loading"
+           :expandedRowKeys="expandedRowKeys"
+           :customRow="Rowclick"
+           :expandIcon="expandIcon"
+           :expandIconAsCell="false"
+           rowKey="key"
+           :data-source="tableList">
+    <!-- ,  -->
+    <!-- 额外的展开行 -->
+    <template #expandedRowRender="{ record }">
+      <BtnList :btnList="btnList"
+               :record="record"
+               class="btn-list-sticky"
+               @click="openComponent" />
+    </template>
+    <template #username="{text, record }">
+      <span>{{record.userid + " "}}{{text}}</span>
+    </template>
+  </a-table>
+  <component :is="componentId"
+             v-if="componentId"
+             :selectedRow="selectedRow"
+             :buyOrSell="BuyOrSell.buy"
+             :enumName="enumName"
+             :parantSelectedRow="parantSelectedRow"
+             @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
@@ -45,7 +39,7 @@ import { _closeModal } from '@/common/setup/modal/modal';
 import { queryOrderQuoteDetail } from '@/services/go/wrtrade';
 import { QueryOrderQuoteDetailReq, WrOrderQuote, WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
 import { defineAsyncComponent, PropType } from 'vue';
-import { BtnList as btnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { getBuyMarketParam } from '../../setup';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { expandIcon } from '@/common/setup/table/clolumn';
@@ -64,7 +58,7 @@ export default defineComponent({
         },
         btnList: {
             default: [],
-            type: Array as PropType<btnListType[]>,
+            type: Array as PropType<BtnListType[]>,
         },
         parantSelectedRow: {
             type: Object as PropType<WrOrderQuote>,

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

@@ -1,35 +1,33 @@
 <template>
-    <!-- 现货贸易 - 买卖大厅 - 买报价牌 -->
-    <a-table
-        :columns="handleColumn(columns)"
-        :class="['sellHallTable', isBottom ? '' : 'sellHallTableHigh', tableList.length ? '' : 'noDataTable']"
-        :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 470px)' : 'calc(100vh - 180px)' }"
-        :pagination="false"
-        :loading="loading"
-        :expandedRowKeys="expandedRowKeys"
-        :customRow="Rowclick"
-        :expandIcon="expandIcon"
-        :expandIconAsCell="false"
-        rowKey="key"
-        :data-source="tableList"
-    >
-        <!-- 额外的展开行 -->
-        <template #expandedRowRender="{ record }">
-            <BtnList :btnList="btnList" :record="record" @click="openComponent" />
-        </template>
-        <template #username="{text, record }">
-            <span>{{record.userid + " " }}{{text}}</span>
-        </template>
-    </a-table>
-    <component
-        :is="componentId"
-        v-if="componentId"
-        :selectedRow="selectedRow"
-        :enumName="enumName"
-        :buyOrSell="BuyOrSell.sell"
-        :parantSelectedRow="parantSelectedRow"
-        @cancel="closeComponent"
-    ></component>
+  <!-- 现货贸易 - 买卖大厅 - 买报价牌 -->
+  <a-table :columns="handleColumn(columns)"
+           :class="['sellHallTable', isBottom ? '' : 'sellHallTableHigh', tableList.length ? '' : 'noDataTable']"
+           :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 470px)' : 'calc(100vh - 180px)' }"
+           :pagination="false"
+           :loading="loading"
+           :expandedRowKeys="expandedRowKeys"
+           :customRow="Rowclick"
+           :expandIcon="expandIcon"
+           :expandIconAsCell="false"
+           rowKey="key"
+           :data-source="tableList">
+    <!-- 额外的展开行 -->
+    <template #expandedRowRender="{ record }">
+      <BtnList :btnList="btnList"
+               :record="record"
+               @click="openComponent" />
+    </template>
+    <template #username="{text, record }">
+      <span>{{record.userid + " " }}{{text}}</span>
+    </template>
+  </a-table>
+  <component :is="componentId"
+             v-if="componentId"
+             :selectedRow="selectedRow"
+             :enumName="enumName"
+             :buyOrSell="BuyOrSell.sell"
+             :parantSelectedRow="parantSelectedRow"
+             @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
@@ -39,7 +37,7 @@ import { _closeModal } from '@/common/setup/modal/modal';
 import { queryOrderQuoteDetail } from '@/services/go/wrtrade';
 import { QueryOrderQuoteDetailReq, WrOrderQuote, WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
 import { defineAsyncComponent, PropType } from 'vue';
-import { BtnList as btnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { getSellMarketParam } from '../../setup';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { expandIcon } from '@/common/setup/table/clolumn';
@@ -58,7 +56,7 @@ export default defineComponent({
         },
         btnList: {
             default: [],
-            type: Array as PropType<btnListType[]>,
+            type: Array as PropType<BtnListType[]>,
         },
         parantSelectedRow: {
             type: Object as PropType<WrOrderQuote>,

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

@@ -1,109 +1,112 @@
 <template>
-    <!-- 买卖大厅 -->
-    <div class="buy-sell-market">
-        <div class="buy-sell-market-title">
-            <a class="backIcon" @click="cancel">
-                <LeftOutlined />
-            </a>
-            <div class="titleBtn">
-                <div class="name">{{selectedRow.deliverygoodsname}}</div>
-                <div class="arrowRightIcon"></div>
-            </div>
-            <div class="titleBtn titleBtn2">
-                <div class="arrowLeftIcon"></div>
-                <div class="name">{{selectedRow.wrgoodsname}}</div>
-                <div class="arrowRightIcon"></div>
-            </div>
-            <div class="titleBtn titleBtn2">
-                <div class="arrowLeftIcon"></div>
-                <div class="name">{{selectedRow.warehousename}}</div>
-                <div class="arrowRightIcon"></div>
-            </div>
-            <div class="titleBtn titleBtn3" v-if="!isWR(enumName)">
-                <div class="arrowLeftIcon"></div>
-                <div class="name">
-                    <a-month-picker
-                        :allowClear="false"
-                        v-model:value="time"
-                        @change="timeChange"
-                        class="commonDatePicker conditionPicker"
-                    />
-                </div>
-                <DownOutlined />
-            </div>
+  <!-- 买卖大厅 -->
+  <div class="buy-sell-market">
+    <div class="buy-sell-market-title">
+      <a class="backIcon"
+         @click="cancel">
+        <LeftOutlined />
+      </a>
+      <div class="titleBtn">
+        <div class="name">{{selectedRow.deliverygoodsname}}</div>
+        <div class="arrowRightIcon"></div>
+      </div>
+      <div class="titleBtn titleBtn2">
+        <div class="arrowLeftIcon"></div>
+        <div class="name">{{selectedRow.wrgoodsname}}</div>
+        <div class="arrowRightIcon"></div>
+      </div>
+      <div class="titleBtn titleBtn2">
+        <div class="arrowLeftIcon"></div>
+        <div class="name">{{selectedRow.warehousename}}</div>
+        <div class="arrowRightIcon"></div>
+      </div>
+      <div class="titleBtn titleBtn3"
+           v-if="!isWR(enumName)">
+        <div class="arrowLeftIcon"></div>
+        <div class="name">
+          <a-month-picker :allowClear="false"
+                          v-model:value="time"
+                          @change="timeChange"
+                          class="commonDatePicker conditionPicker" />
+        </div>
+        <DownOutlined />
+      </div>
 
-            <div class="priceBar bdf1 ml20">
-                <div class="greenBar green">
-                    <div class="numBlock" v-if="isFloat()">
-                        <div class="first">卖基差</div>
-                        <div class="last">{{selectedRow.sellpricemove}}</div>
-                    </div>
-                    <div class="numBlock" v-else>
-                        <div class="first">卖价</div>
-                        <div class="last">{{selectedRow.sellprice}}</div>
-                    </div>
-                    <div class="numBlock">
-                        <div class="first">卖量</div>
-                        <div class="last">{{selectedRow.sellqty}}</div>
-                    </div>
-                </div>
-                <div class="redBar red">
-                    <div class="numBlock" v-if="isFloat()">
-                        <div class="first">买基差</div>
-                        <div class="last">{{selectedRow.buypricemove}}</div>
-                    </div>
-                    <div class="numBlock ml15" v-else>
-                        <div class="first">买价</div>
-                        <div class="last">{{selectedRow.buyprice}}</div>
-                    </div>
-                    <div class="numBlock">
-                        <div class="first">买量</div>
-                        <div class="last">{{selectedRow.buyqty}}</div>
-                    </div>
-                </div>
-            </div>
-            <div class="market" v-if="isFloat()">
-                <div class="first">{{selectedRow.goodscode}}</div>
-                <div class="last red">{{getGoodsPrice()}}</div>
-                <LineChartOutlined />
-            </div>
-            <!-- 历史走势按钮 -->
-            <!-- <a-button class="historyBtn">
+      <div class="priceBar bdf1 ml20">
+        <div class="greenBar green">
+          <div class="numBlock"
+               v-if="isFloat()">
+            <div class="first">卖基差</div>
+            <div class="last">{{selectedRow.sellpricemove}}</div>
+          </div>
+          <div class="numBlock"
+               v-else>
+            <div class="first">卖价</div>
+            <div class="last">{{selectedRow.sellprice}}</div>
+          </div>
+          <div class="numBlock">
+            <div class="first">卖量</div>
+            <div class="last">{{selectedRow.sellqty}}</div>
+          </div>
+        </div>
+        <div class="redBar red">
+          <div class="numBlock"
+               v-if="isFloat()">
+            <div class="first">买基差</div>
+            <div class="last">{{selectedRow.buypricemove}}</div>
+          </div>
+          <div class="numBlock ml15"
+               v-else>
+            <div class="first">买价</div>
+            <div class="last">{{selectedRow.buyprice}}</div>
+          </div>
+          <div class="numBlock">
+            <div class="first">买量</div>
+            <div class="last">{{selectedRow.buyqty}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="market"
+           v-if="isFloat()">
+        <div class="first">{{selectedRow.goodscode}}</div>
+        <div class="last red">{{getGoodsPrice()}}</div>
+        <LineChartOutlined />
+      </div>
+      <!-- 历史走势按钮 -->
+      <!-- <a-button class="historyBtn">
                 历史走势
                 <LineChartOutlined />
             </a-button>-->
-            <BtnList :btnList="firstBtn" :record="selectedRow" @click="openComponent" />
-        </div>
-        <a-row class="buySellHall">
-            <a-col :span="12" v-if="sellMarket.isMarket">
-                <Sell
-                    :enumName="enumName"
-                    ref="sellRef"
-                    :parantSelectedRow="selectedRow"
-                    :time="time"
-                    :btnList="handleBtnList(sellMarket.btnList)"
-                />
-            </a-col>
-            <a-col :span="12" v-if="buyMarket.isMarket">
-                <Buy
-                    :enumName="enumName"
-                    ref="buyRef"
-                    :time="time"
-                    :parantSelectedRow="selectedRow"
-                    :btnList="handleBtnList(buyMarket.btnList)"
-                />
-            </a-col>
-        </a-row>
-        <component
-            :is="componentId"
-            v-if="componentId"
-            :selectedRow="selectedRow"
-            :goodsPrice="getGoodsPrice()"
-            :enumName="enumName"
-            :time="time"
-            @cancel="closeComponent"
-        ></component>
+      <BtnList :btnList="firstBtn"
+               :record="selectedRow"
+               @click="openComponent" />
     </div>
+    <a-row class="buySellHall">
+      <a-col :span="12"
+             v-if="sellMarket.isMarket">
+        <Sell :enumName="enumName"
+              ref="sellRef"
+              :parantSelectedRow="selectedRow"
+              :time="time"
+              :btnList="handleBtnList(sellMarket.btnList)" />
+      </a-col>
+      <a-col :span="12"
+             v-if="buyMarket.isMarket">
+        <Buy :enumName="enumName"
+             ref="buyRef"
+             :time="time"
+             :parantSelectedRow="selectedRow"
+             :btnList="handleBtnList(buyMarket.btnList)" />
+      </a-col>
+    </a-row>
+    <component :is="componentId"
+               v-if="componentId"
+               :selectedRow="selectedRow"
+               :goodsPrice="getGoodsPrice()"
+               :enumName="enumName"
+               :time="time"
+               @cancel="closeComponent"></component>
+  </div>
 </template>
 
 <script lang="ts">
@@ -124,7 +127,7 @@ import { addSubscribeQuotation, removeSubscribeQuotation } from '@/services/sock
 import Bus from '@/utils/eventBus/index';
 import { getQuoteDayInfoByCodeFindPrice } from '@/services/bus/goods';
 import TimerUtils from '@/utils/timer/timerUtil';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import moment, { Moment } from 'moment';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 

src/views/market/spot_trade/setup.ts

@@ -1,4 +1,4 @@
-import { BtnList } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { ContextMenuTemp } from "@/common/components/contextMenu/interface";
 import { handleContextMenu } from "@/common/components/contextMenu/setup";
 import { EnumRouterName } from '@/common/constants/enumRouterName';
@@ -15,7 +15,7 @@ import { BuyAndSellMarket, TreeDataItem } from './interface';
 const buyAndSellEunm = 'buyAndSell'
 
 export function handleSpotBtnList(menuType: EnumRouterName) {
-    let firstBtn: BtnList[] = []
+    let firstBtn: BtnListType[] = []
     // 买大厅数据
     const buyMarket: BuyAndSellMarket = {
         isMarket: true,
@@ -91,7 +91,7 @@ export function handleComposeTable<T>({ queryFn, menuType, isDetail, tableName,
     firstBtn.push({ lable: '买卖大厅', code: buyAndSellEunm, className: 'btnPrimary' })
 
     // 关闭右键
-    function closeContext(value: BtnList | null) {
+    function closeContext(value: BtnListType | null) {
         // 打开对应的弹窗组件
         if (value) componentId.value = value.code;
         // 关闭右键

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

@@ -39,7 +39,7 @@ import { _closeModal } from '@/common/setup/modal/modal';
 import { queryOrderQuoteDetail, queryWrTradeOrderDetail } from '@/services/go/wrtrade';
 import { QueryOrderQuoteDetailReq, WrOrderQuote, WrOrderQuoteDetail, WrTradeOrderDetailReq } from '@/services/go/wrtrade/interface';
 import { defineAsyncComponent, PropType } from 'vue';
-import { BtnList as btnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { expandIcon } from '@/common/setup/table/clolumn';
 import { ColumnType } from '@/common/methods/table/interface';
@@ -57,7 +57,7 @@ export default defineComponent({
         },
         btnList: {
             default: [],
-            type: Array as PropType<btnListType[]>,
+            type: Array as PropType<BtnListType[]>,
         },
         parantSelectedRow: {
             type: Object as PropType<WrOrderQuote>,

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

@@ -68,7 +68,7 @@ import { addSubscribeQuotation, removeSubscribeQuotation } from '@/services/sock
 import Bus from '@/utils/eventBus/index';
 import { getQuoteDayInfoByCodeFindPrice } from '@/services/bus/goods';
 import TimerUtils from '@/utils/timer/timerUtil';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import moment, { Moment } from 'moment';
 
 export default defineComponent({
@@ -92,6 +92,7 @@ export default defineComponent({
         DownOutlined,
         LineChartOutlined,
         Listing: defineAsyncComponent(() => import('../listing/index.vue')),
+        Detail: defineAsyncComponent(() => import('../detail/index.vue')),
         // [ModalEnum.spot_trade_warehouse_detail]: defineAsyncComponent(() => import('../detail/index.vue')),
         // [ModalEnum.spot_trade_warehouse_post_buying]: defineAsyncComponent(() => import('../post_buying/index.vue')),
     },

src/views/market/spot_trade/spot_trade_order_transaction/components/detail/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <Drawer :title="'详情'"
+          :placement="'right'"
+          :visible="visible"
+          width="486px"
+          height="479px"
+          @cancel="cancel"
+          class="top">
+    <div class="delisting">
+
+    </div>
+  </Drawer>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue';
+import Drawer from '@/common/components/drawer/index.vue';
+import { WrOrderQuote } from '@/services/go/wrtrade/interface';
+
+import { _closeModal } from '@/common/setup/modal/modal';
+
+export default defineComponent({
+    name: 'detail',
+    components: { Drawer },
+    emits: ['cancel', 'update'],
+    props: {
+        selectedRow: {
+            type: Object as PropType<WrOrderQuote>,
+            default: {},
+        },
+    },
+
+    setup(props, context) {
+        const { visible, cancel } = _closeModal(context);
+
+        const loading = ref<boolean>(false);
+
+        return {
+            visible,
+            cancel,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.delisting {
+    width: 100%;
+    height: 100%;
+    .flex;
+    flex-direction: column;
+    overflow: hidden;
+    .condition {
+        width: 100%;
+        height: 48px;
+        margin: 0 16px;
+        padding: 10px 0;
+        border-bottom: 1px solid @m-black6;
+        .inlineflex;
+        .conditionBtn {
+            align-self: center;
+            align-items: center;
+            border: 0;
+            min-width: 80px;
+            height: 28px;
+            line-height: 28px;
+            background: @m-black7;
+            .rounded-corners(3px);
+            font-size: 14px;
+            color: @m-blue0;
+            &:hover {
+                background: @m-black7-hover;
+                color: @m-blue0-hover;
+            }
+        }
+        .conditionBtn + .conditionBtn {
+            margin-left: 10px;
+        }
+    }
+    .ant-form {
+        height: 100%;
+    }
+}
+::v-deep.ant-slider.formSlider {
+    width: 260px;
+}
+::v-deep.ant-input-suffix {
+    position: absolute;
+    right: -25px;
+}
+.unit {
+    margin-left: 70px;
+    width: 260px;
+    .flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: @m-grey41;
+    height: 14px;
+    line-height: 14px;
+}
+.listedBtn {
+    width: 120px;
+    height: 30px;
+    line-height: 30px;
+    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
+    border-radius: 3px;
+    color: @m-white0;
+    font-size: 14px;
+    text-align: center;
+    border: 0;
+    &:hover {
+        background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
+        color: @m-white0-hover;
+    }
+}
+.cancelBtn:extend(.listedBtn) {
+    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%) !important;
+    &:hover {
+        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%) !important;
+        color: @m-white0-hover;
+    }
+}
+.ml10 {
+    margin-left: 10px;
+}
+.ant-form.dialogForm .ant-row.ant-form-item {
+    margin-bottom: 14px;
+}
+.mt20 {
+    margin-top: 20px;
+}
+.mt-20 {
+    margin-top: -20px;
+}
+.labelTip {
+    font-size: 14px;
+    color: @m-blue16;
+    position: absolute;
+    top: 15px;
+    left: -66px;
+}
+.minusBtn,
+.plusBtn {
+    width: 15px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 15px;
+    color: @m-blue15;
+    cursor: pointer;
+}
+.minusBtn {
+    position: absolute;
+    top: -6px;
+    left: 14px;
+    z-index: 1;
+}
+.plusBtn {
+    position: absolute;
+    top: -6px;
+    right: 14px;
+    z-index: 1;
+}
+.stepper {
+    padding-left: 30px;
+    padding-right: 30px;
+    text-align: center;
+    color: @m-yellow1;
+    font-size: 16px;
+}
+</style>;

src/views/market/spot_trade/spot_trade_order_transaction/components/listing/index.vue

@@ -31,13 +31,12 @@
             <a-col :span="24">
               <a-form-item label="挂牌价格"
                            class="relative"
-                           name="num">
+                           name="price">
                 <a-input-number class="dialogInput yellowInput"
                                 style="width: 260px"
                                 :min="0"
                                 :max="99999"
-                                v-model:value="formState.num" />
-                <span class="input-enumdicname-absolute">{{selectedRow.enumdicname}}</span>
+                                v-model:value="formState.price" />
               </a-form-item>
             </a-col>
           </a-row>

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

@@ -37,7 +37,7 @@ import { _closeModal } from '@/common/setup/modal/modal';
 import { queryOrderQuoteDetail, queryWrTradeOrderDetail } from '@/services/go/wrtrade';
 import { QueryOrderQuoteDetailReq, WrOrderQuote, WrOrderQuoteDetail, WrTradeOrderDetailReq } from '@/services/go/wrtrade/interface';
 import { defineAsyncComponent, PropType } from 'vue';
-import { BtnList as btnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { expandIcon } from '@/common/setup/table/clolumn';
 import { ColumnType } from '@/common/methods/table/interface';
@@ -55,7 +55,7 @@ export default defineComponent({
         },
         btnList: {
             default: [],
-            type: Array as PropType<btnListType[]>,
+            type: Array as PropType<BtnListType[]>,
         },
         parantSelectedRow: {
             type: Object as PropType<WrOrderQuote>,

src/views/market/spot_trade/spot_trade_order_transaction/setup.ts

@@ -38,4 +38,21 @@ export function handleDeliveryRelation(param: deliverytype[]) {
     }
 
     return { deliverGoods, updateGeliverGoods }
-}
+}
+
+export const columnsList = [
+    { title: '序号', key: 'orderid' },
+    { title: '代码', key: 'goodscode' },
+    { title: '名称', key: 'goodsname' },
+    { title: '买价', key: 'bid' },
+    { title: '买量', key: 'bidvolume' },
+    { title: '卖价', key: 'ask' },
+    { title: '卖量', key: 'askvolume' },
+    { title: '最新价', key: 'last' },
+    { title: '涨跌', key: 'goodscode' },
+    { title: '幅度', key: 'goodscode' },
+    { title: '今开', key: 'opened' },
+    { title: '昨收价', key: 'preclose' },
+    { title: '最低价', key: 'lowest' },
+    { title: '最高价', key: 'highest' },
+];

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_basis_difference/index.vue

@@ -16,7 +16,6 @@
                  :list="firstBtn"></contextMenu>
     <component :is="componentId"
                v-if="componentId"
-               :enumName="name"
                :selectedRow="selectedRow"
                @cancel="closeComponent"></component>
   </div>
@@ -24,51 +23,44 @@
 
 <script lang="ts">
 import { EnumRouterName } from '@/common/constants/enumRouterName';
-import { queryTableList, BtnList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
-import { QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
-import { queryOrderQuote } from '@/services/go/wrtrade';
-import { handleComposeTable } from '@/views/market/spot_trade/setup';
-import Bus from '@/utils/eventBus/index';
-import Filter from '../../components/filter/index.vue';
+import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
+
 import { handleDeliveryRelation } from '../setup';
+
 import { handleSubcriteQuote } from '@/common/setup/table/tableQuote';
 import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
+import { columnsList } from '../setup';
+
+import { handleTableEventAndData } from '@/common/setup/table/compose';
+import { TableParam } from '@/common/setup/table/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 export default defineComponent({
     name: EnumRouterName.spot_trade_order_transaction_basis_difference,
     components: {
         contextMenu,
-        // [ModalEnum.spot_trade_warehouse_detail]: defineAsyncComponent(() => import('../../components/detail/index.vue')),
-        // [ModalEnum.spot_trade_warehouse_post_buying]: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
-        buyAndSell: defineAsyncComponent(() => import('../components/buy-sell-market/index.vue')),
-        // postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
+        BuyAndSell: defineAsyncComponent(() => import('../components/buy-sell-market/index.vue')),
+        Listing: defineAsyncComponent(() => import('../components/listing/index.vue')),
+        Detail: defineAsyncComponent(() => import('../components/detail/index.vue')),
     },
     setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrOrderQuote>();
+        const param: TableParam = {
+            columnsList,
+            queryFn: () => {},
+            clickName: 'BuyAndSell',
+        };
+        const btnList: BtnListType[] = [
+            { lable: '挂牌求购', code: 'Listing', className: 'btnDeafault' },
+            { lable: '详情', code: 'Detail', className: 'btnDeafault' },
+            { lable: '买卖大厅', code: 'BuyAndSell', className: 'btnDeafault' },
+        ];
         const { deliverGoods } = handleDeliveryRelation([2, 4]);
         // 行情按需订阅
         handleSubcriteQuote<QueryDeliveryRelationRsp>(deliverGoods);
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteReq = {
-                wrpricetype: 1,
-                haswr: 1,
-            };
-            queryTable(queryOrderQuote, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_price,
-            tableName: 'table_pcweb_spot_trade_warehouse_price',
-            tableFilterKey: [],
-            isDetail: false,
-        };
+
         return {
-            ...handleComposeTable<WrOrderQuote>(param),
-            loading,
-            // tableList,
+            ...handleTableEventAndData(param),
             deliverGoods,
+            btnList,
         };
     },
 });

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_listing_transfer/index.vue

@@ -5,19 +5,16 @@
              class="srcollYTable"
              :scroll="{ x: '100%', y: 'calc(100vh - 479px)' }"
              :pagination="false"
-             :loading="loading"
              :expandedRowKeys="expandedRowKeys"
              :customRow="Rowclick"
              rowKey="key"
-             ref="tableRef"
              :data-source="deliverGoods"></a-table>
     <!-- 右键 -->
     <contextMenu :contextMenu="contextMenu"
                  @cancel="closeContext"
-                 :list="firstBtn"></contextMenu>
+                 :list="btnList"></contextMenu>
     <component :is="componentId"
                v-if="componentId"
-               :enumName="name"
                :selectedRow="selectedRow"
                @cancel="closeComponent"></component>
   </div>
@@ -25,56 +22,45 @@
 
 <script lang="ts">
 import { EnumRouterName } from '@/common/constants/enumRouterName';
-import { queryTableList, BtnList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
-import { QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
-import { queryOrderQuote } from '@/services/go/wrtrade';
-import { handleComposeTable } from '@/views/market/spot_trade/setup';
-import Bus from '@/utils/eventBus/index';
-import Filter from '../../components/filter/index.vue';
+import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
+
 import { handleDeliveryRelation } from '../setup';
-import { ref, onMounted } from 'vue';
+
 import { handleSubcriteQuote } from '@/common/setup/table/tableQuote';
 import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
+import { columnsList } from '../setup';
+
+import { handleTableEventAndData } from '@/common/setup/table/compose';
+import { TableParam } from '@/common/setup/table/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 
 export default defineComponent({
     name: EnumRouterName.spot_trade_order_transaction_listing_transfer,
     components: {
         contextMenu,
-        // [ModalEnum.spot_trade_warehouse_detail]: defineAsyncComponent(() => import('../../components/detail/index.vue')),
-        // [ModalEnum.spot_trade_warehouse_post_buying]: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
-        buyAndSell: defineAsyncComponent(() => import('../components/buy-sell-market/index.vue')),
-        // postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
+        BuyAndSell: defineAsyncComponent(() => import('../components/buy-sell-market/index.vue')),
+        Listing: defineAsyncComponent(() => import('../components/listing/index.vue')),
+        Detail: defineAsyncComponent(() => import('../components/detail/index.vue')),
     },
     setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryDeliveryRelationRsp>();
-        const tableRef = ref<any>(null);
-
+        const param: TableParam = {
+            columnsList,
+            queryFn: () => {},
+            clickName: 'BuyAndSell',
+        };
+        const btnList: BtnListType[] = [
+            { lable: '挂牌求购', code: 'Listing', className: 'btnDeafault' },
+            { lable: '详情', code: 'Detail', className: 'btnDeafault' },
+            { lable: '买卖大厅', code: 'BuyAndSell', className: 'btnDeafault' },
+        ];
         const { deliverGoods } = handleDeliveryRelation([1, 3]);
         // 行情按需订阅
         handleSubcriteQuote<QueryDeliveryRelationRsp>(deliverGoods);
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteReq = {
-                wrpricetype: 1,
-                haswr: 1,
-            };
-            queryTable(queryOrderQuote, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_price,
-            tableName: 'table_pcweb_spot_trade_warehouse_price',
-            tableFilterKey: [],
-            isDetail: false,
-        };
+
         return {
-            ...handleComposeTable<QueryDeliveryRelationRsp>(param),
-            loading,
-            tableList,
+            ...handleTableEventAndData(param),
             deliverGoods,
-            tableRef,
+            btnList,
         };
     },
 });

src/views/order/financing_manager/components/financing_manager_apply_order/index.vue

@@ -34,14 +34,14 @@
         <a>{{ formatTime(record.createtime) }}</a>
       </template>
 
-    <!-- 结算方式 1:按日结息 3:按月结息-->
-        <template #interestsettlemode="{ record }">
-            <a>{{ getInterestSettleModeName(record.interestsettlemode) }}</a>
-        </template>
-        <!-- 费用 -->
-        <template #interestsettlevalue="{ record }">
-            <a>{{ getInterestrateModeName(record.interestratemode, record.interestrate) }}</a>
-        </template>
+      <!-- 结算方式 1:按日结息 3:按月结息-->
+      <template #interestsettlemode="{ record }">
+        <a>{{ getInterestSettleModeName(record.interestsettlemode) }}</a>
+      </template>
+      <!-- 费用 -->
+      <template #interestsettlevalue="{ record }">
+        <a>{{ getInterestrateModeName(record.interestratemode, record.interestrate) }}</a>
+      </template>
 
     </a-table>
     <component :is="componentId"
@@ -62,13 +62,8 @@ import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { formatTime } from '@/common/methods';
 import Bus from '@/utils/eventBus/index';
 import { expandIcon } from '@/common/setup/table/clolumn';
-import {
-    getApplyStatusFinanceName,
-    getFinanceTypeName,
-    getInterestrateModeName,
-    getInterestSettleModeName
-} from '@/common/constants/enumsName';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { getApplyStatusFinanceName, getFinanceTypeName, getInterestrateModeName, getInterestSettleModeName } from '@/common/constants/enumsName';
+import { BtnListType } from '@/common/components/btnList/interface';
 
 export default defineComponent({
     name: enumOrderComponents.financing_manager_apply_order,

src/views/order/financing_manager/components/financing_manager_contract/index.vue

@@ -32,9 +32,9 @@
       <template #createtime="{ record }">
         <a>{{ formatTime(record.createtime) }}</a>
       </template>
-        <template #scfcontracttype="{ record }">
-            <a>{{ getScfContractTypeName(record.scfcontracttype) }}</a>
-        </template>
+      <template #scfcontracttype="{ record }">
+        <a>{{ getScfContractTypeName(record.scfcontracttype) }}</a>
+      </template>
 
     </a-table>
     <component :is="componentId"
@@ -54,8 +54,8 @@ import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { formatTime } from '@/common/methods';
 import { expandIcon } from '@/common/setup/table/clolumn';
-import {getContractName, getFinanceTypeName, getScfContractTypeName} from '@/common/constants/enumsName';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { getContractName, getFinanceTypeName, getScfContractTypeName } from '@/common/constants/enumsName';
+import { BtnListType } from '@/common/components/btnList/interface';
 
 export default defineComponent({
     name: enumOrderComponents.financing_manager_contract,

src/views/order/performance_information/components/performance_information_buy_performance/index.vue

@@ -56,7 +56,7 @@ import { getRecordItemTab } from '@/common/setup/order/orderData';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { expandIcon } from '@/common/setup/table/clolumn';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { getPaymentTypeName, getPerformanceStatusName, getPerformanceTypeName } from '@/common/constants/enumsName';
 export default defineComponent({

src/views/order/performance_information/components/performance_information_sell_performance/index.vue

@@ -57,7 +57,7 @@ import { getRecordItemTab } from '@/common/setup/order/orderData';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { expandIcon } from '@/common/setup/table/clolumn';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { getPaymentTypeName, getPerformanceStatusName, getPerformanceTypeName } from '@/common/constants/enumsName';
 

src/views/order/pre_sale_warehouse_receipt/components/pre_sale_warehouse_receipt_pending_order/index.vue

@@ -44,7 +44,7 @@ import { getRecordItemTab } from '@/common/setup/order/orderData';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { getWrOrderTypeName, getWrTradeOrderStatusName } from '@/common/constants/enumsName';
-import { BtnList as btnType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { expandIcon } from '@/common/setup/table/clolumn';
 
 export default defineComponent({
@@ -69,7 +69,7 @@ export default defineComponent({
             tableName: 'table_pcweb_spot_trade_bottom_pre_sale_pending_order',
             recordList: getRecordItemTab(),
         };
-        function filterBtnList(list: btnType[], record: WrOrderDetail) {
+        function filterBtnList(list: BtnListType[], record: WrOrderDetail) {
             //委托状态 - 1:委托请求 2:待冻结 3:委托成功 4:委托失败 5:配对成功 6:已撤 7:已成 8:成交失败 9:委托拒绝 1number;
             const arr = [3, 10];
             if (!arr.includes(record.wrtradeorderstatus)) {

src/views/order/spot_warran/components/spot_warrant_in_and_out_warehouse/index.vue

@@ -20,15 +20,15 @@
                  @click="openComponent" />
       </template>
 
-        <!-- applytype 类型-->
-        <template #applytype="{ record }">
-            <span>{{ getPickUpStatusName(record.applytype) }}</span>
-        </template>
+      <!-- applytype 类型-->
+      <template #applytype="{ record }">
+        <span>{{ getPickUpStatusName(record.applytype) }}</span>
+      </template>
 
-        <!-- applystatus 状态 -->
-        <template #applystatus="{ record }">
-            <span>{{ getPickUpTypeName(record.applystatus) }}</span>
-        </template>
+      <!-- applystatus 状态 -->
+      <template #applystatus="{ record }">
+        <span>{{ getPickUpTypeName(record.applystatus) }}</span>
+      </template>
 
     </a-table>
     <component :is="componentId"
@@ -47,8 +47,8 @@ import { getRecordItemTab } from '@/common/setup/order/orderData';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { expandIcon } from '@/common/setup/table/clolumn';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
-import {getPickUpStatusName, getPickUpTypeName} from "@/common/constants/enumsName";
+import { BtnListType } from '@/common/components/btnList/interface';
+import { getPickUpStatusName, getPickUpTypeName } from '@/common/constants/enumsName';
 
 export default defineComponent({
     name: enumOrderComponents.spot_warrant_in_and_out_warehouse,
@@ -87,7 +87,7 @@ export default defineComponent({
             expandIcon,
             handleBtnList,
             getPickUpStatusName,
-            getPickUpTypeName
+            getPickUpTypeName,
         };
     },
 });

src/views/order/spot_warran/components/spot_warrant_pending_order/index.vue

@@ -45,7 +45,7 @@ import { getRecordItemTab } from '@/common/setup/order/orderData';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { getWrOrderTypeName, getWrTradeOrderStatusName } from '@/common/constants/enumsName';
-import { BtnList as btnType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { expandIcon } from '@/common/setup/table/clolumn';
 
 export default defineComponent({
@@ -70,7 +70,7 @@ export default defineComponent({
             tableName: 'table_pcweb_spot_trade_bottom_spot_warrant_pending_order',
             recordList: getRecordItemTab(),
         };
-        function filterBtnList(list: btnType[], record: WrOrderDetail) {
+        function filterBtnList(list: BtnListType[], record: WrOrderDetail) {
             //委托状态 - 1:委托请求 2:待冻结 3:委托成功 4:委托失败 5:配对成功 6:已撤 7:已成 8:成交失败 9:委托拒绝 1number;
             const arr = [3, 10];
             if (!arr.includes(record.wrtradeorderstatus)) {

src/views/platinum/platinum_agreement/setup.ts

@@ -1,4 +1,4 @@
-import { BtnList } from "@/common/components/btnList/interface";
+import { BtnListType } from "@/common/components/btnList/interface";
 import { AgreementType } from "@/common/constants/enumCommon";
 import { getAgreementTypeName } from "@/common/constants/enumsName";
 import { QhjAgreementConfig } from "@/services/go/ermcp/qhj/interface";
@@ -40,7 +40,7 @@ export function handleArgreementType(formState?: UnwrapRef<FormState>) {
 }
 
 // 处理权限按钮
-export function handlePermissionBtn(btnList: BtnList[], item: QhjAgreementConfig) {
+export function handlePermissionBtn(btnList: BtnListType[], item: QhjAgreementConfig) {
     if (item) {
         const { isvalid } = item
         const arr: string[] = []

src/views/platinum/platinum_pick_query/list/tab/index.vue

@@ -59,7 +59,8 @@ import { handleTableList } from './setup';
 import ControlModal from './compoments/controlModal/index.vue';
 import { QhjTradeGoodsPickup } from '@/services/go/ermcp/qhj/interface';
 import { getPickUpStateName, getTakeStateName } from '@/common/constants/enumsName';
-import { TableEventCB, BtnList as BtnListType } from '@/common/setup/table/interface';
+import { TableEventCB } from '@/common/setup/table/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { ref } from 'vue';
 import { queryTradeGoodsPickup } from '@/services/go/ermcp/qhj';
 

src/views/platinum/platinum_pick_query/list/tab/setup.ts

@@ -1,7 +1,7 @@
-import { BtnList } from '@/common/components/buttonList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { QhjTradeGoodsPickup } from '@/services/go/ermcp/qhj/interface';
 
-export function handleTableList(btnList: BtnList[], record: QhjTradeGoodsPickup): BtnList[] {
+export function handleTableList(btnList: BtnListType[], record: QhjTradeGoodsPickup): BtnListType[] {
     // 1:备货中  完成备货
     // 2:待取货(自提) 确认取货
     // 4:待收货(邮寄) 上传物流信息、确认收货

src/views/platinum/platinum_recharge_withdrawal_review/list/recharge/index.vue

@@ -53,7 +53,7 @@ import { QhjAccountOutInApply } from '@/services/go/ermcp/qhj/interface';
 import Filter from '../../compoments/filter/index.vue';
 import ControlModal from './compoments/controlModal/index.vue';
 import { handleTableStatus, inOrOutStatus } from '../../setup';
-import { BtnList as BtnListType } from '@/common/components/buttonList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { handlePreviewImg } from '@/common/setup/upload';
 
 export default defineComponent({

src/views/platinum/platinum_recharge_withdrawal_review/list/withdrawal/index.vue

@@ -38,7 +38,7 @@ import { QhjAccountOutInApply } from '@/services/go/ermcp/qhj/interface';
 import Filter from '../../compoments/filter/index.vue';
 import ControlModal from './compoments/controlModal/index.vue';
 import { handleTableStatus, inOrOutStatus } from '../../setup';
-import { BtnList as BtnListType } from '@/common/components/buttonList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 
 export default defineComponent({
     name: 'platinum_withdrawal_review_tab',

src/views/search/search_document_records/search_pre_sale_warehouse_receipt/search_pre_sale_warehouse_receipt_commission_record/index.vue

@@ -33,7 +33,7 @@ import { getRecordItemTab } from '@/common/setup/order/orderData';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { getWrOrderTypeName, getWrTradeOrderStatusName } from '@/common/constants/enumsName';
-import { BtnList as btnType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { expandIcon } from '@/common/setup/table/clolumn';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 

src/views/search/search_document_records/search_spot_warrant/search_spot_warrant_listing_record/index.vue

@@ -34,7 +34,7 @@ import { getRecordItemTab } from '@/common/setup/order/orderData';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { getWrOrderTypeName, getWrTradeOrderStatusName } from '@/common/constants/enumsName';
-import { BtnList as btnType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { expandIcon } from '@/common/setup/table/clolumn';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 

src/views/search/search_performance_query/search_performance_query_buy_performance/index.vue

@@ -43,7 +43,7 @@ import { getRecordItemTab } from '@/common/setup/order/orderData';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { expandIcon } from '@/common/setup/table/clolumn';
-import { BtnList as BtnListType } from '@/common/components/btnList/interface';
+import { BtnListType } from '@/common/components/btnList/interface';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { getPaymentTypeName, getPerformanceStatusName, getPerformanceTypeName } from '@/common/constants/enumsName';
 import { EnumRouterName } from '@/common/constants/enumRouterName';