|
|
@@ -0,0 +1,390 @@
|
|
|
+<template>
|
|
|
+ <!--仓单贸易 贸易圈挂牌 挂牌求购 -->
|
|
|
+ <Drawer :title="'挂牌求购'"
|
|
|
+ :placement="'right'"
|
|
|
+ :visible="visible"
|
|
|
+ @cancel="cancel"
|
|
|
+ class="top">
|
|
|
+ <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="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">
|
|
|
+ <a-form-item label="挂牌数量"
|
|
|
+ name="OrderQty">
|
|
|
+ <a-input-number class="commonInput"
|
|
|
+ style="width: 260px"
|
|
|
+ :min="0"
|
|
|
+ v-model:value="formState.OrderQty" />
|
|
|
+ <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="起摘数量"
|
|
|
+ class="relative">
|
|
|
+ <a-input class="commonInput"
|
|
|
+ :suffix="selectedRow.enumdicname"
|
|
|
+ :min="selectedRow.minivalue"
|
|
|
+ style="width: 260px" />
|
|
|
+ <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="履约保证金"
|
|
|
+ class="relative">
|
|
|
+ <a-input class="commonInput"
|
|
|
+ :suffix="selectedRow.enumdicname"
|
|
|
+ :min="selectedRow.minivalue"
|
|
|
+ style="width: 260px" />
|
|
|
+ <span class="input-enumdicname">%</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="挂牌有效期"
|
|
|
+ name="DeliveryMonth">
|
|
|
+ <a-date-picke style="width: 260px"
|
|
|
+ v-model:value="formState.DeliveryMonth"
|
|
|
+ :allowClear="false"
|
|
|
+ class="commonDatePicker dialogDatePicker" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="履约方式">
|
|
|
+ <span class="white ml8">选择履约模板</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="指定朋友">
|
|
|
+ <span class="white ml8">选择朋友</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="指定朋友">
|
|
|
+ <span class="white ml8">选择朋友</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="挂牌金额">
|
|
|
+ <span class="white ml8">55555</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="履约保证金">
|
|
|
+ <span class="white ml8">55555</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="可用资金">
|
|
|
+ <span class="white ml8">55555</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"
|
|
|
+ @click="submit">买入</a-button>
|
|
|
+ <a-button class="ml10 cancelBtn"
|
|
|
+ @click="cancel">取消</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </Drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { defineComponent, PropType, ref } from 'vue';
|
|
|
+import { Des } from '@/common/components/commonDes';
|
|
|
+import { _closeModal } from '@/common/setup/modal/modal';
|
|
|
+import { ModalEnum } from '@/common/constants/modalNameEnum';
|
|
|
+import Drawer from '@/common/components/drawer/index.vue';
|
|
|
+import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
|
|
|
+import { hdWROrder } from '@/services/proto/warehousetrade';
|
|
|
+import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
|
|
|
+import { DGFactoryItems, WRGoodsInfo } from '@/services/proto/warehousetrade/interface';
|
|
|
+import { getAccountTypeList, getUserId } from '@/services/bus/account';
|
|
|
+import { v4 as uuidv4 } from 'uuid';
|
|
|
+import moment, { Moment } from 'moment';
|
|
|
+import { getMarketRunByTradeMode } from '@/services/bus/market';
|
|
|
+import { QueryOrderQuoteMyqQsp, WrOrderQuote } from '@/services/go/wrtrade/interface';
|
|
|
+import { handleForm } from './setup';
|
|
|
+import { validateAction } from '@/common/setup/form';
|
|
|
+import { FormParam } from './interface';
|
|
|
+import { EnumRouterName } from '@/common/constants/enumRouterName';
|
|
|
+
|
|
|
+import { BuyOrSell } from '@/common/constants/enumCommon';
|
|
|
+import { getCanUseMoney } from '@/services/bus/account';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ emits: ['cancel', 'update'],
|
|
|
+ name: ModalEnum.spot_trade_warehouse_post_buying,
|
|
|
+ components: { Des, Drawer, PlusOutlined, MinusOutlined },
|
|
|
+ props: {
|
|
|
+ selectedRow: {
|
|
|
+ type: Object as PropType<QueryOrderQuoteMyqQsp>,
|
|
|
+ default: {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ setup(props, context) {
|
|
|
+ const { visible, cancel } = _closeModal(context);
|
|
|
+ const { rules, formState, formRef } = handleForm();
|
|
|
+ const loading = ref<boolean>(false);
|
|
|
+ const accountList = getAccountTypeList([2]);
|
|
|
+ if (accountList.length) {
|
|
|
+ formState.accountid = accountList[0].accountid;
|
|
|
+ }
|
|
|
+ function getSelectedAccount() {
|
|
|
+ return accountList.find((e) => e.accountid === formState.accountid);
|
|
|
+ }
|
|
|
+
|
|
|
+ function submit() {
|
|
|
+ // const marketInfo = getMarketRunByTradeMode(17);
|
|
|
+ // if (marketInfo) {
|
|
|
+ // validateAction<FormParam>(formRef, formState).then((res) => {
|
|
|
+ // // 现在增加一种挂牌求购的情况
|
|
|
+ // // 这种求购模式会生成一种仓单贸易商品
|
|
|
+ // const wrGoodsInfo: WRGoodsInfo = {
|
|
|
+ // GoodsID: props.selectedRow.goodsid, // uint32 配置商品ID
|
|
|
+ // GoodsCode: props.selectedRow.goodscode, // string 配置商品代码
|
|
|
+ // PriceFactor: 1, // double 商品价格系数
|
|
|
+ // PriceMove: 0, // double 商品升贴水值
|
|
|
+ // WeightRatio: 1, // double 商品重量系数
|
|
|
+ // };
|
|
|
+ // const param = {
|
|
|
+ // AccountID: res.accountid, // 默认内部资金账号第一个
|
|
|
+ // ClientSerialNo: uuidv4(), // 客户端流水号
|
|
|
+ // // OperateSrc: 2,
|
|
|
+ // ClientType: 4,
|
|
|
+ // // MarketID: marketInfo.marketid,
|
|
|
+ // LadingBillId: 0, // 提单id(wrholdlb的LadingBillId字段),卖的时候填写 uint64
|
|
|
+ // // LadingBillId: 'uint642081626946446000001', // 提单id(wrholdlb的LadingBillId字段),卖的时候填写 uint64
|
|
|
+ // TradeDate: moment(marketInfo.tradedate).format('YYYYMMDD'), // 交易日 string
|
|
|
+ // // SubNum: '0', // 提单子单号
|
|
|
+ // SubNum: 0,
|
|
|
+ // // WRFactorTypeId: '2121626946446000001', // 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写 uint64
|
|
|
+ // WRFactorTypeId: props.selectedRow.wrfactortypeid ? props.selectedRow.wrfactortypeid : 0, // 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写 uint64
|
|
|
+ // IsSpecified: 0, // 是否指定对手 0：不指定 1：指定 uint32
|
|
|
+ // // MatchUserIDs: 0, // 仓单贸易对手资金账号ID集合(指定对手时填写) uint32
|
|
|
+ // OrderQty: res.OrderQty, // 委托数量(可挂部分数据量) ======
|
|
|
+ // DeliveryGoodsID: props.selectedRow.deliverygoodsid, // 交割商品商品ID // 有仓单求购
|
|
|
+ // WRPriceType: isFloat() ? 2 : 1, // 价格方式 1：固定价 2：浮动价
|
|
|
+ // FixedPrice: res.FixedPrice, // 固定价格
|
|
|
+ // PriceFactor: 1, // 价格系数(浮动价时填写)
|
|
|
+ // PriceMove: res.PriceMove, // 升贴水(浮动价时填写)
|
|
|
+ // TimevalidType: 4, // 时间有效类型 1：当日有效 2：本周有效 3：指定时间有效 4：一直有效
|
|
|
+ // // ValidTime: moment('2021-08-25 00:00:00').format('YYYY-MM-DD HH:mm:ss'), // 有效期限
|
|
|
+ // ClientOrderTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ // FirstRatio: 0, // 首付比例
|
|
|
+ // PerformanceTemplateID: 0, // 履约计划模板ID
|
|
|
+ // UserID: getUserId(),
|
|
|
+ // OperatorID: getUserId(), // 操作员账号ID
|
|
|
+ // BuyOrSell: 0, // 买卖方向 0买1卖
|
|
|
+ // PriceDisplayMode: 1, // 浮动价显示方式 1：合并显示 2：分开显示
|
|
|
+ // CanBargain: 0, // 挂牌是否可议价0:不可1:可-摘牌是否议价
|
|
|
+ // Attachment1: '', // 附件1
|
|
|
+ // Attachment2: '', // 附件2
|
|
|
+ // Remark: '', // 备注
|
|
|
+ // ApplyID: 0, // 申请ID
|
|
|
+ // WRTradeGoods: isFloat() ? [wrGoodsInfo] : [],
|
|
|
+ // CanPart: 1, // 是否允许部份摘牌0:不允许;1:允许
|
|
|
+ // WRStandardID: props.selectedRow.wrstandardid,
|
|
|
+ // HasWr: isWR(), // 无仓单挂牌 是否有无仓单
|
|
|
+ // DeliveryMonth: isWR() ? '' : moment(res.DeliveryMonth).format('YYYY-MM'),
|
|
|
+ // FactoryItems: props.selectedRow.wrResult != undefined ? props.selectedRow.wrResult.flatMap((it) => {
|
|
|
+ // return {
|
|
|
+ // DGFactoryItemTypeID: it.dgfactoryitemtypeid, // uint64 要素项类型ID
|
|
|
+ // DGFactoryItemID: it.dgfactoryitemid, // uint64 预约要素项类型值
|
|
|
+ // ItemTypeMode: 1, // uint32 要素项类型模式
|
|
|
+ // };
|
|
|
+ // }): [], // DGFactoryItems 要素类型明细集合(没有仓单要素ID填写)
|
|
|
+ // };
|
|
|
+ // requestResultLoadingAndInfo(hdWROrder, param, loading, ['求购成功', '求购失败:']).then(() => {
|
|
|
+ // cancel(true);
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ submit,
|
|
|
+ cancel,
|
|
|
+ visible,
|
|
|
+ accountList,
|
|
|
+ rules,
|
|
|
+ formState,
|
|
|
+ formRef,
|
|
|
+ getSelectedAccount,
|
|
|
+ getCanUseMoney,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.post_buying {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ .ant-form {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .condition {
|
|
|
+ width: 100%;
|
|
|
+ height: 48px;
|
|
|
+ margin: 0 16px;
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px solid @m-black6;
|
|
|
+ .inlineflex;
|
|
|
+ .conditionBtn {
|
|
|
+ align-self: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 0;
|
|
|
+ min-width: 80px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ background: @m-black7;
|
|
|
+ .rounded-corners(3px);
|
|
|
+ font-size: 14px;
|
|
|
+ color: @m-blue0;
|
|
|
+ &:hover {
|
|
|
+ background: @m-black7-hover;
|
|
|
+ color: @m-blue0-hover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .conditionBtn + .conditionBtn {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.unit {
|
|
|
+ margin-left: 70px;
|
|
|
+ width: 260px;
|
|
|
+ .flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ color: @m-grey41;
|
|
|
+ height: 14px;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+.listedBtn {
|
|
|
+ width: 120px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
|
|
|
+ border-radius: 3px;
|
|
|
+ color: @m-white0;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ border: 0;
|
|
|
+ &:hover {
|
|
|
+ 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;
|
|
|
+ color: @m-white0-hover;
|
|
|
+ }
|
|
|
+}
|
|
|
+.ml10 {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.ant-form.dialogForm .ant-row.ant-form-item {
|
|
|
+ margin-bottom: 14px;
|
|
|
+}
|
|
|
+.mt20 {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.mt-10 {
|
|
|
+ margin-top: -10px;
|
|
|
+}
|
|
|
+.ant-input-suffix {
|
|
|
+ position: absolute;
|
|
|
+ right: -25px;
|
|
|
+}
|
|
|
+.minusBtn,
|
|
|
+.plusBtn {
|
|
|
+ width: 15px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: @m-blue15;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.minusBtn {
|
|
|
+ position: absolute;
|
|
|
+ top: -6px;
|
|
|
+ left: 14px;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+.plusBtn {
|
|
|
+ position: absolute;
|
|
|
+ top: -6px;
|
|
|
+ right: 14px;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+.stepper {
|
|
|
+ padding-left: 30px;
|
|
|
+ padding-right: 30px;
|
|
|
+ text-align: center;
|
|
|
+ color: @m-yellow1;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+.ant-slider.formSlider {
|
|
|
+ width: 260px !important;
|
|
|
+ margin-left: 70px;
|
|
|
+ .ant-slider-rail {
|
|
|
+ margin-right: 0;
|
|
|
+ padding-right: 0;
|
|
|
+ height: 3px !important;
|
|
|
+ border-radius: 2px !important;
|
|
|
+ background-color: @m-blue14;
|
|
|
+ }
|
|
|
+ .ant-slider-track {
|
|
|
+ height: 3px;
|
|
|
+ background-color: @m-blue0;
|
|
|
+ }
|
|
|
+ .ant-slider-step {
|
|
|
+ height: 3px;
|
|
|
+ }
|
|
|
+ .ant-progress-text {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
huangbin