<template>
|
<div class="app-container">
|
<el-form :model="filters" :inline="true">
|
<el-form-item label="退货单号:">
|
<el-input v-model="filters.returnCode" placeholder="请输入退货单号" clearable style="width: 200px;" />
|
</el-form-item>
|
<el-form-item label="客户:">
|
<el-select v-model="filters.customerId" placeholder="请选择客户" clearable style="width: 200px;">
|
<el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id" />
|
</el-select>
|
</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="getTableData">搜索</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"
|
:page="{
|
current: pagination.currentPage,
|
size: pagination.pageSize,
|
total: pagination.total,
|
}"
|
@pagination="changePage"
|
>
|
<template #status="{ row }">
|
<el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag>
|
</template>
|
<template #operation="{ row }">
|
<el-button type="primary" link @click="view(row)">查看</el-button>
|
<el-button type="primary" link @click="edit(row)" v-if="row.status === 'pending'">编辑</el-button>
|
<el-button type="success" link @click="handleAudit(row)" v-if="row.status === 'pending'">审核</el-button>
|
</template>
|
</PIMTable>
|
</div>
|
|
<FormDialog :title="dialogTitle" v-model="dialogVisible" width="800px" @confirm="submitForm" @cancel="dialogVisible = false">
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="退货单号" prop="returnCode">
|
<el-input v-model="form.returnCode" placeholder="请输入退货单号" :disabled="isEdit" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="关联出库单" prop="outCode">
|
<el-select v-model="form.outCode" placeholder="请选择出库单" style="width: 100%;" :disabled="isEdit">
|
<el-option v-for="item in outList" :key="item.outCode" :label="item.outCode" :value="item.outCode" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="客户" prop="customerId">
|
<el-select v-model="form.customerId" placeholder="请选择客户" style="width: 100%;" :disabled="isEdit">
|
<el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="退货日期" prop="returnDate">
|
<el-date-picker v-model="form.returnDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="退货金额" prop="amount">
|
<el-input-number v-model="form.amount" :min="0" :precision="2" style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="退货原因" prop="reason">
|
<el-input v-model="form.reason" placeholder="请输入退货原因" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
</template>
|
</FormDialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import FormDialog from "@/components/Dialog/FormDialog.vue";
|
|
defineOptions({
|
name: "销售退货",
|
});
|
|
const filters = reactive({
|
returnCode: "",
|
customerId: "",
|
dateRange: [],
|
});
|
|
const pagination = reactive({
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
});
|
|
const columns = [
|
{ label: "退货单号", prop: "returnCode", width: "150" },
|
{ label: "客户名称", prop: "customerName", width: "180" },
|
{ label: "关联出库单", prop: "outCode", width: "150" },
|
{ label: "退货日期", prop: "returnDate", width: "120" },
|
{ label: "退货金额", prop: "amount", width: "120" },
|
{ label: "退货原因", prop: "reason", width: "150", showOverflowTooltip: true },
|
{ label: "状态", prop: "status", slot: "status" },
|
{ label: "操作", prop: "operation", slot: "operation", width: "200", fixed: "right" },
|
];
|
|
const dataList = ref([]);
|
const dialogVisible = ref(false);
|
const dialogTitle = ref("");
|
const formRef = ref(null);
|
const isEdit = ref(false);
|
const currentId = ref(null);
|
|
const customerList = [
|
{ id: 1, name: "北京科技有限公司" },
|
{ id: 2, name: "上海贸易公司" },
|
{ id: 3, name: "广州实业有限公司" },
|
{ id: 4, name: "深圳电子公司" },
|
];
|
|
const outList = [
|
{ outCode: "CK2024001", customerId: 1 },
|
{ outCode: "CK2024002", customerId: 2 },
|
{ outCode: "CK2024003", customerId: 3 },
|
];
|
|
const form = reactive({
|
returnCode: "",
|
outCode: "",
|
customerId: "",
|
returnDate: "",
|
amount: 0,
|
reason: "",
|
remark: "",
|
});
|
|
const rules = {
|
returnCode: [{ required: true, message: "请输入退货单号", trigger: "blur" }],
|
outCode: [{ required: true, message: "请选择关联出库单", trigger: "change" }],
|
customerId: [{ required: true, message: "请选择客户", trigger: "change" }],
|
returnDate: [{ required: true, message: "请选择退货日期", trigger: "change" }],
|
amount: [{ required: true, message: "请输入退货金额", trigger: "blur" }],
|
};
|
|
const mockData = [
|
{ id: 1, returnCode: "TH2024001", outCode: "CK2024001", customerId: 1, customerName: "北京科技有限公司", returnDate: "2024-01-20", amount: 1000, reason: "质量问题", status: "approved", remark: "" },
|
{ id: 2, returnCode: "TH2024002", outCode: "CK2024002", customerId: 2, customerName: "上海贸易公司", returnDate: "2024-01-22", amount: 500, reason: "规格不符", status: "pending", remark: "" },
|
];
|
|
const getStatusLabel = (status) => {
|
const map = { pending: "待审核", approved: "已审核", rejected: "已驳回" };
|
return map[status] || status;
|
};
|
|
const getStatusType = (status) => {
|
const map = { pending: "warning", approved: "success", rejected: "danger" };
|
return map[status] || "";
|
};
|
|
const getTableData = () => {
|
let result = [...mockData];
|
if (filters.returnCode) {
|
result = result.filter(item => item.returnCode.includes(filters.returnCode));
|
}
|
if (filters.customerId) {
|
result = result.filter(item => item.customerId === filters.customerId);
|
}
|
if (filters.dateRange && filters.dateRange.length === 2) {
|
result = result.filter(item => item.returnDate >= filters.dateRange[0] && item.returnDate <= filters.dateRange[1]);
|
}
|
pagination.total = result.length;
|
dataList.value = result.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize);
|
};
|
|
const resetFilters = () => {
|
filters.returnCode = "";
|
filters.customerId = "";
|
filters.dateRange = [];
|
pagination.currentPage = 1;
|
getTableData();
|
};
|
|
const changePage = ({ current, size }) => {
|
pagination.currentPage = current;
|
pagination.pageSize = size;
|
getTableData();
|
};
|
|
const add = () => {
|
isEdit.value = false;
|
dialogTitle.value = "新增退货";
|
Object.assign(form, {
|
returnCode: "TH" + Date.now(),
|
outCode: "",
|
customerId: "",
|
returnDate: "",
|
amount: 0,
|
reason: "",
|
remark: "",
|
});
|
dialogVisible.value = true;
|
};
|
|
const edit = (row) => {
|
isEdit.value = true;
|
currentId.value = row.id;
|
dialogTitle.value = "编辑退货";
|
Object.assign(form, row);
|
dialogVisible.value = true;
|
};
|
|
const view = (row) => {
|
ElMessage.info(`查看退货单: ${row.returnCode}`);
|
};
|
|
const handleAudit = (row) => {
|
ElMessageBox.confirm("确认审核通过该退货单吗？", "提示", {
|
confirmButtonText: "通过",
|
cancelButtonText: "驳回",
|
distinguishCancelAndClose: true,
|
type: "warning",
|
}).then(() => {
|
const index = mockData.findIndex(item => item.id === row.id);
|
if (index !== -1) {
|
mockData[index].status = "approved";
|
}
|
ElMessage.success("审核通过");
|
getTableData();
|
}).catch((action) => {
|
if (action === "cancel") {
|
const index = mockData.findIndex(item => item.id === row.id);
|
if (index !== -1) {
|
mockData[index].status = "rejected";
|
}
|
ElMessage.warning("已驳回");
|
getTableData();
|
}
|
});
|
};
|
|
const submitForm = () => {
|
formRef.value.validate((valid) => {
|
if (valid) {
|
const customer = customerList.find(item => item.id === form.customerId);
|
if (isEdit.value) {
|
const index = mockData.findIndex(item => item.id === currentId.value);
|
if (index !== -1) {
|
mockData[index] = { ...mockData[index], ...form, customerName: customer?.name };
|
}
|
ElMessage.success("编辑成功");
|
} else {
|
const newId = mockData.length > 0 ? Math.max(...mockData.map(item => item.id)) + 1 : 1;
|
mockData.push({ id: newId, ...form, customerName: customer?.name, status: "pending" });
|
ElMessage.success("新增成功");
|
}
|
dialogVisible.value = false;
|
getTableData();
|
}
|
});
|
};
|
|
const handleOut = () => {
|
ElMessage.success("导出成功");
|
};
|
|
onMounted(() => {
|
getTableData();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.actions {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 15px;
|
}
|
</style>
|
