clay
/
workflow-engine-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

dengjie commit : 角色选择器完善及部分细节样式 #5

Merged
odjbin merged 1 commits from DJ into master 2023-01-10 13:33:34 +00:00
Conversation 0 Commits 1 Files Changed 7 +281 -137
7 changed files with 281 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
flowable-engine-web/src/components/common/OrgPicker.vue
View File

@ -1,16 +1,21 @@
<template>
<w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
<w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
<div class="picker">
<div class="candidate" v-loading="loading">
<div style="padding: 5px 8px;">
<el-input v-model="filterText" @input="searchUser" style="width: 100%;" size="small"
<el-input v-model="filterText" style="width: 100%;" size="small"
clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
</div>
<!-- 部门 -->
<el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
<el-scrollbar style="height:350px">
<el-tree :data="deptList" ref="tree" empty-text="" default-expand-all show-checkbox
@check-change="handleCheckChange" :filter-node-method="filterNode"></el-tree>
<el-tree :data="deptList" ref="tree" empty-text="" node-key="value" default-expand-all
:show-checkbox="showCheckbox"
@check="handleCheckChange" :filter-node-method="filterNode">
<span class="custom-tree-node" slot-scope="{ node, data }">
<i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
</span>
</el-tree>
</el-scrollbar>
</div>
@ -24,6 +29,7 @@
<div v-for="(org, index) in selectList" :key="index" class="org-item">
<i class="el-icon-folder-opened"></i>
<span>{{ org.label }}</span>
<i class="el-icon-close" @click="noSelected(org)"></i>
</div>
</div>
</div>
@ -42,9 +48,34 @@ export default {
loading: false,
title: "请选择",
multiple: true,//是否多选
showCheckbox: true,//是否显示左侧选择框
selectList: [],
filterText: "",
deptList: []
deptList: [
{
value:1,
label: '一级 1',
children: [{
value:2,
label: '二级 1-1',
children: [{
value:3,
label: '三级 1-1-1'
}]
}]
}, {
value:4,
label: '一级 2',
children: [{
value:5,
label: '二级 2-1',
children: [{
value:6,
label: '三级 2-1-1'
}]
}]
}
]
};
},
watch: {
@ -56,11 +87,11 @@ export default {
this.getDepartmentTree();
},
methods: {
//获取角色信息
//获取部门信息
getDepartmentTree() {
getDepartmentTree().then(res => {
console.log(res);
this.deptList=res.data
console.log("获取部门信息", res);
this.deptList = res.data;
});
},
//通过关键字过滤树节点
@ -68,41 +99,57 @@ export default {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//用于首页选择本次登录者,显示弹窗
show() {
//用于部门选择
showDeptPicker() {
this.visible = true;
this.init();
},
//初始化
init() {
this.selectList = Object.assign([], this.selected);
},
//选中部门
handleCheckChange(data, checked) {
//多选
if (this.multiple) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === data.value) {
this.selectList.splice(i, 1);
break;
// 左侧有选择框
if (this.showCheckbox) {
// 左侧有选择框 + 多选
if (this.multiple) {
//不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === data.value) {
this.selectList.splice(i, 1);
break;
}
}
if (checked) {
this.selectList.push(data);
} else {
// this.$refs.tree.setCheckedKeys(data);
this.$refs.tree.setCheckedKeys([]);
this.selectList = [];
}
} else {// 左侧有选择框 + 单选
if (checked) {
this.$refs.tree.setCheckedNodes([data]);
this.selectList = [data];
} else {
this.$refs.tree.setCheckedKeys([]);
this.selectList = [];
}
}
if (checked) {
this.selectList.push(data);
} else {// 左侧没有选择框
// 左侧没有选择框 + 多选
if (this.multiple) {
} else {// 左侧没有选择框 + 单选
}
} else {//单选
checked = true;
this.selectList = [data];
}
},
//确定按钮
selectOk() {
// this.$emit("ok", Object.assign([], this.select.map(v => {
// v.avatar = undefined;
// return v;
// })));
// this.visible = false;
// this.recover();
//右侧的×
noSelected(org) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === org.value) {
this.selectList.splice(i, 1);
break;
}
}
org.selected = false;
},
//清空
clearSelected() {
@ -111,23 +158,19 @@ export default {
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.selectList = [];
this.handleCheckChange("", false);
});
},
searchUser() {
let userName = this.search.trim();
this.searchUsers = [];
this.loading = true;
// getUserByName({userName: userName}).then(rsp => {
// this.loading = false
// this.searchUsers = rsp.data
// this.selectToLeft()
// }).catch(err => {
// this.loading = false
// this.$message.error("接口异常")
// })
//确定按钮
selectConfirm() {
// this.$emit("ok", Object.assign([], this.select.map(v => {
// v.avatar = undefined;
// return v;
// })));
// this.visible = false;
// this.recover();
}
}
};
</script>
@ -135,6 +178,16 @@ export default {
<style lang="less" scoped>
@containWidth: 278px;
/deep/ .el-tree-node {
.is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block;
}
.el-checkbox .el-checkbox__inner {
display: none;
}
}
/deep/ .el-dialog__body {
padding: 10px 20px;
}
@ -182,6 +235,12 @@ export default {
overflow-y: auto;
height: 350px;
.el-icon-close {
position: absolute;
right: 5px;
cursor: pointer;
font-size: larger;
}
.org-item {
margin: 0 5px;
border-radius: 5px;
@ -189,6 +248,7 @@ export default {
padding: 7px 5px;
display: flex;
align-items: center;
cursor: pointer;
&:hover {

131
flowable-engine-web/src/components/common/RolePicker.vue
View File

@ -1,5 +1,5 @@
<template>
<w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
<w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
<div class="picker">
<div class="candidate" v-loading="loading">
<div class="role-header">
@ -10,7 +10,7 @@
<!-- 系统角色-->
<div class="org-role-item" v-for="(roleItem , roleIndex) in roleList" :key="roleIndex"
@click="selectChange(roleItem)">
<el-checkbox v-model="roleItem.selected" v-if="multiple" disabled></el-checkbox>
<el-checkbox v-model="roleItem.selected" v-if="showCheckbox" @change="selectChange(roleItem)"></el-checkbox>
<i class="el-icon-user-solid" style="margin-left: 5px"></i>
<span>{{ roleItem.label }}</span>
</div>
@ -40,13 +40,47 @@ import {getRole} from "@/api/org";
export default {
name: "RolePicker",
props: {
selected: {
default: () => {
return [];
},
type: Array
}
},
data() {
return {
visible: false,
loading: false,
title: "请选择",
multiple: true,//是否多选
roleList: [],
showCheckbox: true,//是否显示左侧选择框
roleList: [
// {
// value: 1,
// label: "超级管理员"
// },
// {
// value: 2,
// label: "普通角色"
// },
// {
// value: 100,
// label: "前端开发人员"
// },
// {
// value: 101,
// label: "图片文件管理员"
// },
// {
// value: 102,
// label: "附件管理员"
// },
// {
// value: 103,
// label: "权限测试角色"
// }
],
selectList: []
};
},
@ -57,32 +91,56 @@ export default {
//获取角色信息
getRole() {
getRole().then(res => {
this.roleList=res.data
this.roleList = res.data;
});
},
//用于首页选择本次登录者,显示弹窗
show() {
this.visible = true;
this.init();
},
init() {
this.selectList = Object.assign([], this.selected);
},
//选中角色
selectChange(userItem) {
//多选
if (this.multiple) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === userItem.value) {
this.selectList.splice(i, 1);
break;
selectChange(roleItem) {
// 左侧有选择框
if (this.showCheckbox) {
// 左侧有选择框 + 多选
if (this.multiple) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === roleItem.value) {
this.selectList.splice(i, 1);
break;
}
}
if (roleItem.selected) {
this.selectList.push(roleItem);
}
} else {// 左侧有选择框 + 单选
//用于左侧选择框选中取消,引起右侧数据变化
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === roleItem.value) {
this.selectList.splice(i, 1);
break;
}
}
if (roleItem.selected) {
this.selectList = [roleItem];
}
for (let i = 0; i < this.roleList.length; i++) {
for (let j = 0; j < this.selectList.length; j++) {
if (this.roleList[i].value !== this.selectList[j].value) {
this.roleList[i].selected = false;
}
}
}
}
userItem.selected = true;
this.selectList.push(userItem);
} else {//单选
userItem.selected = true;
this.selectList = [userItem];
} else {// 左侧没有选择框
// 左侧没有选择框 + 多选
if (this.multiple) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === roleItem.value) {
this.selectList.splice(i, 1);
break;
}
}
this.selectList.push(roleItem);
}else {// 左侧没有选择框 + 单选
this.selectList = [roleItem];
}
}
},
//右侧的×
@ -95,15 +153,6 @@ export default {
}
org.selected = false;
},
//确定按钮
selectOk() {
// this.$emit("ok", Object.assign([], this.select.map(v => {
// v.avatar = undefined;
// return v;
// })));
// this.visible = false;
// this.recover();
},
//清空
clearSelected() {
this.$confirm("您确定要清空已选中的项?", "提示", {
@ -111,8 +160,22 @@ export default {
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.selectList=[]
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].selected === true) {
this.selectList[i].selected = false;
}
}
this.selectList = [];
});
},
//确定按钮
selectConfirm() {
// this.$emit("ok", Object.assign([], this.select.map(v => {
// v.avatar = undefined;
// return v;
// })));
// this.visible = false;
// this.recover();
}
}

113
flowable-engine-web/src/components/common/departmentPicker.vue
View File

@ -1,16 +1,21 @@
<template>
<w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
<w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
<div class="picker">
<div class="candidate" v-loading="loading">
<div style="padding: 5px 8px;">
<el-input v-model="filterText" @input="searchUser" style="width: 100%;" size="small"
<el-input v-model="filterText" style="width: 100%;" size="small"
clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
</div>
<!-- 部门 -->
<el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
<el-scrollbar style="height:350px">
<el-tree :data="deptList" ref="tree" empty-text="" default-expand-all show-checkbox
@check-change="handleCheckChange" :filter-node-method="filterNode"></el-tree>
<el-tree :data="deptList" ref="tree" empty-text="" node-key="value" default-expand-all
:show-checkbox="showCheckbox"
@check="handleCheckChange" :filter-node-method="filterNode">
<span class="custom-tree-node" slot-scope="{ node, data }">
<i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
</span>
</el-tree>
</el-scrollbar>
</div>
@ -42,6 +47,7 @@ export default {
loading: false,
title: "请选择",
multiple: true,//是否多选
showCheckbox: true,//是否显示左侧选择框
selectList: [],
filterText: "",
deptList: []
@ -56,11 +62,11 @@ export default {
this.getDepartmentTree();
},
methods: {
//获取角色信息
//获取部门信息
getDepartmentTree() {
getDepartmentTree().then(res => {
console.log(res);
this.deptList=res.data
console.log("获取部门信息", res);
this.deptList = res.data;
});
},
//通过关键字过滤树节点
@ -68,42 +74,47 @@ export default {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//用于首页选择本次登录者,显示弹窗
show() {
//用于部门选择
showDeptPicker() {
this.visible = true;
this.init();
},
//初始化
init() {
this.selectList = Object.assign([], this.selected);
},
//选中部门
handleCheckChange(data, checked) {
//多选
if (this.multiple) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === data.value) {
this.selectList.splice(i, 1);
break;
// 左侧有选择框
if (this.showCheckbox) {
// 左侧有选择框 + 多选
if (this.multiple) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === data.value) {
this.selectList.splice(i, 1);
break;
}
}
// checked= true;
// this.selectList.push(data);
if (checked) {
this.selectList.push(data);
} else {
// this.$refs.tree.setCheckedKeys(data);
}
} else {// 左侧有选择框 + 单选
if (checked) {
this.$refs.tree.setCheckedNodes([data]);
this.selectList = [data];
} else {
this.$refs.tree.setCheckedKeys([]);
this.selectList = [];
}
}
if (checked) {
this.selectList.push(data);
}else {// 左侧没有选择框
// 左侧没有选择框 + 多选
if (this.multiple) {
}else {// 左侧没有选择框 + 单选
}
} else {//单选
checked = true;
this.selectList = [data];
}
},
//确定按钮
selectOk() {
// this.$emit("ok", Object.assign([], this.select.map(v => {
// v.avatar = undefined;
// return v;
// })));
// this.visible = false;
// this.recover();
},
//清空
clearSelected() {
this.$confirm("您确定要清空已选中的项?", "提示", {
@ -111,23 +122,20 @@ export default {
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.selectList = [];
this.handleCheckChange("", false);
});
},
searchUser() {
let userName = this.search.trim();
this.searchUsers = [];
this.loading = true;
// getUserByName({userName: userName}).then(rsp => {
// this.loading = false
// this.searchUsers = rsp.data
// this.selectToLeft()
// }).catch(err => {
// this.loading = false
// this.$message.error("接口异常")
// })
//确定按钮
selectConfirm() {
// this.$emit("ok", Object.assign([], this.select.map(v => {
// v.avatar = undefined;
// return v;
// })));
// this.visible = false;
// this.recover();
}
}
};
</script>
@ -135,6 +143,15 @@ export default {
<style lang="less" scoped>
@containWidth: 278px;
/deep/.el-tree-node {
.is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block;
}
.el-checkbox .el-checkbox__inner {
display: none;
}
}
/deep/ .el-dialog__body {
padding: 10px 20px;
}

6
flowable-engine-web/src/views/Index.vue
View File

@ -4,7 +4,7 @@
<div class="work-panel">
<div class="user">
<el-button type="primary" round size="small" @click="$refs.orgPicker.show()" icon="el-icon-user">选择本次登录者</el-button>
<el-button type="primary" round size="small" @click="showRolePicker()" icon="el-icon-user">选择本次登录者</el-button>
<div v-if="loginUser !== '' && loginUser !== null">
<span>{{loginUser.name}}</span>
</div>
@ -60,6 +60,10 @@ export default {
}
},
methods:{
//显示角色选择框
showRolePicker(){
this.$refs.orgPicker.visible=true
},
selected(select){
this.select = select
this.loginUser = select.length > 0 ? select[0]:''

4
flowable-engine-web/src/views/admin/layout/FormDesign.vue
View File

@ -48,7 +48,7 @@
<div :class="{'mobile': showMobile, 'pc': !showMobile}">
<div :class="{'bd': showMobile}">
<div :class="{'form-content': showMobile}">
<div class="form">
<div class="form" >
<div class="tip" v-show="forms.length === 0 && !isStart">👈 请在左侧选择控件并拖至此处</div>
<draggable class="drag-from" :list="forms" group="form"
:options="{animation: 300, chosenClass:'choose', sort:true}"
@ -392,7 +392,7 @@ export default {
.pc {
margin-top: 4%;
padding: 0 150px;
.drag-from {
height: calc(100vh - 190px);
background-color: rgb(245, 246, 246);

6
flowable-engine-web/src/views/common/form/components/AmountInput.vue
View File

@ -16,12 +16,12 @@
</div>
</template>
<template v-else-if="perm === 'R'">
<div style="display: flex">
<div style="display: flex;">
<span>{{_value}}</span>
<div v-show="showChinese" style="margin-left: 30px;">
<span v-show="showChinese" style="margin-left: 30px;">
<span>大写：</span>
<span class="chinese">{{chinese}}</span>
</div>
</span>
</div>
</template>
</template>

2
flowable-engine-web/src/views/common/form/components/DeptPicker.vue
View File

@ -22,7 +22,7 @@
<script>
import componentMinxins from '../ComponentMinxins'
import OrgPicker from "@/components/common/OrgPicker";
import OrgPicker from "@/components/common/departmentPicker";
export default {
mixins: [componentMinxins],