You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

762 lines
24 KiB

2 years ago
<template>
<div>
<xy-dialog ref="dialog" :width='70' :is-show.sync="isShow" type="form" :title="titleName" :form="form"
:rules="rules" @submit="submit">
<template v-slot:chukushijian>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>出库时间
</div>
<div class="xy-table-item-content">
<el-date-picker style="width: 300px;" v-model="form.chukushijian" type="date" placeholder="选择日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</div>
</div>
</template>
<!-- <template v-slot:chukuleixing>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>出库类型
</div>
<div class="xy-table-item-content">
<el-select v-model="form.chukuleixing" style="width: 300px;" placeholder="请选择">
<el-option
v-for="item in lexingoptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</template> -->
<template v-slot:jieyongcangku>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>借用仓库
</div>
<div class="xy-table-item-content">
<el-select v-model="form.jieyongcangku" filterable style="width: 300px;" placeholder="请选择借用仓库">
<el-option v-for="item in cangkuList" :key="item.cangkumingcheng" :label="item.cangkumingcheng"
:value="item.cangkumingcheng">
</el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:jieyongbumen>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>借用部门
</div>
<div class="xy-table-item-content">
<el-input v-model="form.jieyongbumen" placeholder="请填写借用部门" clearable style="width: 300px;"></el-input>
</div>
</div>
</template>
<!-- <template v-slot:jieyongren>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>借用人
</div>
<div class="xy-table-item-content">
<el-input v-model="form.jieyongren" placeholder="请填写借用人" clearable style="width: 300px;"></el-input>
</div>
</div>
</template> -->
<template v-slot:jilurenyuan>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>经办人
</div>
<div class="xy-table-item-content">
<el-input v-model="form.jilurenyuan" placeholder="请输入经办人" clearable style="width: 300px;"></el-input>
</div>
</div>
</template>
<template v-slot:baofeiyuanyin v-if="chukuType=='处置'">
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>报废原因
</div>
<div class="xy-table-item-content">
<el-input type="textarea" v-model="form.baofeiyuanyin" placeholder="请输入报废原因" clearable
style="width: 300px;"></el-input>
</div>
</div>
</template>
<template v-slot:beizhu>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>备注
</div>
<div class="xy-table-item-content">
<el-input type="textarea" v-model="form.beizhu" placeholder="请输入备注" clearable
style="width: 300px;"></el-input>
</div>
</div>
</template>
<template v-slot:chukumingxi>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>出库明细
</div>
<div class="xy-table-item-content">
<Button type="primary" icon="md-add" style="margin-bottom: 10px" @click="isShowMingxi=true"></Button>
<xy-table style="width: 50%" :height="260" :is-page="false" :list="mingxiList" :table-item="mingxiTable">
<template v-slot:btns>
<el-table-column label="操作" width="90" header-align="center" align="center">
2 years ago
<template v-slot:default="scope">
<Poptip transfer confirm title="确认要删除吗?" @on-ok="delMingxiList(scope.$index,scope.row)">
<Button size="small" type="primary" ghost>删除</Button>
</Poptip>
2 years ago
</template>
</el-table-column>
</template>
</xy-table>
</div>
</div>
</template>
</xy-dialog>
<!-- 新增明细 -->
<Modal v-model="isShowMingxi" width='600' title="新增明细" :loading='showLoading' @on-cancel='mingxiCancel'
@on-ok="mingxiConfirm">
<div class="mingxiwrap">
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>物资编码
</div>
<div class="xy-table-item-content">
<el-input type="text" @focus="showWuzi" v-model="mingxiObj.wuzibianma" placeholder="请选择物资编码"
style="width: 300px;"></el-input>
</div>
</div>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>资产名称
</div>
<div class="xy-table-item-content">
<el-input type="text" v-model="mingxiObj.zichanmingcheng" placeholder="请选择资产名称" disabled
style="width: 300px;"></el-input>
</div>
</div>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>规格型号
</div>
<div class="xy-table-item-content">
<el-input type="text" v-model="mingxiObj.guigexinghao" placeholder="请选择规格型号" disabled
style="width: 300px;"></el-input>
</div>
</div>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>物资类型
</div>
<div class="xy-table-item-content">
<el-input type="text" v-model="mingxiObj.wuzileixing" placeholder="请选择物资类型" disabled
style="width: 300px;"></el-input>
</div>
</div>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>入库批次
</div>
<div class="xy-table-item-content">
<el-input type="text" v-model="mingxiObj.rukupici" placeholder="请选择入库批次" disabled
style="width: 300px;"></el-input>
</div>
</div>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>在库数量
</div>
<div class="xy-table-item-content">
<el-input type="text" v-model="mingxiObj.zaikushuliang" placeholder="请选择在库数量" disabled
style="width: 300px;"></el-input>
</div>
</div>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>出库数量
</div>
<div class="xy-table-item-content">
<el-input type="text" @blur='jieyong' v-model="mingxiObj.jieyongshuliang" placeholder="请填写出库数量"
style="width: 300px;"></el-input>
</div>
</div>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>是否回库
</div>
<div class="xy-table-item-content">
<el-select v-model="mingxiObj.shifouhuiku" style="width: 300px;" placeholder="请选择">
<el-option v-for="item in huikuoptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>回库时间
</div>
<div class="xy-table-item-content">
<el-date-picker style="width: 300px;" v-model="mingxiObj.huikushijian" type="date" placeholder="选择日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</div>
</div>
</div>
</Modal>
<!-- 选择库存 -->
<Modal v-model="isShowWuzi" title="库存选择">
2 years ago
<div class="searchCompanys">
<el-input style="margin-right:10px" clearable type="text" @keyup.enter.native="getWuzi" v-model="wuzibianmakeyword" placeholder="请输入物资编码查找库存"></el-input>
<el-input style="margin-right:10px" clearable type="text" @keyup.enter.native="getWuzi" v-model="keyword" placeholder="请输入物资名称查找库存"></el-input>
2 years ago
<el-button type="primary" @click="getWuzi"></el-button>
</div>
<Table highlight-row ref="currentRowTable" :columns="wuziColumns" :data="wuziList"
@on-current-change="wuziSelect" />
<Page :current="wuziPageIndex" :total="wuziTotal" simple
style="padding-top: 14px;display: flex;justify-content: center;" @on-change="wuziPageChange" />
</Modal>
</div>
</template>
<script>
import {
save,
index,
2 years ago
show,
destroy
2 years ago
} from "@/api/system/baseForm.js"
import {
Message
} from 'element-ui'
export default {
data() {
return {
isShow: false,
type: 'add',
id: '',
authName: "",
titleName: '',
2 years ago
keyword: '',
wuzibianmakeyword:'',
2 years ago
chukuType: '',
tableName: 'outbounds',
cangkuList: [],
lexingoptions: [{
label: '领用',
value: '领用'
}, {
label: '处置',
value: '应急'
}],
huikuoptions: [{
label: '是',
value: '是'
}, {
label: '否',
value: '否'
}],
form: {
chukushijian: "",
chukuleixing: '',
jieyongcangku: "",
jieyongbumen: '',
// jieyongren:'',
jilurenyuan: '',
baofeiyuanyin: '',
beizhu: '',
chukumingxi: ''
},
rules: {
chukushijian: [{
required: true,
message: '请选择出库时间'
}],
// chukuleixing: [{
// required: true,
// message: '请选择出库类型'
// }],
// jieyongren: [{
// required: true,
// message: '请填写借用人'
// }],
jilurenyuan: [{
required: true,
message: '请输入经办人'
}],
},
isShowMingxi: false,
mingxiObj: {
wuzibianma: '',
jieyongshuliang: '',
shifouhuiku: '',
huikushijian: ''
},
mingxiObjBefore: {},
mingxiList: [],
showLoading: true,
mingxiIndex: '',
mingxiTable: [{
label: "物资编码",
prop: "wuzibianma",
width: 180
},
{
label: "资产名称",
prop: "zichanmingcheng",
width: 180
},
{
label: "规格型号",
prop: "guigexinghao",
width: 180
}, {
label: "物资类型",
prop: "wuzileixing",
width: 180
}, {
label: "计量单位",
prop: "jiliangdanwei",
width: 180
}, {
label: "入库批次",
prop: "rukupici",
width: 180
}, , {
label: "在库数量",
prop: "zaikushuliang",
width: 180
}, {
label: "借用数量",
prop: "jieyongshuliang",
width: 180
}, {
label: "是否回库",
prop: "shifouhuiku",
width: 180
}, , {
label: "回库时间",
prop: "huikushijian",
width: 180
}
],
// 物资
isShowWuzi: false,
wuziList: [],
wuziPageIndex: 1,
wuziTotal: 0,
wuziColumns: [{
width: 60,
_isChecked: false,
key: "isSelect",
resizable: true,
render: (h, params) => {
return h('div', [
h('Radio', {
props: {
value: params.row.isSelect
},
on: {
'on-change': (e) => {
this.showList.forEach((items) => {
this.$set(items, 'isSelect', false)
});
this.showList[params.index].isSelect = e;
}
}
})
])
}
},
{
title: '名称',
key: 'names',
},
{
title: '在库数量',
key: 'zaikushuliang',
},
{
title: '物资类型',
key: 'wuzileixing',
2 years ago
},
{
title: '入库批次',
key: 'rukupici',
},
2 years ago
],
wuziList: []
}
},
created() {
this.getCangku()
this.getWuzi()
},
methods: {
jieyong() {
if (parseInt(this.mingxiObj.jieyongshuliang) > parseInt(this.mingxiObj.zaikushuliang)) {
Message({
type: 'warning',
message: '库存不足'
})
return false
}
},
// 明细
mingxiConfirm() {
setTimeout(() => {
this.showLoading = false
this.$nextTick(() => {
this.showLoading = true
})
2 years ago
}, 500)
if (JSON.stringify(this.mingxiObj)=="{}"||this.mingxiObj.wuzibianma == '' || this.mingxiObj.jieyongshuliang == '' || this.mingxiObj.shifouhuiku ==
2 years ago
'') {
Message({
type: 'warning',
message: '请填写完整数据'
})
this.showLoading = false
return
}
if (parseInt(this.mingxiObj.jieyongshuliang) > parseInt(this.mingxiObj.zaikushuliang)) {
Message({
type: 'warning',
message: '库存不足'
})
return
2 years ago
}
if (this.mingxiIndex != '') {
this.mingxiList[this.mingxiIndex - 1] = this.mingxiObj
} else {
this.mingxiList.push(this.mingxiObj)
}
this.wuziList.forEach((items) => {
this.$set(items, 'isSelect', false)
});
this.mingxiObj = {
wuzibianma: '',
jieyongshuliang: '',
shifouhuiku: '',
huikushijian: ''
}
this.mingxiObjBefore = {}
this.mingxiIndex = ''
this.isShowMingxi = false
},
mingxiCancel() {
this.wuziList.forEach((items) => {
this.$set(items, 'isSelect', false)
});
this.mingxiObj = {
wuzibianma: '',
jieyongshuliang: '',
shifouhuiku: '',
huikushijian: ''
}
this.mingxiObjBefore = {}
this.mingxiIndex = ''
this.isShowMingxi = false
},
editMingxi(index) {
const before = this.mingxiList[index]
for (var m in this.mingxiList[index]) {
this.mingxiObjBefore[m] = this.mingxiList[index][m]
}
this.mingxiObj = this.mingxiList[index]
this.mingxiIndex = index + 1 // 为0时=为false
this.isShowMingxi = true
2 years ago
},
// 删除明细记录
delMingxiList(index,row){
if(row.id){
destroy({
id:row.id,
table_name:'outbounds_items'
}).then(res=>{
Message({
type: 'success',
message: '删除成功'
})
this.mingxiList.splice(index, 1)
})
}else{
Message({
type: 'success',
message: '删除成功'
})
this.mingxiList.splice(index, 1)
}
2 years ago
},
showWuzi() {
this.isShowWuzi = true
},
async getWuzi() {
let res = await index({
page_size: 10,
page: this.wuziPageIndex,
table_name: 'inventorys',
filter: [{
"key": "zichanmingcheng",
"op": "like",
"value": this.keyword
2 years ago
},{
"key": "wuzibianma",
"op": "like",
"value": this.wuzibianmakeyword
2 years ago
}]
})
for (var m of res.data) {
m.names = m.wuzibianma + "--" + m.zichanmingcheng
m.isSelect = false
}
this.wuziList = res.data
this.wuziTotal = res.total
},
wuziSelect(e) {
this.wuziList.forEach((items) => {
this.$set(items, 'isSelect', false)
if (items.id == e.id) {
this.$set(items, 'isSelect', true)
this.mingxiObj.wuzibianma = e.wuzibianma
this.mingxiObj.zichanmingcheng = e.zichanmingcheng
this.mingxiObj.wuzileixing = e.wuzileixing
this.mingxiObj.rukupici = e.rukupici
this.mingxiObj.zaikushuliang = e.zaikushuliang
this.mingxiObj.jiliangdanwei = e.jiliangdanwei
this.mingxiObj.inventorys_id = e.id
this.mingxiObj.guigexinghao = e.guigexinghao
}
2 years ago
});
this.mingxiList.map(item=>{
if(item.inventorys_id===this.mingxiObj.inventorys_id){
Message({
type: 'warning',
message: `${item.wuzibianma}${item.zichanmingcheng}已选择`
})
this.mingxiObj = {}
return
}
})
2 years ago
},
wuziPageChange(e) {
this.wuziPageIndex = e
this.getWuzi()
},
async getCangku() {
let res = await index({
page_size: 999,
page: 1,
table_name: 'materialstorages',
})
this.cangkuList = res.data
},
async getDetail() {
const res = await show({
id: this.id,
table_name: this.tableName
})
this.form = {
chukushijian: res?.chukushijian,
zhuangtai: res?.zhuangtai,
jieyongcangku: res?.jieyongcangku,
jieyongbumen: res?.jieyongbumen,
// jieyongren:res?.jieyongren,
jilurenyuan: res?.jilurenyuan,
baofeiyuanyin: res?.baofeiyuanyin,
beizhu: res?.beizhu,
chukumingxi: ''
}
this.mingxiList = res.id_outbounds_items_outbounds_id_relation
2 years ago
},
countNum(arr,value){
},
isHasEqual(arr,key,key1) {
if(arr.length===0){
return
}
for(let i = 0; i < arr.length; i++) {
if(arr.filter(item => item[key] == arr[i][key]).length > 1&&arr.filter(item => item[key1] == arr[i][key1]).length > 1) {
return true;
}
}
return false;
2 years ago
},
2 years ago
submit() {
console.log("this.mingxiList",this.mingxiList)
// return
this.form.id_outbounds_items_outbounds_id_relation = this.mingxiList
const has = this.isHasEqual(this.form.id_outbounds_items_outbounds_id_relation,"wuzibianma","rukupici")
if(has){
Message({
type: 'warning',
message: '同一物资同一批次请不要重复录入'
})
return
}
2 years ago
// return
if (this.type === 'add') {
this.form.zhuangtai = '待处理'
save({
table_name: this.tableName,
...this.form
}).then(res => {
Message({
type: 'success',
message: '新增成功'
})
this.isShow = false
this.$emit('refresh')
})
return
}
if (this.type === 'editor' || this.type === 'outbounds') {
if (this.type === 'outbounds') {
this.form.zhuangtai = '已出库'
}
save({
id: this.id,
table_name: this.tableName,
...this.form
}).then(res => {
Message({
type: 'success',
message: '编辑成功'
})
this.isShow = false
this.$emit('refresh')
})
}
},
},
watch: {
isShow(newVal) {
if (newVal) {
this.titleName = this.type === 'add' ? `新增${this.chukuType}出库` : (this.type === 'editor' ?
`编辑${this.chukuType}出库` : '出库')
this.form.chukuleixing = this.chukuType
if (this.type === 'editor' || this.type === 'outbounds') {
this.getDetail()
} else {
this.form.jilurenyuan = this.authName
}
} else {
this.id = ''
this.type = ''
this.mingxiList = []
this.authName = ''
this.$refs['dialog'].reset()
}
}
}
}
</script>
<style scoped lang="scss">
.mingxiwrap {
display: flex;
flex-wrap: wrap;
}
.mingxiwrap .xy-table-item {
margin-bottom: 10px
}
.searchCompanys {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
::v-deep .searchCompanys .el-input {
width: 82%
}
.xy-table-item-label {
width: 160px;
}
.img__delete {
transform: scale(0.8, 0.8);
position: absolute;
top: 4px;
right: 4px;
}
::v-deep .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
::v-deep .el-upload--picture-card {
font-size: 28px;
color: #8c939d;
width: 80px !important;
height: 80px !important;
line-height: 80px !important;
text-align: center;
}
::v-deep .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 80px !important;
height: 80px !important;
line-height: 80px !important;
text-align: center;
}
::v-deep .avatar {
width: 80px !important;
display: block;
border-radius: 6px;
}
::v-deep .xy-table-item-label {
width: 160px !important;
}
::v-deep .el-date-editor .el-range-separator {
width: auto !important;
}
::v-deep .el-input-number .el-input__inner {
text-align: left !important;
}
2 years ago
</style>