<template>
|
<GlobalWindow
|
title="选择物料"
|
width="80%"
|
:visible.sync="visible"
|
>
|
<div class="main-materail">
|
<div class="left">
|
<slot name="tree">
|
<Tree
|
style="height:98%;overflow-y: scroll;"
|
:list="materialTypes"
|
:defaultProps="defaultProps"
|
@callback="callback"
|
></Tree>
|
</slot>
|
</div>
|
<div class="right">
|
<slot name="main">
|
<el-form ref="materialSearchForm" :model="materialSearchForm" inline>
|
<el-form-item label="物料编码" prop="materialCode">
|
<el-input v-model="materialSearchForm.materialCode" placeholder="请输入物料编码" v-trim/>
|
</el-form-item>
|
<el-form-item label="物料名称" prop="materialName">
|
<el-input v-model="materialSearchForm.materialName" placeholder="请输入物料名称" v-trim/>
|
</el-form-item>
|
<section >
|
<el-button type="primary" @click="search">搜索</el-button>
|
<el-button @click="reset">重置</el-button>
|
</section>
|
</el-form>
|
<el-table
|
v-loading="isSearch"
|
:data="tempMaterials"
|
ref="materials"
|
border
|
@selection-change="handleSelectionChange"
|
@select="select"
|
>
|
<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.mmodelCode }}
|
</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column prop="mmodelUnionName" label="物料名称" min-width="100px"></el-table-column>
|
<el-table-column prop="attr" label="规格" min-width="100px"></el-table-column>
|
<el-table-column label="物料分类" show-overflow-tooltip min-width="100px">
|
<template slot-scope="{row}">
|
<span class="long-title-style">{{ row.unionCategoryName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="umodelName" label="单位" min-width="50px"></el-table-column>
|
<el-table-column v-if="form.multiple" 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\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>
|
<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>
|
</slot>
|
</div>
|
</div>
|
<div slot="footer" class="window__header">
|
<div style="width:200px; text-align: center; margin: 0 auto; padding-top:10px">
|
<el-button type="primary" @click="determine">提交</el-button>
|
<el-button @click="cancel">取消</el-button>
|
</div>
|
</div>
|
</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 { fetchList } from '@/api/ext/materialDistributeExt'
|
export default {
|
name: 'SelectMaterail',
|
extends: BaseOpera,
|
components: { Tree, GlobalWindow },
|
data () {
|
return {
|
form: {
|
ids: '',
|
multiple: false,
|
isPurchase: false,
|
queryType: null
|
},
|
isSearch: false,
|
materialTypes: [],
|
tempMaterials: [],
|
pagination: {
|
pageIndex: 1,
|
pageSize: 10,
|
total: 0
|
},
|
// 筛选条件
|
materialSearchForm: {
|
materialCode: null,
|
materialName: null
|
},
|
defaultProps: {
|
children: 'childrenList',
|
name: 'name',
|
status: 'status',
|
id: 'id'
|
},
|
selectedMaterails: {},
|
selectedTree: {
|
bigId: null,
|
meddileId: null,
|
smallId: null
|
}
|
}
|
},
|
methods: {
|
open (title, target) {
|
// console.log(title, target)
|
this.title = title
|
this.visible = true
|
|
if (target) {
|
this.selectedMaterails = {}
|
this.materialSearchForm.materialCode = null
|
this.materialSearchForm.materialName = null
|
this.pagination = {
|
pageIndex: 1,
|
pageSize: 10,
|
total: 0
|
}
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
this.getTreeData()
|
this.search()
|
})
|
}
|
},
|
getTreeData () {
|
// 获取分类树
|
treeCategoryList({ cateType: 0 })
|
.then(res => {
|
this.materialTypes = this.tree(res)
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
},
|
// 树数据处理
|
tree (treeArray) {
|
const array = []
|
for (const item of treeArray) {
|
// console.log('item', item)
|
item.status = false
|
if (item.childrenList) {
|
item.children = this.tree(item.childrenList)
|
}
|
array.push(item)
|
}
|
return array
|
},
|
determine () {
|
let lastSelect = []
|
for (const key in this.selectedMaterails) {
|
lastSelect = lastSelect.concat(this.selectedMaterails[key])
|
}
|
this.$emit('selectData', {
|
selectedMaterails: lastSelect,
|
multiple: true
|
})
|
this.visible = false
|
},
|
reset () {
|
this.selectedMaterails = {}
|
this.$refs.materialSearchForm.resetFields()
|
this.search()
|
},
|
/**
|
* 搜索物料
|
*/
|
search () {
|
// console.log('搜索')
|
this.handlePageChange(1)
|
},
|
// 选择物料（多选）
|
handleSelectionChange (selectedRows) {
|
this.selectedMaterails[this.pagination.pageIndex] = selectedRows
|
},
|
// 选择物料（单选）
|
select (selection, row) {
|
if (this.form.multiple) {
|
return
|
}
|
this.$emit('selectData', {
|
selectedMaterails: selection,
|
multiple: false
|
})
|
this.visible = false
|
},
|
// 选择树回调
|
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.search()
|
},
|
cancel () {
|
this.visible = false
|
},
|
handlePageChange (page) {
|
this.pagination.pageIndex = page
|
this.isSearch = true
|
fetchList({
|
page: this.pagination.pageIndex,
|
capacity: this.pagination.pageSize,
|
model: {
|
ids: this.form.ids,
|
mmodelUnionName: this.materialSearchForm.materialName,
|
mmodelCode: this.materialSearchForm.materialCode,
|
cmodelId: this.selectedTree.bigId,
|
cmodel2Id: this.selectedTree.meddileId,
|
cmodel3Id: this.selectedTree.smallId,
|
formation: this.form.isPurchase ? '1' : '',
|
queryType: this.form.queryType,
|
status: '1'
|
},
|
sorts: null
|
}).then(res => {
|
this.pagination.total = res.total
|
|
|
this.pagination.pageSize = res.capacity
|
this.pagination.pageIndex = res.page
|
this.tempMaterials = res.records
|
console.log(this.selectedMaterails[this.pagination.pageIndex])
|
if (this.selectedMaterails[this.pagination.pageIndex]) {
|
for (const item of this.selectedMaterails[this.pagination.pageIndex]) {
|
this.$nextTick(() => {
|
this.tempMaterials.forEach(tempItem => {
|
if (tempItem.id === item.id) {
|
console.log(tempItem.mmodelUnionName);
|
this.$refs.materials.toggleRowSelection(tempItem, true)
|
}
|
})
|
})
|
}
|
}
|
}).catch(err => {
|
console.log(err)
|
}).finally(() => {
|
this.isSearch = false
|
})
|
},
|
// 判断是否被被选中
|
isSelectRow (row) {
|
if (this.selectedMaterails[this.pagination.pageIndex]) {
|
return this.selectedMaterails[this.pagination.pageIndex].includes(row)
|
}
|
return false
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .el-dialog {
|
// height: calc(100% - 190px);
|
|
margin-top: 0 !important;
|
top: 10%;
|
bottom: 10%;
|
height: 80%;
|
min-height: 600px;
|
}
|
::v-deep .el-dialog__footer {
|
padding: 0px;
|
}
|
::v-deep .el-dialog__body {
|
padding: 10px 20px;
|
height: calc(100% - 114px);
|
}
|
|
.main-materail {
|
display: flex;
|
justify-content: space-between;
|
height: 100%;
|
.left {
|
width: calc(20% - 20px);
|
height: calc(100% - 20px);
|
border: #EEEEEE solid 1px;
|
padding: 10px;
|
font-size: 18px;
|
}
|
.right {
|
width: calc(80% - 20px);
|
height: calc(100% - 20px);
|
padding: 0, 20px;
|
section {
|
display: inline-block;
|
margin-left: 16px;
|
margin-bottom: 18px;
|
}
|
}
|
}
|
</style>
|
