|
|
@@ -1,48 +1,38 @@
|
|
|
<template>
|
|
|
- <Drawer :title="'详情'"
|
|
|
- :placement="'right'"
|
|
|
- class="delistingBottom"
|
|
|
- :visible="visible"
|
|
|
- @cancel="cancel">
|
|
|
- <div>
|
|
|
- <a-row :gutter="24"
|
|
|
- type="flex"
|
|
|
- justify="center">
|
|
|
- <a-col :span="24"
|
|
|
- class="fixedBtns">
|
|
|
- <a-form-item class="btnCenter">
|
|
|
- <a-button class="cancelBtn"
|
|
|
- @click="cancel">取消</a-button>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </div>
|
|
|
- </Drawer>
|
|
|
+ <Drawer :title="'详情'" :placement="'right'" class="delistingBottom" :visible="visible" @cancel="cancel">
|
|
|
+ <div class="detail">
|
|
|
+ <div class="detail__body">
|
|
|
+ <a-row v-for="(item, index) in columns" :key="index">
|
|
|
+ <a-col :span="6">{{ item.columntitle }}</a-col>
|
|
|
+ <a-col :span="18">{{ handleDetailValue(item.columnfield) }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ <div class="detail__footer">
|
|
|
+ <a-button class="cancelBtn" @click="cancel">取消</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Drawer>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { BtnListType } from '@/common/components/btnList/interface';
|
|
|
import Drawer from '@/common/components/drawer/index.vue';
|
|
|
-import { getBarmaginApplyStatus } from '@/common/constants/enumsName';
|
|
|
-import { BtnList, ModalEnum, queryTableList } from '@/common/export/commonTable';
|
|
|
-import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
|
|
|
+import { BtnList, ModalEnum } from '@/common/export/commonTable';
|
|
|
import { _closeModal } from '@/common/setup/modal/modal';
|
|
|
-import { getTableEvent } from '@/common/setup/table';
|
|
|
-import { expandIcon } from '@/common/setup/table/clolumn';
|
|
|
-import { queryQueryWrTradeBargainApply } from '@/services/go/wrtrade';
|
|
|
-import { QueryWrTradeBargainApplyQsp, QueryWrTradeBargainApplyReq, WrOrderDetail } from '@/services/go/wrtrade/interface';
|
|
|
-import { wrBargainBack, wrBargainNoAgree } from '@/services/proto/WrBargain';
|
|
|
-import { WrBargainBackReq, WrBargainNoAgreeReq } from '@/services/proto/WrBargain/interface';
|
|
|
-import Long from 'long';
|
|
|
+import { QueryWrTradeBargainApplyQsp, WrOrderDetail } from '@/services/go/wrtrade/interface';
|
|
|
import { defineComponent, PropType, ref } from 'vue';
|
|
|
+import { getWrOrderTypeName } from '@/common/constants/enumsName';
|
|
|
+import { Column } from '@/services/go/commonService/interface';
|
|
|
+import { getTableHead } from '@/common/methods/table';
|
|
|
+import { TableKey } from '@/common/methods/table/interface';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: ModalEnum.spot_warrant_bargain_detail,
|
|
|
components: { Drawer, BtnList },
|
|
|
emits: ['cancel', 'update'],
|
|
|
props: {
|
|
|
+ tableName: Object as PropType<keyof TableKey>,
|
|
|
selectedRow: {
|
|
|
- type: Object as PropType<QueryWrTradeBargainApplyQsp | WrOrderDetail>,
|
|
|
+ type: Object as PropType<QueryWrTradeBargainApplyQsp & WrOrderDetail>,
|
|
|
default: {},
|
|
|
},
|
|
|
isMy: {
|
|
|
@@ -52,54 +42,70 @@ export default defineComponent({
|
|
|
},
|
|
|
setup(props, context) {
|
|
|
const { visible, cancel } = _closeModal(context);
|
|
|
+ const columns = ref<Column[]>([]);
|
|
|
+
|
|
|
+ if (props.tableName) {
|
|
|
+ columns.value = getTableHead(props.tableName);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理详情数据
|
|
|
+ const handleDetailValue = (field: keyof typeof props.selectedRow) => {
|
|
|
+ const data = props.selectedRow;
|
|
|
+ // 挂牌类型
|
|
|
+ if (field === 'wrtradetype') {
|
|
|
+ return getWrOrderTypeName(data.buyorsell, data.wrtradetype);
|
|
|
+ }
|
|
|
+ // 成交金额
|
|
|
+ if (field === 'amount') {
|
|
|
+ return data.tradeqty * data.tradeprice;
|
|
|
+ }
|
|
|
+ return data[field];
|
|
|
+ };
|
|
|
|
|
|
return {
|
|
|
visible,
|
|
|
+ columns,
|
|
|
cancel,
|
|
|
+ getWrOrderTypeName,
|
|
|
+ handleDetailValue,
|
|
|
};
|
|
|
},
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.listed {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- .flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow: hidden;
|
|
|
- .ant-form {
|
|
|
- height: 100%;
|
|
|
- .formBar {
|
|
|
- height: 100%;
|
|
|
- max-height: 100%;
|
|
|
- }
|
|
|
+.detail {
|
|
|
+ [theme='light'] & {
|
|
|
+ --label-color: #7a8a94;
|
|
|
+ --text-color: #333;
|
|
|
}
|
|
|
- .condition {
|
|
|
- width: 100%;
|
|
|
- height: 48px;
|
|
|
- padding: 10px 16px;
|
|
|
- border-bottom: 1px solid @m-black6;
|
|
|
- .inlineflex;
|
|
|
- .conditionBtn {
|
|
|
- align-self: center;
|
|
|
- align-items: center;
|
|
|
- border: 0;
|
|
|
- min-width: 80px;
|
|
|
- height: 28px;
|
|
|
- line-height: 28px;
|
|
|
- background: @m-black7;
|
|
|
- .rounded-corners(3px);
|
|
|
- font-size: 14px;
|
|
|
- color: @m-blue0;
|
|
|
- &:hover {
|
|
|
- background: @m-black7-hover;
|
|
|
- color: @m-blue0-hover;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 0 25px;
|
|
|
+
|
|
|
+ .ant-row {
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .ant-col {
|
|
|
+ &:first-child {
|
|
|
+ color: var(--label-color, #7a8a94);
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ color: var(--text-color, #fff);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .conditionBtn + .conditionBtn {
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__footer {
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px 0;
|
|
|
}
|
|
|
}
|
|
|
</style>;
|