workflow-editor 0.0.86-upPocCdn1 → 0.0.87-up

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "workflow-editor",
   "private": false,
-  "version": "0.0.86-upPocCdn1",
+  "version": "0.0.87-up",
   "type": "module",
   "main": "./lib/workflow-editor.js",
   "scripts": {
@@ -16,12 +16,13 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
-    "agilebuilder-ui": "1.1.88-pocCdn5",
+    "agilebuilder-ui": "1.1.92",
     "axios": "^1.5.1",
     "element-plus": "^2.4.1",
     "font-awesome": "^4.7.0",
     "nprogress": "^0.2.0",
     "sass": "^1.69.4",
+    "sortablejs": "^1.15.2",
     "vite": "^4.4.5",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue": "^3.3.4",

package/packages/index.js

@@ -22,9 +22,9 @@ const install = function(Vue) {
 }
 
 //  判断是否是直接引入vue的js文件，即全局引用可自动安装所有组件
-// if (typeof window !== 'undefined' && window.Vue) {
-//   install(window.Vue)
-// }
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
 
 export default {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装

package/packages/workflow-editor/src/properties-editors/common/i18n-input.vue

@@ -1,7 +1,7 @@
 <template>
   <span>
     <div style="float: left; padding-right: 5px">
-      <el-input v-model="zh">
+      <el-input v-model="zh" @keydown.native.enter.prevent="onEnter">
         <template #append>
           <i class="fa fa-cog" @click="i18nSet"></i>
         </template>
@@ -79,6 +79,11 @@ export default {
         this.$emit('setI18n', i18nSet)
       }
       this.isShowI18n = false
+    },
+    onEnter(e) {
+      // 阻塞 Enter 键在输入框中的默认行为，防止冒泡到表单提交等外部逻辑
+      e.preventDefault()
+      e.stopPropagation()
     }
   }
 }

package/packages/workflow-editor/src/properties-editors/common/task-title.vue

@@ -1,17 +1,21 @@
 <template>
   <div>
-    <el-tag
-      v-for="(tag, index) in dynamicTags"
-      :key="index + tag"
-      :type="getType(tag)"
-      closable
-      :disable-transitions="false"
-      @close="handleClose(tag)"
-    >
-      <el-tooltip :content="showText(tag)" placement="top">
-        <span class="tag-text">{{ showText(tag) }}</span>
-      </el-tooltip>
-    </el-tag>
+    <span ref="tagContainer" class="tag-container">
+      <el-tag
+        v-for="(tag, index) in dynamicTags"
+        :key="tag"
+        :data-index="index"
+        :data-tag-key="tag"
+        :type="getType(tag)"
+        closable
+        :disable-transitions="false"
+        @close="handleClose(tag)"
+      >
+        <el-tooltip :content="showText(tag)" placement="top">
+          <span class="tag-text">{{ showText(tag) }}</span>
+        </el-tooltip>
+      </el-tag>
+    </span>
     <el-input
       v-if="inputVisible || isShowAdditionalParam"
       ref="saveTagInput"
@@ -38,6 +42,7 @@
 <script>
 import FormFields from './form-fields'
 import { getFormFieldLabel } from './form-fields-utils.js'
+import Sortable from 'sortablejs'
 export default {
   name: 'TaskTitle',
   components: {
@@ -73,7 +78,34 @@ export default {
   //     this.$emit('update:modelValue', this.dynamicTags.join(''))
   //   }
   // },
-  mounted() {},
+  mounted() {
+    this._sortable = Sortable.create(this.$refs.tagContainer, {
+      animation: 150,
+      draggable: '.el-tag',
+      dragClass: 'wf-tag-drag',
+      onEnd: () => {
+        const container = this.$refs.tagContainer
+        if (!container) return
+        // 从 DOM 当前真实顺序读取 tag 值，彻底避免索引偏移问题
+        const newOrder = Array.from(container.querySelectorAll('.el-tag[data-tag-key]')).map((el) =>
+          el.getAttribute('data-tag-key')
+        )
+        // 还原 Sortable 对 DOM 的移动，交由 Vue 重新渲染
+        container.querySelectorAll('.el-tag[data-tag-key]').forEach((el, i) => {
+          const original = this.dynamicTags[i]
+          const originalEl = container.querySelector(`.el-tag[data-tag-key="${original}"]`)
+          if (originalEl) container.appendChild(originalEl)
+        })
+        this.dynamicTags = newOrder
+        this.$emit('update:modelValue', newOrder.join(''))
+      }
+    })
+  },
+  beforeUnmount() {
+    if (this._sortable) {
+      this._sortable.destroy()
+    }
+  },
   methods: {
     showText(value) {
       let result = value
@@ -140,8 +172,14 @@ export default {
 }
 </script>
 <style scoped>
+.tag-container {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  cursor: grab;
+}
 .el-tag + .el-tag {
-  margin-left: 10px;
+  margin-left: 0;
 }
 .tag-text {
   display: inline-block;
@@ -170,3 +208,14 @@ select {
   line-height: 32px;
 }
 </style>
+
+<!-- 非 scoped：覆盖 Sortable 追加到 body 的拖拽克隆元素样式 -->
+<style>
+.wf-tag-drag {
+  display: inline-flex !important;
+  pointer-events: auto !important;
+  opacity: 0.85;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  background: #fff;
+}
+</style>