<template>
|
<el-dialog
|
:model-value="dialogFormVisible"
|
@update:model-value="$emit('update:dialogFormVisible', $event)"
|
:title="title"
|
width="1000px"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<el-form
|
ref="formRef"
|
:model="formData"
|
:rules="rules"
|
label-width="120px"
|
class="purchase-return-form"
|
>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="供应商" prop="supplierId">
|
<el-select
|
v-model="formData.supplierId"
|
placeholder="请选择供应商"
|
style="width: 100%"
|
filterable
|
>
|
<el-option
|
:label="item.label"
|
v-for="item in supplierList"
|
:key="item.value"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="单据日期" prop="returnDate">
|
<el-date-picker
|
v-model="formData.returnDate"
|
type="date"
|
placeholder="请选择单据日期"
|
format="YYYY-MM-DD"
|
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="operatorId">
|
<el-select
|
v-model="formData.operatorId"
|
placeholder="请选择操作员"
|
style="width: 100%"
|
filterable
|
>
|
<el-option
|
:label="item.label"
|
v-for="item in operatorList"
|
:key="item.value"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="退货原因" prop="returnReason">
|
<el-select
|
v-model="formData.returnReason"
|
placeholder="请选择退货原因"
|
style="width: 100%"
|
filterable
|
allow-create
|
>
|
<el-option
|
:label="item.label"
|
v-for="item in returnReasonList"
|
:key="item.value"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="退货数量" prop="returnQuantity">
|
<el-input
|
v-model.number="formData.returnQuantity"
|
placeholder="请输入退货数量"
|
style="width: 100%"
|
>
|
<template v-slot:suffix>
|
<span>吨</span>
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="退货金额" prop="returnAmount">
|
<el-input
|
v-model.number="formData.returnAmount"
|
placeholder="请输入退货金额"
|
style="width: 100%"
|
>
|
<template v-slot:suffix>
|
<span>元</span>
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-form-item label="退货商品信息" prop="returnItems">
|
<div class="return-items-container">
|
<div class="return-items-header">
|
<span>商品明细</span>
|
<el-button type="primary" size="small" @click="addReturnItem">
|
添加商品
|
</el-button>
|
</div>
|
<el-table :data="formData.returnItems" border style="width: 100%">
|
<el-table-column label="商品名称" width="180">
|
<template #default="scope">
|
<el-select
|
v-model="scope.row.coalId"
|
placeholder="请选择商品"
|
style="width: 100%"
|
filterable
|
>
|
<el-option
|
:label="item.label"
|
v-for="item in coalList"
|
:key="item.value"
|
:value="item.value"
|
/>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="规格型号" width="120">
|
<template #default="scope">
|
<el-input
|
v-model="scope.row.specification"
|
placeholder="规格型号"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="数量" width="120">
|
<template #default="scope">
|
<el-input
|
v-model.number="scope.row.quantity"
|
placeholder="数量"
|
type="number"
|
>
|
<template v-slot:suffix>
|
<span>吨</span>
|
</template>
|
</el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="单价" width="120">
|
<template #default="scope">
|
<el-input
|
v-model.number="scope.row.unitPrice"
|
placeholder="单价"
|
type="number"
|
>
|
<template v-slot:suffix>
|
<span>元/吨</span>
|
</template>
|
</el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="小计" width="120">
|
<template #default="scope">
|
<span>{{ (scope.row.quantity * scope.row.unitPrice).toFixed(2) }} 元</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="80">
|
<template #default="scope">
|
<el-button
|
type="danger"
|
size="small"
|
@click="removeReturnItem(scope.$index)"
|
>
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="备注" prop="remark">
|
<el-input
|
v-model="formData.remark"
|
type="textarea"
|
:rows="3"
|
placeholder="请输入备注信息"
|
/>
|
</el-form-item>
|
</el-form>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="handleClose">取消</el-button>
|
<el-button type="primary" @click="handleSubmit" :loading="submitLoading">
|
提交审核
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, reactive, watch, nextTick } from "vue";
|
import { ElMessage } from "element-plus";
|
|
// Props
|
const props = defineProps({
|
dialogFormVisible: {
|
type: Boolean,
|
default: false
|
},
|
form: {
|
type: Object,
|
default: () => ({})
|
},
|
title: {
|
type: String,
|
default: ""
|
},
|
isEdit: {
|
type: Boolean,
|
default: false
|
}
|
});
|
|
// Emits
|
const emit = defineEmits(['update:dialogFormVisible', 'update:form', 'submit', 'success']);
|
|
// 响应式数据
|
const formRef = ref(null);
|
const submitLoading = ref(false);
|
|
// 表单数据
|
const formData = reactive({
|
supplierId: "",
|
returnDate: "",
|
operatorId: "",
|
returnReason: "",
|
returnQuantity: "",
|
returnAmount: "",
|
returnItems: [],
|
remark: ""
|
});
|
|
// 初始化表单数据
|
const initFormData = () => {
|
Object.assign(formData, {
|
supplierId: "",
|
returnDate: "",
|
operatorId: "",
|
returnReason: "",
|
returnQuantity: "",
|
returnAmount: "",
|
returnItems: [],
|
remark: ""
|
});
|
};
|
|
// 供应商列表
|
const supplierList = ref([
|
{ value: "1", label: "供应商A" },
|
{ value: "2", label: "供应商B" },
|
{ value: "3", label: "供应商C" }
|
]);
|
|
// 操作员列表
|
const operatorList = ref([
|
{ value: "1", label: "陈志强" },
|
{ value: "2", label: "刘美玲" },
|
{ value: "3", label: "王建国" }
|
]);
|
|
// 退货原因列表
|
const returnReasonList = ref([
|
{ value: "质量不合格", label: "质量不合格" },
|
{ value: "交货滞后", label: "交货滞后" },
|
{ value: "规格不符", label: "规格不符" },
|
{ value: "数量不符", label: "数量不符" },
|
{ value: "其他原因", label: "其他原因" }
|
]);
|
|
// 商品列表
|
const coalList = ref([
|
{ value: "1", label: "无烟煤" },
|
{ value: "2", label: "烟煤" },
|
{ value: "3", label: "褐煤" },
|
{ value: "4", label: "焦煤" }
|
]);
|
|
// 表单验证规则
|
const rules = {
|
supplierId: [
|
{ required: true, message: "请选择供应商", trigger: "change" }
|
],
|
returnDate: [
|
{ required: true, message: "请选择单据日期", trigger: "change" }
|
],
|
operatorId: [
|
{ required: true, message: "请选择操作员", trigger: "change" }
|
],
|
returnReason: [
|
{ required: true, message: "请选择退货原因", trigger: "change" }
|
],
|
returnQuantity: [
|
{ required: true, message: "请输入退货数量", trigger: "blur" },
|
{ type: "number", min: 0, message: "数量必须大于0", trigger: "blur" }
|
],
|
returnItems: [
|
{
|
type: "array",
|
required: true,
|
message: "请至少添加一个退货商品",
|
trigger: "change",
|
validator: (rule, value, callback) => {
|
if (!value || value.length === 0) {
|
callback(new Error("请至少添加一个退货商品"));
|
} else {
|
callback();
|
}
|
}
|
}
|
]
|
};
|
|
// 监听表单数据变化
|
watch(() => props.form, (newVal) => {
|
Object.assign(formData, newVal);
|
if (!formData.returnItems || formData.returnItems.length === 0) {
|
formData.returnItems = [];
|
}
|
}, { deep: true, immediate: true });
|
|
// 添加退货商品
|
const addReturnItem = () => {
|
formData.returnItems.push({
|
coalId: "",
|
specification: "",
|
quantity: 0,
|
unitPrice: 0
|
});
|
};
|
|
// 删除退货商品
|
const removeReturnItem = (index) => {
|
formData.returnItems.splice(index, 1);
|
};
|
|
// 关闭对话框
|
const handleClose = () => {
|
emit('update:dialogFormVisible', false);
|
formRef.value?.resetFields();
|
};
|
|
// 提交表单
|
const handleSubmit = async () => {
|
if (!formRef.value) return;
|
|
try {
|
await formRef.value.validate();
|
|
// 验证退货商品信息
|
if (formData.returnItems.length === 0) {
|
ElMessage.warning("请至少添加一个退货商品");
|
return;
|
}
|
|
for (let item of formData.returnItems) {
|
if (!item.coalId) {
|
ElMessage.warning("请选择商品");
|
return;
|
}
|
if (!item.quantity || item.quantity <= 0) {
|
ElMessage.warning("请输入有效的商品数量");
|
return;
|
}
|
}
|
|
submitLoading.value = true;
|
|
// 模拟提交
|
setTimeout(() => {
|
submitLoading.value = false;
|
ElMessage.success("提交成功");
|
emit('submit', { ...formData });
|
handleClose();
|
}, 1000);
|
|
} catch (error) {
|
console.error('表单验证失败:', error);
|
}
|
};
|
|
// 计算总数量
|
const calculateTotalQuantity = () => {
|
return formData.returnItems.reduce((total, item) => total + (item.quantity || 0), 0);
|
};
|
|
// 计算总金额
|
const calculateTotalAmount = () => {
|
return formData.returnItems.reduce((total, item) => {
|
return total + ((item.quantity || 0) * (item.unitPrice || 0));
|
}, 0);
|
};
|
|
// 监听退货商品变化，自动计算总数量和总金额
|
watch(() => formData.returnItems, () => {
|
formData.returnQuantity = calculateTotalQuantity();
|
formData.returnAmount = calculateTotalAmount();
|
}, { deep: true });
|
</script>
|
|
<style scoped>
|
.purchase-return-form {
|
padding: 20px 0;
|
}
|
|
.return-items-container {
|
border: 1px solid #dcdfe6;
|
border-radius: 4px;
|
padding: 15px;
|
}
|
|
.return-items-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15px;
|
font-weight: bold;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
|
.el-table {
|
margin-top: 10px;
|
}
|
</style>
|
