<template>
|
<div class="app-container">
|
<div class="search-wrapper">
|
<el-form :model="searchForm" class="demo-form-inline">
|
<el-row :gutter="20">
|
<el-col :span="4">
|
<el-form-item label="退货单号">
|
<el-input v-model="searchForm.returnNo" placeholder="请输入退货单号" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="客户名称">
|
<el-input v-model="searchForm.customerName" placeholder="客户名称" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="销售单号">
|
<el-input v-model="searchForm.salesContractNo" placeholder="销售单号" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="关联出库单号">
|
<el-input v-model="searchForm.shippingNo" placeholder="关联出库单号" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery">搜索</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</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" plain @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", width: 160 },
|
{ label: "单据状态", prop: "status", width: 90, dataType: "slot", slot: "status" },
|
{ label: "制单时间", prop: "makeTime", width: 170 },
|
{ label: "客户名称", prop: "customerName", width: 220 },
|
{ label: "销售单号", prop: "salesContractNo", width: 160 },
|
{ label: "业务员", prop: "salesman", width: 120 },
|
{ label: "关联出库单号", prop: "shippingNo", width: 170 },
|
{ label: "项目名称", prop: "projectName", width: 180 },
|
{ label: "制单人", prop: "maker", width: 120 },
|
{
|
label: "操作",
|
prop: "operation",
|
dataType: "action",
|
align: "center",
|
fixed: "right",
|
width: 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">
|
.search-wrapper {
|
background: white;
|
padding: 1rem 1rem 0 1rem;
|
border: 8px;
|
border-radius: 16px;
|
}
|
</style>
|
