feat: 新增挂单详情

src/views/order/spot_warran/components/spot_warrant_pending_order/components/detail/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <!-- 现货仓单 挂单 详情 -->
+  <Drawer :title="'详情'"
+          :placement="'right'"
+          :visible="visible"
+          class="top top486"
+          @cancel="cancel">
+    <div class="detailCont">
+      <div class="rows">
+        <div class="row"
+             v-for="item in lstitem"
+             :key="item.name">
+          <div class="left">{{item.name}}</div>
+          <div class="right">{{item.value}}</div>
+        </div>
+      </div>
+      <div class="ruleTitle">履约规则：</div>
+      <div class="rulesCont">
+        <a-row>
+          <a-col :span="24"
+                 class="ruleCol">
+            <div class="line"
+                 v-for="item in lststep"
+                 :key="item.autoid">
+              <!-- <div class="no">{{index + 1}}</div> -->
+              <div class="name">{{item.steptypename}}</div>
+              <div class="time">{{item.stepdate}}</div>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+  </Drawer>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue';
+import Drawer from '@/common/components/drawer/index.vue';
+import { QueryWrGoodsInfoReq, WrGoodsPerformanceStep, WrOrderQuote, WrTypeItem } from '@/services/go/wrtrade/interface';
+import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { ModalEnum } from '@/common/constants/modalNameEnum';
+import { _closeModal } from '@/common/setup/modal/modal';
+import { queryWrGoodsInfo } from '@/services/go/wrtrade';
+import { EnumRouterName } from '@/common/constants/enumRouterName';
+
+export default defineComponent({
+    name: ModalEnum.spot_trade_warehouse_delisting,
+    components: { Drawer },
+    emits: ['cancel', 'update'],
+    props: {
+        selectedRow: {
+            type: Object as PropType<WrOrderQuote>,
+            default: {},
+        },
+        enumName: {
+            default: '',
+            type: String as PropType<EnumRouterName>,
+        },
+    },
+    setup(props, context) {
+        const loading = ref<boolean>(false);
+        const { visible, cancel } = _closeModal(context);
+        const lstitem = ref<WrTypeItem[]>();
+        const lststep = ref<WrGoodsPerformanceStep[]>();
+        const param: QueryWrGoodsInfoReq = {
+            haswr: 1,
+            wrfactortypeid: props.selectedRow.wrfactortypeid,
+        };
+        queryResultLoadingAndInfo(queryWrGoodsInfo, loading, param).then((res) => {
+            if (res.length) {
+                lstitem.value = res[0].lstitem;
+                lststep.value = res[0].lststep;
+            }
+        });
+
+        return {
+            lstitem,
+            lststep,
+            visible,
+            cancel,
+        };
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.detailCont {
+    padding: 10px;
+    .rows {
+        .flex;
+        flex-direction: column;
+        width: 100%;
+        border: 1px solid @m-black6;
+        background: @m-black13;
+        .row {
+            display: inline-flex;
+            width: 100%;
+            height: 38px;
+            line-height: 38px;
+            border-bottom: 1px solid @m-black6;
+            > div {
+                text-align: center;
+                font-size: 16px;
+            }
+            .left {
+                width: 126px;
+                color: @m-grey1;
+                border-right: 1px solid @m-black6;
+            }
+            .right {
+                flex: 1;
+                color: @m-white11;
+            }
+        }
+    }
+    .ruleTitle {
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        margin-top: 10px;
+        font-size: 16px;
+        color: @m-grey1;
+    }
+}
+</style>

src/views/order/spot_warran/components/spot_warrant_pending_order/index.vue

@@ -53,6 +53,7 @@ export default defineComponent({
     components: {
         BtnList,
         [ModalEnum.spot_warrant_pending_order_cancel_order]: defineAsyncComponent(() => import('./components/cancle/index.vue')),
+        detail: defineAsyncComponent(() => import('./components/detail/index.vue')),
     },
     setup() {
         // 表格列表数据
@@ -69,6 +70,7 @@ export default defineComponent({
             queryFn: queryTableAction,
             tableName: 'table_pcweb_spot_trade_bottom_spot_warrant_pending_order',
             recordList: getRecordItemTab(),
+            isDetail: true,
         };
         function filterBtnList(list: BtnListType[], record: WrOrderDetail) {
             //委托状态 - 1:委托请求 2:待冻结 3:委托成功 4:委托失败 5:配对成功 6:已撤 7:已成 8:成交失败 9:委托拒绝 1number;