canrd-outside / order-erp-front · Files

<template>
  <BasicTable @register="registerTable" className="p-0">
    <template #form-custom> custom-slot </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'picUrl'">
        <img
          :width="50"
          :height="50"

          :src="record?.producePaymentCheckBillFieldVO?.smallPicUrl"
          @click="handlePreview(record?.producePaymentCheckBillFieldVO?.picUrl)"

        />
      </template>
      <template v-if="column.key === 'action'">
        <TableAction

          v-if="!isApproved"

          :actions="[
            {

              label: '审核',

              // icon: 'ic:outline-delete-outline',
              onClick: handleDetail.bind(null, record),
            },
          ]"
        />

        <TableAction
          v-if="isApproved"
          :actions="[
            {
              label: '详情',
              // icon: 'ic:outline-delete-outline',
              onClick: handleDetail.bind(null, record),
            },
          ]"
        />

      </template>
    </template>
  </BasicTable>

  <!-- :showFooter="!isApproved && role === ROLE.ADMIN" -->

  <BasicModal

    :formFooter="(!isApproved && role === ROLE.ADMIN) || showInvoice"

    @register="registerModal"
    title="申请信息"
    okText="通过"

    width="900px"

    @ok="handleTrue"

    @visible-change="handleShow"

    :showCancelBtn="(!isApproved && role === ROLE.ADMIN) || (showInvoice && role === ROLE.FINANCE)"
    :showOkBtn="(!isApproved && role === ROLE.ADMIN) || (showInvoice && role === ROLE.FINANCE)"

  >

    <!-- <Description

      v-if="!showInvoice"

      class="mt-4"
      layout="vertical"
      :collapseOptions="{ canExpand: true, helpMessage: 'help me' }"
      :column="2"
      :data="mockData"
      :schema="schema"

    /> -->
    <table
      v-if="!showInvoice"
      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 colspan="7" style="text-align: center; font-weight: bold; font-size: 24px"
            >付款单</td
          ></tr
        >
        <tr>
          <td style="border: 1px solid black; width: 14%">生产科对账单号</td>
          <td style="border: 1px solid black; width: 14%">实际应付金额</td>
          <td style="border: 1px solid black; width: 14%">扣款金额</td>
          <td style="border: 1px solid black; width: 14%">实际付款金额</td>
          <td style="border: 1px solid black; width: 14%">未付金额</td>
          <td style="border: 1px solid black; width: 14%">必须付款日期</td>
          <td style="border: 1px solid black; width: 14%">实际付款日期</td>
        </tr>
        <tr>
          <td style="border: 1px solid black; width: 14%">{{ checkNo }}</td>
          <td style="border: 1px solid black; width: 14%">¥{{ actualPayedAmount }}</td>
          <td style="border: 1px solid black; width: 14%">¥{{ deductAmount }}</td>
          <td style="border: 1px solid black; width: 14%">¥{{ totalActualPayedAmount }}</td>
          <td style="border: 1px solid black; width: 14%">¥{{ unPayedAmount }}</td>
          <td style="border: 1px solid black; width: 14%">{{ payedDate }}</td>
          <td style="border: 1px solid black; width: 14%">{{ actualPayedDate }}</td>
        </tr>
      </tbody>
    </table>

    <a v-if="showInvoice" @click="openPic(mockData.invoiceUrl)" rel="noopener noreferrer">{{

      mockData.invoiceName
    }}</a>
    <!-- <a-list item-layout="horizontal" :data-source="itemArray">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta>
            <template #title>
              <a :href="item.url" target="_blank" rel="noopener noreferrer">{{ item.name }}</a>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list> -->

    <template #appendFooter>

      <a-button

        v-if="

          (!isApproved && (role === ROLE.ADMIN || role === ROLE.FINANCE)) ||

          (!isApproved && showInvoice && role === ROLE.FINANCE)

        "

        @click="handleFalse"
      >
        不通过</a-button
      >
      <a-button

        v-if="
          (isApproved && role === ROLE.ADMIN) ||
          (isApproved && showInvoice && role === ROLE.FINANCE)
        "

        @click="handleFalse"
      >
        驳回重填</a-button
      >

      <a-button @click="handleExport"> 导出</a-button>

    </template>
  </BasicModal>
  <MsgModal v-if="msgVisible" @msg-modal-close="handleMsgModalClose" />
</template>
<script lang="ts">
  import MsgModal from './MsgModal.vue';
  import { computed, defineComponent, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { BasicModal, useModal } from '/@/components/Modal';

  import { getExportReceipt } from '@/api/project/invoice';
  import { view } from '@/utils/pdfShow';
  import axios from 'axios';

  import { approveAuditApi, getApprovedListApi, getWaitListApi } from '/@/api/project/approve';
  import { FIELDS_BASE_INFO, FIELDS_PROFIT_INFO, FIELDS_REPORT_INFO } from '../order/tableData';
  import { ROLE } from '../order//type.d';
  import { useUserStoreWithOut } from '/@/store/modules/user';
  import BaseInfo from './BaseInfo.vue';
  import { createImgPreview } from '/@/components/Preview';
  import { getFormConfig } from './data';
  import { Description, DescItem, useDescription } from '@/components/Description';

  const userStore = useUserStoreWithOut();

  export default defineComponent({
    components: {
      BasicTable,
      BasicModal,
      TableAction,
      Description,
      BaseInfo,
      MsgModal,
    },
    props: {
      isApproved: { type: Boolean },
    },
    setup(props) {
      // visible 用于msgModal显示隐藏
      const msgVisible = ref(false);
      const checkedKeys = ref<Array<string | number>>([]);
      const currentKey = ref('1');
      const [registerModal, { openModal, closeModal }] = useModal();
      const fieldInfos = ref({});
      const baseInfos = ref({});
      const id = ref('');

      const showInvoice = ref(false);

      const mockData = ref();

      interface Item {
        name: string;
        url: string;
      }
      const itemArray = ref<Item[]>([]);

      const actualPayCalculate = ref(0);

      const checkNo = ref();
      const actualPayedAmount = ref(); // 生产科实际应付金额汇总
      const payedDate = ref(); // 生产科付款日期
      const actualPayedDate = ref(); // 实际付款日期
      const unPayedAmount = ref(); // 未付金额
      const totalActualPayedAmount = ref(); // 实际付款金额汇总
      const deductAmount = ref(); // 生产科扣款金额汇总

      const projectNo = ref(); // 生产科扣款金额汇总
      const status = ref(); // 生产科扣款金额汇总
      const type = ref(); // 生产科扣款金额汇总

      const financePerson = ref('');
      const trackerUser = ref('');

      const schema = [

        {

          field: 'actualPayedAmount',

          label: '生产科实际应付金额汇总',
        },
        {

          field: 'payedDate',

          label: '生产科付款日期',
        },
        {

          field: 'actualPayedDate',

          label: '实际付款日期',
        },
        {

          field: 'unPayedAmount',
          label: '未付金额',

        },
        {

          field: 'totalActualPayedAmount',

          label: '实际付款金额汇总',
        },
        {

          field: 'deductAmount',

          label: '生产科扣款金额汇总',
        },
      ];
      // const [register] = useDescription({
      //   title: 'useDescription',
      //   data: mockData,
      //   schema: schema,
      // });

      let columns = [
        {
          title: '申请人',
          dataIndex: 'createBy',
          width: 150,

          customRender: (column) => {
            const { record } = column || {};

            const data = ref();

            if (record?.type === 40) {

              data.value = record?.fieldInfos?.producePaymentCheckBillFieldVO;

            } else if (record?.type == 50) {

              data.value = record?.fieldInfos?.checkBillVO;

            }
            if (record?.type === 40) {
              return data.value?.financePerson;
            } else if (record?.type == 50) {
              return record.createBy;

            }
          },

        },
        {

          title: '内部编号',
          dataIndex: 'innerNo',

          width: 150,
          customRender: (column) => {
            const { record } = column || {};

            const data = ref();
            if (record?.type === 40) {
              data.value = record?.fieldInfos?.producePaymentCheckBillFieldVO;
              const extractedValues = ref<string[]>(data.value?.innerNo.map((item) => item));
              return extractedValues.value.join(',');
            } else if (record?.type == 50) {

              return record?.fieldInfos?.checkBillVO?.innerNo;

            }else if (record?.type == 70) {
              return record?.fieldInfos?.deductionUrlFieldVO?.innerNo;

            }

          },
        },
        {

          title: '审核类型',
          dataIndex: 'productionDepartment',
          width: 150,

          customRender: (column) => {
            const { record } = column || {};
            if (record?.type === 40) {

              return '应付账单申请';

            } else if (record?.type == 50) {

              return '生产科发票申请';

            }else if (record?.type == 70) {
              return `生产科扣款单申请${record?.fieldInfos?.deductionUrlFieldVO?.deductAmount ? `(￥${record?.fieldInfos?.deductionUrlFieldVO?.deductAmount?.toFixed(2)})` : ''}`;

            }
          },

        },
        {

          title: '生产科',

          dataIndex: 'productionName',

          width: 150,

          customRender: (column) => {
            const { record } = column || {};

            const data = ref();
            if (record?.type === 40) {
              data.value = record?.fieldInfos?.producePaymentCheckBillFieldVO;
            } else if (record?.type == 50) {

              data.value = record?.fieldInfos?.checkBillVO;

            } else if (record?.type == 70) {
              data.value = record?.fieldInfos?.deductionUrlFieldVO;

            }
            return data.value?.productionName;

          },

        },
      ];

      if (props.isApproved) {
        columns = columns.concat([
          {
            title: '状态',
            dataIndex: 'status',
            width: 150,
            customRender: (column) => {
              const { record } = column || {};

              return record.status === 10 ? '通过' : '拒绝';
            },
          },
          { title: '拒绝原因', dataIndex: 'refuseRemark', width: 250 },
        ]);
      }

      const [registerTable, { reload }] = useTable({
        api: props.isApproved ? getApprovedListApi : getWaitListApi,

        searchInfo: { type: 4050 },

        // scroll: {
        //   scrollToFirstRowOnChange: true,
        // },
        columns,
        useSearchForm: true,

        formConfig: getFormConfig('checkNo'),

        rowKey: 'id',
        actionColumn: {
          width: 160,
          title: 'Action',
          dataIndex: 'action',
          // slots: { customRender: 'action' },
        },
      });

      function onSelect(record, selected) {
        if (selected) {
          checkedKeys.value = [...checkedKeys.value, record.id];
        } else {
          checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
        }
      }
      function onSelectAll(selected, selectedRows, changeRows) {
        const changeIds = changeRows.map((item) => item.id);
        if (selected) {
          checkedKeys.value = [...checkedKeys.value, ...changeIds];
        } else {
          checkedKeys.value = checkedKeys.value.filter((id) => {
            return !changeIds.includes(id);
          });
        }
      }
      function handleEdit(record, e) {
        e?.stopPropagation();
        return false;
      }
      function handleProfitModal() {}

      async function handleDetail(data) {

        if (data.type == 50 ) {

          showInvoice.value = true;

          mockData.value = data.fieldInfos.checkBillVO;

        } else if (data.type == 40) {
          showInvoice.value = false;

          mockData.value = data.fieldInfos.producePaymentCheckBillFieldVO;

          financePerson.value = mockData.value?.financePerson;
          trackerUser.value = mockData.value?.trackerUser;

        }else if(data.type == 70){
          showInvoice.value = true;
          mockData.value = data.fieldInfos.deductionUrlFieldVO;
          mockData.value.invoiceUrl = mockData.value.deductUrl;  

        }

        openModal(true, { data });

        id.value = data.id;

        itemArray.value = [];

        actualPayCalculate.value = mockData.value?.actualPayCalculate?.toFixed(2); // 实际付款金额计算
        checkNo.value = mockData.value?.checkNo; // 对账单号

        projectNo.value = mockData.value?.projectNo; // 对账单号
        status.value = data?.status; // 对账单号
        type.value = data?.type; // 对账单号

        actualPayedAmount.value = mockData.value?.actualPayedAmount?.toFixed(2); // 实际应付金额
        payedDate.value = mockData.value?.payedDate; // 付款日期
        // actualPayedDate.value = mockData.value?.actualPayedDate; // 实际付款日期
        actualPayedDate.value = ''; // 实际付款日期
        unPayedAmount.value = mockData.value?.unPayedAmount?.toFixed(2); // 未付金额
        totalActualPayedAmount.value = mockData.value?.totalActualPayedAmount?.toFixed(2); // 实际付款金额汇总
        deductAmount.value = mockData.value?.deductAmount?.toFixed(2); // 扣款金额
        const match = mockData.value?.invoiceUrl?.match(/aliyuncs\.com\/(.*?)\?/);

        if (match && match[1]) {
          // 对提取的部分进行解码
          mockData.value.invoiceName = decodeURIComponent(match[1]);
        } else {

          mockData.value.invoiceName = mockData.value?.invoiceUrl;

        }

      }

      function handleShow() {

        // showInvoice.value = false;

      }

      async function handleTrue() {
        await approveAuditApi({ status: 10, id: id.value });
        reload();
        closeModal();
      }

      async function handleFalse() {
        msgVisible.value = true;
        // await approveAuditApi({ status: 20, id: id.value });
        // reload();
        // closeModal();
      }

      async function handleExport() {
        axios
          .post(
            '/basic-api/order/erp/check_bill/exportReceipt',
            {
              checkNo: checkNo.value,
              actualPayedAmount: actualPayedAmount.value,
              deductAmount: deductAmount.value,
              totalActualPayedAmount: totalActualPayedAmount.value,
              unPayedAmount: unPayedAmount.value,
              payedDate: payedDate.value,
              actualPayedDate: actualPayedDate.value,

              financePerson: financePerson.value,
              trackerUser: trackerUser.value,

              projectNo: projectNo.value,
              status: status.value,
              type: type.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(); // 自动点击链接，触发下载
            document.body.removeChild(link); // 下载完成后移除链接
          })
          .catch((error) => {
            console.error(error);
          });
        closeModal();
      }

      const role = computed(() => {
        return userStore.getUserInfo?.roleSmallVO?.code;
      });

      // 定义MsgModalClose的事件，方便子组件调用
      const handleMsgModalClose = async (data) => {
        if (data) {
          await approveAuditApi({ status: 20, id: id.value, refuseRemark: data });
          reload();
          closeModal();
        }
        msgVisible.value = false;
      };

      const handlePreview = (url) => {
        createImgPreview({ imageList: [url], defaultWidth: 500 });
        return false;
      };

      // 新增的函数：判断 URL 是否为图片格式
      function isImageUrl(url: string): boolean {
        const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg'];
        const baseUrl = url.split('?')[0];
        return imageExtensions.some((ext) => baseUrl.toLowerCase().endsWith(ext));
      }
      // function openPic(url) {
      //   window.open('', '', '').document.write(`<!DOCTYPE html>
      //         <html>
      //           <body
      //               style="display: flex;
      //               justify-content: center;
      //               align-items: center;">
      //             <img src='${url}' width="500px" height="500px"/>
      //           </body>
      //         </html>`);
      // }
      // 检查 URL 是否为 PDF 格式
      function isPdfUrl(url: string): boolean {
        return url.toLowerCase().endsWith('.pdf');
      }
      // 打开图片或 PDF
      function openPic(url: string) {
        const baseUrl = url.split('?')[0]; // 获取问号前的部分
        if (isImageUrl(baseUrl)) {
          window.open('', '', '').document.write(`<!DOCTYPE html>
      <html>
        <body style="display: flex; justify-content: center; align-items: center;">

          <img src='${url}' width="300px" height="auto"/>

        </body>
      </html>`);
        } else if (isPdfUrl(baseUrl)) {
          view(url); // 新标签页打开 PDF
        } else {
          console.log('不支持的文件类型');
        }

      }

      return {
        handleProfitModal,
        registerTable,
        checkedKeys,
        currentKey,
        onSelect,
        handleEdit,
        onSelectAll,
        handleDetail,
        registerModal,
        fieldInfos,
        baseInfos,
        handleTrue,
        handleFalse,
        role,
        ROLE,
        msgVisible,
        handleMsgModalClose,
        handlePreview,
        mockData,
        schema,

        showInvoice,

        openPic,

        handleShow,

        actualPayCalculate,
        checkNo,
        actualPayedAmount,
        payedDate,
        actualPayedDate,
        unPayedAmount,
        totalActualPayedAmount,
        deductAmount,
        handleExport,

      };
    },
  });
</script>