新增流程排序保存功能

hookehuyr
Commit 670b779de85777d30450b4f325f76bd674fc14b0 670b779d 1 parent 962c708a
Showing 5 changed files with 165 additions and 2 deletions
doc/App.vue
doc/api/index.js
package.json
publish_dev.sh
yarn.lock
--- a/doc/App.vue
View file @670b779
+++ b/doc/App.vue
View file @670b779
@@ -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>
--- a/doc/api/index.js
View file @670b779
+++ b/doc/api/index.js
View file @670b779
 /*
  * @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));
--- a/package.json
View file @670b779
+++ b/package.json
View file @670b779
@@ -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": {
--- a/publish_dev.sh 0 → 100644
View file @670b779
+++ b/publish_dev.sh 0 → 100644
View file @670b779
+#!/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;
--- a/yarn.lock
View file @670b779
+++ b/yarn.lock
View file @670b779
@@ -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"