|
|
@@ -1,142 +1,146 @@
|
|
|
<template>
|
|
|
- <!-- 挂牌求购 -->
|
|
|
- <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-B" />
|
|
|
- </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="估算价">
|
|
|
- <span class="white">{{getPrice()}}</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-B" />
|
|
|
+ </svg>
|
|
|
+ <span @click="changeDirection">{{ isBuy() ? '卖出' : '求购' }}</span>
|
|
|
+ </div>
|
|
|
+ <template v-slot:titleLeft>
|
|
|
+ <div class="collapse-close" @click="showChartAction">
|
|
|
+ <LineChartOutlined />
|
|
|
+ </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>
|
|
|
|
|
|
- <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>
|
|
|
+ <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-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>
|
|
|
- </Drawer>
|
|
|
+ <div>图表</div>
|
|
|
+ </Drawer>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -169,12 +173,12 @@ import { defineComponent, PropType, ref } from 'vue';
|
|
|
import { RefGoodsList } from '../../interface';
|
|
|
import { useUserType } from '../setup';
|
|
|
import { FormParam } from './interface';
|
|
|
-import { handleForm, isFloat, useBuySellDirection, useNum, usePrice } from './setup';
|
|
|
-
|
|
|
+import { handleForm, isFloat, useBuySellDirection, useNum, usePrice, useChart } from './setup';
|
|
|
+import { DoubleRightOutlined, LineChartOutlined } from '@ant-design/icons-vue';
|
|
|
export default defineComponent({
|
|
|
emits: ['cancel', 'update'],
|
|
|
name: ModalEnum.spot_trade_warehouse_post_buying,
|
|
|
- components: { Des, Drawer, PlusOutlined, MinusOutlined, SwapOutlined },
|
|
|
+ components: { Des, Drawer, PlusOutlined, MinusOutlined, SwapOutlined, LineChartOutlined },
|
|
|
props: {
|
|
|
selectedRow: {
|
|
|
type: Object as PropType<RefGoodsList>,
|
|
|
@@ -267,6 +271,10 @@ export default defineComponent({
|
|
|
}
|
|
|
return result;
|
|
|
}
|
|
|
+ // 显示 行情图表
|
|
|
+ function showChart() {
|
|
|
+
|
|
|
+ }
|
|
|
function submit() {
|
|
|
validateAction<FormParam>(formRef, formState).then((res) => {
|
|
|
const { goodsid } = props.selectedRow;
|
|
|
@@ -339,9 +347,11 @@ export default defineComponent({
|
|
|
accountList,
|
|
|
...usePrice(),
|
|
|
...useNum(getMaxNum),
|
|
|
+ ...useChart(),
|
|
|
getPrice,
|
|
|
loading,
|
|
|
selected,
|
|
|
+ showChart,
|
|
|
};
|
|
|
},
|
|
|
});
|
|
|
@@ -435,14 +445,22 @@ 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;
|
|
|
}
|
|
|
}
|
huangbin