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="false" @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>

        <!-- 审核状态 -->
        <template #applystatus="{ text }">
          <a>{{ getApplyStatusName(text) }}</a>
        </template>

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

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

        <!-- 出入库类型 -->
        <template #inouttype="{ text }">
          <a>{{ InOutTypeName(text) }}</a>
        </template>

        <!-- 款项类型 -->
        <template #kxtype="{ record }">
          <a>{{ stateName(record.deductamount, record.contracttype) }}</a>
        </template>

        <!-- 金额-->
        <template #payamount="{ text, record }">
          <span>{{ formatValue(record.kxtype === 2 ? record.deductamount : text) }}</span>
        </template>

        <!-- 调整付保证金-->
        <template #addmargin="{ record }">
          <span>{{ formatValue(record.addmargin === undefined || '' ? record.decmargin : record.addmargin) }}</span>
        </template>

        <!-- 交收量 -->
        <template #reckonrealqty="{ record }">
          <span>{{ formatValue(record.reckonrealqty) }}</span>
        </template>

        <!-- 其他费用 -->
        <template #reckonotheramount="{ record }">
          <span>{{ formatValue(record.reckonotheramount) }}</span>
        </template>

        <!-- 调整金额 -->
        <template #reckonadjustamount="{ record }">
          <span>{{ formatValue(record.reckonadjustamount) }}</span>
        </template>

        <!-- 申请人 -->
        <template #applyname="{ record }">
          <span>{{ formatValue(record.applyname) }}</span>
        </template>
        <template #warehousename="{record}">
          {{record.warehousecode}}
        </template>

        <!-- 款项记录 款项类型为退款  则金额使用deductamount-->
      </a-table>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
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 { QueryPaTradeLinkDetail } from '@/services/go/ermcp/patrade-link';
import InfoDetail from '../infoDetail/index.vue';
import { getApplyStatusName, getReceiptName } from '@/common/constants/enumsName';
import { getTableColumns } from '@/common/setup/table';
import { invoiceStatusName, stateName } from '@/views/manage/finance-review/setup';
import { getPlanContractType } from '@/views/business/plan/setup';
import { InOutTypeName } from '@/views/manage/inventory-review/setup';
import { kxtypeName } from '@/views/manage/finance-review/setup';
import { _closeModal } from '@/common/setup/modal/modal';
import { formatValue } from '@/common/methods';
import { columnsPaTradeLink } from './setup';
import moment from 'moment';

export default defineComponent({
    name: 'spot-contract-detail',
    components: { InfoDetail },
    emits: ['cancel', 'update'],
    props: {
        selectedRow: {
            type: Object as PropType<Ermcp3ContractRsp>,
            default: {},
        },
    },
    setup: function (props, context) {
        const { visible, cancel } = _closeModal(context);
        const tabList = ref<{ key: number; name: string }[]>([]);

        const activeKey = ref<number>(1);

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

        // 审核拒绝和未提交不显示后面的选项
        tabList.value = [0, 4, 6].includes(props.selectedRow.contracctstatus)
            ? [{ key: 1, name: '合同详情' }]
            : [
                  { key: 1, name: '合同详情' },
                  { key: 2, name: '点价记录' },
                  { key: 3, name: '交收记录' },
                  { key: 4, name: '款项记录' },
                  { key: 5, name: '发票记录' },
                  { key: 6, name: props.selectedRow.contracttype === 1 ? '入库记录' : '出库记录' },
                  { key: 7, name: '变更记录' },
                  { key: 8, name: '关联记录' },
              ];
        activeKey.value = 1;
        function tabClick() {
            const { spotcontractid, contracttype } = props.selectedRow;
            switch (activeKey.value) {
                case 1:
                    break;
                case 2: // 点价记录
                    registerColumn('table_pcweb_someprice_detail_dj', []);
                    queryResultLoadingAndInfo(QueryBusinessDj, loading, { spotcontractid }).then((res) => {
                        console.log(res, 'hhh');
                        tableList.value = res;
                    });
                    break;
                case 3: // 交收记录
                    registerColumn('table_pcweb_someprice_detail_js', []);
                    queryResultLoadingAndInfo(QueryBusinessJs, loading, { spotcontractid }).then((res) => {
                        tableList.value = res;
                    });
                    break;
                case 4: //款项记录
                    registerColumn('table_pcweb_someprice_detail_kx', []);
                    queryResultLoadingAndInfo(QueryBusinessKx, loading, { spotcontractid }).then((res) => {
                        tableList.value = res;
                    });
                    break;
                case 5: // 发票记录
                    registerColumn('table_pcweb_someprice_detail_fp', []);
                    queryResultLoadingAndInfo(QueryBusinessFp, loading, { spotcontractid }).then((res) => {
                        tableList.value = res;
                    });
                    break;
                case 6: // 出入库记录
                    const inouttype = contracttype === 1 ? '5' : '6';
                    if (contracttype === 1) {
                        registerColumn('table_pcweb_someprice_detail_stock', []);
                    } else {
                        registerColumn('table_pcweb_someprice_detail_stock_out', []);
                    }
                    queryResultLoadingAndInfo(QueryAreaStockApply, loading, {
                        spotcontractid: spotcontractid,
                        inouttype,
                    }).then((res) => {
                        tableList.value = res;
                    });
                    break;
                case 7: //// 变更记录
                    registerColumn('table_pcweb_someprice_detail_change', []);
                    queryResultLoadingAndInfo(QueryChangeLog, loading, { RelatedId: spotcontractid }).then((res) => {
                        tableList.value = res;
                    });
                    break;
                case 8: //// 关联记录
                    columns.value.length = 0;
                    columns.value.push(...columnsPaTradeLink);
                    queryResultLoadingAndInfo(QueryPaTradeLinkDetail, loading).then((res) => {
                        // 关联日期降序
                        tableList.value = res.sort((a, b) => moment(b.tradetime).valueOf() - moment(a.tradetime).valueOf());
                    });
                    break;
            }
        }

        return {
            visible,
            cancel,
            loading,
            maskClosableFlag: false,
            activeKey,
            columns,
            tableList,
            tabList,
            tabClick,
            getApplyStatusName,
            invoiceStatusName,
            getPlanContractType,
            InOutTypeName,
            kxtypeName,
            formatValue,
            getReceiptName,
            stateName,
        };
    },
});
</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;
                }
                .anticon {
                    color: @m-grey2;
                }
                .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: @m-grey2;
                                padding: 0;
                                line-height: 45px;
                            }

                            .ant-tabs-tab-active.ant-tabs-tab {
                                color: @m-blue0;
                            }

                            .ant-tabs-ink-bar {
                                width: 70px !important;
                                background: @m-blue0;
                                .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
>;