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"
                    :businessManager="businessManager"
                    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>

                <template #applystatus="{ text }">
                    <a>{{ getApplyStatusName(text) }}</a>
                </template>

                <!-- 发票金额-->
                <template #invoicetype="{ text }">
                    <a>{{ invoiceStatusName(text) }}</a>
                </template>

                <!-- 发票类型-->
                <template #contracttype="{ text }">
                    <a>{{ getPlanContractType(text) }}</a>
                </template>

                <!-- 出入库类型 -->
                <template #inouttype="{ text }">
                    <a>{{ InOutTypeName(text) }}</a>
                </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 {QueryBusinessDj, 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 {getApplyStatusName} from '@/views/manage/business-review/setup';
    import {getTableColumns} from '@/common/setup/table';
    import {invoiceStatusName} from "@/views/manage/finance-review/setup";
    import {getPlanContractType} from "@/views/business/plan/setup";
    import {InOutTypeName} from "@/views/manage/inventory-review/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');

            let tabList = ref<any[]> (props.selectedRow.contracctstatus === 4 || 0 ?  // 审核拒绝和未提交不显示后面的选项
                [{key: 1, name: '合同详情'},]
                : [
                    {key: 1, name: '合同详情'},
                    {key: 2, name: '点价记录'},
                    {key: 3, name: '交收记录'},
                    {key: 4, name: '款项记录'},
                    {key: 5, name: '发票记录'},
                    {key: 6, name: '入库记录'},
                    {key: 7, name: '出库记录'},
                    {key: 8, name: '变更记录'},
                ]);

            const activeKey = ref<number>(1);

            const loading = ref<boolean>(false);
            const tableList = ref<any[]>([]);
            // 表头数据
            const {columns, registerColumn} = getTableColumns();

            function tabClick() {
                const relatedid = props.selectedRow.spotcontractid;
                switch (activeKey.value) {
                    case 1:
                        break;
                    case 2: // 点价记录
                        registerColumn('table_pcweb_someprice_detail_dj', []);
                        queryResultLoadingAndInfo(QueryBusinessDj, loading, {relatedid}).then((res) => {
                            tableList.value = res;
                        });
                        break;
                    case 3: // 交收记录
                        registerColumn('table_pcweb_someprice_detail_js', []);
                        queryResultLoadingAndInfo(QueryBusinessJs, loading, {relatedid}).then((res) => {
                            tableList.value = res;
                        });
                        break;
                    case 4: //款项记录
                        registerColumn('table_pcweb_someprice_detail_kx', []);
                        queryResultLoadingAndInfo(QueryBusinessKx, loading, {relatedid}).then((res) => {
                            tableList.value = res;
                        });
                        break;
                    case 5: // 发票记录
                        registerColumn('table_pcweb_someprice_detail_fp', []);
                        queryResultLoadingAndInfo(QueryBusinessFp, loading, {relatedid}).then((res) => {
                            tableList.value = res;
                        });
                        break;
                    case 6: // 入库记录
                        registerColumn('table_pcweb_someprice_detail_stock', []);
                        queryResultLoadingAndInfo(QueryAreaStockApply, loading, {
                            spotcontractid: relatedid,
                            inouttype: '1,3',
                        }).then((res) => {
                            tableList.value = res;
                        });
                        break;
                    case 7: // 出库记录
                        registerColumn('table_pcweb_someprice_detail_stock_out', []);
                        queryResultLoadingAndInfo(QueryAreaStockApply, loading, {
                            spotcontractid: relatedid,
                            inouttype: '2,4',
                        }).then((res) => {
                            tableList.value = res;
                        });
                        break;
                    case 8: //// 变更记录
                        registerColumn('table_pcweb_someprice_detail_change', []);
                        queryResultLoadingAndInfo(QueryChangeLog, loading, {RelatedId: relatedid}).then((res) => {
                            tableList.value = res;
                        });
                        break;
                }
            }

            return {
                visible,
                cancel,
                loading,
                maskClosableFlag: false,
                activeKey,
                columns,
                tableList,
                tabList,
                tabClick,
                getApplyStatusName,
                invoiceStatusName,
                getPlanContractType,
                InOutTypeName,
            };
        },
    });
</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
>;