InstantRetailAdmin/src/views/delivery/after-sales-order/index.vue

<script setup lang="tsx">
import { nextTick, reactive, ref, unref, useTemplateRef, watch } from 'vue';
import { NImage, NTag } from 'naive-ui';
import { fetchGetAfterSalesOrderList, fetchGetAfterSalesStatusNum } from '@/service/api/delivery/after-sales-order';
import { fetchGetLoginUserList } from '@/service/api/common';
import { useAppStore } from '@/store/modules/app';
import { defaultTransform, useNaivePaginatedTable } from '@/hooks/common/table';
import { useAuth } from '@/hooks/business/auth';
import { copyTextToClipboard } from '@/utils/zt';
import { commonExport } from '@/utils/common';
import { $t } from '@/locales';
import { useForm } from '@/components/zt/Form/hooks/useForm';
import NormalMoadl from '../normal-order/component/normal-modal.vue';
import { dvyStatus, orderStatus } from '../normal-order/normal-order';
import { SearchForm, TypeText, refundEnum, refundStatus } from './after-sales-order';
import OrderModal from './order-modal.vue';
const appStore = useAppStore();
const checkedRowKeys = ref([]);
const activeTab = ref(0);
const statusList = ref<{ label: string; value: number; num?: number; key: string }[]>([]);
const orderMoadl = useTemplateRef('orderMoadl');
const AfterSalesModal = useTemplateRef('AfterSalesModal');
const channelIdList = ref([]);
const [registerSearchForm, { getFieldsValue, setFieldsValue }] = useForm({
  schemas: [
    {
      field: 'channelIdList',
      label: '所属企业',
      component: 'ApiSelect',
      componentProps: {
        api: () => fetchGetLoginUserList(),
        labelFeild: 'channelName',
        valueFeild: 'id',
        multiple: true,
        onUpdateValue: () => {
          nextTick(() => {
            handleSearch();
          });
        },
        getOptions: async (options: any) => {
          await setFieldsValue({ channelIdList: [options[0].id] });
          handleSearch();
        }
      }
    },
    ...SearchForm
  ],
  showAdvancedButton: false,
  labelWidth: 120,
  layout: 'horizontal',

  size: 'small',
  gridProps: {
    cols: '1 xl:4 s:1 l:3',
    itemResponsive: true
  },
  collapsedRows: 1
});
const searchForm = ref();
const searchParams = reactive({
  current: 1,
  size: 10
});
const { columns, data, loading, getData, mobilePagination } = useNaivePaginatedTable({
  api: () => fetchGetAfterSalesOrderList({ ...searchParams, returnMoneySts: activeTab.value, ...unref(searchForm) }),
  transform: response => defaultTransform(response),
  immediate: false,
  paginationProps: {
    pageSizes: import.meta.env.VITE_PAGE_SIZE.split(',').map(Number)
  },
  onPaginationParamsChange: params => {
    searchParams.current = Number(params.page);
    searchParams.size = Number(params.pageSize);
  },
  columns: () => [
    {
      key: 'orderItems',
      title: '商品',
      align: 'left',
      width: 280,
      colSpan: (_rowData, _rowIndex) => 2,
      render: row => {
        const statusKey = row.returnMoneySts as keyof typeof refundStatus;
        const statusText = refundStatus[statusKey] || '暂无售后';

        return (
          <div>
            <div class={'mb3 flex items-center'}>
              <n-tag>
                <div class={'flex items-center'}>
                  退款编号：{row.refundSn}
                  <div onClick={() => copyTextToClipboard(row.refundSn)}>
                    <svgIcon icon={'bxs:copy'} class={'mx-3 cursor-pointer text-[#f97316]'}></svgIcon>
                  </div>
                  订单编号：{row.orderNumber}
                  <div onClick={() => copyTextToClipboard(row.orderNumber)}>
                    <svgIcon icon={'bxs:copy'} class={'mx-3 cursor-pointer text-[#f97316]'}></svgIcon>
                  </div>
                  申请时间：
                  {row.applyTime} 门店名称 {row.shopName}
                </div>
              </n-tag>
            </div>
            {row.orderRefundSkuList?.map(item => {
              return (
                <div class={'mb-3 h-80px flex items-center'}>
                  <NImage src={item.pic} class="h-[80px] min-w-80px w-[80px]" lazy />
                  <div class={'ml12px flex-1'}>
                    <div class={'w-full flex items-center justify-between'}>
                      <div class={'w200px'}>
                        <n-ellipsis class={'w250px'}>
                          <span class={'w-full text-left text-15px font-semibold'}>{item.skuName}</span>
                        </n-ellipsis>
                      </div>
                      <div class={'w150px pl30px text-left'}>
                        <div class={'text-16px font-semibold'}>￥{item.skuPrice} </div>
                      </div>
                    </div>
                    <div class={'mb2 w-full flex items-center justify-between'}>
                      <div class={'w200px text-gray'}>规格：{item.spec || '--'} </div>
                      <div class={'w150px pl30px text-left text-gray'}>x{item.productCount} </div>
                    </div>
                    <NTag type={statusKey == refundEnum.REFUND_SUCCESS ? 'success' : 'error'}>{statusText}</NTag>
                  </div>
                </div>
              );
            })}
          </div>
        );
      }
    },
    {
      key: 'deptName',
      title: '单价(元)/数量',
      align: 'center',
      width: 100
    },
    {
      key: 'actualTotal',
      title: '实付金额(元)',
      align: 'center',
      width: 120,
      render: row => {
        // 后端不算，让前端算
        const actualTotal = row.orderRefundSkuList?.reduce((acc, item) => {
          return acc + Number(item.skuPrice) * Number(item.productCount);
        }, 0);
        const goodsTotalCount = row.orderRefundSkuList?.reduce((acc, item) => {
          return acc + Number(item.productCount);
        }, 0);
        return (
          <div class={'mt7'}>
            <div class={'text-16px text-#ff0000 font-semibold'}>{actualTotal?.toFixed(2)} 元</div>
            <div>共 {goodsTotalCount} 件</div>
          </div>
        );
      }
    },
    {
      key: 'refundAmount',
      title: '退款金额',
      align: 'center',
      width: 120,
      render: row => {
        // 后端不算，让前端算
        const actualTotal = row.orderRefundSkuList?.reduce((acc, item) => {
          return acc + Number(item.skuPrice) * Number(item.productCount);
        }, 0);
        const goodsTotalCount = row.orderRefundSkuList?.reduce((acc, item) => {
          return acc + Number(item.productCount);
        }, 0);
        return (
          <div class={'mt7'}>
            <div class={'text-16px text-#ff0000 font-semibold'}>{actualTotal?.toFixed(2)} 元</div>
            <div>共 {goodsTotalCount} 件</div>
          </div>
        );
      }
    },
    {
      title: '商品状况',
      key: 'goods',
      width: 220,
      align: 'center',
      render: row => {
        return (
          <div class={'mt7'}>
            <div class={'text-16px font-semibold'}>{TypeText[Number(row.applyType) - 1] || '未知状况'} </div>
            <div class={'text-#ff0000'}> {row.buyerReason} </div>
          </div>
        );
      }
    },
    {
      key: 'dvyType',
      title: '订单类型',
      align: 'center',
      width: 120,
      render: row => {
        return <NTag class={'mt7'}>{dvyStatus[row.dvyType as keyof typeof dvyStatus] || '未知类型'}</NTag>;
      }
    },
    {
      key: 'status',
      title: '订单状态',
      align: 'center',
      width: 250,
      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: 160,
      render: row => {
        const statusKey = row.returnMoneySts as keyof typeof refundStatus;
        const statusText = refundStatus[statusKey] || '暂无售后';
        return <NTag class={'mt7'}>{statusText}</NTag>;
      }
    },
    {
      key: 'operate',
      title: $t('common.operate'),
      align: 'center',
      width: 160,
      fixed: 'right',
      render: row => {
        return (
          <div class={'mt7'}>
            <n-button size="small" type="primary" ghost onClick={() => handleOpenMoadl(row)}>
              查看订单
            </n-button>
            <n-button
              size="small"
              class={appStore.isMobile ? ' mt2' : 'ml2'}
              type="primary"
              ghost
              onClick={() => AfterSalesModal.value?.handleOpenOrder(row.refundId)}
            >
              售后详情
            </n-button>
          </div>
        );
      }
    }
  ]
});
function handleOpenMoadl(row: Api.delivery.OrderRefund) {
  if (!row.orderNumber) {
    window.$message?.error('订单异常');
    return;
  }
  orderMoadl.value?.open(String(row.orderNumber));
}
async function getNums() {
  const form = getFieldsValue();
  const params = {
    ...form,
    channelIdList: channelIdList.value,
    startTime: form.createTime ? form.createTime[0] : null,
    endTime: form.createTime ? form.createTime[1] : null,
    createTime: null
  };
  const { data: keyData } = await fetchGetAfterSalesStatusNum(params);
  if (!keyData) return;
  const orderStatusList = [
    {
      label: '全部',
      value: 0,
      key: 'allCount'
    },
    {
      label: '买家申请',
      value: refundEnum.BUYER_APPLY,
      key: 'sellerApplyCount'
    },
    {
      label: '卖家拒绝',
      value: refundEnum.SELLER_REFUSE,
      key: 'sellerRejectCount'
    },
    {
      label: '买家发货',
      value: refundEnum.SELLER_AGREE,
      key: 'sellerAcceptCount'
    },
    {
      label: '卖家收货',
      value: refundEnum.BUYER_DELIVERY,
      key: 'buyerDeliveryCount'
    },
    {
      label: '退款成功',
      value: refundEnum.REFUND_SUCCESS,
      key: 'refundCompleteCount'
    },
    {
      label: '撤回申请',
      value: refundEnum.REVOKE_APPLY,
      key: 'withdrawApplyCount'
    }
  ];
  const updatedOrderStatusList = orderStatusList.map(item => {
    if (Object.hasOwn(keyData, item.key)) {
      return {
        ...item,
        num: keyData[item.key]
      };
    }
    return item;
  });
  statusList.value = updatedOrderStatusList;
}
watch(
  () => [activeTab.value],
  () => {
    searchParams.current = 1;
    getData();
  }
);
function handleSearch() {
  const form = getFieldsValue();
  if (form.createTime) {
    form.startTime = form.createTime[0];
    form.endTime = form.createTime[1];
    delete form.createTime;
  }
  searchForm.value = form;
  channelIdList.value = form.channelIdList;
  getData();
  getNums();
}
function handleReset() {
  searchForm.value = getFieldsValue();
  searchForm.value.channelIdList = channelIdList.value;
  setFieldsValue({ channelIdList: channelIdList.value });
  getData();
  getNums();
}
async function handleExport() {
  loading.value = true;
  try {
    await commonExport(
      '/platform/orderRefund/export',
      { ...getFieldsValue(), returnMoneySts: activeTab.value },
      '售后订单列表.xlsx'
    );
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <div class="flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <NCard :bordered="false" size="small">
      <NCollapse display-directive="show" default-expanded-names="search">
        <NCollapseItem title="搜索" name="search">
          <BasicForm @register-form="registerSearchForm" @submit="handleSearch" @reset="handleReset" />
        </NCollapseItem>
      </NCollapse>
    </NCard>
    <NCard :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
      <template #header>
        <div class="mr3">售后列表</div>
        <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>
      </template>
      <template #header-extra>
        <NButton
          v-if="useAuth().hasAuth('order:user:export')"
          size="small"
          type="primary"
          class="ml20px mt30px"
          ghost
          :disabled="data.length == 0"
          :loading="loading"
          @click="handleExport"
        >
          <template #icon>
            <SvgIcon icon="mingcute:file-export-line"></SvgIcon>
          </template>
          导出
        </NButton>
      </template>
      <NDataTable
        v-model:checked-row-keys="checkedRowKeys"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="1800"
        :loading="loading"
        :row-key="row => row.refundId"
        remote
        class="sm:h-full"
        :pagination="mobilePagination"
      />

      <NormalMoadl ref="orderMoadl" @finish="handleReset"></NormalMoadl>
      <OrderModal ref="AfterSalesModal"></OrderModal>
    </NCard>
  </div>
</template>

<style scoped lang="scss"></style>