style update

src/assets/styles/mixin.less

@@ -2183,4 +2183,90 @@ input:-internal-autofill-selected {
     position: sticky;
     position: -webkit-sticky;
     right: 2px;
+}
+
+// 步骤条
+.commonSteps {
+    .ant-steps-item {
+        .block {
+            display: inline-flex;
+        }
+        .ant-steps-item-tail {
+
+        }
+        .ant-steps-item-icon {
+            width: 20px;
+            height: 20px;
+            background: @m-grey11;
+            border-color: @m-blue24;
+            .ant-steps-icon {
+                font-size: 12px;
+                line-height: 20px;
+                top: -9px;
+            }
+        }
+        .ant-steps-item-content {
+            min-height: 60px;
+        }
+        .line {
+            width: 280px;
+            height: 30px;
+            background: @m-blue17;
+            .rounded-corners(3px);
+            display: inline-flex;
+            position: relative;
+            .num {
+                width: 30px;
+                height: 30px;
+                background: @m-blue0;
+                .rounded-corners(3px);
+                text-align: center;
+                line-height: 30px;
+                font-size: 14px;
+                color: @m-white0;
+            }
+            .desc {
+                flex: 1;
+                padding-left: 14px;
+                font-size: 16px;
+                color: @m-white0;
+            }
+            .day {
+                width: 70px;
+                text-align: right;
+                color: @m-blue0;
+                margin-right: 17px;
+            }
+            .arrowRight {
+                display: none;
+                .position(absolute, auto, -9px, 0, auto);
+                font-size: 12px;
+                color: @m-blue0;
+                line-height: 30px;
+                z-index: 2;
+            }
+        }
+        .tip {
+            margin-left: 13px;
+            font-size: 16px;
+            line-height: 30px;
+            color: @m-blue23;
+        }
+    }
+    .ant-steps-item-finish {
+
+    }
+    .ant-steps-item-process {
+        .line {
+            .arrowRight {
+                display: block;
+            }
+        }
+        .tip {
+            color: @m-blue0;
+        }
+    }
+    .ant-steps-item-wait {
+
+    }
 }

src/assets/styles/variables.less

@@ -97,6 +97,8 @@
 @m-blue20: #122d55;
 @m-blue21: #102e45;
 @m-blue22: #0e2f4c;
+@m-blue23: #223F7E;
+@m-blue24: #2484FC;
 
 @body-bg: #e9eef3;
 @m-white0: #ffffff;

src/common/components/drawer/index.vue

@@ -1,25 +1,26 @@
 <template>
-  <a-drawer :placement="placement"
-            :closable="false"
-            :visible="visible"
-            :destroyOnClose="true"
-            class="bottomListed"
-            height="406px">
-    <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
-    <div class="collapse"
-         @click="cancel">
-      <DoubleRightOutlined />
-    </div>
-    <div class="collapseCont">
-      <div class="title">{{ title }}</div>
-      <div class="content highContent">
-        <!-- <Listed></Listed> -->
-        <!-- <Delisting></Delisting> -->
-        <slot></slot>
-        <!-- <Trade></Trade> -->
-      </div>
-    </div>
-  </a-drawer>
+    <a-drawer
+        :placement="placement"
+        :closable="false"
+        :visible="visible"
+        :destroyOnClose="true"
+        class="bottomListed"
+        height="406px"
+    >
+        <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
+        <div class="collapse" @click="cancel">
+            <DoubleRightOutlined />
+        </div>
+        <div class="collapseCont">
+            <div class="title">{{ title }}</div>
+            <div class="content highContent">
+                <!-- <Listed></Listed> -->
+                <!-- <Delisting></Delisting> -->
+                <slot></slot>
+                <!-- <Trade></Trade> -->
+            </div>
+        </div>
+    </a-drawer>
 </template>
 
 <script lang="ts">
@@ -81,6 +82,16 @@ export default defineComponent({
         width: 586px !important;
     }
 }
+.delistingBottom {
+    .position(fixed, auto, 0, -2px, auto);
+    width: 586px;
+    height: 440px;
+    background: transparent;
+    z-index: 10;
+    .ant-drawer-content-wrapper {
+        width: 586px !important;
+    }
+}
 .top {
     .position(fixed, 101px, 0, auto, auto);
     width: 486px;

src/views/order/performance_information/components/performance_information_buy_performance/components/detail/index.vue

@@ -1,17 +1,70 @@
 <template>
-  <!-- 履约明细-->
-  <Drawer :title="'履约明细'"
-          :placement="'bottom'"
-          :visible="visible"
-          @cancel="cancel">
-    <div class="listed">
+    <!-- 履约明细-->
+    <Drawer :title="'履约明细'" :placement="'bottom'" :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>
-    </div>
-  </Drawer>
+        </div>-->
+        <div class="performanceSteps">
+            <a-steps v-model:current="current" class="commonSteps" direction="vertical">
+                <a-step status="finish">
+                    <template #title>
+                        <div class="block">
+                            <div class="line">
+                                <div class="num">1</div>
+                                <div class="desc">买方30%货款</div>
+                                <div class="day">T+30</div>
+                                <CaretRightOutlined class="arrowRight" />
+                            </div>
+                            <div class="tip">已完成</div>
+                        </div>
+                    </template>
+                </a-step>
+                <a-step status="finish">
+                    <template #title>
+                        <div class="block">
+                            <div class="line">
+                                <div class="num">2</div>
+                                <div class="desc">卖方发货</div>
+                                <div class="day">T+3</div>
+                                <CaretRightOutlined class="arrowRight" />
+                            </div>
+                            <div class="tip">已完成</div>
+                        </div>
+                    </template>
+                </a-step>
+                <a-step status="process">
+                    <template #title>
+                        <div class="block">
+                            <div class="line">
+                                <div class="num">3</div>
+                                <div class="desc">买方70%货款</div>
+                                <div class="day">T+10</div>
+                                <CaretRightOutlined class="arrowRight" />
+                            </div>
+                            <div class="tip">2日后扣款</div>
+                        </div>
+                    </template>
+                </a-step>
+                <a-step status="wait">
+                    <template #title>
+                        <div class="block">
+                            <div class="line">
+                                <div class="num">4</div>
+                                <div class="desc">卖方开票</div>
+                                <div class="day">T+1</div>
+                                <CaretRightOutlined class="arrowRight" />
+                            </div>
+                            <div class="tip">未开始</div>
+                        </div>
+                    </template>
+                </a-step>
+            </a-steps>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -32,10 +85,11 @@ import { message } from 'ant-design-vue';
 import { getGoodsGroupsByTradeMode } from '@/services/bus/goods';
 import { TradeMode } from '@/common/constants/enumCommon';
 import { WRGoodsInfo } from '@/services/proto/warehousetrade/interface';
+import { CaretRightOutlined } from '@ant-design/icons-vue';
 
 export default defineComponent({
     name: ModalEnum.performance_information_buy_performance_detail,
-    components: { Drawer },
+    components: { Drawer, CaretRightOutlined },
     emits: ['cancel', 'update'],
     props: {
         selectedRow: {
@@ -46,14 +100,18 @@ export default defineComponent({
     setup(props, context) {
         const { visible, cancel } = _closeModal(context);
         console.log('selectedRow', props.selectedRow);
-
+        const current = ref<number>(0);
         return {
             visible,
             cancel,
+            current,
         };
     },
 });
 </script>
 
 <style lang="less" scoped>
+.performanceSteps {
+    padding: 25px 40px;
+}
 </style>;

src/views/order/performance_information/components/performance_information_buy_performance/components/extension/index.vue

@@ -1,76 +1,83 @@
 <template>
-  <!-- 延期-->
-  <Drawer :title="'延期申请'"
-          :placement="'bottom'"
-          :visible="visible"
-          @cancel="cancel">
-    <div class="listed">
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef"
-                :model="formState"
-                :rules="rules">
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="品种">
-                <span class="white">{{selectedRow.deliverygoodsname}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="仓库">
-                <span class="white">{{selectedRow.warehousename}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="履约商品">
-                <span class="white">{{selectedRow.wrtypename}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="当前步骤">
-                <span class="white">{{selectedRow.curstepname}}（（超期天数：331）</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="关联单号">
-                <span class="white">86989565623</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="申请延期天数"
-                           name="days">
-                <a-input-number class="commonInput"
-                                :min="1"
-                                v-model:value="formState.days"
-                                style="width: 140px" />
-                <span>天</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="备注"
-                           name="remark">
-                <a-input class="commonInput"
-                         v-model:value="formState.remark"
-                         style="width: 100%" />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 type="flex"
-                 justify="center">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <a-button class="listedBtn"
-                          :loading="loading"
-                          :disabled="loading"
-                          @click="submit">提交</a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-    </div>
-  </Drawer>
+    <!-- 延期-->
+    <Drawer
+        :title="'延期申请'"
+        :placement="'right'"
+        class="delistingBottom"
+        :visible="visible"
+        @cancel="cancel"
+    >
+        <div class="listed">
+            <div class="formBar">
+                <a-form
+                    class="inlineForm dialogForm"
+                    ref="formRef"
+                    :model="formState"
+                    :rules="rules"
+                >
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="品种">
+                                <span class="white ml10">{{selectedRow.deliverygoodsname}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="仓库">
+                                <span class="white ml10">{{selectedRow.warehousename}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="履约商品">
+                                <span class="white ml10">{{selectedRow.wrtypename}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="当前步骤">
+                                <span class="white ml10">{{selectedRow.curstepname}}（（超期天数：331）</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="关联单号">
+                                <span class="white ml10">86989565623</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="申请延期天数" name="days" class="relative">
+                                <a-input-number
+                                    class="commonInput ml10"
+                                    :min="1"
+                                    v-model:value="formState.days"
+                                    style="width: 200px"
+                                />
+                                <div class="day">天</div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="备注" name="remark">
+                                <a-input
+                                    class="commonInput ml10"
+                                    v-model:value="formState.remark"
+                                    style="width: 420px"
+                                />
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24" type="flex" justify="center">
+                        <a-col :span="24">
+                            <a-form-item class="tc">
+                                <a-button
+                                    class="listedBtn"
+                                    :loading="loading"
+                                    :disabled="loading"
+                                    @click="submit"
+                                >提交</a-button>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </a-form>
+            </div>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -114,4 +121,9 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
+.day {
+    .position(absolute, auto, -24px, 0, auto);
+    line-height: 26px;
+    color: @m-grey1;
+}
 </style>;

src/views/order/performance_information/components/performance_information_buy_performance/components/pay/index.vue

@@ -1,78 +1,80 @@
 <template>
-  <!-- 付款-->
-  <Drawer :title="'付款'"
-          :placement="'bottom'"
-          :visible="visible"
-          @cancel="cancel">
-    <div class="listed">
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef">
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="品种">
-                <span class="white">{{selectedRow.deliverygoodsname}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="仓库">
-                <span class="white">{{selectedRow.warehousename}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="履约商品">
-                <span class="white">{{selectedRow.wrtypename}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="履约总金额">
-                <span class="white">{{selectedRow.amount.toFixed(2)}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="当前步骤">
-                <span class="white">{{selectedRow.curstepname}}（</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="本次需支付">
-                <span class="white">1000.00</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="剩余款">
-                <span class="white">{{selectedRow.unpaidamount.toFixed(2)}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 type="flex"
-                 justify="center">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <a-button class="listedBtn"
-                          :loading="loading"
-                          :disabled="loading"
-                          @click="submit">提交</a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-    </div>
-  </Drawer>
+    <!-- 付款-->
+    <Drawer
+        :title="'付款'"
+        :placement="'right'"
+        :visible="visible"
+        class="delistingBottom"
+        @cancel="cancel"
+    >
+        <div class="listed">
+            <div class="formBar">
+                <a-form class="inlineForm dialogForm" ref="formRef">
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="品种">
+                                <span class="white ml10">{{selectedRow.deliverygoodsname}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="仓库">
+                                <span class="white ml10">{{selectedRow.warehousename}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="履约商品">
+                                <span class="white ml10">{{selectedRow.wrtypename}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="履约总金额">
+                                <span class="white ml10">{{selectedRow.amount.toFixed(2)}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="当前步骤">
+                                <span class="white ml10">{{selectedRow.curstepname}}（</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="本次需支付">
+                                <span class="white ml10">1000.00</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="剩余款">
+                                <span class="white ml10">{{selectedRow.unpaidamount.toFixed(2)}}</span>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24" type="flex" justify="center">
+                        <a-col :span="24">
+                            <a-form-item class="tc">
+                                <a-button
+                                    class="listedBtn"
+                                    :loading="loading"
+                                    :disabled="loading"
+                                    @click="submit"
+                                >提交</a-button>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </a-form>
+            </div>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue';
 import Drawer from '@/common/components/drawer/index.vue';
-import {WrPerformancePlan, WrPosition} from '@/services/go/wrtrade/interface';
+import { WrPerformancePlan, WrPosition } from '@/services/go/wrtrade/interface';
 import { ModalEnum } from '@/common/constants/modalNameEnum';
 import { _closeModal } from '@/common/setup/modal/modal';
-import {performanceManualConfirm} from "@/services/proto/performance";
-import {PerformanceManualConfirmReq} from "@/services/proto/performance/interface";
-import {requestResultLoadingAndInfo} from "@/common/methods/request/resultInfo";
-import {HdWRDealOrder} from "@/services/proto/warehousetrade";
+import { performanceManualConfirm } from '@/services/proto/performance';
+import { PerformanceManualConfirmReq } from '@/services/proto/performance/interface';
+import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { HdWRDealOrder } from '@/services/proto/warehousetrade';
 
 export default defineComponent({
     name: ModalEnum.performance_information_buy_performance_pay,
@@ -91,9 +93,9 @@ export default defineComponent({
         function submit() {
             const param: PerformanceManualConfirmReq = {
                 PerformancePlanStepID: props.selectedRow.curstepid,
-                PerformanceExecuteSide: 1
-            }
-            debugger
+                PerformanceExecuteSide: 1,
+            };
+            debugger;
             requestResultLoadingAndInfo(performanceManualConfirm, param, loading, ['付款成功', '付款失败:']).then(() => {
                 cancel(true);
             });

src/views/order/pre_sale_warehouse_receipt/components/pre_sale_warehouse_receipt_order_summary/components/listed/index.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 预售仓单 现货明细 挂牌 -->
-    <Drawer :title="'挂牌'" :placement="'right'" class="bottom" :visible="visible" @cancel="cancel">
+    <Drawer :title="'挂牌'" :placement="'right'" class="delistingBottom" :visible="visible" @cancel="cancel">
         <div class="listed">
             <div class="condition">
                 <a-button class="conditionBtn">{{selectedRow.deliverygoodsname}}</a-button>

src/views/order/spot_warran/components/spot_warrant_spot_details/components/listing/index.vue

@@ -1,6 +1,12 @@
 <template>
     <!-- 现货仓单 现货明细 挂牌 -->
-    <Drawer :title="'挂牌'" :placement="'right'" class="bottom" :visible="visible" @cancel="cancel">
+    <Drawer
+        :title="'挂牌'"
+        :placement="'right'"
+        class="delistingBottom"
+        :visible="visible"
+        @cancel="cancel"
+    >
         <div class="listing">
             <div class="condition">
                 <a-button class="conditionBtn">{{selectedRow.deliverygoodsname}}</a-button>