feat(ncform-theme-elementui): array-tabs support draggable switch array position

packages/ncform-theme-elementui/package-lock.json

@@ -11002,6 +11002,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.13.0.tgz",
+      "integrity": "sha512-RBJirPY0spWCrU5yCmWM1eFs/XgX2J5c6b275/YyxFRgnzPhKl/TDeU2hNR8Dt7ITq66NRPM4UlOt+e5O4CFHg=="
+    },
     "source-list-map": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-0.1.8.tgz",

packages/ncform-theme-elementui/package.json

@@ -64,6 +64,7 @@
     "@vxcontrol/ncform-common": "^1.9.2",
     "element-ui": "^2.13.2",
     "lodash-es": "^4.17.15",
+    "sortablejs": "^1.12.0",
     "vue": "^2.6.11",
     "vue-loader": "^15.2.6",
     "webpack": "^4.44.0",

packages/ncform-theme-elementui/src/components/layout-comps/array-tabs.vue

@@ -6,7 +6,6 @@
       {{_analyzeVal(schema.ui.legend)}}
       <i v-if="!mergeConfig.disableCollapse" class="el-collapse-item__arrow" :class="{'el-icon-arrow-up': !collapsed, 'el-icon-arrow-down': collapsed}"></i>
     </legend>
-
     <el-tabs v-show="!collapsed" :addable="globalStatus !== 'preview' && !disabled && !mergeConfig.disableAdd" type="card" :tab-position="mergeConfig.tabPosition" @edit="handleTabsEdit" v-model="activeName">
       <el-tab-pane v-for="(dataItem, idx) in schema.value" :key="dataItem.__dataSchema.__id" :closable="globalStatus !== 'preview' && !disabled && (!mergeConfig.disableDel && !isDelExceptionRow(dataItem.__dataSchema)) || (mergeConfig.disableDel && isDelExceptionRow(dataItem.__dataSchema))" :name="'' + idx">
 
@@ -71,6 +70,9 @@
           }
         }
       }
+      .dragging {
+        background-color: #f7f4f4;
+      }
     }
 
     .el-tab-pane > .__object-form-item > .el-row {
@@ -86,6 +88,7 @@
 <script>
 
   import ncformCommon from '@vxcontrol/ncform-common';
+  import Sortable from "sortablejs";
 
   const layoutArrayMixin = ncformCommon.mixins.vue.layoutArrayMixin;
 
@@ -114,6 +117,26 @@
       }
     },
 
+    mounted() {
+      const vm = this;
+      const el = this.$el.querySelector(".el-tabs__nav");
+      const sortTabs = Sortable.create(el, {
+        animation: 200,
+        filter: ".el-icon-close",
+        dragClass: 'dragging',
+        onEnd(evt) {
+          const list = vm.schema.value;
+          const item = list.splice(evt.oldIndex, 1)[0];
+          list.splice(evt.newIndex, 0, item);
+          vm.schema.value = [];
+          vm.$nextTick(() => {
+            vm.schema.value = list;
+            vm.activeName = String(evt.newIndex);
+          });
+        }
+      });
+    },
+
     methods: {
       handleTabsEdit(targetName, action) {
         if (action === 'add') {