소스 검색

style update

marymelisa 4 년 전
부모
커밋
e66f2e1718

+ 1 - 1
src/assets/styles/mixin.less

@@ -1267,7 +1267,7 @@
 }
 
 .white {
-    color: @m-white6;
+    color: @m-white6 !important;
 }
 
 .blue {

+ 2 - 2
src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_blocs/components/post-buying/index.vue

@@ -95,7 +95,7 @@
                         <a-col :span="24">
                             <a-form-item label="履约方式" class="inputIconBox">
                                 <span
-                                    class="clickBox"
+                                    :class="['clickBox', formState.permanceTempName ? 'white' : '']"
                                     @click="openPermance"
                                 >{{formState.permanceTempName ? formState.permanceTempName : '选择履约模板'}}</span>
                                 <svg
@@ -110,7 +110,7 @@
                         <a-col :span="24">
                             <a-form-item label="指定朋友" class="inputIconBox">
                                 <span
-                                    class="clickBox"
+                                    :class="['clickBox', getFriendLength() ? 'white' : '']"
                                     @click="openFriend"
                                 >{{getFriendLength() ? `已选${getFriendLength() }人` : '选择朋友'}}</span>
                                 <svg class="icon svg-icon" aria-hidden="true" @click="openFriend">

+ 148 - 152
src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_blocs/components/post-buying/index.vue

@@ -1,159 +1,155 @@
 <template>
-  <!--仓单贸易 贸易圈挂牌 挂牌求购 -->
-  <Drawer :title="'挂牌求购'"
-          :placement="'right'"
-          :visible="visible"
-          @cancel="cancel"
-          class="top486">
-    <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"
-                           class="inputIconBox">
-                <a-input-number class="commonInput"
-                                style="width: 260px"
-                                :min="0"
-                                v-model:value="formState.FixedPrice" />
-                <MinusOutlined @click="decreasePrice" />
-                <PlusOutlined @click="increasePrice" />
-                <a-checkbox class="commonCheckbox"
-                            v-model:checked="priceCheck">可议价</a-checkbox>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="挂牌数量"
-                           name="OrderQty"
-                           class="inputIconBox">
-                <a-input-number class="commonInput"
-                                style="width: 260px"
-                                :min="0"
-                                v-model:value="formState.OrderQty" />
-                <MinusOutlined @click="decreaseNumber" />
-                <PlusOutlined @click="increaseNumber" />
-                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-                <a-checkbox v-model:checked="numCheck"
-                            class="commonCheckbox">整单</a-checkbox>
-              </a-form-item>
-            </a-col>
+    <!--仓单贸易 贸易圈挂牌 挂牌求购 -->
+    <Drawer :title="'挂牌求购'" :placement="'right'" :visible="visible" @cancel="cancel" class="top486">
+        <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" class="inputIconBox">
+                                <a-input-number
+                                    class="commonInput"
+                                    style="width: 260px"
+                                    :min="0"
+                                    v-model:value="formState.FixedPrice"
+                                />
+                                <MinusOutlined @click="decreasePrice" />
+                                <PlusOutlined @click="increasePrice" />
+                                <a-checkbox class="commonCheckbox" v-model:checked="priceCheck">可议价</a-checkbox>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="挂牌数量" name="OrderQty" class="inputIconBox">
+                                <a-input-number
+                                    class="commonInput"
+                                    style="width: 260px"
+                                    :min="0"
+                                    v-model:value="formState.OrderQty"
+                                />
+                                <MinusOutlined @click="decreaseNumber" />
+                                <PlusOutlined @click="increaseNumber" />
+                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                                <a-checkbox v-model:checked="numCheck" class="commonCheckbox">整单</a-checkbox>
+                            </a-form-item>
+                        </a-col>
 
-            <a-col :span="24"
-                   v-if="!numCheck">
-              <a-form-item label="起摘数量"
-                           name="delistingQty">
-                <a-input-number class="commonInput"
-                                v-model:value="formState.delistingQty"
-                                :min="0"
-                                style="width: 260px !important" />
-                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="履约保证金"
-                           name="margin">
-                <a-input-number class="commonInput"
-                                v-model:value="formState.margin"
-                                :min="0"
-                                style="width: 260px" />
-                <span class="input-enumdicname">%</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="挂牌有效期"
-                           name="vidaliteTime"
-                           class="inputIconBox">
-                <a-date-picker style="width: 260px"
-                               v-model:value="formState.vidaliteTime"
-                               :allowClear="false"
-                               class="commonDatePicker dialogDatePicker" />
-              </a-form-item>
-            </a-col>
+                        <a-col :span="24" v-if="!numCheck">
+                            <a-form-item label="起摘数量" name="delistingQty">
+                                <a-input-number
+                                    class="commonInput"
+                                    v-model:value="formState.delistingQty"
+                                    :min="0"
+                                    style="width: 260px !important"
+                                />
+                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="履约保证金" name="margin">
+                                <a-input-number
+                                    class="commonInput"
+                                    v-model:value="formState.margin"
+                                    :min="0"
+                                    style="width: 260px"
+                                />
+                                <span class="input-enumdicname">%</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="挂牌有效期" name="vidaliteTime" class="inputIconBox">
+                                <a-date-picker
+                                    style="width: 260px"
+                                    v-model:value="formState.vidaliteTime"
+                                    :allowClear="false"
+                                    class="commonDatePicker dialogDatePicker"
+                                />
+                            </a-form-item>
+                        </a-col>
 
-            <a-col :span="24">
-              <a-form-item label="履约方式"
-                           class="inputIconBox">
-                <span class="clickBox"
-                      @click="openPermance">{{formState.permanceTempName ? formState.permanceTempName : '选择履约模板'}}</span>
-                <svg class="icon svg-icon"
-                     aria-hidden="true"
-                     @click="openPermance">
-                  <use xlink:href="#icon-moban" />
-                </svg>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="指定朋友"
-                           class="inputIconBox">
-                <span class="clickBox"
-                      @click="openFriend">{{getFriendLength() ? `已选${getFriendLength() }人` : '选择朋友'}}</span>
-                <svg class="icon svg-icon"
-                     aria-hidden="true"
-                     @click="openFriend">
-                  <use xlink:href="#icon-pengyou1" />
-                </svg>
-                <a-checkbox class="commonCheckbox"
-                            v-model:checked="friendCheck"
-                            @change="limiteFriends">不限</a-checkbox>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="挂牌金额">
-                <span class="white ml8">{{getMoney()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="履约保证金">
-                <span class="white ml8">{{getMargin()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="可用资金">
-                <span class="white ml8">{{getCanUseMoney(getSelectedAccount())}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
+                        <a-col :span="24">
+                            <a-form-item label="履约方式" class="inputIconBox">
+                                <span
+                                    :class="['clickBox', formState.permanceTempName ? 'white' : '']"
+                                    @click="openPermance"
+                                >{{formState.permanceTempName ? formState.permanceTempName : '选择履约模板'}}</span>
+                                <svg
+                                    class="icon svg-icon"
+                                    aria-hidden="true"
+                                    @click="openPermance"
+                                >
+                                    <use xlink:href="#icon-moban" />
+                                </svg>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="指定朋友" class="inputIconBox">
+                                <span
+                                    :class="['clickBox', getFriendLength() ? 'white' : '']"
+                                    @click="openFriend"
+                                >{{getFriendLength() ? `已选${getFriendLength() }人` : '选择朋友'}}</span>
+                                <svg class="icon svg-icon" aria-hidden="true" @click="openFriend">
+                                    <use xlink:href="#icon-pengyou1" />
+                                </svg>
+                                <a-checkbox
+                                    class="commonCheckbox"
+                                    v-model:checked="friendCheck"
+                                    @change="limiteFriends"
+                                >不限</a-checkbox>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="挂牌金额">
+                                <span class="white ml8">{{getMoney()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="履约保证金">
+                                <span class="white ml8">{{getMargin()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="可用资金">
+                                <span class="white ml8">{{getCanUseMoney(getSelectedAccount())}}</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>
-        <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>
-  <!-- 选择朋友 -->
-  <Friend v-if="showFriend"
-          :friends=formState.friends
-          @cancel="chooseFriend"
-          @update="chooseFriend" />
-  <!-- 选择履约模板 -->
-  <Permance v-if="showPermance"
-            @cancel="choosePermance"
-            @update="choosePermance" />
+    </Drawer>
+    <!-- 选择朋友 -->
+    <Friend
+        v-if="showFriend"
+        :friends="formState.friends"
+        @cancel="chooseFriend"
+        @update="chooseFriend"
+    />
+    <!-- 选择履约模板 -->
+    <Permance v-if="showPermance" @cancel="choosePermance" @update="choosePermance" />
 </template>
 
 <script lang="ts">

+ 289 - 270
src/views/order/pre_sale_warehouse_receipt/components/pre_sale_warehouse_receipt_order_summary/components/listed/index.vue

@@ -1,279 +1,298 @@
 <template>
-  <!-- 预售仓单 现货明细 挂牌 -->
-  <Drawer :title="'挂牌'"
-          :placement="'right'"
-          class="delistingBottom650"
-          :visible="visible"
-          @cancel="cancel">
-    <div class="listed">
-      <div class="condition">
-        <a-button class="conditionBtn">{{selectedRow.deliverygoodsname}}</a-button>
-        <a-button class="conditionBtn">{{selectedRow.wrtypename}}</a-button>
-        <a-button class="conditionBtn">{{selectedRow.warehousename}}</a-button>
-      </div>
+    <!-- 预售仓单 现货明细 挂牌 -->
+    <Drawer
+        :title="'挂牌'"
+        :placement="'right'"
+        class="delistingBottom650"
+        :visible="visible"
+        @cancel="cancel"
+    >
+        <div class="listed">
+            <div class="condition">
+                <a-button class="conditionBtn">{{selectedRow.deliverygoodsname}}</a-button>
+                <a-button class="conditionBtn">{{selectedRow.wrtypename}}</a-button>
+                <a-button class="conditionBtn">{{selectedRow.warehousename}}</a-button>
+            </div>
 
-      <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="WRPriceType">
-                <a-select class="inlineFormSelect"
-                          default-value="1"
-                          v-model:value="formState.WRPriceType"
-                          style="width: 140px">
-                  <a-select-option :value="1">一口价</a-select-option>
-                  <a-select-option :value="2">浮动价</a-select-option>
-                  <a-select-option :value="3">贸易圈</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12"
-                   v-if="isFixed()">
-              <a-form-item label="挂牌价"
-                           name="FixedPrice">
-                <a-input-number class="dialogInput"
-                                :min="0"
-                                style="width: 140px"
-                                v-model:value="formState.FixedPrice"
-                                placeholder="请输入挂牌价" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12"
-                   v-if="isBlocs()">
-              <a-form-item label="挂牌价格"
-                           name="FixedPrice"
-                           class="inputIconBox">
-                <a-input-number class="commonInput"
-                                style="width: 140px"
-                                :min="0"
-                                v-model:value="formState.FixedPrice" />
-                <a-checkbox class="commonCheckbox"
-                            v-model:checked="priceCheck">可议价</a-checkbox>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12"
-                   v-if="isFloat()">
-              <a-form-item label="基差"
-                           name="PriceMove">
-                <a-input-number class="commonInput"
-                                v-model:value="formState.PriceMove"
-                                style="width: 140px" />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="挂牌数量"
-                           name="OrderQty">
-                <a-input-number class="dialogInput"
-                                style="width: 140px !important"
-                                :min="0"
-                                v-model:value="formState.OrderQty"
-                                placeholder="请输入挂牌数量" />
-                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-                <a-checkbox class="commonCheckbox"
-                            v-if="isBlocs()"
-                            v-model:checked="numCheck">整单</a-checkbox>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12"
-                   v-if="!numCheck">
-              <a-form-item label="起摘数量"
-                           class="relative"
-                           name="DelistMinQty">
-                <a-input-number class="commonInput"
-                                :min="0"
-                                v-model:value="formState.DelistMinQty"
-                                style="width: 140px !important" />
-                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-                <div class="tip">最小单位:{{selectedRow.minivalue}}{{selectedRow.enumdicname}}</div>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="12"
-                   class="mt-20">
-              <a-form-item>
-                <a-slider v-model:value="formState.OrderQty"
-                          ::min="0"
-                          :max="selectedRow.enableqty"
-                          class="formSlider"
-                          style="width: 140px;" />
-                <div class="unit">
-                  <span>0</span>
-                  <span>{{selectedRow.enableqty}}{{selectedRow.enumdicname}}</span>
-                </div>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">&nbsp;</a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="交收月"
-                           name="DeliveryMonth">
-                <a-month-picker style="width: 140px"
-                                v-model:value="formState.DeliveryMonth"
-                                :allowClear="false"
-                                class="commonDatePicker dialogDatePicker" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item>&nbsp;</a-form-item>
-            </a-col>
-          </a-row>
-          <template v-if="isBlocs()">
-            <a-row :gutter="24">
-              <a-col :span="12">
-                <a-form-item label="履约保证金"
-                             name="margin">
-                  <a-input-number class="commonInput"
-                                  v-model:value="formState.margin"
-                                  :min="0"
-                                  style="width: 140px" />
-                  <span class="input-enumdicname">%</span>
-                </a-form-item>
-              </a-col>
-              <a-col :span="12">
-                <a-form-item label="挂牌有效期"
-                             name="vidaliteTime"
-                             class="inputIconBox">
-                  <a-date-picker style="width: 140px"
-                                 v-model:value="formState.vidaliteTime"
-                                 :allowClear="false"
-                                 class="commonDatePicker dialogDatePicker" />
-                </a-form-item>
-              </a-col>
-            </a-row>
-            <a-row :gutter="24">
-              <a-col :span="12">
-                <a-form-item label="履约方式"
-                             class="inputIconBox">
-                  <span class="clickBox"
-                        style="width: 140px"
-                        @click="openPermance">{{formState.permanceTempName ? formState.permanceTempName : '选择履约模板'}}</span>
-                  <svg class="icon svg-icon"
-                       aria-hidden="true"
-                       @click="openPermance">
-                    <use xlink:href="#icon-moban" />
-                  </svg>
-                </a-form-item>
-              </a-col>
-              <a-col :span="12">
-                <a-form-item label="指定朋友"
-                             class="inputIconBox">
-                  <span class="clickBox"
-                        style="width: 140px"
-                        @click="openFriend">{{getFriendLength() ? `已选${getFriendLength() }人` : '选择朋友'}}</span>
-                  <svg class="icon svg-icon"
-                       aria-hidden="true"
-                       @click="openFriend">
-                    <use xlink:href="#icon-pengyou1" />
-                  </svg>
-                  <a-checkbox class="commonCheckbox"
-                              v-model:checked="friendCheck"
-                              @change="limiteFriends">不限</a-checkbox>
-                </a-form-item>
-              </a-col>
-            </a-row>
-          </template>
-          <a-row :gutter="24"
-                 v-if="isFloat()">
-            <a-col :span="24">
-              <a-form-item label="行情商品"
-                           name="goodsid">
-                <!-- <a-select class="inlineFormSelect"
+            <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="WRPriceType">
+                                <a-select
+                                    class="inlineFormSelect"
+                                    default-value="1"
+                                    v-model:value="formState.WRPriceType"
+                                    style="width: 140px"
+                                >
+                                    <a-select-option :value="1">一口价</a-select-option>
+                                    <a-select-option :value="2">浮动价</a-select-option>
+                                    <a-select-option :value="3">贸易圈</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12" v-if="isFixed()">
+                            <a-form-item label="挂牌价" name="FixedPrice">
+                                <a-input-number
+                                    class="dialogInput"
+                                    :min="0"
+                                    style="width: 140px"
+                                    v-model:value="formState.FixedPrice"
+                                    placeholder="请输入挂牌价"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12" v-if="isBlocs()">
+                            <a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
+                                <a-input-number
+                                    class="commonInput"
+                                    style="width: 140px"
+                                    :min="0"
+                                    v-model:value="formState.FixedPrice"
+                                />
+                                <a-checkbox class="commonCheckbox" v-model:checked="priceCheck">可议价</a-checkbox>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12" v-if="isFloat()">
+                            <a-form-item label="基差" name="PriceMove">
+                                <a-input-number
+                                    class="commonInput"
+                                    v-model:value="formState.PriceMove"
+                                    style="width: 140px"
+                                />
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="挂牌数量" name="OrderQty">
+                                <a-input-number
+                                    class="dialogInput"
+                                    style="width: 140px !important"
+                                    :min="0"
+                                    v-model:value="formState.OrderQty"
+                                    placeholder="请输入挂牌数量"
+                                />
+                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                                <a-checkbox
+                                    class="commonCheckbox"
+                                    v-if="isBlocs()"
+                                    v-model:checked="numCheck"
+                                >整单</a-checkbox>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12" v-if="!numCheck">
+                            <a-form-item label="起摘数量" class="relative" name="DelistMinQty">
+                                <a-input-number
+                                    class="commonInput"
+                                    :min="0"
+                                    v-model:value="formState.DelistMinQty"
+                                    style="width: 140px !important"
+                                />
+                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                                <div
+                                    class="tip"
+                                >最小单位:{{selectedRow.minivalue}}{{selectedRow.enumdicname}}</div>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12" class="mt-20">
+                            <a-form-item>
+                                <a-slider
+                                    v-model:value="formState.OrderQty"
+                                    ::min="0"
+                                    :max="selectedRow.enableqty"
+                                    class="formSlider"
+                                    style="width: 140px;"
+                                />
+                                <div class="unit">
+                                    <span>0</span>
+                                    <span>{{selectedRow.enableqty}}{{selectedRow.enumdicname}}</span>
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">&nbsp;</a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="交收月" name="DeliveryMonth">
+                                <a-month-picker
+                                    style="width: 140px"
+                                    v-model:value="formState.DeliveryMonth"
+                                    :allowClear="false"
+                                    class="commonDatePicker dialogDatePicker"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item>&nbsp;</a-form-item>
+                        </a-col>
+                    </a-row>
+                    <template v-if="isBlocs()">
+                        <a-row :gutter="24">
+                            <a-col :span="12">
+                                <a-form-item label="履约保证金" name="margin">
+                                    <a-input-number
+                                        class="commonInput"
+                                        v-model:value="formState.margin"
+                                        :min="0"
+                                        style="width: 140px"
+                                    />
+                                    <span class="input-enumdicname">%</span>
+                                </a-form-item>
+                            </a-col>
+                            <a-col :span="12">
+                                <a-form-item label="挂牌有效期" name="vidaliteTime" class="inputIconBox">
+                                    <a-date-picker
+                                        style="width: 140px"
+                                        v-model:value="formState.vidaliteTime"
+                                        :allowClear="false"
+                                        class="commonDatePicker dialogDatePicker"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                        </a-row>
+                        <a-row :gutter="24">
+                            <a-col :span="12">
+                                <a-form-item label="履约方式" class="inputIconBox">
+                                    <span
+                                        :class="['clickBox', formState.permanceTempName ? 'white' : '']"
+                                        style="width: 140px"
+                                        @click="openPermance"
+                                    >{{formState.permanceTempName ? formState.permanceTempName : '选择履约模板'}}</span>
+                                    <svg
+                                        class="icon svg-icon"
+                                        aria-hidden="true"
+                                        @click="openPermance"
+                                    >
+                                        <use xlink:href="#icon-moban" />
+                                    </svg>
+                                </a-form-item>
+                            </a-col>
+                            <a-col :span="12">
+                                <a-form-item label="指定朋友" class="inputIconBox">
+                                    <span
+                                        :class="['clickBox', getFriendLength() ? 'white' : '']"
+                                        style="width: 140px"
+                                        @click="openFriend"
+                                    >{{getFriendLength() ? `已选${getFriendLength() }人` : '选择朋友'}}</span>
+                                    <svg
+                                        class="icon svg-icon"
+                                        aria-hidden="true"
+                                        @click="openFriend"
+                                    >
+                                        <use xlink:href="#icon-pengyou1" />
+                                    </svg>
+                                    <a-checkbox
+                                        class="commonCheckbox"
+                                        v-model:checked="friendCheck"
+                                        @change="limiteFriends"
+                                    >不限</a-checkbox>
+                                </a-form-item>
+                            </a-col>
+                        </a-row>
+                    </template>
+                    <a-row :gutter="24" v-if="isFloat()">
+                        <a-col :span="24">
+                            <a-form-item label="行情商品" name="goodsid">
+                                <!-- <a-select class="inlineFormSelect"
                           style="width: 135px"
                           placeholder="请择交易所">
                                 </a-select>-->
-                <a-select class="inlineFormSelect ml5"
-                          @change="handleGoodsGroups"
-                          style="width: 135px"
-                          v-model:value="formState.goodsgroupid"
-                          placeholder="请选择商品">
-                  <a-select-option v-for="item in goodsGroup"
-                                   :value="item.goodsgroupid"
-                                   :key="item.goodsgroupid">{{item.goodsgroupname}}
-                  </a-select-option>
-                </a-select>
-                <a-select class="inlineFormSelect ml5"
-                          style="width: 135px"
-                          @change="handleGoodsChange"
-                          v-model:value="formState.goodsid"
-                          placeholder="请选择合约">
-                  <a-select-option v-for="item in goodsList"
-                                   :value="item.goodsid"
-                                   :key="item.goodsid">{{item.goodsname}}</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24"
-                   v-if="isFloat()"
-                   class="relative">
-              <a-form-item :label="'估算金额'">
-                <span class="white ml8">{{getWrMoney()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   v-if="isFixed()"
-                   class="relative">
-              <a-form-item :label="'挂牌金额'">
-                <span class="white ml8">{{getWrMoney()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   v-if="getWrMargin() && !isBlocs()">
-              <a-form-item :label="getWrMargin() ? '履约保证金' : ''">
-                <span class="white ml8">{{getWrMargin()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   v-if="isBlocs()">
-              <a-form-item label="履约保证金">
-                <span class="white ml8">{{getMargin()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="可用资金">
-                <span class="white ml8">{{getCanUseMoney(handleSelectedAccount())}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
+                                <a-select
+                                    class="inlineFormSelect ml5"
+                                    @change="handleGoodsGroups"
+                                    style="width: 135px"
+                                    v-model:value="formState.goodsgroupid"
+                                    placeholder="请选择商品"
+                                >
+                                    <a-select-option
+                                        v-for="item in goodsGroup"
+                                        :value="item.goodsgroupid"
+                                        :key="item.goodsgroupid"
+                                    >{{item.goodsgroupname}}</a-select-option>
+                                </a-select>
+                                <a-select
+                                    class="inlineFormSelect ml5"
+                                    style="width: 135px"
+                                    @change="handleGoodsChange"
+                                    v-model:value="formState.goodsid"
+                                    placeholder="请选择合约"
+                                >
+                                    <a-select-option
+                                        v-for="item in goodsList"
+                                        :value="item.goodsid"
+                                        :key="item.goodsid"
+                                    >{{item.goodsname}}</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24" v-if="isFloat()" class="relative">
+                            <a-form-item :label="'估算金额'">
+                                <span class="white ml8">{{getWrMoney()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" v-if="isFixed()" class="relative">
+                            <a-form-item :label="'挂牌金额'">
+                                <span class="white ml8">{{getWrMoney()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" v-if="getWrMargin() && !isBlocs()">
+                            <a-form-item :label="getWrMargin() ? '履约保证金' : ''">
+                                <span class="white ml8">{{getWrMargin()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" v-if="isBlocs()">
+                            <a-form-item label="履约保证金">
+                                <span class="white ml8">{{getMargin()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="可用资金">
+                                <span class="white ml8">{{getCanUseMoney(handleSelectedAccount())}}</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"
+                                :loading="loading"
+                                :disabled="loading"
+                                @click="submit"
+                            >卖出</a-button>
+                            <a-button
+                                class="ml10 cancelBtn"
+                                :loading="loading"
+                                :disabled="loading"
+                                @click="cancel"
+                            >取消</a-button>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-form>
         </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-button class="ml10 cancelBtn"
-                        :loading="loading"
-                        :disabled="loading"
-                        @click="cancel">取消</a-button>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-  </Drawer>
-  <!-- 选择朋友 -->
-  <Friend v-if="showFriend"
-          :friends=formState.friends
-          :position="'bottom'"
-          @cancel="chooseFriend"
-          @update="chooseFriend" />
-  <!-- 选择履约模板 -->
-  <Permance v-if="showPermance"
-            :position="'bottom'"
-            @cancel="choosePermance"
-            @update="choosePermance" />
+    </Drawer>
+    <!-- 选择朋友 -->
+    <Friend
+        v-if="showFriend"
+        :friends="formState.friends"
+        :position="'bottom'"
+        @cancel="chooseFriend"
+        @update="chooseFriend"
+    />
+    <!-- 选择履约模板 -->
+    <Permance
+        v-if="showPermance"
+        :position="'bottom'"
+        @cancel="choosePermance"
+        @update="choosePermance"
+    />
 </template>
 
 <script lang="ts">

+ 274 - 257
src/views/order/spot_warran/components/spot_warrant_spot_details/components/listing/index.vue

@@ -1,266 +1,283 @@
 <template>
-  <!-- 现货仓单 现货明细 挂牌 -->
-  <Drawer :title="'挂牌'"
-          :placement="'right'"
-          class="delistingBottom650"
-          :visible="visible"
-          @cancel="cancel">
-    <div class="listing">
-      <div class="condition">
-        <a-button class="conditionBtn">{{selectedRow.deliverygoodsname}}</a-button>
-        <a-button class="conditionBtn">{{selectedRow.wrtypename}}</a-button>
-        <a-button class="conditionBtn">{{selectedRow.warehousename}}</a-button>
-      </div>
+    <!-- 现货仓单 现货明细 挂牌 -->
+    <Drawer
+        :title="'挂牌'"
+        :placement="'right'"
+        class="delistingBottom650"
+        :visible="visible"
+        @cancel="cancel"
+    >
+        <div class="listing">
+            <div class="condition">
+                <a-button class="conditionBtn">{{selectedRow.deliverygoodsname}}</a-button>
+                <a-button class="conditionBtn">{{selectedRow.wrtypename}}</a-button>
+                <a-button class="conditionBtn">{{selectedRow.warehousename}}</a-button>
+            </div>
 
-      <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="WRPriceType">
-                <a-select class="inlineFormSelect"
-                          default-value="1"
-                          v-model:value="formState.WRPriceType"
-                          style="width: 140px">
-                  <a-select-option :value="1">一口价</a-select-option>
-                  <a-select-option :value="2">浮动价</a-select-option>
-                  <a-select-option :value="3">贸易圈</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12"
-                   v-if="isFixed()">
-              <a-form-item label="挂牌价"
-                           name="FixedPrice">
-                <a-input-number class="dialogInput"
-                                :min="0"
-                                style="width: 140px"
-                                v-model:value="formState.FixedPrice"
-                                placeholder="请输入挂牌价" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12"
-                   v-if="isBlocs()">
-              <a-form-item label="挂牌价格"
-                           name="FixedPrice"
-                           class="inputIconBox">
-                <a-input-number class="commonInput"
-                                style="width: 140px"
-                                :min="0"
-                                v-model:value="formState.FixedPrice" />
-                <a-checkbox class="commonCheckbox"
-                            v-model:checked="priceCheck">可议价</a-checkbox>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12"
-                   v-if="isFloat()">
-              <a-form-item label="基差"
-                           name="PriceMove">
-                <a-input-number class="commonInput"
-                                v-model:value="formState.PriceMove"
-                                style="width: 140px" />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="挂牌数量"
-                           class="inputIconBox"
-                           name="OrderQty">
-                <a-input-number class="dialogInput"
-                                style="width: 140px !important"
-                                :min="0"
-                                v-model:value="formState.OrderQty"
-                                placeholder="请输入挂牌数量" />
-                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-                <a-checkbox class="commonCheckbox"
-                            v-if="isBlocs()"
-                            v-model:checked="numCheck">整单</a-checkbox>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12"
-                   v-if="!numCheck">
-              <a-form-item label="起摘数量"
-                           class="relative"
-                           name="DelistMinQty">
-                <a-input-number class="commonInput"
-                                :min="0"
-                                v-model:value="formState.DelistMinQty"
-                                style="width: 140px !important" />
-                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-                <div class="tip">最小单位:{{selectedRow.minivalue}}{{selectedRow.enumdicname}}</div>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="12"
-                   class="mt-20">
-              <a-form-item>
-                <a-slider v-model:value="formState.OrderQty"
-                          ::min="0"
-                          :max="selectedRow.enableqty"
-                          class="formSlider"
-                          style="width: 140px;" />
-                <div class="unit">
-                  <span>0</span>
-                  <span>{{selectedRow.enableqty}}{{selectedRow.enumdicname}}</span>
-                </div>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">&nbsp;</a-col>
-          </a-row>
-          <template v-if="isBlocs()">
-            <a-row :gutter="24">
-              <a-col :span="12">
-                <a-form-item label="履约保证金"
-                             name="margin">
-                  <a-input-number class="commonInput"
-                                  v-model:value="formState.margin"
-                                  :min="0"
-                                  style="width: 140px" />
-                  <span class="input-enumdicname">%</span>
-                </a-form-item>
-              </a-col>
-              <a-col :span="12">
-                <a-form-item label="挂牌有效期"
-                             name="vidaliteTime"
-                             class="inputIconBox">
-                  <a-date-picker style="width: 140px"
-                                 v-model:value="formState.vidaliteTime"
-                                 :allowClear="false"
-                                 class="commonDatePicker dialogDatePicker" />
-                </a-form-item>
-              </a-col>
-            </a-row>
-            <a-row :gutter="24">
-              <a-col :span="12">
-                <a-form-item label="履约方式"
-                             class="inputIconBox">
-                  <span class="clickBox"
-                        style="width: 140px"
-                        @click="openPermance">{{formState.permanceTempName ? formState.permanceTempName : '选择履约模板'}}</span>
-                  <svg class="icon svg-icon"
-                       aria-hidden="true"
-                       @click="openPermance">
-                    <use xlink:href="#icon-moban" />
-                  </svg>
-                </a-form-item>
-              </a-col>
-              <a-col :span="12">
-                <a-form-item label="指定朋友"
-                             class="inputIconBox">
-                  <span class="clickBox"
-                        style="width: 140px"
-                        @click="openFriend">{{getFriendLength() ? `已选${getFriendLength() }人` : '选择朋友'}}</span>
-                  <svg class="icon svg-icon"
-                       aria-hidden="true"
-                       @click="openFriend">
-                    <use xlink:href="#icon-pengyou1" />
-                  </svg>
-                  <a-checkbox class="commonCheckbox"
-                              v-model:checked="friendCheck"
-                              @change="limiteFriends">不限</a-checkbox>
-                </a-form-item>
-              </a-col>
-            </a-row>
-          </template>
-          <a-row :gutter="24"
-                 v-if="isFloat()">
-            <a-col :span="24">
-              <a-form-item label="行情商品"
-                           name="goodsid">
-                <!-- <a-select class="inlineFormSelect"
+            <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="WRPriceType">
+                                <a-select
+                                    class="inlineFormSelect"
+                                    default-value="1"
+                                    v-model:value="formState.WRPriceType"
+                                    style="width: 140px"
+                                >
+                                    <a-select-option :value="1">一口价</a-select-option>
+                                    <a-select-option :value="2">浮动价</a-select-option>
+                                    <a-select-option :value="3">贸易圈</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12" v-if="isFixed()">
+                            <a-form-item label="挂牌价" name="FixedPrice">
+                                <a-input-number
+                                    class="dialogInput"
+                                    :min="0"
+                                    style="width: 140px"
+                                    v-model:value="formState.FixedPrice"
+                                    placeholder="请输入挂牌价"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12" v-if="isBlocs()">
+                            <a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
+                                <a-input-number
+                                    class="commonInput"
+                                    style="width: 140px"
+                                    :min="0"
+                                    v-model:value="formState.FixedPrice"
+                                />
+                                <a-checkbox class="commonCheckbox" v-model:checked="priceCheck">可议价</a-checkbox>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12" v-if="isFloat()">
+                            <a-form-item label="基差" name="PriceMove">
+                                <a-input-number
+                                    class="commonInput"
+                                    v-model:value="formState.PriceMove"
+                                    style="width: 140px"
+                                />
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="挂牌数量" class="inputIconBox" name="OrderQty">
+                                <a-input-number
+                                    class="dialogInput"
+                                    style="width: 140px !important"
+                                    :min="0"
+                                    v-model:value="formState.OrderQty"
+                                    placeholder="请输入挂牌数量"
+                                />
+                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                                <a-checkbox
+                                    class="commonCheckbox"
+                                    v-if="isBlocs()"
+                                    v-model:checked="numCheck"
+                                >整单</a-checkbox>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12" v-if="!numCheck">
+                            <a-form-item label="起摘数量" class="relative" name="DelistMinQty">
+                                <a-input-number
+                                    class="commonInput"
+                                    :min="0"
+                                    v-model:value="formState.DelistMinQty"
+                                    style="width: 140px !important"
+                                />
+                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                                <div
+                                    class="tip"
+                                >最小单位:{{selectedRow.minivalue}}{{selectedRow.enumdicname}}</div>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12" class="mt-20">
+                            <a-form-item>
+                                <a-slider
+                                    v-model:value="formState.OrderQty"
+                                    ::min="0"
+                                    :max="selectedRow.enableqty"
+                                    class="formSlider"
+                                    style="width: 140px;"
+                                />
+                                <div class="unit">
+                                    <span>0</span>
+                                    <span>{{selectedRow.enableqty}}{{selectedRow.enumdicname}}</span>
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">&nbsp;</a-col>
+                    </a-row>
+                    <template v-if="isBlocs()">
+                        <a-row :gutter="24">
+                            <a-col :span="12">
+                                <a-form-item label="履约保证金" name="margin">
+                                    <a-input-number
+                                        class="commonInput"
+                                        v-model:value="formState.margin"
+                                        :min="0"
+                                        style="width: 140px"
+                                    />
+                                    <span class="input-enumdicname">%</span>
+                                </a-form-item>
+                            </a-col>
+                            <a-col :span="12">
+                                <a-form-item label="挂牌有效期" name="vidaliteTime" class="inputIconBox">
+                                    <a-date-picker
+                                        style="width: 140px"
+                                        v-model:value="formState.vidaliteTime"
+                                        :allowClear="false"
+                                        class="commonDatePicker dialogDatePicker"
+                                    />
+                                </a-form-item>
+                            </a-col>
+                        </a-row>
+                        <a-row :gutter="24">
+                            <a-col :span="12">
+                                <a-form-item label="履约方式" class="inputIconBox">
+                                    <span
+                                        :class="['clickBox', formState.permanceTempName ? 'white' : '']"
+                                        style="width: 140px"
+                                        @click="openPermance"
+                                    >{{formState.permanceTempName ? formState.permanceTempName : '选择履约模板'}}</span>
+                                    <svg
+                                        class="icon svg-icon"
+                                        aria-hidden="true"
+                                        @click="openPermance"
+                                    >
+                                        <use xlink:href="#icon-moban" />
+                                    </svg>
+                                </a-form-item>
+                            </a-col>
+                            <a-col :span="12">
+                                <a-form-item label="指定朋友" class="inputIconBox">
+                                    <span
+                                        :class="['clickBox', getFriendLength() ? 'white' : '']"
+                                        style="width: 140px"
+                                        @click="openFriend"
+                                    >{{getFriendLength() ? `已选${getFriendLength() }人` : '选择朋友'}}</span>
+                                    <svg
+                                        class="icon svg-icon"
+                                        aria-hidden="true"
+                                        @click="openFriend"
+                                    >
+                                        <use xlink:href="#icon-pengyou1" />
+                                    </svg>
+                                    <a-checkbox
+                                        class="commonCheckbox"
+                                        v-model:checked="friendCheck"
+                                        @change="limiteFriends"
+                                    >不限</a-checkbox>
+                                </a-form-item>
+                            </a-col>
+                        </a-row>
+                    </template>
+                    <a-row :gutter="24" v-if="isFloat()">
+                        <a-col :span="24">
+                            <a-form-item label="行情商品" name="goodsid">
+                                <!-- <a-select class="inlineFormSelect"
                           style="width: 135px"
                           placeholder="请择交易所">
                                 </a-select>-->
-                <a-select class="inlineFormSelect ml5"
-                          @change="handleGoodsGroups"
-                          style="width: 135px"
-                          v-model:value="formState.goodsgroupid"
-                          placeholder="请选择商品">
-                  <a-select-option v-for="item in goodsGroup"
-                                   :value="item.goodsgroupid"
-                                   :key="item.goodsgroupid">{{item.goodsgroupname}}
-                  </a-select-option>
-                </a-select>
-                <a-select class="inlineFormSelect ml5"
-                          style="width: 135px"
-                          @change="handleGoodsChange"
-                          v-model:value="formState.goodsid"
-                          placeholder="请选择合约">
-                  <a-select-option v-for="item in goodsList"
-                                   :value="item.goodsid"
-                                   :key="item.goodsid">{{item.goodsname}}</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24"
-                   v-if="isFloat()"
-                   class="relative">
-              <a-form-item :label="'估算金额'">
-                <span class="white ml8">{{getWrMoney()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   v-if="isFixed()"
-                   class="relative">
-              <a-form-item :label="'挂牌金额'">
-                <span class="white ml8">{{getWrMoney()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   v-if="getWrMargin() && !isBlocs()">
-              <a-form-item :label="getWrMargin() ? '履约保证金' : ''">
-                <span class="white ml8">{{getWrMargin()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   v-if="isBlocs()">
-              <a-form-item label="履约保证金">
-                <span class="white ml8">{{getMargin()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="可用资金">
-                <span class="white ml8">{{getCanUseMoney(handleSelectedAccount())}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
+                                <a-select
+                                    class="inlineFormSelect ml5"
+                                    @change="handleGoodsGroups"
+                                    style="width: 135px"
+                                    v-model:value="formState.goodsgroupid"
+                                    placeholder="请选择商品"
+                                >
+                                    <a-select-option
+                                        v-for="item in goodsGroup"
+                                        :value="item.goodsgroupid"
+                                        :key="item.goodsgroupid"
+                                    >{{item.goodsgroupname}}</a-select-option>
+                                </a-select>
+                                <a-select
+                                    class="inlineFormSelect ml5"
+                                    style="width: 135px"
+                                    @change="handleGoodsChange"
+                                    v-model:value="formState.goodsid"
+                                    placeholder="请选择合约"
+                                >
+                                    <a-select-option
+                                        v-for="item in goodsList"
+                                        :value="item.goodsid"
+                                        :key="item.goodsid"
+                                    >{{item.goodsname}}</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24" v-if="isFloat()" class="relative">
+                            <a-form-item :label="'估算金额'">
+                                <span class="white ml8">{{getWrMoney()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" v-if="isFixed()" class="relative">
+                            <a-form-item :label="'挂牌金额'">
+                                <span class="white ml8">{{getWrMoney()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" v-if="getWrMargin() && !isBlocs()">
+                            <a-form-item :label="getWrMargin() ? '履约保证金' : ''">
+                                <span class="white ml8">{{getWrMargin()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" v-if="isBlocs()">
+                            <a-form-item label="履约保证金">
+                                <span class="white ml8">{{getMargin()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="可用资金">
+                                <span class="white ml8">{{getCanUseMoney(handleSelectedAccount())}}</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"
+                                :loading="loading"
+                                :disabled="loading"
+                                @click="submit"
+                            >卖出</a-button>
+                            <a-button
+                                class="ml10 cancelBtn"
+                                :loading="loading"
+                                :disabled="loading"
+                                @click="cancel"
+                            >取消</a-button>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-form>
         </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-button class="ml10 cancelBtn"
-                        :loading="loading"
-                        :disabled="loading"
-                        @click="cancel">取消</a-button>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-  </Drawer>
-  <!-- 选择朋友 -->
-  <Friend v-if="showFriend"
-          :friends=formState.friends
-          :position="'bottom'"
-          @cancel="chooseFriend"
-          @update="chooseFriend" />
-  <!-- 选择履约模板 -->
-  <Permance v-if="showPermance"
-            :position="'bottom'"
-            @cancel="choosePermance"
-            @update="choosePermance" />
+    </Drawer>
+    <!-- 选择朋友 -->
+    <Friend
+        v-if="showFriend"
+        :friends="formState.friends"
+        :position="'bottom'"
+        @cancel="chooseFriend"
+        @update="chooseFriend"
+    />
+    <!-- 选择履约模板 -->
+    <Permance
+        v-if="showPermance"
+        :position="'bottom'"
+        @cancel="choosePermance"
+        @update="choosePermance"
+    />
 </template>
 
 <script lang="ts">