city-gather-admin/src/views/order-manage/normal-order/index.vue

<script setup lang="tsx">
import { nextTick, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { NTag, useDialog } from 'naive-ui';
import type { InternalRowData } from 'naive-ui/es/data-table/src/interface';
import {
  fetchBreakDownload,
  fetchExportList,
  fetchExportOrderList,
  fetchGetDeliveryOrderList,
  fetchGetDeliveryStatusNum
} from '@/service/api/order-manage/normal-order';
// import { fetchGetLoginUserList } from '@/service/api/common';
import { useAuth } from '@/hooks/business/auth';
// import { copyTextToClipboard } from '@/utils/zt';
import { commonExport } from '@/utils/common';
import { useModal } from '@/components/zt/Modal/hooks/useModal';
import { useTable } from '@/components/zt/Table/hooks/useTable';
// import { type } from '../../../../packages/axios/src/index';
import { SearchForm, orderStatus } from './normal-order';
const router = useRouter();
const activeTab = ref('all');
const statusList = ref<{ label: string; value: string; num?: number }[]>([]);
// const ShipmentModal = useTemplateRef('Shipment');
const channelIdList = ref([]);
const columns: NaiveUI.TableColumn<Api.delivery.deliveryOrder>[] = [
  {
    key: 'orderNumber',
    title: '订单编号',
    align: 'center',
    width: 220
  },
  {
    key: 'consigneeAddress',
    title: '业务类型',
    align: 'center',
    width: 120,
    render: row => {
      return <NTag class={'mt7'}>{row.businessType}</NTag>;
    }
  },
  {
    key: 'info',
    title: '客户信息',
    align: 'center',
    width: 220,
    render: row => {
      return (
        <div class={'mt7'}>
          <div>
            {row.consigneeName}
            {row.consigneeMobile}
          </div>
          <div>{row.consigneeAddress}</div>
        </div>
      );
    }
  },
  {
    key: 'status',
    title: '订单状态',
    align: 'center',
    width: 120,
    render: row => {
      const statusKey = row.hbOrderStatus as keyof typeof orderStatus;
      const statusText = orderStatus[statusKey] || '未知状态';
      return <NTag class={'mt7'}>{statusText}</NTag>;
    }
  },
  {
    key: 'createTime',
    title: '下单时间',
    align: 'center',
    width: 180,
    render: row => {
      return <div>{row.createTime?.replace('T', '  ')}</div>;
    }
  }
];

const [registerTable, { refresh, setTableLoading, getSeachForm, getTableData }] = useTable({
  searchFormConfig: {
    schemas: [...SearchForm]
  },
  tableConfig: {
    keyField: 'id',
    title: '',
    showAddButton: false,
    showTableHeaderAction: true,
    fieldMapToTime: [['createTime', ['startTime', 'endTime']]]
  }
});

const exportColumns: NaiveUI.TableColumn<InternalRowData>[] = [
  {
    key: 'index',
    title: '序号',
    align: 'center',
    width: 100,
    render(_, rowIndex) {
      return rowIndex + 1;
    }
  },
  {
    key: 'taskName',
    title: '任务名称',
    align: 'center',
    minWidth: 100
  },
  {
    key: 'updateTime',
    title: '时间',
    align: 'center',
    minWidth: 100,
    render: row => {
      return (
        <div>
          <div>创建时间：{row.createTime}</div>
          <div>完成时间：{row.updateTime}</div>
        </div>
      );
    }
  },
  {
    key: 'operator',
    title: '操作人',
    align: 'center',
    minWidth: 100
  },
  {
    key: 'exportStatus',
    title: '状态',
    align: 'center',
    minWidth: 100,
    render: row => {
      if (row.exportStatus == 0) {
        return (
          <div>
            请耐心等待，正在导出中...
            <n-button text type="info" onClick={() => handleBreak(row.id as string)}>
              中断
            </n-button>
          </div>
        );
      } else if (row.exportStatus == 1) {
        return (
          <div>
            未下载
            <n-button text type="info" onClick={() => handleDownload(row.id as string)}>
              下载
            </n-button>
          </div>
        );
      } else if (row.exportStatus == 2) {
        return <div class={'text-gray-500'}>生成文件失败</div>;
      } else if (row.exportStatus == 3) {
        return (
          <div>
            已下载&nbsp;
            <n-button text type="info" onClick={() => handleDownload(row.id as string)}>
              下载
            </n-button>
          </div>
        );
      } else if (row.exportStatus == 4) {
        return <div>导出失败</div>;
      }
      return <div>进行中</div>;
    }
  }
];

async function handleDownload(id: string) {
  setTableLoading(true);
  await commonExport('/platform/exportTask/download', { fileId: id }, '正常订单列表.xlsx');
  refresh();
}
async function handleBreak(id: string) {
  setTableLoading(true);
  await fetchBreakDownload(id);
  refresh();
}

const [registerModalPrice, { openModal }] = useModal({
  title: '导出记录',
  width: 1200,
  height: 600,
  showFooter: false
});

const dialog = useDialog();

// async function handleDeivery(row: Api.delivery.deliveryOrder) {
//   if (!row.orderNumber) {
//     window.$message?.error('订单异常');
//     return;
//   }
//   ShipmentModal.value?.handleOpenOrder(row.orderNumber);
// }

function handleOrderDetail(row: Api.delivery.deliveryOrder) {
  if (!row.orderNumber) {
    window.$message?.error('订单异常');
  }
  router.push({
    path: '/order-manage/order-detail',
    query: {
      orderNumber: row.orderNumber
    }
  });
  // orderMoadl.value?.open(String(row.orderNumber));
}
async function getNums() {
  const form = getSeachForm();
  const params = {
    ...form,
    channelIdList: channelIdList.value,
    startTime: form?.createTime && form.createTime[0],
    endTime: form?.createTime && form.createTime[1],
    createTime: null
  };
  const { data: keyData } = await fetchGetDeliveryStatusNum(params);
  if (!keyData) return;
  const orderStatusList = [
    {
      label: '全部',
      value: 'all'
    },
    {
      label: '待支付',
      value: 'paddingPay'
    },
    {
      label: '进行中',
      value: 'ing'
    },
    {
      label: '已完成',
      value: 'completed'
    },
    {
      label: '已取消',
      value: 'cancel'
    }
  ];
  const updatedOrderStatusList = orderStatusList.map(item => {
    const key = item.value as keyof typeof keyData;
    if (Object.hasOwn(keyData, key)) {
      return {
        ...item,
        num: keyData[key]
      };
    }
    return item;
  });
  // console.log(updatedOrderStatusList, 'updatedOrderStatusList');
  statusList.value = updatedOrderStatusList;
}

getNums();

// async function handleCopy(row: Api.delivery.deliveryOrder, key: string) {
//   if (!row[key]) {
//     window.$message?.error('订单编号不存在');
//     return;
//   }
//   await copyTextToClipboard(row[key]);
// }

async function handleExport() {
  setTableLoading(true);
  try {
    // await commonExport(
    //   '/platform/order/export',
    //   { ...getFieldsValue(), orderStatus: activeTab.value },
    //   '正常订单列表.xlsx'
    // );
    await fetchExportOrderList({ ...getSeachForm(), orderStatus: activeTab.value });
    dialog.success({
      title: '提示',
      content: () => {
        return (
          <div>
            <p>导出操作进行中......</p>
            <p>是否进入导出记录</p>
          </div>
        );
      },
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: () => {
        openModal();
      },
      onNegativeClick: () => {}
    });
  } finally {
    setTableLoading(false);
  }
}

async function handleExportLog() {
  setTableLoading(true);
  try {
    openModal();
  } finally {
    setTableLoading(false);
  }
}
watch(
  () => [activeTab.value],
  () => {
    nextTick(() => {
      refresh();
    });
  }
);
</script>

<template>
  <LayoutTable>
    <ZTable
      :columns="columns"
      :api="fetchGetDeliveryOrderList"
      :default-params="{ orderStatus: activeTab }"
      @register="registerTable"
    >
      <template #op="{ row }">
        <NButton size="small" type="primary" ghost @click="handleOrderDetail(row)">订单详情</NButton>
      </template>
      <template #header>
        <div class="flex items-center">
          <NScrollbar x-scrollable>
            <div class="flex items-center">
              <div class="max-w-800px">
                <NTabs v-model:value="activeTab" type="line" animated display-directive="show">
                  <NTab
                    v-for="item in statusList"
                    :key="item.value"
                    :name="item.value"
                    :tab="`${item.label}(${item.num})`"
                  ></NTab>
                </NTabs>
              </div>
            </div>
          </NScrollbar>
        </div>
      </template>
      <template #prefix="{ loading }">
        <div class="flex items-center">
          <NButton
            v-if="useAuth().hasAuth('order:user:export')"
            size="small"
            type="primary"
            class="ml20px mt30px"
            ghost
            :loading="loading"
            :disabled="getTableData().length == 0"
            @click="handleExport"
          >
            <template #icon>
              <SvgIcon icon="mingcute:file-export-line"></SvgIcon>
            </template>
            导出
          </NButton>
          <NButton
            v-if="useAuth().hasAuth('order:user:export')"
            size="small"
            type="primary"
            class="ml20px mt30px"
            ghost
            :loading="loading"
            @click="handleExportLog"
          >
            导出记录
          </NButton>
        </div>
      </template>
    </ZTable>
    <BasicModal @register="registerModalPrice" @after-leave="refresh">
      <LayoutTable>
        <ZTable
          :show-table-action="false"
          :columns="exportColumns"
          :api="fetchExportList"
          :default-params="{ exportType: 1 }"
          @register="registerTable"
        ></ZTable>
      </LayoutTable>
    </BasicModal>
  </LayoutTable>
</template>

<style scoped></style>