|
@@ -0,0 +1,158 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="app-listing">
|
|
|
|
|
+ <div class="app-listing__forex">
|
|
|
|
|
+ <Forex v-bind="{ goodsCode: goodsStore.goodsCode }" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="app-listing__form">
|
|
|
|
|
+ <h4 class="block-title">订单挂牌</h4>
|
|
|
|
|
+ <el-form ref="formRef" size="small" label-width="50px" label-position="left" :model="formData">
|
|
|
|
|
+ <el-form-item prop="GoodsID" label="商品">
|
|
|
|
|
+ <el-select placeholder="请选择" v-model="goodsStore.goodsId">
|
|
|
|
|
+ <el-option :label="item.goodsname" :value="item.goodsid"
|
|
|
|
|
+ v-for="(item, index) in goodsStore.quoteGoodsList" :key="index" />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item prop="BuyOrSell" label="方向">
|
|
|
|
|
+ <el-radio-group v-model="formData.BuyOrSell">
|
|
|
|
|
+ <el-radio v-for="(item, index) in getBuyOrSellList()" :key="index" :label="item.value">
|
|
|
|
|
+ {{ item.label }}
|
|
|
|
|
+ </el-radio>
|
|
|
|
|
+ </el-radio-group>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item prop="OrderPrice" label="价格">
|
|
|
|
|
+ <el-input-number placeholder="请输入" v-model="formData.OrderPrice" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item prop="OrderQty" label="数量">
|
|
|
|
|
+ <el-input-number placeholder="请输入" v-model="orderQty" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ <div class="block-btnbar">
|
|
|
|
|
+ <template v-if="formData.BuyOrSell === BuyOrSell.Buy">
|
|
|
|
|
+ <el-button type="primary" size="small" @click="onSubmit(EBuildType.BUILDTYPE_OPEN)">订立买入</el-button>
|
|
|
|
|
+ <el-button type="primary" size="small" :disabled="(sellQty === 0) || (orderQty > sellQty)"
|
|
|
|
|
+ @click="onSubmit(EBuildType.BUILDTYPE_CLOSE)">
|
|
|
|
|
+ <span>转让买入</span>
|
|
|
|
|
+ <span v-if="sellQty">(≤{{ sellQty }})</span>
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template v-if="formData.BuyOrSell === BuyOrSell.Sell">
|
|
|
|
|
+ <el-button type="primary" size="small" @click="onSubmit(EBuildType.BUILDTYPE_OPEN)">订立卖出</el-button>
|
|
|
|
|
+ <el-button type="primary" size="small" :disabled="(buyQty === 0) || (orderQty > buyQty)"
|
|
|
|
|
+ @click="onSubmit(EBuildType.BUILDTYPE_CLOSE)">
|
|
|
|
|
+ <span>转让卖出</span>
|
|
|
|
|
+ <span v-if="buyQty">(≤{{ buyQty }})</span>
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script lang="ts" setup>
|
|
|
|
|
+import { shallowRef, computed, watch } from 'vue'
|
|
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
|
|
+import { EPriceMode, EListingSelectType, EDelistingType, EBuildType, EValidType, EOrderOperateType } from '@/constants/client'
|
|
|
|
|
+import { BuyOrSell, getBuyOrSellList } from '@/constants/order'
|
|
|
|
|
+import { useRequest } from '@/hooks/request'
|
|
|
|
|
+import { queryTradePosition } from '@/services/api/order'
|
|
|
|
|
+import { useOrder } from '@/business/trade'
|
|
|
|
|
+import { useGoodsStore, useFuturesStore } from '@/stores'
|
|
|
|
|
+import eventBus from '@/services/bus'
|
|
|
|
|
+import Forex from '@pc/components/modules/quote/forex/index.vue'
|
|
|
|
|
+
|
|
|
|
|
+const goodsStore = useGoodsStore()
|
|
|
|
|
+const futuresStore = useFuturesStore()
|
|
|
|
|
+const { formData, formSubmit } = useOrder()
|
|
|
|
|
+const orderQty = shallowRef(1) // 数量
|
|
|
|
|
+const qtyStep = shallowRef(1) // 数量步长
|
|
|
|
|
+
|
|
|
|
|
+// 持仓列表
|
|
|
|
|
+const { dataList: positionList, run: getTradePosition } = useRequest(queryTradePosition, {
|
|
|
|
|
+ params: {
|
|
|
|
|
+ tradeMode: '50'
|
|
|
|
|
+ },
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+// 商品行情
|
|
|
|
|
+const quote = computed(() => futuresStore.getQuoteInfo(goodsStore.goodsCode).value)
|
|
|
|
|
+
|
|
|
|
|
+// 合约乘数
|
|
|
|
|
+const agreeunit = computed(() => quote.value?.agreeunit ?? 0)
|
|
|
|
|
+
|
|
|
|
|
+// 价格步长
|
|
|
|
|
+const priceStep = computed(() => {
|
|
|
|
|
+ const { quoteminunit = 0, decimalplace = 0 } = quote.value ?? {}
|
|
|
|
|
+ if (quoteminunit) {
|
|
|
|
|
+ return quoteminunit * Math.pow(10, decimalplace * -1)
|
|
|
|
|
+ }
|
|
|
|
|
+ return 1
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+// 数量步长列表
|
|
|
|
|
+const qtyStepList = computed(() => {
|
|
|
|
|
+ return [
|
|
|
|
|
+ agreeunit.value * 1,
|
|
|
|
|
+ agreeunit.value * 5,
|
|
|
|
|
+ agreeunit.value * 10,
|
|
|
|
|
+ agreeunit.value * 20,
|
|
|
|
|
+ agreeunit.value * 30,
|
|
|
|
|
+ agreeunit.value * 50,
|
|
|
|
|
+ ]
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+// 买方向持仓数量
|
|
|
|
|
+const buyQty = computed(() => {
|
|
|
|
|
+ const item = positionList.value.find((e) => e.goodscode === goodsStore.goodsCode && e.buyorsell === BuyOrSell.Buy)
|
|
|
|
|
+ if (item) {
|
|
|
|
|
+ return item.enableqty * agreeunit.value
|
|
|
|
|
+ }
|
|
|
|
|
+ return 0
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+// 卖方向持仓数量
|
|
|
|
|
+const sellQty = computed(() => {
|
|
|
|
|
+ const item = positionList.value.find((e) => e.goodscode === goodsStore.goodsCode && e.buyorsell === BuyOrSell.Sell)
|
|
|
|
|
+ if (item) {
|
|
|
|
|
+ return item.enableqty * agreeunit.value
|
|
|
|
|
+ }
|
|
|
|
|
+ return 0
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+// 提交挂牌
|
|
|
|
|
+const onSubmit = (buildType: number) => {
|
|
|
|
|
+ const { marketid = 0, goodsid = 0 } = quote.value ?? {}
|
|
|
|
|
+ /// 获取对应的市场ID
|
|
|
|
|
+ formData.MarketID = marketid
|
|
|
|
|
+ formData.PriceMode = EPriceMode.PRICEMODE_LIMIT
|
|
|
|
|
+ formData.GoodsID = goodsid
|
|
|
|
|
+ formData.ListingSelectType = EListingSelectType.LISTINGSELECTTYPE_DELISTINGTHENLISTING
|
|
|
|
|
+ formData.DelistingType = EDelistingType.DELISTINGTYPE_PRICE
|
|
|
|
|
+ formData.BuildType = EBuildType.BUILDTYPE_OPEN
|
|
|
|
|
+ formData.TimevalidType = EValidType.VALIDTYPE_DR
|
|
|
|
|
+ formData.OperateType = EOrderOperateType.ORDEROPERATETYPE_NORMAL
|
|
|
|
|
+ formData.BuildType = buildType
|
|
|
|
|
+ formData.OrderQty = orderQty.value / agreeunit.value // 数量÷合约乘数
|
|
|
|
|
+
|
|
|
|
|
+ formSubmit().then(() => {
|
|
|
|
|
+ ElMessage.success('提交成功')
|
|
|
|
|
+ }).catch((err) => {
|
|
|
|
|
+ ElMessage.error('提交失败:' + err)
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+watch(() => goodsStore.goodsId, () => {
|
|
|
|
|
+ const { last = 0, agreeunit = 0, presettle = 0 } = quote.value ?? {}
|
|
|
|
|
+ formData.OrderPrice = last || presettle
|
|
|
|
|
+ orderQty.value = agreeunit
|
|
|
|
|
+ qtyStep.value = qtyStepList.value[0]
|
|
|
|
|
+}, {
|
|
|
|
|
+ immediate: true
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+// 接收资金变动通知
|
|
|
|
|
+eventBus.$on('MoneyChangedNotify', () => getTradePosition())
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="less">
|
|
|
|
|
+@import './index.less';
|
|
|
|
|
+</style>
|