|
|
@@ -1,231 +1,153 @@
|
|
|
<template>
|
|
|
- <!-- 挂牌求购 -->
|
|
|
- <a-drawer
|
|
|
- placement="right"
|
|
|
- :closable="false"
|
|
|
- :visible="visible"
|
|
|
- :width="1052"
|
|
|
- :destroyOnClose="true"
|
|
|
- class="post-buying-container"
|
|
|
- >
|
|
|
- <div class="collapse">
|
|
|
- <div class="collapse-close" @click="cancelAction">
|
|
|
- <DoubleRightOutlined />
|
|
|
- </div>
|
|
|
- <slot name="titleLeft"></slot>
|
|
|
+ <!-- 挂牌求购 -->
|
|
|
+ <a-drawer placement="right" :closable="false" :visible="visible" :width="1052" :destroyOnClose="true" class="post-buying-container">
|
|
|
+ <div class="collapse">
|
|
|
+ <div class="collapse-close" @click="cancelAction">
|
|
|
+ <DoubleRightOutlined />
|
|
|
+ </div>
|
|
|
+ <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>
|
|
|
- <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>
|
|
|
+ <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_out(selectedRow.refgoodscode, 'last')]">{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</div>
|
|
|
+ <div class="content--right">
|
|
|
+ <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ quoteChange_out(selectedRow.refgoodscode) }}</span>
|
|
|
+ <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ quoteAmplitude_out(selectedRow.refgoodscode) }}</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_out(selectedRow.refgoodscode, 'last')]"
|
|
|
- >{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</div>
|
|
|
- <div class="content--right">
|
|
|
- <span
|
|
|
- :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
|
|
|
- >{{ quoteChange_out(selectedRow.refgoodscode) }}</span>
|
|
|
- <span
|
|
|
- :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
|
|
|
- >{{ quoteAmplitude_out(selectedRow.refgoodscode) }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <a-row>
|
|
|
- <a-col :span="4" :offset="2">最高价</a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <span
|
|
|
- :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'highest')"
|
|
|
- >{{ getQuoteValue_out(selectedRow.refgoodscode, 'highest') }}</span>
|
|
|
- </a-col>
|
|
|
- <a-col :span="4" :offset="2">开盘价</a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <span
|
|
|
- :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'opened')"
|
|
|
- >{{ getQuoteValue_out(selectedRow.refgoodscode, 'opened') }}</span>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row>
|
|
|
- <a-col :span="4" :offset="2">最低价</a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <span
|
|
|
- :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'lowest')"
|
|
|
- >{{ getQuoteValue_out(selectedRow.refgoodscode, 'lowest') }}</span>
|
|
|
- </a-col>
|
|
|
- <a-col :span="4" :offset="2">昨结价</a-col>
|
|
|
- <a-col
|
|
|
- :span="6"
|
|
|
- >{{ getQuoteValue_out(selectedRow.refgoodscode, 'presettle') }}</a-col>
|
|
|
- </a-row>
|
|
|
- <div class="chart-content">
|
|
|
- <Chart
|
|
|
- :selectedRow="getQuoteDayInfoByCode(selectedRow.refgoodscode)"
|
|
|
- :showExchange="false"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4" :offset="2">最高价</a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'highest')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'highest') }}</span>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="4" :offset="2">开盘价</a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'opened')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'opened') }}</span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4" :offset="2">最低价</a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'lowest')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'lowest') }}</span>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="4" :offset="2">昨结价</a-col>
|
|
|
+ <a-col :span="6">{{ getQuoteValue_out(selectedRow.refgoodscode, 'presettle') }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ <div class="chart-content">
|
|
|
+ <Chart :selectedRow="getQuoteDayInfoByCode(selectedRow.refgoodscode)" :showExchange="false" />
|
|
|
+ </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">
|
|
|
+ <a-form-item label="参考价">
|
|
|
+ <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</span>
|
|
|
+ </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="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">
|
|
|
- <a-form-item label="参考价">
|
|
|
- <span
|
|
|
- :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')"
|
|
|
- >{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</span>
|
|
|
- </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>
|
|
|
- </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-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
+ <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-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>
|
|
|
- </div>
|
|
|
- </a-drawer>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-drawer>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -265,184 +187,184 @@ import { handleQuotePriceColor_out, handleSubcriteOnDemandQuote, quoteAmplitude_
|
|
|
import Chart from '@/views/market/spot_trade/components/goods-chart/chart/index.vue';
|
|
|
|
|
|
export default defineComponent({
|
|
|
- emits: ['cancel', 'update'],
|
|
|
- name: ModalEnum.spot_trade_warehouse_post_buying,
|
|
|
- components: { Des, Drawer, PlusOutlined, MinusOutlined, SwapOutlined, LineChartOutlined, DoubleRightOutlined, Chart },
|
|
|
- props: {
|
|
|
- selectedRow: {
|
|
|
- type: Object as PropType<RefGoodsList>,
|
|
|
- default: {},
|
|
|
- },
|
|
|
+ emits: ['cancel', 'update'],
|
|
|
+ name: ModalEnum.spot_trade_warehouse_post_buying,
|
|
|
+ components: { Des, Drawer, PlusOutlined, MinusOutlined, SwapOutlined, LineChartOutlined, DoubleRightOutlined, Chart },
|
|
|
+ props: {
|
|
|
+ selectedRow: {
|
|
|
+ type: Object as PropType<RefGoodsList>,
|
|
|
+ default: {},
|
|
|
},
|
|
|
- setup(props, context) {
|
|
|
- // 查询 我的 持仓
|
|
|
- const { tableList, queryTable } = queryTableList<QueryTradePositionRsp>();
|
|
|
- queryTable(queryTradePosition);
|
|
|
+ },
|
|
|
+ setup(props, context) {
|
|
|
+ // 查询 我的 持仓
|
|
|
+ const { tableList, queryTable } = queryTableList<QueryTradePositionRsp>();
|
|
|
+ queryTable(queryTradePosition);
|
|
|
|
|
|
- // 外部参考行情数据
|
|
|
- const selected = getQuoteDayInfoByCode(props.selectedRow.refgoodscode);
|
|
|
+ // 外部参考行情数据
|
|
|
+ const selected = getQuoteDayInfoByCode(props.selectedRow.refgoodscode);
|
|
|
|
|
|
- const marginParam: QueryTjmdTodayAccountMarginReq = {
|
|
|
- accountid: getSelectedAccountId()!.toString(),
|
|
|
- goodsid: props.selectedRow.goodsid,
|
|
|
- marketids: getMarketIdsByTradeMode(TradeMode.DiaoQi),
|
|
|
- };
|
|
|
- // 获取保证金比例
|
|
|
- const { getReckonMarginTypeAndValueByTradeMode } = useTodayMargin(marginParam);
|
|
|
- // 控制弹窗
|
|
|
- const { visible, cancel } = _closeModal(context);
|
|
|
- const cancelAction = () => cancel()
|
|
|
+ const marginParam: QueryTjmdTodayAccountMarginReq = {
|
|
|
+ accountid: getSelectedAccountId()!.toString(),
|
|
|
+ goodsid: props.selectedRow.goodsid,
|
|
|
+ marketids: getMarketIdsByTradeMode(TradeMode.DiaoQi),
|
|
|
+ };
|
|
|
+ // 获取保证金比例
|
|
|
+ const { getReckonMarginTypeAndValueByTradeMode } = useTodayMargin(marginParam);
|
|
|
+ // 控制弹窗
|
|
|
+ const { visible, cancel } = _closeModal(context);
|
|
|
+ const cancelAction = () => cancel()
|
|
|
|
|
|
- // 表单
|
|
|
- const { rules, formState, formRef } = handleForm();
|
|
|
- const loading = ref<boolean>(false);
|
|
|
- // 买卖方向
|
|
|
- const { direction, changeDirection, isBuy } = useBuySellDirection();
|
|
|
- // 资金账号
|
|
|
- const { canUseMoney, accountList } = useTaAccount<FormParam>(formState);
|
|
|
- // 金额 数量 保证金
|
|
|
- const param: ListingTradeNumAndPrice<FormParam> = {
|
|
|
- formState,
|
|
|
- goodscode: props.selectedRow.refgoodscode,
|
|
|
- isFloat,
|
|
|
- canUseMoney,
|
|
|
- };
|
|
|
- const { getFloatPrice, getMoney } = useListingTradeNumAndPrice<FormParam>(param);
|
|
|
- // 保证金
|
|
|
- const getMargin = () => {
|
|
|
- let result = '--';
|
|
|
- const [marginType, marginValue] = getReckonMarginTypeAndValueByTradeMode(TradeMode.DiaoQi);
|
|
|
- if (marginType) {
|
|
|
- // 保证金方式 1:比率 2:固定
|
|
|
- if (marginType === 1) {
|
|
|
- if (getMoney()) {
|
|
|
- // 履约保证金=挂牌金额*保证金比例
|
|
|
- result = (Math.round(getMoney() * marginValue * 100) / 100).toString();
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (formState.OrderQty) {
|
|
|
- // 履约保证金=挂牌数量*保证金固定值
|
|
|
- result = (Math.round(formState.OrderQty * marginValue * 100) / 100).toString();
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- return result;
|
|
|
- };
|
|
|
- // 最大数量
|
|
|
- const getMaxNum = () => {
|
|
|
- let result = 0;
|
|
|
- const goodscode = props.selectedRow.goodscode;
|
|
|
- const [marginType, marginValue] = getReckonMarginTypeAndValueByTradeMode(TradeMode.DiaoQi);
|
|
|
- // 可用资金
|
|
|
- const temp = +canUseMoney();
|
|
|
- const money = temp > 0 ? temp : 0;
|
|
|
- const price = isFloat() ? getQuoteDayInfoByCodeFindPrice(props.selectedRow.refgoodscode) : formState.FixedPrice;
|
|
|
- if (marginType && money && price && price !== '--') {
|
|
|
- // 保证金方式 1:比率 2:固定
|
|
|
- if (marginType === 1) {
|
|
|
- // 合约单位
|
|
|
- const agreeunit = getGoodsAgreeunitByGoodsCode(goodscode);
|
|
|
- // 最大可挂牌数量=可用/(价格*合约单位*保证金比例
|
|
|
- result = money / (+price * marginValue * agreeunit);
|
|
|
- } else {
|
|
|
- // 最大可挂牌数量=可用/保证金固定值
|
|
|
- result = money / marginValue;
|
|
|
- }
|
|
|
- }
|
|
|
- return +result.toFixed(0);
|
|
|
- };
|
|
|
- // 估算价
|
|
|
- function getPrice() {
|
|
|
- let result = '--';
|
|
|
- const goodsPrice = getQuoteDayInfoByCodeFindPrice(props.selectedRow.refgoodscode);
|
|
|
- if (goodsPrice && goodsPrice !== '--') {
|
|
|
- // 有实时行情价格
|
|
|
- result = ((goodsPrice as number) + formState.PriceMove).toFixed(2);
|
|
|
- }
|
|
|
- return result;
|
|
|
+ // 表单
|
|
|
+ const { rules, formState, formRef } = handleForm();
|
|
|
+ const loading = ref<boolean>(false);
|
|
|
+ // 买卖方向
|
|
|
+ const { direction, changeDirection, isBuy } = useBuySellDirection();
|
|
|
+ // 资金账号
|
|
|
+ const { canUseMoney, accountList } = useTaAccount<FormParam>(formState);
|
|
|
+ // 金额 数量 保证金
|
|
|
+ const param: ListingTradeNumAndPrice<FormParam> = {
|
|
|
+ formState,
|
|
|
+ goodscode: props.selectedRow.refgoodscode,
|
|
|
+ isFloat,
|
|
|
+ canUseMoney,
|
|
|
+ };
|
|
|
+ const { getFloatPrice, getMoney } = useListingTradeNumAndPrice<FormParam>(param);
|
|
|
+ // 保证金
|
|
|
+ const getMargin = () => {
|
|
|
+ let result = '--';
|
|
|
+ const [marginType, marginValue] = getReckonMarginTypeAndValueByTradeMode(TradeMode.DiaoQi);
|
|
|
+ if (marginType) {
|
|
|
+ // 保证金方式 1:比率 2:固定
|
|
|
+ if (marginType === 1) {
|
|
|
+ if (getMoney()) {
|
|
|
+ // 履约保证金=挂牌金额*保证金比例
|
|
|
+ result = (Math.round(getMoney() * marginValue * 100) / 100).toString();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (formState.OrderQty) {
|
|
|
+ // 履约保证金=挂牌数量*保证金固定值
|
|
|
+ result = (Math.round(formState.OrderQty * marginValue * 100) / 100).toString();
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- function submit() {
|
|
|
- validateAction<FormParam>(formRef, formState).then((res) => {
|
|
|
- const { goodsid } = props.selectedRow;
|
|
|
- const param: OrderReq = {
|
|
|
- ClientSerialNo: uuidv4(), // 客户端流水号
|
|
|
- ClientOrderTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // 客户端委托时间
|
|
|
- ClientType: 4, // 终端类型
|
|
|
- LoginID: geLoginID_number()!, // 登陆账号
|
|
|
- AccountID: res.accountid, // 交易账号
|
|
|
- GoodsID: goodsid, // 商品ID
|
|
|
- MarketID: getMarketByTradeMode(TradeMode.DiaoQi)?.marketid, // 市场ID
|
|
|
- ValidType: 1, // 校验类型 当日有效
|
|
|
- OperateType: 1, // 操作类型: 申请
|
|
|
- OrderSrc: 1, // 单据来源: 客户端下单
|
|
|
- RelatedID: selected!.orderid, // 操作员账号ID
|
|
|
- OperatorID: Number(geLoginID_number()),
|
|
|
- // MarketMaxSub: number // 市价允许最大偏差(做市)
|
|
|
- OrderQty: res.OrderQty, // 委托数量
|
|
|
- BuyOrSell: direction.value, // 买卖方向 0 买 1 卖
|
|
|
- BuildType: 1, // 下单类型 1 建 2 平
|
|
|
- // CurtQuotePrice: 0, // 保留,计算冻结金额使用
|
|
|
- // SpPrice: 0 ,// 止盈价格
|
|
|
- // SlPrice: 0 , // 止损价格
|
|
|
- PriceMode: res.priceType, // 取价方式
|
|
|
- TimevalidType: 1, // 时间有效类型 单日有效
|
|
|
- TriggerType: 1, // 预埋单触发类型
|
|
|
- // TriggerPrice: number // 预埋单触发价格
|
|
|
- ListingSelectType: 1, // 挂牌点选类型 1:挂牌 2:摘牌 3:先摘后挂
|
|
|
- DelistingType: 2, // 摘牌类型 2:点选成交
|
|
|
- // RelatedID: number // 关联单号
|
|
|
- OptionType: 1, // 期权类型(1:认购(看涨)2:认沽(看跌))
|
|
|
- // Premium: number // 权利金
|
|
|
- // TriggerOperator: number // 触发条件(1:大于等于2:小于等于)
|
|
|
- // ServiceTime: string // 服务端时间
|
|
|
- // CouponTypeID: number // 优惠券类型ID(买方)
|
|
|
- // UsedQty: number // 使用数量
|
|
|
- // ValidTime: string // 指定有效日期
|
|
|
- // ReceiveInfoID: number // 收货地址ID
|
|
|
- };
|
|
|
- if (isFloat()) {
|
|
|
- // 浮动价
|
|
|
- param.MarketMaxSub = res.PriceMove; // 基差
|
|
|
- } else {
|
|
|
- // 浮动价 不传价格,固定价才传价格
|
|
|
- param.OrderPrice = res.FixedPrice;
|
|
|
- }
|
|
|
- requestResultLoadingAndInfo(diaoQiOrder, param, loading, ['挂牌求购成功', '挂牌求购失败:']).then(() => {
|
|
|
- cancel(true);
|
|
|
- Bus.$emit('spotTrade', true);
|
|
|
- });
|
|
|
- });
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ };
|
|
|
+ // 最大数量
|
|
|
+ const getMaxNum = () => {
|
|
|
+ let result = 0;
|
|
|
+ const goodscode = props.selectedRow.goodscode;
|
|
|
+ const [marginType, marginValue] = getReckonMarginTypeAndValueByTradeMode(TradeMode.DiaoQi);
|
|
|
+ // 可用资金
|
|
|
+ const temp = +canUseMoney();
|
|
|
+ const money = temp > 0 ? temp : 0;
|
|
|
+ const price = isFloat() ? getQuoteDayInfoByCodeFindPrice(props.selectedRow.refgoodscode) : formState.FixedPrice;
|
|
|
+ if (marginType && money && price && price !== '--') {
|
|
|
+ // 保证金方式 1:比率 2:固定
|
|
|
+ if (marginType === 1) {
|
|
|
+ // 合约单位
|
|
|
+ const agreeunit = getGoodsAgreeunitByGoodsCode(goodscode);
|
|
|
+ // 最大可挂牌数量=可用/(价格*合约单位*保证金比例
|
|
|
+ result = money / (+price * marginValue * agreeunit);
|
|
|
+ } else {
|
|
|
+ // 最大可挂牌数量=可用/保证金固定值
|
|
|
+ result = money / marginValue;
|
|
|
}
|
|
|
- return {
|
|
|
- submit,
|
|
|
- cancel,
|
|
|
- cancelAction,
|
|
|
- visible,
|
|
|
- rules,
|
|
|
- formState,
|
|
|
- formRef,
|
|
|
- isFloat,
|
|
|
- getMaxNum,
|
|
|
- getMoney,
|
|
|
- getMargin,
|
|
|
- getFloatPrice,
|
|
|
- direction,
|
|
|
- changeDirection,
|
|
|
- isBuy,
|
|
|
- useUserType,
|
|
|
- canUseMoney,
|
|
|
- accountList,
|
|
|
- ...usePrice(),
|
|
|
- ...useNum(getMaxNum),
|
|
|
- ...useChart(),
|
|
|
- getPrice,
|
|
|
- loading,
|
|
|
- selected,
|
|
|
- handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude,
|
|
|
- handleQuotePriceColor_out, handleSubcriteOnDemandQuote, quoteAmplitude_out, quoteAmplituOfVibration, quoteChange_out, getQuoteValue_out, getQuoteDayInfoByCode
|
|
|
+ }
|
|
|
+ return +result.toFixed(0);
|
|
|
+ };
|
|
|
+ // 估算价
|
|
|
+ function getPrice() {
|
|
|
+ let result = '--';
|
|
|
+ const goodsPrice = getQuoteDayInfoByCodeFindPrice(props.selectedRow.refgoodscode);
|
|
|
+ if (goodsPrice && goodsPrice !== '--') {
|
|
|
+ // 有实时行情价格
|
|
|
+ result = ((goodsPrice as number) + formState.PriceMove).toFixed(2);
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+
|
|
|
+ function submit() {
|
|
|
+ validateAction<FormParam>(formRef, formState).then((res) => {
|
|
|
+ const { goodsid } = props.selectedRow;
|
|
|
+ const param: OrderReq = {
|
|
|
+ ClientSerialNo: uuidv4(), // 客户端流水号
|
|
|
+ ClientOrderTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // 客户端委托时间
|
|
|
+ ClientType: 4, // 终端类型
|
|
|
+ LoginID: geLoginID_number()!, // 登陆账号
|
|
|
+ AccountID: res.accountid, // 交易账号
|
|
|
+ GoodsID: goodsid, // 商品ID
|
|
|
+ MarketID: getMarketByTradeMode(TradeMode.DiaoQi)?.marketid, // 市场ID
|
|
|
+ ValidType: 1, // 校验类型 当日有效
|
|
|
+ OperateType: 1, // 操作类型: 申请
|
|
|
+ OrderSrc: 1, // 单据来源: 客户端下单
|
|
|
+ RelatedID: selected!.orderid, // 操作员账号ID
|
|
|
+ OperatorID: Number(geLoginID_number()),
|
|
|
+ // MarketMaxSub: number // 市价允许最大偏差(做市)
|
|
|
+ OrderQty: res.OrderQty, // 委托数量
|
|
|
+ BuyOrSell: direction.value, // 买卖方向 0 买 1 卖
|
|
|
+ BuildType: 1, // 下单类型 1 建 2 平
|
|
|
+ // CurtQuotePrice: 0, // 保留,计算冻结金额使用
|
|
|
+ // SpPrice: 0 ,// 止盈价格
|
|
|
+ // SlPrice: 0 , // 止损价格
|
|
|
+ PriceMode: res.priceType, // 取价方式
|
|
|
+ TimevalidType: 1, // 时间有效类型 单日有效
|
|
|
+ TriggerType: 1, // 预埋单触发类型
|
|
|
+ // TriggerPrice: number // 预埋单触发价格
|
|
|
+ ListingSelectType: 1, // 挂牌点选类型 1:挂牌 2:摘牌 3:先摘后挂
|
|
|
+ DelistingType: 2, // 摘牌类型 2:点选成交
|
|
|
+ // RelatedID: number // 关联单号
|
|
|
+ OptionType: 1, // 期权类型(1:认购(看涨)2:认沽(看跌))
|
|
|
+ // Premium: number // 权利金
|
|
|
+ // TriggerOperator: number // 触发条件(1:大于等于2:小于等于)
|
|
|
+ // ServiceTime: string // 服务端时间
|
|
|
+ // CouponTypeID: number // 优惠券类型ID(买方)
|
|
|
+ // UsedQty: number // 使用数量
|
|
|
+ // ValidTime: string // 指定有效日期
|
|
|
+ // ReceiveInfoID: number // 收货地址ID
|
|
|
};
|
|
|
- },
|
|
|
+ if (isFloat()) {
|
|
|
+ // 浮动价
|
|
|
+ param.MarketMaxSub = res.PriceMove; // 基差
|
|
|
+ } else {
|
|
|
+ // 浮动价 不传价格,固定价才传价格
|
|
|
+ param.OrderPrice = res.FixedPrice;
|
|
|
+ }
|
|
|
+ requestResultLoadingAndInfo(diaoQiOrder, param, loading, ['挂牌求购成功', '挂牌求购失败:']).then(() => {
|
|
|
+ cancel(true);
|
|
|
+ Bus.$emit('spotTrade', true);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ submit,
|
|
|
+ cancel,
|
|
|
+ cancelAction,
|
|
|
+ visible,
|
|
|
+ rules,
|
|
|
+ formState,
|
|
|
+ formRef,
|
|
|
+ isFloat,
|
|
|
+ getMaxNum,
|
|
|
+ getMoney,
|
|
|
+ getMargin,
|
|
|
+ getFloatPrice,
|
|
|
+ direction,
|
|
|
+ changeDirection,
|
|
|
+ isBuy,
|
|
|
+ useUserType,
|
|
|
+ canUseMoney,
|
|
|
+ accountList,
|
|
|
+ ...usePrice(),
|
|
|
+ ...useNum(getMaxNum),
|
|
|
+ ...useChart(),
|
|
|
+ getPrice,
|
|
|
+ loading,
|
|
|
+ selected,
|
|
|
+ handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude,
|
|
|
+ handleQuotePriceColor_out, handleSubcriteOnDemandQuote, quoteAmplitude_out, quoteAmplituOfVibration, quoteChange_out, getQuoteValue_out, getQuoteDayInfoByCode
|
|
|
+ };
|
|
|
+ },
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
@@ -455,13 +377,23 @@ export default defineComponent({
|
|
|
}
|
|
|
.chart-content {
|
|
|
height: 400px;
|
|
|
+
|
|
|
+ .chart-content__header,
|
|
|
+ .chart-content__main {
|
|
|
+ width: 90% !important;
|
|
|
+ margin: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-slider {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
}
|
|
|
.formBar {
|
|
|
height: 100%;
|
|
|
max-height: 100%;
|
|
|
}
|
|
|
.post_buying_chart {
|
|
|
- [theme="light"] & {
|
|
|
+ [theme='light'] & {
|
|
|
--bgcolor: #fff;
|
|
|
--tab-border-color: #dae5ec;
|
|
|
--tab-checked-color: #0866b8;
|
|
|
@@ -621,22 +553,14 @@ export default defineComponent({
|
|
|
text-align: center;
|
|
|
border: 0;
|
|
|
&:hover {
|
|
|
- background: linear-gradient(
|
|
|
- 0deg,
|
|
|
- @m-blue0-hover 0%,
|
|
|
- @m-blue2-hover 100%
|
|
|
- );
|
|
|
+ background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
|
|
|
color: @m-white0-hover;
|
|
|
}
|
|
|
}
|
|
|
.cancelBtn:extend(.listedBtn) {
|
|
|
background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%) !important;
|
|
|
&:hover {
|
|
|
- background: linear-gradient(
|
|
|
- 0deg,
|
|
|
- @m-grey12-hover 0%,
|
|
|
- @m-grey13-hover 100%
|
|
|
- ) !important;
|
|
|
+ background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%) !important;
|
|
|
color: @m-white0-hover;
|
|
|
}
|
|
|
}
|