BoundLink-UI/src/views/project/settlement-manage/InvoiceRegistrationList/index.vue

<template>
  <CommonTable ref="commonTableRef" :tableOptions="tableConfig"> </CommonTable>
</template>

<script setup lang="jsx">
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import useDict from '/@/utils/dict-util';
  await useDict.init(['MATE_DELIVERY_STATUS']);

  const commonTableRef = ref(null);
  const tableConfig = ref({
    url: '/supports/invoice/queryPage',
    // 设置网络请求方式为GET
    requestMethod: 'GET',
    tableAttrs: {},
    showIndexColumn: true,
    search: [
      {
        label: '项目名称',
        field: 'deliveryName',
        type: 'input',
        attrs: {},
      },
      {
        label: '客户名称',
        field: 'CustomerName',
        type: 'input',
        attrs: {},
      },
    ],
    columns: [
      {
        title: '项目名称',
        dataIndex: 'deliveryName',
        align: 'center',
      },
      {
        title: '客户名称',
        dataIndex: 'customerName',
        align: 'center',
      },
      {
        title: '发票号',
        dataIndex: 'invoiceCode',
        align: 'center',
      },
      {
        title: '开票类型',
        dataIndex: 'invoiceType',
        align: 'center',
        customRender: ({ text, record, index, column }) => {
          return record?.invoiceType?.[0].valueName;
        },
      },
      {
        title: '开票金额',
        dataIndex: 'invoiceAmount',
        align: 'center',
      },
      {
        title: '开票信息',
        dataIndex: 'invoiceText',
        align: 'center',
        ellipsis: true,
      },
      {
        title: '开票目期',
        dataIndex: 'invoiceDate',
        align: 'center',
      },
      {
        title: '税率',
        dataIndex: 'inVoiceRate',
        align: 'center',
        customRender: ({ text, record, index, column }) => {
          return record?.invoiceRate?.[0].valueName;
        },
      },
      {
        title: '经办人',
        dataIndex: 'invoiceOperator',
        align: 'center',
        customRender: ({ text, record, index, column }) => {
          return record?.invoiceOperator?.actualName;
        },
      },
      {
        title: '发票附件',
        // dataIndex: 'attachment',
        align: 'center',
        customRender: ({ text, record, index, column }) => {
          const imageUrls = record.attachment || [
            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            'https://aliyuncdn.antdv.com/vue.png',
            'https://aliyuncdn.antdv.com/logo.png',
          ];
          return imageUrls.map((imgUrl, imgIndex) => <a-image width={40} src={imgUrl} alt={`发票附件 ${imgIndex + 1}`} />);
        },
      },
      {
        title: '发起人',
        dataIndex: 'createUserId',
        align: 'center',
        customRender: ({ text, record, index, column }) => {
          return record?.createUserId?.actualName;
        },
      },
      {
        title: '提交时间',
        dataIndex: 'createTime',
        align: 'center',
      },
    ],
    beforeFetch({ params }) {
      return {
        ...params,
      };
    },
    // afterFetch({ data }) {},
  });

  const router = useRouter();

  function goDetailPage(record) {
    console.log('record', record);

    router.push({
      path: '/project/report-manage/report-today/',
      query: {
        id: record.id,
      },
    });
  }
</script>

<style lang="less" scoped>
  ::v-deep .ant-float-btn-description {
    font-size: 18px !important;
  }
  :deep(.ant-progress-inner) {
    width: 27px !important;
    height: 27px !important;
    font-size: 11px !important;
  }
  :deep(.ant-table-column[data-key='index']) {
    width: 60px !important;
  }
</style>