clay : 关于我的基本完成 #21
|
|
@ -13,6 +13,13 @@ export function startProcessInstance(param) {
|
|||
})
|
||||
}
|
||||
|
||||
export function getAboutInstanceList() {
|
||||
return request({
|
||||
url: "/flowable/process/instance/about",
|
||||
method: "get",
|
||||
})
|
||||
}
|
||||
|
||||
export function getInitiatedInstanceList() {
|
||||
return request({
|
||||
url: "/flowable/process/instance/self",
|
||||
|
|
@ -22,7 +29,7 @@ export function getInitiatedInstanceList() {
|
|||
|
||||
export function getInitiatedInstanceInfo(processInstanceId) {
|
||||
return request({
|
||||
url: "/flowable/process/instance/self/info/"+processInstanceId,
|
||||
url: "/flowable/process/instance/info/"+processInstanceId,
|
||||
method: "get",
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ Vue.prototype.$axios = axios;
|
|||
// 字体图标
|
||||
|
||||
export function getBaseUrl(){
|
||||
return "http://gateway.mytwins.top"
|
||||
// return "http://localhost:8000"
|
||||
// return "http://gateway.mytwins.top"
|
||||
return "http://localhost:8000"
|
||||
}
|
||||
|
||||
const service = axios.create({
|
||||
|
|
|
|||
|
|
@ -5,13 +5,17 @@
|
|||
<div class="candidate" v-loading="loading">
|
||||
<div style="padding: 5px 8px;">
|
||||
<el-input v-model="filterText" style="width: 100%;" size="small"
|
||||
clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
|
||||
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;
|
||||
},
|
||||
/**
|
||||
|
|
@ -123,7 +126,7 @@ export default {
|
|||
// 左侧有选择框
|
||||
if (this.showCheckbox) {
|
||||
// 左侧有选择框 + 多选
|
||||
if (this.multiple) {
|
||||
if (this.multiple ) {
|
||||
//不添加重复的数据到右边
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].value === data.value) {
|
||||
|
|
@ -132,7 +135,9 @@ export default {
|
|||
}
|
||||
}
|
||||
if (checked) {
|
||||
this.selectList.push(data);
|
||||
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,19 +170,21 @@ export default {
|
|||
* @param check checked(checkbox选择框)是否选中
|
||||
*/
|
||||
handle(node, check) {
|
||||
if (this.multiple) {
|
||||
//不添加重复的数据到右边
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].value === node.value) {
|
||||
this.selectList.splice(i, 1);
|
||||
break;
|
||||
if (check.isLeaf !== false) {
|
||||
if (this.multiple) {
|
||||
//不添加重复的数据到右边
|
||||
for (let i = 0; i < this.selectList.length; i++) {
|
||||
if (this.selectList[i].value === node.value) {
|
||||
this.selectList.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
check.checked = true
|
||||
this.selectList.push(node);
|
||||
} else {
|
||||
check.checked = true
|
||||
this.selectList = [node];
|
||||
}
|
||||
check.checked = true
|
||||
this.selectList.push(node);
|
||||
} else {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-form ref="form" class="process-form" label-position="top" :rules="rules" :model="_value">
|
||||
<el-form ref="form" class="process-form" label-position="top" :model="_value">
|
||||
<div v-for="(item, index) in formItems" :key="item.name + index">
|
||||
<el-form-item v-if="item.name !== 'SpanLayout' && item.name !== 'Description'"
|
||||
:prop="item.id" :label="item.title">
|
||||
|
|
@ -43,11 +43,6 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_value: {
|
||||
get() {
|
||||
|
|
@ -71,13 +66,6 @@ export default {
|
|||
if (this.isPreview){
|
||||
this.$set(item, 'perm', this.model)
|
||||
}
|
||||
if (item.props.required && this.model === "E") {
|
||||
this.$set(this.rules, item.id, [{
|
||||
type: item.valueType === 'Array' ? 'array' : undefined,
|
||||
required: true,
|
||||
message: `请填写${item.title}`, trigger: 'blur'
|
||||
}])
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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:{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,155 @@
|
|||
<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 === 'comment' || operation.operation === 'refuse'">
|
||||
<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 :color="timeline.color" :icon="timeline.icon" size="large">
|
||||
<el-card style="font-size: 16px;font-weight: bold;">
|
||||
{{ timeline.context }}
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "OperationRender",
|
||||
props: {
|
||||
operationList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
state: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return '1'
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timeline: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
|
||||
switch (this.state) {
|
||||
case '1':
|
||||
this.timeline = {
|
||||
color: '#f78f5f',
|
||||
icon: 'el-icon-more',
|
||||
context: '审批进行中'
|
||||
}
|
||||
break
|
||||
case '2':
|
||||
this.timeline = {
|
||||
color: '#0bbd87',
|
||||
icon: 'el-icon-check',
|
||||
context: '审批通过'
|
||||
}
|
||||
break
|
||||
case '3':
|
||||
this.timeline = {
|
||||
color: '#f56c6c',
|
||||
icon: 'el-icon-close',
|
||||
context: '审核已驳回'
|
||||
}
|
||||
break
|
||||
case '4':
|
||||
this.timeline = {
|
||||
color: '#0bbd87',
|
||||
icon: 'el-icon-check',
|
||||
context: '审批通过'
|
||||
}
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
||||
for (let operation of this.operationList) {
|
||||
let state = operation.state
|
||||
let type = operation.operation
|
||||
|
||||
if (state === 'agree') {
|
||||
this.$set(operation, "icon", "el-icon-check")
|
||||
this.$set(operation, "color", "#0bbd87")
|
||||
}
|
||||
if (state === 'process') {
|
||||
this.$set(operation, "icon", "el-icon-loading")
|
||||
this.$set(operation, "color", "#f78f5f")
|
||||
}
|
||||
if (state === 'comment') {
|
||||
this.$set(operation, "icon", "el-icon-chat-dot-round")
|
||||
this.$set(operation, "color", "#0bbd87")
|
||||
}
|
||||
if (state === 'refuse' && type === 'comment') {
|
||||
this.$set(operation, "icon", "el-icon-chat-dot-round")
|
||||
this.$set(operation, "color", "#f56c6c")
|
||||
}
|
||||
if (state === 'refuse' && type === 'opinion') {
|
||||
this.$set(operation, "icon", "el-icon-close")
|
||||
this.$set(operation, "color", "#f56c6c")
|
||||
}
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-table :data="tableData"
|
||||
@row-click="clickRow"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="deploymentName"
|
||||
label="审批类型"
|
||||
width="180"/>
|
||||
<el-table-column
|
||||
prop="approveName"
|
||||
label="发起人"
|
||||
width="180"/>
|
||||
<el-table-column
|
||||
prop="submitTime"
|
||||
label="提交时间"/>
|
||||
<el-table-column
|
||||
prop="endTime"
|
||||
label="结束时间"/>
|
||||
<el-table-column
|
||||
prop="taskName"
|
||||
label="当前节点"/>
|
||||
<el-table-column
|
||||
label="处理耗时">
|
||||
<template slot-scope="scope">
|
||||
{{ getTimeConsuming(scope.row) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="state"
|
||||
label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.state === '1'">进行中</el-tag>
|
||||
<el-tag v-if="scope.row.state === '4'" type="success">审批通过</el-tag>
|
||||
<el-tag v-if="scope.row.state === '3'" type="danger">审批驳回</el-tag>
|
||||
<el-tag v-if="scope.row.state === '2'" type="info">已撤销</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="min" type="text" icon="el-icon-thumb">再次提交</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-drawer
|
||||
title="审批详情"
|
||||
size="500px"
|
||||
:visible.sync="approveOpen"
|
||||
direction="rtl">
|
||||
<div v-loading="loading">
|
||||
<div class="top">
|
||||
<div class="top_left">
|
||||
<el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
|
||||
<span style="text-align: center;color: #19191a;font-size: 14px;">{{ processInstanceData.userInfo.name }}</span>
|
||||
</div>
|
||||
<div class="top_right">
|
||||
<div style="margin-bottom: 12px">
|
||||
<span style="font-size: 15px;">{{ selectProcessInstance.deploymentName }}</span>
|
||||
<el-tag class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini" >进行中</el-tag>
|
||||
<el-tag class="state_tag" v-if="selectProcessInstance.state === '4'" size="mini" type="success">审批通过</el-tag>
|
||||
<el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回</el-tag>
|
||||
<el-tag class="state_tag" v-if="selectProcessInstance.state === '2'" size="mini" type="info">已撤销</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.processInstanceId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 15px;background:#f5f5f5;"></div>
|
||||
<form-render-view v-if="!loading" ref="taskViewForm" :form-items="processInstanceData.formItems"
|
||||
v-model="processInstanceData.formData"/>
|
||||
<div style="height: 15px;background:#f5f5f5;"></div>
|
||||
<operation-render v-if="!loading"
|
||||
:operation-list="processInstanceData.operationList"
|
||||
:state="selectProcessInstance.state"/>
|
||||
<div style="height: 15px;background:#f5f5f5;"></div>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
import FormRenderView from '@/views/common/form/FormRender'
|
||||
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
|
||||
import {getAboutInstanceList, getInitiatedInstanceInfo} from "@/api/processInstance";
|
||||
import {timeLength} from '@/utils/date'
|
||||
import OperationRender from "../common/operation/OperationRender";
|
||||
export default {
|
||||
name: "AboutInstance",
|
||||
components: {OperationRender, FormRenderView, ProcessDiagramViewer},
|
||||
data() {
|
||||
return {
|
||||
approveOpen: false,
|
||||
processDiagramViewer: false,
|
||||
selectProcessInstance: {},
|
||||
tableData: [],
|
||||
loading: false,
|
||||
processInstanceData: {
|
||||
userInfo: {},
|
||||
formData: {},
|
||||
formItems: [],
|
||||
processList: [],
|
||||
operationList: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
clickRow(row) {
|
||||
this.approveOpen = true;
|
||||
this.loadProcessInstance(row.processInstanceId)
|
||||
this.selectProcessInstance = row
|
||||
},
|
||||
loadProcessInstance(processInstanceId) {
|
||||
let that = this;
|
||||
this.init();
|
||||
getInitiatedInstanceInfo(processInstanceId).then(res => {
|
||||
let data = res.data
|
||||
that.processInstanceData = data
|
||||
that.$store.state.design = data;
|
||||
that.$store.state.runningList = data.runningList;
|
||||
that.$store.state.endList = data.endList;
|
||||
that.$store.state.noTakeList = data.noTakeList;
|
||||
this.loading = false;
|
||||
console.log(data, "获取到的结果数据")
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
init() {
|
||||
this.processInstanceData = {
|
||||
userInfo: {},
|
||||
formData: {},
|
||||
formItems: [],
|
||||
processList: [],
|
||||
operationList: [],
|
||||
};
|
||||
this.loading = true;
|
||||
this.$store.state.design = this.taskData;
|
||||
this.$store.state.runningList = [];
|
||||
this.$store.state.endList = [];
|
||||
this.$store.state.noTakeList = [];
|
||||
this.$store.state.diagramMode = "viewer";
|
||||
this.$store.state.preview = false;
|
||||
},
|
||||
|
||||
getList() {
|
||||
getAboutInstanceList().then(res => {
|
||||
let data = res.data
|
||||
this.tableData = data.rows
|
||||
})
|
||||
},
|
||||
getTimeConsuming(instance) {
|
||||
if (instance.state != 1) {
|
||||
//dateFormat(开始时间,结束时间)
|
||||
return timeLength(instance.submitTime,instance.endTime);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.state_tag{
|
||||
font-size: 12px;
|
||||
//margin-right: 15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -29,10 +29,10 @@
|
|||
prop="state"
|
||||
label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.state == 1">待处理</el-tag>
|
||||
<el-tag v-if="scope.row.state == 4" type="success">已同意</el-tag>
|
||||
<el-tag v-if="scope.row.state == 3" type="danger">已拒绝</el-tag>
|
||||
<el-tag v-if="scope.row.state == 2" type="warning">已退回</el-tag>
|
||||
<el-tag v-if="scope.row.state === '1'">待处理</el-tag>
|
||||
<el-tag v-if="scope.row.state === '4'" type="success">已同意</el-tag>
|
||||
<el-tag v-if="scope.row.state === '3'" type="danger">已拒绝</el-tag>
|
||||
<el-tag v-if="scope.row.state === '2'" type="warning">已退回</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -44,13 +44,18 @@
|
|||
<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;">{{ selectTask.initiatorName }}</span>
|
||||
<el-avatar size="large" :src="taskData.userInfo.avatar"></el-avatar>
|
||||
<span style="text-align: center;color: #19191a;font-size: 14px;">{{ taskData.userInfo.name }}</span>
|
||||
</div>
|
||||
<div class="top_right">
|
||||
<div style="margin-bottom: 12px">
|
||||
<span style="font-size: 15px;margin-right: 15px">{{ selectTask.processName }}</span>
|
||||
<el-tag style="font-size: 12px" size="mini">进行中</el-tag>
|
||||
|
||||
<el-tag class="state_tag" size="mini" v-if="selectTask.state === '1'">进行中</el-tag>
|
||||
<el-tag class="state_tag" size="mini" v-if="selectTask.state === '4'" type="success">审批通过</el-tag>
|
||||
<el-tag class="state_tag" size="mini" v-if="selectTask.state === '3'" type="danger">审批驳回</el-tag>
|
||||
<el-tag class="state_tag" size="mini" v-if="selectTask.state === '2'" type="info">已撤销</el-tag>
|
||||
<!-- <el-tag style="font-size: 12px" size="mini">进行中</el-tag>-->
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: rgb(108, 108, 108);">编号: {{ selectTask.taskId }}</span>
|
||||
|
|
@ -58,15 +63,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<div style="height: 15px;background:#f5f5f5;"></div>
|
||||
<form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
|
||||
v-model="taskData.formData"/>
|
||||
<div>
|
||||
<form-render-view v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
|
||||
v-model="taskData.formData"/>
|
||||
</div>
|
||||
<div style="height: 15px;background:#f5f5f5;"></div>
|
||||
<operation-render v-if="!loading"
|
||||
:operation-list="taskData.operationList"
|
||||
:state="selectTask.state"/>
|
||||
<div style="height: 15px;background:#f5f5f5;"></div>
|
||||
<el-footer class="footer">
|
||||
<div class="footer_comment" @click="showCommentBox">
|
||||
<i class="el-icon-chat-line-round" style="font-size: 18px;"></i>
|
||||
<span style="font-size: 12px;">评论</span>
|
||||
</div>
|
||||
<!-- <process-diagram-viewer/>-->
|
||||
<!-- <process-diagram-viewer/>-->
|
||||
<div style="margin-right: 20px;">
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link" style="color: #2a99ff;cursor: pointer">
|
||||
|
|
@ -76,7 +87,7 @@
|
|||
<el-dropdown-item icon="el-icon-s-custom" @click.native="showTransferBox()">转交</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-s-release" @click.native="showBackNodeBox()">退回</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-s-check" @click.native="showAddApprovalBox()">加签</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-refresh-left" @click.native="showRevocationBox()">撤销</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-refresh-left" @click.native="showRevocationBox()">撤销</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-button type="danger" size="mini" plain round style="margin-left: 20px"
|
||||
|
|
@ -97,13 +108,14 @@
|
|||
|
||||
<script>
|
||||
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 {addComment, completeTask, getTaskInfo, getTaskList, refuseTask, rollBackTask} from "@/api/task";
|
||||
import OperationRender from "@/views/common/operation/OperationRender";
|
||||
import FormRenderView from "../common/form/FormRenderView";
|
||||
|
||||
export default {
|
||||
name: "DisposalTask",
|
||||
components: { Comment, FormRender, ProcessDiagramViewer},
|
||||
components: {FormRenderView, OperationRender, Comment, ProcessDiagramViewer},
|
||||
data() {
|
||||
return {
|
||||
approveOpen: false,
|
||||
|
|
@ -115,9 +127,11 @@ export default {
|
|||
},
|
||||
loading: false,
|
||||
taskData: {
|
||||
userInfo: {},
|
||||
formData: {},
|
||||
formItems: [],
|
||||
processList: []
|
||||
processList: [],
|
||||
operationList: []
|
||||
},
|
||||
avatar: require("@/assets/image/avatar.png")
|
||||
};
|
||||
|
|
@ -140,9 +154,11 @@ export default {
|
|||
},
|
||||
init() {
|
||||
this.taskData = {
|
||||
userInfo: {},
|
||||
formData: {},
|
||||
formItems: [],
|
||||
processList: []
|
||||
processList: [],
|
||||
operationList: []
|
||||
};
|
||||
this.loading = true;
|
||||
this.$store.state.design = this.taskData;
|
||||
|
|
@ -153,10 +169,10 @@ export default {
|
|||
let that = this;
|
||||
this.init();
|
||||
getTaskInfo(taskId).then(res => {
|
||||
let data=res.data
|
||||
data.formItems.map(item=>{
|
||||
if(item.props.required){
|
||||
item.props.required=!item.props.required
|
||||
let data = res.data
|
||||
data.formItems.map(item => {
|
||||
if (item.props.required) {
|
||||
item.props.required = !item.props.required
|
||||
}
|
||||
return item
|
||||
})
|
||||
|
|
@ -223,7 +239,28 @@ export default {
|
|||
this.$refs.comment.show()
|
||||
},
|
||||
/**
|
||||
* 拒绝提交
|
||||
* 评论回调
|
||||
* @param data
|
||||
* @param type
|
||||
*/
|
||||
commentConfirm(data, type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
this.submitComment(data);
|
||||
break;
|
||||
case 2:
|
||||
this.submitRefuse(data);
|
||||
break;
|
||||
case 4:
|
||||
this.submitRollBack(data);
|
||||
break;
|
||||
default :
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 拒绝任务
|
||||
* @param data
|
||||
*/
|
||||
submitRefuse(data) {
|
||||
|
|
@ -238,32 +275,17 @@ export default {
|
|||
})
|
||||
},
|
||||
/**
|
||||
* 评论回调
|
||||
* @param data
|
||||
* @param type
|
||||
* 回退
|
||||
*/
|
||||
commentConfirm(data, type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
this.submitComment(data);
|
||||
break;
|
||||
case 2:
|
||||
this.submitRollBack(data);
|
||||
break;
|
||||
case 3:
|
||||
this.submitRefuse(data);
|
||||
break;
|
||||
default :
|
||||
break;
|
||||
}
|
||||
},
|
||||
submitRollBack(data){
|
||||
submitRollBack(data) {
|
||||
let params = {
|
||||
taskId: this.selectTask.taskId,
|
||||
rollBackId: data.rollBackId,
|
||||
comment: data,
|
||||
};
|
||||
rollBackTask(params).then(res=>{
|
||||
rollBackTask(params).then(res => {
|
||||
this.approveOpen = false;
|
||||
this.getList();
|
||||
this.$message.success(res.msg);
|
||||
})
|
||||
},
|
||||
|
|
@ -274,6 +296,7 @@ export default {
|
|||
submitComment(data) {
|
||||
this.$set(data, "taskId", this.selectTask.taskId);
|
||||
addComment(data).then(res => {
|
||||
this.approveOpen = false;
|
||||
this.$message.success(res.msg);
|
||||
});
|
||||
}
|
||||
|
|
@ -282,6 +305,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
.top {
|
||||
padding: 0 10px 10px 10px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<script src="../../api/processInstance.js"></script>
|
||||
<template>
|
||||
<div>
|
||||
<el-table :data="tableData"
|
||||
|
|
@ -30,10 +31,10 @@
|
|||
prop="state"
|
||||
label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.state == 1">进行中</el-tag>
|
||||
<el-tag v-if="scope.row.state == 4" type="success">审批通过</el-tag>
|
||||
<el-tag v-if="scope.row.state == 3" type="danger">审批驳回</el-tag>
|
||||
<el-tag v-if="scope.row.state == 2" type="info">已撤销</el-tag>
|
||||
<el-tag v-if="scope.row.state === '1'">进行中</el-tag>
|
||||
<el-tag v-if="scope.row.state === '4'" type="success">审批通过</el-tag>
|
||||
<el-tag v-if="scope.row.state === '3'" type="danger">审批驳回</el-tag>
|
||||
<el-tag v-if="scope.row.state === '2'" type="info">已撤销</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
|
|
@ -51,27 +52,32 @@
|
|||
<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>
|
||||
<el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
|
||||
<span style="text-align: center;color: #19191a;font-size: 14px;">{{ processInstanceData.userInfo.name }}</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" type="success" v-if="selectProcessInstance.state==4">审批通过</el-tag>
|
||||
<el-tag style="font-size: 12px;margin:0 15px;" size="mini" v-else >进行中</el-tag>
|
||||
<el-tag class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini" >进行中</el-tag>
|
||||
<el-tag class="state_tag" v-if="selectProcessInstance.state === '4'" size="mini" type="success">审批通过</el-tag>
|
||||
<el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回</el-tag>
|
||||
<el-tag class="state_tag" v-if="selectProcessInstance.state === '2'" size="mini" type="info">已撤销</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>
|
||||
<span style="color: rgb(108, 108, 108);">编号: {{ selectProcessInstance.processInstanceId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 15px;background:#f5f5f5;"></div>
|
||||
<form-render-view ref="taskViewForm" :form-items="processInstanceData.formItems"
|
||||
<form-render-view v-if="!loading" ref="taskViewForm" :form-items="processInstanceData.formItems"
|
||||
v-model="processInstanceData.formData"/>
|
||||
<!-- <process-diagram-viewer v-if="!loading"/>-->
|
||||
<div style="height: 15px;background:#f5f5f5;"></div>
|
||||
<operation-render v-if="!loading"
|
||||
:operation-list="processInstanceData.operationList"
|
||||
:state="selectProcessInstance.state"/>
|
||||
<div style="height: 15px;background:#f5f5f5;"></div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
|
@ -84,14 +90,14 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Comment from "@/components/common/Comment";
|
||||
import FormRenderView from '@/views/common/form/FormRender'
|
||||
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
|
||||
import {getInitiatedInstanceList, getInitiatedInstanceInfo} from "@/api/processInstance";
|
||||
import {timeLength} from '@/utils/date'
|
||||
import OperationRender from "../common/operation/OperationRender";
|
||||
export default {
|
||||
name: "InitiatedInstance",
|
||||
components: {Comment, FormRenderView, ProcessDiagramViewer},
|
||||
components: {OperationRender, FormRenderView, ProcessDiagramViewer},
|
||||
data() {
|
||||
return {
|
||||
approveOpen: false,
|
||||
|
|
@ -100,11 +106,12 @@ export default {
|
|||
tableData: [],
|
||||
loading: false,
|
||||
processInstanceData: {
|
||||
userInfo: {},
|
||||
formData: {},
|
||||
formItems: [],
|
||||
processList: [],
|
||||
operationList: [],
|
||||
},
|
||||
avatar: require("@/assets/image/avatar.png")
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -134,9 +141,11 @@ export default {
|
|||
|
||||
init() {
|
||||
this.processInstanceData = {
|
||||
userInfo: {},
|
||||
formData: {},
|
||||
formItems: [],
|
||||
processList: []
|
||||
processList: [],
|
||||
operationList: [],
|
||||
};
|
||||
this.loading = true;
|
||||
this.$store.state.design = this.taskData;
|
||||
|
|
@ -185,4 +194,9 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.state_tag{
|
||||
font-size: 12px;
|
||||
//margin-right: 15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,13 +41,13 @@
|
|||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="待我处理(3)" name="disposalTask">
|
||||
<disposal-task v-if="active == 'disposalTask'" ref="disposalTask"/>
|
||||
<disposal-task v-if="active === 'disposalTask'" ref="disposalTask"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="我发起的" name="initiated">
|
||||
<initiated-instance v-if="active == 'initiated'" ref="InitiatedInstance"/>
|
||||
<initiated-instance v-if="active === 'initiated'" ref="InitiatedInstance"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="关于我的" name="aboutMe">
|
||||
<div class="no-data">暂无数据 😀</div>
|
||||
<about-instance v-if="active === 'aboutMe'" ref="AboutInstance"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
|
|
@ -67,10 +67,11 @@ import InitiatedInstance from "./InitiatedInstance";
|
|||
import DisposalTask from "./DisposalTask";
|
||||
import {getProcessDefinitionList} from "@/api/processDefinition";
|
||||
import {startProcessInstance} from "@/api/processInstance";
|
||||
import AboutInstance from "./AboutInstance";
|
||||
|
||||
export default {
|
||||
name: "workSpace",
|
||||
components: {InitiateProcess,DisposalTask,InitiatedInstance},
|
||||
components: {AboutInstance, InitiateProcess,DisposalTask,InitiatedInstance},
|
||||
data() {
|
||||
return {
|
||||
active: 'disposalTask',
|
||||
|
|
|
|||
Loading…
Reference in New Issue