<template>
|
<el-dialog
|
custom-class="sy-modal"
|
|
title="物料选择"
|
width="90%"
|
append-to-body
|
:before-close="close"
|
>
|
<div class="sy-default-choose-table-modal-content" v-loading="loading">
|
<div v-if="!choosenVisible">
|
<search-bar @search="onSearch" @reset="onReset">
|
<el-form :inline="true" class="search-form" label-width="60px">
|
<el-form-item label="系列">
|
<el-select placeholder="请选择..." clearable class="default-form-width" v-model="query.series_CodeItemId">
|
<el-option v-for="(item,index) in selectList.series" :key="'series-'+index" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="品类">
|
<el-select placeholder="请选择..." clearable class="default-form-width" v-model="query.cargoType_CodeItemId">
|
<el-option v-for="(item,index) in selectList.types" :key="'types-'+index" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="型号">
|
<el-select placeholder="请选择..." clearable class="default-form-width" v-model="query.materialModel_CodeItemId">
|
<el-option v-for="(item,index) in selectList.modelTypes" :key="'modelTypes-'+index" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="序列号">
|
<el-input placeholder="请输入..." clearable class="default-form-width" v-model.trim="query.serialNumber"></el-input>
|
</el-form-item>
|
</el-form>
|
</search-bar>
|
|
<el-table :data="list" ref="list" border stripe @select="handleSingelSelect" @select-all="handleAllSelect">
|
<el-table-column type="selection" width="55" fixed align="center" />
|
<el-table-column width="80" label="序号" fixed align="center">
|
<template #default="scope">{{(queried.page-1)*queried.pageSize+(scope.$index+1)}}</template>
|
</el-table-column>
|
<el-table-column prop="OrderNo" label="订货号" />
|
<el-table-column prop="SerialNumber" label="序列号" />
|
<el-table-column prop="SeriesName" label="系列" />
|
<el-table-column prop="CargoTypeName" label="品类" />
|
<el-table-column prop="MaterialModel" label="型号" />
|
<el-table-column prop="Supplier" label="主机厂" />
|
<el-table-column prop="SrmStationCode" label="货位编号" />
|
</el-table>
|
|
<div class="pagination-row">
|
<el-pagination :pager-count="5" layout="total, prev, pager, next, jumper" :total="total" @current-change="onPageList" />
|
</div>
|
</div>
|
|
<div v-else>
|
<el-table :data="choosen" border stripe>
|
<el-table-column width="55" label="序号" fixed>
|
<template #default="scope">{{scope.$index+1}}</template>
|
</el-table-column>
|
<el-table-column prop="OrderNo" label="订货号" />
|
<el-table-column prop="SerialNumber" label="序列号" />
|
<el-table-column prop="SeriesName" label="系列" />
|
<el-table-column prop="CargoTypeName" label="品类" />
|
<el-table-column prop="MaterialModel" label="型号" />
|
<el-table-column prop="Supplier" label="主机厂" />
|
<el-table-column prop="SrmStationCode" label="货位编号" />
|
<el-table-column label="操作" width="80" align="center">
|
<template #default="scope">
|
<el-button type="danger" size="small" @click="onChoosenCancel(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="onClose">取 消</el-button>
|
<el-button @click="onChangeChoosenVisible" :type="choosenVisible?'':'primary'">已选择物料<span v-if="choosen.length>0">({{choosen.length}})</span></el-button>
|
<el-button @click="onConfirm" type="primary">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
import SearchBar from '@/components/SearchBar.vue'
|
const defaultQuery = {
|
series_CodeItemId:'',
|
series_CodeItemId_FilterMode:'2',
|
cargoType_CodeItemId:'',
|
cargoType_CodeItemId_FilterMode:'2',
|
serialNumber:'',
|
serialNumber_FilterMode:'1',
|
materialModel_CodeItemId:'',
|
materialModel_CodeItemId_FilterMode:'2',
|
materialType:1,
|
materialType_FilterMode:'2'
|
}
|
export default {
|
name:'statisticsOfInventoryChooseModalCompontent',
|
components:{SearchBar},
|
emits:['submitCallback','update:visible'],
|
props:{
|
visible:{
|
type:Boolean,
|
default:false
|
}
|
},
|
data(){
|
return {
|
loading:false,
|
selectList:{
|
series:[],
|
types:[],
|
modelTypes:[]
|
},
|
selectListLoaded:false,
|
list:[],
|
total:100,
|
query:{...defaultQuery},
|
queried:{...this.$config.pagination},
|
choosen:[],
|
shortChoosen:[],
|
pageChecked:[],
|
choosenVisible:false
|
}
|
},
|
watch:{
|
visible(newVal,oldVal){
|
if (newVal!==oldVal) {
|
if (newVal) {
|
this.initModal();
|
}
|
}
|
}
|
},
|
methods:{
|
initModal(){
|
this.emptyChoosen();
|
this.choosenVisible = false;
|
this.loading = true;
|
this.getSelectLists((f)=>{
|
if (f) {
|
this.reset(false,()=>{
|
this.loading = false;
|
})
|
} else {
|
this.loading = false;
|
}
|
})
|
},
|
close(){
|
this.$emit('update:visible',false)
|
},
|
onClose(){
|
this.close();
|
},
|
onSelect(row){
|
this.$emit('submitCallback',row)
|
this.close();
|
},
|
/* 搜索按钮 */
|
onSearch(){
|
this.newList()
|
},
|
/* 重置按钮 */
|
onReset(){
|
this.reset();
|
},
|
reset(needLoading=true,callback){
|
this.query = {...defaultQuery}
|
this.newList(needLoading,callback)
|
},
|
/* 翻页功能 */
|
onPageList(page){
|
this.queried.page = page;
|
this.getList();
|
},
|
/* 表格刷新至首页 */
|
newList(needLoading=true,callback){
|
this.queried = {...this.query,...this.$config.pagination}
|
this.getList(callback,needLoading)
|
},
|
/* 更新数据表 */
|
getList(callback,needLoading=true){
|
if (needLoading) {
|
this.loading = true;
|
}
|
this.$api.post('Get',this.queried,{block:'store'}).then((d)=>{
|
this.total = d.total;
|
this.list = d.list || []
|
this.setTablePageChecked()
|
if (needLoading) {
|
this.loading = false;
|
}
|
callback && callback(true)
|
}).catch((err)=>{
|
if (needLoading) {
|
this.loading = false;
|
}
|
callback && callback(false)
|
})
|
},
|
setTablePageChecked(){
|
let tempArr = [];
|
this.$nextTick(()=>{
|
this.list.forEach((item)=>{
|
if (this.shortChoosen.indexOf(item.SerialNumber)>=0) {
|
tempArr.push(item)
|
this.$refs.list.toggleRowSelection(item,undefined)
|
}
|
})
|
})
|
this.pageChecked = tempArr;
|
},
|
getSelectLists(callback){
|
if (this.selectListLoaded) {
|
callback && callback(true)
|
} else {
|
Promise.all([
|
this.$api.get('GetCodeItemsBySetCode',{setCode:'SeriesCode'},{block:'dictionary'}),
|
this.$api.get('GetCodeItemsBySetCode',{setCode:'CategoryCode'},{block:'dictionary'}),
|
this.$api.get('GetCodeItemsBySetCode',{setCode:'ModelNumber'},{block:'dictionary'})
|
]).then((response)=>{
|
this.selectList.series = response[0] || []
|
this.selectList.types = response[1] || []
|
this.selectList.modelTypes = response[2] || []
|
this.selectListLoaded = true
|
callback && callback(true)
|
}).catch((err)=>{
|
callback && callback(false)
|
})
|
}
|
},
|
handleAllSelect(selection){
|
this.setMultipleChoosen(selection)
|
},
|
handleSingelSelect(selection,row){
|
if (this.$utils.getObjectArrayIndex(selection,row,'SerialNumber')<0) {
|
console.log('reduce')
|
this.reduceChoosen(row)
|
} else {
|
console.log('plus')
|
this.addChoosen(row)
|
}
|
},
|
addChoosen(row){
|
this.shortChoosen.push(row.SerialNumber)
|
this.choosen.push(row)
|
},
|
reduceChoosen(row){
|
let i = this.shortChoosen.indexOf(row.SerialNumber);
|
if (i<0) return false;
|
this.shortChoosen.splice(i,1)
|
this.choosen.splice(i,1)
|
},
|
setMultipleChoosen(selection){
|
if (selection && selection.length>0) {
|
selection.forEach((item)=>{
|
if (this.shortChoosen.indexOf(item.SerialNumber)<0){
|
this.shortChoosen.push(item.SerialNumber)
|
this.choosen.push(item)
|
}
|
})
|
} else {
|
this.emptyChoosen();
|
}
|
},
|
emptyChoosen(){
|
this.choosen = [];
|
this.shortChoosen = [];
|
this.pageChecked = [];
|
},
|
onChangeChoosenVisible(){
|
this.choosenVisible = !this.choosenVisible
|
if (!this.choosenVisible) {
|
this.setTablePageChecked()
|
/* 注意，切换显示的时候，勾选会被移除，所以得再给加上 */
|
}
|
},
|
onChoosenCancel(index){
|
this.shortChoosen.splice(index,1)
|
this.choosen.splice(index,1)
|
},
|
onConfirm(){
|
if (this.choosen.length>0){
|
this.$emit('submitCallback',this.choosen)
|
}
|
this.close()
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
</style>
|
