update

src/views/market/spot_trade/components/buy-sell-market/components/delisting/index.vue

@@ -23,116 +23,6 @@
                           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-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="挂牌方">
-                <span class="white">{{selectedRow.username}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="挂牌价格">
-                <span class="yellow">{{selectedRow.fixedprice}}</span>
-              </a-form-item>
-              <a-row :gutter="24">
-                <a-col :span="24"></a-col>
-              </a-row>
-              <a-form-item label="挂牌数量">
-                <span class="white">{{selectedRow.orderqty}}吨</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="现货仓单"
-                           name>
-                <a-select class="inlineFormSelect"
-                          style="width: 260px"
-                          placeholder="请选择">
-                  <a-select-option value="8271930000-01(120吨)">8271930000-01(120吨)</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="摘牌数量"
-                           name="num">
-                <a-input-number class="dialogInput"
-                                style="width: 260px"
-                                v-model:value="formState.num"
-                                suffix="吨" />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24"
-                   class="mt-20">
-              <a-form-item>
-                <a-slider ::min="0"
-                          v-model:value="formState.num"
-                          :max="selectedRow.orderqty"
-                          class="formSlider" />
-                <div class="unit">
-                  <span>1</span>
-                  <span>{{selectedRow.orderqty}}</span>
-                </div>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">&nbsp;</a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24"
-                   class="mt-20">
-              <a-form-item label="挂牌金额">
-                <span class="white">50400.00</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <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>
-    </div>
-  </Drawer>
-  <!-- 仓单贸易  一口价    摘牌 -->
-  <Drawer :title="'摘牌'"
-          :placement="'top'"
-          :visible="visible"
-          width="486px"
-          height="479px"
-          @cancel="cancel"
-          class="top">
-    <div class="delisting">
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef"
-                :model="formState"
-                :rules="rules">
-          <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>
@@ -223,7 +113,7 @@
             <a-col :span="24">
               <a-form-item class="tc">
                 <a-button class="listedBtn"
-                          @click="submit">{{isBuy() ? '卖' : '买'}}出</a-button>
+                          @click="submit">{{isBuy() ? '卖出' : '买入'}}</a-button>
                 <a-button class="ml10 cancelBtn"
                           @click="cancel">取消</a-button>
               </a-form-item>

src/views/market/spot_trade/components/buy-sell-market/components/financing_delisting/components/choose-finance/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <!-- 仓单贸易&仓单预售 融资-->
+
+  <Drawer :title="'选择融资方案'"
+          :placement="'top'"
+          :visible="visible"
+          width="486px"
+          height="479px"
+          @cancel="update"
+          class="top financing">
+    <div class="delisting">
+      <div class="formBar">
+        下
+      </div>
+    </div>
+  </Drawer>
+</template>
+
+<script lang="ts">
+import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
+import { defineComponent, PropType, ref } from 'vue';
+import Drawer from '@/common/components/drawer/index.vue';
+import { WrOrderQuote, WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
+import { getAccountTypeList, getSelectedAccountId, getUserId } from '@/services/bus/account';
+import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { HdWRDealOrder } from '@/services/proto/warehousetrade';
+import { v4 as uuidv4 } from 'uuid';
+import moment from 'moment';
+import { ModalEnum } from '@/common/constants/modalNameEnum';
+import { HdWRDealOrderReq } from '@/services/proto/warehousetrade/interface';
+import { _closeModal } from '@/common/setup/modal/modal';
+import { validateAction } from '@/common/setup/form';
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+export default defineComponent({
+    name: ModalEnum.spot_trade_warehouse_delisting,
+    components: { Drawer, PlusOutlined, MinusOutlined },
+    emits: ['cancel'],
+    props: {
+        enumName: {
+            default: '',
+            type: String as PropType<EnumRouterName>,
+        },
+        selectedRow: {
+            type: Object as PropType<WrOrderQuoteDetail>,
+            default: {},
+        },
+        parantSelectedRow: {
+            type: Object as PropType<WrOrderQuote>,
+            default: {},
+        },
+    },
+
+    setup(props, context) {
+        const { visible, cancel } = _closeModal(context);
+        function update() {
+            cancel();
+            context.emit('cancel');
+        }
+        return {
+            visible,
+            update,
+        };
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.financing {
+    z-index: 99;
+}
+.delisting {
+    width: 100%;
+    height: 100%;
+    .flex;
+    flex-direction: column;
+    .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: rgba(@m-black7, 0.8);
+                color: rgba(@m-blue0, 0.8);
+            }
+        }
+        .conditionBtn + .conditionBtn {
+            margin-left: 10px;
+        }
+    }
+    .formBar {
+        width: 100%;
+        flex: 1;
+        padding: 28px 16px 7px;
+    }
+}
+::v-deep.ant-slider.formSlider {
+    width: 260px;
+}
+::v-deep.ant-input-suffix {
+    position: absolute;
+    right: -25px;
+}
+.unit {
+    margin-left: 70px;
+    width: 260px;
+    .flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: @m-grey1;
+    height: 14px;
+    line-height: 14px;
+}
+.listedBtn:first-child {
+    margin-left: -35px;
+}
+.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-20 {
+    margin-top: -20px;
+}
+.labelTip {
+    font-size: 14px;
+    color: @m-blue16;
+    position: absolute;
+    top: 15px;
+    left: -80px;
+}
+.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;
+}
+</style>;

src/views/market/spot_trade/components/buy-sell-market/components/financing_delisting/index.vue

@@ -23,116 +23,6 @@
                           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-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="挂牌方">
-                <span class="white">{{selectedRow.username}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="挂牌价格">
-                <span class="yellow">{{selectedRow.fixedprice}}</span>
-              </a-form-item>
-              <a-row :gutter="24">
-                <a-col :span="24"></a-col>
-              </a-row>
-              <a-form-item label="挂牌数量">
-                <span class="white">{{selectedRow.orderqty}}吨</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="现货仓单"
-                           name>
-                <a-select class="inlineFormSelect"
-                          style="width: 260px"
-                          placeholder="请选择">
-                  <a-select-option value="8271930000-01(120吨)">8271930000-01(120吨)</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="摘牌数量"
-                           name="num">
-                <a-input-number class="dialogInput"
-                                style="width: 260px"
-                                v-model:value="formState.num"
-                                suffix="吨" />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24"
-                   class="mt-20">
-              <a-form-item>
-                <a-slider ::min="0"
-                          v-model:value="formState.num"
-                          :max="selectedRow.orderqty"
-                          class="formSlider" />
-                <div class="unit">
-                  <span>1</span>
-                  <span>{{selectedRow.orderqty}}</span>
-                </div>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">&nbsp;</a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24"
-                   class="mt-20">
-              <a-form-item label="挂牌金额">
-                <span class="white">50400.00</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <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>
-    </div>
-  </Drawer>
-  <!-- 仓单贸易  一口价    摘牌 -->
-  <Drawer :title="'摘牌'"
-          :placement="'top'"
-          :visible="visible"
-          width="486px"
-          height="479px"
-          @cancel="cancel"
-          class="top">
-    <div class="delisting">
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef"
-                :model="formState"
-                :rules="rules">
-          <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>
@@ -165,21 +55,16 @@
               </a-form-item>
             </a-col>
           </a-row>
-          <a-row :gutter="24"
-                 v-if="isBuy() && !isSale()">
+
+          <a-row :gutter="24">
             <a-col :span="24">
-              <a-form-item label="现货仓单"
-                           name="LadingBillId">
-                <a-select class="inlineFormSelect"
-                          style="width: 260px"
-                          v-model:value="formState.LadingBillId"
-                          placeholder="请选择">
-                  <a-select-option v-for="item in wrHoldList"
-                                   :value="item.id"
-                                   :key="item.id">
-                    {{item.name}}
-                  </a-select-option>
-                </a-select>
+              <a-form-item label="融资方案"
+                           @click="showAction"
+                           name="case">
+                <a-input class="dialogInput"
+                         style="width: 260px"
+                         placeholder="请"
+                         v-model:value="formState.case" />
               </a-form-item>
             </a-col>
           </a-row>
@@ -232,7 +117,10 @@
         </a-form>
       </div>
     </div>
+    <ChooseFinance v-if="show"
+                   @cancel="showAction" />
   </Drawer>
+
 </template>
 
 <script lang="ts">
@@ -253,9 +141,10 @@ import { validateAction } from '@/common/setup/form';
 import { ListingForm } from './interface';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
+import ChooseFinance from './components/choose-finance/index.vue';
 export default defineComponent({
     name: ModalEnum.spot_trade_warehouse_delisting,
-    components: { Drawer, PlusOutlined, MinusOutlined },
+    components: { Drawer, PlusOutlined, MinusOutlined, ChooseFinance },
     emits: ['cancel'],
     props: {
         enumName: {
@@ -287,6 +176,10 @@ export default defineComponent({
         const { isSale, isBuy, isFloat } = handleIs(props.enumName, props.buyOrSell);
         const { wrHoldList } = handleSpotWarrant(props.enumName, props.buyOrSell, props.parantSelectedRow, loading);
 
+        const show = ref<boolean>(false);
+        function showAction() {
+            show.value = !show.value;
+        }
         function submit() {
             // validateAction<ListingForm>(formRef, formState).then((res) => {
             //     // 首先确定  这是仓单贸易的有仓单挂摘牌 HasWr = 1
@@ -336,6 +229,8 @@ export default defineComponent({
             rules,
             formState,
             formRef,
+            show,
+            showAction,
         };
     },
 });
@@ -347,6 +242,7 @@ export default defineComponent({
     height: 100%;
     .flex;
     flex-direction: column;
+    z-index: 10;
     .condition {
         width: 100%;
         height: 48px;

src/views/market/spot_trade/components/buy-sell-market/components/financing_delisting/interface.ts

@@ -2,6 +2,7 @@ export interface ListingForm {
     accountid: undefined | number,
     num: number,
     LadingBillId: string,
+    case: string,
 }
 
 export interface Wrhold {

src/views/market/spot_trade/components/buy-sell-market/components/financing_delisting/setup.ts

@@ -12,6 +12,7 @@ export function handleForm(data: WrOrderQuoteDetail) {
         accountid: undefined,
         num: 0,
         LadingBillId: '',
+        case: ''
     })
     const rules = {
         accountid: [{ required: true, message: '请选择交易账户' }],