开始优化多列和拖动

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

@@ -37,6 +37,77 @@
 
         options.value = $.trim(options.value);
 
+        // 处理field参数
+        // 如果是字符串，则转为json
+        if (typeof options.field === 'string') {
+            try {
+                options.field = JSON.parse(options.field);
+            } catch (e) {
+                try {
+                    options.field = eval('(' + options.field + ')');
+                } catch (e) {
+                    options.field = [];
+                }
+            }
+        }
+
+        // 如果没有定义，则初始化
+        if (!options.field) {
+            options.field = [
+                {
+                    key: 'name',
+                    title: '名称'
+                },
+                {
+                    key: 'value',
+                    title: '数据'
+                }
+            ];
+        } else {
+            // 如果是对象，则转成数组
+            if (typeof options.field === 'object' && !Array.isArray(options.field)) {
+                var field = [];
+                for (var key in options.field) {
+                    field.push({
+                        key: key,
+                        title: options.field[key]
+                    });
+                }
+                options.field = field;
+            } else if (!Array.isArray(options.field) || options.field.length < 1) {
+                // 如果field不符合规则，则初始化
+                options.field = [
+                    {
+                        key: 'name',
+                        title: '名称'
+                    },
+                    {
+                        key: 'value',
+                        title: '数据'
+                    }
+                ];
+            }
+        }
+
+        // 如果field没有key或title，则初始化
+        for (var i = 0; i < options.field.length; i++) {
+            if (!options.field[i].key) {
+                options.field[i].key = 'name';
+            }
+            if (!options.field[i].title) {
+                options.field[i].title = '名称';
+            }
+        }
+
+        // 处理value参数
+        // 如果是字符串，则转为json
+        if (typeof options.value === 'string') {
+            try {
+                options.value = JSON.parse(options.value);
+            } catch (e) {
+                options.value = [];
+            }
+        }
 
         app = new Vue({
             el: elem,
@@ -45,31 +116,16 @@
                     setting: options,
                     value: '',
                     listItem: [
-                        {
-                            name: '',
-                            value: ''
-                        }
+
                     ],
-                    originalValue: ''
+                    originalValue: '',
+                    field: options.field
                 };
             },
-            watch: {
-                listItem: {
-                    handler(newValue, oldValue) {
-                        // 在这里标记页面编辑状态
-                        this.value = JSON.stringify(newValue);
-                    },
-                    // 通过指定deep属性为true, watch会监听对象里面每一个值的变化
-                    deep: true
-                }
-            },
 
             created() {
                 if (this.setting.value) {
-                    this.originalValue = this.setting.value;
-                    if (typeof this.setting.value === 'string') {
-                        this.setting.value = JSON.parse(this.setting.value);
-                    }
+                    this.originalValue = $.extend(true, [], this.setting.value);
                     this.listItem = this.setting.value;
                     this.value = this.setting.value;
                 }
@@ -84,44 +140,25 @@
 
             methods: {
                 onResetItem() {
-                    if (typeof this.originalValue === 'string') {
-                        this.listItem = JSON.parse(this.originalValue);
-                    } else {
-                        this.listItem = this.originalValue;
-                    }
+                    this.listItem = $.extend(true, [], this.originalValue);
                 },
                 removeItem(item, index) {
-                    this.listTag.splice(index, 1);
+                    this.listItem.splice(index, 1);
                 },
                 onAddItem() {
-                    this.listItem.push({
-                        name: '',
-                        value: ''
-                    });
-                },
-                onItemNameChange(item, index, event) {
-                    this.listItem[index].name = event.target.value;
-                },
-                onItemValueChange(item, index, event) {
 
-                    this.listItem[index].value = event.target.value;
-                },
-                onItemMoveUp(item, index) {
-                    var arr = this.listItem;
-                    if (index != 0) {
-                        arr[index] = arr.splice(index - 1, 1, arr[index])[0];
-                    } else {
-                        arr.push(arr.shift());
-                    }
-                },
-                onItemMoveDown(item, index) {
-                    var arr = this.listItem;
-                    if (index != arr.length - 1) {
-                        arr[index] = arr.splice(index + 1, 1, arr[index])[0];
-                    } else {
-                        arr.unshift(arr.splice(index, 1)[0]);
+                    var emptyItem = {};
+
+                    for (var i = 0; i < this.field.length; i++) {
+                        emptyItem[this.field[i].key] = '';
                     }
 
+                    this.listItem.push(emptyItem);
+                },
+                onItemChange(item, index, itemField, event) {
+                    this.listItem[index][itemField.key] = event.target.value;
+
+                    this.updateValue(this.listItem);
                 },
                 onItemDelete(item, index) {
                     if (this.listItem.length <= 1) {
@@ -135,6 +172,9 @@
                         this.listItem.splice(index, 1);
                     }
                 },
+                updateValue(newValue) {
+                    this.value = JSON.stringify(newValue);
+                }
             }
         });