update 审批记录v2改为v3
This commit is contained in:
songgaoshuai
parent
eaf911e868
commit
dbf2195468
@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" draggable title="审批记录" :width="width" :height="height" append-to-body :close-on-click-modal="false">
|
||||
<el-dialog v-model="visible" draggable title="审批记录" :width="props.width" :height="props.height" append-to-body :close-on-click-modal="false">
|
||||
<div v-loading="loading">
|
||||
<div style="width: 100%;height: 300px;overflow: auto;position: relative;">
|
||||
<div
|
||||
v-for="(graphic, index) in graphicInfoVos"
|
||||
:key="index"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${graphic.x}px`,
|
||||
top: `${graphic.y}px`,
|
||||
width: `${graphic.width}px`,
|
||||
height: `${graphic.height}px`,
|
||||
cursor: 'pointer',
|
||||
zIndex: 99
|
||||
}"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${graphic.x}px`,
|
||||
top: `${graphic.y}px`,
|
||||
width: `${graphic.width}px`,
|
||||
height: `${graphic.height}px`,
|
||||
cursor: 'pointer',
|
||||
zIndex: 99
|
||||
}"
|
||||
@mouseover="handleMouseOver(graphic)"
|
||||
@mouseleave="handleMouseLeave()"
|
||||
></div>
|
||||
@ -21,14 +21,14 @@
|
||||
<div
|
||||
v-show="popupVisible"
|
||||
class="triangle"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${graphicX}px`,
|
||||
top: `${graphicY}px`,
|
||||
backgroundColor: '#fff',
|
||||
padding: '10px',
|
||||
zIndex: 100
|
||||
}"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${graphicX}px`,
|
||||
top: `${graphicY}px`,
|
||||
backgroundColor: '#fff',
|
||||
padding: '10px',
|
||||
zIndex: 100
|
||||
}"
|
||||
>
|
||||
<p>审批人员: {{ nodeInfo.nickName }}</p>
|
||||
<p>节点状态：{{ nodeInfo.status }}</p>
|
||||
@ -46,7 +46,7 @@
|
||||
<el-table-column prop="nickName" label="办理人" sortable align="center"></el-table-column>
|
||||
<el-table-column label="状态" sortable align="center">
|
||||
<template #default="scope">
|
||||
<el-tag type="success">{{scope.row.statusName}}</el-tag>
|
||||
<el-tag type="success">{{ scope.row.statusName }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="comment" label="审批意见" sortable align="center"></el-table-column>
|
||||
@ -59,85 +59,87 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
<script lang="ts" setup>
|
||||
import { getHistoryProcessImage, getHistoryRecord } from '@/api/workflow/processInstance';
|
||||
export default {
|
||||
props: {
|
||||
import { ref } from 'vue';
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: String,
|
||||
default: '70%'
|
||||
type: String,
|
||||
default: '70%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
type: String,
|
||||
default: '100%'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
src: '',
|
||||
visible: false,
|
||||
historyList: [],
|
||||
deleteReason: '',
|
||||
graphicInfoVos: [],
|
||||
nodeListInfo: [],
|
||||
popupVisible: false,
|
||||
nodeInfo: {},
|
||||
graphicX: '',
|
||||
graphicY: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init(processInstanceId) {
|
||||
this.visible = true;
|
||||
this.loading = true;
|
||||
this.historyList = [];
|
||||
this.graphicInfoVos = [];
|
||||
this.src = getHistoryProcessImage(processInstanceId);
|
||||
getHistoryRecord(processInstanceId).then((response) => {
|
||||
this.historyList = response.data.historyRecordList;
|
||||
this.graphicInfoVos = response.data.graphicInfoVos;
|
||||
this.nodeListInfo = response.data.nodeListInfo;
|
||||
this.deleteReason = response.data.deleteReason;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleMouseOver(graphic) {
|
||||
this.graphicX = graphic.x + graphic.width + 10;
|
||||
this.graphicY = graphic.y - graphic.height + -10;
|
||||
this.nodeInfo = {};
|
||||
if (this.nodeListInfo && this.nodeListInfo.length > 0) {
|
||||
let info = this.nodeListInfo.find((e) => e.taskDefinitionKey == graphic.nodeId);
|
||||
});
|
||||
const loading = ref(false);
|
||||
const src = ref('');
|
||||
const visible = ref(false);
|
||||
const historyList = ref<Array<any>>([]);
|
||||
const deleteReason = ref<string>('');
|
||||
const graphicInfoVos = ref<Array<any>>([]);
|
||||
const nodeListInfo = ref<Array<any>>([]);
|
||||
const popupVisible = ref(false);
|
||||
const nodeInfo = ref<any>({});
|
||||
const graphicX = ref<number | string>(0);
|
||||
const graphicY = ref<number | string>(0);
|
||||
//初始化查询审批记录
|
||||
const init = async (processInstanceId: string) => {
|
||||
visible.value = true;
|
||||
loading.value = true;
|
||||
historyList.value = [];
|
||||
graphicInfoVos.value = [];
|
||||
src.value = getHistoryProcessImage(processInstanceId);
|
||||
getHistoryRecord(processInstanceId).then((response) => {
|
||||
historyList.value = response.data.historyRecordList;
|
||||
graphicInfoVos.value = response.data.graphicInfoVos;
|
||||
nodeListInfo.value = response.data.nodeListInfo;
|
||||
deleteReason.value = response.data.deleteReason;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
//悬浮事件
|
||||
const handleMouseOver = async (graphic: any) => {
|
||||
graphicX.value = graphic.x + graphic.width + 10;
|
||||
graphicY.value = graphic.y - graphic.height + -10;
|
||||
nodeInfo.value = {};
|
||||
if (nodeListInfo.value && nodeListInfo.value.length > 0) {
|
||||
let info = nodeListInfo.value.find((e: any) => e.taskDefinitionKey == graphic.nodeId);
|
||||
if (info) {
|
||||
this.nodeInfo = {
|
||||
nickName: info.nickName,
|
||||
status: info.status,
|
||||
startTime: info.startTime,
|
||||
endTime: info.endTime,
|
||||
runDuration: info.runDuration
|
||||
};
|
||||
this.popupVisible = true;
|
||||
nodeInfo.value = {
|
||||
nickName: info.nickName,
|
||||
status: info.status,
|
||||
startTime: info.startTime,
|
||||
endTime: info.endTime,
|
||||
runDuration: info.runDuration
|
||||
};
|
||||
popupVisible.value = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
handleMouseLeave() {
|
||||
this.popupVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
//关闭
|
||||
const handleMouseLeave = async () => {
|
||||
popupVisible.value = false;
|
||||
}
|
||||
/**
|
||||
* 对外暴露子组建方法
|
||||
*/
|
||||
defineExpose({
|
||||
init
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.triangle {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.triangle::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 8em;
|
||||
right: 215px;
|
||||
border: 15px solid;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 8em;
|
||||
right: 215px;
|
||||
border: 15px solid;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -32,9 +32,9 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
//遮罩层
|
||||
const loading = ref(true);
|
||||
//流程状态
|
||||
const businessStatus = ref('');
|
||||
const businessStatus = ref<string>('');
|
||||
//任务id
|
||||
const taskId = ref('');
|
||||
const taskId = ref<string>('');
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
@ -93,4 +93,3 @@ defineExpose({
|
||||
openDialog
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
</el-card>
|
||||
<!-- 添加或修改流程分类对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="80px" v-loading="loading">
|
||||
<el-form-item label="父级分类" prop="parentId">
|
||||
<el-tree-select
|
||||
v-model="form.parentId"
|
||||
@ -75,7 +75,7 @@
|
||||
<el-input v-model="form.categoryCode" placeholder="请输入分类编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sortNum">
|
||||
<el-input-number v-model="form.sortNum" placeholder="请输入排序" controls-position="right" :min="0"/>
|
||||
<el-input-number v-model="form.sortNum" placeholder="请输入排序" controls-position="right" :min="0" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user