InstantRetailAdmin/src/views/finance/commodity-freight/index.vue

<script setup lang="tsx">
import { nextTick } from 'vue';
import { fetchGetfreightStatisticsList } from '@/service/api/finance/commodity-freight';
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.FreightStatisticsVo>[] = [
  {
    key: 'date',
    title: '日期',
    align: 'center',
    width: 120
  },
  {
    key: 'sendSize',
    title: '寄方',
    align: 'center',
    width: 200
  },
  {
    key: 'receiver',
    title: '收方',
    align: 'center',
    width: 200
  },
  {
    key: 'delivery',
    title: '运输公司',
    align: 'center',
    width: 120
  },
  {
    key: 'deliveryNo',
    title: '运单号码',
    align: 'center',
    width: 200
  },
  {
    key: 'sendArea',
    title: '寄件地区',
    align: 'center',
    width: 200
  },
  {
    key: 'toAddress',
    title: '到件地区',
    align: 'center',
    width: 200
  },
  {
    key: 'money',
    title: '费用(元)',
    align: 'center',
    width: 120
  },
  {
    key: 'orderNo',
    title: '订/退单号',
    align: 'center',
    width: 200
  }
];

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: '收货人姓名',
        field: 'receiver',
        component: 'NInput'
      },
      {
        label: '收货人手机号',
        field: 'mobile',
        component: 'NInput'
      },
      {
        label: '运输公司',
        field: 'delivery',
        component: 'NSelect',
        componentProps: {
          options: [
            {
              label: '全部',
              value: ''
            },
            {
              label: '邮政',
              value: '1'
            },
            {
              label: '麦芽田-闪送',
              value: '3'
            }
          ]
        }
      },
      {
        label: '运单单号',
        field: 'deliveryNo',
        component: 'NInput'
      },
      {
        label: '到件地址',
        field: 'toAddress',
        component: 'NInput'
      },
      {
        label: '订/退单号',
        field: 'orderNo',
        component: 'NInput'
      },
      {
        label: '结算周期',
        component: 'NDatePicker',
        field: 'createTime',
        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/freightStatisticsExcel', getSeachForm(), '运费明细列表.xlsx');
    setTableLoading(false);
  } catch {
    setTableLoading(false);
  }
}
</script>

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

<style scoped></style>