erp_fans/src/components/contractCom/contractDetails.vue

<template>
  <div style="background: #fff; padding: 0 20px">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" @tab-change="handleChange" stretch>
      <el-tab-pane label="销售订单" name="first"></el-tab-pane>
      <el-tab-pane label="采购订单" name="second"></el-tab-pane>
      <el-tab-pane label="交易明细" name="third"></el-tab-pane>
      <el-tab-pane label="外销跟单" name="four"> </el-tab-pane>
      <el-tab-pane label="预算表" name="five" v-if="isShowSalesFinancemanArrange">
      </el-tab-pane>
      <el-tab-pane label="结算表" name="six" v-if="isShowSalesFinancemanArrange">
      </el-tab-pane>
      <el-tab-pane label="单证" name="seven" v-if="isShowSalesFinancemanArrange"></el-tab-pane>
    </el-tabs>
    <div class="content-box" v-if="['first', 'second'].includes(activeName)">
      <div class="left">
        <!-- <div style="text-align: center; margin-bottom: 10px" v-if="activeName === 'first'">
          <el-button type="primary" @click="openPDF(currentItem)">查看PDF</el-button>
        </div> -->
        <div v-for="i in leftList" :key="i.id" class="left-item" :style="{ color: currentItem.id === i.id ? '#409eff' : '' }"
             @click="handleItemClick(i)">
          <div v-if="activeName === 'first'">{{ i.code }}</div>
          <div v-if="activeName === 'second'">
            {{ i.code }}
          </div>
        </div>
      </div>
      <div class="center"></div>
      <div class="right">
        <div v-if="leftList && leftList.length > 0">
          <!-- <div style="text-align: right; margin-bottom: 20px" v-if="activeName === 'first'">
            <el-button type="primary" @click="openPDF(currentItem)">查看PDF</el-button>
          </div> -->
          <div v-if="activeName === 'first'">
            <!-- <ContractPDFOne :rowData="rowData"></ContractPDFOne> -->
            <ApprovalDetails :query="approvalData"></ApprovalDetails>
          </div>
          <div v-if="activeName === 'second'">
            <!-- <PurchasePDFOne :rowData="rowDataOne"></PurchasePDFOne> -->
            <PurchasePDFOneNew :rowData="rowDataOne"></PurchasePDFOneNew>
          </div>
        </div>
        <div v-else style="padding-left: 43.5%">暂无数据</div>
      </div>
    </div>
    <div v-if="activeName === 'third'">
      <byTable :hidePagination="true" :hideSearch="true" :source="tableData" :config="config" highlight-current-row :action-list="[]">
        <template #amount="{ item }">
          <div>{{ item.currency }} {{ moneyFormat(item.amount, 2) }}</div>
        </template>
        <template #accountManagementName="{ item }">
          <div>
            {{ item.accountManagementName }} （{{
              item.accountManagementOpening
            }}）
          </div>
        </template>
      </byTable>
    </div>
    <div v-if="activeName === 'four'">
      <ExportTracking> </ExportTracking>
    </div>
    <div v-if="activeName === 'five'">
      <ProfitBudgetEHSD> </ProfitBudgetEHSD>
    </div>
    <div v-if="activeName === 'six'">
      <ProfitSettlementEHSD> </ProfitSettlementEHSD>
    </div>
    <div v-if="activeName === 'seven'">
      <Document> </Document>
    </div>

    <el-dialog title="PDF查看" v-if="pdfDialog" v-model="pdfDialog" width="920">
      <!-- <ContractPDFOne :rowData="rowData"></ContractPDFOne> -->
      <ContractPDFOneNew :rowData="rowData" ref="PdfDom"></ContractPDFOneNew>
      <template #footer>
        <el-button @click="pdfDialog = false" size="default">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup  >
import PurchasePDFOne from "@/components/PDF/purchasePDFOne.vue";
import PurchasePDFOneNew from "@/components/PDF/purchasePDFOneNew.vue";
import ContractPDFOne from "@/components/PDF/contractPDFOne.vue";
import ContractPDFOneNew from "@/components/PDF/contractPDFOneNew.vue";
import ApprovalDetails from "@/views/process/processApproval/index.vue";
import ExportTracking from "@/components/detailCom/exportTracking/index.vue";
import ProfitBudgetEHSD from "@/components/detailCom/profitBudgetEHSD/index.vue";
import ProfitSettlementEHSD from "@/components/detailCom/profitSettlementEHSD/index.vue";
import Document from "@/components/detailCom/document/index.vue";
import byTable from "@/components/byTable/index";
import useUserStore from "@/store/modules/user";
const userInfo = useUserStore();
const { proxy } = getCurrentInstance();
import { useRoute } from "vue-router";
const route = useRoute();
const props = defineProps({
  contractId: String,
});
const activeName = ref("first");
const currentItem = ref({});
const approvalData = ref({});
const rowData = ref({});
const rowDataOne = ref({});
const leftList = ref([]);
const contractDataList = ref([]);
const purchaseDataList = ref([]);
const tableData = ref([]);
const transactionType = ref([
  {
    label: "请款",
    value: "1",
  },
  {
    label: "采购付款",
    value: "20",
  },
  {
    label: "到账认领",
    value: "30",
  },
]);
const config = computed(() => {
  return [
    {
      attrs: {
        label: "交易时间",
        prop: "createTime",
        width: 155,
      },
    },
    {
      attrs: {
        label: "交易类型",
        prop: "type",
        width: 80,
      },
      render(type) {
        return proxy.dictValueLabel(type, transactionType.value);
      },
    },
    {
      attrs: {
        label: "交易金额",
        prop: "amount",
        slot: "amount",
        width: 130,
      },
    },
    {
      attrs: {
        label: "摘要",
        prop: "remarks",
      },
    },
    {
      attrs: {
        label: "资金账户",
        prop: "accountManagementName",
        slot: "accountManagementName",
      },
    },
    {
      attrs: {
        label: "对方账户",
        prop: "name",
        width: 120,
      },
    },
  ];
});
const handleClick = () => {};

const handleItemClick = (item) => {
  currentItem.value = item;
  if (activeName.value === "first") {
    // rowData.value = {
    //   id: item.id,
    // };
    approvalData.value = {
      flowKey: "contract_flow",
      id: currentItem.value.flowId,
      processType: 20,
      random: proxy.random(),
      flowName: "销售订单详情",

      businessId: currentItem.value.id,
    };
  } else if (activeName.value === "second") {
    rowDataOne.value = {
      id: item.id,
    };
  }
};
const pdfDialog = ref(false);
const openPDF = (row) => {
  rowData.value = {
    id: row.id,
  };
  pdfDialog.value = true;
};

const pushProcessApproval = (row) => {
  proxy.$router.push({
    path: "/platform_manage/process/processApproval",
    query: {
      flowKey: "contract_flow",
      id: row.flowId,
      processType: 20,
      random: proxy.random(),
      flowName: "销售订单详情",

      businessId: row.id,
    },
  });
  return;
};

// const pushProcessApproval = (row) => {
//   // 新页面打开方式
//   const page = proxy.$router.resolve({
//     path: "/platform_manage/process/processApproval",
//     query: {
//       flowKey: "contract_flow",
//       id: row.flowId,
//       processType: 20,
//       random: proxy.random(),
//       flowName: "销售订单详情",
//
//       businessId: row.id,
//     },
//   });
//   window.open(page.href, "_blank");
// };

const handleChange = (val) => {
  if (["first", "second"].includes(val)) {
    if (val === "first") {
      leftList.value = contractDataList.value;
    }
    if (val === "second") {
      leftList.value = purchaseDataList.value;
    }
    if (leftList.value && leftList.value.length > 0) {
      handleItemClick(leftList.value[0]);
    }
  }
};
const getDetailsData = (id) => {
  proxy.post("/contract/getVersionList", { id: id }).then((res) => {
    contractDataList.value = res;
    leftList.value = contractDataList.value;
    if (contractDataList.value && contractDataList.value.length > 0) {
      handleItemClick(contractDataList.value[0]);
    }
  });
  proxy
    .post("/contract/getPurchaseListByContractId", { id: id })
    .then((res) => {
      purchaseDataList.value = res;
    });

  proxy
    .post("/contract/getAccountRunningWaterByContractId", {
      id: id,
    })
    .then((res) => {
      tableData.value = res;
    });
};
if (props.contractId) {
  getDetailsData(props.contractId);
}
if (route.query.currentContractId) {
  getDetailsData(route.query.currentContractId);
}
const isShowSalesFinancemanArrange = ref(false);
const checkShow = () => {
  // 当前账号角色如果是业务总监、总经理、业务员、财务，则可查看
  if (
    userInfo.roles.includes("salesDirector") ||
    userInfo.roles.includes("ceo") ||
    userInfo.roles.includes("financeOfficer")
  ) {
    isShowSalesFinancemanArrange.value = true;
  }
};
checkShow();
</script>

<style lang="scss" scoped>
.content-box {
  display: flex;
  font-size: 14px;
  .left {
    width: 150px;
    // background: #ccc;
    .left-item {
      height: 30px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      font-size: 14px;
    }
  }
  .center {
    // height: calc(100% + 10px);
    margin-top: -15px;
    width: 20px;
    background-color: #f0f2f5;
  }
  .right {
    width: calc(100% - 150px - 20px);
    padding-left: 10px;
  }
}
.baseRow {
  min-height: 24px;
  border-top: 1px solid black;
  border-left: 1px solid black;
}
.contentRow {
  border-right: 1px solid black;
  line-height: 24px;
  padding-left: 4px;
}
</style>