MTP2.0_WEB/src/views/information/spot-contract/components/detail/index.vue

<template>
  <!-- 现货合同详情-->
  <a-modal class="add-custom custom-detail"
           title="现货合同详情"
           v-model:visible="visible"
           centered
           :maskClosable="maskClosableFlag"
           @cancel="cancel"
           width="890px">
    <template #footer>
      <a-button key="submit"
                type="primary"
                :loading="loading"
                @click="cancel">关闭</a-button>
    </template>
    <a-tabs v-model:activeKey="activeKey"
            @change="tabClick">
      <a-tab-pane v-for="item in tabList"
                  :key="item.key"
                  :tab="item.name">
      </a-tab-pane>
    </a-tabs>
    <InfoDetail :selectedRow="selectedRow"
                v-if="activeKey == 1" />
    <div class="tableDatas"
         v-else>
      <a-table class="dialogTable"
               :columns="columns"
               :data-source="tableList"
               :pagination="false">
        <template #status="{ text }">
          <span class="yellow">{{ text }}</span>
          <!-- 审核通过'green' 审核拒绝 'orange' 待审核'yellow'   -->
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { closeModal } from '@/common/setup/modal/index';
import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { QueryBusinessFp, QueryBusinessKx } from '@/services/go/ermcp/finance-review';
import { QueryBusinessJs } from '@/services/go/ermcp/business-review';
import { QueryAreaStockApply } from '@/services/go/ermcp/inventory-review';
import { QueryChangeLog } from '@/services/go/ermcp/spot-contract';
import { ErmcpLoginUserEx } from '@/services/go/ermcp/account/interface';
import InfoDetail from '../infoDetail/index.vue';
import { columnsPointPrice, columnsFund, columnsSettlement, columnsInvoice, columnsInWarehouse } from './setup';

export default defineComponent({
    name: 'spot-contract-detail',
    components: { InfoDetail },
    props: {
        selectedRow: {
            type: Object as PropType<Ermcp3ContractRsp>,
            default: {},
        },
        businessManager: {
            type: Array as PropType<ErmcpLoginUserEx[]>,
            default: [],
        },
    },
    setup: function(props, context) {
        const { visible, cancel } = closeModal('detail');

        const tabList = [
            { key: 1, name: '合同详情' },
            { key: 2, name: '点价记录' },
            { key: 3, name: '交收记录' },
            { key: 4, name: '款项记录' },
            { key: 5, name: '发票记录' },
            { key: 6, name: '入库记录' },
            { key: 7, name: '变更记录' },
        ];
        const activeKey = ref<number>(1);

        const loading = ref<boolean>(false);
        const columns = ref<any[]>([]);
        const tableList = ref<any[]>([]);

        function tabClick() {
            const relatedid = props.selectedRow.spotcontractid;
            switch (activeKey.value) {
                case 1:
                    break;
                case 2: // 点价记录
                    queryResultLoadingAndInfo(QueryBusinessKx, loading, { relatedid }).then((res) => {
                        columns.value = columnsPointPrice;
                        tableList.value = res;
                    });
                    break;
                case 3: // 交收记录
                    queryResultLoadingAndInfo(QueryBusinessJs, loading, { relatedid }).then((res) => {
                        columns.value = columnsSettlement;
                        tableList.value = res;
                    });
                    break;
                case 4: //款项记录
                    queryResultLoadingAndInfo(QueryBusinessKx, loading, { relatedid }).then((res) => {
                        columns.value = columnsFund;
                        tableList.value = res;
                    });
                    break;
                case 5: // 发票记录
                    queryResultLoadingAndInfo(QueryBusinessFp, loading, { relatedid }).then((res) => {
                        columns.value = columnsInvoice;
                        tableList.value = res;
                    });
                    break;
                case 6: // 入库记录
                    queryResultLoadingAndInfo(QueryAreaStockApply, loading, { spotcontractid: relatedid, inouttype: '1,3' }).then((res) => {
                        columns.value = columnsInWarehouse;
                        tableList.value = res;
                    });
                    break;
                case 7: // 变更记录
                    queryResultLoadingAndInfo(QueryChangeLog, loading, { RelatedId: relatedid }).then((res) => {
                        columns.value = columnsInWarehouse;
                        tableList.value = res;
                    });
                    break;
            }
        }
        return {
            visible,
            cancel,
            loading,
            maskClosableFlag: false,
            activeKey,
            columns,
            tableList,
            tabList,
            tabClick,
        };
    },
});
</script>

<style lang="less">
.custom-detail {
    .ant-modal-content {
        .ant-modal-body {
            padding-top: 0;
            padding-left: 0;
            padding-right: 0;
            .ant-tabs {
                background: @m-black11;
                width: 100%;
                padding: 0 24px;
                .ant-tabs-bar {
                    margin-bottom: 0;
                    border-bottom: 0;
                }
                .ant-tabs-nav-container {
                    .ant-tabs-nav-wrap {
                        .ant-tabs-nav {
                            .ant-tabs-tab {
                                width: 70px;
                                margin-right: 43px;
                                text-align: center;
                                font-size: 16px;
                                color: #88a0ae;
                                padding: 0;
                                line-height: 45px;
                            }
                            .ant-tabs-tab-active.ant-tabs-tab {
                                color: #3a87f7;
                            }
                            .ant-tabs-ink-bar {
                                width: 70px !important;
                                background: #3a87f7;
                                .rounded-corners(1px);
                            }
                        }
                    }
                }
            }
        }
    }
    .tableDatas {
        margin-top: 26px;
        padding: 0 24px;
        overflow: hidden;
        .dialogTable {
            width: 100%;
            overflow: overlay;
        }
    }
    .ant-form.inlineForm {
        margin-top: 20px;
        padding: 0 24px;
    }
}
</style
>;