|
|
@@ -1,128 +1,135 @@
|
|
|
<template>
|
|
|
- <!-- 挂牌求购 -->
|
|
|
- <Drawer :title="isBuy() ? '挂牌求购' : '挂牌卖出' "
|
|
|
- :placement="'right'"
|
|
|
- :visible="visible"
|
|
|
- @cancel="cancel"
|
|
|
- class="top">
|
|
|
- <div class="post_buying">
|
|
|
- <span @click="changeDirection">{{isBuy() ? '卖出' : '求购'}}</span>
|
|
|
- <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">
|
|
|
- <a-input-number class="commonInput"
|
|
|
- style="width: 260px"
|
|
|
- :min="0"
|
|
|
- v-model:value="formState.FixedPrice" />
|
|
|
- </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="估算价"
|
|
|
- name="PriceMove">
|
|
|
- <span class="white">{{getFloatPrice()}}</span>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
+ <!-- 挂牌求购 -->
|
|
|
+ <Drawer
|
|
|
+ :title="isBuy() ? '挂牌求购' : '挂牌卖出' "
|
|
|
+ :placement="'right'"
|
|
|
+ :visible="visible"
|
|
|
+ @cancel="cancel"
|
|
|
+ class="top"
|
|
|
+ >
|
|
|
+ <div class="title_right">
|
|
|
+ <span class="tline"></span>
|
|
|
+ <svg class="icon svg-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-xinjianzengjiaxinzeng-20" />
|
|
|
+ </svg>
|
|
|
+ <span @click="changeDirection">{{isBuy() ? '卖出' : '求购'}}</span>
|
|
|
+ </div>
|
|
|
+ <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="估算价" name="PriceMove">
|
|
|
+ <span class="white">{{getFloatPrice()}}</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
|
|
|
- <a-col :span="24">
|
|
|
- <a-form-item label="挂牌数量"
|
|
|
- name="OrderQty">
|
|
|
- <a-input-number class="commonInput"
|
|
|
- style="width: 260px"
|
|
|
- :min="0"
|
|
|
- :max="getMaxNum()"
|
|
|
- v-model:value="formState.OrderQty" />
|
|
|
- <span class="input-enumdicname">{{selectedRow.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() ? selectedRow.minivalue : 0}}</span>
|
|
|
- <span>{{getMaxNum()}}{{selectedRow.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="decreasePrice" />
|
|
|
+ <PlusOutlined @click="increasePrice" />
|
|
|
+ <span class="input-enumdicname">{{selectedRow.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() ? selectedRow.minivalue : 0}}</span>
|
|
|
+ <span>{{getMaxNum()}}{{selectedRow.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>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24" class="fixedBtns">
|
|
|
+ <a-form-item class="btnCenter">
|
|
|
+ <a-button class="listedBtn" @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-row :gutter="24">
|
|
|
- <a-col :span="24"
|
|
|
- class="fixedBtns">
|
|
|
- <a-form-item class="btnCenter">
|
|
|
- <a-button class="listedBtn"
|
|
|
- @click="submit">{{isBuy() ? '买入' : '卖出'}}</a-button>
|
|
|
- <a-button class="ml10 cancelBtn"
|
|
|
- @click="cancel">取消</a-button>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
- </Drawer>
|
|
|
+ </Drawer>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -143,7 +150,7 @@ import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
|
|
|
import { QueryQuoteGoodsListRsp } from '@/services/go/Tjmd/interface';
|
|
|
import { diaoQiOrder } from '@/services/socket/order';
|
|
|
import { OrderReq } from '@/services/socket/order/interface';
|
|
|
-import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
|
|
+import { MinusOutlined, PlusOutlined, SwapOutlined } from '@ant-design/icons-vue';
|
|
|
import moment from 'moment';
|
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
import { defineComponent, PropType, ref } from 'vue';
|
|
|
@@ -154,7 +161,7 @@ import { handleForm, isFloat, useBuySellDirection } from './setup';
|
|
|
export default defineComponent({
|
|
|
emits: ['cancel', 'update'],
|
|
|
name: ModalEnum.spot_trade_warehouse_post_buying,
|
|
|
- components: { Des, Drawer, PlusOutlined, MinusOutlined },
|
|
|
+ components: { Des, Drawer, PlusOutlined, MinusOutlined, SwapOutlined },
|
|
|
props: {
|
|
|
selectedRow: {
|
|
|
type: Object as PropType<QueryQuoteDayRsp>,
|
|
|
@@ -269,6 +276,7 @@ export default defineComponent({
|
|
|
flex-direction: column;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
+
|
|
|
.ant-form {
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -300,7 +308,32 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+.title_right {
|
|
|
+ color: @m-blue25;
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ right: 19px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ .tline {
|
|
|
+ width: 1px;
|
|
|
+ height: 18px;
|
|
|
+ background: @m-black47;
|
|
|
+ margin-top: 2px;
|
|
|
+ box-shadow: 1px 0px 0px 0px @m-black48;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ font-size: 16px;
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ margin: 3px 7px 3px 17px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+}
|
|
|
.unit {
|
|
|
margin-left: 70px;
|
|
|
width: 260px;
|
marymelisa