386 lines
14 KiB
Vue
386 lines
14 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')" clearable>
|
||
<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="客户编码" prop="customerNo">-->
|
||
<!-- <el-input-->
|
||
<!-- v-model="queryParams.customerNo"-->
|
||
<!-- placeholder="请输入客户编码"-->
|
||
<!-- clearable-->
|
||
<!-- @keyup.enter.native="handleQuery"-->
|
||
<!-- />-->
|
||
<!-- </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="center" prop="stockoutId" /> <!-- 出库单编号 -->
|
||
<el-table-column :label="$t('outStockoutManage.outType')" align="center" 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="center" 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="center" prop="customerNo" /><!-- 客户编码 -->
|
||
<el-table-column :label="$t('outStockoutManage.customerName')" align="center" prop="customerName" />
|
||
<el-table-column :label="$t('outStockoutManage.createManId')" align="center" prop="createManId" /> <!-- 建单人 -->
|
||
<el-table-column :label="$t('outStockoutManage.createDate')" align="center" prop="createDate" /><!-- 创建时间 -->
|
||
<el-table-column :label="$t('outStockoutManage.startDate')" align="center" prop="startDate" /><!-- 开始时间 -->
|
||
<el-table-column :label="$t('outStockoutManage.finishDate')" align="center" prop="finishDate" /> <!-- 确认时间 -->
|
||
<!-- <el-table-column label="仓库编号" align="center" prop="warehouseId" />-->
|
||
<el-table-column :label="$t('outStockoutManage.warehouseName')" align="center" 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="center" prop="stockoutDetailId" /> <!-- 出库子单编号 -->
|
||
<el-table-column :label="$t('outStockoutManage.productId')" align="center" prop="productId" /> <!-- 物资编码 -->
|
||
<el-table-column :label="$t('outStockoutManage.productName')" align="center" prop="productName" />
|
||
|
||
<el-table-column :label="$t('outStockoutManage.lotNo')" align="center" prop="lotNo" /> <!-- 批次 -->
|
||
<el-table-column :label="$t('outStockoutManage.quantity')" align="center" prop="quantity" /> <!-- 计划数量 -->
|
||
<el-table-column :label="$t('outStockoutManage.assignNum')" align="center" prop="assignNum" /> <!-- 实际数量 -->
|
||
<el-table-column :label="$t('outStockoutManage.allotQuantity')" align="center" prop="allotQuantity" /> <!-- 分配数量 -->
|
||
<!-- <el-table-column :label="$t('outStockoutManage.unit')" align="center" prop="unit" /> <!– 单位 –>-->
|
||
<!-- <el-table-column :label="$t('outStockoutManage.spec')" align="center" prop="spec" /> <!– 规格 –>-->
|
||
<!-- <el-table-column :label="$t('outStockoutManage.price')" align="center" prop="price" /> <!– 价格 –>-->
|
||
<el-table-column :label="$t('outStockoutManage.remark')" align="center" prop="remark" /> <!-- 备注 -->
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="detailTotal>0"
|
||
:total="detailTotal"
|
||
:page.sync="detailQueryParams.pageNum"
|
||
:limit.sync="detailQueryParams.pageSize"
|
||
@pagination="getDetailList"
|
||
/>
|
||
</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: [],
|
||
// 查询参数
|
||
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
|
||
|
||
},
|
||
// 子表总条数
|
||
detailTotal: 0
|
||
}
|
||
},
|
||
created() {
|
||
this.getList()
|
||
this.getWarehouseList()
|
||
},
|
||
methods: {
|
||
/** 获取仓库列表 */
|
||
getWarehouseList() {
|
||
listWarehouse().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
|
||
})
|
||
},
|
||
/** 查询子表数据 */
|
||
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.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("请选择至少一条数据")
|
||
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+"单据已审核，请勿重复审核")
|
||
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+"单据已审核，无法作废")
|
||
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("请选择一条数据")
|
||
return
|
||
}
|
||
if (this.selectedRows.length > 1) {
|
||
this.$modal.msgError("请选择一条数据")
|
||
return
|
||
}
|
||
const stockoutIds = this.selectedRows.map(row => row.stockoutId)
|
||
console.log("自动分配：", stockoutIds)
|
||
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("请选择至少一条数据")
|
||
return
|
||
}
|
||
const stockoutIds = this.selectedRows.map(row => row.stockoutId)
|
||
// TODO: 调用手动分配接口
|
||
console.log("手动分配：", stockoutIds)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.el-form-item >>> .el-form-item__label {
|
||
white-space: nowrap;
|
||
width: auto;
|
||
min-width: fit-content;
|
||
}
|
||
</style>
|