460 lines
12 KiB
Vue
460 lines
12 KiB
Vue
<template>
|
|
<div class="transfer">
|
|
<div class="transfer-panel">
|
|
<p class="transfer-panel-header">
|
|
<span>{{ titleTexts && titleTexts[0] }}</span>
|
|
<span>{{ leftSelection.length }}/{{ leftTableData.length }}</span>
|
|
</p>
|
|
<div v-if="showQuery">
|
|
<el-form :inline="true" :model="leftQueryCondition" class="query-form">
|
|
<slot name="leftCondition" v-bind:scope="leftQueryCondition"></slot>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onLeftQuerySubmit()">{{ queryTexts[0] }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<el-table
|
|
ref="leftTable"
|
|
:data="leftTableData"
|
|
:height="minHeight"
|
|
:max-height="maxHeight"
|
|
:row-key="tableRowKey"
|
|
:row-style="handleRowStyle"
|
|
border
|
|
size="small"
|
|
stripe
|
|
@row-click="handleLeftRowClick"
|
|
@selection-change="handleLeftSelectionChange"
|
|
>
|
|
<el-table-column
|
|
:selectable="handleSelectable"
|
|
type="selection"
|
|
width="40px"
|
|
></el-table-column>
|
|
<el-table-column
|
|
v-for="col in leftColumns"
|
|
:key="col.id"
|
|
:label="col.label"
|
|
:prop="col.id"
|
|
:width="col.width"
|
|
>
|
|
<template slot-scope="scope">
|
|
<slot v-bind:scope="{row: scope.row, col: col}">
|
|
<span>{{ scope.row[col.id] }}</span>
|
|
</slot>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
v-if="showPagination"
|
|
:current-page="pageIndex"
|
|
:page-size="pageSize"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:pager-count="5"
|
|
:total="totalSize"
|
|
layout="total, sizes, prev, pager, next"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
<div class="transfer-buttons">
|
|
<el-button
|
|
:class="buttonClasses"
|
|
:disabled="disabledLeftButton"
|
|
type="primary"
|
|
@click.native="addToRight"
|
|
>
|
|
<span v-if="buttonTexts[0] !== undefined" class="button-text">{{ buttonTexts[0] }}</span>
|
|
<i class="el-icon-arrow-right"></i>
|
|
</el-button>
|
|
<el-button
|
|
:class="buttonClasses"
|
|
:disabled="rightSelection.length === 0"
|
|
type="primary"
|
|
@click.native="addToLeft"
|
|
>
|
|
<i class="el-icon-arrow-left"></i>
|
|
<span v-if="buttonTexts[1] !== undefined" class="button-text">{{ buttonTexts[1] }}</span>
|
|
</el-button>
|
|
</div>
|
|
<div class="transfer-panel">
|
|
<p class="transfer-panel-header">
|
|
<span>{{ titleTexts && titleTexts[1] }}</span>
|
|
<span>{{ rightSelection.length }}/{{ rightTableData.length }}</span>
|
|
</p>
|
|
<div v-if="showQuery">
|
|
<el-form :inline="true" :model="rightQueryCondition" class="query-form">
|
|
<slot name="rightCondition" v-bind:scope="rightQueryCondition"></slot>
|
|
<el-form-item>
|
|
<!-- <el-button type="primary" @click="onRightQuerySubmit()">{{ queryTexts[1] }}</el-button>-->
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<el-table
|
|
ref="rightTable"
|
|
:data="calcRightTableData"
|
|
:height="minHeight"
|
|
:max-height="maxHeight"
|
|
:row-key="tableRowKey"
|
|
border
|
|
size="small"
|
|
stripe
|
|
@row-click="handleRightRowClick"
|
|
@selection-change="handleRightSelectionChange"
|
|
>
|
|
<el-table-column type="selection" width="40px"></el-table-column>
|
|
<el-table-column
|
|
v-for="col in rightColumns || leftColumns"
|
|
:key="col.id"
|
|
:label="col.label"
|
|
:prop="col.id"
|
|
:width="col.width"
|
|
>
|
|
<template slot-scope="scope">
|
|
<slot v-bind:scope="{row: scope.row, col: col}">
|
|
<span>{{ scope.row[col.id] }}</span>
|
|
</slot>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
v-if="showPagination"
|
|
:total="rightTableData.length"
|
|
layout="total"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'EltTransfer',
|
|
props: {
|
|
value: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
leftColumns: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
// 显示条件查询
|
|
showQuery: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 显示分页
|
|
showPagination: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 左侧分页回调
|
|
paginationCallBack: {
|
|
type: Function,
|
|
default: function() {
|
|
return new Promise(((resolve, reject) => {
|
|
try {
|
|
resolve({ total: 0, data: null })
|
|
} catch {
|
|
reject()
|
|
}
|
|
}))
|
|
}
|
|
},
|
|
// 标题文本
|
|
titleTexts: {
|
|
type: Array,
|
|
default() {
|
|
return ['待选项', '已选项']
|
|
}
|
|
},
|
|
// 按钮文本
|
|
buttonTexts: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
// 查询按钮文本
|
|
queryTexts: {
|
|
type: Array,
|
|
default() {
|
|
return ['查询', '筛选']
|
|
}
|
|
},
|
|
// 右侧参数
|
|
rightColumns: {
|
|
type: Array,
|
|
default() {
|
|
return undefined
|
|
}
|
|
},
|
|
// 表格最小高度
|
|
minHeight: {
|
|
type: String,
|
|
default: '650px'
|
|
},
|
|
// 表格最大高度
|
|
maxHeight: {
|
|
type: String,
|
|
default: '650px'
|
|
},
|
|
// 表格行数据的Key
|
|
tableRowKey: {
|
|
type: Function,
|
|
default(row) {
|
|
return row && row && row.id
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
leftTableData: [],
|
|
rightTableData: this.value || [],
|
|
pageIndex: 1,
|
|
pageSize: 20,
|
|
totalSize: 0,
|
|
leftSelection: [],
|
|
rightSelection: [],
|
|
leftQueryCondition: {},
|
|
rightQueryCondition: {},
|
|
rightConditionTemp: undefined
|
|
}
|
|
},
|
|
created() {
|
|
// 监听 init-data 事件，接收初始化数据
|
|
this.$on('initData', (data) => {
|
|
this.rightTableData = data
|
|
})
|
|
this.handlePaginationCallBack()
|
|
},
|
|
computed: {
|
|
hasButtonTexts() {
|
|
return this.buttonTexts.length === 2
|
|
},
|
|
buttonClasses() {
|
|
return ['transfer-button', { 'is-with-texts': this.hasButtonTexts }]
|
|
},
|
|
disabledLeftButton() {
|
|
return !this.leftSelection.some(leftRow => !this.rightTableData.some(rightRow => this.checkObjectIsEqual(leftRow, rightRow)))
|
|
},
|
|
calcRightTableData() {
|
|
if (this.showQuery && this.rightConditionTemp) {
|
|
const conditionKeys = Object.keys(this.rightConditionTemp)
|
|
return this.rightTableData.filter(data => {
|
|
return conditionKeys.some(key => {
|
|
const rowCellData = data[key]
|
|
const condVal = this.rightConditionTemp[key].trim()
|
|
if (rowCellData) {
|
|
return String(rowCellData).indexOf(condVal) > -1
|
|
}
|
|
return true
|
|
})
|
|
})
|
|
}
|
|
return this.rightTableData
|
|
}
|
|
},
|
|
methods: {
|
|
handleLeftSelectionChange(selection) {
|
|
this.leftSelection = selection
|
|
},
|
|
handleRightSelectionChange(selection) {
|
|
this.rightSelection = selection
|
|
},
|
|
handleLeftRowClick(row) {
|
|
if (!this.rightTableData.some(rightRow => this.checkObjectIsEqual(rightRow, row))) {
|
|
this.$refs.leftTable.toggleRowSelection(row)
|
|
}
|
|
},
|
|
handleRightRowClick(row) {
|
|
this.$refs.rightTable.toggleRowSelection(row)
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val
|
|
this.handlePaginationCallBack()
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.pageIndex = val
|
|
this.handlePaginationCallBack()
|
|
},
|
|
//查询按钮
|
|
handlePaginationCallBack() {
|
|
if (this.showPagination && this.paginationCallBack) {
|
|
const condition = {
|
|
pageIndex: this.pageIndex,
|
|
pageSize: this.pageSize,
|
|
...this.leftQueryCondition
|
|
}
|
|
this.paginationCallBack.call(null, condition).then(result => {
|
|
if (result && Array.isArray(result.data)) {
|
|
this.leftTableData = result.data
|
|
this.totalSize = result.total
|
|
}
|
|
this.$nextTick(() => {
|
|
this.leftTableData.forEach(leftRow => {
|
|
const isHave = this.rightTableData.some(rightRow => this.checkObjectIsEqual(rightRow, leftRow))
|
|
this.$refs.leftTable.toggleRowSelection(leftRow, isHave)
|
|
})
|
|
})
|
|
})
|
|
}
|
|
},
|
|
handleRowStyle({ row }) {
|
|
if (this.rightTableData.some(rightRow => this.checkObjectIsEqual(rightRow, row))) {
|
|
return {
|
|
color: 'blue'
|
|
}
|
|
}
|
|
return {}
|
|
},
|
|
handleSelectable(row) {
|
|
return !this.rightTableData.some(rightRow => this.checkObjectIsEqual(rightRow, row))
|
|
},
|
|
addToRight() {
|
|
for (const item of this.leftSelection) {
|
|
const isHave = this.rightTableData.some(rightRow => this.checkObjectIsEqual(rightRow, item))
|
|
if (!isHave) {
|
|
this.rightTableData.push(item)
|
|
}
|
|
}
|
|
this.$emit('input', this.rightTableData)
|
|
},
|
|
addToLeft() {
|
|
this.rightSelection.forEach(item => {
|
|
const index = this.rightTableData.findIndex(rightRow => this.checkObjectIsEqual(rightRow, item))
|
|
if (index !== -1) {
|
|
this.rightTableData.splice(index, 1)
|
|
const leftRow = this.leftTableData.find(leftRow => this.checkObjectIsEqual(leftRow, item))
|
|
if (leftRow) {
|
|
this.$refs.leftTable.toggleRowSelection(leftRow, false)
|
|
}
|
|
}
|
|
})
|
|
this.$emit('input', this.rightTableData)
|
|
},
|
|
onLeftQuerySubmit() {
|
|
this.handlePaginationCallBack()
|
|
},
|
|
onRightQuerySubmit() {
|
|
this.rightConditionTemp = JSON.parse(JSON.stringify(this.rightQueryCondition))
|
|
},
|
|
checkObjectIsEqual(rowObj1, rowObj2) {
|
|
return this.tableRowKey(rowObj1) === this.tableRowKey(rowObj2)
|
|
},
|
|
clear() {
|
|
this.rightTableData = []
|
|
this.$refs.leftTable.clearSelection()
|
|
for (const key in this.leftQueryCondition) {
|
|
this.leftQueryCondition[key] = undefined
|
|
}
|
|
for (const key in this.rightQueryCondition) {
|
|
this.rightQueryCondition[key] = undefined
|
|
}
|
|
this.pageIndex = 1
|
|
this.handlePaginationCallBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.transfer {
|
|
font-size: 14px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.el-icon-arrow-right, .el-icon-arrow-left {
|
|
font-size: 40px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.transfer-panel {
|
|
border: 1px solid #EBEEF5;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
background: #FFF;
|
|
display: inline-block;
|
|
width: calc((100% - 100px) / 2);
|
|
max-height: 100%;
|
|
box-sizing: border-box;
|
|
position: relative
|
|
}
|
|
|
|
.transfer-panel .transfer-panel-header {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
background: #F5F7FA;
|
|
margin: 0;
|
|
padding-left: 15px;
|
|
border-bottom: 1px solid #EBEEF5;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
color: #000;
|
|
}
|
|
|
|
.transfer-panel-header span:last-child {
|
|
position: absolute;
|
|
right: 15px;
|
|
}
|
|
|
|
.transfer-buttons {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 100px;
|
|
}
|
|
|
|
.transfer-button {
|
|
display: block;
|
|
margin: 0 auto;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
color: #FFF;
|
|
background-color: #409EFF;
|
|
font-size: 0
|
|
}
|
|
|
|
.transfer-button .button-text {
|
|
margin-left: 2px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.transfer-button.is-with-texts {
|
|
border-radius: 4px
|
|
}
|
|
|
|
.transfer-button.is-disabled, .transfer-button.is-disabled:hover {
|
|
border: 1px solid #DCDFE6;
|
|
background-color: #F5F7FA;
|
|
color: #C0C4CC
|
|
}
|
|
|
|
.transfer-button:first-child {
|
|
margin-bottom: 10px
|
|
}
|
|
|
|
.transfer-button:nth-child(2) {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.transfer-button i, .transfer-button span {
|
|
font-size: 14px
|
|
}
|
|
|
|
.query-form {
|
|
margin: 5px;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.query-form .el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|