canrd-outside / order-erp-front · Files

<!-- <template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="生产对账单"
    width="60%"
    :bodyStyle="{ height: '500px' }"
    @ok="handleOk"
  >
  </BasicModal>
</template> -->
<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="内部生产净利润分析表"
    width="60%"
    :bodyStyle="{ height: '360px' }"
    @visible-change="handleShow"
    @ok="handleOk"
    okText="导出"
  >
    <template #appendFooter>
      <a-button style="background-color: #1890ff; color: white" @click="handleCalculate"
        >计算</a-button
      >
    </template>
    <table
      style="
        width: 100%;
        border-collapse: collapse;
        text-align: center;
        border: 1px solid black;
        font-size: 16px;
      "
    >
      <thead>
        <!-- <tr>
          <th colspan="4" style="border: 1px solid black">净利润分析表</th>
        </tr> -->
      </thead>
      <tbody>
        <tr>
          <td style="border: 1px solid black; width: 20%">项目号</td>
          <td style="border: 1px solid black; width: 20%">{{ projectNo }}</td>
          <td style="border: 1px solid black; width: 20%">开始时间</td>
          <td style="border: 1px solid black; width: 20%">结束时间</td>
          <td style="border: 1px solid black; width: 20%">生产持续时间</td>
        </tr>
        <tr>
          <td style="border: 1px solid black; width: 20%"></td>
          <td style="border: 1px solid black; width: 20%">项目开发时间</td>
          <td style="border: 1px solid black; width: 20%">
            <input type="date" v-model="projectStartTime" style="width: 100%" />
          </td>
          <td style="border: 1px solid black; width: 20%">
            <input type="date" v-model="projectEndTime" style="width: 100%" />
          </td>
          <td style="border: 1px solid black; width: 20%">{{ projectDays }}</td>
        </tr>
        <tr>
          <td style="border: 1px solid black; width: 20%">客户编码</td>
          <td style="border: 1px solid black; width: 20%">{{ customerCode }}</td>
          <td style="border: 1px solid black; width: 20%">明细</td>
          <td style="border: 1px solid black; width: 20%">金额</td>
          <td style="border: 1px solid black; width: 20%">订单数量</td>
        </tr>
        <tr>
          <td style="border: 1px solid black; width: 40%" colspan="2">生产科总价合计</td>
          <td style="border: 1px solid black; width: 20%">¥{{ productionDepartmentTotalPrice }}</td>
          <td style="border: 1px solid black; width: 20%">¥{{ sumMoney }}</td>
          <td style="border: 1px solid black; width: 20%">{{ sumCount }}</td>
        </tr>
        <tr>
          <td style="border: 1px solid black; width: 40%" colspan="2">生产科预算金额</td>
          <td style="border: 1px solid black; width: 20%"
            ><a-input v-model:value="productionDepartmentPredictPrice" placeholder="请输入"
          /></td>
          <td style="border: 1px solid black; width: 20%">预算占比</td>
          <td style="border: 1px solid black; width: 20%">预算占比与实际占比差</td>
        </tr>
        <tr>
          <td style="border: 1px solid black; width: 40%" colspan="2">实际发生费用</td>
          <td style="border: 1px solid black; width: 20%"
            ><a-input v-model:value="productionActualPrice" placeholder="请输入"
          /></td>
          <td style="border: 1px solid black; width: 20%">{{ predictRatio }}</td>
          <td style="border: 1px solid black; width: 20%">{{ predictRatioDeduct }}</td>
        </tr>
        <tr>
          <td style="border: 1px solid black; width: 40%" colspan="2">内部生产毛利润</td>
          <td style="border: 1px solid black; width: 20%">¥{{ grossProfit }}</td>
          <td style="border: 1px solid black; width: 20%"></td>
          <td style="border: 1px solid black; width: 20%"></td>
        </tr>
        <tr>
          <td style="border: 1px solid black; width: 40%" colspan="2">内部生产固定成本</td>
          <td style="border: 1px solid black; width: 20%">¥{{ innerProduceFixProfit }}</td>
          <td style="border: 1px solid black; width: 20%"></td>
          <td style="border: 1px solid black; width: 20%"></td>
        </tr>
        <tr>
          <td style="border: 1px solid black; width: 40%" colspan="2">内部生产提成</td>
          <td style="border: 1px solid black; width: 20%">¥{{ innerProduceTotalPrice }}</td>
          <td style="border: 1px solid black; width: 20%"></td>
          <td style="border: 1px solid black; width: 20%"></td>
        </tr>
        <tr>
          <td style="border: 1px solid black; width: 40%" colspan="2">内部生产净利润</td>
          <td style="border: 1px solid black; width: 20%">¥{{ innerProduceTotalProfit }}</td>
          <td style="border: 1px solid black; width: 20%"></td>
          <td style="border: 1px solid black; width: 20%"></td>
        </tr>
      </tbody>
    </table>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { computed, ref } from 'vue';
  import { payDate, checkCreate } from '@/api/project/invoice';
  import type { Dayjs } from 'dayjs';
  import { calculateInnerProfitRatio, exportInnerProfitRatio } from '@/api/project/order';
  import axios from 'axios';

  const Input1 = ref('');
  const Input2 = ref();
  const res = ref();
  const customerCode = ref(); // 客户编码

  const grossProfit = ref(); // 内部生产毛利润
  const innerProduceFixProfit = ref(); // 内部生产固定成本
  const innerProduceTotalPrice = ref(); // 内部生产提成
  const innerProduceTotalProfit = ref(); // 内部生产净利润
  const predictRatio = ref(); // 预算占比
  const predictRatioDeduct = ref(''); // 预算占比差
  const productionActualPrice = ref(''); // 实际发生费用
  const productionDepartmentPredictPrice = ref(); // 生产科预算金额
  const productionDepartmentTotalPrice = ref(0); // 生产科总价合计
  const projectDays = ref(); // 生产持续时间
  const sumCount = ref(0);
  const sumMoney = ref(0);

  const projectEndTime = ref(); // 项目开发结束时间
  const projectNo = ref(); // 项目号
  const projectStartTime = ref(); // 项目开发开始时间
  const filteredItems = ref();
  const ids = ref();

  const [register, { closeModal }] = useModalInner(async (data) => {
    console.log(data, '5656datapro');
    res.value = data.data;
    filteredItems.value = data.filteredItems;
    filteredItems.value.forEach((item) => {
      console.log(item);
      if (item?.profitAnalysisInfo == undefined) {
        item.profitAnalysisInfo = { productionDepartmentTotalPrice: 0 }; // 这里初始化
      }
      sumMoney.value += item?.profitAnalysisInfo?.productionDepartmentTotalPrice;
      sumCount.value += item.orderCount;
    });
    sumMoney.value = sumMoney.value.toFixed(2);
    customerCode.value = data.customerCode[0][0];
    const extractedValues = ref<string[]>(data.projectNo.map((item) => item[0]));
    projectNo.value = extractedValues.value.join(',');
    ids.value = data.data;
    console.log(customerCode.value, '5656customerCode.value');
    console.log(Input2.value, 565656);
    filteredItems.value = data.filteredItems;
  });
  async function handleOk() {
    axios
      .post(
        '/basic-api/order/erp/calculate_profit/inner_profit_ratio_export',
        {
          customerCode: customerCode.value,
          projectNo: projectNo.value,
          ids: ids.value,
          projectStartTime: projectStartTime.value,
          projectEndTime: projectEndTime.value,
          productionDepartmentPredictPrice: productionDepartmentPredictPrice.value,
          productionActualPrice: productionActualPrice.value,
        },
        {
          responseType: 'blob', // 设置响应类型为 'blob'
        },
      )
      .then((response) => {
        // 创建一个 Blob 对象来保存二进制数据
        const blob = new Blob([response.data], { type: 'application/octet-stream' });
        const getFormattedDate = (): string => {
          const date = new Date();

          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');

          const hours = String(date.getHours()).padStart(2, '0');
          const minutes = String(date.getMinutes()).padStart(2, '0');
          const seconds = String(date.getSeconds()).padStart(2, '0');

          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        };
        const date = getFormattedDate();
        // 创建一个链接元素用于下载
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = `内部生产净利润分析${date}.xlsx`; // 你可以为文件命名
        document.body.appendChild(link);
        link.click(); // 自动点击链接，触发下载
        console.log(link, 5656);
        document.body.removeChild(link); // 下载完成后移除链接
      })
      .catch((error) => {
        console.error(error);
      });
    closeModal();
  }
  // function handleShow(visible: boolean) {
  //   if (visible) {
  //     projectStartTime.value = null;
  //     projectEndTime.value = null;
  //     productionDepartmentPredictPrice.value = null;
  //     productionActualPrice.value = null;
  //     projectNo.value = null;
  //     ids.value = null;
  //   }
  // }
  function handleShow(visible: boolean) {
    if (visible) {
      projectStartTime.value = null; // 项目开发开始时间
      projectEndTime.value = null; // 项目开发结束时间
      productionDepartmentPredictPrice.value = null; // 生产科预算金额
      productionActualPrice.value = null; // 实际发生费用
      projectNo.value = null; // 项目号
      ids.value = null; // 假设存在的 ID 列表

      // 新增的数据
      Input1.value = ''; // 输入框 1
      Input2.value = null; // 输入框 2
      res.value = null; // 结果
      customerCode.value = null; // 客户编码
      grossProfit.value = 0; // 内部生产毛利润
      innerProduceFixProfit.value = 0; // 内部生产固定成本
      innerProduceTotalPrice.value = 0; // 内部生产提成
      innerProduceTotalProfit.value = 0; // 内部生产净利润
      predictRatio.value = ''; // 预算占比
      predictRatioDeduct.value = ''; // 预算占比差
      productionDepartmentTotalPrice.value = 0; // 生产科总价合计
      projectDays.value = null; // 生产持续时间
      sumCount.value = 0; // 总计数量
      sumMoney.value = 0; // 总金额
      filteredItems.value = null; // 筛选后的项目
    }
  }
  function formatDateTime(dateTime: string): string {
    return dateTime.split('T')[0];
  }

  async function handleCalculate() {
    projectStartTime.value = formatDateTime(projectStartTime.value);
    projectEndTime.value = formatDateTime(projectEndTime.value);
    const res = await calculateInnerProfitRatio({
      customerCode: customerCode.value,
      projectNo: projectNo.value,
      ids: ids.value,
      projectStartTime: projectStartTime.value,
      projectEndTime: projectEndTime.value,
      productionDepartmentPredictPrice: productionDepartmentPredictPrice.value,
      productionActualPrice: productionActualPrice.value,
    });
    console.log(res, '5656resproductprofit');
    grossProfit.value = res.grossProfit.toFixed(2);
    innerProduceFixProfit.value = res.innerProduceFixProfit.toFixed(2);
    innerProduceTotalPrice.value = res.innerProduceTotalPrice.toFixed(2);
    innerProduceTotalProfit.value = res.innerProduceTotalProfit.toFixed(2);
    // predictRatio.value = res.predictRatio;
    predictRatio.value = `${res.predictRatio}%`;
    productionActualPrice.value = res.productionActualPrice.toFixed(2);
    productionDepartmentPredictPrice.value = res.productionDepartmentPredictPrice.toFixed(2);
    productionDepartmentTotalPrice.value = res.productionDepartmentTotalPrice.toFixed(2);
    projectDays.value = res.projectDays;
    // predictRatioDeduct.value = res.predictAndActualRatio;
    predictRatioDeduct.value = `${res.predictAndActualRatio}%`;
    console.log(filteredItems.value, '5656filteredItems');
    // filteredItems.value.forEach((item) => {
    //   sumMoney.value += item.profitAnalysisInfo.productionDepartmentTotalPrice;
    //   sumCount.value += item.orderCount;
    // });
    // console.log(sumMoney.value, '5656filteredItems', sumCount.value);
  }
</script>
<style scoped>
  .divAll {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>