update:接入cid预览流程
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { get } from '@/api/request';
|
||||
import { get, post } from '@/api/request';
|
||||
|
||||
const env = import.meta.env;
|
||||
const PREFIX = env.VITE_API_PREFIX_SYSTEM;
|
||||
@@ -17,3 +17,8 @@ export const systemQueryApproveFlowStatusApi = (params: any) => {
|
||||
export const systemQueryApproveInstanceApi = (params: any) => {
|
||||
return get(`${PREFIX}systemApprove/queryApproveInstance`, params);
|
||||
};
|
||||
|
||||
// 添加模块评审流程映射
|
||||
export const systemQueryAddApproveFlowMapApi = (params: any) => {
|
||||
return post(`${PREFIX}systemApprove/addApproveFlowMap`, params);
|
||||
};
|
||||
|
||||
@@ -7,42 +7,8 @@
|
||||
:close-on-click-modal="false"
|
||||
@close="closeFun"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="step-list">
|
||||
<div
|
||||
v-for="(item, index) in stepList"
|
||||
:key="index"
|
||||
class="step-item"
|
||||
:class="{ active: index <= currentIndex }"
|
||||
>
|
||||
<div class="left">
|
||||
<div class="pic">
|
||||
<el-icon :size="18"><CircleCheck class="icon" /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item">
|
||||
<el-tag v-if="item.nodeStatus === 2" type="primary">
|
||||
{{ NODE_STATUS[item.nodeType][item.nodeStatus] }}
|
||||
</el-tag>
|
||||
<el-tag v-if="item.nodeStatus === 1" type="warning">
|
||||
{{ NODE_STATUS[item.nodeType][item.nodeStatus] }}
|
||||
</el-tag>
|
||||
<el-tag v-if="item.nodeStatus === 0" type="info">
|
||||
{{ NODE_STATUS[item.nodeType][item.nodeStatus] }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="item">{{ item.nodeName }}:{{ item.nodeUserName }}</div>
|
||||
<div v-if="item.showTime" class="item">操作时间:{{ item.showTime }}</div>
|
||||
<div v-if="item.approveDesc" class="des">
|
||||
<div class="tip">审核人添加了评论:</div>
|
||||
<div class="text">
|
||||
{{ item.approveDesc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="modelValue" class="content">
|
||||
<iframe v-if="cidFlowId && cidTaskId && cidProcessInstanceId" class="iframe" :src="url" />
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
@@ -50,36 +16,13 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { CircleCheck } from '@element-plus/icons-vue';
|
||||
import { systemQueryApproveFlowStatusApi } from '@/api/system/systemApprove';
|
||||
import {
|
||||
systemQueryApproveInstanceApi,
|
||||
systemQueryNewApproveFlowStatusApi,
|
||||
systemQueryGetTaskIdByNodeIdApi,
|
||||
} from '@/api/system/systemApprove';
|
||||
|
||||
// TODO 接入字典
|
||||
const NODE_STATUS: any = {
|
||||
// 根节点
|
||||
'0': {
|
||||
'0': '未提交',
|
||||
'1': '提交中',
|
||||
'2': '已提交',
|
||||
},
|
||||
// 审批节点
|
||||
'1': {
|
||||
'0': '未查阅',
|
||||
'1': '审批中',
|
||||
'2': '已审批',
|
||||
},
|
||||
// 抄送节点
|
||||
'2': {
|
||||
'0': '未查阅',
|
||||
'1': '审批中',
|
||||
'2': '已审批',
|
||||
},
|
||||
// 结束节点
|
||||
'-1': {
|
||||
'0': '未查阅',
|
||||
'1': '审批中',
|
||||
'2': '已审批',
|
||||
},
|
||||
};
|
||||
const env = import.meta.env;
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean;
|
||||
@@ -91,38 +34,67 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
flowId: '',
|
||||
});
|
||||
|
||||
const url = ref(`${env.VITE_API_CID_URL}/spdmApproval`);
|
||||
const cidFlowId = ref('');
|
||||
const cidTaskId = ref('');
|
||||
const cidProcessInstanceId = ref('');
|
||||
|
||||
// flowId.value = 'P20251128142047739HM7MI';
|
||||
// taskId.value = '7c74e959-f692-11f0-8da4-36c4b20f8769';
|
||||
// processInstanceId.value = '7c6754b9-f692-11f0-8da4-36c4b20f8769';
|
||||
// url.value = `${env.VITE_API_CID_URL}/spdmApproval?flowId=${flowId.value}&taskId=${taskId.value}&processInstanceId=${processInstanceId.value}`;
|
||||
// flowId.value = 'P20260121162933119N9UNT';
|
||||
// taskId.value = '0d81f3b5-f6b1-11f0-8da4-36c4b20f8769';
|
||||
// processInstanceId.value = '0d712bbc-f6b1-11f0-8da4-36c4b20f8769';
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val: boolean) => {
|
||||
visible.value = val;
|
||||
if (val) {
|
||||
getDetailDataFun();
|
||||
} else {
|
||||
currentIndex.value = 0;
|
||||
stepList.value = [];
|
||||
getApproveDataFun();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const stepList = ref<any>([]);
|
||||
|
||||
const visible = ref(false);
|
||||
const currentIndex = ref<any>(0);
|
||||
|
||||
const getDetailDataFun = () => {
|
||||
const getApproveDataFun = () => {
|
||||
const params = {
|
||||
flowId: props.flowId,
|
||||
};
|
||||
systemQueryApproveFlowStatusApi(params).then((res: any) => {
|
||||
systemQueryApproveInstanceApi(params).then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
res.data.forEach((item: any, index: number) => {
|
||||
if (item.nodeStatus > 0) {
|
||||
currentIndex.value = index;
|
||||
}
|
||||
});
|
||||
stepList.value = res.data;
|
||||
cidFlowId.value = res.data.templateId;
|
||||
cidProcessInstanceId.value = props.flowId;
|
||||
getNodeId();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getNodeId = () => {
|
||||
const params = {
|
||||
flowId: props.flowId,
|
||||
};
|
||||
systemQueryNewApproveFlowStatusApi(params).then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
const nodeId = res.data.find((item: any) => item.type === 1)?.id || '';
|
||||
getTaskIdFun(nodeId);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getTaskIdFun = (nodeId: string) => {
|
||||
const params = {
|
||||
nodeId,
|
||||
processInstanceId: props.flowId,
|
||||
};
|
||||
systemQueryGetTaskIdByNodeIdApi(params).then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
cidTaskId.value = res.data;
|
||||
url.value = `${env.VITE_API_CID_URL}/spdmApproval?flowId=${cidFlowId.value}&taskId=${cidTaskId.value}&processInstanceId=${cidProcessInstanceId.value}`;
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -137,80 +109,9 @@ const closeFun = () => {
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.step-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.step-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
&:last-child {
|
||||
::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.left {
|
||||
&::after {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
.pic {
|
||||
.icon {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.left {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
bottom: -10px;
|
||||
margin-left: -1px;
|
||||
width: 2px;
|
||||
background-color: var(--el-text-color-disabled);
|
||||
}
|
||||
.pic {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--el-bg-color);
|
||||
.icon {
|
||||
color: var(--el-text-color-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
padding: 0 10px 10px;
|
||||
.item {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.des {
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
background-color: var(--el-bg-color-page);
|
||||
.tip {
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.text {
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
217
src/components/common/approvalProcess/index_back.vue
Normal file
217
src/components/common/approvalProcess/index_back.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="comp-content">
|
||||
<el-drawer
|
||||
v-model="visible"
|
||||
:size="400"
|
||||
title="审核状态"
|
||||
:close-on-click-modal="false"
|
||||
@close="closeFun"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="step-list">
|
||||
<div
|
||||
v-for="(item, index) in stepList"
|
||||
:key="index"
|
||||
class="step-item"
|
||||
:class="{ active: index <= currentIndex }"
|
||||
>
|
||||
<div class="left">
|
||||
<div class="pic">
|
||||
<el-icon :size="18"><CircleCheck class="icon" /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item">
|
||||
<el-tag v-if="item.nodeStatus === 2" type="primary">
|
||||
{{ NODE_STATUS[item.nodeType][item.nodeStatus] }}
|
||||
</el-tag>
|
||||
<el-tag v-if="item.nodeStatus === 1" type="warning">
|
||||
{{ NODE_STATUS[item.nodeType][item.nodeStatus] }}
|
||||
</el-tag>
|
||||
<el-tag v-if="item.nodeStatus === 0" type="info">
|
||||
{{ NODE_STATUS[item.nodeType][item.nodeStatus] }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="item">{{ item.nodeName }}:{{ item.nodeUserName }}</div>
|
||||
<div v-if="item.showTime" class="item">操作时间:{{ item.showTime }}</div>
|
||||
<div v-if="item.approveDesc" class="des">
|
||||
<div class="tip">审核人添加了评论:</div>
|
||||
<div class="text">
|
||||
{{ item.approveDesc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { CircleCheck } from '@element-plus/icons-vue';
|
||||
import { systemQueryApproveFlowStatusApi } from '@/api/system/systemApprove';
|
||||
|
||||
// TODO 接入字典
|
||||
const NODE_STATUS: any = {
|
||||
// 根节点
|
||||
'0': {
|
||||
'0': '未提交',
|
||||
'1': '提交中',
|
||||
'2': '已提交',
|
||||
},
|
||||
// 审批节点
|
||||
'1': {
|
||||
'0': '未查阅',
|
||||
'1': '审批中',
|
||||
'2': '已审批',
|
||||
},
|
||||
// 抄送节点
|
||||
'2': {
|
||||
'0': '未查阅',
|
||||
'1': '审批中',
|
||||
'2': '已审批',
|
||||
},
|
||||
// 结束节点
|
||||
'-1': {
|
||||
'0': '未查阅',
|
||||
'1': '审批中',
|
||||
'2': '已审批',
|
||||
},
|
||||
};
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean;
|
||||
flowId: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: false,
|
||||
flowId: '',
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val: boolean) => {
|
||||
visible.value = val;
|
||||
if (val) {
|
||||
getDetailDataFun();
|
||||
} else {
|
||||
currentIndex.value = 0;
|
||||
stepList.value = [];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const stepList = ref<any>([]);
|
||||
|
||||
const visible = ref(false);
|
||||
const currentIndex = ref<any>(0);
|
||||
|
||||
const getDetailDataFun = () => {
|
||||
const params = {
|
||||
flowId: props.flowId,
|
||||
};
|
||||
systemQueryApproveFlowStatusApi(params).then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
res.data.forEach((item: any, index: number) => {
|
||||
if (item.nodeStatus > 0) {
|
||||
currentIndex.value = index;
|
||||
}
|
||||
});
|
||||
stepList.value = res.data;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const closeFun = () => {
|
||||
emit('update:modelValue', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.comp-content {
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.step-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.step-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
&:last-child {
|
||||
::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.left {
|
||||
&::after {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
.pic {
|
||||
.icon {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.left {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
bottom: -10px;
|
||||
margin-left: -1px;
|
||||
width: 2px;
|
||||
background-color: var(--el-text-color-disabled);
|
||||
}
|
||||
.pic {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--el-bg-color);
|
||||
.icon {
|
||||
color: var(--el-text-color-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
padding: 0 10px 10px;
|
||||
.item {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.des {
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
background-color: var(--el-bg-color-page);
|
||||
.tip {
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.text {
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<div class="comp-content">
|
||||
<el-drawer
|
||||
v-model="visible"
|
||||
:size="400"
|
||||
title="审核状态"
|
||||
:close-on-click-modal="false"
|
||||
@close="closeFun"
|
||||
>
|
||||
<div v-if="modelValue" class="content">
|
||||
<iframe v-if="flowId && taskId && processInstanceId" class="iframe" :src="url" />
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const env = import.meta.env;
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean;
|
||||
// flowId: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: false,
|
||||
// flowId: '',
|
||||
});
|
||||
|
||||
const url = ref(`${env.VITE_API_CID_URL}/spdmApproval`);
|
||||
const flowId = ref('');
|
||||
const taskId = ref('');
|
||||
const processInstanceId = ref('');
|
||||
|
||||
// flowId.value = 'P20251128142047739HM7MI';
|
||||
// taskId.value = '7c74e959-f692-11f0-8da4-36c4b20f8769';
|
||||
// processInstanceId.value = '7c6754b9-f692-11f0-8da4-36c4b20f8769';
|
||||
// url.value = `${env.VITE_API_CID_URL}/spdmApproval?flowId=${flowId.value}&taskId=${taskId.value}&processInstanceId=${processInstanceId.value}`;
|
||||
flowId.value = 'P20260121162933119N9UNT';
|
||||
taskId.value = '0d81f3b5-f6b1-11f0-8da4-36c4b20f8769';
|
||||
processInstanceId.value = '0d712bbc-f6b1-11f0-8da4-36c4b20f8769';
|
||||
url.value = `${env.VITE_API_CID_URL}/spdmApproval?flowId=${flowId.value}&taskId=${taskId.value}&processInstanceId=${processInstanceId.value}`;
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val: boolean) => {
|
||||
visible.value = val;
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
const closeFun = () => {
|
||||
emit('update:modelValue', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.comp-content {
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -61,7 +61,7 @@ const getlistDataFun = () => {
|
||||
listData.value = build;
|
||||
if (build[0]) {
|
||||
choseData.value = build[0].value;
|
||||
emit('update:modelValue', choseData.value);
|
||||
changeFun();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
<template #right>
|
||||
<div class="right-box">
|
||||
<DepartMent v-if="currentActive === 'department'"></DepartMent>
|
||||
<Review v-if="currentActive === 'review'" />
|
||||
</div>
|
||||
</template>
|
||||
</DragSplit>
|
||||
@@ -29,6 +30,7 @@
|
||||
<script setup lang="ts">
|
||||
import DragSplit from '@/components/common/dragSplit/index.vue';
|
||||
import DepartMent from './components/departMent.vue';
|
||||
import Review from './components/review.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const configList = [
|
||||
@@ -36,6 +38,10 @@ const configList = [
|
||||
label: '部门配置',
|
||||
value: 'department',
|
||||
},
|
||||
{
|
||||
label: '审核模板配置',
|
||||
value: 'review',
|
||||
},
|
||||
{
|
||||
label: '其他配置',
|
||||
value: 'other',
|
||||
|
||||
Reference in New Issue
Block a user