开始优化多列和拖动

extend/base/admin/view/mall/goods/edit.html

@@ -75,7 +75,7 @@
         <div class="layui-form-item full-line">
             <label class="layui-form-label">属性（指定列）</label>
             <div class="layui-input-block">
-                <div data-toggle="property-input" data-name="property_static">{$row.property_static|raw|default=''}</div>
+                <div data-toggle="property-input" data-name="property_static" data-field='{memory_size:"内存",disk_size:"硬盘",cpu_nums:"CPU核心数"}'>{$row.property_static|raw|default=''}</div>
             </div>
         </div>
         <div class="layui-form-item full-line">

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

@@ -1,8 +1,6 @@
-.property-input-container .input-item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
 .property-input-container .input-item .input-value {
   min-width: 240px;
 }
+.property-input-container .input-item .input-option {
+  white-space: nowrap;
+}

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

@@ -1,23 +1,30 @@
 <div class="property-input-container" ref="propertyInput">
     <input type="hidden" :name="setting.name" :value="value" :lay-verify="setting.required == 1?'required':''">
 
-    <draggable tag="div" :list="listItem" class="input-list" handle=".drag-item">
+    <draggable tag="table" :list="listItem" class="input-list" handle=".drag-item">
 
-        <div class="input-item" v-for="(item,index) in listItem">
+        <tr class="input-item" slot="header">
-            <div class="input-name"><input type="text" class="layui-input" placeholder="请输入名称" :value="item.name" @change="onItemNameChange(item,index,$event)"></div>
+            <td class="input-item-name" :class="'input-item-name-'+item.key" v-for="(item,index) in field">{{item.title}}</td>
-            <div class="input-value"><input type="text" class="layui-input" placeholder="请输入数据" :value="item.value" @change="onItemValueChange(item,index,$event)"></div>
+            <td class="input-item-name input-item-name-options">操作</td>
-            <div class="input-option">
+        </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">
+                <input type="text" class="layui-input" :placeholder="'请输入'+itemField.title" :value="item[itemField.key]" @change="onItemChange(item,index,itemField,$event)">
+            </td>
+            <td class="input-option">
                 <div class="layui-btn-group">
                     <div class="layui-btn layui-btn-primary drag-item"><i class=" fa fa-arrows"></i></div>
 
                     <div class="layui-btn layui-btn-primary" @click="onItemDelete(item,index)"><i class="fa fa-close"></i></div>
                 </div>
-            </div>
+            </td>
-        </div>
+        </tr>
-        <div class="input-item" slot="footer">
+        <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>
                 <div class="layui-btn layui-btn-primary" @click="onResetItem" title="重置"><i class="layui-icon layui-icon-refresh"></i></div>
-        </div>
+            </td>
+        </tr>
     </draggable>
 
 </div>

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;
+                    this.originalValue = $.extend(true, [], this.setting.value);
-                    if (typeof this.setting.value === 'string') {
-                        this.setting.value = JSON.parse(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 = $.extend(true, [], this.originalValue);
-                        this.listItem = JSON.parse(this.originalValue);
-                    } else {
-                        this.listItem = 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;
+                    var emptyItem = {};
-                },
+
-                onItemMoveUp(item, index) {
+                    for (var i = 0; i < this.field.length; i++) {
-                    var arr = this.listItem;
+                        emptyItem[this.field[i].key] = '';
-                    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]);
                     }
 
+                    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);
+                }
             }
         });
 

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

@@ -1,12 +1,11 @@
 .property-input-container {
-
     .input-item {
-        display        : flex;
-        align-items    : center;
-        justify-content: flex-start;
-
         .input-value {
             min-width: 240px;
         }
+
+        .input-option{
+            white-space: nowrap;
+        }
     }
 }