2026-07-08 64b38f57628375dff92d147ddeefd771e6e85439
src/views/financialManagement/receivable/salesReturn.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,217 @@
<template>
  <!-- é”€å”®é€€è´§ -->
  <div class="app-container">
    <el-form :model="filters" :inline="true">
      <el-form-item label="退货单号:">
        <el-input v-model="filters.returnNo" placeholder="请输入退货单号" clearable style="width: 200px;" />
      </el-form-item>
      <el-form-item label="客户名称:">
        <el-input v-model="filters.customerName" placeholder="请输入客户名称" clearable style="width: 200px;" />
      </el-form-item>
      <el-form-item label="退货日期:">
        <el-date-picker
          v-model="filters.dateRange"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_list">
      <div class="actions">
        <div></div>
        <div>
          <el-button @click="handleOut" icon="Download">导出</el-button>
        </div>
      </div>
      <PIMTable
        rowKey="id"
        :column="columns"
        :tableData="dataList"
        :tableLoading="tableLoading"
        isShowSummary
        :summaryMethod="getSummaries"
        :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @pagination="changePage"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { listPageAccountSalesReturn } from "@/api/financialManagement/accountSales";
defineOptions({
  name: "销售退货",
});
const { proxy } = getCurrentInstance();
const filters = reactive({
  returnNo: "",
  customerName: "",
  dateRange: [],
});
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});
const columns = [
  { label: "退货单号", prop: "returnNo", minWidth: "150" },
  { label: "客户名称", prop: "customerName", minWidth: "180" },
  { label: "关联发货单号", prop: "shippingNo", minWidth: "150" },
  {
    label: "发货类型",
    prop: "shippingType",
    minWidth: "110",
    formatData: (val) => ({ 1: "货车", 2: "快递" }[String(val)] || "--"),
  },
  {
    label: "发货车牌号",
    prop: "truckPlateNo",
    minWidth: "140",
    formatData: (_val, row) => (String(row?.shippingType) === "1" ? row?.truckPlateNo || "--" : "--"),
  },
  {
    label: "快递公司",
    prop: "expressCompany",
    minWidth: "140",
    formatData: (_val, row) => (String(row?.shippingType) === "2" ? row?.expressCompany || "--" : "--"),
  },
  {
    label: "快递单号",
    prop: "expressNo",
    minWidth: "150",
    formatData: (_val, row) => (String(row?.shippingType) === "2" ? row?.expressNo || "--" : "--"),
  },
  { label: "退货日期", prop: "makeTime", minWidth: "170" },
  {
    label: "退款总额",
    prop: "refundAmount",
    minWidth: "120",
    formatData: (val) =>
      val === null || val === undefined || val === ""
        ? ""
        : Number(val).toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
  },
  { label: "退货原因", prop: "returnReason", minWidth: "150", showOverflowTooltip: true },
  { label: "销售订单号", prop: "salesContractNo", minWidth: "150" },
];
const dataList = ref([]);
const tableLoading = ref(false);
function buildFilterParams() {
  const params = {
    returnNo: filters.returnNo || undefined,
    customerName: filters.customerName || undefined,
  };
  if (filters.dateRange && filters.dateRange.length === 2) {
    params.startDate = filters.dateRange[0];
    params.endDate = filters.dateRange[1];
  }
  return params;
}
const onSearch = () => {
  pagination.currentPage = 1;
  getTableData();
};
const getTableData = () => {
  tableLoading.value = true;
  listPageAccountSalesReturn({
    ...buildFilterParams(),
    current: pagination.currentPage,
    size: pagination.pageSize,
  })
    .then((res) => {
      const ok = res.code === 200 || res.code === 0;
      if (ok && res.data) {
        pagination.total = res.data.total ?? 0;
        dataList.value = res.data.records ?? [];
      } else {
        ElMessage.error(res.msg || "查询失败");
        dataList.value = [];
      }
    })
    .catch(() => {
      dataList.value = [];
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
const resetFilters = () => {
  filters.returnNo = "";
  filters.customerName = "";
  filters.dateRange = [];
  pagination.currentPage = 1;
  getTableData();
};
const changePage = ({ page, limit }) => {
  pagination.currentPage = page;
  pagination.pageSize = limit;
  getTableData();
};
const getSummaries = ({ columns, data }) => {
  const sums = [];
  columns.forEach((col, index) => {
    if (index === 0) {
      sums[index] = "合计";
    } else if (col.property === "refundAmount") {
      const total = data.reduce((prev, cur) => {
        const v = Number(cur.refundAmount);
        return prev + (isNaN(v) ? 0 : v);
      }, 0);
      sums[index] = total.toLocaleString("zh-CN", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      });
    } else {
      sums[index] = "";
    }
  });
  return sums;
};
const handleOut = () => {
  proxy.download(
    "/accountSales/exportAccountSalesReturn",
    buildFilterParams(),
    `销售退货_${new Date().getTime()}.xlsx`
  );
};
onMounted(() => {
  getTableData();
});
</script>
<style lang="scss" scoped>
.actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>