<template>
|
<div class="app-container">
|
<el-card class="search-card" shadow="never">
|
<el-form :model="searchForm" :inline="true">
|
<el-form-item label="退货单号：" style="width: 300px;">
|
<el-input v-model="searchForm.returnNo" placeholder="请输入退货单号" clearable />
|
</el-form-item>
|
<el-form-item label="退货类型：" style="width: 300px;">
|
<el-select v-model="searchForm.returnType" placeholder="请选择类型" clearable>
|
<el-option label="采购退货" value="purchase" />
|
<el-option label="质检退货" value="quality" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
<el-button @click="resetSearch">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<el-card class="table-card" shadow="never">
|
<div class="table-header">
|
<el-button type="primary" @click="openDialog('add')">新增退货单</el-button>
|
<el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
|
</div>
|
|
<el-table :data="tableData" border v-loading="loading" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column label="退货单号" prop="returnNo" width="180" />
|
<el-table-column label="关联单号" prop="relatedNo" width="180" />
|
<el-table-column label="退货类型" prop="returnType" width="100">
|
<template #default="{ row }">
|
<el-tag :type="row.returnType === 'purchase' ? 'danger' : 'warning'">
|
{{ getReturnTypeText(row.returnType) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="供应商名称" prop="supplierName" />
|
<el-table-column label="退货状态" prop="status" width="100">
|
<template #default="{ row }">
|
<el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" prop="createTime" width="180" />
|
<el-table-column label="操作" width="200" align="center">
|
<template #default="{ row }">
|
<el-button type="primary" link @click="openDialog('edit', row)">编辑</el-button>
|
<el-button type="success" link @click="handleApprove(row)" v-if="row.status === 'pending'">审核</el-button>
|
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- 分页 -->
|
<pagination
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page="pagination.current"
|
:limit="pagination.size"
|
@pagination="handleCurrentChange"
|
/>
|
</el-card>
|
|
<el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增退货单' : '编辑退货单'" width="600px">
|
<el-form :model="formData" label-width="120px">
|
<el-form-item label="退货类型">
|
<el-select v-model="formData.returnType" placeholder="请选择退货类型" style="width: 100%">
|
<el-option label="采购退货" value="purchase" />
|
<el-option label="质检退货" value="quality" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="关联单号">
|
<el-select v-model="formData.relatedNo" placeholder="请选择关联单号" style="width: 100%">
|
<el-option v-for="item in onList" :key="item.arrivalNo" :label="item.arrivalNo" :value="item.arrivalNo" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="供应商名称">
|
<el-input v-model="formData.supplierName" placeholder="请输入供应商名称" />
|
</el-form-item>
|
<el-form-item label="退货原因">
|
<el-select v-model="formData.returnReason" placeholder="请选择退货原因" style="width: 100%">
|
<el-option label="质量问题" value="quality" />
|
<el-option label="规格不符" value="specification" />
|
<el-option label="数量错误" value="quantity" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive,onMounted } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import Pagination from '@/components/PIMTable/Pagination.vue'
|
import {listPage,add,update,del} from "@/api/procurementManagement/returnManagement.js"
|
import {listPageCopy} from "@/api/procurementManagement/arrivalManagement.js"
|
|
onMounted(() => {
|
getList()
|
list()
|
})
|
const onList = ref([])
|
const list = () =>{
|
listPageCopy({current:-1}).then(res=>{
|
if(res.code === 200){
|
onList.value = res.data.records
|
}
|
})
|
}
|
const tableData = ref([])
|
const getList = () => {
|
loading.value = true
|
listPage({...searchForm,...pagination}).then(res =>{
|
if(res.code === 200){
|
tableData.value = res.data.records
|
console.log(tableData.value)
|
total.value = res.data.total
|
loading.value = false
|
}
|
})
|
}
|
|
const loading = ref(false)
|
const dialogVisible = ref(false)
|
const dialogType = ref('add')
|
const selectedRows = ref([])
|
|
|
const pagination = reactive({
|
current: 1,
|
size: 10
|
})
|
|
const total = ref(0)
|
|
const searchForm = reactive({
|
returnNo: '',
|
returnType: ''
|
})
|
|
const formData = reactive({
|
returnType: '',
|
relatedNo: '',
|
supplierName: '',
|
returnReason: '',
|
remark: '',
|
status: ''
|
})
|
|
const getReturnTypeText = (type) => {
|
const typeMap = { purchase: '采购退货', quality: '质检退货' }
|
return typeMap[type] || '未知'
|
}
|
|
const getStatusType = (status) => {
|
const statusMap = { pending: 'warning', approved: 'success', returned: 'info' }
|
return statusMap[status] || 'info'
|
}
|
|
const getStatusText = (status) => {
|
const statusMap = { pending: '待审核', approved: '已审核', returned: '已退货' }
|
return statusMap[status] || '未知'
|
}
|
|
const handleSearch = () => {
|
loading.value = true
|
getList()
|
}
|
|
const resetSearch = () => {
|
Object.assign(searchForm, { returnNo: '', returnType: '' })
|
}
|
|
const openDialog = (type, row = {}) => {
|
dialogType.value = type
|
obj.id = row.id
|
if (type === 'edit' && row.id) {
|
Object.assign(formData, {
|
returnType: row.returnType,
|
relatedNo: row.relatedNo,
|
supplierName: row.supplierName,
|
returnReason: row.returnReason,
|
remark: row.remark,
|
status: row.status
|
})
|
} else {
|
Object.assign(formData, {
|
returnType: '',
|
relatedNo: '',
|
supplierName: '',
|
returnReason: '',
|
remark: '',
|
status: 'pending'
|
})
|
}
|
dialogVisible.value = true
|
}
|
const obj = reactive({
|
id: ''
|
})
|
const handleSubmit = () => {
|
if (dialogType.value === 'add') {
|
formData.status = 'pending'
|
add(formData).then(res => {
|
if(res.code === 200){
|
ElMessage.success('新增成功')
|
getList()
|
}
|
})
|
}else{
|
update({...formData,...obj}).then(res => {
|
if(res.code === 200){
|
ElMessage.success('修改成功')
|
getList()
|
}
|
})
|
}
|
dialogVisible.value = false
|
}
|
|
const handleApprove = (row) => {
|
row.status = 'approved'
|
update(row).then(res => {
|
if(res.code === 200){
|
ElMessage.success('审核成功')
|
getList()
|
}
|
})
|
}
|
|
const handleDelete = (row) => {
|
ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
let ids = [row.id]
|
del(ids).then(res => {
|
if(res.code === 200){
|
ElMessage.success('删除成功')
|
getList()
|
}
|
})
|
})
|
}
|
|
const handleBatchDelete = () => {
|
let ids = selectedRows.value.map(item => item.id)
|
del(ids).then(res => {
|
if(res.code === 200){
|
ElMessage.success('批量删除成功')
|
getList()
|
}
|
})
|
}
|
|
const handleSelectionChange = (rows) => {
|
selectedRows.value = rows
|
}
|
</script>
|
|
<style scoped>
|
.app-container { padding: 20px; }
|
.search-card { margin-bottom: 20px; }
|
.table-card { margin-bottom: 20px; }
|
.table-header { margin-bottom: 20px; }
|
</style>
|
