dengjie commit : 角色选择器完善及部分细节样式 #5
|
|
@ -1,16 +1,21 @@
|
|||
<template>
|
||||
<w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
|
||||
<w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
|
||||
<div class="picker">
|
||||
<div class="candidate" v-loading="loading">
|
||||
<div style="padding: 5px 8px;">
|
||||
<el-input v-model="filterText" @input="searchUser" style="width: 100%;" size="small"
|
||||
<el-input v-model="filterText" style="width: 100%;" size="small"
|
||||
clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
|
||||
</div>
|
||||
<!-- 部门 -->
|
||||
<el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
|
||||
<el-scrollbar style="height:350px">
|
||||
<el-tree :data="deptList" ref="tree" empty-text="" default-expand-all show-checkbox
|
||||
@check-change="handleCheckChange" :filter-node-method="filterNode"></el-tree>
|
||||
<el-tree :data="deptList" ref="tree" empty-text="" node-key="value" default-expand-all
|
||||
:show-checkbox="showCheckbox"
|
||||
@check="handleCheckChange" :filter-node-method="filterNode">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
|
|
@ -24,6 +29,7 @@
|
|||
<div v-for="(org, index) in selectList" :key="index" class="org-item">
|
||||
<i class="el-icon-folder-opened"></i>
|
||||
<span>{{ org.label }}</span>
|
||||
<i class="el-icon-close" @click="noSelected(org)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,9 +48,34 @@ export default {
|
|||
loading: false,
|
||||
title: "请选择",
|
||||
multiple: true,//是否多选
|
||||
showCheckbox: true,//是否显示左侧选择框
|
||||
selectList: [],
|
||||
filterText: "",
|
||||
deptList: []
|
||||
deptList: [
|
||||
{
|
||||
value:1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
value:2,
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
value:3,
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
value:4,
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
value:5,
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
value:6,
|
||||
label: '三级 2-1-1'
|
||||
}]
|
||||
}]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -56,11 +87,11 @@ export default {
|
|||
this.getDepartmentTree();
|
||||
},
|
||||
methods: {
|
||||
//获取角色信息
|
||||
//获取部门信息
|
||||
getDepartmentTree() {
|
||||
getDepartmentTree().then(res => {
|
||||
console.log(res);
|
||||
this.deptList=res.data
|
||||
console.log("获取部门信息", res);
|
||||
this.deptList = res.data;
|
||||
});
|
||||
},
|
||||
//通过关键字过滤树节点
|
||||
|
|
@ -68,19 +99,17 @@ export default {
|
|||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
//用于首页选择本次登录者,显示弹窗
|
||||
show() {
|
||||
//用于部门选择
|
||||
showDeptPicker() {
|
||||
this.visible = true;
|
||||
this.init();
|
||||
},
|
||||
//初始化
|
||||
init() {
|
||||
this.selectList = Object.assign([], this.selected);
|
||||
},
|
||||
//选中部门
|
||||
handleCheckChange(data, checked) {
|
||||
//多选
|
||||
// 左侧有选择框
|
||||
if (this.showCheckbox) {
|
||||
// 左侧有选择框 + 多选
|
||||
if (this.multiple) {
|
||||
//不添加重复的数据到右边
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].value === data.value) {
|
||||
this.selectList.splice(i, 1);
|
||||
|
|
@ -89,20 +118,38 @@ export default {
|
|||
}
|
||||
if (checked) {
|
||||
this.selectList.push(data);
|
||||
} else {
|
||||
// this.$refs.tree.setCheckedKeys(data);
|
||||
this.$refs.tree.setCheckedKeys([]);
|
||||
this.selectList = [];
|
||||
}
|
||||
} else {//单选
|
||||
checked = true;
|
||||
} else {// 左侧有选择框 + 单选
|
||||
if (checked) {
|
||||
this.$refs.tree.setCheckedNodes([data]);
|
||||
this.selectList = [data];
|
||||
} else {
|
||||
this.$refs.tree.setCheckedKeys([]);
|
||||
this.selectList = [];
|
||||
}
|
||||
}
|
||||
} else {// 左侧没有选择框
|
||||
// 左侧没有选择框 + 多选
|
||||
if (this.multiple) {
|
||||
|
||||
} else {// 左侧没有选择框 + 单选
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
//确定按钮
|
||||
selectOk() {
|
||||
// this.$emit("ok", Object.assign([], this.select.map(v => {
|
||||
// v.avatar = undefined;
|
||||
// return v;
|
||||
// })));
|
||||
// this.visible = false;
|
||||
// this.recover();
|
||||
//右侧的×
|
||||
noSelected(org) {
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].value === org.value) {
|
||||
this.selectList.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
org.selected = false;
|
||||
},
|
||||
//清空
|
||||
clearSelected() {
|
||||
|
|
@ -111,23 +158,19 @@ export default {
|
|||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.selectList = [];
|
||||
this.handleCheckChange("", false);
|
||||
});
|
||||
},
|
||||
|
||||
searchUser() {
|
||||
let userName = this.search.trim();
|
||||
this.searchUsers = [];
|
||||
this.loading = true;
|
||||
// getUserByName({userName: userName}).then(rsp => {
|
||||
// this.loading = false
|
||||
// this.searchUsers = rsp.data
|
||||
// this.selectToLeft()
|
||||
// }).catch(err => {
|
||||
// this.loading = false
|
||||
// this.$message.error("接口异常")
|
||||
// })
|
||||
//确定按钮
|
||||
selectConfirm() {
|
||||
// this.$emit("ok", Object.assign([], this.select.map(v => {
|
||||
// v.avatar = undefined;
|
||||
// return v;
|
||||
// })));
|
||||
// this.visible = false;
|
||||
// this.recover();
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -135,6 +178,16 @@ export default {
|
|||
<style lang="less" scoped>
|
||||
@containWidth: 278px;
|
||||
|
||||
/deep/ .el-tree-node {
|
||||
.is-leaf + .el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-dialog__body {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
|
@ -182,6 +235,12 @@ export default {
|
|||
overflow-y: auto;
|
||||
height: 350px;
|
||||
|
||||
.el-icon-close {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
font-size: larger;
|
||||
}
|
||||
.org-item {
|
||||
margin: 0 5px;
|
||||
border-radius: 5px;
|
||||
|
|
@ -189,6 +248,7 @@ export default {
|
|||
padding: 7px 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
|
||||
<w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
|
||||
<div class="picker">
|
||||
<div class="candidate" v-loading="loading">
|
||||
<div class="role-header">
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<!-- 系统角色-->
|
||||
<div class="org-role-item" v-for="(roleItem , roleIndex) in roleList" :key="roleIndex"
|
||||
@click="selectChange(roleItem)">
|
||||
<el-checkbox v-model="roleItem.selected" v-if="multiple" disabled></el-checkbox>
|
||||
<el-checkbox v-model="roleItem.selected" v-if="showCheckbox" @change="selectChange(roleItem)"></el-checkbox>
|
||||
<i class="el-icon-user-solid" style="margin-left: 5px"></i>
|
||||
<span>{{ roleItem.label }}</span>
|
||||
</div>
|
||||
|
|
@ -40,13 +40,47 @@ import {getRole} from "@/api/org";
|
|||
|
||||
export default {
|
||||
name: "RolePicker",
|
||||
props: {
|
||||
selected: {
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
loading: false,
|
||||
title: "请选择",
|
||||
multiple: true,//是否多选
|
||||
roleList: [],
|
||||
showCheckbox: true,//是否显示左侧选择框
|
||||
roleList: [
|
||||
// {
|
||||
// value: 1,
|
||||
// label: "超级管理员"
|
||||
// },
|
||||
// {
|
||||
// value: 2,
|
||||
// label: "普通角色"
|
||||
// },
|
||||
// {
|
||||
// value: 100,
|
||||
// label: "前端开发人员"
|
||||
// },
|
||||
// {
|
||||
// value: 101,
|
||||
// label: "图片文件管理员"
|
||||
// },
|
||||
// {
|
||||
// value: 102,
|
||||
// label: "附件管理员"
|
||||
// },
|
||||
// {
|
||||
// value: 103,
|
||||
// label: "权限测试角色"
|
||||
// }
|
||||
],
|
||||
selectList: []
|
||||
};
|
||||
},
|
||||
|
|
@ -57,32 +91,56 @@ export default {
|
|||
//获取角色信息
|
||||
getRole() {
|
||||
getRole().then(res => {
|
||||
this.roleList=res.data
|
||||
this.roleList = res.data;
|
||||
});
|
||||
},
|
||||
//用于首页选择本次登录者,显示弹窗
|
||||
show() {
|
||||
this.visible = true;
|
||||
this.init();
|
||||
},
|
||||
init() {
|
||||
this.selectList = Object.assign([], this.selected);
|
||||
},
|
||||
//选中角色
|
||||
selectChange(userItem) {
|
||||
//多选
|
||||
selectChange(roleItem) {
|
||||
// 左侧有选择框
|
||||
if (this.showCheckbox) {
|
||||
// 左侧有选择框 + 多选
|
||||
if (this.multiple) {
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].value === userItem.value) {
|
||||
if (this.selectList[i].value === roleItem.value) {
|
||||
this.selectList.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
userItem.selected = true;
|
||||
this.selectList.push(userItem);
|
||||
} else {//单选
|
||||
userItem.selected = true;
|
||||
this.selectList = [userItem];
|
||||
if (roleItem.selected) {
|
||||
this.selectList.push(roleItem);
|
||||
}
|
||||
} else {// 左侧有选择框 + 单选
|
||||
//用于左侧选择框选中取消,引起右侧数据变化
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].value === roleItem.value) {
|
||||
this.selectList.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (roleItem.selected) {
|
||||
this.selectList = [roleItem];
|
||||
}
|
||||
for (let i = 0; i < this.roleList.length; i++) {
|
||||
for (let j = 0; j < this.selectList.length; j++) {
|
||||
if (this.roleList[i].value !== this.selectList[j].value) {
|
||||
this.roleList[i].selected = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {// 左侧没有选择框
|
||||
// 左侧没有选择框 + 多选
|
||||
if (this.multiple) {
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].value === roleItem.value) {
|
||||
this.selectList.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.selectList.push(roleItem);
|
||||
}else {// 左侧没有选择框 + 单选
|
||||
this.selectList = [roleItem];
|
||||
}
|
||||
}
|
||||
},
|
||||
//右侧的×
|
||||
|
|
@ -95,15 +153,6 @@ export default {
|
|||
}
|
||||
org.selected = false;
|
||||
},
|
||||
//确定按钮
|
||||
selectOk() {
|
||||
// this.$emit("ok", Object.assign([], this.select.map(v => {
|
||||
// v.avatar = undefined;
|
||||
// return v;
|
||||
// })));
|
||||
// this.visible = false;
|
||||
// this.recover();
|
||||
},
|
||||
//清空
|
||||
clearSelected() {
|
||||
this.$confirm("您确定要清空已选中的项?", "提示", {
|
||||
|
|
@ -111,8 +160,22 @@ export default {
|
|||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.selectList=[]
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].selected === true) {
|
||||
this.selectList[i].selected = false;
|
||||
}
|
||||
}
|
||||
this.selectList = [];
|
||||
});
|
||||
},
|
||||
//确定按钮
|
||||
selectConfirm() {
|
||||
// this.$emit("ok", Object.assign([], this.select.map(v => {
|
||||
// v.avatar = undefined;
|
||||
// return v;
|
||||
// })));
|
||||
// this.visible = false;
|
||||
// this.recover();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,21 @@
|
|||
<template>
|
||||
<w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
|
||||
<w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
|
||||
<div class="picker">
|
||||
<div class="candidate" v-loading="loading">
|
||||
<div style="padding: 5px 8px;">
|
||||
<el-input v-model="filterText" @input="searchUser" style="width: 100%;" size="small"
|
||||
<el-input v-model="filterText" style="width: 100%;" size="small"
|
||||
clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
|
||||
</div>
|
||||
<!-- 部门 -->
|
||||
<el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
|
||||
<el-scrollbar style="height:350px">
|
||||
<el-tree :data="deptList" ref="tree" empty-text="" default-expand-all show-checkbox
|
||||
@check-change="handleCheckChange" :filter-node-method="filterNode"></el-tree>
|
||||
<el-tree :data="deptList" ref="tree" empty-text="" node-key="value" default-expand-all
|
||||
:show-checkbox="showCheckbox"
|
||||
@check="handleCheckChange" :filter-node-method="filterNode">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
|
|
@ -42,6 +47,7 @@ export default {
|
|||
loading: false,
|
||||
title: "请选择",
|
||||
multiple: true,//是否多选
|
||||
showCheckbox: true,//是否显示左侧选择框
|
||||
selectList: [],
|
||||
filterText: "",
|
||||
deptList: []
|
||||
|
|
@ -56,11 +62,11 @@ export default {
|
|||
this.getDepartmentTree();
|
||||
},
|
||||
methods: {
|
||||
//获取角色信息
|
||||
//获取部门信息
|
||||
getDepartmentTree() {
|
||||
getDepartmentTree().then(res => {
|
||||
console.log(res);
|
||||
this.deptList=res.data
|
||||
console.log("获取部门信息", res);
|
||||
this.deptList = res.data;
|
||||
});
|
||||
},
|
||||
//通过关键字过滤树节点
|
||||
|
|
@ -68,18 +74,15 @@ export default {
|
|||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
//用于首页选择本次登录者,显示弹窗
|
||||
show() {
|
||||
//用于部门选择
|
||||
showDeptPicker() {
|
||||
this.visible = true;
|
||||
this.init();
|
||||
},
|
||||
//初始化
|
||||
init() {
|
||||
this.selectList = Object.assign([], this.selected);
|
||||
},
|
||||
//选中部门
|
||||
handleCheckChange(data, checked) {
|
||||
//多选
|
||||
// 左侧有选择框
|
||||
if (this.showCheckbox) {
|
||||
// 左侧有选择框 + 多选
|
||||
if (this.multiple) {
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].value === data.value) {
|
||||
|
|
@ -87,22 +90,30 @@ export default {
|
|||
break;
|
||||
}
|
||||
}
|
||||
// checked= true;
|
||||
// this.selectList.push(data);
|
||||
if (checked) {
|
||||
this.selectList.push(data);
|
||||
} else {
|
||||
// this.$refs.tree.setCheckedKeys(data);
|
||||
}
|
||||
} else {//单选
|
||||
checked = true;
|
||||
} else {// 左侧有选择框 + 单选
|
||||
if (checked) {
|
||||
this.$refs.tree.setCheckedNodes([data]);
|
||||
this.selectList = [data];
|
||||
} else {
|
||||
this.$refs.tree.setCheckedKeys([]);
|
||||
this.selectList = [];
|
||||
}
|
||||
}
|
||||
}else {// 左侧没有选择框
|
||||
// 左侧没有选择框 + 多选
|
||||
if (this.multiple) {
|
||||
|
||||
}else {// 左侧没有选择框 + 单选
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
//确定按钮
|
||||
selectOk() {
|
||||
// this.$emit("ok", Object.assign([], this.select.map(v => {
|
||||
// v.avatar = undefined;
|
||||
// return v;
|
||||
// })));
|
||||
// this.visible = false;
|
||||
// this.recover();
|
||||
},
|
||||
//清空
|
||||
clearSelected() {
|
||||
|
|
@ -111,23 +122,20 @@ export default {
|
|||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.selectList = [];
|
||||
|
||||
this.handleCheckChange("", false);
|
||||
});
|
||||
},
|
||||
|
||||
searchUser() {
|
||||
let userName = this.search.trim();
|
||||
this.searchUsers = [];
|
||||
this.loading = true;
|
||||
// getUserByName({userName: userName}).then(rsp => {
|
||||
// this.loading = false
|
||||
// this.searchUsers = rsp.data
|
||||
// this.selectToLeft()
|
||||
// }).catch(err => {
|
||||
// this.loading = false
|
||||
// this.$message.error("接口异常")
|
||||
// })
|
||||
//确定按钮
|
||||
selectConfirm() {
|
||||
// this.$emit("ok", Object.assign([], this.select.map(v => {
|
||||
// v.avatar = undefined;
|
||||
// return v;
|
||||
// })));
|
||||
// this.visible = false;
|
||||
// this.recover();
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -135,6 +143,15 @@ export default {
|
|||
<style lang="less" scoped>
|
||||
@containWidth: 278px;
|
||||
|
||||
/deep/.el-tree-node {
|
||||
.is-leaf + .el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
}
|
||||
.el-checkbox .el-checkbox__inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-dialog__body {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<div class="work-panel">
|
||||
<div class="user">
|
||||
<el-button type="primary" round size="small" @click="$refs.orgPicker.show()" icon="el-icon-user">选择本次登录者</el-button>
|
||||
<el-button type="primary" round size="small" @click="showRolePicker()" icon="el-icon-user">选择本次登录者</el-button>
|
||||
<div v-if="loginUser !== '' && loginUser !== null">
|
||||
<span>{{loginUser.name}}</span>
|
||||
</div>
|
||||
|
|
@ -60,6 +60,10 @@ export default {
|
|||
}
|
||||
},
|
||||
methods:{
|
||||
//显示角色选择框
|
||||
showRolePicker(){
|
||||
this.$refs.orgPicker.visible=true
|
||||
},
|
||||
selected(select){
|
||||
this.select = select
|
||||
this.loginUser = select.length > 0 ? select[0]:''
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
<div :class="{'mobile': showMobile, 'pc': !showMobile}">
|
||||
<div :class="{'bd': showMobile}">
|
||||
<div :class="{'form-content': showMobile}">
|
||||
<div class="form">
|
||||
<div class="form" >
|
||||
<div class="tip" v-show="forms.length === 0 && !isStart">👈 请在左侧选择控件并拖至此处</div>
|
||||
<draggable class="drag-from" :list="forms" group="form"
|
||||
:options="{animation: 300, chosenClass:'choose', sort:true}"
|
||||
|
|
@ -392,7 +392,7 @@ export default {
|
|||
|
||||
.pc {
|
||||
margin-top: 4%;
|
||||
|
||||
padding: 0 150px;
|
||||
.drag-from {
|
||||
height: calc(100vh - 190px);
|
||||
background-color: rgb(245, 246, 246);
|
||||
|
|
|
|||
|
|
@ -16,12 +16,12 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-else-if="perm === 'R'">
|
||||
<div style="display: flex">
|
||||
<div style="display: flex;">
|
||||
<span>{{_value}}</span>
|
||||
<div v-show="showChinese" style="margin-left: 30px;">
|
||||
<span v-show="showChinese" style="margin-left: 30px;">
|
||||
<span>大写：</span>
|
||||
<span class="chinese">{{chinese}}</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
<script>
|
||||
import componentMinxins from '../ComponentMinxins'
|
||||
import OrgPicker from "@/components/common/OrgPicker";
|
||||
import OrgPicker from "@/components/common/departmentPicker";
|
||||
|
||||
export default {
|
||||
mixins: [componentMinxins],
|
||||
|
|
|
|||
Loading…
Reference in New Issue