|
|
@@ -0,0 +1,152 @@
|
|
|
+<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"
|
|
|
+ @click="search(true)"
|
|
|
+ style="width: 80px">筛选</a-button> -->
|
|
|
+ </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="goodscode"
|
|
|
+ ref="tableRef"
|
|
|
+ :data-source="goodsList">
|
|
|
+ <template #totalturnover="{ text }">
|
|
|
+ <span>{{changeUnit(text)}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 涨跌 -->
|
|
|
+ <template #change="{ record }">
|
|
|
+ <span>{{quoteChange(record, record.decimalplace)}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 幅度 -->
|
|
|
+ <template #amplitude="{ record }">
|
|
|
+ <span>{{quoteAmplituOfVibration(record, record.decimalplace)}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 振幅 -->
|
|
|
+ <template #vibration="{ record }">
|
|
|
+ <span>{{quoteAmplituOfVibration(record, record.decimalplace)}}</span>
|
|
|
+ </template>
|
|
|
+ <template #index="{ index }">
|
|
|
+ <span>{{index + 1}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 买价 -->
|
|
|
+ <template #bid="{ text, record }">
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 卖价 -->
|
|
|
+ <template #ask="{ text, record }">
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 最新价 -->
|
|
|
+ <template #last="{ text, record }">
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 最低价 -->
|
|
|
+ <template #lowest="{ text, record }">
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 最高价 -->
|
|
|
+ <template #highest="{ text, record }">
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</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>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { EnumRouterName } from '@/common/constants/enumRouterName';
|
|
|
+import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
|
|
|
+
|
|
|
+import { handleDeliveryRelation } from '../setup';
|
|
|
+
|
|
|
+import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration } from '@/common/setup/table/tableQuote';
|
|
|
+import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
|
|
|
+
|
|
|
+import { handleTableEventAndData } from '@/common/setup/table/compose';
|
|
|
+import { TableParam } from '@/common/setup/table/interface';
|
|
|
+import { BtnListType } from '@/common/components/btnList/interface';
|
|
|
+import { RefGoodsList } from './interface';
|
|
|
+import { getShowBottomValue } from '@/common/config/constrolBottom';
|
|
|
+import { ref } from 'vue';
|
|
|
+import { useQueryData } from '@/common/setup/request';
|
|
|
+import { QueryQuoteGoodsListReq } from '@/services/go/Tjmd/interface';
|
|
|
+import { queryQuoteGoodsList } from '@/services/go/Tjmd';
|
|
|
+import { useSwapList, columnsList } from './setup';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'spot_trade_order_transaction_swap',
|
|
|
+ components: {
|
|
|
+ contextMenu,
|
|
|
+ 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 isBottom = getShowBottomValue();
|
|
|
+ const { loading, goodsList, getRefGoodsList, filterGoodsList } = useSwapList();
|
|
|
+
|
|
|
+ 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' },
|
|
|
+ ];
|
|
|
+ // 行情按需订阅
|
|
|
+ let stopSubcribe = handleSubcriteOnDemandQuote<RefGoodsList>(goodsList);
|
|
|
+ // 过滤标的合约
|
|
|
+ function goodsChange(value: string) {
|
|
|
+ const goodsList = filterGoodsList(value);
|
|
|
+ // 停止上次订阅
|
|
|
+ stopSubcribe();
|
|
|
+ // 重新发起订阅
|
|
|
+ stopSubcribe = handleSubcriteOnDemandQuote<RefGoodsList>(goodsList);
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ isBottom,
|
|
|
+ ...handleTableEventAndData<RefGoodsList>(param),
|
|
|
+ btnList,
|
|
|
+ handleQuotePriceColor,
|
|
|
+ quoteChange,
|
|
|
+ quoteAmplitude,
|
|
|
+ quoteAmplituOfVibration,
|
|
|
+ getRefGoodsList,
|
|
|
+ goodsList,
|
|
|
+ loading,
|
|
|
+ goodsChange,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+.noData {
|
|
|
+ .position(absolute, 28px, 0, 0, 0);
|
|
|
+}
|
|
|
+</style>
|