InstantRetailAdmin/src/views/finance/summary/index.vue

<script setup lang="tsx">
import { nextTick } from 'vue';
import { fetchGetskuStatisticsList } from '@/service/api/finance/summary';
import { fetchGetLoginUserList } from '@/service/api/common';
import { useAuth } from '@/hooks/business/auth';
import { commonExport } from '@/utils/common';
import { useTable } from '@/components/zt/Table/hooks/useTable';
const columns: NaiveUI.TableColumn<Api.finance.SkuStatisticsVo>[] = [
  {
    key: 'skuId',
    title: '商品ID',
    align: 'center',
    width: 120
  },
  {
    key: 'skuName',
    title: '商品名称',
    align: 'center',
    width: 200
  },
  {
    key: 'spec',
    title: '规格',
    align: 'center',
    width: 200
  },
  {
    key: 'price',
    title: '单价(元)',
    align: 'center',
    width: 120
  },
  {
    key: 'prodCount',
    title: '商品总数量',
    align: 'center',
    width: 200
  },
  {
    key: 'total',
    title: '小计(元)',
    align: 'center',
    width: 120
  }
];

const [registerTable, { refresh, setTableLoading, setFieldsValue, getSeachForm, getTableData }] = useTable({
  searchFormConfig: {
    schemas: [
      {
        field: 'channelIds',
        label: '企业名称',
        component: 'ApiSelect',
        componentProps: {
          api: fetchGetLoginUserList,
          labelFeild: 'channelName',
          valueFeild: 'id',
          multiple: true,
          onUpdateValue: () => {
            nextTick(() => {
              handleSearch();
            });
          },
          getOptions: async (options: any) => {
            await setFieldsValue({ channelIds: [options[0].id] });
            handleSearch();
          }
        }
      },
      {
        label: '商品ID',
        field: 'skuId',
        component: 'NInput'
      },
      {
        label: '商品名称',
        field: 'skuName',
        component: 'NInput'
      },
      {
        label: '商品规格',
        field: 'spec',
        component: 'NInput'
      },
      {
        label: '结算周期',
        component: 'NDatePicker',
        field: 'Time',
        componentProps: {
          type: 'datetimerange'
        }
      }
    ],
    labelWidth: 120,
    layout: 'horizontal',
    size: 'small',
    gridProps: {
      cols: '1 xl:4 s:1 l:3',
      itemResponsive: true
    },
    collapsedRows: 1
  },
  tableConfig: {
    keyField: 'id',
    title: '对账单汇总表(商品)',
    showAddButton: false,
    defaultParamsNotReset: 'channelIds',
    fieldMapToTime: [['Time', ['startTime', 'endTime']]]
  }
});
function handleSearch() {
  refresh();
}

async function handleExport() {
  setTableLoading(true);
  try {
    await commonExport('/platform/sku/skuStatisticsExcel', getSeachForm(), '对账单列表.xlsx');
    setTableLoading(false);
  } catch {
    setTableLoading(false);
  }
}
</script>

<template>
  <LayoutTable>
    <ZTable
      :columns="columns"
      :immediate="false"
      :api="fetchGetskuStatisticsList"
      :show-table-action="false"
      @register="registerTable"
    >
      <template #prefix="{ loading }">
        <NButton
          v-if="useAuth().hasAuth('finance:summary:export')"
          size="small"
          :loading="loading"
          :disabled="getTableData().length == 0"
          @click="handleExport"
        >
          导出
        </NButton>
      </template>
    </ZTable>
  </LayoutTable>
</template>

<style scoped></style>