<template>
|
<div>
|
<el-dialog
|
v-model="isShow"
|
title="新增采购退货"
|
width="1200"
|
@close="closeModal"
|
>
|
<el-form label-width="140px" :model="formState" label-position="top" ref="formRef" :inline="true">
|
<el-form-item
|
label="退料单号"
|
prop="no"
|
:rules="[
|
{
|
required: !formState.isDefaultNo,
|
message: '请输入退料单号',
|
trigger: 'blur',
|
}
|
]"
|
>
|
<el-input
|
v-model="formState.no"
|
:placeholder="formState.isDefaultNo ? '使用系统编号' : '请输入退料单号'"
|
:disabled="formState.isDefaultNo"
|
>
|
<template #append>
|
<el-checkbox v-model="formState.isDefaultNo" size="large" @change="handleChangeIsDefaultNo" />
|
</template>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item
|
label="退货方式"
|
prop="returnType"
|
:rules="[
|
{
|
required: true,
|
message: '请选择退货方式',
|
trigger: 'change',
|
}
|
]"
|
>
|
<el-select
|
v-model="formState.returnType"
|
placeholder="请选择退货方式"
|
style="width: 240px"
|
>
|
<el-option label="退货退款" :value="0" />
|
<el-option label="拒收" :value="1" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item
|
label="供应商名称"
|
prop="supplierId"
|
:rules="[
|
{
|
required: true,
|
message: '请选择供应商',
|
trigger: 'change',
|
}
|
]"
|
>
|
<el-select
|
v-model="formState.supplierId"
|
placeholder="请选择供应商"
|
style="width: 240px"
|
@focus="fetchSupplierOptions"
|
@change="handleChangeSupplierId"
|
>
|
<el-option
|
v-for="item in supplierOptions"
|
:key="item.id"
|
:label="item.supplierName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item
|
label="项目"
|
prop="projectId"
|
>
|
<el-select
|
v-model="formState.projectId"
|
placeholder="请选择项目"
|
style="width: 240px"
|
@focus="fetchProjectOptions"
|
>
|
<el-option
|
v-for="item in projectOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item
|
label="项目阶段"
|
prop="projectPhase"
|
>
|
<el-select
|
v-model="formState.projectPhase"
|
placeholder="请选择项目阶段"
|
style="width: 240px"
|
>
|
<el-option
|
v-for="item in projectStageOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item
|
label="制作日期"
|
prop="preparedAt"
|
:rules="[
|
{
|
required: true,
|
message: '请选择制作日期',
|
trigger: 'change',
|
}
|
]"
|
>
|
<el-date-picker
|
v-model="formState.preparedAt"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
type="date"
|
placeholder="请选择制作日期"
|
style="width: 240px"
|
clearable />
|
</el-form-item>
|
|
<el-form-item
|
label="制单人："
|
prop="preparedUserId"
|
:rules="[
|
{
|
required: true,
|
message: '请选择制单人',
|
trigger: 'change',
|
}
|
]"
|
>
|
<el-select
|
v-model="formState.preparedUserId"
|
placeholder="请选择"
|
clearable
|
filterable
|
default-first-option
|
:reserve-keyword="false"
|
style="width: 240px"
|
@focus="fetchUserOptions"
|
>
|
<el-option
|
v-for="item in userOptions"
|
:key="item.userId"
|
:label="item.nickName"
|
:value="item.userId"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item
|
label="退料人："
|
prop="returnUserId"
|
:rules="[
|
{
|
required: true,
|
message: '请选择退料人',
|
trigger: 'change',
|
}
|
]"
|
>
|
<el-select
|
v-model="formState.returnUserId"
|
placeholder="请选择"
|
clearable
|
filterable
|
default-first-option
|
style="width: 240px"
|
:reserve-keyword="false"
|
@focus="fetchUserOptions"
|
>
|
<el-option
|
v-for="item in userOptions"
|
:key="item.userId"
|
:label="item.nickName"
|
:value="item.userId"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item
|
label="采购合同号："
|
prop="purchaseLedgerId"
|
:rules="[
|
{
|
required: true,
|
message: '请选择采购合同号',
|
trigger: 'change',
|
}
|
]"
|
>
|
<el-select
|
v-model="formState.purchaseLedgerId"
|
placeholder="请选择"
|
clearable
|
filterable
|
default-first-option
|
style="width: 240px"
|
:reserve-keyword="false"
|
@change="handleChangePurchaseLedgerId"
|
>
|
<el-option
|
v-for="item in purchaseLedgerOptions"
|
:key="item.id"
|
:label="item.purchaseContractNumber"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item
|
label="备注："
|
prop="remark"
|
>
|
<el-input v-model="formState.remark" type="textarea" placeholder="请输入备注"/>
|
</el-form-item>
|
</el-form>
|
|
<el-button type="primary" size="small" @click="isShowProductsModal = true" :disabled="!formState.purchaseLedgerId">添加产品</el-button>
|
<el-table :data="products" border>
|
<el-table-column align="center"
|
type="selection"
|
width="55" />
|
<el-table-column align="center"
|
label="序号"
|
type="index"
|
width="60" />
|
<el-table-column label="产品大类"
|
prop="productCategory" />
|
<el-table-column label="规格型号"
|
prop="specificationModel" />
|
<el-table-column label="单位"
|
prop="unit"
|
width="70" />
|
<el-table-column label="数量"
|
prop="quantity"
|
width="70" />
|
<el-table-column label="库存预警数量"
|
prop="warnNum"
|
width="120"
|
show-overflow-tooltip />
|
<el-table-column label="税率(%)"
|
prop="taxRate"
|
width="80" />
|
<el-table-column label="含税单价(元)"
|
prop="taxInclusiveUnitPrice"
|
:formatter="formattedNumber"
|
width="150" />
|
<el-table-column label="含税总价(元)"
|
prop="taxInclusiveTotalPrice"
|
:formatter="formattedNumber"
|
width="150" />
|
<el-table-column label="不含税总价(元)"
|
prop="taxExclusiveTotalPrice"
|
:formatter="formattedNumber"
|
width="150" />
|
<el-table-column label="是否质检"
|
prop="isChecked"
|
width="150">
|
<template #default="scope">
|
<el-tag :type="scope.row.isChecked ? 'success' : 'info'">
|
{{ scope.row.isChecked ? '是' : '否' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right"
|
label="操作"
|
width="120"
|
align="center">
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
size="small"
|
>
|
编辑
|
</el-button>
|
<el-button
|
link
|
type="danger"
|
size="small"
|
@click="delProduct(scope.$index)"
|
>
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="handleSubmit">确认</el-button>
|
<el-button @click="closeModal">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<ProductList
|
v-if="isShowProductsModal"
|
v-model:visible="isShowProductsModal"
|
:purchase-ledger-id="formState.purchaseLedgerId"
|
@completed="handleAddProduct"
|
/>
|
|
</div>
|
</template>
|
|
<script setup>
|
import {ref, computed, getCurrentInstance} from "vue";
|
import {createPurchaseReturnOrder} from "@/api/procurementManagement/purchase_return_order.js";
|
import {getOptions, purchaseList} from "@/api/procurementManagement/procurementLedger.js";
|
import {userListNoPageByTenantId} from "@/api/system/user.js";
|
const ProductList = defineAsyncComponent(() => import("@/views/procurementManagement/purchaseReturnOrder/ProductList.vue"));
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
required: true,
|
}
|
});
|
let { proxy } = getCurrentInstance()
|
const emit = defineEmits(['update:visible', 'completed']);
|
|
// 响应式数据（替代选项式的 data）
|
const formState = ref({
|
no: '',
|
isDefaultNo: true,
|
returnType: 0,
|
remark: '',
|
supplierId: undefined,
|
projectId: undefined,
|
projectPhase: undefined,
|
preparedAt: undefined,
|
preparedUserId: undefined,
|
returnUserId: undefined,
|
purchaseLedgerId: undefined,
|
});
|
// 供应商选项
|
const supplierOptions = ref([])
|
// 项目选项
|
const projectOptions = ref([])
|
// 项目阶段选项
|
const projectStageOptions = ref([
|
{
|
label: '立项',
|
value: 0,
|
},
|
{
|
label: '设计',
|
value: 1,
|
},
|
{
|
label: '采购',
|
value: 2,
|
},
|
{
|
label: '生产',
|
value: 3,
|
},
|
{
|
label: '出货',
|
value: 4,
|
}
|
])
|
// 用户选项
|
const userOptions = ref([])
|
// 采购台账选项
|
const purchaseLedgerOptions = ref([])
|
// 产品列表数据
|
const products = ref([])
|
// 是否展示产品列表数据
|
const isShowProductsModal = ref(false)
|
|
const isShow = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit('update:visible', val);
|
},
|
});
|
|
const formattedNumber = (row, column, cellValue) => {
|
return parseFloat(cellValue).toFixed(2);
|
};
|
|
const closeModal = () => {
|
isShow.value = false;
|
};
|
|
// 获取供应商选项
|
const fetchSupplierOptions = () => {
|
if (supplierOptions.value.length > 0) {
|
return
|
}
|
getOptions().then((res) => {
|
supplierOptions.value = res.data;
|
});
|
}
|
|
// 获取项目选项
|
const fetchProjectOptions = () => {
|
if (projectOptions.value.length > 0) {
|
return
|
}
|
// todo 项目选项
|
}
|
|
// 获取用户选项
|
const fetchUserOptions = () => {
|
if (userOptions.value.length > 0) {
|
return
|
}
|
userListNoPageByTenantId().then((res) => {
|
userOptions.value = res.data;
|
});
|
}
|
|
// 处理改变供应商数据
|
const handleChangeSupplierId = () => {
|
formState.value.purchaseLedgerId = undefined
|
fetchPurchaseLedgerOptions()
|
}
|
|
// 获取采购台账选项
|
const fetchPurchaseLedgerOptions = () => {
|
purchaseLedgerOptions.value = []
|
if (formState.value.supplierId) {
|
purchaseList({supplierId: formState.value.supplierId}).then((res) => {
|
purchaseLedgerOptions.value = res.rows;
|
});
|
}
|
}
|
|
// 处理改变采购台账数据
|
const handleChangePurchaseLedgerId = () => {
|
products.value = []
|
}
|
|
// 处理改变是否默认编号
|
const handleChangeIsDefaultNo = (checked) => {
|
if (checked) {
|
formState.value.no = ''
|
}
|
}
|
|
// 增加产品
|
const handleAddProduct = (selectedRows) => {
|
products.value.push(...selectedRows)
|
}
|
|
// 删除单项产品
|
const delProduct = (index) => {
|
products.value.splice(index, 1)
|
}
|
|
// 提交表单
|
const handleSubmit = () => {
|
proxy.$refs["formRef"].validate(valid => {
|
if (valid) {
|
createPurchaseReturnOrder(formState.value).then(res => {
|
// 关闭模态框
|
isShow.value = false;
|
// 告知父组件已完成
|
emit('completed');
|
proxy.$modal.msgSuccess("提交成功");
|
})
|
}
|
})
|
};
|
|
defineExpose({
|
closeModal,
|
handleSubmit,
|
isShow,
|
});
|
</script>
|
