542 lines
20 KiB
Vue
542 lines
20 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 查询表单 -->
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||
<el-form-item :label="$t('outStockoutManage.stockoutId')" prop="stockoutId"> <!-- 出库单编号 -->
|
||
<el-input
|
||
v-model="queryParams.stockoutId"
|
||
:placeholder="$t('outStockoutManage.inputStockoutId')"
|
||
clearable
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('outStockoutManage.outType')" prop="outType"> <!-- 出库类型 -->
|
||
<el-select v-model="queryParams.outType" :placeholder="$t('outStockoutManage.selectOutType')" clearable>
|
||
<el-option
|
||
v-for="dict in dict.type.out_bill_type"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('outStockoutManage.status')" prop="status"> <!-- 单据状态 -->
|
||
<el-select v-model="queryParams.status" :placeholder="$t('outStockoutManage.selectStatus')">
|
||
<el-option
|
||
v-for="dict in dict.type.out_bill_status"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('outStockoutManage.customerName')" prop="customerName">
|
||
<el-input
|
||
v-model="queryParams.inputCustomerName"
|
||
:placeholder="$t('outStockoutManage.inputCustomerName')"
|
||
clearable
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('outStockoutManage.productName')" prop="productName">
|
||
<el-input
|
||
v-model="queryParams.customerNo"
|
||
:placeholder="$t('outStockoutManage.inputProductName')"
|
||
clearable
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('outStockoutManage.startDate')" prop="startDate">
|
||
<el-date-picker clearable
|
||
v-model="queryParams.startDate"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
:placeholder="$t('outStockoutManage.selectStartDate')">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('outStockoutManage.finishDate')" prop="finishDate">
|
||
<el-date-picker clearable
|
||
v-model="queryParams.finishDate"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
:placeholder="$t('outStockoutManage.selectFinishDate')">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('inReceiveStockin.warehouseId')" prop="warehouseId"><!--仓库-->
|
||
<el-select
|
||
v-model="queryParams.warehouseId"
|
||
:placeholder="$t('inReceiveStockin.selectWarehouseId')"
|
||
clearable
|
||
@change="handleQuery"
|
||
>
|
||
<el-option
|
||
v-for="item in warehouseOptions"
|
||
:key="item.warehouseId"
|
||
:label="item.warehouseName"
|
||
:value="item.warehouseId"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{$t('outStockoutManage.search')}}</el-button> <!-- 搜索 -->
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{$t('outStockoutManage.reset')}}</el-button> <!-- 重置 -->
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 操作按钮 -->
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
icon="el-icon-check"
|
||
size="mini"
|
||
@click="handleAudit(2)"
|
||
v-hasPermi="['out:outStockout:changeStatus']"
|
||
>{{$t('outStockoutManage.audit')}}</el-button> <!-- 单据审核 -->
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="success"
|
||
plain
|
||
icon="el-icon-circle-check"
|
||
size="mini"
|
||
@click="handleAudit(4)"
|
||
v-hasPermi="['out:outStockout:changeStatus']"
|
||
>{{$t('outStockoutManage.confirm')}}</el-button> <!-- 单据确认 -->
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="danger"
|
||
plain
|
||
icon="el-icon-delete"
|
||
size="mini"
|
||
@click="handleAudit(5)"
|
||
v-hasPermi="['out:outStockout:changeStatus']"
|
||
>{{$t('outStockoutManage.cancel')}}</el-button> <!-- 单据作废 -->
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="warning"
|
||
plain
|
||
icon="el-icon-s-promotion"
|
||
size="mini"
|
||
@click="handleAutoAllot"
|
||
v-hasPermi="['out:outStockout:autoAllot']"
|
||
>{{$t('outStockoutManage.autoAllot')}}</el-button> <!-- 自动分配 -->
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="info"
|
||
plain
|
||
icon="el-icon-s-tools"
|
||
size="mini"
|
||
@click="handleManualAllot"
|
||
v-hasPermi="['out:outStockout:manualAllot']"
|
||
>{{$t('outStockoutManage.manualAllot')}}</el-button> <!-- 手动分配 -->
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 主表数据 -->
|
||
<el-table v-loading="loading" :data="outStockoutList" @selection-change="handleSelectionChange" @row-click="handleRowClick">
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<el-table-column :label="$t('outStockoutManage.stockoutId')" align="left" prop="stockoutId" /> <!-- 出库单编号 -->
|
||
<el-table-column :label="$t('outStockoutManage.outType')" align="left" prop="outType"> <!-- 出库类型 -->
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.out_bill_type" :value="scope.row.outType"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="$t('outStockoutManage.status')" align="left" prop="status"> <!-- 单据状态 -->
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.out_bill_status" :value="scope.row.status"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="$t('outStockoutManage.customerNo')" align="left" prop="customerNo" /><!-- 客户编码 -->
|
||
<el-table-column :label="$t('outStockoutManage.customerName')" align="left" prop="customerName" />
|
||
<el-table-column :label="$t('outStockoutManage.createManId')" align="left" prop="createManId" /> <!-- 建单人 -->
|
||
<el-table-column :label="$t('outStockoutManage.createDate')" align="left" prop="createDate" /><!-- 创建时间 -->
|
||
<el-table-column :label="$t('outStockoutManage.startDate')" align="left" prop="startDate" /><!-- 开始时间 -->
|
||
<el-table-column :label="$t('outStockoutManage.finishDate')" align="left" prop="finishDate" /> <!-- 确认时间 -->
|
||
<el-table-column :label="$t('outStockoutManage.warehouseName')" align="left" prop="warehouseName" /><!-- 仓库名称 -->
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="total>0"
|
||
:total="total"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
|
||
<!-- 子表数据 -->
|
||
<el-table v-loading="detailLoading" :data="outStockDetailList.slice((detailQueryParams.pageNum-1)*detailQueryParams.pageSize, detailQueryParams.pageNum*detailQueryParams.pageSize)" style="margin-top: 20px;">
|
||
<el-table-column :label="$t('outStockoutManage.stockoutDetailId')" align="left" prop="stockoutDetailId" /> <!-- 出库子单编号 -->
|
||
<el-table-column :label="$t('outStockoutManage.productId')" align="left" prop="productId" /> <!-- 物资编码 -->
|
||
<el-table-column :label="$t('outStockoutManage.materialDesc')" align="left" prop="extraField.materialDesc" />
|
||
<el-table-column :label="$t('outStockoutManage.englishDesc')" align="left" prop="extraField.englishDesc"/><!--英文描述-->
|
||
<el-table-column :label="$t('outStockoutManage.cartonNo')" align="left" prop="extraField.cartonNo"/><!--箱号-->
|
||
<el-table-column :label="$t('outStockoutManage.packingMethod')" align="left" prop="extraField.packingMethod"/><!--包装方式-->
|
||
<el-table-column :label="$t('outStockoutManage.netWeight')" align="right" width="120px" prop="extraField.netWeight" /> <!--净重-->
|
||
<el-table-column :label="$t('outStockoutManage.quantity')" align="right" prop="quantity" /> <!-- 计划数量 -->
|
||
<el-table-column :label="$t('outStockoutManage.assignNum')" align="right" prop="assignNum" /> <!-- 实际数量 -->
|
||
<el-table-column :label="$t('outStockoutManage.allotQuantity')" align="right" prop="allotQuantity" /> <!-- 分配数量 -->
|
||
<el-table-column :label="$t('outStockoutManage.remark')" align="left" prop="remark" /> <!-- 备注 -->
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="detailTotal>0"
|
||
:total="detailTotal"
|
||
:page.sync="detailQueryParams.pageNum"
|
||
:limit.sync="detailQueryParams.pageSize"
|
||
@pagination="getDetailList"
|
||
/>
|
||
|
||
<!-- 审核弹窗 -->
|
||
<el-dialog :title="$t('outStockoutManage.auditTitle')" :visible.sync="auditDialogVisible" width="400px" append-to-body>
|
||
<el-form ref="auditForm" :model="auditForm" :rules="auditRules" label-width="80px">
|
||
<el-form-item :label="$t('outStockoutManage.selectExit')" prop="exitId">
|
||
<el-select v-model="auditForm.exitId" :placeholder="$t('outStockoutManage.pleaseSelectExit')" clearable>
|
||
<el-option
|
||
v-for="item in exitOptions"
|
||
:key="item.exitId"
|
||
:label="item.exitName"
|
||
:value="item.exitId"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitAudit">{{$t('outStockoutManage.confirmExit')}}</el-button>
|
||
<el-button @click="cancelAudit">{{$t('outStockoutManage.cancelExit')}}</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listOutStockout,autoAllot } from "@/api/out/outStockout"
|
||
import { getOutStockoutDetail,updateOutStockStatus } from "@/api/out/outStockout"
|
||
import {listWarehouse} from "@/api/bas/warehouse";
|
||
|
||
export default {
|
||
name: "OutStockWithDetail",
|
||
dicts: ['out_bill_type', 'out_bill_status'],
|
||
data() {
|
||
return {
|
||
// 遮罩层
|
||
loading: true,
|
||
detailLoading: false,
|
||
warehouseOptions:[],
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
// 总条数
|
||
total: 0,
|
||
// 主表数据
|
||
outStockoutList: [],
|
||
// 子表数据
|
||
outStockDetailList: [],
|
||
// 选中数据
|
||
selectedRows: [],
|
||
// 审核弹窗显示状态
|
||
auditDialogVisible: false,
|
||
// 审核表单数据
|
||
auditForm: {
|
||
exitId: null
|
||
},
|
||
// 审核表单验证规则
|
||
auditRules: {
|
||
exitId: [
|
||
{ required: true, message: this.$t('outStockoutManage.pleaseSelectExit'), trigger: 'change' }
|
||
]
|
||
},
|
||
// 出口选项
|
||
exitOptions: [],
|
||
// 所有出口数据（按仓库ID分组）
|
||
allExitOptions: {
|
||
'02': [
|
||
{ exitId: "G1004", exitName: 'G1004' },
|
||
{ exitId: 'G1010', exitName: 'G1010' },
|
||
{ exitId: 'fluent1', exitName: 'fluent1' },
|
||
{ exitId: 'fluent2', exitName: 'fluent2' },
|
||
],
|
||
'13': [
|
||
{ exitId: 'G2001', exitName: 'G2001' },
|
||
{ exitId: 'G3001', exitName: 'G3001' },
|
||
{ exitId: 'G3010', exitName: 'G3010' },
|
||
{ exitId: 'G4001', exitName: 'G4001' },
|
||
{ exitId: 'G4010', exitName: 'G4010' },
|
||
{ exitId: 'G5001', exitName: 'G5001' },
|
||
{ exitId: 'G5010', exitName: 'G5010' },
|
||
]
|
||
},
|
||
// 当前审核状态
|
||
currentAuditStatus: null,
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
stockoutId: null,
|
||
outType: null,
|
||
customerNo: null,
|
||
customerName: null,
|
||
productName: null,
|
||
startDate: null,
|
||
finishDate: null,
|
||
status: '1'
|
||
},
|
||
// 子表分页参数
|
||
detailQueryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
status:null,
|
||
stockoutGuid:null
|
||
|
||
},
|
||
warehouseQueryParams: {
|
||
pageNum: 1,
|
||
pageSize: 99,
|
||
|
||
},
|
||
// 子表总条数
|
||
detailTotal: 0
|
||
}
|
||
},
|
||
created() {
|
||
this.getList()
|
||
this.getWarehouseList()
|
||
},
|
||
methods: {
|
||
/** 获取仓库列表 */
|
||
getWarehouseList() {
|
||
listWarehouse(this.warehouseQueryParams).then(response => {
|
||
this.warehouseOptions = response.rows;
|
||
if (this.warehouseOptions.length > 0) {
|
||
this.handleQuery();
|
||
}
|
||
});
|
||
},
|
||
/** 查询主表数据 */
|
||
getList() {
|
||
this.loading = true
|
||
listOutStockout(this.queryParams).then(response => {
|
||
this.outStockoutList = response.rows
|
||
this.total = response.total
|
||
this.loading = false
|
||
// 如果有数据，自动选中第一行
|
||
if (this.outStockoutList.length > 0) {
|
||
this.handleRowClick(this.outStockoutList[0]);
|
||
}else {
|
||
this.outStockDetailList = []
|
||
this.detailLoading = false
|
||
}
|
||
|
||
})
|
||
},
|
||
/** 查询子表数据 */
|
||
getDetailList(stockoutGuid,status) {
|
||
this.detailLoading = true
|
||
this.detailQueryParams.stockoutGuid = stockoutGuid
|
||
this.detailQueryParams.status = status
|
||
getOutStockoutDetail(this.detailQueryParams).then(response => {
|
||
this.outStockDetailList = response.rows
|
||
this.detailTotal = response.total
|
||
this.detailLoading = false
|
||
})
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1
|
||
// 清空子表数据
|
||
this.outStockDetailList = []
|
||
this.detailTotal = 0
|
||
this.detailQueryParams.stockoutGuid = null
|
||
this.detailQueryParams.status = null
|
||
this.getList()
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.resetForm("queryForm")
|
||
this.handleQuery()
|
||
},
|
||
/** 点击行加载明细数据 */
|
||
handleRowClick(row) {
|
||
this.getDetailList(row.stockoutGuid,row.status)
|
||
},
|
||
/** 多选框选中数据 */
|
||
handleSelectionChange(selection) {
|
||
this.selectedRows = selection
|
||
},
|
||
/** 单据状态修改按钮操作 */
|
||
handleAudit(status) {
|
||
if (this.selectedRows.length === 0) {
|
||
this.$modal.msgError(this.$t('outStockoutManage.pleaseSelectData'))
|
||
return
|
||
}
|
||
|
||
for(var i=0;i<this.selectedRows.length;i++){
|
||
if (this.selectedRows[i].status != "1" && status == "2") {
|
||
this.$modal.msgError(this.selectedRows[i].stockoutId+this.$t('outStockoutManage.alreadyAudited'))
|
||
return
|
||
}
|
||
|
||
// if (this.selectedRows[i].status < 3 && status == "4") {
|
||
// this.$modal.msgError(this.selectedRows[i].stockoutId+"单据未开始，无法确认")
|
||
// return
|
||
// }
|
||
if (this.selectedRows[i].status != "1" && status == "5"){
|
||
this.$modal.msgError(this.selectedRows[i].stockoutId+this.$t('outStockoutManage.alreadyCancelFail'))
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 如果是审核操作(status=2)，显示弹窗选择出口
|
||
if (status === 2 || status === 3) {
|
||
this.currentAuditStatus = status
|
||
// 根据选中单据的仓库ID设置出口选项
|
||
this.setExitOptionsByWarehouse()
|
||
this.auditDialogVisible = true
|
||
this.auditForm.exitId = null
|
||
return
|
||
}
|
||
|
||
const params = {
|
||
stockoutIds: this.selectedRows.map(row => row.stockoutId),
|
||
status: this.selectedRows[0].status,
|
||
newStatus: status
|
||
}
|
||
console.log("单据状态修改：", params)
|
||
|
||
//调用单据状态改变接口
|
||
updateOutStockStatus(params).then(response => {
|
||
this.$modal.msgSuccess(response)
|
||
this.getList()
|
||
})
|
||
},
|
||
|
||
/** 自动分配按钮操作 */
|
||
handleAutoAllot() {
|
||
if (this.selectedRows.length === 0) {
|
||
this.$modal.msgError(this.$t('outStockoutManage.pleaseSelectData'))
|
||
return
|
||
}
|
||
if (this.selectedRows.length > 1) {
|
||
this.$modal.msgError(this.$t('outStockoutManage.onlyOneCanAutoAllocation'))
|
||
return
|
||
}
|
||
const stockoutIds = this.selectedRows.map(row => row.stockoutId)
|
||
let outstock = this.selectedRows[0]
|
||
console.log(outstock.status !== "2")
|
||
console.log(outstock.status !== "3")
|
||
if (outstock.status !== "2" && outstock.status !== "3") {
|
||
this.$modal.msgError(this.$t('outStockoutManage.auditStockOut'))
|
||
return
|
||
}
|
||
let data = {
|
||
stockoutId: stockoutIds[0]
|
||
}
|
||
autoAllot(data).then(response => {
|
||
if (response.code !== 200){
|
||
this.$modal.msgError(response.msg)
|
||
}else {
|
||
this.$modal.msgSuccess(response.msg)
|
||
}
|
||
this.getList()
|
||
})
|
||
},
|
||
/** 手动分配按钮操作 */
|
||
handleManualAllot() {
|
||
if (this.selectedRows.length === 0) {
|
||
this.$modal.msgError(this.$t('outStockoutManage.pleaseSelectData'))
|
||
return
|
||
}
|
||
const stockoutIds = this.selectedRows.map(row => row.stockoutId)
|
||
let outstock = this.selectedRows[0]
|
||
if (outstock.status !== "1") {
|
||
this.$modal.msgError(this.$t('outStockoutManage.alreadyAuditStockOut'))
|
||
return
|
||
}
|
||
},
|
||
|
||
/** 提交审核 */
|
||
submitAudit() {
|
||
this.$refs["auditForm"].validate(valid => {
|
||
if (valid) {
|
||
const params = {
|
||
stockoutIds: this.selectedRows.map(row => row.stockoutId),
|
||
status: this.selectedRows[0].status,
|
||
newStatus: this.currentAuditStatus,
|
||
exitId: this.auditForm.exitId
|
||
}
|
||
// console.log("单据状态修改（含出口信息）：", params)
|
||
|
||
//调用单据状态改变接口
|
||
updateOutStockStatus(params).then(response => {
|
||
this.$modal.msgSuccess(response)
|
||
this.auditDialogVisible = false
|
||
this.getList()
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
/** 取消审核 */
|
||
cancelAudit() {
|
||
this.auditDialogVisible = false
|
||
this.auditForm.exitId = null
|
||
this.currentAuditStatus = null
|
||
},
|
||
|
||
/** 根据仓库ID设置出口选项 */
|
||
setExitOptionsByWarehouse() {
|
||
try {
|
||
// 获取选中单据的仓库ID集合，过滤掉空值和无效值
|
||
const warehouseIds = [...new Set(
|
||
this.selectedRows
|
||
.map(row => row.warehouseId)
|
||
.filter(id => id !== null && id !== undefined && id !== '')
|
||
)]
|
||
|
||
//console.log("仓库ID集合:", warehouseIds)
|
||
|
||
// 如果没有有效的仓库ID，清空出口选项
|
||
if (warehouseIds.length === 0) {
|
||
this.exitOptions = []
|
||
//console.warn('没有找到有效的仓库ID，已清空出口选项')
|
||
return
|
||
}
|
||
|
||
if (warehouseIds.length === 1) {
|
||
// 如果所有选中单据都是同一个仓库，显示该仓库的出口
|
||
const warehouseId = warehouseIds[0]
|
||
this.exitOptions = this.allExitOptions[warehouseId] || []
|
||
|
||
// 如果没有对应key的默认为空数组，并给出提示
|
||
if (!this.allExitOptions[warehouseId]) {
|
||
//console.warn(`仓库ID ${warehouseId} 没有配置出口选项，已设置为空数组`)
|
||
}
|
||
}
|
||
|
||
console.log('选中仓库ID:', warehouseIds, '可用出口:', this.exitOptions)
|
||
|
||
// 如果最终没有可用的出口选项，给出提示
|
||
if (this.exitOptions.length === 0) {
|
||
this.exitOptions=[{exitId: '0', exitName: '人工出口'}]
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('设置出口选项时发生错误:', error)
|
||
// 发生错误时，设置为空数组，确保不会影响用户操作
|
||
this.exitOptions = []
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.el-form-item >>> .el-form-item__label {
|
||
white-space: nowrap;
|
||
width: auto;
|
||
min-width: fit-content;
|
||
}
|
||
</style>
|