<template>
|
<div class="app-container">
|
<el-form :inline="true" :model="queryParams" class="search-form">
|
<el-form-item label="退货单号">
|
<el-input
|
v-model="queryParams.returnNo"
|
placeholder="请输入退货单号"
|
clearable
|
:style="{ width: '200px' }"
|
/>
|
</el-form-item>
|
<el-form-item label="供应商">
|
<el-select
|
v-model="queryParams.supplierId"
|
placeholder="请选择供应商"
|
clearable
|
:style="{ width: '200px' }"
|
>
|
<el-option
|
:label="item.label"
|
v-for="item in supplierList"
|
:key="item.value"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-select
|
v-model="queryParams.status"
|
placeholder="请选择状态"
|
clearable
|
:style="{ width: '150px' }"
|
>
|
<el-option
|
:label="item.label"
|
v-for="item in statusList"
|
:key="item.value"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="单据日期">
|
<el-date-picker
|
v-model="queryParams.dateRange"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
:style="{ width: '240px' }"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery">查询</el-button>
|
<el-button @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-card>
|
<!-- 操作按钮区 -->
|
<el-row :gutter="24" class="table-toolbar" justify="space-between">
|
<el-button type="primary" :icon="Plus" @click="handleAdd">
|
新增退货单
|
</el-button>
|
<el-button type="success" :icon="Refresh" @click="handleGenerateReturn">
|
一键生成退货单
|
</el-button>
|
<el-button type="danger" :icon="Delete" @click="handleBatchDelete" :disabled="selectedIds.length === 0">
|
批量删除
|
</el-button>
|
</el-row>
|
|
<!-- 表格组件 -->
|
<el-table
|
v-loading="loading"
|
:data="tableData"
|
@selection-change="handleSelectionChange"
|
border
|
style="width: 100%"
|
>
|
<el-table-column type="selection" width="55" />
|
<el-table-column label="退货单号" prop="returnNo" width="180" />
|
<el-table-column label="供应商" prop="supplierName" width="200" />
|
<el-table-column label="单据日期" prop="returnDate" width="120" />
|
<el-table-column label="操作员" prop="operatorName" width="120" />
|
<el-table-column label="退货原因" prop="returnReason" width="200" show-overflow-tooltip />
|
<el-table-column label="退货数量" prop="returnQuantity" width="120">
|
<template #default="scope">
|
{{ scope.row.returnQuantity }} 吨
|
</template>
|
</el-table-column>
|
<el-table-column label="状态" prop="status" width="100">
|
<template #default="scope">
|
<el-tag :type="getStatusType(scope.row.status)">
|
{{ getStatusText(scope.row.status) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" prop="createTime" width="160" />
|
<el-table-column label="操作" width="200" fixed="right">
|
<template #default="scope">
|
<el-button
|
size="small"
|
type="primary"
|
@click="handleView(scope.row)"
|
>
|
查看
|
</el-button>
|
<el-button
|
size="small"
|
type="warning"
|
@click="handleEdit(scope.row)"
|
v-if="scope.row.status === 'draft'"
|
>
|
编辑
|
</el-button>
|
<el-button
|
size="small"
|
type="danger"
|
@click="handleDelete(scope.row)"
|
v-if="scope.row.status === 'draft'"
|
>
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页组件 -->
|
<pagination
|
v-if="total > 0"
|
:page="current"
|
:limit="pageSize"
|
:total="total"
|
@pagination="handlePagination"
|
:layout="'total, prev, pager, next, jumper'"
|
/>
|
</el-card>
|
|
<!-- 新增/编辑对话框 -->
|
<PurchaseReturnDialog
|
v-model:dialogFormVisible="dialogFormVisible"
|
v-model:form="form"
|
:title="title"
|
:is-edit="isEdit"
|
@submit="handleSubmit"
|
@success="handleSuccess"
|
ref="purchaseReturnDialog"
|
/>
|
|
<!-- 查看详情对话框 -->
|
<PurchaseReturnViewDialog
|
v-model:dialogViewVisible="dialogViewVisible"
|
:form="viewForm"
|
title="退货单详情"
|
/>
|
|
<!-- 一键生成退货单对话框 -->
|
<GenerateReturnDialog
|
v-model:dialogGenerateVisible="dialogGenerateVisible"
|
@success="handleGenerateSuccess"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import { Plus, Edit, Delete, Refresh, View } from "@element-plus/icons-vue";
|
import Pagination from "@/components/Pagination";
|
import PurchaseReturnDialog from "./components/PurchaseReturnDialog.vue";
|
import PurchaseReturnViewDialog from "./components/PurchaseReturnViewDialog.vue";
|
import GenerateReturnDialog from "./components/GenerateReturnDialog.vue";
|
|
// 响应式数据
|
const loading = ref(false);
|
const tableData = ref([]);
|
const selectedIds = ref([]);
|
const current = ref(1);
|
const pageSize = ref(10);
|
const total = ref(0);
|
const dialogFormVisible = ref(false);
|
const dialogViewVisible = ref(false);
|
const dialogGenerateVisible = ref(false);
|
const isEdit = ref(false);
|
const title = ref("");
|
const form = ref({});
|
const viewForm = ref({});
|
|
// 查询参数
|
const queryParams = reactive({
|
returnNo: "",
|
supplierId: "",
|
status: "",
|
dateRange: []
|
});
|
|
// 供应商列表
|
const supplierList = ref([
|
{ value: "1", label: "供应商A" },
|
{ value: "2", label: "供应商B" },
|
{ value: "3", label: "供应商C" }
|
]);
|
|
// 状态列表
|
const statusList = ref([
|
{ value: "draft", label: "草稿" },
|
{ value: "pending", label: "待审核" },
|
{ value: "approved", label: "已审核" },
|
{ value: "rejected", label: "已拒绝" },
|
{ value: "completed", label: "已完成" }
|
]);
|
|
// 模拟数据
|
const mockData = [
|
{
|
id: "1",
|
returnNo: "TH20241201001",
|
supplierName: "供应商A",
|
returnDate: "2024-12-01",
|
operatorName: "陈志强",
|
returnReason: "质量不合格，煤质不符合要求",
|
returnQuantity: 50,
|
status: "pending",
|
createTime: "2024-12-01 10:00:00"
|
},
|
{
|
id: "2",
|
returnNo: "TH20241201002",
|
supplierName: "供应商B",
|
returnDate: "2024-12-01",
|
operatorName: "刘美玲",
|
returnReason: "交货滞后，影响生产计划",
|
returnQuantity: 30,
|
status: "approved",
|
createTime: "2024-12-01 14:30:00"
|
}
|
];
|
|
// 获取状态类型
|
const getStatusType = (status) => {
|
const statusMap = {
|
draft: "",
|
pending: "warning",
|
approved: "success",
|
rejected: "danger",
|
completed: "info"
|
};
|
return statusMap[status] || "";
|
};
|
|
// 获取状态文本
|
const getStatusText = (status) => {
|
const statusMap = {
|
draft: "草稿",
|
pending: "待审核",
|
approved: "已审核",
|
rejected: "已拒绝",
|
completed: "已完成"
|
};
|
return statusMap[status] || status;
|
};
|
|
// 查询
|
const handleQuery = () => {
|
current.value = 1;
|
loadData();
|
};
|
|
// 重置查询
|
const resetQuery = () => {
|
Object.assign(queryParams, {
|
returnNo: "",
|
supplierId: "",
|
status: "",
|
dateRange: []
|
});
|
handleQuery();
|
};
|
|
// 加载数据
|
const loadData = () => {
|
loading.value = true;
|
// 模拟API调用
|
setTimeout(() => {
|
tableData.value = mockData;
|
total.value = mockData.length;
|
loading.value = false;
|
}, 500);
|
};
|
|
// 分页处理
|
const handlePagination = (pagination) => {
|
current.value = pagination.page;
|
pageSize.value = pagination.limit;
|
loadData();
|
};
|
|
// 选择变化
|
const handleSelectionChange = (selection) => {
|
selectedIds.value = selection.map(item => item.id);
|
};
|
|
// 新增
|
const handleAdd = () => {
|
isEdit.value = false;
|
title.value = "新增退货单";
|
form.value = {
|
supplierId: "",
|
returnDate: "",
|
operatorId: "",
|
returnReason: "",
|
returnQuantity: "",
|
returnAmount: "",
|
returnItems: [],
|
remark: ""
|
};
|
dialogFormVisible.value = true;
|
};
|
|
// 编辑
|
const handleEdit = (row) => {
|
isEdit.value = true;
|
title.value = "编辑退货单";
|
form.value = { ...row };
|
dialogFormVisible.value = true;
|
};
|
|
// 查看
|
const handleView = (row) => {
|
viewForm.value = { ...row };
|
dialogViewVisible.value = true;
|
};
|
|
// 删除
|
const handleDelete = (row) => {
|
ElMessageBox.confirm(
|
`确定要删除退货单 ${row.returnNo} 吗？`,
|
"提示",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}
|
).then(() => {
|
// 模拟删除
|
const index = tableData.value.findIndex(item => item.id === row.id);
|
if (index > -1) {
|
tableData.value.splice(index, 1);
|
total.value--;
|
ElMessage.success("删除成功");
|
}
|
});
|
};
|
|
// 批量删除
|
const handleBatchDelete = () => {
|
if (selectedIds.value.length === 0) {
|
ElMessage.warning("请选择要删除的记录");
|
return;
|
}
|
|
ElMessageBox.confirm(
|
`确定要删除选中的 ${selectedIds.value.length} 条记录吗？`,
|
"提示",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}
|
).then(() => {
|
// 模拟批量删除
|
tableData.value = tableData.value.filter(item => !selectedIds.value.includes(item.id));
|
total.value = tableData.value.length;
|
selectedIds.value = [];
|
ElMessage.success("批量删除成功");
|
});
|
};
|
|
// 一键生成退货单
|
const handleGenerateReturn = () => {
|
dialogGenerateVisible.value = true;
|
};
|
|
// 提交表单
|
const handleSubmit = (formData) => {
|
if (isEdit.value) {
|
// 编辑
|
const index = tableData.value.findIndex(item => item.id === formData.id);
|
if (index > -1) {
|
tableData.value[index] = { ...formData };
|
ElMessage.success("编辑成功");
|
}
|
} else {
|
// 新增
|
const newItem = {
|
id: Date.now().toString(),
|
returnNo: `TH${Date.now()}`,
|
supplierName: supplierList.value.find(item => item.value === formData.supplierId)?.label || "",
|
returnDate: formData.returnDate,
|
operatorName: "当前用户",
|
returnReason: formData.returnReason,
|
returnQuantity: formData.returnQuantity,
|
status: "draft",
|
createTime: new Date().toLocaleString()
|
};
|
tableData.value.unshift(newItem);
|
total.value++;
|
ElMessage.success("新增成功");
|
}
|
dialogFormVisible.value = false;
|
};
|
|
// 表单成功回调
|
const handleSuccess = () => {
|
loadData();
|
};
|
|
// 生成退货单成功回调
|
const handleGenerateSuccess = (returnOrder) => {
|
dialogGenerateVisible.value = false;
|
// 将生成的退货单添加到列表中
|
if (returnOrder) {
|
const newItem = {
|
id: Date.now().toString(),
|
returnNo: returnOrder.returnNo,
|
supplierName: returnOrder.supplierName,
|
returnDate: returnOrder.returnDate,
|
operatorName: returnOrder.operatorName,
|
returnReason: returnOrder.returnReason,
|
returnQuantity: returnOrder.returnQuantity,
|
status: returnOrder.status,
|
createTime: returnOrder.createTime,
|
returnItems: returnOrder.returnItems
|
};
|
tableData.value.unshift(newItem);
|
total.value++;
|
}
|
loadData();
|
ElMessage.success("退货单生成成功");
|
};
|
|
// 页面加载
|
onMounted(() => {
|
loadData();
|
});
|
</script>
|
|
<style scoped>
|
.search-form {
|
margin-bottom: 20px;
|
}
|
|
.table-toolbar {
|
margin-bottom: 20px;
|
}
|
|
.el-card {
|
margin-bottom: 20px;
|
}
|
</style>
|
