kams4_test_web/src/views/business-asn/asn/index.vue

747 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container">
<!--工具栏-->
<!-- 搜索 -->
<div v-if="crud.props.searchToggle" type="flex">
<!-- 搜索 -->
<!-- <label class="el-form-item-label">单号</label>-->
<el-input v-model="query.code" clearable placeholder="凭证号" style="width: 250px;" class="filter-item"
@keyup.enter.native="crud.toQuery"/>
<el-select v-model="query.status" clearable placeholder="状态" value-key="id" class="filter-item"
@keyup.enter.native="crud.toQuery">
<el-option
style="width: 180px"
v-for="item in this.dict.asn_status"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<rrOperation :crud="crud"/>
</div>
<div class="head-container" v-loading="this.loading_add" element-loading-text="拼命加载中"
element-loading-background="rgba(0, 0, 0, 0.1)">
<!--如果想在工具栏加入更多按钮,可以使用插槽方式, slot = 'left' or 'right'-->
<viewAsnDetail ref="viewAsnDetail"/>
<crudOperation :permission="permission" :tableKey="this.$options.name">
<el-button
slot="left"
class="filter-item"
type="primary"
icon="el-icon-plus"
size="mini"
v-permission="permission.inserAsn"
@click="inserAsnOnOffM()"
>
新增
</el-button>
<el-button
slot="left"
class="filter-item"
type="primary"
icon="el-icon-plus"
size="mini"
@click="stockShangJiaDialogVisible=true"
>
容器上架
</el-button>
<el-button
v-if="false"
slot="left"
class="filter-item"
type="primary"
size="mini"
:disabled="viewZl"
v-permission="permission.invVerify"
@click="zlBtn(crud.selections)">
整理
</el-button>
<el-button
v-if="false"
slot="left"
class="filter-item"
type="primary"
size="mini"
:disabled="viewCy"
v-permission="permission.invVerify"
@click="cyBtn(crud.selections)">
抽样
</el-button>
<el-button
v-if="false"
slot="left"
class="filter-item"
type="primary"
size="mini"
:disabled="viewZj"
v-permission="permission.invVerify"
@click="zjBtn(crud.selections)">
质检
</el-button>
<el-button
v-if="false"
slot="left"
class="filter-item"
type="primary"
size="mini"
:disabled="invVerifySTF"
v-permission="permission.invVerify"
@click="invVerifyS(crud.selections)">
整单入库
</el-button>
</crudOperation>
<!--自己定义新增表单组件-->
<el-dialog :visible.sync="inserAsnOnOff" :title="(this.updateAsnOnOff ? '修改 ':'新增 ')+'收货管理'" width="900px"
>
<el-form ref="form" :model="asnFrom" :rules="rules" size="small" label-width="80px" style="height: 120px">
<el-form-item label="单号" prop="code" style="float: left">
<el-input :disabled="true" v-model="asnFrom.code" style="width: 180px;"/>
</el-form-item>
<el-form-item label="数量" style="float: left">
<el-input :disabled="true" v-model="asnFrom.receivedQuantity" style="width: 180px;"/>
</el-form-item>
<el-form-item label="库区" prop="area" style="float: left">
<!-- <el-input v-model="form.area" style="width: 370px;"/>-->
<el-select v-model="asnFrom.area" clearable placeholder="请选择库区" value-key="id">
<el-option
style="width: 180px"
v-for="item in areaOptions"
:key="item.id"
:label="item.code"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="订单日期" prop="orderDate" style="float: left">
<!-- <el-input v-model="asnFrom.orderDate" style="width: 370px;"/>-->
<el-date-picker
style="width: 180px"
v-model="asnFrom.orderDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="单据类型" style="float: left">
<!-- <el-input v-model="form.billType" style="width: 370px;"/>-->
<el-select @change="billTypeSelect" v-model="asnFrom.billType" clearable placeholder="请选择单据类型"
value-key="id"
style="width: 180px"
>
<el-option
v-for="item in billTypeOptions"
:key="item.code"
:label="item.name"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" style="float: left">
<el-input type="textarea" :rows="2" v-model="asnFrom.description" style="width: 400px;"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="inserAsnOnOff=false">取消</el-button>
<el-button type="primary" @click="submitFrom(asnFrom)">确认</el-button>
</div>
</el-dialog>
<!-- 容器上架-->
<el-dialog
title="容器上架"
:visible.sync="stockShangJiaDialogVisible"
width="30%"
:before-close="stockShangJiaClose">
<el-form :model="stockShangjiaForm" ref="stockShangjiaForm" label-width="100px"
class="demo-ruleForm">
<el-form-item label="容器" prop="stock">
<el-select v-model="stockShangjiaForm.stock"
value-key="id"
placeholder="请选择容器"
clearable
filterable
style="width: 100%"
@change="getStock"
@focus="queryStockShangjia"
>
<el-option
v-for="stocks in stockOptions"
:key="stocks.id"
:label="stocks.code"
:value="stocks"
/>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="stockShangJiaCel">取 消</el-button>
<el-button type="primary" @click="stockShangJiaCof">确 定</el-button>
</span>
</el-dialog>
<!--表单组件-->
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
:title="crud.status.title" width="400px" :height="crud.tableHeight" border
>
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="单号" prop="code">
<el-input :disabled="true" v-model="form.code" style="width: 200px;"/>
</el-form-item>
<el-form-item label="库区" prop="area">
<!-- <el-input v-model="form.area" style="width: 370px;"/>-->
<el-select v-model="form.area" clearable placeholder="请选择库区" style="width: 200px">
<el-option
v-for="item in areaOptions"
:key="item.code"
:label="item.code"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="订单日期" prop="orderDate">
<el-input v-model="form.orderDate" style="width: 200px;"/>
</el-form-item>
<el-form-item label="单据类型">
<!-- <el-input v-model="form.billType" style="width: 370px;"/>-->
<el-select v-model="form.billType" clearable placeholder="请选择单据类型" value-key="id"
style="width: 200px">
<el-option
v-for="item in billTypeOptions"
:key="item.code"
:label="item.name"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.description" style="width: 200px;"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
@selection-change="crud.selectionChangeHandler" :height="crud.tableHeight" @select="invVerifySTFM"
@select-all="invVerifySTFAll" border
>
<el-table-column type="selection" width="55"/>
<el-table-column prop="code" label="凭证号" width="120px" align="center" :show-overflow-tooltip="true"/>
<el-table-column prop="orderDate" label="订单日期" width="120px" align="center">
<template slot-scope="scope">
{{ formatDate1(scope.row.orderDate) }}
</template>
</el-table-column>
<el-table-column prop="billType" label="单据类型">
<template slot-scope="scope">
{{ scope.row.billType.name }}
</template>
</el-table-column>
<el-table-column prop="status" label="状态" align="center">
<template slot-scope="scope">
{{ dict.label.asn_status[scope.row.status] }}
</template>
</el-table-column>
<el-table-column prop="orderQuantity" label="待收数量" align="center"/>
<el-table-column prop="receivedQuantity" label="已收数量" align="center"/>
<el-table-column prop="zlBy" label="SAP收货人" align="center"/>
<el-table-column prop="cyBy" label="申请人" align="center"/>
<el-table-column prop="cusCode" label="SAP接口号" align="center"/>
<el-table-column v-if="checkPer(['admin','asn:edit','asn:del'])" label="操作" align="center" fixed="right">
<template slot-scope="scope">
<el-button
class="filter-item"
type="primary"
icon="el-icon-edit"
size="mini"
@click="asnDetailRouter(scope.row)"
/>
<el-popconfirm
title="是否确定删除?"
@confirm="deleteAsnAndDetail(scope.row)"
>
<el-button
class="filter-item"
slot="reference"
type="danger"
icon="el-icon-delete"
size="mini"
/>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<div style="float: right;">
<pagination/>
</div>
</div>
</div>
</template>
<script>
import DateRangePicker from "@/components/DateRangePicker/index.vue";
import crudAsn, {getCodeNo, queryAsnAll, save, zlRegister, cyRegister, zjRegister} from '@/api/asn'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation.vue'
import crudOperation from '@crud/CRUD.operation.vue'
import udOperation from '@crud/UD.operation.vue'
import pagination from '@crud/Pagination.vue'
import {getAreas} from '@/api/area'
import {getBillType} from '@/api/billType'
import {add, invVerify, queryAsnDetailAll} from '@/api/asnDetail'
import {queryPointList} from '@/api/point'
import {queryItemAll} from '@/api/item'
import {formatDate} from '@/utils/commonUtils'
import {xbjsOut} from "@/api/pickOut";
import viewAsnDetail from "@/views/business-asn/asn/viewAsnDetail.vue"
import crudTask from "@/api/task"
const defaultForm = {
id: null,
code: null,
area: null,
status: 'OPEN',
cusCode: null,
relatedBill1: null,
relatedBill2: null,
relatedBill3: null,
orderDate: null,
estimateDate: null,
receivedDate: null,
fromName: null,
fromAddress: null,
fromMan: null,
fromTel: null,
orderQuantity: 0,
receivedQuantity: 0,
putawayQuantity: 0,
vehicle: null,
billType: null,
dept: null,
description: null,
createBy: null,
updateBy: null,
createTime: null,
updateTime: null
}
export default {
name: 'Asn',
components: {pagination, crudOperation, rrOperation, udOperation, DateRangePicker, viewAsnDetail},
mixins: [presenter(), header(), form(defaultForm), crud()],
dicts: ['asn_status'],
cruds() {
return CRUD({
title: 'asn', url: 'api/asn', idField: 'id', sort: 'id,desc', crudMethod: {...crudAsn}, optShow: {
add: false,
edit: false,
del: false,
reset: false,
download: false
},
queryOnPresenterCreated: true
})
},
data() {
return {
permission: {
add: ['admin', 'asn:add'],
// add1: ['admin', 'asnDetail:add'],
edit: ['admin', 'asn:edit'],
del: ['admin', 'asn:del'],
invVerify: ['admin', 'asn:invVerify'],
inserAsn: ['admin', 'asn:inserAsn'],
},
rules: {
code: [
{required: true, message: '单号不能为空', trigger: 'blur'}
],
area: [
{required: true, message: '库区不能为空', trigger: 'blur'}
],
orderDate: [
{required: true, message: '订单日期不能为空', trigger: 'blur'}
]
},
queryTypeOptions: [
{key: 'code', display_name: '单号'},
{key: 'areaCode', display_name: '库区'},
{key: 'status', display_name: '状态查询'},
],
areaOptions: [],
loading_add: false,
billTypeOptions: [],
//新增数据的弹窗开关
inserAsnOnOff: false,
updateAsnOnOff: false,
asnFrom: {
id: null,
code: null,
area: null,
status: 'OPEN',
cusCode: null,
relatedBill1: null,
relatedBill2: null,
relatedBill3: null,
orderDate: null,
estimateDate: null,
receivedDate: null,
fromName: null,
fromAddress: null,
fromMan: null,
fromTel: null,
orderQuantity: 0,
receivedQuantity: 0,
putawayQuantity: 0,
vehicle: null,
billType: null,
dept: null,
description: null,
createBy: null,
updateBy: null,
createTime: null,
updateTime: null
},
asnDetailFrom: {
id: null,
asn: null,
item: null,
stock: null,
lineNo: null,
po: null,
status: 'OPEN',
point: null,
orderQty: 0,
receivedQty: 0,
moveQty: 0,
putQty: 0,
weight: 0,
volume: 0,
remark: null,
propC1: null,
propC2: null,
propC3: null,
propC4: null,
propC5: null,
propC6: null,
propD1: null,
propD2: null,
deptId: null,
sourceName: null,
sourceId: null,
createBy: null,
updateBy: null,
createTime: null,
updateTime: null
},
asnDetailList: [],
itemListData: [],
pointList: [],
asnOptions: [],
invVerifySTF: true,
viewZl: true,
viewCy: true,
viewZj: true,
asnIdList: [],
stockOptions: [],
stockShangJiaDialogVisible: false,
stockOptionsMap: new Map(),
stockShangjiaForm: {
taskId: null,
stock: {}
}
}
},
mounted() {
//数据加载
this.getAreaOptionsAll()
this.getBillTypeAll()
this.getAsnDetailAll()
this.itemDataGet()
this.getPointData()
this.getAsnData()
},
methods: {
// 钩子在获取表格数据之前执行false 则代表不获取数据
[CRUD.HOOK.beforeRefresh]() {
return true
},
formatDate1(value) {
return formatDate(value);
// const date = new Date(value)
// const year = date.getUTCFullYear()
// const month = (date.getMonth() + 1).toString().padStart(2, '0')
// const day = date.getDate().toString().padStart(2, '0')
// return `${year}-${month}-${day}`;
},
getAreaOptionsAll() {
getAreas().then(res => {
this.areaOptions = res
})
},
getBillTypeAll() {
getBillType().then(res => {
this.billTypeOptions = res
})
},
getAsnDetailAll() {
let obj = {}
queryAsnDetailAll(obj).then(res => {
this.asnDetailList = res
})
},
//新政的开关
inserAsnOnOffM() {
this.$refs.viewAsnDetail.dialogInsertAsn = true
//this.$router.push({path:'/business-asn/viewAsnDetail'})
},
stockShangJiaOffM() {
},
//获取当前时间
getNewDate() {
const date = new Date()
const year = date.getUTCFullYear()
const month = (date.getMonth() + 1).toString().padStart(2, '0')
const day = date.getDate().toString().padStart(2, '0')
const formattedDate = `${year}-${month}-${day}`
return formattedDate
},
submitFrom(data) {
crudAsn.add(data).then(res => {
this.$message.success('新增成功')
this.inserAsnOnOff = false
this.asnFrom = defaultForm;
this.crud.toQuery()
})
},
billTypeSelect(value) {
this.inserAsnOnOffM(value.code)
},
//物料数据
itemDataGet() {
queryItemAll({}).then(res => {
this.itemListData = res
}).catch(e => {
this.$message({
showClose: true,
message: '物料加载失败',
type: 'error'
})
})
},
getPointData() {
queryPointList().then(res => {
this.pointList = res
})
},
//queryAsnAll
getAsnData() {
queryAsnAll().then(res => {
this.asnOptions = res
})
},
asnDetailRouter(datas) {
this.$refs.viewAsnDetail.asnFrom = datas
this.$refs.viewAsnDetail.queryAsnDetail(datas.id)
this.$refs.viewAsnDetail.dialogInsertAsn = true
//this.$router.push({path:'/business-asn/viewAsnDetail',query: {ids:datas.id}})
},
//入库批量确认
invVerifyS(data) {
let ids = [];
for (const idsKey of data) {
ids.push(idsKey.id);
}
invVerify(ids).then(res => {
// if (res != null){
// this.$message.error(res)
// }else {
this.$message.success(res)
this.crud.toQuery()
// }
})
},
invVerifySTFM(selection, row) {
if (selection.length > 0) {
this.invVerifySTF = false;
this.viewZl = false;
this.viewCy = false;
this.viewZj = false;
} else {
return
}
//判断
for (const selectionElement of selection) {
//收货完成
if (selectionElement.status === 'RECEIVED') {
this.invVerifySTF = true;
this.viewZl = true;
this.viewCy = true;
this.viewZj = true;
}
if (selectionElement.status !== 'OPEN') {
this.viewZl = true;
}
if (selectionElement.status !== 'OPEN' && selectionElement.status !== 'ZL') {
this.viewCy = true;
}
if (selectionElement.status !== 'OPEN' && selectionElement.status !== 'ZL' && selectionElement.status !== 'CY') {
this.viewZj = true;
}
}
},
invVerifySTFAll(selection) {
if (selection.length > 0) {
this.invVerifySTF = false;
this.viewZl = true;
this.viewCy = true;
this.viewZj = true;
} else {
return
}
//判断
for (const selectionElement of selection) {
//打开/收货中
if (selectionElement.status === 'RECEIVED') {
this.invVerifySTF = true;
this.viewZl = true;
this.viewCy = true;
this.viewZj = true;
}
}
},
zlBtn(data) {
this.loading_add = true;
let ids = [];
for (const obj of data) {
ids.push(obj.id)
}
zlRegister(ids).then(res => {
this.crud.toQuery()
this.loading_add = false;
this.$message.success("整理登记完成")
}, e => {
this.loading_add = false;
})
},
cyBtn(data) {
this.loading_add = true;
let ids = [];
for (const obj of data) {
ids.push(obj.id)
}
cyRegister(ids).then(res => {
this.crud.toQuery()
this.loading_add = false;
this.$message.success("抽样登记完成")
}, e => {
this.loading_add = false;
})
},
zjBtn(data) {
this.loading_add = true;
let ids = [];
for (const obj of data) {
ids.push(obj.id)
}
zjRegister(ids).then(res => {
this.crud.toQuery()
this.loading_add = false;
this.$message.success("质检登记完成")
}, e => {
this.loading_add = false;
})
},
deleteAsnAndDetail(data) {
this.asnIdList.push(data.id)
crudAsn.deleteAsnAndDetail(this.asnIdList).then(res => {
console.log(res)
if (res.status == 200) {
this.crud.notify(res.message, CRUD.NOTIFICATION_TYPE.SUCCESS);
this.crud.toQuery();
} else {
this.crud.notify(res.message, CRUD.NOTIFICATION_TYPE.ERROR);
}
})
},
queryStockShangjia() {
//待上架任务
crudTask.queryByPutAwayTask('OPEN').then(res => {
// 使用一个对象来存储中间结果,减少重复计算
const stockOptions = res.map(task => task.srcStock);
// 直接使用map方法创建Map
this.stockOptionsMap = new Map(res.map(task => [task.id, task.srcStock]));
// 更新stockOptions
this.stockOptions = stockOptions;
})
},
getStock(stockOption) {
const taskId = this.getKeyByValue(stockOption);
this.stockShangjiaForm.taskId = taskId
},
getKeyByValue(value) {
for (const [key, val] of this.stockOptionsMap.entries()) {
if (val === value) {
return key;
}
}
return null;
},
stockShangJiaCof(){
crudTask.stockShangJia(this.stockShangjiaForm.taskId).then(res => {
if (res.status == 200) {
this.crud.notify(res.message, CRUD.NOTIFICATION_TYPE.SUCCESS);
this.crud.toQuery();
this.stockShangJiaDialogVisible = false;
} else {
this.crud.notify(res.message, CRUD.NOTIFICATION_TYPE.ERROR);
}
})
},
stockShangJiaClose(done) {
this.stockShangjiaForm = {};
// 清空 Map
this.stockOptionsMap.clear();
done();
},
stockShangJiaCel() {
this.stockShangjiaForm = {};
// 清空 Map
this.stockOptionsMap.clear();
this.stockShangJiaDialogVisible = false;
}
}
}
</script>
<style scoped>
</style>