master #33
|
|
@ -15,17 +15,14 @@
|
|||
</div>
|
||||
<!-- 人员选择 -->
|
||||
<el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
|
||||
<el-scrollbar style="height:350px">
|
||||
<el-scrollbar style="height:317px">
|
||||
<el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
|
||||
:default-expanded-keys="expandedKeys"
|
||||
:show-checkbox="showCheckbox"
|
||||
@check-change="handleCheckChange"
|
||||
@node-click="handleChange"
|
||||
:filter-node-method="filterNode"
|
||||
check-strictly
|
||||
>
|
||||
<div class="custom-tree-node" slot-scope="{ node,data }">
|
||||
<div v-if="data.type === 0" :style="'height:'+(data.type === 0 ?'50px':'0px')">
|
||||
<div class="tree-node" slot-scope="{ node,data }">
|
||||
<div v-if="data.type === 0" style="display: flex;align-items: center">
|
||||
<el-avatar :src="data.avatar"></el-avatar>
|
||||
{{ node.label }}
|
||||
</div>
|
||||
|
|
@ -50,8 +47,9 @@
|
|||
<div class="org-items" style="height: 350px;">
|
||||
<el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
|
||||
<div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
|
||||
<el-avatar :src="selectItem.avatar"></el-avatar>
|
||||
<el-avatar :src="selectItem.avatar" style="margin-right: 5px;"></el-avatar>
|
||||
{{ selectItem.name }}
|
||||
<i class="el-icon-close" @click="noSelected(selectItem)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -64,7 +62,7 @@
|
|||
import {getUserTree} from "@/api/org";
|
||||
|
||||
export default {
|
||||
name: "departmentPicker",
|
||||
name: "Test",
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
|
|
@ -109,9 +107,6 @@ export default {
|
|||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
computed: {
|
||||
_value: {
|
||||
get() {
|
||||
|
|
@ -132,16 +127,15 @@ export default {
|
|||
},
|
||||
getList() {
|
||||
getUserTree(this.radio, this.chooseId).then(res => {
|
||||
if (res.data) {
|
||||
if (this.selectItem.type === -1 || this.selectItem.type === -2) {
|
||||
this.dataList = this.setData(res.data)
|
||||
console.log('--111--2', res.data)
|
||||
} else if (this.selectItem.type === 1) {
|
||||
this.selectItem.children = res.data
|
||||
console.log('111', res.data)
|
||||
} else if (this.selectItem.type === 2) {
|
||||
console.log('222', res.data)
|
||||
this.selectItem.children = this.setData(res.data)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
setData(source) {
|
||||
|
|
@ -158,66 +152,44 @@ export default {
|
|||
},
|
||||
//用于用户选择
|
||||
showUserPicker() {
|
||||
this.getList();
|
||||
this.visible = true;
|
||||
},
|
||||
//渲染子节点用户或部门及用户数据
|
||||
handleChange(item) {
|
||||
handleChange(item, check) {
|
||||
this.selectItem = item
|
||||
this.expandedKeys.push(item.value)
|
||||
if (item.type !== 0) {
|
||||
this.chooseId = item.id
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 选中用户
|
||||
* @param data 选择的每个节点item
|
||||
* @param checked 是否选中
|
||||
*/
|
||||
handleCheckChange(data, checked) {
|
||||
// 左侧有选择框
|
||||
if (this.showCheckbox) {
|
||||
// 左侧有选择框 + 多选
|
||||
if (!item.children) {
|
||||
if (this.multiple) {
|
||||
// console.log('左侧有选择框 + 多选')
|
||||
// //不添加重复的数据到右边
|
||||
// for (let i = 0; i < this.selectList.length; i++) {
|
||||
// if (this.selectList[i].value === data.value) {
|
||||
// this.selectList.splice(i, 1);
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
// if (checked) {
|
||||
// // if (data.children === undefined) {
|
||||
// this.selectList.push(data);
|
||||
// // }
|
||||
// } else if (data === '1') {
|
||||
// this.$refs.tree.setCheckedKeys([]);
|
||||
// this.selectList = [];
|
||||
// }
|
||||
} else {// 左侧有选择框 + 单选
|
||||
//不添加重复的数据到右边
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].id === data.id) {
|
||||
if (this.selectList[i].id === item.id) {
|
||||
this.selectList.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (checked) {
|
||||
console.log('this.$refs.tree',this.$refs.tree)
|
||||
// if(data.type==0){
|
||||
this.$refs.tree.setCheckedNodes([data]);
|
||||
this.selectList = [data];
|
||||
// }
|
||||
} else if (data === "1") {
|
||||
this.selectList = [];
|
||||
this.$refs.tree.setCheckedKeys([]);
|
||||
}
|
||||
this.selectList.push(item);
|
||||
console.log('多选this.selectList', this.selectList);
|
||||
} else {
|
||||
this.selectList = [item];
|
||||
}
|
||||
}
|
||||
this._value = this.selectList
|
||||
},
|
||||
|
||||
//右侧的×
|
||||
noSelected(selectItem) {
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].value === selectItem.value) {
|
||||
this.selectList.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
selectItem.selected = false;
|
||||
},
|
||||
//清空
|
||||
clearSelected() {
|
||||
this.$confirm("您确定要清空已选中的项?", "提示", {
|
||||
|
|
@ -225,7 +197,7 @@ export default {
|
|||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.handleCheckChange("1");
|
||||
this.selectList = []
|
||||
});
|
||||
},
|
||||
//确定按钮
|
||||
|
|
@ -239,6 +211,24 @@ export default {
|
|||
|
||||
<style lang="less" scoped>
|
||||
@containWidth: 278px;
|
||||
/deep/ .el-tree-node {
|
||||
.el-tree-node__children {
|
||||
.el-tree-node__content {
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tree-node {
|
||||
div {
|
||||
.el-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-tree-node {
|
||||
.is-leaf + .el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -15,17 +15,14 @@
|
|||
</div>
|
||||
<!-- 人员选择 -->
|
||||
<el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
|
||||
<el-scrollbar style="height:350px">
|
||||
<el-scrollbar style="height:317px">
|
||||
<el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
|
||||
:default-expanded-keys="expandedKeys"
|
||||
:show-checkbox="showCheckbox"
|
||||
@check-change="handleCheckChange"
|
||||
@node-click="handleChange"
|
||||
:filter-node-method="filterNode"
|
||||
check-strictly
|
||||
>
|
||||
<div class="custom-tree-node" slot-scope="{ node,data }">
|
||||
<div v-if="data.type === 0" :style="'height:'+(data.type === 0 ?'50px':'0px')">
|
||||
<div class="tree-node" slot-scope="{ node,data }">
|
||||
<div v-if="data.type === 0" style="display: flex;align-items: center">
|
||||
<el-avatar :src="data.avatar"></el-avatar>
|
||||
{{ node.label }}
|
||||
</div>
|
||||
|
|
@ -50,8 +47,9 @@
|
|||
<div class="org-items" style="height: 350px;">
|
||||
<el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
|
||||
<div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
|
||||
<el-avatar :src="selectItem.avatar"></el-avatar>
|
||||
<el-avatar :src="selectItem.avatar" style="margin-right: 5px;"></el-avatar>
|
||||
{{ selectItem.name }}
|
||||
<i class="el-icon-close" @click="noSelected(selectItem)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -62,6 +60,7 @@
|
|||
|
||||
<script>
|
||||
import {getUserTree} from "@/api/org";
|
||||
|
||||
export default {
|
||||
name: "UserPicker",
|
||||
props: {
|
||||
|
|
@ -108,9 +107,6 @@ export default {
|
|||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
computed: {
|
||||
_value: {
|
||||
get() {
|
||||
|
|
@ -131,16 +127,15 @@ export default {
|
|||
},
|
||||
getList() {
|
||||
getUserTree(this.radio, this.chooseId).then(res => {
|
||||
if (res.data) {
|
||||
if (this.selectItem.type === -1 || this.selectItem.type === -2) {
|
||||
this.dataList = this.setData(res.data)
|
||||
console.log('--111--2', res.data)
|
||||
} else if (this.selectItem.type === 1) {
|
||||
this.selectItem.children = res.data
|
||||
console.log('111', res.data)
|
||||
} else if (this.selectItem.type === 2) {
|
||||
console.log('222', res.data)
|
||||
this.selectItem.children = this.setData(res.data)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
setData(source) {
|
||||
|
|
@ -157,66 +152,43 @@ export default {
|
|||
},
|
||||
//用于用户选择
|
||||
showUserPicker() {
|
||||
this.getList();
|
||||
this.visible = true;
|
||||
},
|
||||
//渲染子节点用户或部门及用户数据
|
||||
handleChange(item) {
|
||||
handleChange(item, check) {
|
||||
this.selectItem = item
|
||||
this.expandedKeys.push(item.value)
|
||||
if (item.type !== 0) {
|
||||
this.chooseId = item.id
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 选中用户
|
||||
* @param data 选择的每个节点item
|
||||
* @param checked 是否选中
|
||||
*/
|
||||
handleCheckChange(data, checked) {
|
||||
// 左侧有选择框
|
||||
if (this.showCheckbox) {
|
||||
// 左侧有选择框 + 多选
|
||||
if (!item.children) {
|
||||
if (this.multiple) {
|
||||
// console.log('左侧有选择框 + 多选')
|
||||
//不添加重复的数据到右边
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].value === data.value) {
|
||||
if (this.selectList[i].id === item.id) {
|
||||
this.selectList.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (checked) {
|
||||
// if (data.children === undefined) {
|
||||
this.selectList.push(data);
|
||||
// }
|
||||
} else if (data === '1') {
|
||||
this.$refs.tree.setCheckedKeys([]);
|
||||
this.selectList = [];
|
||||
}
|
||||
} else {// 左侧有选择框 + 单选
|
||||
//不添加重复的数据到右边
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].id === data.id) {
|
||||
this.selectList.splice(i, 1);
|
||||
break;
|
||||
this.selectList.push(item);
|
||||
} else {
|
||||
this.selectList = [item];
|
||||
}
|
||||
}
|
||||
if (checked) {
|
||||
console.log('this.$refs.tree',this.$refs.tree)
|
||||
// if(data.type==0){
|
||||
this.$refs.tree.setCheckedNodes([data]);
|
||||
this.selectList = [data];
|
||||
// }
|
||||
} else if (data === "1") {
|
||||
this.selectList = [];
|
||||
this.$refs.tree.setCheckedKeys([]);
|
||||
}
|
||||
}
|
||||
}
|
||||
this._value = this.selectList
|
||||
// this._value = this.selectList
|
||||
},
|
||||
//右侧的×
|
||||
noSelected(selectItem) {
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].value === selectItem.value) {
|
||||
this.selectList.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
selectItem.selected = false;
|
||||
},
|
||||
|
||||
//清空
|
||||
clearSelected() {
|
||||
this.$confirm("您确定要清空已选中的项?", "提示", {
|
||||
|
|
@ -224,7 +196,7 @@ export default {
|
|||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.handleCheckChange("1");
|
||||
this.selectList = []
|
||||
});
|
||||
},
|
||||
//确定按钮
|
||||
|
|
@ -238,6 +210,24 @@ export default {
|
|||
|
||||
<style lang="less" scoped>
|
||||
@containWidth: 278px;
|
||||
/deep/ .el-tree-node {
|
||||
.el-tree-node__children {
|
||||
.el-tree-node__content {
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tree-node {
|
||||
div {
|
||||
.el-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-tree-node {
|
||||
.is-leaf + .el-checkbox .el-checkbox__inner {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -2,44 +2,50 @@
|
|||
<div style="max-width: 350px">
|
||||
<template v-if="mode === 'DESIGN'">
|
||||
<el-button disabled icon="el-icon-user" type="primary" size="mini" round>选择人员</el-button>
|
||||
<span class="placeholder"> {{placeholder}}</span>
|
||||
<span class="placeholder"> {{ placeholder }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="perm === 'E'">
|
||||
<el-button icon="el-icon-user" type="primary" size="mini" round @click="$refs.userPicker.showUserPicker()">选择人员</el-button>
|
||||
<el-button icon="el-icon-user" type="primary" size="mini" round @click="$refs.userPicker.showUserPicker()">
|
||||
选择人员
|
||||
</el-button>
|
||||
<user-select type="user" :multiple="multiple" ref="userPicker" :selected="_value" @ok="selected"/>
|
||||
<span class="placeholder"> {{placeholder}}</span>
|
||||
<div style="margin-top: 5px;display: flex;flex-direction: column;position:relative;" v-for="(user, i) in _value" :key="i">
|
||||
<!-- <el-tag closable @close="delDept(i)">-->
|
||||
<span style="position:absolute;right: 0">×</span>
|
||||
<span class="placeholder"> {{ placeholder }}</span>
|
||||
<div style="display: flex;">
|
||||
<div class="userStyle" v-for="(user, i) in _value" :key="i">
|
||||
<span @click="delDept(i)">×</span>
|
||||
<el-avatar :src="user.avatar"/>
|
||||
<span>{{user.name}}</span>
|
||||
<el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
|
||||
<span>{{ user.name }}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="perm === 'R'">
|
||||
<div v-for="(user, i) in _value" :key="i">
|
||||
<div style="display: flex;">
|
||||
<div v-for="(user, i) in _value" :key="i" class="view_user">
|
||||
<el-avatar :src="user.avatar"/>
|
||||
{{user.label}}
|
||||
<el-tooltip effect="dark" :content="user.name" placement="bottom-start">
|
||||
<span>{{ user.name }}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentMinxins from '../ComponentMinxins'
|
||||
import UserSelect from "@/components/common/UserPicker";
|
||||
|
||||
|
||||
export default {
|
||||
mixins: [componentMinxins],
|
||||
name: "UserPicker",
|
||||
components: {UserSelect},
|
||||
props: {
|
||||
value:{
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
|
|
@ -53,7 +59,7 @@ export default {
|
|||
type: String,
|
||||
default: '请选择人员'
|
||||
},
|
||||
multiple:{
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
|
|
@ -63,26 +69,58 @@ export default {
|
|||
showPickerSelect: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.mode,"sdjhsjdhsjd1111111111111111")
|
||||
},
|
||||
methods: {
|
||||
selected(values){
|
||||
console.log(values,"sdjhsjdhjshd888888888888")
|
||||
selected(values) {
|
||||
this.showPickerSelect = false
|
||||
this._value = values
|
||||
},
|
||||
delDept(i){
|
||||
delDept(i) {
|
||||
this._value.splice(i, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.placeholder{
|
||||
<style scoped lang="less">
|
||||
.placeholder {
|
||||
margin-left: 10px;
|
||||
color: #adabab;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.userStyle {
|
||||
width: 45px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
|
||||
span:first-child {
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: -11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden
|
||||
}
|
||||
}
|
||||
|
||||
.view_user {
|
||||
width: 45px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 10px;
|
||||
span {
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue