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

Compare commits

base: clay:a6185c34c9ea14a8f343da433b5f11a1e80e5afa
Branches Tags
clay:master
clay:pro
clay:DJ
clay:chatGPT
clay:master-back
clay:clay
..
compare: clay:710c86f6a98f741d40e7993e49e40d87cb6e9a2a
Branches Tags
clay:pro
clay:master
clay:DJ
clay:chatGPT
clay:master-back
clay:clay

No commits in common. "a6185c34c9ea14a8f343da433b5f11a1e80e5afa" and "710c86f6a98f741d40e7993e49e40d87cb6e9a2a" have entirely different histories.
a6185c34c9 ... 710c86f6a9

2 changed files with 293 additions and 45 deletions
Show Stats Expand all files Collapse all files

289
flowable-engine-web/src/components/common/RolePickerMe.vue Normal file
View File

@ -0,0 +1,289 @@
<template>
<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">
<div>系统角色</div>
</div>
<div class="org-items">
<el-empty :image-size="100" description="似乎没有数据" v-show="roleList.length === 0"/>
<!-- 系统角色-->
<div class="org-role-item" v-for="(roleItem , roleIndex) in roleList" :key="roleIndex"
@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>
</div>
</div>
</div>
<div class="selected">
<div class="count">
<span>已选 {{ selectList.length }} 项</span>
<span @click="clearSelected">清空</span>
</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">
<i class="el-icon-user-solid"></i>
<span>{{ org.label }}</span>
<i class="el-icon-close" @click="noSelected(org)"></i>
</div>
</div>
</div>
</div>
</w-dialog>
</template>
<script>
import {getRole} from "@/api/org";
export default {
name: "RolePicker",
props: {
selected: {
default: () => {
return [];
},
type: Array
}
},
data() {
return {
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: "权限测试角色"
// }
],
selectList: []
};
},
// created() {
// this.getRole();
// },
methods: {
show(){
console.log("4444444444444444444")
this.visible = true
this.getRole();
},
//获取角色信息
getRole() {
getRole().then(res => {
this.roleList = res.data;
});
},
//选中角色
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;
}
}
}
}
} 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];
}
}
},
//右侧的×
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() {
this.$confirm("您确定要清空已选中的项?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
for (let i = 0; i < this.selectList.length; i++) {
if (this.selectList[i].selected === true) {
this.selectList[i].selected = false;
}
}
this.selectList = [];
});
},
//确定按钮
selectConfirm() {
console.log(this.selectList)
this.$emit("ok", Object.assign([], this.selectList.map(item =>{
return {
roleId : item.value,
roleName: item.label
}
})));
this.visible = false;
}
}
};
</script>
<style lang="less" scoped>
@containWidth: 278px;
/deep/ .el-dialog__body {
padding: 10px 20px;
}
.picker {
height: 402px;
position: relative;
text-align: left;
.candidate {
left: 0;
top: 0;
}
.role-header {
padding: 10px !important;
margin-bottom: 5px;
border-bottom: 1px solid #e8e8e8;
}
}
.candidate, .selected {
position: absolute;
display: inline-block;
width: @containWidth;
height: 400px;
border: 1px solid #e8e8e8;
}
.selected {
border-left: none;
right: 0;
top: 0;
.count {
width: calc(@containWidth - 20px);
padding: 10px;
display: inline-block;
border-bottom: 1px solid #e8e8e8;
margin-bottom: 5px;
& > span:nth-child(2) {
float: right;
color: #c75450;
cursor: pointer;
}
}
}
.org-items {
overflow-y: auto;
height: 350px;
.el-icon-close {
position: absolute;
right: 5px;
cursor: pointer;
font-size: larger;
}
.org-role-item {
padding: 7px 5px;
display: flex;
align-items: center;
cursor: pointer;
margin: 0 5px;
border-radius: 5px;
position: relative;
&:hover {
background: #f1f1f1;
}
> span {
margin-left: 5px;
}
}
}
::-webkit-scrollbar {
float: right;
width: 4px;
height: 4px;
background-color: white;
}
::-webkit-scrollbar-thumb {
border-radius: 16px;
background-color: #efefef;
}
</style>

49
flowable-engine-web/src/views/workspace/InitiatedInstance.vue
View File

@ -45,39 +45,19 @@
</el-table>
<el-drawer
title="审批详情"
size="500px"
size="50%"
:visible.sync="approveOpen"
direction="rtl">
<div v-loading="loading">
<div class="top">
<div class="top_left">
<el-avatar size="large" :src="avatar"></el-avatar>
<span style="text-align: center;color: #19191a;font-size: 14px;">{{ selectProcessInstance.approveName }}</span>
</div>
<div class="top_right">
<div style="margin-bottom: 12px">
<span style="font-size: 15px;">{{ selectProcessInstance.deploymentName }}</span>
<el-tag style="font-size: 12px;margin:0 15px" size="mini">进行中</el-tag>
<el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
<el-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer" @click.native="processDiagramViewer = true"></el-icon>
</el-tooltip>
</div>
<div>
<span style="color: rgb(108, 108, 108);">编号: {{ selectProcessInstance.taskId }}</span>
</div>
</div>
</div>
<div style="height: 15px;background:#f5f5f5;"></div>
<form-render-view ref="taskViewForm" :form-items="processInstanceData.formItems"
v-model="processInstanceData.formData"/>
<!-- <process-diagram-viewer v-if="!loading"/>-->
<div style="height: 15px;background:#f5f5f5;"></div>
<el-button @click="processDiagramViewer = true">查看详细流程</el-button>
</div>
</el-drawer>
<el-dialog title="流程详情" :visible.sync="processDiagramViewer" :close-on-click-modal="true">
<process-diagram-viewer v-if="processDiagramViewer"/>
<div style="height: 70px;"></div>
</el-dialog>
</div>
</template>
@ -102,8 +82,7 @@ export default {
formData: {},
formItems: [],
processList: [],
},
avatar: require("@/assets/image/avatar.png")
}
};
},
created() {
@ -164,26 +143,6 @@ export default {
}
</script>
<style lang="scss" scoped>
.top {
padding: 0 10px 10px 10px;
display: flex;
.top_left {
display: flex;
flex-direction: column;
width: 50px;
align-items: center;
}
.top_right {
width: 85%;
display: flex;
flex-direction: column;
//justify-content: space-between;
font-size: 13px;
margin-left: 10px;
}
}
<style scoped>
</style>