<template>
|
<el-dialog
|
v-dialogDrag
|
:close-on-click-modal="false"
|
:title="title"
|
:visible.sync="visible"
|
append-to-body="true"
|
class="avue-dialog"
|
width="800px"
|
@close="dialogClose">
|
<div style="height: 42px;line-height: 30px;margin-top: -5px;" v-if="topMethodsObj !== {} && topMethodsObj">
|
<div>
|
<span>导出方式：</span>
|
<el-radio-group v-model="radio">
|
<el-radio :label="0" v-if="topMethodsObj.select">选择</el-radio>
|
<el-radio :label="1" v-if="topMethodsObj.all">全部</el-radio>
|
<el-radio :label="2" v-if="topMethodsObj.page">页码</el-radio>
|
</el-radio-group>
|
<span v-if="radio === 2" style="margin-left: 20px;color: #F56C6C; ">
|
<el-input v-model="pageExport" style="width: 150px" size="mini"></el-input> （输入页码或者页面范围，如：1-10）</span>
|
</div>
|
</div>
|
<div style="text-align: center">
|
<el-transfer
|
v-model="rightRoleData"
|
v-loading="loading"
|
:data="data"
|
:filter-method="filterMethod"
|
:render-content="renderFunc"
|
@change="handleChange"
|
:titles="transferTitle"
|
filter-placeholder="关键词搜索"
|
filterable
|
style="text-align:left;display: inline-block;">
|
</el-transfer>
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
<div v-if="bottomValue" class="valueInfo">已设置的值为：[{{ bottomValue }}]</div>
|
<el-button size="small" type="primary" @click="sendHandler">确 定</el-button>
|
<el-button size="small" @click="visible = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import func from "@/util/func";
|
|
export default {
|
name: "transfer",
|
props: ['title', 'leftRoleData', 'rightRoleData', 'transferTitle', 'bottomValue', 'topMethodsObj', 'selectList'],
|
/**
|
* topMethodsObj:{
|
select:true,
|
all:true,
|
page:false
|
},
|
控制顶层选择项是否展示，需要配合selectList使用
|
* @returns {object}
|
*/
|
data() {
|
return {
|
radio: 0,
|
pageExport: "",
|
visible: false, // 通过 this.$refs.transfer.visible = true; 开启子组件对话框
|
data: [],
|
loading: false,
|
filterMethod(query, item) {
|
return item.label.indexOf(query) > -1;
|
},
|
renderFunc(h, option) {
|
return <span><i class="el-icon-s-custom"></i> {option.label}</span>;
|
}
|
}
|
},
|
watch: {
|
//渲染穿梭框
|
leftRoleData: {
|
// 需要在打开穿梭框组件的时候对leftRoleData进行赋值（可以参考action管理-action列表 导出功能） 如果在data里面定义的数据，组件内watch会监听不到newVal
|
handler(newval) {
|
if (newval) {
|
// 清空data数组
|
this.data = [];
|
newval.forEach((item) => {
|
this.data.push({
|
...item,
|
label: item.name,
|
key: item.oid
|
});
|
});
|
this.loading = false;
|
}
|
}
|
},
|
},
|
created() {
|
this.loading = true;
|
},
|
methods: {
|
dialogClose() {
|
this.visible = false;
|
//this.data = [];
|
//this.rightRoleData = [];
|
},
|
sendHandler() {
|
if (func.isEmptyObject(this.topMethodsObj)) {
|
this.$emit('transferSend', this.rightRoleData);
|
} else {
|
if (this.radio === 0) {
|
if (this.selectList.length <= 0) {
|
this.$message.warning('请选择要导出的模板')
|
return
|
}
|
this.$emit('transferSend', this.rightRoleData, 0);
|
} else if (this.radio === 1) {
|
this.$emit('transferSend', this.rightRoleData, 1);
|
}
|
}
|
|
this.visible = false;
|
},
|
handleChange(value, direction, movedKeys) {
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
/deep/ .el-transfer-panel {
|
height: 450px; /* 左右两个穿梭框的高度和宽度 */
|
width: 322px;
|
}
|
|
/deep/ .el-transfer-panel__list.is-filterable {
|
height: 323px; /* 穿梭框列表高度 */
|
}
|
/deep/ .el-transfer__buttons .el-button{
|
display: block;
|
margin: 30px 0;
|
padding: 8px 15px;
|
}
|
/deep/ .el-transfer__button:first-child{
|
transform: translateY(200%);
|
}
|
/deep/ .el-transfer__button:nth-child(2){
|
transform: translateY(-200%);
|
}
|
.valueInfo {
|
float: left;
|
border: 1px solid #E9E7E7;
|
display: inline-block;
|
vertical-align: middle;
|
padding: 6px 12px;
|
line-height: 1;
|
}
|
</style>
|
