feat: 页面

wupengfei

2025-12-02 2edf1f956a2ac8ce5b06bc54dab7f9cdc4701859

feat: 页面

 src/views/DataReport/DistributionDetailReport.vue

New file
@@ -0,0 +1,131 @@
<template>
  <LoadingLayout :loading="state.loading">
    <AppContainer>
      <ProTableQueryFilterBar @on-reset="reset">
        <template #query>
          <QueryFilterItem>
            <FieldDatePicker
              v-model="extraParamState.checkReceiveTime"
              type="daterange"
              range-separator="~"
              start-placeholder="起始日期"
              end-placeholder="截止日期"
              clearable
              @change="getList()"
              tooltipContent="验收日期"
            ></FieldDatePicker>
          </QueryFilterItem>
        </template>
      </ProTableQueryFilterBar>
      <ProTableV2 v-bind="proTableProps" :columns="column" :operationBtns="operationBtns">
      </ProTableV2>
    </AppContainer>
  </LoadingLayout>
</template>

<script setup lang="ts">
import {
  ProTableQueryFilterBar,
  ProTableV2,
  LoadingLayout,
  AppContainer,
  QueryFilterItem,
  useTable,
  FieldDatePicker,
} from '@bole-core/components';
import * as taskCheckReceiveServices from '@/services/api/taskCheckReceive';
import { ModelValueType } from 'element-plus';
import { downloadFileByUrl, format, OrderUtils, setOSSLink } from '@/utils';

defineOptions({
  name: 'DistributionDetailReport',
});

const operationBtnMap: Record<string, OperationBtnType> = {
  downloadBtn: {
    emits: {
      onClick: (role) => handleDownload(role),
    },
    extraProps: {
      hide: (row: API.GetCheckReceiveTasksQueryResultItem) =>
        row.checkReceiveStatus !== EnumTaskCheckReceiveStatus.Completed,
    },
  },
};

const { column, operationBtns } = useAccess({
  operationBtnMap,
});

const router = useRouter();

const BaseState = {
  loading: true,
};

const state = reactive({ ...BaseState });

onMounted(async () => {
  await getList();
  state.loading = false;
});

const {
  getDataSource: getList,
  proTableProps,
  paginationState,
  extraParamState,
  reset,
} = useTable(
  async ({ pageIndex, pageSize }, extraParamState) => {
    try {
      let params: API.GetCheckReceiveTasksQuery = {
        pageModel: {
          rows: pageSize,
          page: pageIndex,
          orderInput: extraParamState.orderInput,
        },
        checkReceiveTimeBegin: format(
          extraParamState.checkReceiveTime?.[0] ?? '',
          'YYYY-MM-DD 00:00:00'
        ),
        checkReceiveTimeEnd: format(
          extraParamState.checkReceiveTime?.[1] ?? '',
          'YYYY-MM-DD 23:59:59'
        ),
      };

      let res = await taskCheckReceiveServices.getCheckReceiveTasks(params, {
        showLoading: !state.loading,
      });
      return res;
    } catch (error) {
      console.log('error: ', error);
    }
  },
  {
    defaultExtraParams: {
      orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }],
      checkReceiveTime: [] as unknown as ModelValueType,
    },
    queryKey: ['taskCheckReceiveServices/getCheckReceiveTasks'],
    columnsRenderProps: {
      serviceFee: { type: 'money' },
      createdTime: { type: 'date', format: 'YYYY-MM-DD' },
      beginTime: { type: 'date', format: 'YYYY-MM-DD' },
    },
  }
);

async function handleDownload(row: API.GetCheckReceiveTasksQueryResultItem) {
  try {
    let params: API.ExportTaskCheckReceiveTaskUsersCommand = {
      id: row.id,
    };
    let res = await taskCheckReceiveServices.exportTaskCheckReceiveTaskUsers(params);
    if (res) {
      downloadFileByUrl(setOSSLink(res));
    }
  } catch (error) {}
}
</script>