|
|
@@ -1,146 +1,193 @@
|
|
|
<template>
|
|
|
<!-- 挂牌求购 -->
|
|
|
- <Drawer
|
|
|
- :title="isBuy() ? '挂牌求购' : '挂牌卖出'"
|
|
|
- :placement="'right'"
|
|
|
+ <a-drawer
|
|
|
+ placement="right"
|
|
|
+ :closable="false"
|
|
|
:visible="visible"
|
|
|
- @cancel="cancel"
|
|
|
- class="top"
|
|
|
+ :width="900"
|
|
|
+ :height="500"
|
|
|
+ :destroyOnClose="true"
|
|
|
+ class="post-buying-container"
|
|
|
>
|
|
|
- <div class="title_right">
|
|
|
- <span class="tline"></span>
|
|
|
- <svg class="icon svg-icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-B" />
|
|
|
- </svg>
|
|
|
- <span @click="changeDirection">{{ isBuy() ? '卖出' : '求购' }}</span>
|
|
|
- </div>
|
|
|
- <template v-slot:titleLeft>
|
|
|
- <div class="collapse-close" @click="showChartAction">
|
|
|
- <LineChartOutlined />
|
|
|
+ <div class="collapse">
|
|
|
+ <div class="collapse-close" @click="cancelAction">
|
|
|
+ <DoubleRightOutlined />
|
|
|
</div>
|
|
|
- </template>
|
|
|
- <div class="post_buying">
|
|
|
- <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
|
|
|
- <div class="formBar">
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="24">
|
|
|
- <a-form-item label="交易账户" name="accountid">
|
|
|
- <a-select
|
|
|
- class="inlineFormSelect"
|
|
|
- style="width: 260px"
|
|
|
- v-model:value="formState.accountid"
|
|
|
- placeholder="请选择"
|
|
|
- >
|
|
|
- <a-select-option
|
|
|
- v-for="item in accountList"
|
|
|
- :value="item.accountid"
|
|
|
- :key="item.accountid"
|
|
|
- >{{ item.accountid }}</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24">
|
|
|
- <a-form-item label="价格类型" name>
|
|
|
- <a-radio-group
|
|
|
- class="commonRadioGroup"
|
|
|
- v-model:value="formState.priceType"
|
|
|
- >
|
|
|
- <a-radio :value="2">固定价</a-radio>
|
|
|
- <!-- 掉期交易商有固定价和浮动价选择 -->
|
|
|
- <!-- 普通交易商只有固定价 -->
|
|
|
- <a-radio :value="3" v-if="!useUserType()">浮动价</a-radio>
|
|
|
- </a-radio-group>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24" v-if="!isFloat()">
|
|
|
- <a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
|
|
|
- <a-input-number
|
|
|
- class="commonInput"
|
|
|
- style="width: 260px"
|
|
|
- :min="0"
|
|
|
- v-model:value="formState.FixedPrice"
|
|
|
- />
|
|
|
- <MinusOutlined @click="decreasePrice" />
|
|
|
- <PlusOutlined @click="increasePrice" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24" v-else>
|
|
|
- <a-form-item label="点差" name="PriceMove">
|
|
|
- <a-input-number
|
|
|
- class="commonInput"
|
|
|
- style="width: 260px"
|
|
|
- v-model:value="formState.PriceMove"
|
|
|
- />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24" v-if="isFloat()">
|
|
|
- <a-form-item label="估算价">
|
|
|
- <span class="white">{{ getPrice() }}</span>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
+ <slot name="titleLeft"></slot>
|
|
|
+ </div>
|
|
|
+ <div class="collapseCont">
|
|
|
+ <div class="title">{{ isBuy() ? '挂牌求购' : '挂牌卖出' }}</div>
|
|
|
+ <div class="content highContent">
|
|
|
+ <div class="title_right">
|
|
|
+ <span class="tline"></span>
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-B" />
|
|
|
+ </svg>
|
|
|
+ <span @click="changeDirection">{{ isBuy() ? '卖出' : '求购' }}</span>
|
|
|
+ </div>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="12">
|
|
|
+ <div class="post_buying_chart">
|
|
|
+ <div class="buying_chart__nav">
|
|
|
+ <div class="content--left">{{ selectedRow.goodscode }}</div>
|
|
|
+ <div class="content--right">{{ selectedRow.goodsname }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-tips__last">
|
|
|
+ <div
|
|
|
+ :class="['content--left', handleQuotePriceColor(selectedRow.last, selectedRow.presettle)]"
|
|
|
+ >{{ handleNoneValue(selectedRow.last) }}</div>
|
|
|
+ <div class="content--right">
|
|
|
+ <span
|
|
|
+ :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
|
|
|
+ >{{ quoteChange(selectedRow) }}</span>
|
|
|
+ <span
|
|
|
+ :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
|
|
|
+ >{{ quoteAmplitude(selectedRow) }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <div class="post_buying">
|
|
|
+ <a-form
|
|
|
+ class="inlineForm dialogForm"
|
|
|
+ ref="formRef"
|
|
|
+ :model="formState"
|
|
|
+ :rules="rules"
|
|
|
+ >
|
|
|
+ <div class="formBar">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="交易账户" name="accountid">
|
|
|
+ <a-select
|
|
|
+ class="inlineFormSelect"
|
|
|
+ style="width: 260px"
|
|
|
+ v-model:value="formState.accountid"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <a-select-option
|
|
|
+ v-for="item in accountList"
|
|
|
+ :value="item.accountid"
|
|
|
+ :key="item.accountid"
|
|
|
+ >{{ item.accountid }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="价格类型" name>
|
|
|
+ <a-radio-group
|
|
|
+ class="commonRadioGroup"
|
|
|
+ v-model:value="formState.priceType"
|
|
|
+ >
|
|
|
+ <a-radio :value="2">固定价</a-radio>
|
|
|
+ <!-- 掉期交易商有固定价和浮动价选择 -->
|
|
|
+ <!-- 普通交易商只有固定价 -->
|
|
|
+ <a-radio :value="3" v-if="!useUserType()">浮动价</a-radio>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" v-if="!isFloat()">
|
|
|
+ <a-form-item
|
|
|
+ label="挂牌价格"
|
|
|
+ name="FixedPrice"
|
|
|
+ class="inputIconBox"
|
|
|
+ >
|
|
|
+ <a-input-number
|
|
|
+ class="commonInput"
|
|
|
+ style="width: 260px"
|
|
|
+ :min="0"
|
|
|
+ v-model:value="formState.FixedPrice"
|
|
|
+ />
|
|
|
+ <MinusOutlined @click="decreasePrice" />
|
|
|
+ <PlusOutlined @click="increasePrice" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" v-else>
|
|
|
+ <a-form-item label="点差" name="PriceMove">
|
|
|
+ <a-input-number
|
|
|
+ class="commonInput"
|
|
|
+ style="width: 260px"
|
|
|
+ v-model:value="formState.PriceMove"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" v-if="isFloat()">
|
|
|
+ <a-form-item label="估算价">
|
|
|
+ <span class="white">{{ getPrice() }}</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
|
|
|
- <a-col :span="24">
|
|
|
- <a-form-item label="挂牌数量" name="OrderQty" class="inputIconBox">
|
|
|
- <a-input-number
|
|
|
- class="commonInput"
|
|
|
- style="width: 260px"
|
|
|
- :min="0"
|
|
|
- :max="getMaxNum()"
|
|
|
- v-model:value="formState.OrderQty"
|
|
|
- />
|
|
|
- <MinusOutlined @click="decreaseNum" />
|
|
|
- <PlusOutlined @click="increaseNum" />
|
|
|
- <span class="input-enumdicname">{{ selected.enumdicname }}</span>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24" class="mt-10">
|
|
|
- <a-form-item>
|
|
|
- <a-slider
|
|
|
- :min="0"
|
|
|
- v-model:value="formState.OrderQty"
|
|
|
- :max="getMaxNum()"
|
|
|
- class="formSlider"
|
|
|
- />
|
|
|
- <div class="unit">
|
|
|
- <span>{{ getMaxNum() ? selected.minivalue : 0 }}</span>
|
|
|
- <span>{{ getMaxNum() }}{{ selected.enumdicname }}</span>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item
|
|
|
+ label="挂牌数量"
|
|
|
+ name="OrderQty"
|
|
|
+ class="inputIconBox"
|
|
|
+ >
|
|
|
+ <a-input-number
|
|
|
+ class="commonInput"
|
|
|
+ style="width: 260px"
|
|
|
+ :min="0"
|
|
|
+ :max="getMaxNum()"
|
|
|
+ v-model:value="formState.OrderQty"
|
|
|
+ />
|
|
|
+ <MinusOutlined @click="decreaseNum" />
|
|
|
+ <PlusOutlined @click="increaseNum" />
|
|
|
+ <span
|
|
|
+ class="input-enumdicname"
|
|
|
+ >{{ selected.enumdicname }}</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" class="mt-10">
|
|
|
+ <a-form-item>
|
|
|
+ <a-slider
|
|
|
+ :min="0"
|
|
|
+ v-model:value="formState.OrderQty"
|
|
|
+ :max="getMaxNum()"
|
|
|
+ class="formSlider"
|
|
|
+ />
|
|
|
+ <div class="unit">
|
|
|
+ <span>{{ getMaxNum() ? selected.minivalue : 0 }}</span>
|
|
|
+ <span>{{ getMaxNum() }}{{ selected.enumdicname }}</span>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" class="relative mt20">
|
|
|
+ <a-form-item :label="'挂牌金额'">
|
|
|
+ <span class="white ml8">{{ getMoney() }}</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" v-if="getMargin()">
|
|
|
+ <a-form-item :label="'履约保证金'">
|
|
|
+ <span class="white ml8">{{ getMargin() }}</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="可用资金">
|
|
|
+ <span class="white ml8">{{ canUseMoney() }}</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
</div>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24" class="relative mt20">
|
|
|
- <a-form-item :label="'挂牌金额'">
|
|
|
- <span class="white ml8">{{ getMoney() }}</span>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24" v-if="getMargin()">
|
|
|
- <a-form-item :label="'履约保证金'">
|
|
|
- <span class="white ml8">{{ getMargin() }}</span>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24">
|
|
|
- <a-form-item label="可用资金">
|
|
|
- <span class="white ml8">{{ canUseMoney() }}</span>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </div>
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="24" class="fixedBtns">
|
|
|
- <a-form-item class="btnCenter">
|
|
|
- <a-button
|
|
|
- class="listedBtn"
|
|
|
- :loading="loading"
|
|
|
- :disabled="loading"
|
|
|
- @click="submit"
|
|
|
- >{{ isBuy() ? '买入' : '卖出' }}</a-button>
|
|
|
- <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
|
|
|
- </a-form-item>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24" class="fixedBtns">
|
|
|
+ <a-form-item class="btnCenter">
|
|
|
+ <a-button
|
|
|
+ class="listedBtn"
|
|
|
+ :loading="loading"
|
|
|
+ :disabled="loading"
|
|
|
+ @click="submit"
|
|
|
+ >{{ isBuy() ? '买入' : '卖出' }}</a-button>
|
|
|
+ <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
- </a-form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div>图表</div>
|
|
|
- </Drawer>
|
|
|
+ </a-drawer>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -175,10 +222,12 @@ import { useUserType } from '../setup';
|
|
|
import { FormParam } from './interface';
|
|
|
import { handleForm, isFloat, useBuySellDirection, useNum, usePrice, useChart } from './setup';
|
|
|
import { DoubleRightOutlined, LineChartOutlined } from '@ant-design/icons-vue';
|
|
|
+import { handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude } from '@/common/setup/table/tableQuote';
|
|
|
+
|
|
|
export default defineComponent({
|
|
|
emits: ['cancel', 'update'],
|
|
|
name: ModalEnum.spot_trade_warehouse_post_buying,
|
|
|
- components: { Des, Drawer, PlusOutlined, MinusOutlined, SwapOutlined, LineChartOutlined },
|
|
|
+ components: { Des, Drawer, PlusOutlined, MinusOutlined, SwapOutlined, LineChartOutlined, DoubleRightOutlined },
|
|
|
props: {
|
|
|
selectedRow: {
|
|
|
type: Object as PropType<RefGoodsList>,
|
|
|
@@ -202,6 +251,8 @@ export default defineComponent({
|
|
|
const { getReckonMarginTypeAndValueByTradeMode } = useTodayMargin(marginParam);
|
|
|
// 控制弹窗
|
|
|
const { visible, cancel } = _closeModal(context);
|
|
|
+ const cancelAction = () => cancel()
|
|
|
+
|
|
|
// 表单
|
|
|
const { rules, formState, formRef } = handleForm();
|
|
|
const loading = ref<boolean>(false);
|
|
|
@@ -330,6 +381,7 @@ export default defineComponent({
|
|
|
return {
|
|
|
submit,
|
|
|
cancel,
|
|
|
+ cancelAction,
|
|
|
visible,
|
|
|
rules,
|
|
|
formState,
|
|
|
@@ -352,12 +404,95 @@ export default defineComponent({
|
|
|
loading,
|
|
|
selected,
|
|
|
showChart,
|
|
|
+ handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude
|
|
|
};
|
|
|
},
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
+<style lang="less">
|
|
|
+.post-buying-container {
|
|
|
+ top: 101px;
|
|
|
+ .ant-drawer-content-wrapper {
|
|
|
+ height: 500px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.post_buying_chart {
|
|
|
+ [theme="light"] & {
|
|
|
+ --bgcolor: #fff;
|
|
|
+ --tab-border-color: #dae5ec;
|
|
|
+ --tab-checked-color: #0866b8;
|
|
|
+ --tab-checked-bgcolor: #d4e0ff;
|
|
|
+ --slider-border-color: #b2c4dd;
|
|
|
+ --slider-bgcolor: #edf2f7;
|
|
|
+ --slider-button-color: #b2c4dd;
|
|
|
+ --row-border-color: #dae5ec;
|
|
|
+ --row-title-color: #acb8c0;
|
|
|
+ --row-content-color: #3c454b;
|
|
|
+ --tik-title-bgcolor: #ecf2f5;
|
|
|
+ --tik-title-color: #7a8a94;
|
|
|
+ }
|
|
|
+
|
|
|
+ // background-color: var(--bgcolor, #0e0e0f);
|
|
|
+
|
|
|
+ // background: @m-blue37;
|
|
|
+ // color: @m-grey67;
|
|
|
+ .buying_chart {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ // background-color: @m-blue36;
|
|
|
+ &__nav {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: @m-grey67;
|
|
|
+ .content {
|
|
|
+ &:first-child:not(:last-child) {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--left {
|
|
|
+ font-size: 16px;
|
|
|
+ color: var(--row-content-color, #acb8c0);
|
|
|
+ }
|
|
|
+
|
|
|
+ &--right {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #fc9618;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chart-tips {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 300px;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ &__nav {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ &:first-child:not(:last-child) {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--left {
|
|
|
+ font-size: 16px;
|
|
|
+ color: var(--row-content-color, #acb8c0);
|
|
|
+ }
|
|
|
+
|
|
|
+ &--right {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #fc9618;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.post_buying {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
huangbin