aftermarket-mp/src/views/invoice/index.vue

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="exportExcel" v-if="getCheckPerm('invoice-export')">
          导出</a-button
        >
      </template>
      <template #action="{ record }">
        <TableAction
          stopButtonPropagation
          :actions="[
            {
              label: '开票登记',
              //icon: 'la:file-invoice-dollar',
              ifShow: getCheckPerm('invoice-checkin') && record.status == 0,
              onClick: handleInvoice.bind(null, record),
            },
            {
              label: '电子发票',
              ifShow: record.invoiceType == 0 && record.status == 1,
              //icon: 'simple-icons:invoiceninja',
              onClick: headleDetails.bind(null, record),
            },
            {
              label: '快递单号',
              ifShow: record.invoiceType == 1 && record.status == 1,
              //icon: 'icon-park-outline:express-delivery',
              onClick: headleDetails.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <AddModal @update="reload" @register="registerAddModal" />
    <EditModal @register="registerEditModal" @update="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, h, reactive } from 'vue';
  import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { useModal } from '/@/components/Modal';
  import { Descriptions } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { InvoiceList, InvoiceExport } from '/@/api/order';
  import { downloadByData } from '/@/utils/file/download';
  import { searchForm, columns } from './data';
  import AddModal from './InvoiceModal.vue';
  import EditModal from './EditModal.vue';
  import { usePermissionStore } from '/@/store/modules/permission';
  interface apiDataParam {
    orderSn?: string;
    payTimeStart?: string;
    payTimeEnd?: string;
    invoiceTimeStart?: string;
    invoiceTimeEnd?: string;
    orderBy?: string;
    sortBy?: string;
  }
  export default defineComponent({
    components: {
      AddModal,
      EditModal,
      BasicTable,
      TableAction,
      PageWrapper,
      TableImg,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
    },
    setup() {
      const { t } = useI18n();
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      const apiData = reactive<apiDataParam>({
        orderSn: '',
        payTimeStart: '',
        payTimeEnd: '',
        invoiceTimeStart: '',
        invoiceTimeEnd: '',
        orderBy: '',
        sortBy: '',
      });
      const { createMessage, createConfirm } = useMessage();
      const [registerAddModal, { openModal: openAddModal }] = useModal();
      const [registerEditModal, { openModal: openEditModal }] = useModal();
      const [registerTable, { reload }] = useTable({
        api: InvoiceList,
        title: '发票列表',
        // titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn: false,
        rowKey: 'id',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        actionColumn: {
          width: 100,
          title: '操作',
          fixed: 'right',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        canResize: false,
      });
      function handleDelete(record: Recordable) {
        console.log('点击了删除', record);
      }
      function handleInvoice(record: Recordable) {
        openAddModal(true, {
          ...record,
        });
      }
      function handleEdit(record: Recordable) {
        console.log('record', record);
      }
      function headleDetails(record: Recordable) {
        console.log('record', record);
        openEditModal(true, {
          ...record,
        });
      }
      function exportExcel() {
        createConfirm({
          iconType: 'warning',
          title: () => h('span', '温馨提示'),
          content: () => h('span', '确定导出当前发票所有记录?'),
          onOk: async () => {
            await InvoiceExport(apiData);
          },
        });
      }
      return {
        registerTable,
        handleDelete,
        registerAddModal,
        registerEditModal,
        handleInvoice,
        exportExcel,
        handleEdit,
        headleDetails,
        reload,
        getCheckPerm,
      };
    },
  });
</script>