<template>
|
<GlobalWindow
|
:title="title"
|
width="80%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<div style="margin-bottom: 10px">
|
<span class="title-add-style" style="vertical-align:middle">出库信息</span>
|
<!-- <el-button type="primary" style="margin-left: 10px;vertical-align:middle">选择来源单据</el-button> -->
|
</div>
|
<div class="form-data">
|
<el-form :model="form" ref="form" inline :rules="rules" label-width="100px">
|
<!-- <el-form-item label="来源单据类型" prop="originType">
|
<el-input v-model="form.originTypeName" disabled placeholder="选择来源单据后默认带出" v-trim/>
|
</el-form-item>
|
<el-form-item label="来源单据编号" prop="originCode">
|
<el-input v-model="form.originCode" disabled placeholder="选择来源单据后默认带出" v-trim/>
|
</el-form-item> -->
|
<el-form-item label="计划日期" prop="planDate">
|
<el-date-picker
|
v-model="form.planDate"
|
value-format="yyyy-MM-dd"
|
placeholder="选择日期"
|
:picker-options="pickerOptions"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item label="出库类型" prop="billType">
|
<el-select v-model="form.billType" :disabled="disabled" filterable clearable placeholder="请选择">
|
<el-option
|
v-for="(item) in billTypes"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="出库仓库" prop="warehouseId">
|
<el-select v-model="form.warehouseId" filterable clearable placeholder="请选择">
|
<el-option
|
v-for="(item, index) in warehouses()"
|
:key="index"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<div class="mark">
|
<el-form-item label="单据摘要" prop="abstracts">
|
<el-input v-model="form.abstracts" placeholder="请输入单据摘要" v-trim/>
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
<!-- 列表 -->
|
<el-tabs v-model="activeName">
|
<el-tab-pane label="物料信息" name="first"></el-tab-pane>
|
</el-tabs>
|
<ul class="toolbar">
|
<li><el-button type="primary" @click="addMaterial">选择物料</el-button></li>
|
</ul>
|
<el-table
|
:data="form.woutBoundDetailBeans"
|
border
|
stripe
|
>
|
<el-table-column align="center" label="序号" type="index" />
|
<el-table-column prop="name" label="物料名称" min-width="100px"></el-table-column>
|
<el-table-column prop="code" label="物料编码" min-width="160px"></el-table-column>
|
<el-table-column prop="locationName" label="货位" min-width="100px"></el-table-column>
|
<el-table-column align="center" prop="procedureName" label="工序" min-width="100px">
|
<template slot-scope="{row}">
|
<span >{{ row.procedureName || '-' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column align="center" label="质量属性" min-width="100px">
|
<template slot-scope="{row}">
|
<span v-if="row.qualityType==0" class="valid-style">合格</span>
|
<span v-else-if="row.qualityType==1" class="unvalid-style">不良</span>
|
<span v-else-if="row.qualityType==2" class="scrap-style">报废</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="batch" label="批次号" min-width="100px"></el-table-column>
|
<el-table-column prop="unitName" label="单位" min-width="100px"></el-table-column>
|
<el-table-column prop="stockNum" label="可用库存" min-width="100px"></el-table-column>
|
<el-table-column label="出库数量" min-width="100px">
|
<template slot-scope="{row}">
|
<el-input
|
v-if="row.unitAttribute==0"
|
v-model="row.num"
|
placeholder="请输入数量"
|
v-trim
|
onkeyup="value=value.replace(/[^0-9]/g, '')"
|
oninput="if(value<0) { value = ''} else {value=value.replace(/[^0-9]/g, ''}"
|
/>
|
<el-input
|
v-else
|
v-model="row.num"
|
placeholder="请输入数量"
|
v-trim
|
onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
|
oninput="if(value<0) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
min-width="120"
|
align="center"
|
fixed="right"
|
>
|
<template slot-scope="{row}">
|
<span>
|
<el-button type="text" @click="deleteMaterail(row)">删除</el-button>
|
</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<SelectMaterail
|
ref="selectMaterail"
|
@selectData="selectData"
|
>
|
<div slot="tree" style="height: calc(100% - 20px);">
|
<Tree
|
style="height:98%;overflow-y: scroll;"
|
:list="materialTypes"
|
:defaultProps="defaultProps"
|
@callback="callback"
|
></Tree>
|
</div>
|
<div slot="main">
|
<el-form ref="materialSearchForm" :model="materialSearchForm" inline>
|
<el-form-item label="物料信息" prop="materialName">
|
<el-input v-model="materialSearchForm.materialName" placeholder="请输入物料编码/名称" v-trim/>
|
</el-form-item>
|
<el-form-item label="批次号" prop="batch">
|
<el-input v-model="materialSearchForm.batch" placeholder="请输入批次号" v-trim/>
|
</el-form-item>
|
<section >
|
<el-button type="primary" @click="searchMaterail">搜索</el-button>
|
<el-button @click="reset">重置</el-button>
|
</section>
|
</el-form>
|
<el-table
|
style="margin-top:10px"
|
v-loading="isSearch"
|
:data="tempMaterials"
|
ref="materials"
|
border
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" fixed="left" width="55"></el-table-column>
|
<el-table-column label="物料编码" min-width="160px">
|
<template slot-scope="{row}">
|
<el-button type="text">
|
{{ row.materialCode }}
|
</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column prop="materialName" label="物料名称" min-width="100px"></el-table-column>
|
<el-table-column prop="attr" label="规格" min-width="60px"></el-table-column>
|
<el-table-column prop="categoryName" label="物料分类" min-width="180px">
|
<template slot-scope="{row}">
|
<span class="long-title-style">{{ row.categoryName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="unitName" label="单位" min-width="50px"></el-table-column>
|
<el-table-column prop="batch" label="批次号" min-width="100px"></el-table-column>
|
<el-table-column align="center" prop="procedureName" label="工序" min-width="100px">
|
<template slot-scope="{row}">
|
<span >{{ row.procedureName || '-' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column align="center" label="质量属性" min-width="100px">
|
<template slot-scope="{row}">
|
<span v-if="row.qualityType==0" class="valid-style">合格</span>
|
<span v-else-if="row.qualityType==1" class="unvalid-style">不良</span>
|
<span v-else-if="row.qualityType==2" class="scrap-style">报废</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="locationName" label="货位" min-width="100px"></el-table-column>
|
<el-table-column prop="num" fixed="right" label="可用库存" min-width="100px">
|
<!-- <template slot-scope="{row}">
|
<el-input
|
v-if="isSelectRow(row)"
|
v-model="row.num"
|
placeholder="请输入数量"
|
v-trim
|
onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
|
oninput="if(value<0) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
|
/>
|
</template> -->
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
style="margin-top:10px"
|
:current-page="pagination.pageIndex"
|
:page-size="pagination.pageSize"
|
layout="total, prev, pager, next, jumper"
|
:total="pagination.total"
|
@current-change="handlePageChange"
|
background>
|
</el-pagination>
|
</div>
|
</SelectMaterail>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import Tree from '@/components/common/Tree'
|
import { treeCategoryList } from '@/api/ext/categoryExt'
|
import { choiceStockListPage } from '@/api/ext/wOutboundExt'
|
export default {
|
name: 'OperaWOutboundExtWindow',
|
extends: BaseOpera,
|
components: {
|
GlobalWindow,
|
Tree,
|
SelectMaterail: () => import('@/components/ext/SelectMaterail')
|
},
|
data () {
|
return {
|
// 表单数据
|
form: {
|
planDate: null,
|
warehouseId: null,
|
abstracts: null,
|
type: 0,
|
origin: 0,
|
billType: null,
|
woutBoundDetailBeans: []
|
},
|
materialSearchForm: {
|
materialName: null,
|
batch: null
|
},
|
disabled: false,
|
// 验证规则
|
rules: {
|
planDate: [{ required: true, message: '请选择出库日期', trigger: 'change' }],
|
warehouseId: [{ required: true, message: '请选择出库仓库', trigger: 'blur' }],
|
billType: [{ required: true, message: '请选择出库类型', trigger: 'blur' }],
|
},
|
activeName: 'first',
|
// warehouses: [
|
// ],
|
pickerOptions: {},
|
isSelectMaterial: false,
|
isSearch: false,
|
materialTypes: [],
|
defaultProps: {
|
children: 'childrenList',
|
name: 'name',
|
status: 'status',
|
id: 'id'
|
},
|
tempMaterials: [],
|
billTypes: [],
|
|
pagination: {
|
pageIndex: 1,
|
pageSize: 10,
|
total: 0
|
},
|
selectedTree: {
|
bigId: null,
|
meddileId: null,
|
smallId: null
|
},
|
selectedAllMaterails: {},
|
selectedMaterails: []
|
}
|
},
|
watch: {
|
visible:{
|
handler(newVal, oldVal) {
|
if (newVal) {
|
this.form.woutBoundDetailBeans = []
|
}
|
},
|
deep: true
|
}
|
},
|
inject: ['warehouses'],
|
created () {
|
this.config({
|
api: '/ext/wOutboundExt',
|
'field.id': 'id'
|
})
|
this.pickerOptions.disabledDate = (time) => {
|
// 一天
|
let tempTime = 3600 * 1000 * 24
|
return time.getTime() < new Date()-tempTime
|
}
|
},
|
methods: {
|
// 获取当天年月日
|
getDay() {
|
var date = new Date();
|
var year = date.getFullYear();
|
var month = date.getMonth() + 1;
|
var day = date.getDate();
|
return `${year}-${month <= 9 ? `0${month}` : month}-${day <= 9 ? `0${day}` : day}`
|
},
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
this.form.planDate = this.getDay()
|
if (title === '新建销售出库单') {
|
this.form.billType = 18
|
this.disabled = true
|
this.billTypes = [
|
{name:'销售出库', id: 18}
|
]
|
} else {
|
this.form.billType = null
|
this.disabled = false
|
this.billTypes = [
|
{name:'库存调整', id: 28},
|
{name:'仓库报废', id: 21},
|
{name:'客退检验领料', id: 22},
|
{name:'客返检验领料', id: 23},
|
]
|
}
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
})
|
},
|
addMaterial () {
|
if (!this.form.warehouseId) {
|
this.$tip.error('请先选择仓库')
|
return
|
}
|
treeCategoryList({ cateType: 0 })
|
.then(res => {
|
this.materialTypes = this.tree(res)
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
const ids = []
|
if (this.form.woutBoundDetailBeans) {
|
for (const item of this.form.woutBoundDetailBeans) {
|
ids.push(item.id)
|
}
|
}
|
// console.log(ids)
|
choiceStockListPage({
|
page: 1,
|
capacity: 10,
|
model: {
|
ids: ids.join(','),
|
warehouseId: this.form.warehouseId
|
},
|
sorts: null
|
}).then(res => {
|
this.pagination.total = res.total
|
this.pagination.pageSize = res.capacity
|
this.pagination.pageIndex = res.page
|
this.tempMaterials = res.records
|
this.$refs.selectMaterail.open('选择物料')
|
}).catch(err => {
|
this.$tip.error(err)
|
})
|
},
|
deleteMaterail (row) {
|
this.form.woutBoundDetailBeans.splice(this.form.woutBoundDetailBeans.indexOf(row), 1)
|
},
|
reset () {
|
this.$refs.materialSearchForm.resetFields()
|
this.selectedTree.bigId = null
|
this.selectedTree.meddileId = null
|
this.selectedTree.smallId = null
|
this.pageSearch()
|
},
|
callback (data, item) {
|
// console.log(data, item)
|
if (item.pmodel) {
|
const fpmodel = item.pmodel
|
if (fpmodel.parentId) {
|
// console.log('点击的是小类')
|
// 点击的是小类
|
if (this.selectedTree.smallId === fpmodel.id) {
|
// 关
|
this.selectedTree.smallId = null
|
} else {
|
// 开
|
this.selectedTree.smallId = item.id
|
}
|
} else {
|
// console.log('点击的是中类')
|
// 点击的是中类
|
if (this.selectedTree.meddileId === fpmodel.id) {
|
// 关
|
this.selectedTree.meddileId = null
|
this.selectedTree.smallId = null
|
} else {
|
// 开
|
this.selectedTree.meddileId = item.id
|
this.selectedTree.smallId = null
|
}
|
}
|
} else {
|
// 点击的是大类
|
if (this.selectedTree.bigId === item.id) {
|
// 关
|
this.selectedTree.bigId = null
|
this.selectedTree.meddileId = null
|
this.selectedTree.smallId = null
|
} else {
|
// 开
|
this.selectedTree.bigId = item.id
|
this.selectedTree.meddileId = null
|
this.selectedTree.smallId = null
|
}
|
}
|
this.pageSearch()
|
},
|
searchMaterail () {
|
this.pageSearch()
|
},
|
pageSearch () {
|
this.pagination.pageIndex = 1
|
this.getTempMaterails()
|
},
|
getTempMaterails () {
|
const ids = []
|
if (this.form.woutBoundDetailBeans) {
|
for (const item of this.form.woutBoundDetailBeans) {
|
ids.push(item.id)
|
}
|
}
|
choiceStockListPage({
|
page: this.pagination.pageIndex === undefined ? 1 : this.pagination.pageIndex,
|
capacity: 10,
|
model: {
|
materialName: this.materialSearchForm.materialName,
|
batch: this.materialSearchForm.batch,
|
cateBigId: this.selectedTree.bigId,
|
cateMiddleId: this.selectedTree.meddileId,
|
cateSmallId: this.selectedTree.smallId,
|
warehouseId: this.form.warehouseId,
|
ids: ids.join(',')
|
},
|
sorts: null
|
}).then(res => {
|
// console.log('res', res)
|
this.pagination.total = res.total
|
this.pagination.pageSize = res.capacity
|
this.pagination.pageIndex = res.page
|
this.tempMaterials = res.records
|
this.isSelectMaterial = true
|
}).catch(err => {
|
this.$tip.error(err)
|
})
|
},
|
handlePageChange (page) {
|
this.pagination.pageIndex = page
|
this.getTempMaterails()
|
},
|
handleSelectionChange (selectedRows) {
|
// console.log(selectedRows)
|
this.selectedAllMaterails[this.pagination.pageIndex] = selectedRows
|
},
|
selectData () {
|
// console.log(this.selectedAllMaterails)
|
for (const key in this.selectedAllMaterails) {
|
for (const item of this.selectedAllMaterails[key]) {
|
this.form.woutBoundDetailBeans.push({
|
code: item.materialCode,
|
name: item.materialName,
|
materialId: item.materialId,
|
procedureName: item.procedureName,
|
id: item.id,
|
unitAttribute: item.unitAttribute,
|
// 需传参数
|
procedureId: item.procedureId,
|
qualityType: item.qualityType,
|
stockNum: item.num,
|
num: item.num,
|
unitId: item.unitId,
|
unitName: item.unitName,
|
locationName: item.locationName,
|
batch: item.batch,
|
locationId: item.locationId
|
})
|
}
|
}
|
},
|
isSelectRow (row) {
|
if (this.selectedAllMaterails[this.pagination.pageIndex]) {
|
return this.selectedAllMaterails[this.pagination.pageIndex].includes(row)
|
}
|
return false
|
},
|
// 树数据处理
|
tree (treeArray) {
|
const array = []
|
for (const item of treeArray) {
|
item.status = false
|
if (item.childrenList) {
|
item.children = this.tree(item.childrenList)
|
}
|
array.push(item)
|
}
|
return array
|
},
|
__confirmCreate () {
|
this.$refs.form.validate((valid) => {
|
if (!this.form.woutBoundDetailBeans.length) {
|
this.$tip.error('至少选择一条物料')
|
return
|
}
|
for (const item of this.form.woutBoundDetailBeans) {
|
if (item.num <= 0) {
|
this.$tip.error('出库物料数量必须大于0！')
|
return
|
}
|
if (item.num > item.stockNum) {
|
this.$tip.error('转库的物料数量不能大于库存量！')
|
return
|
}
|
}
|
if (!valid) {
|
return
|
}
|
// 调用新建接口
|
this.isWorking = true
|
this.api.create(this.form)
|
.then(() => {
|
this.visible = false
|
this.form.woutBoundDetailBeans = []
|
this.$tip.apiSuccess('新建成功')
|
this.$emit('success')
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
})
|
}
|
}
|
}
|
/**
|
*
|
|
*/
|
</script>
|
|
<style lang="scss" scoped>
|
.toolbar {
|
border-bottom: 1px solid #eee;
|
padding-bottom: 10px;
|
li {
|
display: inline-block;
|
margin-right: 6px;
|
}
|
}
|
.form-data {
|
::v-deep .el-form-item{
|
width: 45%;
|
margin-right: 4%;
|
}
|
.mark {
|
::v-deep .el-form-item{
|
width: 95%;
|
margin-right: 4%;
|
}
|
}
|
::v-deep .el-form-item__content {
|
width: calc(100% - 114px);
|
}
|
}
|
</style>
|
