|
@@ -4,6 +4,7 @@
|
|
|
<el-col :span="6" :xs="24" style="padding-right:10px">
|
|
|
<el-tree
|
|
|
:data="deptOptions"
|
|
|
+ node-key ="id"
|
|
|
:props="defaultProps"
|
|
|
:expand-on-click-node="false"
|
|
|
:filter-node-method="filterNode"
|
|
@@ -12,7 +13,9 @@
|
|
|
@node-click="handleNodeClick"
|
|
|
style="padding:10px;"
|
|
|
/>
|
|
|
+ {{userIds}}==={{userIdsArr.length}}
|
|
|
</el-col>
|
|
|
+
|
|
|
<!--用户数据-->
|
|
|
<el-col :span="18" :xs="24" style="padding:10px; background-color: #fff;">
|
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
|
|
@@ -26,6 +29,7 @@
|
|
|
suffix-icon="el-icon-search"
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
/>
|
|
|
+
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
@@ -33,8 +37,8 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
- <el-table v-loading="loading" :data="userList" ref="userList" @selection-change="handleSelectionChange">
|
|
|
- <el-table-column type="selection" width="50" align="center" />
|
|
|
+ <el-table v-loading="loading" :data="userList" ref="userList" @select="handleSelection" @selection-change="handleSelectionChange" @row-click="handleCurrentChange" row-key="userName">
|
|
|
+ <el-table-column type="selection" width="50" align="center" />
|
|
|
<el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
|
|
|
<el-table-column label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
|
|
|
<el-table-column label="部门" align="center" prop="dept.deptName" :show-overflow-tooltip="true" />
|
|
@@ -61,8 +65,12 @@
|
|
|
export default {
|
|
|
name: "index",
|
|
|
components: { Treeselect },
|
|
|
+ props: ['userIds'],
|
|
|
data(){
|
|
|
return {
|
|
|
+ userIdsArr:[],
|
|
|
+ selectInput:'',
|
|
|
+ arrID:[],
|
|
|
multipleSelection:null,
|
|
|
// 选中人员昵称数组
|
|
|
names: [],
|
|
@@ -75,7 +83,6 @@
|
|
|
// 总条数
|
|
|
total: 0,
|
|
|
// 用户表格数据
|
|
|
- olduserList: null,
|
|
|
userList: null,
|
|
|
deptOptions: undefined,
|
|
|
defaultProps: {
|
|
@@ -94,58 +101,35 @@
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- // 根据名称筛选部门树
|
|
|
- deptName(val) {
|
|
|
- this.$refs.tree.filter(val);
|
|
|
- },
|
|
|
- userList(n,o){
|
|
|
- // this.multipleSelection.forEach(row => {
|
|
|
- // // 不能自己自定义对象来设置选中(原因如下分析),那我可以从列表中找到需要选中的那个对象,然后把它拿过来作为选中的项就可以了
|
|
|
- // // this.$refs.userList.toggleRowSelection(this.userList.find(item => {
|
|
|
- // // return row.userName == item.userName; // 注意这里寻找的字段要唯一,示例仅参考
|
|
|
- // // }), true);
|
|
|
- // //this.$refs.userList.toggleRowSelection(this.userList[1], true);
|
|
|
- // });
|
|
|
- // this.$nextTick( ()=> {
|
|
|
- // console.log("xuanzhong "+this.multipleSelection.length);
|
|
|
- // console.log(this.multipleSelection);
|
|
|
- // this.multipleSelection.forEach(row => {
|
|
|
- // console.log(row.name+"12313");
|
|
|
- // });
|
|
|
- // //this.$refs.userList.toggleRowSelection(this.userList[1],true);
|
|
|
- // //console.log("这是选中行的循环kaishi");
|
|
|
- // })
|
|
|
+ userIds: {
|
|
|
+ immediate: true,
|
|
|
+ handler() {
|
|
|
+ if(this.userIds!="")
|
|
|
+ this.userIdsArr = this.userIds.split(',');
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getList();
|
|
|
this.getTreeselect();
|
|
|
- this.olduserList = this.userList;
|
|
|
+ if(this.userIds!="")
|
|
|
+ this.userIdsArr = this.userIds.split(',');
|
|
|
},
|
|
|
methods:{
|
|
|
/** 查询用户列表 */
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
+ //console.log("测试子组件调用父组件的数据=="+this.userIds);
|
|
|
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
|
|
this.userList = response.rows;
|
|
|
this.total = response.total;
|
|
|
this.loading = false;
|
|
|
- // if(this.multipleSelection!=null)
|
|
|
- // {
|
|
|
- // //alert("获取用户列表"+this.multipleSelection.length);
|
|
|
- // this.multipleSelection.forEach(row => {
|
|
|
- // // 不能自己自定义对象来设置选中(原因如下分析),那我可以从列表中找到需要选中的那个对象,然后把它拿过来作为选中的项就可以了
|
|
|
- // this.$refs.userList.toggleRowSelection(this.userList.find(item => {
|
|
|
- // return row.userName == item.userName; // 注意这里寻找的字段要唯一,示例仅参考
|
|
|
- // }), true);
|
|
|
- // //this.$refs.userList.toggleRowSelection(this.userList[1], true);
|
|
|
- // });
|
|
|
- // }
|
|
|
- // else{
|
|
|
- // //alert("第一次获取用户列表,暂时还没有选中记录");
|
|
|
- // }
|
|
|
- }
|
|
|
- );
|
|
|
+
|
|
|
+ this.$nextTick(function(){
|
|
|
+ console.log("进入nexttick中:"+this.userIds);
|
|
|
+ this.checked(this.userIds);//每次更新了数据,触发这个函数即可。
|
|
|
+ })
|
|
|
+ });
|
|
|
},
|
|
|
/** 查询部门下拉树结构 */
|
|
|
getTreeselect() {
|
|
@@ -173,17 +157,60 @@
|
|
|
this.resetForm("queryForm");
|
|
|
this.handleQuery();
|
|
|
},
|
|
|
+ /** 手动勾选行的多选框触发的事件 */
|
|
|
+ handleSelection(selection,row) {
|
|
|
+ if (this.userIdsArr.includes(row.userName)) {
|
|
|
+ this.$emit("removeFunction",row.userName,row.nickName);
|
|
|
+ }
|
|
|
+ },
|
|
|
// 多选框选中数据
|
|
|
handleSelectionChange(selection) {
|
|
|
this.names = selection.map(item => item.nickName);
|
|
|
this.accounts = selection.map(item => item.userName);
|
|
|
- // if(this.multipleSelection==null){
|
|
|
- // this.multipleSelection = selection;
|
|
|
- // }
|
|
|
- // else{
|
|
|
- // //合并
|
|
|
- // this.multipleSelection
|
|
|
- // }
|
|
|
+ this.$emit('fatherFunction',this.accounts.join(','),this.names.join(','));
|
|
|
+ },
|
|
|
+ //行选中
|
|
|
+ handleCurrentChange(row, event, column) {
|
|
|
+ var same=false;
|
|
|
+ if(this.userIdsArr.length > 0){
|
|
|
+ for(var i=0; i<this.userIdsArr.length ;i++){
|
|
|
+ if(this.userIdsArr[i]==row.userName){
|
|
|
+ same=true;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(same==true){
|
|
|
+ this.$refs.userList.toggleRowSelection(row,false);
|
|
|
+ this.$emit("removeFunction",row.userName,row.nickName);
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.$refs.userList.toggleRowSelection(row,true);
|
|
|
+ this.$emit('fatherFunction',row.userName,row.nickName);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.$refs.userList.toggleRowSelection(row,true);
|
|
|
+ this.$emit('fatherFunction',row.userName,row.nickName);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ removeByValue(arr, val){
|
|
|
+ for (var i = 0; i < arr.length; i++) {
|
|
|
+ if (arr[i] == val) {
|
|
|
+ arr.splice(i, 1);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checked(userids){
|
|
|
+ let selectUsers = [];
|
|
|
+ selectUsers = userids.split(',');
|
|
|
+ for(let i=0; i<this.userList.length ;i++){
|
|
|
+ for(let j=0;j<selectUsers.length;j++){
|
|
|
+ if(selectUsers[j] == this.userList[i].userName){
|
|
|
+ this.$refs.userList.toggleRowSelection(this.userList[i], true);//默认选中
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|