dealer/src/views/finance/index.vue

<template>
  <div>
    <GrowCard :loading="loading" class="enter-y" :list="growCardList" />
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="exportExcel" > {{t('routes.equity.exportExcel')}}</a-button>
      </template>
    </BasicTable>
    <AddModal @update="reload" @register="registerAddModal" />
    <EditModal @register="registerEditModal" @update="reload" />
  </div>
</template>
<script lang="ts">
import { defineComponent, h, reactive, ref, onMounted, computed } from 'vue';
import GrowCard from '../dashboard/analysis/components/GrowCard.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 { logData, logList, DownExport } from '/@/api/finance';
import { searchForm, columns } from './data';
import AddModal from './InvoiceModal.vue';
import EditModal from './EditModal.vue';
import { usePermissionStore } from '/@/store/modules/permission';
import { useLocaleStore } from '/@/store/modules/locale';

interface apiDataParam {
  orderSn?: string;
  payTimeStart?: string;
  payTimeEnd?: string;
  invoiceTimeStart?: string;
  invoiceTimeEnd?: string;
  orderBy?: string;
  sortBy?: string;
}
interface GrowCardItem {
  icon: string;
  title: string;
  value: number;
  unit: string;
  color: string;
  action: string;
}
export default defineComponent({
  components: {
    AddModal,
    GrowCard,
    EditModal,
    BasicTable,
    TableAction,
    PageWrapper,
    TableImg,
    [Descriptions.name]: Descriptions,
    [Descriptions.Item.name]: Descriptions.Item,
  },
  setup() {
    const { t } = useI18n();
    const loading = ref(true);
    const growCardList = ref<GrowCardItem[]>([]);
    const localeStore = useLocaleStore();
    const isEn = computed(() => localeStore.getLocale === 'en');
    onMounted(async () => {
      const {lastDownNum = 0,lastHighNum = 0,lastMajorNum = 0} = await logData({})
      loading.value = false
      growCardList.value = [{
        title: t('routes.equity.CardMajorNum'),
        // icon: 'fa6-solid:users-gear',
        icon: 'visit-count|svg',
        value: lastMajorNum || 0,
        unit: t('routes.equity.unit.1'),
        color: 'blue',
        action: t('routes.equity.unit.-2'),
      },
      {
        title:  t('routes.equity.CardHighNum'),
        icon: 'akar-icons:person-add',
        value: lastHighNum || 0,
        unit: t('routes.equity.unit.1'),
        color: 'blue',
        action: t('routes.equity.unit.-2'),
      },
      {
        title: t('routes.equity.CardDownNum'),
        icon: 'carbon:user-role',
        value: lastDownNum || 0,
        unit: t('routes.equity.unit.2'),
        color: 'blue',
        action: t('routes.equity.unit.-2'),
      },]
    });
    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: logList,
      title: t('routes.equity.listTitle'),
      titleHelpMessage: [t('routes.equity.titleHelpMessage.1'), t('routes.equity.titleHelpMessage.2'),t('routes.equity.titleHelpMessage.3'),],
      columns: columns,
      useSearchForm: true,
      formConfig: searchForm,
      showTableSetting: true,
      showIndexColumn: false,
      rowKey: 'id',
      beforeFetch: (params) => {
        let searchData = {
          orderSn: params.orderSn,
          payTimeStart: params.payTime && params.payTime[0],
          payTimeEnd: params.payTime && params.payTime[1],
          invoiceTimeStart: params.invoiceTime && params.invoiceTime[0],
          invoiceTimeEnd: params.invoiceTime && params.invoiceTime[1],
        };
        apiData.orderSn = searchData.orderSn;
        apiData.payTimeStart = searchData.payTimeStart;
        apiData.payTimeEnd = searchData.payTimeEnd;
        apiData.invoiceTimeStart = searchData.invoiceTimeStart;
        apiData.invoiceTimeEnd = searchData.invoiceTimeEnd;
        return {
          ...params,
          ...searchData,
        };
      },
      fetchSetting: {
        pageField: 'pageNum',
        sizeField: 'pageSize',
        listField: 'list',
        totalField: 'total',
      },
      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', t('common.reminder')),
        content: () => h('span', t('routes.equity.excelTitle')),
        onOk: async () => {
          await DownExport({
            ...apiData,
            lang:isEn.value?'en':'cn'
          });
        },
      });
    }
    return {
      registerTable,
      handleDelete,
      registerAddModal,
      registerEditModal,
      handleInvoice,
      exportExcel,
      handleEdit,
      headleDetails,
      reload,
      getCheckPerm,
      loading,
      growCardList,
      t,
    };
  },
});
</script>