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

<script setup lang="tsx">
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NTag } from 'naive-ui';
import {
  // fetchAudit,
  fetchGetAfterSalesOrderList
} from '@/service/api/order-manage/after-sales-order';
// import { fetchGetLoginUserList } from '@/service/api/common';
// import { useAuth } from '@/hooks/business/auth';
// import { copyTextToClipboard } from '@/utils/zt';
import { useTable } from '@/components/zt/Table/hooks/useTable';
// import { type } from '../../../../packages/axios/src/index';
import {
  DJKOrderStatus,
  businessType,
  getSearchForm,
  orderStatus,
  refundOrderStatus
} from '../normal-order/normal-order';

const route = useRoute();

const router = useRouter();
// const ShipmentModal = useTemplateRef('Shipment');
const columns: NaiveUI.TableColumn<Api.delivery.deliveryOrder>[] = [
  {
    key: 'refundNumber',
    title: '售后单号',
    align: 'center',
    width: 220
  },
  {
    key: 'consigneeAddress',
    title: '业务类型',
    align: 'center',
    width: 120,
    render: row => {
      return <NTag>{businessType[row.businessType as keyof typeof businessType] || row.businessType}</NTag>;
    }
  },
  {
    key: 'orderNumber',
    title: '原订单编号',
    align: 'center',
    width: 220
  },
  {
    key: 'info',
    title: '客户信息',
    align: 'center',
    width: 220,
    render: row => {
      return (
        <div>
          <div>
            {row.consigneeName}
            {row.consigneeMobile}
          </div>
          {row.dvyType == 2 ? <div>自提</div> : <div>{row.consigneeAddress}</div>}
        </div>
      );
    }
  },
  {
    key: 'refundOrderStatus',
    title: '售后状态',
    align: 'center',
    width: 120,
    render: row => {
      const statusKey = row.refundOrderStatus as keyof typeof refundOrderStatus;
      const statusText = refundOrderStatus[statusKey] || '售后已完成';
      return <NTag>{statusText}</NTag>;
    }
  },
  {
    key: 'status',
    title: '订单状态',
    align: 'center',
    width: 120,
    render: row => {
      const statusKey = row.hbOrderStatus as keyof typeof orderStatus;
      let statusText;
      if (row.businessType == 'XNSP') {
        if (row.hbOrderStatus == 60 || row.hbOrderStatus == 50 || row.hbOrderStatus == 0) {
          statusText = '订单取消';
        } else {
          statusText = '订单完成';
        }
      } else if (row.businessType == 'DJK') {
        statusText = DJKOrderStatus[statusKey as keyof typeof DJKOrderStatus] || '未知状态';
      } else {
        statusText = orderStatus[statusKey] || '未知状态';
      }
      return <NTag>{statusText}</NTag>;
    }
  },
  {
    key: 'createTime',
    title: '申请时间',
    align: 'center',
    width: 180,
    render: row => {
      return <div>{row.createTime?.replace('T', '  ')}</div>;
    }
  },
  {
    key: 'refundMoney',
    title: '退款金额',
    align: 'center',
    width: 180,
    render: row => {
      return <div>￥{row.refundMoney}</div>;
    }
  }
];

const [registerTable, { refresh, setFieldsValue }] = useTable({
  searchFormConfig: {
    schemas: [
      ...getSearchForm(),
      {
        label: '售后编号',
        component: 'NInput',
        field: 'refundNumber'
      }
    ]
  },
  tableConfig: {
    keyField: 'id',
    title: '',
    opWdith: 160,
    showAddButton: false,
    showTableHeaderAction: true,
    scrollX: 1800,
    fieldMapToTime: [['createTime', ['startTime', 'endTime']]]
  }
});

function handleOrderDetail(row: Api.delivery.deliveryOrder) {
  if (!row.orderNumber) {
    window.$message?.error('订单异常');
  }
  router.push({
    path: '/order-manage/normal-order',
    query: {
      orderNumber: row.orderNumber
    }
  });
}
function handleAfterSalesOrderDetail(row: Api.delivery.deliveryOrder) {
  if (!row.refundNumber) {
    window.$message?.error('订单异常');
  }
  router.push({
    path: '/order-manage/after-sales-order-detail',
    query: {
      refundNumber: row.refundNumber
    }
  });
}

onMounted(() => {
  setTimeout(async () => {
    await setFieldsValue({ orderNumber: route.query.orderNumber });
    refresh();
  }, 1000);
});
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :api="fetchGetAfterSalesOrderList" @register="registerTable">
      <template #op="{ row }">
        <NButton size="small" type="primary" ghost @click="handleAfterSalesOrderDetail(row)">售后详情</NButton>
        <NButton size="small" type="primary" ghost @click="handleOrderDetail(row)">订单详情</NButton>
      </template>
    </ZTable>
  </LayoutTable>
</template>

<style scoped></style>