完成拖动排序

public/static/plugs/lay-module/propertyInput/propertyInput.html

@@ -1,14 +1,12 @@
 <div class="property-input-container" ref="propertyInput">
     <input type="hidden" :name="setting.name" :value="value" :lay-verify="setting.required == 1?'required':''">
 
-    <draggable tag="table" :list="listItem" class="input-list" handle=".drag-item">
+    <draggable tag="table" v-model="listItem" class="input-list" handle=".drag-item" draggable=".input-item">
 
-        <tr class="input-item" slot="header">
-            <td class="input-item-name" :class="'input-item-name-'+item.key" v-for="(item,index) in field">{{item.title}}</td>
-            <td class="input-item-name input-item-name-options">操作</td>
-        </tr>
-        <tr class="input-item" :key="index" v-for="(item,index) in listItem">
-            <td class="input-value" :class="'input-item-value-'+itemField.key" v-for="(itemField,indexField) in field">
+
+
+        <tr class="input-item" :key="item.uid" v-for="(item,index) in listItem">
+            <td class="input-value" :class="item.uid+itemField.key" :key="'drag-item-'+indexField" v-for="(itemField,indexField) in field">
                 <input type="text" class="layui-input" :placeholder="'请输入'+itemField.title" :value="item[itemField.key]" @change="onItemChange(item,index,itemField,$event)">
             </td>
             <td class="input-option">
@@ -19,6 +17,10 @@
                 </div>
             </td>
         </tr>
+        <tr class="input-item" slot="header">
+            <td class="input-item-name" :class="'input-item-name-'+item.key" v-for="(item,index) in field">{{item.title}}</td>
+            <td class="input-item-name input-item-name-options">操作</td>
+        </tr>
         <tr class="input-item" slot="footer">
             <td>
                 <div class="layui-btn layui-btn-primary" @click="onAddItem" title="增加"><i class="layui-icon layui-icon-add-1"></i></div>

public/static/plugs/lay-module/propertyInput/propertyInput.js

@@ -109,6 +109,13 @@
             }
         }
 
+        // 如果value缺少uid，则生成
+        for (var i = 0; i < options.value.length; i++) {
+            if (!options.value[i].uid) {
+                options.value[i].uid = ua.randdomString();
+            }
+        }
+
         app = new Vue({
             el: elem,
             data() {
@@ -126,8 +133,8 @@
             created() {
                 if (this.setting.value) {
                     this.originalValue = $.extend(true, [], this.setting.value);
-                    this.listItem = this.setting.value;
-                    this.value = this.setting.value;
+                    this.listItem = $.extend(true, [], this.setting.value);
+                    this.updateValue(this.listItem);
                 }
 
             },
@@ -142,9 +149,6 @@
                 onResetItem() {
                     this.listItem = $.extend(true, [], this.originalValue);
                 },
-                removeItem(item, index) {
-                    this.listItem.splice(index, 1);
-                },
                 onAddItem() {
 
                     var emptyItem = {};
@@ -153,6 +157,8 @@
                         emptyItem[this.field[i].key] = '';
                     }
 
+                    emptyItem.uid = ua.randdomString();
+
                     this.listItem.push(emptyItem);
                 },
                 onItemChange(item, index, itemField, event) {

public/static/plugs/ulthon-admin/ulthon-admin.js

@@ -2425,6 +2425,16 @@
             } else {
                 replaceCallback(code);
             }
+        },
+        randdomString(len) {
+            len = len || 32;
+            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
+            var maxPos = $chars.length;
+            var pwd = '';
+            for (var i = 0; i < len; i++) {
+                pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
+            }
+            return pwd;
         }
     };