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

Compare commits

base: clay:15b41326b604da9813faacd4dde100eb6ca94206
Branches Tags
clay:master
clay:pro
clay:DJ
clay:chatGPT
clay:master-back
clay:clay
...
compare: clay:25e032339b756fe6336cdb4381008f079849ae71
Branches Tags
clay:pro
clay:master
clay:DJ
clay:chatGPT
clay:master-back
clay:clay

2 Commits
15b41326b6 ... 25e032339b

Author SHA1 Message Date
odjbin 25e032339b Merge pull request 'dengjie commit : 选择系统角色' (#7) from DJ into master 
Reviewed-on: http://git.hchyun.com/clay/workflow-engine-web/pulls/7
 2023-01-13 13:23:43 +00:00
clay 594a1feeaf dengjie commit : 选择系统角色 2023-01-13 21:22:08 +08:00
5 changed files with 147 additions and 205 deletions
Show Stats Expand all files Collapse all files

72
flowable-engine-web/src/components/common/DeptPicker.vue
View File

@ -10,10 +10,10 @@
<!-- 部门 -->
<el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
<el-scrollbar style="height:350px">
<el-tree :data="deptList" ref="tree" empty-text="" node-key="value" default-expand-all
<el-tree :data="deptList" ref="tree" :props="deptProps" empty-text="" node-key="deptId" default-expand-all
:show-checkbox="showCheckbox" check-strictly highlight-current
@check-change="handleCheckChange" @node-click="(node,check)=>handle(node,check)" :filter-node-method="filterNode">
<div class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%">
<div class="custom-tree-node" slot-scope="{ node }" style="width: 100%">
<i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
</div>
</el-tree>
@ -29,7 +29,7 @@
<el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
<div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
<i class="el-icon-folder-opened"></i>
<span>{{ selectItem.label }}</span>
<span>{{ selectItem.deptName }}</span>
<i class="el-icon-close" @click="noSelected(selectItem)" v-if="showCheckbox===false"></i>
</div>
</div>
@ -67,43 +67,12 @@ export default {
title: "请选择",
selectList: [],
filterText: "",
deptList: [
{
value: 1,
label: '一级 1',
children: [{
value: 4,
label: '二级 1-1',
children: [{
value: 9,
label: '31'
}, {
value: 10,
label: '三级 1-1-2'
}]
}]
}, {
value: 2,
label: '一级 2',
children: [{
value: 5,
label: '二级 2-1'
}, {
value: 6,
label: '二级 2-2'
}]
}, {
value: 3,
label: '一级 3',
children: [{
value: 7,
label: '二级 3-1'
}, {
value: 8,
label: '二级 3-2'
}]
}
]
deptList: [],
deptProps:{
value:'deptId',
label: 'deptName',
children: 'children'
}
};
},
watch: {
@ -128,16 +97,19 @@ export default {
//获取部门信息
getDepartmentTree() {
getDepartmentTree().then(res => {
console.log("获取部门信息", res);
this.deptList = res.data;
const jsona = JSON.stringify(res.data) // 把接口返回的res.data数据转成字符串
const jsonb = jsona.replace(/"value"/g, '"deptId"') // 修改成你要的字段
const jsonc = jsonb.replace(/"label"/g, '"deptName"')
this.deptList=JSON.parse(jsonc)
console.log("获取部门信息===========", this.deptList);
});
},
//通过关键字过滤树节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
return data.deptName.indexOf(value) !== -1;
},
//用于部门选择
//用于弹开部门选择
showDeptPicker() {
this.visible = true;
},
@ -153,7 +125,7 @@ export default {
if (this.multiple) {
//不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === data.value) {
if (this.selectList[i].deptId === data.deptId) {
this.selectList.splice(i, 1);
break;
}
@ -167,7 +139,7 @@ export default {
} else {// 左侧有选择框 + 单选
//不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === data.value) {
if (this.selectList[i].deptId === data.deptId) {
this.selectList.splice(i, 1);
break;
}
@ -186,7 +158,7 @@ export default {
//左侧没有选择框时,点击tree-item
/**
* 可以点击树节点label,进行选择
* 可以点击树节点deptName,进行选择
* @param node 选择的每个节点item
* @param check checked(checkbox选择框)是否选中
*/
@ -194,7 +166,7 @@ export default {
if(this.multiple){
//不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === node.value) {
if (this.selectList[i].deptId === node.deptId) {
this.selectList.splice(i, 1);
break;
}
@ -209,7 +181,7 @@ export default {
//左侧无选择框时,右侧显示×
noSelected(selectItem) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === selectItem.value) {
if (this.selectList[i].deptId === selectItem.deptId) {
this.selectList.splice(i, 1);
this.$refs.tree.setCheckedKeys(i);
break;
@ -237,7 +209,7 @@ export default {
},
//确定按钮
selectConfirm() {
// this.$emit("input", this.selectList)
this.$emit("input", this.selectList)
// this.$emit("dengjie")
}
}

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

@ -1,5 +1,5 @@
<template>
<w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :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">
@ -12,7 +12,7 @@
@click="selectChange(roleItem)">
<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>
<span>{{ roleItem.roleName }}</span>
</div>
</div>
</div>
@ -24,10 +24,10 @@
</div>
<div class="org-items">
<el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
<div v-for="(org, index) in selectList" :key="index" class="org-role-item">
<div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-role-item">
<i class="el-icon-user-solid"></i>
<span>{{ org.label }}</span>
<i class="el-icon-close" @click="noSelected(org)"></i>
<span>{{ selectItem.roleName }}</span>
<i class="el-icon-close" @click="noSelected(selectItem)"></i>
</div>
</div>
</div>
@ -46,6 +46,24 @@ export default {
return [];
},
type: Array
},
multiple: { //是否多选
default: true,
type: Boolean
},
showCheckbox: { //是否显示左侧选择框
default: true,
type: Boolean
}
},
computed: {
_value: {
get() {
return this.value
},
set(val) {
this.$emit("input", val)
}
}
},
data() {
@ -53,34 +71,7 @@ export default {
visible: false,
loading: false,
title: "请选择",
multiple: true,//是否多选
showCheckbox: true,//是否显示左侧选择框
roleList: [
// {
// value: 1,
// label: "超级管理员"
// },
// {
// value: 2,
// label: "普通角色"
// },
// {
// value: 100,
// label: "前端开发人员"
// },
// {
// value: 101,
// label: "图片文件管理员"
// },
// {
// value: 102,
// label: "附件管理员"
// },
// {
// value: 103,
// label: "权限测试角色"
// }
],
roleList: [],
selectList: []
};
},
@ -91,9 +82,16 @@ export default {
//获取角色信息
getRole() {
getRole().then(res => {
this.roleList = res.data;
console.log('系统角色',res.data);
this.roleList= res.data.map(function (val){
return {roleId:val.value,roleName:val.label}
})
});
},
//用于弹出角色选择器
showRolePicker() {
this.visible = true;
},
//选中角色
selectChange(roleItem) {
// 左侧有选择框
@ -101,7 +99,7 @@ export default {
// 左侧有选择框 + 多选
if (this.multiple) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === roleItem.value) {
if (this.selectList[i].roleId === roleItem.roleId) {
this.selectList.splice(i, 1);
break;
}
@ -112,7 +110,7 @@ export default {
} else {// 左侧有选择框 + 单选
//用于左侧选择框选中取消,引起右侧数据变化
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === roleItem.value) {
if (this.selectList[i].roleId === roleItem.roleId) {
this.selectList.splice(i, 1);
break;
}
@ -122,7 +120,7 @@ export default {
}
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) {
if (this.roleList[i].roleId !== this.selectList[j].roleId) {
this.roleList[i].selected = false;
}
}
@ -132,7 +130,7 @@ export default {
// 左侧没有选择框 + 多选
if (this.multiple) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === roleItem.value) {
if (this.selectList[i].roleId === roleItem.roleId) {
this.selectList.splice(i, 1);
break;
}
@ -142,16 +140,17 @@ export default {
this.selectList = [roleItem];
}
}
this._value = this.selectList
},
//右侧的×
noSelected(org) {
noSelected(selectItem) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === org.value) {
if (this.selectList[i].roleId === selectItem.roleId) {
this.selectList.splice(i, 1);
break;
}
}
org.selected = false;
selectItem.selected = false;
},
//清空
clearSelected() {
@ -170,14 +169,9 @@ export default {
},
//确定按钮
selectConfirm() {
// this.$emit("ok", Object.assign([], this.select.map(v => {
// v.avatar = undefined;
// return v;
// })));
// this.visible = false;
// this.recover();
this.$emit("ok", this.selectList);
this.visible = false;
}
}
};
</script>

77
flowable-engine-web/src/components/common/Test.vue
View File

@ -10,12 +10,12 @@
<!-- 部门 -->
<el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
<el-scrollbar style="height:350px">
<el-tree :data="deptList" ref="tree" empty-text="" node-key="value" default-expand-all
<el-tree :data="deptList" ref="tree" :props="deptProps" empty-text="" node-key="deptId" default-expand-all
:show-checkbox="showCheckbox" check-strictly highlight-current
@check-change="handleCheckChange" @node-click="(node,check)=>handle(node,check)" :filter-node-method="filterNode">
<div class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%">
<i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
</div>
<div class="custom-tree-node" slot-scope="{ node }" style="width: 100%">
<i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
</div>
</el-tree>
</el-scrollbar>
</div>
@ -29,7 +29,7 @@
<el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
<div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
<i class="el-icon-folder-opened"></i>
<span>{{ selectItem.label }}</span>
<span>{{ selectItem.deptName }}</span>
<i class="el-icon-close" @click="noSelected(selectItem)" v-if="showCheckbox===false"></i>
</div>
</div>
@ -67,43 +67,12 @@ export default {
title: "请选择",
selectList: [],
filterText: "",
deptList: [
{
value: 1,
label: '一级 1',
children: [{
value: 4,
label: '二级 1-1',
children: [{
value: 9,
label: '31'
}, {
value: 10,
label: '三级 1-1-2'
}]
}]
}, {
value: 2,
label: '一级 2',
children: [{
value: 5,
label: '二级 2-1'
}, {
value: 6,
label: '二级 2-2'
}]
}, {
value: 3,
label: '一级 3',
children: [{
value: 7,
label: '二级 3-1'
}, {
value: 8,
label: '二级 3-2'
}]
}
]
deptList: [],
deptProps:{
value:'deptId',
label: 'deptName',
children: 'children'
}
};
},
watch: {
@ -128,14 +97,18 @@ export default {
//获取部门信息
getDepartmentTree() {
getDepartmentTree().then(res => {
console.log("获取部门信息", res);
this.deptList = res.data;
const jsona = JSON.stringify(res.data) // 把接口返回的res.data数据转成字符串
const jsonb = jsona.replace(/"value"/g, '"deptId"') // 修改成你要的字段
const jsonc = jsonb.replace(/"label"/g, '"deptName"')
const endjson = JSON.parse(jsonc)
this.deptList=endjson
console.log("获取部门信息===========", this.deptList);
});
},
//通过关键字过滤树节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
return data.deptName.indexOf(value) !== -1;
},
//用于部门选择
showDeptPicker() {
@ -153,7 +126,7 @@ export default {
if (this.multiple) {
//不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === data.value) {
if (this.selectList[i].deptId === data.deptId) {
this.selectList.splice(i, 1);
break;
}
@ -167,7 +140,7 @@ export default {
} else {// 左侧有选择框 + 单选
//不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === data.value) {
if (this.selectList[i].deptId === data.deptId) {
this.selectList.splice(i, 1);
break;
}
@ -186,7 +159,7 @@ export default {
//左侧没有选择框时,点击tree-item
/**
* 可以点击树节点label,进行选择
* 可以点击树节点deptName,进行选择
* @param node 选择的每个节点item
* @param check checked(checkbox选择框)是否选中
*/
@ -194,7 +167,7 @@ export default {
if(this.multiple){
//不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === node.value) {
if (this.selectList[i].deptId === node.deptId) {
this.selectList.splice(i, 1);
break;
}
@ -209,7 +182,7 @@ export default {
//左侧无选择框时,右侧显示×
noSelected(selectItem) {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].value === selectItem.value) {
if (this.selectList[i].deptId === selectItem.deptId) {
this.selectList.splice(i, 1);
this.$refs.tree.setCheckedKeys(i);
break;
@ -231,13 +204,13 @@ export default {
}).then(() => {
this.handleCheckChange("1");
if(!this.showCheckbox){
this.selectList=[]
this.selectList=[]
}
});
},
//确定按钮
selectConfirm() {
// this.$emit("input", this.selectList)
this.$emit("input", this.selectList)
// this.$emit("dengjie")
}
}

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

@ -6,8 +6,8 @@
</template>
<template v-else>
<template v-if="perm === 'E'">
<el-button icon="iconfont icon-map-site" type="primary" size="mini" round @click="$refs.orgPicker.show()"> 选择部门</el-button>
<org-picker type="dept" :multiple="multiple" ref="orgPicker" :selected="_value" @ok="selected"/>
<el-button icon="iconfont icon-map-site" type="primary" size="mini" round @click="selectDept"> 选择部门</el-button>
<org-picker type="dept" :multiple="multiple" ref="deptPicker" :selected="_value" @ok="selected"/>
<span class="placeholder"> {{placeholder}}</span>
<div style="margin-top: 5px">
<el-tag size="mini" style="margin: 5px" closable v-for="(dept, i) in _value" :key="i" @close="delDept(i)">{{dept.name}}</el-tag>
@ -54,6 +54,10 @@ export default {
}
},
methods: {
//弹出部门选择器,选择部门
selectDept() {
this.$refs.deptPicker.showDeptPicker()
},
selected(values){
this.showOrgSelect = false
this._value = values

105
flowable-engine-web/src/views/common/process/config/ApprovalNodeConfig.vue
View File

@ -119,40 +119,38 @@
<el-form-item label="🙅‍ 如果审批被驳回 👇">
<el-radio-group v-model="nodeProps.refuse.type">
<el-radio label="TO_END">直接结束流程</el-radio>
<!-- <el-radio label="TO_BEFORE">驳回到上级审批节点</el-radio>-->
<!-- <el-radio label="TO_NODE">驳回到指定节点</el-radio>-->
<!-- <el-radio label="TO_BEFORE">驳回到上级审批节点</el-radio>-->
<!-- <el-radio label="TO_NODE">驳回到指定节点</el-radio>-->
</el-radio-group>
<div v-if="nodeProps.refuse.type === 'TO_NODE'">
<span>指定节点:</span>
<el-select style="margin-left: 10px; width: 150px;" placeholder="选择跳转步骤" size="small" v-model="nodeProps.refuse.target">
<el-select style="margin-left: 10px; width: 150px;" placeholder="选择跳转步骤" size="small"
v-model="nodeProps.refuse.target">
<el-option v-for="(node, i) in nodeOptions" :key="i" :label="node.name" :value="node.id"></el-option>
</el-select>
</div>
</el-form-item>
</el-form>
<!-- <org-picker :title="pickerTitle" multiple :type="orgPickerType" ref="orgPicker" :selected="orgPickerSelected"-->
<!-- @ok="selected"/>-->
<role-picker-me :title="pickerTitle" multiple ref="rolePicker" :selected="rolePickerSelected" @ok="selectedRole"/>
<role-picker :title="pickerTitle" multiple ref="rolePicker" :v-model="select" @ok="selectedRole"/>
</div>
</template>
<script>
import OrgPicker from "@/components/common/Test";
import RolePickerMe from "../../../../components/common/RolePickerMe";
import RolePicker from "@/components/common/RolePicker";
import RoleItems from "../RoleItems";
import OrgItems from "../OrgItems";
export default {
name: "ApprovalNodeConfig",
components: {RoleItems, OrgPicker, OrgItems,RolePickerMe},
components: {RoleItems, OrgItems, RolePicker},
props: {
config: {
type: Object,
default: () => {
return {}
return {};
}
}
},
@ -160,54 +158,52 @@ export default {
return {
showOrgSelect: false,
orgPickerSelected: [],
showRoleSelect: false,
rolePickerSelected: [],
orgPickerType: 'user',
orgPickerType: "user",
approvalTypes: [
{name: '指定人员', type: 'ASSIGN_USER'},
{name: '发起人自选', type: 'SELF_SELECT'},
{name: '连续多级主管', type: 'LEADER_TOP'},
{name: '主管', type: 'LEADER'},
{name: '角色', type: 'ROLE'},
{name: '发起人自己', type: 'SELF'},
{name: '表单内联系人', type: 'FORM_USER'}
{name: "指定人员", type: "ASSIGN_USER"},
{name: "发起人自选", type: "SELF_SELECT"},
{name: "连续多级主管", type: "LEADER_TOP"},
{name: "主管", type: "LEADER"},
{name: "角色", type: "ROLE"},
{name: "发起人自己", type: "SELF"},
{name: "表单内联系人", type: "FORM_USER"}
]
}
};
},
computed: {
nodeProps() {
return this.$store.state.selectedNode.props
return this.$store.state.selectedNode.props;
},
select() {
return this.config.assignedUser || []
return this.config.assignedUser || [];
},
roleList() {
return this.config.roleList || []
return this.config.roleList || [];
},
forms() {
return this.$store.state.design.formItems.filter(f => {
return f.name === 'UserPicker'
})
return f.name === "UserPicker";
});
},
pickerTitle() {
switch (this.orgPickerType) {
case 'user':
return '请选择人员';
case 'role':
return '请选择系统角色';
case "user":
return "请选择人员";
case "role":
return "请选择系统角色";
default:
return null;
}
},
nodeOptions() {
let values = []
const excType = ['ROOT', 'EMPTY', "CONDITION", "CONDITIONS", "CONCURRENT", "CONCURRENTS"]
let values = [];
const excType = ["ROOT", "EMPTY", "CONDITION", "CONDITIONS", "CONCURRENT", "CONCURRENTS"];
this.$store.state.nodeMap.forEach((v) => {
if (excType.indexOf(v.type) === -1) {
values.push({id: v.id, name: v.name})
values.push({id: v.id, name: v.name});
}
})
return values
});
return values;
},
showMode() {
switch (this.nodeProps.assignedType) {
@ -216,7 +212,7 @@ export default {
case "SELF_SELECT":
return this.nodeProps.selfSelect.multiple;
case "LEADER_TOP":
return this.nodeProps.formUser !== '';
return this.nodeProps.formUser !== "";
case "FORM_USER":
return true;
case "ROLE":
@ -228,33 +224,36 @@ export default {
},
methods: {
selectUser() {
this.orgPickerSelected = this.select
this.orgPickerType = 'user'
this.$refs.orgPicker.show()
this.orgPickerSelected = this.select;
this.orgPickerType = "user";
this.$refs.orgPicker.show();
},
selectNoSetUser() {
this.orgPickerSelected = this.config.nobody.assignedUser
this.orgPickerType = 'user'
this.$refs.orgPicker.show()
this.orgPickerSelected = this.config.nobody.assignedUser;
this.orgPickerType = "user";
this.$refs.orgPicker.show();
},
//弹出角色选择器,选择系统角色
selectRole() {
this.showRoleSelect = null
this.rolePickerSelected = this.roleList
this.$refs.rolePicker.show()
},
selected(select) {
this.orgPickerType = "role";
this.$refs.rolePicker.showRolePicker();
},
selectedRole(select) {
console.log(select)
this.rolePickerSelected.length = 0
select.forEach(val => this.rolePickerSelected.push(val))
select.forEach(val => {
for (let i = 0; i < this.roleList.length; i++) {
if (this.roleList[i].roleId === val.roleId) {
this.roleList.splice(i, 1);
break;
}
}
this.roleList.push(val);
});
},
removeOrgItem(index) {
this.select.splice(index, 1)
this.select.splice(index, 1);
}
}
}
};
</script>
<style lang="less" scoped>