Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
670b779d 1 parent 962c708a

新增流程排序保存功能

Inline Side-by-side
Showing 5 changed files with 165 additions and 2 deletions
......@@ -302,6 +302,12 @@
<span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">复制</span>
</div>
</el-tooltip>
<el-tooltip 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>
</div>
</el-tooltip>
<!-- <el-tooltip content="保存流程图数据">
<div class="vue-flow-editor-toolbar-item" @click="saveData">
<i class="el-icon-coin" style=" margin-top: 4px;" />
......@@ -440,6 +446,34 @@
@close="onCloseUserView"
@confirm="onConfirmUserView"
/>
<el-dialog v-model="state.dialogSortVisible" title="节点排序" width="30%" center>
<draggable
v-model="state.sortNodes"
tag="transition-group"
item-key="id"
style="overflow: scroll;"
:component-data="{name:'fade'}"
>
<template #item="{ element, index }">
<div :class="['sort-item', state.sortNodes.length - 1 !== index ? 'sort-item-border' : '' ]">
<div>
<i class="el-icon-d-caret"></i>
&nbsp;
{{ element.name }}
&nbsp;
<span class="sort-item-index">索引：{{element.idx}}</span>&nbsp;
</div>
</div>
</template>
</draggable>
<template #footer>
<span class="dialog-footer">
<el-button @click="state.dialogSortVisible = false">取消</el-button>
<el-button color="#009688" @click="confirmSort">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts">
......@@ -459,7 +493,8 @@ import type { FormInstance, FormRules } from 'element-plus'
import qs from 'qs'
import { after } from 'lodash-es';
// import { VueSpinner } from 'vue3-spinners';
import { flowVersionAPI, saveFlowAPI, flowNodesAPI, enableFlowVersionAPI, flowNodePropertyAPI, checkAllFlowNodePropertyAPI, saveAllFlowNodePropertyAPI } from "./api";
import { flowVersionAPI, saveFlowAPI, flowNodesAPI, enableFlowVersionAPI, flowNodePropertyAPI, checkAllFlowNodePropertyAPI, saveAllFlowNodePropertyAPI, saveNodeSortAPI } from "./api";
import draggable from 'vuedraggable'
const G6 = (window as any).G6.default as any
......@@ -499,6 +534,7 @@ export default {
Calendar,
Search,
SelectUserView,
draggable,
// VueSpinner,
},
setup(props, context) {
......@@ -565,7 +601,9 @@ export default {
},
},
search_auth_value: '',
dialogSortVisible: false,
dialogUserFormVisible: false,
sortNodes: [],
dialogUserTags: [], // 同步到用户列表的数据
activeName: 'node',
attr_radio: '基础属性',
......@@ -1927,6 +1965,49 @@ export default {
const model = e.item.get('model')
}
/**
* 排序节点
*
*/
const sortData = () => {
state.sortNodes = [];
let { nodes } = editor.editorState.graph.save();
// console.warn(nodes);
// let data = [
// '1f6b88b0-b864-47bc-8903-c72e5014ac75',
// '5e22f525-1d02-4456-8d3e-0d088f99f9d6',
// 'end-node',
// 'start-node',
// ];
// let node_data = _.map(data, (n) => { return { id: n } });
// let node_arr = _.intersectionBy(node_data, nodes, 'id');
// let new_node_arr = _.differenceBy(node_data, nodes, 'id');
// console.warn(node_arr);
// console.warn(new_node_arr);
if (nodes.length > 0) {
nodes.forEach((element, idx) => {
state.sortNodes.push({
idx,
id: element.id,
name: element.text,
})
});
}
state.dialogSortVisible = true;
}
const confirmSort = async () => {
state.dialogSortVisible = false;
let arr = _.map(state.sortNodes, 'id');
const { code, data } = await saveNodeSortAPI({ id: getFlowId(), data: JSON.stringify(arr) })
if (code) {
ElNotification.success('保存成功')
}
}
const copyData = () => { // 复制节点回调
if (state.detailModel.control !== 'start' && state.detailModel.control !== 'end') {
let copy_node = _.cloneDeep(state.node_tree[state.detailModel.id]); // 复制节点的属性
......@@ -2129,6 +2210,8 @@ export default {
onCloseUserView,
onConfirmUserView,
sortData,
confirmSort,
copyData,
saveData,
startFlow,
......@@ -2391,4 +2474,16 @@ body {
.el-tabs__item:hover {
color: #009688 !important;
}
.sort-item {
padding: 1rem; border: 1px solid #ebeef5; cursor: move;
background-color: #fff;
.sort-item-index {
background-color: #f5f6f8; padding: 2px 5px; border: 1px solid #d7d9dc; border-radius: 3px; color: #141e31; font-size: 12px; font-weight: 400; line-height: 22px; text-align: center;
}
}
.sort-item-border {
border-bottom: 0 !important;
}
</style>
......
/*
* @Date: 2023-11-30 10:34:01
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-08 13:11:15
* @LastEditTime: 2023-12-14 15:43:53
* @FilePath: /vue-flow-editor/doc/api/index.js
* @Description: 文件描述
*/
......@@ -16,6 +16,7 @@ const Api = {
SAVE_FLOW_NODE_PROPERTY: '/admin/?a=save_node_property',
SAVE_ALL_FLOW_NODE_PROPERTY: '/admin/?a=save_all_node_property',
CHECK_ALL_FLOW_NODE_PROPERTY: '/admin/?a=check_all_node_property',
SAVE_NODE_SORT: '/admin/?a=save_node_sort',
}
/**
......@@ -81,3 +82,10 @@ export const saveAllFlowNodePropertyAPI = (params) => fn(fetch.stringifyPost(Api
* @returns
*/
export const checkAllFlowNodePropertyAPI = (params) => fn(fetch.get(Api.CHECK_ALL_FLOW_NODE_PROPERTY, params));
/**
* @description: 保存节点排序
* @param {*} id 流程 ID
* @returns
*/
export const saveNodeSortAPI = (params) => fn(fetch.stringifyPost(Api.SAVE_NODE_SORT, params));
......
......@@ -38,6 +38,7 @@
"vue-router": "^4.0.0-0",
"vue-template-compiler": "^2.6.14",
"vue3-spinners": "^1.2.2",
"vuedraggable": "^4.1.0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
......
#!/usr/bin/env sh
# -----------------------------------------------
# Filename: publish.sh
# Revision: 1.0
# Date: 2022年5月20日
# Author: Hooke
# Description: **** 根据php项目相应特征书写项目发布流程
# -----------------------------------------------
# 当发生错误时中止脚本
set -e
# 本地Git服务器目录路径
PHP_PATH=/Users/huyirui/program/itomix/git/isp/f/custom_form
# 编译输出文件夹
OUTPUT=front
# 打包
npm run build
# 移除Git服务器目录下项目文件夹
rm -r $PHP_PATH"/${OUTPUT:?}"
# 把本地编译输出文件夹添加到服务器目录
mv "${OUTPUT:?}/" $PHP_PATH
# 提交到Git服务器
cd $PHP_PATH"/${OUTPUT:?}"
git checkout custom_form
git pull
git add -A
git commit -m '自定义表单-前端网页更新'
git push
git checkout develop;
git pull origin develop;
git merge --no-edit custom_form;
git push origin develop;
# 更新SSH服务器上文件
ssh -p 22 itomix@ipadbiz.cn '
cd /opt/space-dev/;
git pull origin develop;
'
git checkout custom_form;
......@@ -7868,6 +7868,11 @@ sort-keys@^1.0.0:
dependencies:
is-plain-obj "^1.0.0"
sortablejs@1.14.0:
version "1.14.0"
resolved "https://mirrors.cloud.tencent.com/npm/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
source-list-map@^2.0.0:
version "2.0.1"
resolved "https://registry.nlark.com/source-list-map/download/source-list-map-2.0.1.tgz"
......@@ -8840,6 +8845,13 @@ vue@^3.0.0:
"@vue/runtime-dom" "3.2.2"
"@vue/shared" "3.2.2"
vuedraggable@^4.1.0:
version "4.1.0"
resolved "https://mirrors.cloud.tencent.com/npm/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
dependencies:
sortablejs "1.14.0"
vuex@^4.0.0-0:
version "4.0.2"
resolved "https://registry.nlark.com/vuex/download/vuex-4.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvuex%2Fdownload%2Fvuex-4.0.2.tgz"
......