|
|
@@ -9,115 +9,127 @@
|
|
|
append-to-body
|
|
|
custom-class="el-dialog2"
|
|
|
>
|
|
|
- <div class="dialog-main">
|
|
|
- <el-row :gutter="20">
|
|
|
- <!--部门数据-->
|
|
|
- <el-col :span="6" :xs="24">
|
|
|
- <div class="head-container">
|
|
|
- <el-input
|
|
|
- v-model="deptName"
|
|
|
- placeholder="请输入部门名称"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- prefix-icon="el-icon-search"
|
|
|
- style="margin-bottom: 20px"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="head-container">
|
|
|
- <el-tree
|
|
|
- :data="deptOptions"
|
|
|
- :props="defaultProps"
|
|
|
- :expand-on-click-node="false"
|
|
|
- :filter-node-method="filterNode"
|
|
|
- ref="tree"
|
|
|
- node-key="id"
|
|
|
- default-expand-all
|
|
|
- highlight-current
|
|
|
- @node-click="handleNodeClick"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <!--用户数据-->
|
|
|
- <el-col :span="18" :xs="24">
|
|
|
- <el-form
|
|
|
- :model="queryParams"
|
|
|
- ref="queryForm"
|
|
|
- size="small"
|
|
|
- :inline="true"
|
|
|
- v-show="showSearch"
|
|
|
- label-width="68px"
|
|
|
- >
|
|
|
- <el-form-item label="用户名称" prop="userName">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.userName"
|
|
|
- placeholder="请输入用户名称"
|
|
|
- clearable
|
|
|
- style="width: 240px"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- icon="el-icon-search"
|
|
|
- size="mini"
|
|
|
- @click="handleQuery"
|
|
|
- class="aaa"
|
|
|
- >搜索</el-button
|
|
|
- >
|
|
|
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="bbb"
|
|
|
- >重置</el-button
|
|
|
- >
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <div class="dialog-main">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!--部门数据-->
|
|
|
+ <el-col :span="6" :xs="24">
|
|
|
+ <div class="head-container">
|
|
|
+ <el-input
|
|
|
+ v-model="deptName"
|
|
|
+ placeholder="请输入部门名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="head-container">
|
|
|
+ <el-tree
|
|
|
+ :data="deptOptions"
|
|
|
+ :props="defaultProps"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ ref="tree"
|
|
|
+ node-key="id"
|
|
|
+ default-expand-all
|
|
|
+ highlight-current
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <!--用户数据-->
|
|
|
+ <el-col :span="18" :xs="24">
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ v-show="showSearch"
|
|
|
+ label-width="68px"
|
|
|
+ >
|
|
|
+ <el-form-item label="用户名称" prop="userName">
|
|
|
+ <el-input
|
|
|
+
|
|
|
+ v-model="queryParams.userName"
|
|
|
+ placeholder="请输入用户名称"
|
|
|
+ clearable
|
|
|
+ style="width: 240px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="handleQuery"
|
|
|
+ class="aaa"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-refresh"
|
|
|
+ size="mini"
|
|
|
+ @click="resetQuery"
|
|
|
+ class="bbb"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
|
|
|
- <el-table
|
|
|
- v-loading="loading"
|
|
|
- :data="userList"
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- >
|
|
|
- <el-table-column type="selection" width="50" align="center" />
|
|
|
- <el-table-column
|
|
|
- label="用户名称"
|
|
|
- align="center"
|
|
|
- key="userName"
|
|
|
- prop="userName"
|
|
|
- v-if="columns[1].visible"
|
|
|
- :show-overflow-tooltip="true"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- label="用户昵称"
|
|
|
- align="center"
|
|
|
- key="nickName"
|
|
|
- prop="nickName"
|
|
|
- v-if="columns[2].visible"
|
|
|
- :show-overflow-tooltip="true"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- label="部门"
|
|
|
- align="center"
|
|
|
- key="deptName"
|
|
|
- prop="dept.deptName"
|
|
|
- v-if="columns[3].visible"
|
|
|
- :show-overflow-tooltip="true"
|
|
|
- />
|
|
|
- </el-table>
|
|
|
+ <el-table
|
|
|
+ highlight-current-row
|
|
|
+ v-loading="loading"
|
|
|
+ @current-change="handleSelectionChange"
|
|
|
+ :data="userList"
|
|
|
+ >
|
|
|
+ <el-table-column width="50" align="center" >
|
|
|
+ <template >
|
|
|
+ <input type="radio" name="a">
|
|
|
+ </template>
|
|
|
+ <!-- <template #header >
|
|
|
+ </template> -->
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="用户名称"
|
|
|
+ align="center"
|
|
|
+ key="userName"
|
|
|
+ prop="userName"
|
|
|
+ v-if="columns[1].visible"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="用户昵称"
|
|
|
+ align="center"
|
|
|
+ key="nickName"
|
|
|
+ prop="nickName"
|
|
|
+ v-if="columns[2].visible"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="部门"
|
|
|
+ align="center"
|
|
|
+ key="deptName"
|
|
|
+ prop="dept.deptName"
|
|
|
+ v-if="columns[3].visible"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
|
|
|
- <pagination
|
|
|
- v-show="total > 0"
|
|
|
- :total="total"
|
|
|
- :page.sync="queryParams.pageNum"
|
|
|
- :limit.sync="queryParams.pageSize"
|
|
|
- @pagination="getList"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
-</el-row>
|
|
|
-<div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="submitForm()">确 定</el-button>
|
|
|
- <el-button @click="open = false">取 消</el-button>
|
|
|
-</div>
|
|
|
- </div>
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="submitForm()">确 定</el-button>
|
|
|
+ <el-button @click="open = false">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
|
|
|
@@ -140,8 +152,18 @@ export default {
|
|
|
name: "User",
|
|
|
dicts: ["sys_normal_disable", "sys_user_sex"],
|
|
|
components: { Treeselect },
|
|
|
+ props: {
|
|
|
+ // 角色编号
|
|
|
+ groupId: {
|
|
|
+ type: [String],
|
|
|
+ },
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
+ information:{
|
|
|
+ name:'',
|
|
|
+ id:''
|
|
|
+ },
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
// 选中数组
|
|
|
@@ -197,6 +219,7 @@ export default {
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
+ groupId: undefined,
|
|
|
userName: undefined,
|
|
|
phonenumber: undefined,
|
|
|
status: undefined,
|
|
|
@@ -268,9 +291,9 @@ export default {
|
|
|
methods: {
|
|
|
// 显示弹框
|
|
|
show() {
|
|
|
- this.queryParams.roleId = this.roleId;
|
|
|
+ this.queryParams.groupId = parseInt(this.groupId);
|
|
|
this.getList();
|
|
|
- this.open= true;
|
|
|
+ this.open = true;
|
|
|
},
|
|
|
|
|
|
/** 查询用户列表 */
|
|
|
@@ -351,19 +374,19 @@ export default {
|
|
|
this.$refs.tree.setCurrentKey(null);
|
|
|
this.handleQuery();
|
|
|
},
|
|
|
- // 多选框选中数据
|
|
|
+ // 单选选中数据
|
|
|
handleSelectionChange(selection) {
|
|
|
- this.ids = selection.map((item) => item.userId);
|
|
|
- this.single = selection.length != 1;
|
|
|
- this.multiple = !selection.length;
|
|
|
- // console.log(selection[0].userName);
|
|
|
+ this.information.id = selection.userId;
|
|
|
+ this.information.name = selection.userName;
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ // var name = this.userList.find(val => this.ids == val.userId).userName
|
|
|
+ this.$emit("okk", this.information)
|
|
|
+ this.open = false;
|
|
|
},
|
|
|
|
|
|
-
|
|
|
- /** 提交按钮 */
|
|
|
- submitForm() {
|
|
|
- this.open = false;
|
|
|
-},
|
|
|
// 更多操作触发
|
|
|
handleCommand(command, row) {
|
|
|
switch (command) {
|
|
|
@@ -493,7 +516,7 @@ export default {
|
|
|
|
|
|
<style scoped lang='scss'>
|
|
|
//弹窗样式
|
|
|
-::v-deep .el-dialog2{
|
|
|
+::v-deep .el-dialog2 {
|
|
|
width: calc(100vw * (1000 / 1920)) !important;
|
|
|
height: calc(100vh * (900 / 1080)) !important;
|
|
|
background: url(../../../assets/img/Group-585.png);
|
|
|
@@ -504,32 +527,33 @@ export default {
|
|
|
right: 4%;
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
- .dialog-main{
|
|
|
- width: calc(100vw * (815 / 1920));
|
|
|
- height: calc(100vh * (820 / 1080));
|
|
|
- // background: salmon;
|
|
|
- margin-left: calc(100vw * (15 / 1920));
|
|
|
- margin-top: calc(100vh * (20 / 1080));
|
|
|
- .head-container{
|
|
|
- .el-input{
|
|
|
- width: calc(100vw * (190 / 1920)) !important;
|
|
|
+ .dialog-main {
|
|
|
+ width: calc(100vw * (815 / 1920));
|
|
|
+ height: calc(100vh * (820 / 1080));
|
|
|
+ // background: salmon;
|
|
|
+ margin-left: calc(100vw * (15 / 1920));
|
|
|
+ margin-top: calc(100vh * (20 / 1080));
|
|
|
+ .head-container {
|
|
|
+ .el-input {
|
|
|
+ width: calc(100vw * (190 / 1920)) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .aaa,
|
|
|
+ .bbb {
|
|
|
+ background-color: #002a5cff;
|
|
|
+ color: #1890ff;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .dialog-footer {
|
|
|
+ position: absolute;
|
|
|
+ right: 10%;
|
|
|
+ bottom: 8%;
|
|
|
+ }
|
|
|
+ .el-table {
|
|
|
+ background: transparent;
|
|
|
+ color: #7ea4c8ff;
|
|
|
+ border: 1px solid #006c9aff;
|
|
|
}
|
|
|
- }
|
|
|
- .aaa,.bbb{
|
|
|
- background-color: #002a5cff;
|
|
|
- color: #1890ff;
|
|
|
- border: none;
|
|
|
- }
|
|
|
- .dialog-footer{
|
|
|
- position: absolute;
|
|
|
- right: 10%;
|
|
|
- bottom: 8%;
|
|
|
- }
|
|
|
- .el-table{
|
|
|
-background: transparent;
|
|
|
-color: #7EA4C8FF;
|
|
|
- border: 1px solid #006C9AFF;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
::v-deep .el-dialog:not(.is-fullscreen) {
|
|
|
@@ -551,27 +575,29 @@ color: #7EA4C8FF;
|
|
|
}
|
|
|
//左边下拉框背景
|
|
|
::v-deep .el-tree {
|
|
|
- background: transparent;
|
|
|
- color: #7EA4C8FF;
|
|
|
- border: 1px solid #006C9AFF;
|
|
|
+ background: transparent;
|
|
|
+ color: #7ea4c8ff;
|
|
|
+ border: 1px solid #006c9aff;
|
|
|
}
|
|
|
//选中时的样式
|
|
|
-::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
|
|
- background: #002659FF;
|
|
|
- color: #2E8AECFF;
|
|
|
+::v-deep
|
|
|
+ .el-tree--highlight-current
|
|
|
+ .el-tree-node.is-current
|
|
|
+ > .el-tree-node__content {
|
|
|
+ background: #002659ff;
|
|
|
+ color: #2e8aecff;
|
|
|
}
|
|
|
-::v-deep .el-tree-node__content:hover{
|
|
|
- background: #002659FF;
|
|
|
- color: #2E8AECFF;
|
|
|
+::v-deep .el-tree-node__content:hover {
|
|
|
+ background: #002659ff;
|
|
|
+ color: #2e8aecff;
|
|
|
}
|
|
|
//右边用户名称
|
|
|
::v-deep .el-dialog .el-form-item {
|
|
|
margin: 0;
|
|
|
- .el-input{
|
|
|
- width: calc(100vw * (320 / 1920)) !important;
|
|
|
- }
|
|
|
+ .el-input {
|
|
|
+ width: calc(100vw * (320 / 1920)) !important;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
</style>
|
|
|
|
|
|
|
