<template>
|
<div class="app-container">
|
<el-tabs v-model="activeTab" @tab-change="handleTabChange" class="out-tabs">
|
<el-tab-pane label="发料" name="issue" />
|
<el-tab-pane label="销售出库" name="sales" />
|
<el-tab-pane label="退货出库" name="purchaseReturn" />
|
</el-tabs>
|
<div class="search_form">
|
<div>
|
<span class="search_title ml10">产品大类：</span>
|
<el-input
|
v-model="searchForm.productCategory"
|
style="width: 240px"
|
placeholder="请输入"
|
clearable
|
@keyup.enter="handleQuery"
|
/>
|
<el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
|
</div>
|
<div>
|
<el-button @click="handleOut">导出</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<el-table
|
:data="tableData"
|
border
|
v-loading="tableLoading"
|
@selection-change="handleSelectionChange"
|
:row-key="row => row.id"
|
show-summary
|
style="width: 100%"
|
:summary-method="summarizeMainTable"
|
height="calc(100vh - 21em)"
|
>
|
<el-table-column align="center" type="selection" width="55" />
|
<el-table-column align="center" label="序号" type="index" width="60" />
|
<el-table-column label="批次号" width="150" show-overflow-tooltip>
|
<template #default="scope">{{ scope.row.code || scope.row.inboundBatches }}</template>
|
</el-table-column>
|
<el-table-column label="产品大类" prop="productCategory" show-overflow-tooltip />
|
<el-table-column label="规格型号" prop="specificationModel" show-overflow-tooltip />
|
<el-table-column label="单位" prop="unit" width="70" show-overflow-tooltip />
|
<el-table-column v-if="activeTab === 'issue'" label="物品类型" prop="itemType" show-overflow-tooltip />
|
<el-table-column v-if="activeTab === 'sales'" label="客户名称" prop="customerName" show-overflow-tooltip />
|
<el-table-column v-if="activeTab === 'purchaseReturn'" label="供应商" prop="supplierName" show-overflow-tooltip />
|
<el-table-column :label="cfg.availLabel" prop="inboundNum0" width="110" show-overflow-tooltip />
|
<el-table-column fixed="right" label="操作" width="110" align="center">
|
<template #default="scope">
|
<el-button link type="primary" size="small" @click="openForm(scope.row)">{{ cfg.outLabel }}</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page="page.current"
|
:limit="page.size"
|
@pagination="paginationChange"
|
/>
|
</div>
|
<el-dialog v-model="dialogFormVisible" :title="cfg.dialogTitle" width="40%" @close="closeDia" draggable>
|
<el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
|
<div v-if="activeTab === 'purchaseReturn'" style="margin-bottom: 12px">
|
供应商：{{ currentRow.supplierName || '-' }}
|
</div>
|
<div>{{ cfg.availLabel }}：{{ currentRowNum }}</div>
|
<el-form-item :label="cfg.qtyLabel" prop="inboundQuantity">
|
<el-input-number :step="0.01" :min="0" :max="currentRowNum" style="width: 100%" v-model="form.inboundQuantity" placeholder="请输入" clearable />
|
</el-form-item>
|
<el-form-item :label="cfg.dateLabel" prop="inboundTime">
|
<el-date-picker style="width: 100%" v-model="form.inboundTime" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
|
type="date" placeholder="请选择" clearable />
|
</el-form-item>
|
<el-form-item :label="cfg.personLabel" prop="nickName">
|
<el-select v-model="form.nickName"
|
filterable
|
default-first-option
|
:reserve-keyword="false" placeholder="请选择" clearable>
|
<el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确认</el-button>
|
<el-button @click="closeDia">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import pagination from '@/components/PIMTable/Pagination.vue'
|
import { ref, reactive, toRefs, onMounted, computed, getCurrentInstance } from 'vue'
|
import { ElMessageBox } from "element-plus";
|
import { userListNoPageByTenantId } from "@/api/system/user.js";
|
import {
|
getInPageByCustom,
|
getStockInPage,
|
getStockInPageByProduction,
|
} from "@/api/inventoryManagement/stockIn.js";
|
import {
|
stockOut,
|
} from "@/api/inventoryManagement/stockManage.js";
|
import { getCurrentDate } from "@/utils/index.js";
|
|
const { proxy } = getCurrentInstance()
|
const tableData = ref([])
|
const selectedRows = ref([])
|
const userList = ref([])
|
const tableLoading = ref(false)
|
const activeTab = ref('issue')
|
const page = reactive({
|
current: 1,
|
size: 100,
|
})
|
const total = ref(0)
|
|
// 三种出库类型配置：发料(type=3 自定义出库)、销售出库(type=2)、退货出库(type=5 采购退货出库)
|
const tabConfig = {
|
issue: {
|
type: 3,
|
outLabel: '发料',
|
dialogTitle: '新增发料',
|
availLabel: '可发料数量',
|
qtyLabel: '发料数量：',
|
dateLabel: '发料日期：',
|
personLabel: '发料人：',
|
exportUrl: '/stockmanagement/exportTwo',
|
exportName: '发料台账.xlsx',
|
},
|
sales: {
|
type: 2,
|
outLabel: '销售出库',
|
dialogTitle: '新增销售出库',
|
availLabel: '可出库数量',
|
qtyLabel: '出库数量：',
|
dateLabel: '出库日期：',
|
personLabel: '经手人：',
|
exportUrl: '/stockmanagement/exportOne',
|
exportName: '销售出库台账.xlsx',
|
},
|
purchaseReturn: {
|
type: 5,
|
outLabel: '退货出库',
|
dialogTitle: '新增退货出库',
|
availLabel: '可退货数量',
|
qtyLabel: '退货数量：',
|
dateLabel: '退货日期：',
|
personLabel: '经手人：',
|
exportUrl: '/stockmanagement/exportPurchaseReturn',
|
exportName: '退货出库台账.xlsx',
|
},
|
}
|
const cfg = computed(() => tabConfig[activeTab.value] || tabConfig.issue)
|
|
// 用户信息表单弹框数据
|
const dialogFormVisible = ref(false)
|
const currentRow = ref({})
|
const currentRowNum = ref(0)
|
const data = reactive({
|
searchForm: {
|
productCategory: '',
|
},
|
form: {
|
productrecordId: '',
|
},
|
rules: {
|
inboundTime: [{ required: true, message: "请选择", trigger: "change" }],
|
inboundQuantity: [{ required: true, message: "请输入", trigger: "blur" }],
|
nickName: [{ required: true, message: "请选择", trigger: "change" }]
|
}
|
})
|
const { searchForm, form, rules } = toRefs(data)
|
|
const handleTabChange = () => {
|
page.current = 1
|
getList()
|
}
|
/** 搜索按钮操作 */
|
const handleQuery = () => {
|
page.current = 1
|
getList()
|
}
|
const paginationChange = (obj) => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList()
|
}
|
// 按 tab 选择"可出库库存"来源：发料=自定义入库；销售出库=生产入库；退货出库=采购入库
|
const fetchSource = (params) => {
|
if (activeTab.value === 'sales') return getStockInPageByProduction(params)
|
if (activeTab.value === 'purchaseReturn') return getStockInPage(params)
|
return getInPageByCustom(params)
|
}
|
const getList = () => {
|
tableLoading.value = true
|
const params = { ...page }
|
params.productCategory = searchForm.value.productCategory
|
params.flag = true
|
fetchSource(params).then(res => {
|
tableLoading.value = false
|
tableData.value = res.data.records || []
|
total.value = res.data.total
|
}).catch(() => {
|
tableLoading.value = false
|
})
|
}
|
|
// 表格选择数据
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection.filter(item => item.id);
|
}
|
|
// 主表合计方法
|
const summarizeMainTable = (param) => {
|
return proxy.summarizeTable(param, ['taxInclusiveTotalPrice', 'taxExclusiveTotalPrice']);
|
}
|
|
// 打开弹框
|
const openForm = async (row) => {
|
dialogFormVisible.value = true
|
currentRow.value = row || {}
|
currentRowNum.value = row ? row.inboundNum0 : 0
|
form.value = {}
|
// 加载用户列表
|
try {
|
const userLists = await userListNoPageByTenantId()
|
userList.value = userLists.data
|
// 材料出库默认发料人
|
const defaultPersonName = '吴玉梅'
|
const defaultPerson = userList.value.find(user => user.nickName === defaultPersonName)
|
const defaultUserId = defaultPerson ? defaultPerson.userId : ''
|
form.value = {
|
productrecordId: '',
|
inboundQuantity: currentRowNum.value,
|
inboundTime: getCurrentDate(),
|
nickName: defaultUserId,
|
}
|
} catch (error) {
|
form.value = {
|
productrecordId: '',
|
inboundQuantity: currentRowNum.value,
|
inboundTime: getCurrentDate(),
|
nickName: '',
|
}
|
}
|
}
|
|
// 提交表单
|
const submitForm = () => {
|
let num = Number(form.value.inboundQuantity)
|
if (num <= 0 || num > currentRowNum.value) {
|
return proxy.$modal.msgWarning("请填入有效数字")
|
}
|
proxy.$refs["formRef"].validate(valid => {
|
if (valid && currentRow.value && currentRow.value.id) {
|
const outData = {
|
id: currentRow.value.id, // 来源入库记录ID
|
salesLedgerProductId: currentRow.value.salesLedgerProductId || 0,
|
quantity: form.value.inboundQuantity, // 出库数量
|
time: form.value.inboundTime, // 出库时间
|
userId: form.value.nickName, // 经手人
|
type: cfg.value.type, // 出库类型：3发料 / 2销售出库 / 5退货出库
|
supplierName: currentRow.value.supplierName || '', // 退货出库-退回供应商
|
}
|
stockOut(outData).then(res => {
|
proxy.$modal.msgSuccess("提交成功")
|
closeDia()
|
getList()
|
}).catch(err => {
|
proxy.$modal.msgError("出库失败")
|
})
|
}
|
})
|
}
|
// 关闭弹框
|
const closeDia = () => {
|
proxy.resetForm("formRef")
|
dialogFormVisible.value = false
|
}
|
|
// 导出
|
const handleOut = () => {
|
ElMessageBox.confirm(
|
'是否确认导出？',
|
'导出', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}
|
).then(() => {
|
proxy.download(cfg.value.exportUrl, {}, cfg.value.exportName)
|
}).catch(() => {
|
proxy.$modal.msg("已取消")
|
})
|
}
|
|
onMounted(() => {
|
getList()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.out-tabs {
|
margin-bottom: 6px;
|
}
|
</style>
|
