<template>
|
<div>
|
<filter-dialog ref="table" :show.sync="isShow" :title="title" :tableData="tableData"
|
:total="total" :form="listQuery" :formLabel="formLabel" :loading="loading"
|
dialogWidth="70%" :multipleSelected="true" :closeBtn="false"
|
@page-info-change="handPageInfoChange" :selectable="selecetInit"
|
@selected="handleSelected" @close="handleDialogClose" :dataKey="'spuNum'"
|
:isClearCheckItem="false">
|
<template slot="condition">
|
<el-button type="primary" size="mini" @click="handleFilter">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</template>
|
<template slot="columns">
|
<el-table-column label="商品主编码" prop="spuNum" width="220px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="商品名称" prop="spuName" min-width="220px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="规格型号" prop="spec" width="140px">
|
</el-table-column>
|
<el-table-column label="剩余库存" prop="stock" width="140px" show-overflow-tooltip>
|
</el-table-column>
|
</template>
|
</filter-dialog>
|
</div>
|
</template>
|
|
<script>
|
import ChannelInventoryApi from '@/api/stockManagement/channelInventory'
|
import filterDialog from '@/components/filterDialog/filterDialog.vue'
|
export default {
|
name: "chooseProductsDialog",
|
components: { filterDialog },
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: ''
|
},
|
channelId: {
|
type: String,
|
default: '',
|
},
|
selectedTable: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
},
|
data() {
|
return {
|
isShow: false,
|
listQuery: {
|
spuNum: null,//商品主编码
|
},
|
formLabel: [
|
{
|
model: 'spuNum',
|
label: '商品主编码',
|
type: 'input',
|
labelWidth: '100px',
|
sm: 8,
|
}
|
],
|
tableData: [],
|
selectedData: [],
|
selectedRows: null,
|
total: 0,
|
loading: false,
|
}
|
},
|
watch: {
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
dialogVisible: function (newShow) {
|
this.selectedRows = JSON.parse(JSON.stringify(this.selectedTable))
|
this.isShow = newShow
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
isShow: function (newDialogShow, oldDialogShow) {
|
this.$emit('update:dialogVisible', newDialogShow)
|
if (!newDialogShow) {
|
this.initData();
|
}
|
},
|
},
|
methods: {
|
initData() {
|
this.tableData = [];
|
this.selectedData = [];
|
this.total = 0;
|
this.listQuery.spuNum = null;
|
},
|
/**
|
* 分页信息改变时,列表查询
|
*/
|
handPageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
/**
|
* 查询列表
|
*/
|
async queryList(pageInfo) {
|
try {
|
let params = {
|
current: pageInfo.pageNum,
|
size: pageInfo.pageSize,
|
channel: this.channelId,
|
spuNum: this.listQuery.spuNum
|
}
|
this.loading = true;
|
const res = await ChannelInventoryApi.getList(params)
|
if (res.code === '200') {
|
this.tableData = res.data.records
|
this.total = res.data.total
|
this.loading = false;
|
this.setCheckedSpuNumId();
|
} else {
|
this.loading = false;
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 回显选择对应的商品行数据
|
*/
|
setCheckedSpuNumId() {
|
if (this.tableData && this.tableData.length) {
|
let spuNums = this.selectedRows.map((item) => item.spuNum);
|
this.tableData.forEach(item1 => {
|
if (spuNums.indexOf(item1.spuNum) >= 0) {
|
this.$refs.table.getTableNode().toggleRowSelection(item1, true);
|
}
|
})
|
}
|
},
|
/**
|
* 搜索条件变更处理
|
*/
|
handleFilter() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 关闭弹窗
|
*/
|
handleDialogClose() {
|
if (this.selectedRows) {
|
this.$emit('hand-selected-row-data', this.selectedRows)
|
}
|
},
|
/**
|
*获取选中的
|
*/
|
handleSelected(rows) {
|
this.tableData.forEach((item1) => {
|
//原有选中数据在当前页是否存在
|
let _curTablePage = this.selectedRows.find((v) => v.spuNum === item1.spuNum);
|
if (_curTablePage) {
|
//存在
|
const index = rows.find((v) => v.spuNum === item1.spuNum)
|
//原有选中的数据在当前页存在但是未选中---删除当前数据
|
if (!index) {
|
let arr = [];
|
this.selectedRows.forEach((v) => {
|
if (v.spuNum != item1.spuNum) {
|
arr.push(v)
|
}
|
})
|
this.selectedRows = [...arr];
|
}
|
} else {
|
//不存在
|
if (rows.length) {
|
//原有选中数据与新选中的数据进行合并
|
rows.forEach((v1) => {
|
let isE = this.selectedRows.find((v) => v.spuNum === v1.spuNum)
|
if (!isE) {
|
this.selectedRows = [...this.selectedRows, ...[v1]]
|
}
|
})
|
}
|
}
|
})
|
},
|
/**
|
* 初始化复选框
|
*/
|
selecetInit(row, index) {
|
if (row.stock === 0 || !row.stock) {
|
return false // 不可勾选
|
} else {
|
return true // 可勾选
|
}
|
},
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
