update

src/views/market/market-spot/index.vue

@@ -40,6 +40,8 @@ export default defineComponent({
     [`${TradeMode.WarehouseReceiptTrade}-${AuctionwrType.noWr}-${ListingMode.designate}`]: defineAsyncComponent(() => import('./warehouse_pre_sale/warehouse_pre_sale_designate/index.vue')),
     // 参考行情
     [TradeMode.quote99]: defineAsyncComponent(() => import('./spot_trade_reference_market/index.vue')),
+    // 挂牌点选
+    [TradeMode.ListingAndSelection]: defineAsyncComponent(() => import('./spot_trade_order_transaction/spot_trade_order_transaction_basis_difference/index.vue')),
     // 掉期贸易
     [TradeMode.DiaoQi]: defineAsyncComponent(() => import('./spot_trade_order_transaction/spot_trade_order_transaction_swap/index.vue')),
   },

src/views/market/market-spot/spot_trade_order_transaction/spot_trade_order_transaction_basis_difference/index.vue

@@ -1,88 +1,68 @@
 <template>
   <!--订单交易 基差点价-->
-  <div class="topTableHeight">
-    <a-table
-      :columns="columns"
-      :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', getQuoteList().length ? 'noPlaceHolder' : 'hasPlaceHolder']"
-      :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }"
-      :pagination="false"
-      :loading="loading"
-      :expandedRowKeys="expandedRowKeys"
-      :customRow="Rowclick"
-      rowKey="goodscode"
-      ref="tableRef"
-      :data-source="getQuoteList()"
-    >
-      <template #totalturnover="{ text }">
-        <span>{{ changeUnit(text) }}</span>
-      </template>
-      <!-- 买量 -->
-      <template #bidvolume="{ text }">
-        <span>{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 卖量 -->
-      <template #askvolume="{ text }">
-        <span>{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 开盘价 -->
-      <template #opened="{ record, text }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 涨跌 -->
-      <template #change="{ record, text }">
-        <span
-          :class="handleQuotePriceColor(text, record.presettle)"
-        >{{ quoteChange(record, record.decimalplace) }}</span>
-      </template>
-      <!-- 幅度 -->
-      <template #amplitude="{ record }">
-        <span
-          :class="handleQuotePriceColor(record.last, record.presettle)"
-        >{{ quoteAmplitude(record, record.decimalplace) }}</span>
-      </template>
-      <!-- 振幅 -->
-      <template #vibration="{ record, text }">
-        <span
-          :class="handleQuotePriceColor(text, record.presettle)"
-        >{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
-      </template>
-      <template #index="{ index }">
-        <span>{{ index + 1 }}</span>
-      </template>
-      <!-- 买价 -->
-      <template #bid="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 卖价 -->
-      <template #ask="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 最新价 -->
-      <template #last="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 最低价 -->
-      <template #lowest="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 最高价 -->
-      <template #highest="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
-      </template>
-    </a-table>
-    <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="btnList"></contextMenu>
-    <component
-      :is="componentId"
-      v-if="componentId"
-      :selectedRow="selectedRow"
-      :deliverGoods="findDeilverGoodsByGoodsCode(selectedRow.goodscode)"
-      @cancel="closeComponent"
-    ></component>
-  </div>
+  <mtp-table-scroll>
+    <template #default="{ scroll }">
+      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :customRow="Rowclick" :rowKey="(record, index) => index" :data-source="getQuoteList()">
+        <template #totalturnover="{ text }">
+          <span>{{ changeUnit(text) }}</span>
+        </template>
+        <!-- 买量 -->
+        <template #bidvolume="{ text }">
+          <span>{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 卖量 -->
+        <template #askvolume="{ text }">
+          <span>{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 开盘价 -->
+        <template #opened="{ record, text }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 涨跌 -->
+        <template #change="{ record, text }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ quoteChange(record, record.decimalplace) }}</span>
+        </template>
+        <!-- 幅度 -->
+        <template #amplitude="{ record }">
+          <span :class="handleQuotePriceColor(record.last, record.presettle)">{{ quoteAmplitude(record, record.decimalplace) }}</span>
+        </template>
+        <!-- 振幅 -->
+        <template #vibration="{ record, text }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
+        </template>
+        <template #index="{ index }">
+          <span>{{ index + 1 }}</span>
+        </template>
+        <!-- 买价 -->
+        <template #bid="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 卖价 -->
+        <template #ask="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 最新价 -->
+        <template #last="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 最低价 -->
+        <template #lowest="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 最高价 -->
+        <template #highest="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <!-- 右键 -->
+  <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="btnList"></contextMenu>
+  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :deliverGoods="findDeilverGoodsByGoodsCode(selectedRow.goodscode)" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
@@ -96,12 +76,10 @@ import { changeUnit } from '@/utils/qt/common';
 import { ref } from 'vue';
 import { columnsList, handleDeliveryRelation } from '../setup';
 
-
-
-
 export default defineComponent({
   name: EnumRouterName.spot_trade_order_transaction_basis_difference,
   components: {
+    MtpTableScroll,
     contextMenu,
     BuyAndSell: defineAsyncComponent(() => import('../components/buy-sell-market/index.vue')),
     Listing: defineAsyncComponent(() => import('../components/listing/index.vue')),

src/views/market/market-spot/spot_trade_order_transaction/spot_trade_order_transaction_swap/index.vue

@@ -1,77 +1,82 @@
 <template>
   <!--订单交易 商品掉期-->
-  <div class="topTableHeight">
-    <div class="filterTable">
-      <div class="filter-custom-table">
-        <a-select class="conditionSelect" :style="{ width: '180px', maxHeight: '400px', overflow: 'auto' }" @change="goodsChange" placeholder="全部标的合约">
-          <a-select-option v-for="item in getRefGoodsList()" :value="item" :key="item">{{ item }}</a-select-option>
-        </a-select>
-        <!-- <a-button class="btnDeafault"
+  <mtp-table-scroll>
+    <template #header>
+      <div class="filterTable">
+        <div class="filter-custom-table">
+          <a-select class="conditionSelect" :style="{ width: '180px', maxHeight: '400px', overflow: 'auto' }" @change="goodsChange" placeholder="全部标的合约">
+            <a-select-option v-for="item in getRefGoodsList()" :value="item" :key="item">{{ item }}</a-select-option>
+          </a-select>
+          <!-- <a-button class="btnDeafault"
                 @click="search(true)"
         style="width: 80px">筛选</a-button>-->
+        </div>
       </div>
-    </div>
-    <a-table :columns="columns" :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', goodsList.length ? 'noPlaceHolder' : 'hasPlaceHolder']" :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="refgoodscode" ref="tableRef" :data-source="goodsList">
-      <!-- <template #totalturnover="{ text }">
+    </template>
+    <template #default="{ scroll }">
+      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :customRow="Rowclick" :rowKey="(record, index) => index" :data-source="goodsList">
+        <!-- <template #totalturnover="{ text }">
         <span>{{changeUnit(text)}}</span>
       </template>-->
-      <!-- 涨跌 -->
-      <template #change="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ quoteChange_out(record.refgoodscode) }}</span>
-      </template>
-      <!-- 幅度 -->
-      <template #amplitude="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ quoteAmplitude_out(record.refgoodscode) }}</span>
-      </template>
-      <!-- 振幅 -->
-      <template #vibration="{ record }">
-        <span>{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
-      </template>
-      <template #index="{ index }">
-        <span>{{ index + 1 }}</span>
-      </template>
-      <!-- 买价 -->
-      <!-- <template #bid="{ record }">
+        <!-- 涨跌 -->
+        <template #change="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ quoteChange_out(record.refgoodscode) }}</span>
+        </template>
+        <!-- 幅度 -->
+        <template #amplitude="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ quoteAmplitude_out(record.refgoodscode) }}</span>
+        </template>
+        <!-- 振幅 -->
+        <template #vibration="{ record }">
+          <span>{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
+        </template>
+        <template #index="{ index }">
+          <span>{{ index + 1 }}</span>
+        </template>
+        <!-- 买价 -->
+        <!-- <template #bid="{ record }">
         <span :class="handleQuotePriceColor_out(record.refgoodscode, 'bid')">
           {{getQuoteValue_out(record.refgoodscode, 'bid')}}</span>
       </template>-->
-      <!-- 卖价 -->
-      <!-- <template #ask="{  record }">
+        <!-- 卖价 -->
+        <!-- <template #ask="{  record }">
         <span :class="handleQuotePriceColor_out(record.refgoodscode, 'ask')">
           {{getQuoteValue_out(record.refgoodscode, 'ask')}}</span>
       </template>-->
-      <!-- 最新价 -->
-      <template #last="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ getQuoteValue_out(record.refgoodscode, 'last') }}</span>
-      </template>
-      <!-- 开盘 -->
-      <template #opened="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'opened')">{{ getQuoteValue_out(record.refgoodscode, 'opened') }}</span>
-      </template>
-      <!-- 结算 -->
-      <template #settle="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'settle')">{{ getQuoteValue_out(record.refgoodscode, 'settle') }}</span>
-      </template>
-      <!-- 昨结算 -->
-      <template #presettle="{ record }">
-        <span>{{ getQuoteValue_out(record.refgoodscode, 'presettle') }}</span>
-      </template>
-      <!-- 最低价 -->
-      <template #lowest="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'lowest')">{{ getQuoteValue_out(record.refgoodscode, 'lowest') }}</span>
-      </template>
-      <!-- 最高价 -->
-      <template #highest="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'highest')">{{ getQuoteValue_out(record.refgoodscode, 'highest') }}</span>
-      </template>
-    </a-table>
-    <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="btnList"></contextMenu>
-    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
-  </div>
+        <!-- 最新价 -->
+        <template #last="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ getQuoteValue_out(record.refgoodscode, 'last') }}</span>
+        </template>
+        <!-- 开盘 -->
+        <template #opened="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'opened')">{{ getQuoteValue_out(record.refgoodscode, 'opened') }}</span>
+        </template>
+        <!-- 结算 -->
+        <template #settle="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'settle')">{{ getQuoteValue_out(record.refgoodscode, 'settle') }}</span>
+        </template>
+        <!-- 昨结算 -->
+        <template #presettle="{ record }">
+          <span>{{ getQuoteValue_out(record.refgoodscode, 'presettle') }}</span>
+        </template>
+        <!-- 最低价 -->
+        <template #lowest="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'lowest')">{{ getQuoteValue_out(record.refgoodscode, 'lowest') }}</span>
+        </template>
+        <!-- 最高价 -->
+        <template #highest="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'highest')">{{ getQuoteValue_out(record.refgoodscode, 'highest') }}</span>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <!-- 右键 -->
+  <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="btnList"></contextMenu>
+  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
 import { handleTableEventAndData } from '@/common/setup/table/compose';
@@ -84,6 +89,7 @@ import { columnsList, getBtnList, useSwapList } from './setup';
 export default defineComponent({
   name: 'spot_trade_order_transaction_swap',
   components: {
+    MtpTableScroll,
     contextMenu,
     BuyAndSell: defineAsyncComponent(() => import('./components/buy-sell-market/index.vue')),
     PostBuying: defineAsyncComponent(() => import('./components/post_buying/index.vue')),

src/views/market/market-spot/spot_trade_reference_market/index.vue

@@ -1,104 +1,70 @@
 <template>
-    <!--参考行情-->
-    <div class="topTableHeight topTableHeight_379">
-        <a-table
-            :columns="columns"
-            :class="['srcollYTable', isBottom ? '' : 'srcollYTableNoBottom', goodsList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
-            :scroll="{ x: '100%', y: isBottom ? 'calc(100vh - 378px)' : 'calc(100vh - 138px)' }"
-            :pagination="false"
-            :loading="loading"
-            :expandedRowKeys="expandedRowKeys"
-            :customRow="Rowclick"
-            rowKey="goodscode"
-            ref="tableRef"
-            :data-source="goodsList"
-        >
-            <template #totalturnover="{ text }">
-                <span>{{ changeUnit(text) }}</span>
-            </template>
-            <!-- 买量 -->
-            <template #bidvolume="{ text }">
-                <span>{{ handleNoneValue(text) }}</span>
-            </template>
-            <!-- 卖量 -->
-            <template #askvolume="{ text }">
-                <span>{{ handleNoneValue(text) }}</span>
-            </template>
-            <!-- 开盘价 -->
-            <template #opened="{ record, text }">
-                <span
-                    :class="handleQuotePriceColor(text, record.presettle)"
-                >{{ handleNoneValue(text) }}</span>
-            </template>
-            <!-- 涨跌 -->
-            <template #change="{ record }">
-                <span
-                    :class="handleQuotePriceColor(record.last, record.presettle)"
-                >{{ quoteChange(record, record.decimalplace) }}</span>
-            </template>
-            <!-- 幅度 -->
-            <template #amplitude="{ record }">
-                <span
-                    :class="handleQuotePriceColor(record.last, record.presettle)"
-                >{{ quoteAmplitude(record, record.decimalplace) }}</span>
-            </template>
-            <!-- 振幅 -->
-            <template #vibration="{ record, text }">
-                <span
-                    :class="handleQuotePriceColor(text, record.presettle)"
-                >{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
-            </template>
-            <template #index="{ index }">
-                <span>{{ index + 1 }}</span>
-            </template>
-            <!-- 买价 -->
-            <template #bid="{ text, record }">
-                <span
-                    :class="handleQuotePriceColor(text, record.presettle)"
-                >{{ handleNoneValue(text) }}</span>
-            </template>
-            <!-- 卖价 -->
-            <template #ask="{ text, record }">
-                <span
-                    :class="handleQuotePriceColor(text, record.presettle)"
-                >{{ handleNoneValue(text) }}</span>
-            </template>
-            <!-- 最新价 -->
-            <template #last="{ text, record }">
-                <span
-                    :class="handleQuotePriceColor(text, record.presettle)"
-                >{{ handleNoneValue(text) }}</span>
-            </template>
-            <!-- 最低价 -->
-            <template #lowest="{ text, record }">
-                <span
-                    :class="handleQuotePriceColor(text, record.presettle)"
-                >{{ handleNoneValue(text) }}</span>
-            </template>
-            <!-- 最高价 -->
-            <template #highest="{ text, record }">
-                <span
-                    :class="handleQuotePriceColor(text, record.presettle)"
-                >{{ handleNoneValue(text) }}</span>
-            </template>
-            <!-- 昨结价 -->
-            <template #preclose="{ text, record }">
-                <span
-                    :class="handleQuotePriceColor(text, record.presettle)"
-                >{{ handleNoneValue(text) }}</span>
-            </template>
-        </a-table>
-        <component
-            :is="componentId"
-            v-if="componentId"
-            :enumName="name"
-            :selectedRow="selectedRow"
-            @cancel="closeComponent"
-        ></component>
-    </div>
+  <!--参考行情-->
+  <mtp-table-scroll>
+    <template #default="{ scroll }">
+      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :customRow="Rowclick" :rowKey="(record, index) => index" :data-source="goodsList">
+        <template #totalturnover="{ text }">
+          <span>{{ changeUnit(text) }}</span>
+        </template>
+        <!-- 买量 -->
+        <template #bidvolume="{ text }">
+          <span>{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 卖量 -->
+        <template #askvolume="{ text }">
+          <span>{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 开盘价 -->
+        <template #opened="{ record, text }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 涨跌 -->
+        <template #change="{ record }">
+          <span :class="handleQuotePriceColor(record.last, record.presettle)">{{ quoteChange(record, record.decimalplace) }}</span>
+        </template>
+        <!-- 幅度 -->
+        <template #amplitude="{ record }">
+          <span :class="handleQuotePriceColor(record.last, record.presettle)">{{ quoteAmplitude(record, record.decimalplace) }}</span>
+        </template>
+        <!-- 振幅 -->
+        <template #vibration="{ record, text }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
+        </template>
+        <template #index="{ index }">
+          <span>{{ index + 1 }}</span>
+        </template>
+        <!-- 买价 -->
+        <template #bid="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 卖价 -->
+        <template #ask="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 最新价 -->
+        <template #last="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 最低价 -->
+        <template #lowest="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 最高价 -->
+        <template #highest="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 昨结价 -->
+        <template #preclose="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <component :is="componentId" v-if="componentId" :enumName="name" :selectedRow="selectedRow" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import { TradeMode } from '@/common/constants/enumCommon';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
@@ -116,77 +82,75 @@ import { changeUnit } from '@/utils/qt/common';
 import { defineAsyncComponent, ref } from 'vue';
 
 const columnsList = [
-    { title: '序号', key: 'index', width: 80 },
-    { title: '代码', key: 'goodscode' },
-    { title: '名称', key: 'goodsname' },
-    { title: '买价', key: 'bid' },
-    { title: '买量', key: 'bidvolume' },
-    { title: '卖价', key: 'ask' },
-    { title: '卖量', key: 'askvolume' },
-    { title: '最新价', key: 'last' },
-    { title: '涨跌', key: 'change' }, // 最新价 - 昨结价
-    { title: '幅度', key: 'amplitude' }, // （最新价 - 昨结价） / 100 %
-    { title: '开盘价', key: 'opened' },
-    { title: '昨收价', key: 'preclose' },
-    { title: '昨结价', key: 'presettle' },
-    { title: '最低价', key: 'lowest' },
-    { title: '最高价', key: 'highest' },
-    { title: '振幅', key: 'vibration' }, // (最高价 - 最低价 ) / 最新价  * 100 %
-    { title: '总量', key: 'totalvolume' },
-    { title: '现量', key: 'lastvolume' },
-    { title: '持仓量', key: 'holdvolume' },
-    // { title: '日增', key: 'holdincrement' },
-    // { title: '金额', key: 'totalturnover' },
+  { title: '序号', key: 'index', width: 80 },
+  { title: '代码', key: 'goodscode' },
+  { title: '名称', key: 'goodsname' },
+  { title: '买价', key: 'bid' },
+  { title: '买量', key: 'bidvolume' },
+  { title: '卖价', key: 'ask' },
+  { title: '卖量', key: 'askvolume' },
+  { title: '最新价', key: 'last' },
+  { title: '涨跌', key: 'change' }, // 最新价 - 昨结价
+  { title: '幅度', key: 'amplitude' }, // （最新价 - 昨结价） / 100 %
+  { title: '开盘价', key: 'opened' },
+  { title: '昨收价', key: 'preclose' },
+  { title: '昨结价', key: 'presettle' },
+  { title: '最低价', key: 'lowest' },
+  { title: '最高价', key: 'highest' },
+  { title: '振幅', key: 'vibration' }, // (最高价 - 最低价 ) / 最新价  * 100 %
+  { title: '总量', key: 'totalvolume' },
+  { title: '现量', key: 'lastvolume' },
+  { title: '持仓量', key: 'holdvolume' },
+  // { title: '日增', key: 'holdincrement' },
+  // { title: '金额', key: 'totalturnover' },
 ];
 
 export default defineComponent({
-    name: EnumRouterName.spot_trade_reference_market,
-    components: {
-        contextMenu,
-        chart: defineAsyncComponent(() => import('../goods-chart/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        // 表头
-        const { columns } = handleTableColums(columnsList);
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryDeliveryRelationRsp>();
-        const tableRef = ref<any>(null);
-        // 行情商品
-        const goodsList = getQutoGoodsByTradeMode(TradeMode.quote99);
-        // 行情按需订阅
-        handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(goodsList);
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteReq = {
-                wrpricetype: 1,
-                haswr: 1,
-            };
-            queryTable(queryOrderQuote, param);
-        };
-        const param: TableParam = {
-            columnsList,
-            queryFn: queryTableAction,
-            clickName: 'chart'
-        };
-        return {
-            isBottom,
-            ...handleTableEventAndData(param),
-            loading,
-            tableList,
-            goodsList,
-            tableRef,
-            columns,
-            changeUnit,
-            handleQuotePriceColor,
-            quoteChange,
-            quoteAmplitude,
-            quoteAmplituOfVibration,
-            handleNoneValue,
-        };
-    },
-});
-
-</script>
-<style lang="less">
-</style>
+  name: EnumRouterName.spot_trade_reference_market,
+  components: {
+    MtpTableScroll,
+    contextMenu,
+    chart: defineAsyncComponent(() => import('../goods-chart/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    // 表头
+    const { columns } = handleTableColums(columnsList);
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryDeliveryRelationRsp>();
+    const tableRef = ref<any>(null);
+    // 行情商品
+    const goodsList = getQutoGoodsByTradeMode(TradeMode.quote99);
+    // 行情按需订阅
+    handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(goodsList);
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteReq = {
+        wrpricetype: 1,
+        haswr: 1,
+      };
+      queryTable(queryOrderQuote, param);
+    };
+    const param: TableParam = {
+      columnsList,
+      queryFn: queryTableAction,
+      clickName: 'chart'
+    };
+    return {
+      isBottom,
+      ...handleTableEventAndData(param),
+      loading,
+      tableList,
+      goodsList,
+      tableRef,
+      columns,
+      changeUnit,
+      handleQuotePriceColor,
+      quoteChange,
+      quoteAmplitude,
+      quoteAmplituOfVibration,
+      handleNoneValue,
+    };
+  },
+})
+</script>