|
|
@@ -2,7 +2,7 @@
|
|
|
<app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
|
|
|
<app-view class="g-form">
|
|
|
<template #header>
|
|
|
- <app-navbar title="摘牌" @back="closed" />
|
|
|
+ <app-navbar :title="quote ? `${quote.goodscode}/${quote.goodsname}` : '摘牌'" @back="closed" />
|
|
|
</template>
|
|
|
<Form ref="formRef" class="g-form__container" @submit="onSubmit">
|
|
|
<CellGroup inset>
|
|
|
@@ -11,11 +11,6 @@
|
|
|
<span>{{ accountStore.accountId }}</span>
|
|
|
</template>
|
|
|
</Field>
|
|
|
- <Field label="订单商品" v-if="quote">
|
|
|
- <template #input>
|
|
|
- <span>{{ quote.goodscode }}/{{ quote.goodsname }}</span>
|
|
|
- </template>
|
|
|
- </Field>
|
|
|
<Field label="挂牌方">
|
|
|
<template #input>
|
|
|
<span>{{ selectedRow.username }}</span>
|
|
|
@@ -28,7 +23,7 @@
|
|
|
</Field>
|
|
|
<Field label="剩余数量">
|
|
|
<template #input>
|
|
|
- <span>{{ selectedRow.orderqty }}</span>
|
|
|
+ <span>{{ selectedRow.orderqty }} {{ getGoodsUnitName(quote?.goodunitid) }}</span>
|
|
|
</template>
|
|
|
</Field>
|
|
|
<Field label="摘牌方向">
|
|
|
@@ -36,27 +31,43 @@
|
|
|
<span>{{ getBuyOrSellName(selectedRow.buyorsell) }}</span>
|
|
|
</template>
|
|
|
</Field>
|
|
|
- <Field label="挂牌类型">
|
|
|
+ <Field name="OrderQty" :rules="formRules.OrderQty" label="摘牌数量">
|
|
|
<template #input>
|
|
|
- <RadioGroup v-model="buildType" direction='horizontal'>
|
|
|
- <Radio :name="1">订立</Radio>
|
|
|
- <Radio :name="2">转让</Radio>
|
|
|
- </RadioGroup>
|
|
|
+ <div>
|
|
|
+ <Stepper v-model="orderQty" input-width="100" theme="round" button-size="22" :min="0"
|
|
|
+ :step="qtyStep" :max="selectedRow.orderqty" integer />
|
|
|
+ <RadioGroup v-model="qtyStep" direction="horizontal">
|
|
|
+ <Radio v-for="(value, index) in qtyStepList" :key="index" :name="value">{{ value }}
|
|
|
+ </Radio>
|
|
|
+ </RadioGroup>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</Field>
|
|
|
- <Field name="OrderQty" :rules="formRules.OrderQty" label="摘牌数量">
|
|
|
+ <Field label="可用资金">
|
|
|
<template #input>
|
|
|
- <Stepper v-model="formData.OrderQty" input-width="100" theme="round" button-size="22" :min="0"
|
|
|
- :step="1" :max="selectedRow.orderqty" :auto-fixed="false" integer />
|
|
|
+ <span>{{ accountStore.avaiableMoney.toFixed(2) }}</span>
|
|
|
</template>
|
|
|
</Field>
|
|
|
</CellGroup>
|
|
|
</Form>
|
|
|
<template #footer>
|
|
|
<div class="g-form__footer">
|
|
|
- <Button type="primary" block round @click="formRef?.submit">
|
|
|
- {{ selectedRow.buyorsell === BuyOrSell.Buy ? '卖出' : '买入' }}
|
|
|
- </Button>
|
|
|
+ <template v-if="selectedRow.buyorsell === BuyOrSell.Buy">
|
|
|
+ <Button type="primary" block round @click="onBeforeSubmit(EBuildType.BUILDTYPE_OPEN)">订立卖出</Button>
|
|
|
+ <Button type="primary" :disabled="(sellQty === 0) || (orderQty > sellQty)" block round
|
|
|
+ @click="onBeforeSubmit(EBuildType.BUILDTYPE_CLOSE)">
|
|
|
+ <span>转让卖出</span>
|
|
|
+ <span>({{ sellQty }})</span>
|
|
|
+ </Button>
|
|
|
+ </template>
|
|
|
+ <template v-if="selectedRow.buyorsell === BuyOrSell.Sell">
|
|
|
+ <Button type="primary" block round @click="onBeforeSubmit(EBuildType.BUILDTYPE_OPEN)">订立买入</Button>
|
|
|
+ <Button type="primary" :disabled="(buyQty === 0) || (orderQty > buyQty)" block round
|
|
|
+ @click="onBeforeSubmit(EBuildType.BUILDTYPE_CLOSE)">
|
|
|
+ <span>转让买入</span>
|
|
|
+ <span>({{ buyQty }})</span>
|
|
|
+ </Button>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</template>
|
|
|
</app-view>
|
|
|
@@ -64,15 +75,17 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, PropType } from 'vue'
|
|
|
-import { Form, FormInstance, Button, CellGroup, Field, RadioGroup, Radio, FieldRule, Stepper } from 'vant'
|
|
|
-import { BuyOrSell } from '@/constants/order'
|
|
|
+import { shallowRef, PropType, onMounted, computed } from 'vue'
|
|
|
+import { Form, FormInstance, Button, CellGroup, Field, FieldRule, Stepper, RadioGroup, Radio } from 'vant'
|
|
|
+import { fullloading, dialog } from '@/utils/vant'
|
|
|
+import { BuyOrSell, getBuyOrSellName } from '@/constants/order'
|
|
|
+import { getGoodsUnitName } from '@/constants/unit'
|
|
|
import { useAccountStore, useFuturesStore } from '@/stores'
|
|
|
import { EBuildType, EDelistingType, EListingSelectType, EOrderOperateType, EPriceMode, EValidType } from '@/constants/client'
|
|
|
import { useOrder } from '@/business/trade'
|
|
|
-import { fullloading, dialog } from '@/utils/vant'
|
|
|
+import { useRequest } from '@/hooks/request'
|
|
|
+import { queryTradePosition } from '@/services/api/order'
|
|
|
import AppModal from '@/components/base/modal/index.vue'
|
|
|
-import { getBuyOrSellName } from '@/constants/order'
|
|
|
|
|
|
const props = defineProps({
|
|
|
selectedRow: {
|
|
|
@@ -85,19 +98,60 @@ const accountStore = useAccountStore()
|
|
|
const futuresStore = useFuturesStore()
|
|
|
const { formData, formSubmit } = useOrder()
|
|
|
|
|
|
-/// 挂牌类型
|
|
|
-const buildType = shallowRef(EBuildType.BUILDTYPE_OPEN)
|
|
|
const quote = futuresStore.getQuoteInfo(props.selectedRow.goodsid)
|
|
|
const formRef = shallowRef<FormInstance>()
|
|
|
const showModal = shallowRef(true)
|
|
|
const refresh = shallowRef(false) // 是否刷新父组件数据
|
|
|
+const orderQty = shallowRef(1) // 数量
|
|
|
+const qtyStep = shallowRef(1) // 数量步长
|
|
|
+
|
|
|
+const { dataList: positionList } = useRequest(queryTradePosition, {
|
|
|
+ params: {
|
|
|
+ tradeMode: '50'
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+// 合约乘数
|
|
|
+const agreeunit = computed(() => quote.value?.agreeunit ?? 0)
|
|
|
+
|
|
|
+// 数量步长列表
|
|
|
+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.goodsid === props.selectedRow.goodsid && e.buyorsell === BuyOrSell.Buy)
|
|
|
+ if (item) {
|
|
|
+ return item.enableqty * agreeunit.value
|
|
|
+ }
|
|
|
+ return 0
|
|
|
+})
|
|
|
+
|
|
|
+// 卖方向持仓数量
|
|
|
+const sellQty = computed(() => {
|
|
|
+ const item = positionList.value.find((e) => e.goodsid === props.selectedRow.goodsid && e.buyorsell === BuyOrSell.Sell)
|
|
|
+ if (item) {
|
|
|
+ return item.enableqty * agreeunit.value
|
|
|
+ }
|
|
|
+ return 0
|
|
|
+})
|
|
|
|
|
|
// 表单验证规则
|
|
|
const formRules: { [key in keyof Proto.OrderReq]?: FieldRule[] } = {
|
|
|
OrderQty: [{
|
|
|
- message: '请输入摘牌数量',
|
|
|
validator: () => {
|
|
|
- return !!formData.OrderQty
|
|
|
+ if (orderQty.value) {
|
|
|
+ return orderQty.value % agreeunit.value === 0 ? true : '只能输入合约乘数的整数倍'
|
|
|
+ }
|
|
|
+ return '请输入摘牌数量'
|
|
|
}
|
|
|
}],
|
|
|
}
|
|
|
@@ -119,7 +173,7 @@ const onSubmit = () => {
|
|
|
formData.BuildType = EBuildType.BUILDTYPE_OPEN
|
|
|
formData.ValidType = EValidType.VALIDTYPE_DR
|
|
|
formData.OperateType = EOrderOperateType.ORDEROPERATETYPE_NORMAL
|
|
|
- formData.BuildType = buildType.value
|
|
|
+ formData.OrderQty = orderQty.value / agreeunit.value // 数量÷合约乘数
|
|
|
|
|
|
fullloading((hideLoading) => {
|
|
|
formSubmit().then(() => {
|
|
|
@@ -131,12 +185,21 @@ const onSubmit = () => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+const onBeforeSubmit = (buildType: EBuildType) => {
|
|
|
+ formData.BuildType = buildType
|
|
|
+ formRef.value?.submit()
|
|
|
+}
|
|
|
+
|
|
|
// 关闭弹窗
|
|
|
const closed = (isRefresh = false) => {
|
|
|
refresh.value = isRefresh
|
|
|
showModal.value = false
|
|
|
}
|
|
|
|
|
|
+onMounted(() => {
|
|
|
+ orderQty.value = agreeunit.value
|
|
|
+})
|
|
|
+
|
|
|
// 暴露组件属性给父组件调用
|
|
|
defineExpose({
|
|
|
closed,
|