<template>
|
<div class="app-container">
|
<div class="search_form">
|
<el-form :model="searchForm" :inline="true">
|
<el-form-item label="退料单号：">
|
<el-input
|
v-model="searchForm.no"
|
placeholder="请输入"
|
clearable
|
prefix-icon="Search"
|
@change="handleQuery"
|
/>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery"> 搜索 </el-button>
|
</el-form-item>
|
</el-form>
|
|
<div>
|
<el-button type="primary" @click="isShowNewModal = true"
|
>新增</el-button
|
>
|
</div>
|
</div>
|
|
<div class="table_list">
|
<PIMTable
|
rowKey="id"
|
:column="tableColumn"
|
:tableData="tableData"
|
:tableLoading="tableLoading"
|
:isSelection="true"
|
:page="page"
|
:height="'calc(100vh - 18.5em)'"
|
@selection-change="handleSelectionChange"
|
@pagination="paginationChange"
|
>
|
<template #operation="{ row }">
|
<el-button
|
link
|
type="primary"
|
size="small"
|
style="color: #67c23a"
|
@click="handleDetail(row)"
|
>详情</el-button
|
>
|
<el-button link size="small" @click="handleDelete(row)"
|
>删除</el-button
|
>
|
</template>
|
</PIMTable>
|
</div>
|
<new
|
v-if="isShowNewModal"
|
v-model:visible="isShowNewModal"
|
@completed="handleQuery"
|
/>
|
|
<el-dialog
|
v-model="detailVisible"
|
title="采购退货详情"
|
width="1200"
|
destroy-on-close
|
>
|
<div v-loading="detailLoading">
|
<el-descriptions :column="3" border>
|
<el-descriptions-item label="退料单号">{{
|
detailData.no || "--"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="退货方式">{{
|
getReturnTypeLabel(detailData.returnType)
|
}}</el-descriptions-item>
|
<el-descriptions-item label="供应商名称">{{
|
detailData.supplierName || "--"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="项目阶段">{{
|
getProjectPhaseLabel(detailData.projectPhase)
|
}}</el-descriptions-item>
|
<el-descriptions-item label="关联的采购订单号">{{
|
detailData.purchaseContractNumber || "--"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="制作日期">{{
|
detailData.preparedAt || "--"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="制单人">{{
|
detailData.preparedUserName || "--"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="退料人">{{
|
detailData.returnUserName || "--"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="整单折扣额">{{
|
formatAmount(detailData.totalDiscountAmount)
|
}}</el-descriptions-item>
|
<el-descriptions-item label="整单折扣率">{{
|
detailData.totalDiscountRate ?? "--"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="成交金额">{{
|
formatAmount(detailData.totalAmount)
|
}}</el-descriptions-item>
|
<el-descriptions-item label="创建人">{{
|
detailData.createUserName || "--"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="创建时间">{{
|
detailData.createTime || "--"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="最近更新时间">{{
|
detailData.updateTime || "--"
|
}}</el-descriptions-item>
|
<el-descriptions-item label="备注" :span="3">{{
|
detailData.remark || "--"
|
}}</el-descriptions-item>
|
</el-descriptions>
|
|
<el-divider content-position="left">产品列表</el-divider>
|
|
<el-table
|
:data="detailProducts"
|
border
|
max-height="420"
|
style="width: 100%"
|
>
|
<el-table-column
|
align="center"
|
label="序号"
|
type="index"
|
width="60"
|
/>
|
<el-table-column label="入库单号" prop="inboundBatches" width="150" />
|
<el-table-column label="批次号" prop="batchNo" width="150" />
|
<el-table-column
|
label="产品大类"
|
prop="productCategory"
|
min-width="120"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
label="规格型号"
|
prop="specificationModel"
|
min-width="140"
|
show-overflow-tooltip
|
/>
|
<el-table-column label="单位" prop="unit" width="80" />
|
<el-table-column label="数量" prop="stockInNum" width="80" />
|
<el-table-column label="可退货数量"
|
prop="unQuantity"
|
width="100" />
|
<el-table-column label="已退货数量"
|
prop="totalReturnNum"
|
width="100" />
|
<!-- <el-table-column label="库存预警数量" prop="warnNum" width="120" /> -->
|
<!-- <el-table-column label="税率(%)" prop="taxRate" width="90" /> -->
|
<el-table-column
|
label="含税单价(元)"
|
prop="taxInclusiveUnitPrice"
|
width="130"
|
>
|
<template #default="scope">{{
|
formatAmount(scope.row.taxInclusiveUnitPrice)
|
}}</template>
|
</el-table-column>
|
<!-- <el-table-column
|
label="退货总价(元)"
|
prop="taxInclusiveTotalPrice"
|
width="130"
|
>
|
<template #default="scope">{{
|
formatAmount(scope.row.taxInclusiveTotalPrice)
|
}}</template>
|
</el-table-column>
|
<el-table-column
|
label="不退货总价(元)"
|
prop="taxExclusiveTotalPrice"
|
width="140"
|
>
|
<template #default="scope">{{
|
formatAmount(scope.row.taxExclusiveTotalPrice)
|
}}</template>
|
</el-table-column> -->
|
<el-table-column
|
label="是否质检"
|
prop="isChecked"
|
width="100"
|
align="center"
|
>
|
<template #default="scope">
|
<el-tag :type="scope.row.isChecked ? 'success' : 'info'">
|
{{ scope.row.isChecked ? "是" : "否" }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<template #footer>
|
<el-button @click="detailVisible = false">关闭</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import PIMTable from "@/components/PIMTable/PIMTable.vue";
|
import {
|
ref,
|
reactive,
|
toRefs,
|
onMounted,
|
defineAsyncComponent,
|
getCurrentInstance,
|
} from "vue";
|
const { proxy } = getCurrentInstance();
|
import {
|
findPurchaseReturnOrderListPage,
|
getPurchaseReturnOrderDetail,
|
deletePurchaseReturnOrder,
|
} from "@/api/procurementManagement/purchase_return_order.js";
|
const New = defineAsyncComponent(() =>
|
import("@/views/procurementManagement/purchaseReturnOrder/New.vue")
|
);
|
const tableData = ref([]);
|
const selectedRows = ref([]);
|
const tableLoading = ref(false);
|
const page = reactive({
|
current: 1,
|
size: 100,
|
total: 0,
|
});
|
const detailVisible = ref(false);
|
const detailLoading = ref(false);
|
const detailData = ref({});
|
const detailProducts = ref([]);
|
// 是否显示新增弹框
|
const isShowNewModal = ref(false);
|
const returnTypeOptions = [
|
{ label: "退货退款", value: 0 },
|
{ label: "拒收", value: 1 },
|
];
|
const projectPhaseOptions = [
|
{ label: "立项", value: 0 },
|
{ label: "设计", value: 1 },
|
{ label: "采购", value: 2 },
|
{ label: "生产", value: 3 },
|
{ label: "出货", value: 4 },
|
];
|
const tableColumn = ref([
|
{
|
label: "退料单号",
|
prop: "no",
|
},
|
{
|
label: "退货方式",
|
prop: "returnType",
|
formatData: (val) =>
|
returnTypeOptions.find((item) => item.value === val)?.label || "--",
|
},
|
{
|
label: "供应商名称",
|
prop: "supplierName",
|
width: 180,
|
},
|
{
|
label: "项目阶段",
|
prop: "projectPhase",
|
width: 100,
|
formatData: (val) =>
|
projectPhaseOptions.find((item) => String(item.value) === String(val))
|
?.label || "--",
|
},
|
{
|
label: "关联的采购订单号",
|
prop: "purchaseContractNumber",
|
width: 160,
|
},
|
{
|
label: "制作日期",
|
prop: "preparedAt",
|
width: 130,
|
},
|
{
|
label: "制单人",
|
prop: "preparedUserName",
|
width: 110,
|
},
|
{
|
label: "退料人",
|
prop: "returnUserName",
|
width: 110,
|
},
|
|
{
|
label: "整单折扣额",
|
prop: "totalDiscountAmount",
|
width: 120,
|
},
|
{
|
label: "整单折扣率",
|
prop: "totalDiscountRate",
|
width: 120,
|
},
|
{
|
label: "成交金额",
|
prop: "totalAmount",
|
width: 120,
|
},
|
{
|
label: "创建人",
|
prop: "createUserName",
|
width: 110,
|
},
|
{
|
label: "创建时间",
|
prop: "createTime",
|
width: 170,
|
},
|
{
|
label: "最近更新时间",
|
prop: "updateTime",
|
width: 170,
|
},
|
{
|
label: "备注",
|
prop: "remark",
|
width: 180,
|
},
|
{
|
dataType: "action",
|
width: 120,
|
label: "操作",
|
align: "center",
|
fixed: "right",
|
operation: [
|
{
|
name: "详情",
|
type: "text",
|
clickFun: (row) => {
|
handleDetail(row);
|
},
|
},
|
{
|
name: "删除",
|
clickFun: (row) => {
|
handleDelete(row);
|
},
|
},
|
],
|
},
|
]);
|
const data = reactive({
|
searchForm: {
|
no: "",
|
},
|
});
|
const { searchForm } = toRefs(data);
|
|
// 查询列表
|
/** 搜索按钮操作 */
|
const handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
|
// 删除操作
|
const handleDelete = (row) => {
|
console.log("删除行数据：", row);
|
proxy?.$modal
|
?.confirm("确定要删除吗？删除将无法恢复")
|
.then(() => {
|
// 这里调用删除接口，传入 row.id
|
deletePurchaseReturnOrder(row.id)
|
.then(() => {
|
proxy?.$modal?.msgSuccess?.("删除成功");
|
getList();
|
})
|
.catch(() => {
|
proxy?.$modal?.msgError?.("删除失败");
|
});
|
})
|
.catch(() => {
|
// 取消删除
|
proxy?.$modal?.msgInfo?.("已取消删除");
|
});
|
};
|
// 查看详情
|
const handleDetail = (row) => {
|
if (!row?.id) {
|
proxy?.$modal?.msgWarning?.("未获取到单据ID");
|
return;
|
}
|
detailVisible.value = true;
|
detailLoading.value = true;
|
getPurchaseReturnOrderDetail(row.id)
|
.then((res) => {
|
const payload = res?.data || {};
|
detailData.value = payload;
|
// 拼接连个对象成一个对象，方便展示 item 和 item.salesLedgerProduct 里的字段
|
|
detailProducts.value =
|
payload.purchaseReturnOrderProductsDetailVoList.map((item) => ({
|
...item,
|
...item.salesLedgerProduct,
|
})) || [];
|
})
|
.catch(() => {
|
proxy?.$modal?.msgError?.("获取详情失败");
|
})
|
.finally(() => {
|
detailLoading.value = false;
|
});
|
};
|
|
const paginationChange = (obj) => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const getList = () => {
|
tableLoading.value = true;
|
findPurchaseReturnOrderListPage({ ...searchForm.value, ...page })
|
.then((res) => {
|
tableLoading.value = false;
|
tableData.value = res.data.records;
|
page.total = res.data.total;
|
})
|
.catch(() => {
|
tableLoading.value = false;
|
});
|
};
|
|
// 表格选择数据
|
const handleSelectionChange = (selection) => {
|
// 过滤掉子数据
|
selectedRows.value = selection.filter((item) => item.id);
|
};
|
|
const getReturnTypeLabel = (value) => {
|
return (
|
returnTypeOptions.find((item) => String(item.value) === String(value))
|
?.label || "--"
|
);
|
};
|
|
const getProjectPhaseLabel = (value) => {
|
return (
|
projectPhaseOptions.find((item) => String(item.value) === String(value))
|
?.label || "--"
|
);
|
};
|
|
const formatAmount = (value) => {
|
if (value === null || value === undefined || value === "") {
|
return "--";
|
}
|
const num = Number(value);
|
if (Number.isNaN(num)) {
|
return value;
|
}
|
return num.toFixed(2);
|
};
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
<style scoped>
|
.table_list {
|
margin-top: unset;
|
}
|
</style>
|
