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(false)" width="890px">
    <template #footer>
      <a-button key="submit" type="primary" :loading="loading" @click="cancel(false)">关闭</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>

        <!-- 套期类型 -->
        <template #hedgedtype="{ text }">
          <span>{{ getHedgedTypeName(text) }}</span>
        </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 { queryErmcp2HedgedItemLink } from '@/services/go/ermcp/hedgedItem';
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 { getHedgedTypeName } from '@/@next/constants/enum/hedgedType'

export default defineComponent({
  name: 'spot-contract-detail',
  components: { InfoDetail },
  emits: ['cancel', 'update'],
  props: {
    selectedRow: {
      type: Object as PropType<Ermcp3ContractRsp>,
      default: {},
    },
  },
  setup(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 2: // 点价记录
          registerColumn('table_pcweb_someprice_detail_dj');
          queryResultLoadingAndInfo(QueryBusinessDj, loading, { relatedid: spotcontractid }).then((res) => {
            tableList.value = res;
          });
          break;
        case 3: // 交收记录
          registerColumn('table_pcweb_someprice_detail_js');
          queryResultLoadingAndInfo(QueryBusinessJs, loading, { relatedid: spotcontractid }).then((res) => {
            tableList.value = res;
          });
          break;
        case 4: //款项记录
          registerColumn('table_pcweb_someprice_detail_kx');
          queryResultLoadingAndInfo(QueryBusinessKx, loading, { relatedid: spotcontractid }).then((res) => {
            tableList.value = res;
          });
          break;
        case 5: // 发票记录
          registerColumn('table_pcweb_someprice_detail_fp');
          queryResultLoadingAndInfo(QueryBusinessFp, loading, { relatedid: 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,
            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: // 关联记录
          registerColumn('table_pcweb_someprice_detail_link');
          queryResultLoadingAndInfo(queryErmcp2HedgedItemLink, loading, { spotcontractid }).then((res) => {
            tableList.value = res;
          });
          break;
      }
    }

    return {
      visible,
      cancel,
      loading,
      maskClosableFlag: false,
      activeKey,
      columns,
      tableList,
      tabList,
      tabClick,
      getApplyStatusName,
      invoiceStatusName,
      getPlanContractType,
      InOutTypeName,
      kxtypeName,
      formatValue,
      getReceiptName,
      getHedgedTypeName,
      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>