新增属性组件

app/admin/view/mall/goods/add.html

@@ -65,6 +65,14 @@
                 </div>
             </div>
         </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">属性</label>
+            <div class="layui-input-block">
+                <div data-toggle="property-input" data-value-field="id" data-name="property">
+
+                </div>
+            </div>
+        </div>
         <div class="layui-form-item">
             <label class="layui-form-label">商品描述</label>
             <div class="layui-input-block">

app/admin/view/mall/goods/edit.html

@@ -66,6 +66,12 @@
                 </div>
             </div>
         </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">属性</label>
+            <div class="layui-input-block">
+                <div data-toggle="property-input" data-value-field="id" data-name="property" data-value="{$row.property|raw|default=''}"></div>
+            </div>
+        </div>
         <div class="layui-form-item">
             <label class="layui-form-label">商品描述</label>
             <div class="layui-input-block">

public/static/config-admin.js

@@ -19,6 +19,7 @@ require.config({
         "tableSelect": ["plugs/lay-module/tableSelect/tableSelect"],
         "tableData": ["plugs/lay-module/tableData/tableData"],
         "tagInput": ["plugs/lay-module/tagInput/tagInput"],
+        "propertyInput": ["plugs/lay-module/propertyInput/propertyInput"],
         "iconPickerFa": ["plugs/lay-module/iconPicker/iconPickerFa"],
         "autocomplete": ["plugs/lay-module/autocomplete/autocomplete"],
         "vue": ["plugs/vue-2.6.10/vue.min"],

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

@@ -1,4 +1,4 @@
-define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypicker', 'tagInput', 'miniTab', 'clipboardjs'], function ($, tableSelect, undefined, miniTheme, tableData, citypicker, tagInput, miniTab, ClipboardJS) {
+define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypicker', 'tagInput', 'propertyInput', 'miniTab', 'clipboardjs'], function ($, tableSelect, undefined, miniTheme, tableData, citypicker, tagInput, propertyInput, miniTab, ClipboardJS) {
 
     window.onInitElemStyle = function () {
         miniTheme.renderElemStyle()
@@ -1003,9 +1003,9 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                                 operat.url = operat.url(data, operat);
                             }
 
-                            
+
                             if (typeof operat.field != 'function') {
-                                if(!admin.empty(operat.field)){
+                                if (!admin.empty(operat.field)) {
                                     operat.url = admin.table.toolSpliceUrl(operat.url, operat.field, data);
                                 }
                             } else {
@@ -1537,6 +1537,8 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
 
             // 监听标签输入控件生成
             admin.api.tagInput();
+            // 监听属性输入控件生成
+            admin.api.propertyInput();
 
             // 监听点击复制
             admin.api.copyText();
@@ -2256,6 +2258,14 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                     tagInput.render(v, data, admin);
                 });
 
+            },
+            propertyInput() {
+                var list = document.querySelectorAll('[data-toggle="property-input"]');
+                $.each(list, function (i, v) {
+                    var data = $(v).data()
+                    propertyInput.render(v, data, admin);
+                });
+
             },
             copyText(elem) {
                 if (elem == undefined) {

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

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

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

@@ -0,0 +1,19 @@
+<div class="property-input-container" ref="propertyInput">
+    <input type="hidden" :name="setting.name" :value="value" :lay-verify="setting.required == 1?'required':''">
+    <div class="input-list">
+        <div class="input-item" v-for="(item,index) in listItem">
+            <div class="input-name"><input type="text" class="layui-input" placeholder="请输入名称" :value="item.name" @change="onItemNameChange(item,index,$event)"></div>
+            <div class="input-value"><input type="text" class="layui-input" placeholder="请输入数据" :value="item.value" @change="onItemValueChange(item,index,$event)"></div>
+            <div class="input-option">
+                <div class="layui-btn-group">
+                    <div class="layui-btn layui-btn-primary" @click="onItemMoveUp(item,index)"><i class="fa fa-arrow-up"></i></div>
+                    <div class="layui-btn layui-btn-primary" @click="onItemMoveDown(item,index)"><i class="fa fa-arrow-down"></i></div>
+                    <div class="layui-btn layui-btn-primary" @click="onItemDelete(item,index)"><i class="fa fa-close"></i></div>
+                </div>
+            </div>
+        </div>
+        <div class="input-item">
+            <div class="layui-btn layui-btn-primary" @click="onAddItem"><i class="layui-icon layui-icon-add-1"></i></div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,131 @@
+define(['jquery', 'vue'], function ($, Vue) {
+    const propertyInputCss = '/static/plugs/lay-module/propertyInput/propertyInput.css';
+    const propertyInputHtml = '/static/plugs/lay-module/propertyInput/propertyInput.html';
+
+    var propertyInput = function () {
+        var cssElement = document.createElement('link');
+
+        cssElement.setAttribute('rel', 'stylesheet');
+
+        cssElement.setAttribute('href', propertyInputCss);
+
+        document.body.appendChild(cssElement);
+    };
+    var propertyInputTemplate = '';
+
+    $.ajax({
+        type: "get",
+        url: propertyInputHtml,
+        cache: true,
+        async: false,
+        success: function (template) {
+            propertyInputTemplate = template;
+        }
+
+    });
+
+    propertyInput.prototype.render = function (elem, data) {
+
+        var defaultOption = {
+            placeholder: '请选择',
+            required: ''
+        }
+
+        var options = $.extend(defaultOption, data);
+
+
+
+        app = new Vue({
+            el: elem,
+            data() {
+                return {
+                    setting: options,
+                    value: '',
+                    listItem: [
+                        {
+                            name: '',
+                            value: ''
+                        }
+                    ]
+                }
+            },
+            watch: {
+                listItem: {
+                    handler(newValue, oldValue) {
+                        // 在这里标记页面编辑状态
+                        this.value = JSON.stringify(newValue);
+                    },
+                    // 通过指定deep属性为true, watch会监听对象里面每一个值的变化
+                    deep: true
+                }
+            },
+
+            created() {
+                if (this.setting.value) {
+                    this.listItem = this.setting.value;
+                    this.value = this.setting.value;
+                }
+
+            },
+            mounted() {
+                if (options.required == 1) {
+                    $(this.$refs['propertyInput']).closest('.layui-form-item').children('.layui-form-label').addClass('required');
+                }
+            },
+            template: propertyInputTemplate,
+
+            methods: {
+
+                removeItem(item, index) {
+                    this.listTag.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])
+                    }
+
+                },
+                onItemDelete(item, index) {
+                    if (this.listItem.length <= 1) {
+                        this.listItem = [
+                            {
+                                name: '',
+                                value: ''
+                            }
+                        ]
+                    } else {
+                        this.listItem.splice(index, 1)
+                    }
+                },
+            }
+        })
+
+        return app;
+    }
+
+    return new propertyInput();
+})

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

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

scssindex.md

@@ -3,6 +3,7 @@
 public/static/common/css/theme/*.scss
 public/static/plugs/lay-module/tableData/tableData.scss
 public/static/plugs/lay-module/tagInput/tagInput.scss
+public/static/plugs/lay-module/propertyInput/propertyInput.scss
 ```
 
 
@@ -29,7 +30,8 @@ vscode中liveSassCompiler的配置:
     "liveSassCompile.settings.includeItems": [
         "/public/static/common/css/theme/*.scss",
         "/public/static/plugs/lay-module/tableData/tableData.scss",
-        "/public/static/plugs/lay-module/tagInput/tagInput.scss"
+        "/public/static/plugs/lay-module/tagInput/tagInput.scss",
+        "/public/static/plugs/lay-module/propertyInput/propertyInput.scss"
     ]
 }
 ```