huminmin
2026-06-01 a563ea879ef5fb6897e76d2df661e465dce2ab9b
src/views/salesManagement/returnOrder/index.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,219 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <el-form :model="searchForm" class="demo-form-inline" :inline="true">
            <el-form-item label="退货单号">
               <el-input v-model="searchForm.returnNo" placeholder="请输入退货单号" clearable />
            </el-form-item>
            <el-form-item label="客户名称">
               <el-input v-model="searchForm.customerName" placeholder="客户名称" clearable />
            </el-form-item>
            <el-form-item label="销售单号">
               <el-input v-model="searchForm.salesContractNo" placeholder="销售单号" clearable />
            </el-form-item>
            <el-form-item label="关联发货单号">
               <el-input v-model="searchForm.shippingNo" placeholder="关联发货单号" clearable />
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="handleQuery">搜索</el-button>
               <el-button @click="handleReset">重置</el-button>
            </el-form-item>
      </el-form>
    </div>
    <div class="table_list">
      <div class="table_header" style="display: flex;justify-content: flex-end;margin-bottom: 10px;">
        <el-button type="primary" @click="openForm('add')">新建销售退货</el-button>
        <el-button type="danger" :disabled="selectedRows.length === 0 || selectedRows.some(row => row.status !== 0)" @click="handleDelete">删除</el-button>
      </div>
      <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :isSelection="true"
        @selection-change="handleSelectionChange"
        :tableLoading="tableLoading"
        @pagination="pagination"
      >
        <template #status="{ row }">
          <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
        </template>
      </PIMTable>
    </div>
    <form-dia ref="formDia" @close="handleQuery" />
    <detail-dia ref="detailDia" />
  </div>
</template>
<script setup>
import { reactive, ref, toRefs, computed, getCurrentInstance, nextTick, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import FormDia from "./components/formDia.vue";
import DetailDia from "./components/detailDia.vue";
import { returnManagementList, returnManagementDel, returnManagementHandle } from "@/api/salesManagement/returnOrder.js";
const { proxy } = getCurrentInstance();
const formDia = ref();
const detailDia = ref();
const openForm = (type, row) => {
  nextTick(() => formDia.value?.openDialog(type, row));
};
const openDetail = (row) => {
  nextTick(() => detailDia.value?.openDialog(row));
};
const handleRowDelete = (row) => {
  if (!row?.id) return;
  ElMessageBox.confirm("该退货单将被删除,是否确认删除?", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    returnManagementDel([row.id]).then(() => {
      proxy.$modal.msgSuccess("删除成功");
      getList();
    });
  });
};
const handleRowHandle = (row) => {
  if (!row?.id) return;
  ElMessageBox.confirm("是否处理该退货单?处理后将无法修改", "处理提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    returnManagementHandle({ returnManagementId: String(row.id) }).then(() => {
      proxy.$modal.msgSuccess("处理成功");
      getList();
    });
  });
}
const data = reactive({
  searchForm: {
    returnNo: "",
    status: "",
    customerName: "",
    salesContractNo: "",
    salesman: "",
    shippingNo: "",
    projectName: "",
    salesLedgerId: "",
    makeTime: ""
  }
});
const { searchForm } = toRefs(data);
const documentStatusOptions = ref([
  { label: "待处理", value: 0 },
  { label: "已处理", value: 1 }
]);
const defaultColumns = [
  { label: "退货单号", prop: "returnNo", minWidth: 160 },
  { label: "单据状态", prop: "status", minWidth: 90, dataType: "slot", slot: "status" },
  { label: "制单时间", prop: "makeTime", minWidth: 170 },
  { label: "客户名称", prop: "customerName", minWidth: 220 },
  { label: "销售单号", prop: "salesContractNo", minWidth: 160 },
  { label: "业务员", prop: "salesman", minWidth: 120 },
  { label: "关联发货单号", prop: "shippingNo", minWidth: 170 },
  { label: "项目名称", prop: "projectName", minWidth: 180 },
  { label: "制单人", prop: "maker", minWidth: 120 },
  {
    label: "操作",
    prop: "operation",
    dataType: "action",
    align: "center",
    fixed: "right",
    minWidth: 240,
    operation: [
      { name: "编辑", disabled: (row) => row.status !== 0, type: "text", clickFun: (row) => openForm("edit", row) },
      { name: "退款处理", disabled: (row) => row.status !== 0, type: "text", clickFun: (row) => handleRowHandle(row) },
      { name: "详情", type: "text", clickFun: (row) => openDetail(row) },
      { name: "删除", disabled: (row) => row.status !== 0, type: "text", clickFun: (row) => handleRowDelete(row) },
    ],
  },
];
const tableColumn = defaultColumns;
const tableData = ref([]);
const tableLoading = ref(false);
const page = reactive({ current: 1, size: 10, total: 0 });
const selectedRows = ref([]);
const tableHeight = computed(() => "calc(100% - 80px)");
const handleReset = () => {
  Object.keys(searchForm.value).forEach(k => searchForm.value[k] = "");
  handleQuery();
};
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
const handleQuery = () => {
  page.current = 1;
  getList();
};
const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};
const getList = () => {
  tableLoading.value = true;
  returnManagementList({ ...searchForm.value, ...page }).then(res => {
    tableLoading.value = false;
    tableData.value = res?.data?.records || [];
    page.total = res?.data?.total || 0;
  }).finally(() => tableLoading.value = false);
};
const handleOut = () => {
  ElMessageBox.alert("导出功能待接入接口", "提示");
};
const handleDelete = () => {
  let ids = [];
  if (selectedRows.value.length === 0) {
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  ids = selectedRows.value.map(i => i.id);
  console.log(ids);
  ElMessageBox.confirm("选中的内容将被删除,是否确认删除?", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    returnManagementDel( ids ).then(() => {
      proxy.$modal.msgSuccess("删除成功");
      getList();
    });
  });
};
const getStatusType = (status) => {
  const statusMap = {
    0: "warning",
    1: "success"
  };
  return statusMap[status] || "info";
};
const getStatusText = (status) => {
  const statusMap = {
    0: "待处理",
    1: "已处理"
  };
  return statusMap[status] || "未知";
};
onMounted(() => {
  getList();
});
</script>
<style scoped lang="scss">
.table_list {
   margin-top: unset;
}
</style>