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>{{ getPlanContractType(text) }}</a>
        </template>

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

        <!-- 款项类型 -->
        <template #kxtype="{ text }">
          <a>{{ kxtypeName(text) }}</a>
        </template>

        <!-- 金额-->
        <template #payamount= "{ text, record }">
            <a>{{ record.kxtype === 2 ? record.deductamount : text }}</a>
        </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 { ErmcpLoginUserEx } from '@/services/go/ermcp/account/interface';
import InfoDetail from '../infoDetail/index.vue';
import { getApplyStatusName } from '@/common/constants/enumsName';
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';
import { kxtypeName } from '@/views/manage/finance-review/setup';
import { _closeModal } from '@/common/setup/modal/modal';

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: '合同详情' }]
            : props.selectedRow.contracttype === 1
            ? [
                  { key: 1, name: '合同详情' },
                  { key: 2, name: '点价记录' },
                  { key: 3, name: '交收记录' },
                  { key: 4, name: '款项记录' },
                  { key: 5, name: '发票记录' },
                  { key: 6, name: '入库记录' },
                  { key: 8, name: '变更记录' },
              ]
            : [
                  { key: 1, name: '合同详情' },
                  { key: 2, name: '点价记录' },
                  { key: 3, name: '交收记录' },
                  { key: 4, name: '款项记录' },
                  { key: 5, name: '发票记录' },
                  { key: 7, name: '出库记录' },
                  { key: 8, name: '变更记录' },
              ];
        activeKey.value = 1;
        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,
            kxtypeName,
        };
    },
});
</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
>;