|
|
@@ -0,0 +1,195 @@
|
|
|
+<template>
|
|
|
+ <el-row :gutter="20" style="padding: 10px;margin:0px;background-color: #ECECEC">
|
|
|
+ <!--部门数据-->
|
|
|
+ <el-col :span="6" :xs="24" style="padding-right:10px">
|
|
|
+ <el-tree
|
|
|
+ :data="deptOptions"
|
|
|
+ :props="defaultProps"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ ref="tree"
|
|
|
+ default-expand-all
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ style="padding:10px;"
|
|
|
+ />
|
|
|
+ </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">
|
|
|
+ <el-form-item label="用户名称" prop="userName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.userName"
|
|
|
+ placeholder="请输入用户名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ 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>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </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-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" />
|
|
|
+ <el-table-column label="手机号码" align="center" prop="phonenumber" width="120" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { listUser } from "@/api/system/user";
|
|
|
+ import { treeselect } from "@/api/system/dept";
|
|
|
+ import Treeselect from "@riophae/vue-treeselect";
|
|
|
+ import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "index",
|
|
|
+ components: { Treeselect },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ multipleSelection:null,
|
|
|
+ // 选中人员昵称数组
|
|
|
+ names: [],
|
|
|
+ // 选中人员账号数组
|
|
|
+ accounts: [],
|
|
|
+ // // 非单个禁用
|
|
|
+ // single: true,
|
|
|
+ // // 非多个禁用
|
|
|
+ // multiple: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 用户表格数据
|
|
|
+ olduserList: null,
|
|
|
+ userList: null,
|
|
|
+ deptOptions: undefined,
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "label"
|
|
|
+ },
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ userName: undefined,
|
|
|
+ phonenumber: undefined,
|
|
|
+ status: 0,
|
|
|
+ deptId: undefined
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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");
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ this.getTreeselect();
|
|
|
+ this.olduserList = this.userList;
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ /** 查询用户列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ 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("第一次获取用户列表，暂时还没有选中记录");
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ /** 查询部门下拉树结构 */
|
|
|
+ getTreeselect() {
|
|
|
+ treeselect().then(response => {
|
|
|
+ this.deptOptions = response.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 筛选节点
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ // 节点单击事件
|
|
|
+ handleNodeClick(data) {
|
|
|
+ this.queryParams.deptId = data.id;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.page = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ 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
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .pagination-container{padding:0px;}
|
|
|
+</style>
|
|
|
+
|
