update

src/views/order/commodity_contract/components/commodity_contract_summary/components/commodity_contract_summary_transfer/index.vue

@@ -1,46 +1,85 @@
 <template>
-    <!-- 转让-->
-    <Drawer :title="'转让'" :placement="'bottom'" :visible="visible" @cancel="cancel">
-        <div class="listed">
-            <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="price">
-                                <a-input-number
-                                    class="commonInput"
-                                    v-model:value="formState.price"
-                                    style="width: 100%"
-                                />
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="24">
-                            <a-form-item label="挂牌数量" name="num">
-                                <a-input-number
-                                    class="commonInput"
-                                    v-model:value="formState.num"
-                                    style="width: 100%"
-                                />
-                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-                            </a-form-item>
-                        </a-col>
-                    </a-row>
+  <!-- 转让-->
+  <Drawer :title="'转让'"
+          :placement="'bottom'"
+          :visible="visible"
+          @cancel="cancel">
+    <div class="listed">
+      <a-form class="inlineForm dialogForm"
+              ref="formRef"
+              :model="formState"
+              :rules="rules">
+        <div class="formBar">
+          <a-row :gutter="24">
+            <a-col :span="12">
+              <a-form-item label="合约"
+                           name="goodsid">
+                <a-select class="inlineFormSelect"
+                          :default-value="selectedRow.goodsid"
+                          v-model:value="formState.goodsid"
+                          style="width: 100%">
+                  <a-select-option v-for="item in tableList"
+                                   :value="item.goodsid"
+                                   :key="item.goodsid">{{item.goodsname}}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="挂牌价"
+                           name="price">
+                <a-input-number class="commonInput"
+                                v-model:value="formState.price"
+                                style="width: 100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="挂牌数量"
+                           name="num">
+                <a-input-number class="commonInput"
+                                :max="getMax()"
+                                v-model:value="formState.num"
+                                style="width: 100%" />
+                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="挂牌金额">
+                <a-input class="commonInput"
+                         :value="getMoney()"
+                         style="width: 100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24"
+                   class="mt-20">
+              <a-form-item>
+                <a-slider ::min="0"
+                          v-model:value="formState.num"
+                          :max="getMax()"
+                          class="formSlider"
+                          style="width: 180px" />
+                <div class="unit">
+                  <span>0</span>
+                  <span>{{getMax()}}{{selectedRow.enumdicname}}</span>
                 </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"
-                            >提交</a-button>
-                        </a-form-item>
-                    </a-col>
-                </a-row>
-            </a-form>
+              </a-form-item>
+            </a-col>
+          </a-row>
         </div>
-    </Drawer>
+        <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">提交</a-button>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+  </Drawer>
 </template>
 
 <script lang="ts">
@@ -58,15 +97,15 @@ import { PerformanceContractedApplyReq, PerformanceDelayApplyReq } from '@/servi
 import { getSelectedAccount, getSelectedAccountId, getUserId } from '@/services/bus/account';
 import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { performanceContractedApply, performanceDelayApply } from '@/services/proto/performance';
-import {BuyOrSell, DelistingType, PriceType} from '@/common/constants/enumCommon';
+import { BuyOrSell, DelistingType, PriceType } from '@/common/constants/enumCommon';
 import Long from 'long';
-import {OrderReq} from "@/services/socket/order/interface";
-import {v4 as uuidv4} from "uuid";
-import moment from "moment";
-import {getLongTypeLoginID} from "@/services/bus/login";
-import {LongType} from "@/services/socket/login/interface";
-import {Order} from "@/services/socket/order";
-import {QueryTradePositionRsp} from "@/services/go/ermcp/order/interface";
+import { OrderReq } from '@/services/socket/order/interface';
+import { v4 as uuidv4 } from 'uuid';
+import moment from 'moment';
+import { getLongTypeLoginID } from '@/services/bus/login';
+import { LongType } from '@/services/socket/login/interface';
+import { Order } from '@/services/socket/order';
+import { QueryTradePositionRsp } from '@/services/go/ermcp/order/interface';
 
 export default defineComponent({
     name: ModalEnum.commodity_contract_summary_transfer,
@@ -77,56 +116,68 @@ export default defineComponent({
             type: Object as PropType<QueryTradePositionRsp>,
             default: {},
         },
-        buyOrSell: {
-            type: Number as PropType<BuyOrSell>,
-            default: BuyOrSell.buy,
+        tableList: {
+            type: Array as PropType<QueryTradePositionRsp[]>,
+            default: [],
         },
     },
     setup(props, context) {
         const { visible, cancel } = _closeModal(context);
         const loading = ref<boolean>(false);
         const { rules, formState, formRef } = handleForm();
+        formState.goodsid = props.selectedRow.goodsid;
+        function getSelectedGoods() {
+            return props.tableList.find((e) => e.goodsid === formState.goodsid)!;
+        }
+        function getMax() {
+            return getSelectedGoods().enableqty;
+        }
+        function getMoney() {
+            return (formState.price * formState.num).toFixed(getSelectedGoods().decimalplace);
+        }
         function submit() {
             // 挂牌请求 通过合约汇总 挂牌转让
-            const param: OrderReq = {
-                ClientSerialNo: uuidv4(), // 客户端流水号
-                ClientOrderTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // 客户端委托时间
-                ClientType: 4, // 终端类型
-                LoginID: Number(getLongTypeLoginID() as LongType), // 登陆账号
-                AccountID: getSelectedAccountId(), // 交易账号
-                GoodsID: props.selectedRow.goodsid, // 商品ID
-                MarketID: props.selectedRow.marketid, // 市场ID
-                ValidType: 1, // 校验类型 当日有效
-                OperateType: 1, // 操作类型: 申请
-                OrderSrc: 1, // 单据来源: 客户端下单
-                OrderPrice: 370, // 委托价格                      (需要填入)
-                OperatorID: Number(getLongTypeLoginID()),
-                // MarketMaxSub: number // 市价允许最大偏差(做市)
-                OrderQty: 1, // 委托数量                          (需要填入)
-                BuyOrSell: 1 ,  // 买卖方向  0 买 1 卖
-                BuildType: 2 ,  // 下单类型  1 建 2 平
-                // CurtQuotePrice: 0, // 保留，计算冻结金额使用
-                // SpPrice: 0 ,// 止盈价格
-                // SlPrice: 0 , // 止损价格
-                PriceMode: PriceType.limit, // 取价方式
-                TimevalidType: 1, // 时间有效类型 单日有效
-                TriggerType: 1, // 预埋单触发类型
-                // TriggerPrice: number // 预埋单触发价格
-                ListingSelectType: 1, // 挂牌点选类型 1：挂牌 2：摘牌 3：先摘后挂
-                DelistingType:  DelistingType.selected, // 摘牌类型 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
-                OrderFlag: 1,
-            }
-            requestResultLoadingAndInfo(Order, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
-                cancel(true);
+            validateAction<FormState>(formRef, formState).then((res) => {
+                const param: OrderReq = {
+                    ClientSerialNo: uuidv4(), // 客户端流水号
+                    ClientOrderTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // 客户端委托时间
+                    ClientType: 4, // 终端类型
+                    LoginID: Number(getLongTypeLoginID() as LongType), // 登陆账号
+                    AccountID: getSelectedAccountId(), // 交易账号
+                    GoodsID: res.goodsid, // 商品ID
+                    MarketID: getSelectedGoods().marketid, // 市场ID
+                    ValidType: 1, // 校验类型 当日有效
+                    OperateType: 1, // 操作类型: 申请
+                    OrderSrc: 1, // 单据来源: 客户端下单
+                    OrderPrice: res.price, // 委托价格                      (需要填入)
+                    OperatorID: Number(getLongTypeLoginID()),
+                    // MarketMaxSub: number // 市价允许最大偏差(做市)
+                    OrderQty: res.num, // 委托数量                          (需要填入)
+                    BuyOrSell: 1, // 买卖方向  0 买 1 卖
+                    BuildType: 2, // 下单类型  1 建 2 平
+                    // CurtQuotePrice: 0, // 保留，计算冻结金额使用
+                    // SpPrice: 0 ,// 止盈价格
+                    // SlPrice: 0 , // 止损价格
+                    PriceMode: PriceType.limit, // 取价方式
+                    TimevalidType: 1, // 时间有效类型 单日有效
+                    TriggerType: 1, // 预埋单触发类型
+                    // TriggerPrice: number // 预埋单触发价格
+                    ListingSelectType: 1, // 挂牌点选类型 1：挂牌 2：摘牌 3：先摘后挂
+                    DelistingType: DelistingType.selected, // 摘牌类型 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
+                    OrderFlag: 1,
+                };
+                requestResultLoadingAndInfo(Order, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
+                    cancel(true);
+                });
             });
         }
         return {
@@ -137,6 +188,8 @@ export default defineComponent({
             rules,
             formState,
             formRef,
+            getMoney,
+            getMax,
         };
     },
 });

src/views/order/commodity_contract/components/commodity_contract_summary/components/commodity_contract_summary_transfer/interface.ts

@@ -1,4 +1,5 @@
 export interface FormState {
     price: number,
     num: number,
+    goodsid: number,
 }

src/views/order/commodity_contract/components/commodity_contract_summary/components/commodity_contract_summary_transfer/setup.ts

@@ -6,10 +6,17 @@ export function handleForm() {
     const formState: UnwrapRef<FormState> = reactive({
         price: 0,
         num: 0,
+        goodsid: 0,
     })
     const rules = {
-        price: [{ require, message: '请输入挂牌价', trigger: 'blur', type: 'number' }],
-        num: [{ require, message: '请输入挂牌数量', trigger: 'blur', type: 'number' }],
+        price: [
+            { require, message: '请输入挂牌价', trigger: 'blur', type: 'number' },
+            { message: '挂牌价不能小于1', min: 1, type: 'number' }
+        ],
+        num: [
+            { require, message: '请输入挂牌数量', trigger: 'blur', type: 'number' },
+            { message: '挂牌数量小于1', min: 1, type: 'number' }
+        ],
     }
-    return { rules: [], formState, formRef }
+    return { rules, formState, formRef }
 }

src/views/order/commodity_contract/components/commodity_contract_summary/index.vue

@@ -39,6 +39,7 @@
     <component :is="componentId"
                v-if="componentId"
                :selectedRow="selectedRow"
+               :tableList="tableList"
                @cancel="closeComponent"></component>
   </section>
 </template>