<template>
|
<el-dialog :title="title" width="70%" append-to-body="true" :visible.sync="dialogVisible">
|
<el-row :gutter="20">
|
<el-col :span="11">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>初始数据</span>
|
<el-input class="input" v-if="showSearch" v-model="searchLeft" placeholder="请输入搜索内容"
|
@keyup.enter.native="handleEnter"></el-input>
|
</div>
|
<el-table ref="transferLeftTable" :data="leftData" height="500" highlight-current-row
|
tooltip-effect="dark" @selection-change="handleLeftSelectionChange" @row-click="handleLeftRowClick">
|
<el-table-column type="selection" width="50" align="center" fixed="left" :selectable="selectable" />
|
<div v-for="(item, index) in columns" :key="index">
|
<el-table-column v-if="item.visible" :label="item.label" align="center" :prop="item.key" />
|
</div>
|
</el-table>
|
</el-card>
|
</el-col>
|
<el-col :span="2" class="btns" :style="{ height: '500px' }">
|
<el-button class="btn" :disabled="leftMultiple" type="primary" icon="el-icon-arrow-right"
|
@click="moveToRight" circle></el-button>
|
<el-button class="btn" :disabled="rightMultiple" type="primary" @click="moveToLeft"
|
icon="el-icon-arrow-left" circle></el-button>
|
</el-col>
|
<el-col :span="11">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>改变数据</span>
|
<el-input class="input" v-if="showSearch" v-model="searchRight" placeholder="请输入搜索内容"></el-input>
|
</div>
|
<el-table ref="transferRightTable" :data="rightData" height="500" highlight-current-row
|
tooltip-effect="dark" @selection-change="handleRightSelectionChange"
|
@row-click="handleRightRowClick">
|
<el-table-column type="selection" width="50" align="center" fixed="left" />
|
<div v-for="(item, index) in columns" :key="index">
|
<el-table-column v-if="item.visible" :label="item.label" align="center" :prop="item.key" />
|
</div>
|
</el-table>
|
</el-card>
|
</el-col>
|
</el-row>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="tableTransferSave">保存</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: 'TableTransfer',
|
model: {
|
prop: "value",
|
event: "change",
|
},
|
props: {
|
// 是否打开
|
visible: {
|
typeof: Boolean,
|
default: false
|
},
|
title: {
|
typeof: String,
|
default: '模板阶段维护'
|
},
|
//绑定数据
|
value: {
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
//主键key值
|
keyName: {
|
type: String,
|
default: "id",
|
},
|
columns: {
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
dataList: {
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
/**
|
* 是否显示搜索框
|
*/
|
showSearch: {
|
type: Boolean,
|
default: true,
|
},
|
},
|
|
watch: {
|
visible(n) {
|
this.dialogVisible = n;
|
},
|
dialogVisible(n) {
|
this.$emit('update:visible', n)
|
},
|
searchLeft: {
|
handler: function () {
|
this.handleQueryLeft();
|
},
|
deep: true,
|
},
|
searchRight: {
|
handler: function () {
|
this.handleQueryRight();
|
},
|
deep: true,
|
},
|
dataList: {
|
handler(data) {
|
console.log(data)
|
|
},
|
deep: true,
|
}
|
},
|
data() {
|
return {
|
dialogVisible: this.visible,
|
searchLeft: "",
|
leftIds: [],
|
leftMultiple: true,
|
leftDataList: [],
|
leftData: [],
|
searchRight: "",
|
rightIds: [],
|
rightMultiple: true,
|
rightDataList: [],
|
rightData: [],
|
}
|
},
|
mounted() {
|
this.init();
|
},
|
methods: {
|
selectable(row, index) {
|
console.log(row)
|
return row.checked === false //为true的时候可以选，为false则不可选择
|
},
|
init() {
|
this.rightIds = this.value;
|
console.log(this.rightIds)
|
for (let i = 0; i < this.dataList.length; i++) {
|
if (this.value.some((item) => item == this.dataList[i][this.keyName])) {
|
this.rightDataList.push(this.dataList[i]);
|
} else {
|
this.leftDataList.push(this.dataList[i]);
|
}
|
}
|
this.leftData = [...this.leftDataList];
|
this.rightData = [...this.rightDataList];
|
},
|
// left多选框选中数据
|
handleLeftSelectionChange(selection) {
|
this.leftIds = selection.map((item) => item[this.keyName]);
|
this.leftMultiple = !selection.length;
|
},
|
// right多选框选中数据
|
handleRightSelectionChange(selection) {
|
this.rightIds = selection.map((item) => item[this.keyName]);
|
this.rightMultiple = !selection.length;
|
},
|
// 按钮点击
|
moveToRight() {
|
for (let i = 0; i < this.leftDataList.length; i++) {
|
let a = this.leftIds.findIndex(
|
(item) => item == this.leftDataList[i][this.keyName]
|
);
|
console.log(a)
|
if (a !== -1) {
|
this.rightDataList.push(this.leftDataList[i]);
|
// this.leftDataList[i].checked = true
|
// this.$refs.transferLeftTable.toggleRowSelection(this.leftDataList[i],true)
|
this.$delete(this.leftDataList, i);
|
i--;
|
}
|
}
|
// let obj = {}
|
// let filterright = this.rightDataList.reduce((cur, next) => {
|
// obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
|
// return cur;
|
// }, [])
|
// console.log('filterright', filterright)
|
this.leftData = this.setData(this.leftDataList, this.searchLeft);
|
this.rightData = this.setData(this.rightDataList, this.searchRight);
|
this.$emit(
|
"change",
|
this.rightDataList.map((item) => item[this.keyName])
|
);
|
},
|
// 按钮点击
|
moveToLeft() {
|
for (let i = 0; i < this.rightDataList.length; i++) {
|
let a = this.rightIds.findIndex(
|
(item) => item == this.rightDataList[i][this.keyName]
|
);
|
if (a !== -1) {
|
this.leftDataList.push(this.rightDataList[i]);
|
this.$delete(this.rightDataList, i);
|
i--;
|
}
|
}
|
// let obj = {}
|
// let filterleft = this.leftDataList.reduce((cur, next) => {
|
// obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
|
// return cur;
|
// }, [])
|
// console.log('filterright', filterleft)
|
this.leftData = this.setData(this.leftDataList, this.searchLeft);
|
this.rightData = this.setData(this.rightDataList, this.searchRight);
|
this.$emit(
|
"change",
|
this.rightDataList.map((item) => item[this.keyName])
|
);
|
},
|
|
handleQueryLeft() {
|
this.leftData = this.setData(this.leftDataList, this.searchLeft);
|
},
|
handleQueryRight() {
|
this.rightData = this.setData(this.rightDataList, this.searchRight);
|
},
|
// 单选
|
handleLeftRowClick(row) {
|
if (this.leftData) {
|
this.$refs.transferLeftTable.toggleRowSelection(row)
|
} else {
|
this.$refs.transferLeftTable.clearSelection()
|
}
|
},
|
// 单选
|
handleRightRowClick(row) {
|
if (this.rightData) {
|
this.$refs.transferRightTable.toggleRowSelection(row)
|
} else {
|
this.$refs.transferRightTable.clearSelection()
|
}
|
},
|
setData(dataList, search) {
|
if (search != null || search != "") {
|
let list = [];
|
for (let i = 0; i < dataList.length; i++) {
|
if (
|
this.columns.some((item) =>
|
dataList[i][item.key].toLowerCase().includes(search.toLowerCase())
|
)
|
) {
|
list.push(dataList[i]);
|
}
|
}
|
return list;
|
} else {
|
return dataList;
|
}
|
},
|
change(val) {
|
console.log(val);
|
console.log(this.value)
|
},
|
done() {
|
this.dialogVisible = false
|
},
|
tableTransferSave() {
|
this.$emit('save', this.rightData)
|
this.leftData = [...this.rightData, ...this.leftData]
|
this.leftDataList = [...this.rightDataList, ...this.leftDataList]
|
this.rightDataList = []
|
this.rightData = []
|
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep(.el-col>.el-card >.el-card__header) {
|
background: #fff
|
}
|
|
.box-card {
|
background: #fff;
|
}
|
|
.clearfix {
|
display: -webkit-box;
|
display: flex;
|
display: -ms-flexbox;
|
-webkit-box-pack: justify;
|
-ms-flex-pack: justify;
|
justify-content: space-between;
|
-webkit-box-align: center;
|
-ms-flex-align: center;
|
align-items: center;
|
}
|
|
.input {
|
float: right;
|
padding: 3px 0;
|
max-width: 400px;
|
}
|
|
.btns {
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content: center;
|
|
.btn {
|
margin: 20px 0;
|
}
|
}
|
</style>
|
