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

clay : 关于我的基本完成 #21

Merged
clay merged 3 commits from master into pro 2023-02-24 14:32:11 +00:00
Conversation 0 Commits 3 Files Changed 10 +157 -91
4 changed files with 157 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 14b9e638e3 - Show all commits

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

@ -6,12 +6,16 @@
<div style="padding: 5px 8px;">
<el-input v-model="filterText" style="width: 100%;" size="small"
clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search" />
<div style="margin-top: 5px">
<el-button size="mini" type="primary" plain style="padding:4px 6px;">人员</el-button>
<el-button size="mini" type="primary" plain style="padding:4px 6px;">部门</el-button>
</div>
<!-- 部门 -->
</div>
<!-- 人员选择 -->
<el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
<el-scrollbar style="height:350px">
<el-tree :data="deptList" ref="tree" :props="deptProps" empty-text="" node-key="deptId" default-expand-all
:show-checkbox="showCheckbox" check-strictly highlight-current
<el-tree :data="deptList" ref="tree" :props="deptProps" empty-text="" node-key="value" default-expand-all
:show-checkbox="showCheckbox" highlight-current :check-strictly="multiple===false"
@check-change="handleCheckChange" @node-click="(node,check)=>handle(node,check)"
:filter-node-method="filterNode">
<div class="custom-tree-node" slot-scope="{ node }" style="width: 100%">
@ -20,7 +24,6 @@
</el-tree>
</el-scrollbar>
</div>
<div class="selected">
<div class="count">
<span>已选 {{ selectList.length }} 项</span>
@ -102,7 +105,7 @@ export default {
// const jsonb = jsona.replace(/"value"/g, '"deptId"') // 修改成你要的字段
// const jsonc = jsonb.replace(/"label"/g, '"deptName"')
this.deptList = res.data
console.log("获取部门信息===========", this.deptList);
// console.log("获取部门信息===========", this.deptList);
});
},
//通过关键字过滤树节点
@ -111,7 +114,7 @@ export default {
return data.deptName.indexOf(value) !== -1;
},
//用于弹开部门选择
showDeptPicker() {
showUserPicker() {
this.visible = true;
},
/**
@ -132,7 +135,9 @@ export default {
}
}
if (checked) {
if(data.children === undefined){
this.selectList.push(data);
}
} else if (data === '1') {
this.$refs.tree.setCheckedKeys([]);
this.selectList = [];
@ -147,10 +152,11 @@ export default {
}
if (checked) {
this.$refs.tree.setCheckedNodes([data]);
// this.$refs.tree.setCheckedKeys([]);
this.selectList = [data];
} else if (data === '1') {
this.$refs.tree.setCheckedKeys([]);
this.selectList = [];
this.$refs.tree.setCheckedKeys([]);
}
}
}
@ -164,6 +170,7 @@ export default {
* @param check checked(checkbox选择框)是否选中
*/
handle(node, check) {
if (check.isLeaf !== false) {
if (this.multiple) {
//不添加重复的数据到右边
for (let i = 0; i < this.selectList.length; i++) {
@ -178,6 +185,7 @@ export default {
check.checked = true
this.selectList = [node];
}
}
this._value = this.selectList
},
//左侧无选择框时,右侧显示×
@ -203,9 +211,10 @@ export default {
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.handleCheckChange("1");
if (!this.showCheckbox) {
this.selectList = []
}else {
this.handleCheckChange("1");
}
});
},
@ -221,15 +230,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-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;

12
flowable-engine-web/src/views/common/form/components/UserPicker.vue
View File

@ -6,15 +6,17 @@
</template>
<template v-else>
<template v-if="perm === 'E'">
<el-button icon="el-icon-user" type="primary" size="mini" round @click="$refs.orgPicker.show()">选择人员</el-button>
<org-picker type="user" :multiple="multiple" ref="orgPicker" :selected="_value" @ok="selected"/>
<el-button icon="el-icon-user" type="primary" size="mini" round @click="$refs.userPicker.showUserPicker()">选择人员</el-button>
<org-picker type="user" :multiple="multiple" ref="userPicker" :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>
<el-tag size="mini" style="margin: 5px" closable v-for="(user, i) in _value" :key="i" @close="delDept(i)">{{user.label}}</el-tag>
</div>
</template>
<template v-else-if="perm === 'R'">
{{ _value }}
<div v-for="(user, i) in _value" :key="i">
{{user.label}}
</div>
</template>
</template>
</div>
@ -29,7 +31,7 @@ import OrgPicker from "@/components/common/Test";
export default {
mixins: [componentMinxins],
name: "DeptPicker",
name: "UserPicker",
components: {OrgPicker},
props: {
value:{

106
flowable-engine-web/src/views/common/operation/operationRender.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<div style="margin: 10px">
<el-timeline>
<el-timeline-item v-for="(operation,index) in operationList"
:key="index" :timestamp="operation.startTime"
:icon="operation.icon"
:color="operation.color"
size="large"
placement="top">
<el-card>
<div style="display: flex;">
<div>
<el-avatar size="large" :src="operation.userInfo.avatar"></el-avatar>
</div>
<div style="margin-left: 10px;">
<div style="color: #c0bebe">{{ operation.userInfo.name }}</div>
<div style="font-size: 16px; font-weight: bold;">{{ operation.operationName }}</div>
</div>
</div>
<!-- <template v-if="operation.operation == 'opinion'">-->
<!-- <h4>{{operation.operationName}}</h4>-->
<!-- <p>王小虎 提交于 2018/4/12 20:46</p>-->
<!-- </template>-->
<template v-if="operation.operation == 'comment'">
<div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
<div>
{{ operation.comment.context }}
</div>
<div style="margin-top: 10px;" v-if="operation.comment.attachments.length > 0">
<template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">
<el-image
style="width: 100px; height: 100px"
:src="item.url"
:preview-src-list="[item.url]">
</el-image>
</template>
<div v-for="(file) in getAttachmentList(operation.comment.attachments,false)">
<el-link style="color: #2a99ff" :href="file.url" icon="el-icon-document" >{{file.name}}</el-link>
</div>
</div>
</div>
</template>
</el-card>
</el-timeline-item>
<el-timeline-item icon="el-icon-more">
<h2>审批进行中</h2>
</el-timeline-item>
</el-timeline>
</div>
</template>
<script>
export default {
props:{
operationList:{
type: Array,
default: () => {
return []
}
}
},
name: "operationRender",
created() {
for (let operation of this.operationList) {
switch (operation.state) {
case 'agree' :
this.$set(operation, "icon", "el-icon-check")
this.$set(operation, "color", "#0bbd87")
break;
case 'process' :
this.$set(operation, "icon", "el-icon-loading")
this.$set(operation, "color", "#f78f5f")
break;
case 'comment' :
this.$set(operation, "icon", "el-icon-chat-dot-round")
this.$set(operation, "color", "#0bbd87")
break;
default:
break;
}
}
},
methods: {
getAttachmentList(attachments,image){
let result = [];
for (let attachment of attachments) {
if (attachment.isImage === image){
result.push(attachment)
}
}
return result;
},
}
}
</script>
<style scoped>
/deep/ .el-card__body, .el-main {
padding: 10px;
}
</style>

59
flowable-engine-web/src/views/workspace/DisposalTask.vue
View File

@ -62,37 +62,8 @@
<form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
v-model="taskData.formData"/>
</div>
<div style="margin: 10px">
<el-timeline>
<el-timeline-item v-for="(operation,index) in taskData.operationList"
:key="index" :timestamp="operation.startTime"
:icon="operation.icon"
:color="operation.color"
size="large"
placement="top">
<el-card>
<el-avatar size="large" :src="operation.userInfo.avatar"></el-avatar>
<p>{{operation.userInfo.name}}</p>
<template v-if="operation.operation == 'opinion'">
<h4>{{operation.operationName}}</h4>
<p>王小虎 提交于 2018/4/12 20:46</p>
</template>
<template v-if="operation.operation == 'comment'">
{{operation.comment}}
</template>
</el-card>
</el-timeline-item>
<el-timeline-item icon="el-icon-more">
<h2>审批进行中</h2>
</el-timeline-item>
</el-timeline>
</div>
<div style="height: 15px;background:#f5f5f5;"></div>
<operation-render v-if="!loading" :operation-list="taskData.operationList"/>
<div style="height: 15px;background:#f5f5f5;"></div>
<el-footer class="footer">
<div class="footer_comment" @click="showCommentBox">
@ -133,10 +104,11 @@ import Comment from "../../components/common/Comment";
import FormRender from "@/views/common/form/FormRender";
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
import {addComment, completeTask, getTaskInfo, getTaskList, refuseTask, rollBackTask} from "@/api/task";
import OperationRender from "@/views/common/operation/operationRender";
export default {
name: "DisposalTask",
components: {Comment, FormRender, ProcessDiagramViewer},
components: {OperationRender, Comment, FormRender, ProcessDiagramViewer},
data() {
return {
approveOpen: false,
@ -198,34 +170,11 @@ export default {
return item
})
that.taskData = res.data;
for (let operation of that.taskData.operationList) {
switch (operation.state) {
case 'agree' :
this.$set(operation,"icon","el-icon-check")
this.$set(operation,"color","#0bbd87")
break;
case 'process' :
this.$set(operation,"icon","el-icon-loading")
this.$set(operation,"color","#f78f5f")
break;
case 'comment' :
this.$set(operation,"icon","el-icon-chat-dot-round")
this.$set(operation,"color","#0bbd87")
break;
default: break;
}
}
that.$store.state.design = that.taskData;
that.$store.state.userTaskOption = that.taskData.userTaskOption;
this.loading = false;
});
},
getTimeLineIcon(operation){
switch (operation.state) {
case 'agree' : return 'el-icon-check'
}
},
submitTask() {
let params = {
taskId: this.selectTask.taskId,