hookehuyr

流程启用下,相关操作调整

Showing 1 changed file with 37 additions and 13 deletions
......@@ -43,6 +43,7 @@
</vue-flow-edit-menu>
</vue-flow-edit-menu-group> -->
<vue-flow-edit-menu
v-if="state.current_enable_version !== state.select_flow_version"
v-for="(value, key) in state.controlList"
:key="key"
:model="{ control: key, text: value.text, desc: value.desc }"
......@@ -296,13 +297,13 @@
</template>
<!-- 工具栏 -->
<template v-slot:toolbar>
<el-tooltip content="复制节点">
<el-tooltip v-if="state.current_enable_version !== state.select_flow_version" content="复制节点">
<div :class="['vue-flow-editor-toolbar-item', state.detailModel ? '' : 'vue-flow-editor-toolbar-item-disabled']" @click="copyData">
<i class="el-icon-coin" style=" margin-top: 4px;" />
<span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">复制</span>
</div>
</el-tooltip>
<el-tooltip content="节点排序">
<el-tooltip v-if="state.current_enable_version !== state.select_flow_version" content="节点排序">
<div class="vue-flow-editor-toolbar-item" @click="sortData">
<i class="el-icon-sort" style=" margin-top: 4px;" />
<span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">排序</span>
......@@ -411,7 +412,11 @@
</template>
</el-dialog>
</div>
<div class="help-tip" @click="showHelp">
<!-- TODO: 提示功能 -->
<div v-if="state.current_enable_version === state.select_flow_version" class="add-tip">
<i class="el-icon-warning icon"></i>&nbsp;<span style="font-size: 13px;">流程已启用,如需增删节点和连线,请 <span class="add" @click="addFlowVersion">添加新版本</span></span>
</div>
<div v-else class="help-tip" @click="showHelp">
<i class="el-icon-warning"></i>&nbsp;<span style="font-size: 13px;">查看新手引导</span>
</div>
<!-- TODO:需要完善操作动图 -->
......@@ -537,7 +542,7 @@
</template>
<script lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
import { ref, reactive, onMounted, watch, nextTick, computed } from 'vue'
import { AppData } from './data.js'
import { staticPath } from './utils'
import { ElNotification, ElMessage, ElMessageBox, ElLoading } from 'element-plus'
......@@ -800,7 +805,6 @@ export default {
const getFlowData = async (flow_id: any) => {
flowData.value = null;
rawFlowData.value = null;
state.reloadLoading = true; // 打开loading
const { code, data } = await flowNodesAPI({ flow_id });
if (code) {
......@@ -813,14 +817,11 @@ export default {
// 没有流程图数据
if (!nodes.length && !edges.length) {
flowData.value = AppData; // 设置默认的数据
rawFlowData.value = AppData; // 设置默认的数据
} else {
flowData.value = { nodes, edges }; // 获取已存在的数据
rawFlowData.value = _.cloneDeep({ nodes, edges }); // 获取已存在的数据
// 内部刷新graph数据
nextTick(() => {
editor.editorState.graph.read(flowData.value)
editor1?.editorState.graph?.read(rawFlowData.value)
});
}
......@@ -1893,6 +1894,12 @@ export default {
let start_edge_count = edges.filter((edge: { source: string }) => edge.source === 'start-node'); // 连接到开始节点连接线的数量
let end_edge_count = edges.filter((edge: { target: string }) => edge.target === 'end-node'); // 连接到结束节点连接线的数量
// 流程启用中不允许节点操作
if (state.current_enable_version === state.select_flow_version) {
ElNotification.error('流程启用中,不可以删除')
return Promise.reject('reject')
}
// 不可以删除开始与结束连接线
let node_id = model.id;
for (let index = 0; index < edges.length; index++) {
......@@ -2268,9 +2275,13 @@ export default {
* @return {Array} - The filtered array of buttons
*/
function toolbarButtonHandler(buttons: any[]): Array<any> {
// TAG:测试隐藏缩略图和网格
let map = buttons.filter((item) => item.key !== 'miniMapSwitcher' && item.key !=='gridSwitcher')
return map
let disabledKeys = ['miniMapSwitcher', 'gridSwitcher'];
// 如果在启用版本中,隐藏 节点操作功能 和 缩略图和网格
if (state.current_enable_version === state.select_flow_version) {
disabledKeys = ['delete', 'miniMapSwitcher', 'gridSwitcher', 'undo', 'redo'];
}
let map = buttons.filter((item) => !disabledKeys.includes(item.key));
return map;
}
/**
......@@ -2333,6 +2344,7 @@ export default {
}
const openPreview = () => {
editor.closeModel();
// 打开弹框
state.dialogPreviewVisible = true;
// 获取最新数据
......@@ -2359,8 +2371,6 @@ export default {
*/
const onClickNodePreview = async (e: myEvent) => {
// TODO: 有一个预览状态可以看到节点相应的表单内容
console.warn('点击节点,如果预览状态,可以预览表单内容');
const model = G6.Util.clone(e.item.get('model')); // 节点的基本属性
console.log("🚀 ~ file: App.vue:2338 ~ onClickNodePreview ~ model.id:", model.id);
model.style = model.style || {}
......@@ -2648,6 +2658,20 @@ body {
cursor: pointer;
}
}
.add-tip {
position: absolute;
z-index: 9;
top: 70px;
.icon {
color: #f0a800 !important;
}
.add {
color: #009688 !important;
&:hover {
cursor: pointer;
}
}
}
.el-tabs__item.is-active,
.el-radio-button__inner:hover {
......