构建框架
This commit is contained in:
龙运模
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :title="titleMap[type-1]" :width="type==1?680:460" destroy-on-close append-to-body @closed="$emit('closed')">
|
||||
|
||||
<template v-if="type==1">
|
||||
<div class="sc-user-select">
|
||||
<div class="sc-user-select__left">
|
||||
<div class="sc-user-select__search">
|
||||
<el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="搜索成员">
|
||||
<template #append>
|
||||
<el-button icon="el-icon-search" @click="search"></el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="sc-user-select__select">
|
||||
<div class="sc-user-select__tree" v-loading="showGrouploading">
|
||||
<el-scrollbar>
|
||||
<el-tree class="menu" ref="groupTree" :data="group" :node-key="groupProps.key" :props="groupProps" highlight-current :expand-on-click-node="false" :current-node-key="groupId" @node-click="groupClick"/>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="sc-user-select__user" v-loading="showUserloading">
|
||||
<div class="sc-user-select__user__list">
|
||||
<el-scrollbar ref="userScrollbar">
|
||||
<el-tree class="menu" ref="userTree" :data="user" :node-key="userProps.key" :props="userProps" :default-checked-keys="selectedIds" show-checkbox check-on-click-node @check-change="userClick"></el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<footer>
|
||||
<el-pagination background layout="prev,next" small :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="paginationChange"></el-pagination>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sc-user-select__toicon"><el-icon><el-icon-arrow-right /></el-icon></div>
|
||||
<div class="sc-user-select__selected">
|
||||
<header>已选 ({{selected.length}})</header>
|
||||
<ul>
|
||||
<el-scrollbar>
|
||||
<li v-for="(item, index) in selected" :key="item.id">
|
||||
<span class="name">
|
||||
<el-avatar size="small">{{item.name.substring(0,1)}}</el-avatar>
|
||||
<label>{{item.name}}</label>
|
||||
</span>
|
||||
<span class="delete">
|
||||
<el-button type="danger" icon="el-icon-delete" circle size="small" @click="deleteSelected(index)"></el-button>
|
||||
</span>
|
||||
</li>
|
||||
</el-scrollbar>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="type==2">
|
||||
<div class="sc-user-select sc-user-select-role">
|
||||
<div class="sc-user-select__left">
|
||||
<div class="sc-user-select__select">
|
||||
<div class="sc-user-select__tree" v-loading="showGrouploading">
|
||||
<el-scrollbar>
|
||||
<el-tree class="menu" ref="groupTree" :data="role" :node-key="roleProps.key" :props="roleProps" show-checkbox check-strictly check-on-click-node :expand-on-click-node="false" :default-checked-keys="selectedIds" @check-change="roleClick"/>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sc-user-select__toicon"><el-icon><el-icon-arrow-right /></el-icon></div>
|
||||
<div class="sc-user-select__selected">
|
||||
<header>已选 ({{selected.length}})</header>
|
||||
<ul>
|
||||
<el-scrollbar>
|
||||
<li v-for="(item, index) in selected" :key="item.id">
|
||||
<span class="name">
|
||||
<label>{{item.name}}</label>
|
||||
</span>
|
||||
<span class="delete">
|
||||
<el-button type="danger" icon="el-icon-delete" circle size="small" @click="deleteSelected(index)"></el-button>
|
||||
</span>
|
||||
</li>
|
||||
</el-scrollbar>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="save">确 认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/workflow";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
groupProps: config.group.props,
|
||||
userProps: config.user.props,
|
||||
roleProps: config.role.props,
|
||||
|
||||
titleMap: ['人员选择', '角色选择'],
|
||||
dialogVisible: false,
|
||||
showGrouploading: false,
|
||||
showUserloading: false,
|
||||
keyword: '',
|
||||
groupId: '',
|
||||
pageSize: config.user.pageSize,
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
group: [],
|
||||
user: [],
|
||||
role: [],
|
||||
type: 1,
|
||||
selected: [],
|
||||
value: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedIds(){
|
||||
return this.selected.map(t => t.id)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//打开赋值
|
||||
open(type, data){
|
||||
this.type = type
|
||||
this.value = data||[]
|
||||
this.selected = JSON.parse(JSON.stringify(data||[]))
|
||||
this.dialogVisible = true
|
||||
|
||||
if(this.type==1){
|
||||
this.getGroup()
|
||||
this.getUser()
|
||||
}else if(this.type==2){
|
||||
this.getRole()
|
||||
}
|
||||
|
||||
},
|
||||
//获取组织
|
||||
async getGroup(){
|
||||
this.showGrouploading = true;
|
||||
var res = await config.group.apiObj.get();
|
||||
this.showGrouploading = false;
|
||||
var allNode = {[config.group.props.key]: '', [config.group.props.label]: '所有'}
|
||||
res.data.unshift(allNode);
|
||||
this.group = config.group.parseData(res).rows
|
||||
},
|
||||
//获取用户
|
||||
async getUser(){
|
||||
this.showUserloading = true;
|
||||
var params = {
|
||||
[config.user.request.keyword]: this.keyword || null,
|
||||
[config.user.request.groupId]: this.groupId || null,
|
||||
[config.user.request.page]: this.currentPage,
|
||||
[config.user.request.pageSize]: this.pageSize
|
||||
}
|
||||
var res = await config.user.apiObj.get(params);
|
||||
this.showUserloading = false;
|
||||
this.user = config.user.parseData(res).rows;
|
||||
this.total = config.user.parseData(res).total || 0;
|
||||
this.$refs.userScrollbar.setScrollTop(0)
|
||||
},
|
||||
//获取角色
|
||||
async getRole(){
|
||||
this.showGrouploading = true;
|
||||
var res = await config.role.apiObj.get();
|
||||
this.showGrouploading = false;
|
||||
this.role = config.role.parseData(res).rows
|
||||
},
|
||||
//组织点击
|
||||
groupClick(data){
|
||||
this.keyword = ''
|
||||
this.currentPage = 1
|
||||
this.groupId = data[config.group.props.key]
|
||||
this.getUser()
|
||||
},
|
||||
//用户点击
|
||||
userClick(data, checked){
|
||||
if(checked){
|
||||
this.selected.push({
|
||||
id: data[config.user.props.key],
|
||||
name: data[config.user.props.label]
|
||||
})
|
||||
}else{
|
||||
this.selected = this.selected.filter(item => item.id != data[config.user.props.key])
|
||||
}
|
||||
},
|
||||
//用户分页点击
|
||||
paginationChange(){
|
||||
this.getUser()
|
||||
},
|
||||
//用户搜索
|
||||
search(){
|
||||
this.groupId = ''
|
||||
this.$refs.groupTree.setCurrentKey(this.groupId)
|
||||
this.currentPage = 1
|
||||
this.getUser()
|
||||
},
|
||||
//删除已选
|
||||
deleteSelected(index){
|
||||
this.selected.splice(index,1);
|
||||
if(this.type==1){
|
||||
this.$refs.userTree.setCheckedKeys(this.selectedIds)
|
||||
}else if(this.type==2){
|
||||
this.$refs.groupTree.setCheckedKeys(this.selectedIds)
|
||||
}
|
||||
},
|
||||
//角色点击
|
||||
roleClick(data, checked){
|
||||
if(checked){
|
||||
this.selected.push({
|
||||
id: data[config.role.props.key],
|
||||
name: data[config.role.props.label]
|
||||
})
|
||||
}else{
|
||||
this.selected = this.selected.filter(item => item.id != data[config.role.props.key])
|
||||
}
|
||||
},
|
||||
//提交保存
|
||||
save(){
|
||||
this.value.splice(0,this.value.length);
|
||||
this.selected.map(item => {
|
||||
this.value.push(item)
|
||||
})
|
||||
this.dialogVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-user-select {display: flex;}
|
||||
.sc-user-select__left {width: 400px;}
|
||||
.sc-user-select__right {flex: 1;}
|
||||
|
||||
.sc-user-select__search {padding-bottom:10px;}
|
||||
|
||||
.sc-user-select__select {display: flex;border: 1px solid var(--el-border-color-light);background: var(--el-color-white);}
|
||||
.sc-user-select__tree {width: 200px;height:300px;border-right: 1px solid var(--el-border-color-light);}
|
||||
.sc-user-select__user {width: 200px;height:300px;display: flex;flex-direction: column;}
|
||||
.sc-user-select__user__list {flex: 1;overflow: auto;}
|
||||
.sc-user-select__user footer {height:36px;padding-top:5px;border-top: 1px solid var(--el-border-color-light);}
|
||||
|
||||
.sc-user-select__toicon {display: flex;justify-content: center;align-items: center;margin:0 10px;}
|
||||
.sc-user-select__toicon i {display: flex;justify-content: center;align-items: center;background: #ccc;width: 20px;height: 20px;text-align: center;line-height: 20px;border-radius:50%;color: #fff;}
|
||||
|
||||
.sc-user-select__selected {height:345px;width: 200px;border: 1px solid var(--el-border-color-light);background: var(--el-color-white);}
|
||||
.sc-user-select__selected header {height:43px;line-height: 43px;border-bottom: 1px solid var(--el-border-color-light);padding:0 15px;font-size: 12px;}
|
||||
.sc-user-select__selected ul {height:300px;overflow: auto;}
|
||||
.sc-user-select__selected li {display: flex;align-items: center;justify-content: space-between;padding:5px 5px 5px 15px;height:38px;}
|
||||
.sc-user-select__selected li .name {display: flex;align-items: center;}
|
||||
.sc-user-select__selected li .name .el-avatar {background: #409eff;margin-right: 10px;}
|
||||
.sc-user-select__selected li .name label {}
|
||||
.sc-user-select__selected li .delete {display: none;}
|
||||
.sc-user-select__selected li:hover {background: var(--el-color-primary-light-9);}
|
||||
.sc-user-select__selected li:hover .delete {display: inline-block;}
|
||||
|
||||
.sc-user-select-role .sc-user-select__left {width: 200px;}
|
||||
.sc-user-select-role .sc-user-select__tree {border: none;height: 343px;}
|
||||
.sc-user-select-role .sc-user-select__selected {}
|
||||
|
||||
[data-theme='dark'] .sc-user-select__selected li:hover {background: rgba(0, 0, 0, 0.2);}
|
||||
[data-theme='dark'] .sc-user-select__toicon i {background: #383838;}
|
||||
</style>
|
||||
Reference in New Issue
Block a user