<template>
|
<a-modal
|
title="物料选择"
|
width="85vw"
|
:visible="innerVisible"
|
dialogClass="zero-modal"
|
@ok="handleSubmit"
|
@cancel="handleCancel">
|
<a-spin :spinning="loading">
|
<div class="purchase-receive-choose-modal-content">
|
<div class="table-box" ref="listWrapper">
|
<div class="action-view" v-if="showType===1">
|
<a-table v-if="th1" :data-source="list" :columns="listColumns"
|
:pagination="{current:queried.PageNo,pageSize:queried.PageSize,total:listTotal}"
|
:rowKey="tableKey" :row-selection="{onChange:rowSelectionsChange,selectedRowKeys:selectedRowKeys}" :scroll="{y:th1}"
|
@change="chooseTablePageChange">
|
<template slot="index" slot-scope="text,record,index">{{(queried.PageNo-1)*queried.PageSize+(index+1)}}</template>
|
<span slot="unitTyleSlot" slot-scope="text">{{ 'unit_type' | dictType(text) }}</span>
|
</a-table>
|
</div>
|
<div class="choosen-view" v-else>
|
<a-table v-if="th2" :data-source="choosen" :columns="choosenColumns" :rowKey="tableKey" :pagination="false" :scroll="{y:th2}">
|
<template slot="action" slot-scope="text,record,index">
|
<a-button type="danger" size="small" @click.stop="cancelChoosen(index)">删除</a-button>
|
</template>
|
<span slot="unitTyleSlot" slot-scope="text">{{ 'unit_type' | dictType(text) }}</span>
|
</a-table>
|
</div>
|
</div>
|
</div>
|
</a-spin>
|
<template slot="footer">
|
<a-button key="back" @click="handleCancel">取消</a-button>
|
<a-button key="choosen" type="primary" @click="changeShowType">所选物料<span v-if="choosen.length>0">({{choosen.length}})</span></a-button>
|
<a-button key="submit" type="primary" :loading="loading" @click="handleSubmit" :disabled="!choosen.length">确认</a-button>
|
</template>
|
</a-modal>
|
</template>
|
|
<script>
|
import { GetCouldReceiveMaterials } from '@/api/modular/main/PurchaseReceiveOrderManage'
|
const pagination = {
|
PageNo:1,
|
PageSize:10
|
}
|
export default {
|
emits:['update:visible','callback'],
|
props:{
|
visible:{
|
type:Boolean,
|
default:false
|
},
|
queryOrderNo:{
|
type:String,
|
default:''
|
}
|
},
|
data(){
|
return {
|
innerVisible:false,
|
loading:false,
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 18 }
|
},
|
queried:{...pagination},
|
tableKey:'materialNo',
|
listTotal:0,
|
list:[],
|
listColumns:[
|
{ title: '序号', key: 'index', width: 70, align:'center', fixed:"left", scopedSlots: { customRender: 'index' }},
|
{ title: '物料编码', dataIndex: 'materialNo', key: 'materialNo' },
|
{ title: '物料名称', dataIndex: 'materialName', key: 'materialName' },
|
{ title: '规格', dataIndex: 'materialSpec', key: 'materialSpec' },
|
{ title: '单位类型', dataIndex: 'basicUnit', key: 'basicUnit', width: 120, scopedSlots: { customRender: 'unitTyleSlot' }},
|
{ title: '送货数', dataIndex: 'deliverQuantity', key: 'deliverQuantity', width: 180 }
|
],
|
selectedRowKeys:[],
|
choosen:[],
|
choosenColumns:[
|
{ title: '物料编码', dataIndex: 'materialNo', key: 'materialNo' },
|
{ title: '物料名称', dataIndex: 'materialName', key: 'materialName' },
|
{ title: '规格', dataIndex: 'materialSpec', key: 'materialSpec' },
|
{ title: '单位类型', dataIndex: 'basicUnit', key: 'basicUnit', width: 120, scopedSlots: { customRender: 'unitTyleSlot' }},
|
{ title: '送货数', dataIndex: 'deliverQuantity', key: 'deliverQuantity', width: 180 },
|
{ title: '操作', key: 'action', width: 80, align:'center', fixed:"right", scopedSlots: { customRender: 'action' }}
|
],
|
showType:1, //1显示查询页面； 2显示已选数据
|
th1:0,
|
th2:0
|
}
|
},
|
created(){
|
this.innerVisible = this.visible
|
},
|
watch:{
|
visible(newVal){
|
if (newVal!==this.innerVisible) {
|
this.innerVisible = newVal
|
}
|
},
|
innerVisible(newVal,oldVal){
|
if (newVal!==this.visible) {
|
this.$emit('update:visible',newVal)
|
}
|
if (newVal!==oldVal) {
|
if (newVal) {
|
this.init()
|
}
|
}
|
}
|
},
|
methods:{
|
init(){
|
this.$nextTick(() => {
|
let h = this.$refs.listWrapper.clientHeight
|
this.th1 = h - 120
|
this.th2= h - 60
|
this.newQuery()
|
});
|
},
|
handleSubmit(){
|
this.$emit('callback',this.choosen)
|
this.handleCancel()
|
},
|
handleCancel(){
|
this.innerVisible = false;
|
this.showType = 1
|
this.list = []
|
this.choosen = []
|
this.loading = false
|
this.queried = {...pagination}
|
},
|
newQuery(){
|
this.queried = {...pagination}
|
this.queried.purchaseOrderNo = this.queryOrderNo
|
this.queryChooseDataSource()
|
},
|
queryChooseDataSource(){
|
this.loading = true;
|
GetCouldReceiveMaterials(this.queried).then((d)=>{
|
this.list = d.data.rows || []
|
this.listTotal = d.data.totalRows || 0
|
this.setSelectedRowKeys()
|
this.loading = false;
|
}).catch(()=>{
|
this.loading = false;
|
})
|
},
|
rowSelectionsChange(selectedRowKeys, selectedRows){
|
let reduces = [], adds = []
|
/* 计算需要被移出choosen的内容 */
|
this.selectedRowKeys.forEach((val)=>{
|
let f1 = false;
|
for (let i=0;i<selectedRowKeys.length;i++) {
|
if (selectedRowKeys[i] === val) {
|
f1 = true;
|
break;
|
}
|
}
|
if (!f1) {
|
reduces.push(val)
|
}
|
})
|
/* 计算需要被加入choosen的内容 */
|
selectedRowKeys.forEach((val)=>{
|
let f2 = false;
|
for (let i=0;i<this.choosen.length;i++) {
|
if (this.choosen[i][this.tableKey] === val) {
|
f2 = true;
|
break;
|
}
|
}
|
if (!f2) {
|
adds.push(val)
|
}
|
})
|
/* 执行实际数据处理，先减后加，减少处理时间 */
|
this.selectedRowKeys = selectedRowKeys
|
this.reduceChoosen(reduces)
|
this.addChosen(adds)
|
},
|
chooseTablePageChange(pagination){
|
this.queried.PageNo = pagination.current
|
this.queryChooseDataSource()
|
},
|
reduceChoosen(arr){
|
arr.forEach((val)=>{
|
let reduceIndex = -1;
|
for (let i=0;this.choosen.length;i++) {
|
if (this.choosen[i][this.tableKey] === val) {
|
reduceIndex = i
|
break;
|
}
|
}
|
if (reduceIndex>=0) {
|
this.choosen.splice(reduceIndex,1)
|
}
|
})
|
},
|
cancelChoosen(index){
|
this.choosen.splice(index,1)
|
},
|
addChosen(arr){
|
arr.forEach((val)=>{
|
for (let i=0;this.list.length;i++) {
|
if (this.list[i][this.tableKey] === val) {
|
let obj = {...this.list[i]}
|
this.choosen.push(obj)
|
break;
|
}
|
}
|
})
|
},
|
setSelectedRowKeys(){
|
let arr = []
|
this.choosen.forEach((item)=>{
|
for (let i=0;i<this.list.length;i++) {
|
if (this.list[i][this.tableKey] === item[this.tableKey]) {
|
arr.push(item[this.tableKey])
|
break;
|
}
|
}
|
})
|
this.selectedRowKeys = arr
|
},
|
changeShowType(){
|
if (this.showType===1) {
|
this.showType = 2
|
} else {
|
this.showType = 1
|
this.setSelectedRowKeys()
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.purchase-receive-choose-modal-content{
|
height: 50vh;
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
padding: 16px 16px 0 16px;
|
.table-box{
|
height: 100%;
|
}
|
}
|
</style>
|
