|
@@ -14,17 +14,22 @@
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<template #default="{ scroll }">
|
|
<template #default="{ scroll }">
|
|
|
- <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="goodsid" ref="tableRef" :data-source="goodsList">
|
|
|
|
|
|
|
+ <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading"
|
|
|
|
|
+ :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="goodsid" ref="tableRef"
|
|
|
|
|
+ :data-source="goodsList">
|
|
|
<!-- <template #totalturnover="{ text }">
|
|
<!-- <template #totalturnover="{ text }">
|
|
|
<span>{{changeUnit(text)}}</span>
|
|
<span>{{changeUnit(text)}}</span>
|
|
|
</template>-->
|
|
</template>-->
|
|
|
<!-- 涨跌 -->
|
|
<!-- 涨跌 -->
|
|
|
<template #change="{ record }">
|
|
<template #change="{ record }">
|
|
|
- <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ quoteChange_out(record.refgoodscode) }}</span>
|
|
|
|
|
|
|
+ <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ quoteChange_out(record.refgoodscode)
|
|
|
|
|
+ }}</span>
|
|
|
</template>
|
|
</template>
|
|
|
<!-- 幅度 -->
|
|
<!-- 幅度 -->
|
|
|
<template #amplitude="{ record }">
|
|
<template #amplitude="{ record }">
|
|
|
- <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ quoteAmplitude_out(record.refgoodscode) }}</span>
|
|
|
|
|
|
|
+ <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{
|
|
|
|
|
+ quoteAmplitude_out(record.refgoodscode)
|
|
|
|
|
+ }}</span>
|
|
|
</template>
|
|
</template>
|
|
|
<!-- 振幅 -->
|
|
<!-- 振幅 -->
|
|
|
<template #vibration="{ record }">
|
|
<template #vibration="{ record }">
|
|
@@ -45,15 +50,21 @@
|
|
|
</template>-->
|
|
</template>-->
|
|
|
<!-- 最新价 -->
|
|
<!-- 最新价 -->
|
|
|
<template #last="{ record }">
|
|
<template #last="{ record }">
|
|
|
- <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ getQuoteValue_out(record.refgoodscode, 'last') }}</span>
|
|
|
|
|
|
|
+ <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{
|
|
|
|
|
+ getQuoteValue_out(record.refgoodscode, 'last')
|
|
|
|
|
+ }}</span>
|
|
|
</template>
|
|
</template>
|
|
|
<!-- 开盘 -->
|
|
<!-- 开盘 -->
|
|
|
<template #opened="{ record }">
|
|
<template #opened="{ record }">
|
|
|
- <span :class="handleQuotePriceColor_out(record.refgoodscode, 'opened')">{{ getQuoteValue_out(record.refgoodscode, 'opened') }}</span>
|
|
|
|
|
|
|
+ <span :class="handleQuotePriceColor_out(record.refgoodscode, 'opened')">{{
|
|
|
|
|
+ getQuoteValue_out(record.refgoodscode, 'opened')
|
|
|
|
|
+ }}</span>
|
|
|
</template>
|
|
</template>
|
|
|
<!-- 结算 -->
|
|
<!-- 结算 -->
|
|
|
<template #settle="{ record }">
|
|
<template #settle="{ record }">
|
|
|
- <span :class="handleQuotePriceColor_out(record.refgoodscode, 'settle')">{{ getQuoteValue_out(record.refgoodscode, 'settle') }}</span>
|
|
|
|
|
|
|
+ <span :class="handleQuotePriceColor_out(record.refgoodscode, 'settle')">{{
|
|
|
|
|
+ getQuoteValue_out(record.refgoodscode, 'settle')
|
|
|
|
|
+ }}</span>
|
|
|
</template>
|
|
</template>
|
|
|
<!-- 昨结算 -->
|
|
<!-- 昨结算 -->
|
|
|
<template #presettle="{ record }">
|
|
<template #presettle="{ record }">
|
|
@@ -61,11 +72,15 @@
|
|
|
</template>
|
|
</template>
|
|
|
<!-- 最低价 -->
|
|
<!-- 最低价 -->
|
|
|
<template #lowest="{ record }">
|
|
<template #lowest="{ record }">
|
|
|
- <span :class="handleQuotePriceColor_out(record.refgoodscode, 'lowest')">{{ getQuoteValue_out(record.refgoodscode, 'lowest') }}</span>
|
|
|
|
|
|
|
+ <span :class="handleQuotePriceColor_out(record.refgoodscode, 'lowest')">{{
|
|
|
|
|
+ getQuoteValue_out(record.refgoodscode, 'lowest')
|
|
|
|
|
+ }}</span>
|
|
|
</template>
|
|
</template>
|
|
|
<!-- 最高价 -->
|
|
<!-- 最高价 -->
|
|
|
<template #highest="{ record }">
|
|
<template #highest="{ record }">
|
|
|
- <span :class="handleQuotePriceColor_out(record.refgoodscode, 'highest')">{{ getQuoteValue_out(record.refgoodscode, 'highest') }}</span>
|
|
|
|
|
|
|
+ <span :class="handleQuotePriceColor_out(record.refgoodscode, 'highest')">{{
|
|
|
|
|
+ getQuoteValue_out(record.refgoodscode, 'highest')
|
|
|
|
|
+ }}</span>
|
|
|
</template>
|
|
</template>
|
|
|
</a-table>
|
|
</a-table>
|
|
|
</template>
|
|
</template>
|
|
@@ -76,6 +91,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
|
|
|
+import { PropType } from 'vue'
|
|
|
import MtpTableScroll from '@/common/components/tableScroll/index.vue';
|
|
import MtpTableScroll from '@/common/components/tableScroll/index.vue';
|
|
|
import { getShowBottomValue } from '@/common/config/constrolBottom';
|
|
import { getShowBottomValue } from '@/common/config/constrolBottom';
|
|
|
import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
|
|
import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
|
|
@@ -85,6 +101,7 @@ import { getQuoteValue_out, handleQuotePriceColor_out, handleSubcriteOnDemandQuo
|
|
|
import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
|
|
import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
|
|
|
import { QueryQuoteGoodsListRsp } from '@/services/go/Tjmd/interface';
|
|
import { QueryQuoteGoodsListRsp } from '@/services/go/Tjmd/interface';
|
|
|
import { columnsList, getBtnList, useSwapList } from './setup';
|
|
import { columnsList, getBtnList, useSwapList } from './setup';
|
|
|
|
|
+import { TjmdMarketSectionConfig } from '@/services/go/Tjmd/interface'
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
|
name: 'spot_trade_order_transaction_swap',
|
|
name: 'spot_trade_order_transaction_swap',
|
|
@@ -95,6 +112,12 @@ export default defineComponent({
|
|
|
PostBuying: defineAsyncComponent(() => import('./components/post_buying/index.vue')),
|
|
PostBuying: defineAsyncComponent(() => import('./components/post_buying/index.vue')),
|
|
|
Detail: defineAsyncComponent(() => import('./components/detail/index.vue')),
|
|
Detail: defineAsyncComponent(() => import('./components/detail/index.vue')),
|
|
|
},
|
|
},
|
|
|
|
|
+ props: {
|
|
|
|
|
+ selectedMarket: {
|
|
|
|
|
+ type: Object as PropType<TjmdMarketSectionConfig>,
|
|
|
|
|
+ default: () => ({})
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
setup() {
|
|
setup() {
|
|
|
const isBottom = getShowBottomValue();
|
|
const isBottom = getShowBottomValue();
|
|
|
const { loading, goodsList, getRefGoodsList, filterGoodsList } = useSwapList();
|
|
const { loading, goodsList, getRefGoodsList, filterGoodsList } = useSwapList();
|
|
@@ -134,62 +157,74 @@ export default defineComponent({
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="less">
|
|
<style lang="less">
|
|
|
.noData {
|
|
.noData {
|
|
|
- .position(absolute, 28px, 0, 0, 0);
|
|
|
|
|
|
|
+ .position(absolute, 28px, 0, 0, 0);
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.filter-custom-table {
|
|
.filter-custom-table {
|
|
|
- display: inline-flex;
|
|
|
|
|
- padding-top: 4px;
|
|
|
|
|
- height: 34px;
|
|
|
|
|
- .conditionSelect:first-child {
|
|
|
|
|
- margin-right: 10px;
|
|
|
|
|
- }
|
|
|
|
|
- .btnDeafault.ant-btn,
|
|
|
|
|
- .operBtn.ant-btn {
|
|
|
|
|
- height: 26px !important;
|
|
|
|
|
- line-height: 26px !important;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ padding-top: 4px;
|
|
|
|
|
+ height: 34px;
|
|
|
|
|
|
|
|
- .ant-select-single:not(.ant-select-customize-input) + .ant-select-single:not(.ant-select-customize-input),
|
|
|
|
|
- .ant-select + .ant-space.ant-space-vertical {
|
|
|
|
|
- margin-left: 10px;
|
|
|
|
|
- }
|
|
|
|
|
- .ant-select-single:not(.ant-select-customize-input) {
|
|
|
|
|
|
|
+ .conditionSelect:first-child {
|
|
|
|
|
+ margin-right: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btnDeafault.ant-btn,
|
|
|
|
|
+ .operBtn.ant-btn {
|
|
|
|
|
+ height: 26px !important;
|
|
|
|
|
+ line-height: 26px !important;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ant-select-single:not(.ant-select-customize-input)+.ant-select-single:not(.ant-select-customize-input),
|
|
|
|
|
+ .ant-select+.ant-space.ant-space-vertical {
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ant-select-single:not(.ant-select-customize-input) {
|
|
|
|
|
+ height: 26px;
|
|
|
|
|
+ line-height: 26px !important;
|
|
|
|
|
+
|
|
|
|
|
+ .ant-select-selector {
|
|
|
|
|
+ height: 26px;
|
|
|
|
|
+ border-color: @m-grey46 !important;
|
|
|
|
|
+ background: @m-grey47;
|
|
|
|
|
+ .rounded-corners(3px);
|
|
|
|
|
+
|
|
|
|
|
+ .ant-select-selection-item {
|
|
|
|
|
+ line-height: 26px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ant-select-selection-search {
|
|
|
height: 26px;
|
|
height: 26px;
|
|
|
- line-height: 26px !important;
|
|
|
|
|
- .ant-select-selector {
|
|
|
|
|
- height: 26px;
|
|
|
|
|
- border-color: @m-grey46 !important;
|
|
|
|
|
- background: @m-grey47;
|
|
|
|
|
- .rounded-corners(3px);
|
|
|
|
|
- .ant-select-selection-item {
|
|
|
|
|
- line-height: 26px;
|
|
|
|
|
- }
|
|
|
|
|
- .ant-select-selection-search {
|
|
|
|
|
- height: 26px;
|
|
|
|
|
- .ant-select-selection-search-input {
|
|
|
|
|
- height: 26px;
|
|
|
|
|
- line-height: 27px !important;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .ant-select-selection-placeholder {
|
|
|
|
|
- line-height: 26px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- .allDatePicker.ant-calendar-picker {
|
|
|
|
|
- height: 26px !important;
|
|
|
|
|
- border: 1px solid @m-grey46 !important;
|
|
|
|
|
- .ant-calendar-picker-input.ant-input {
|
|
|
|
|
- height: 26px;
|
|
|
|
|
- line-height: 26px;
|
|
|
|
|
- &::placeholder {
|
|
|
|
|
- color: @m-grey10 !important;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .ant-select-selection-search-input {
|
|
|
|
|
+ height: 26px;
|
|
|
|
|
+ line-height: 27px !important;
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ant-select-selection-placeholder {
|
|
|
|
|
+ line-height: 26px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- .conditionSelect + .conditionSelect {
|
|
|
|
|
- margin-left: 10px;
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .allDatePicker.ant-calendar-picker {
|
|
|
|
|
+ height: 26px !important;
|
|
|
|
|
+ border: 1px solid @m-grey46 !important;
|
|
|
|
|
+
|
|
|
|
|
+ .ant-calendar-picker-input.ant-input {
|
|
|
|
|
+ height: 26px;
|
|
|
|
|
+ line-height: 26px;
|
|
|
|
|
+
|
|
|
|
|
+ &::placeholder {
|
|
|
|
|
+ color: @m-grey10 !important;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .conditionSelect+.conditionSelect {
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|