新增tableData组件；完成商品标签示例；

2026-07-08 19:12:48 +08:00 · 2022-07-05 18:36:28 +08:00
parent 5afca6b412
commit 948461337b
15 changed files with 387 additions and 6 deletions
--- a/public/static/plugs/lay-module/tableData/tableData.js
+++ b/public/static/plugs/lay-module/tableData/tableData.js
@@ -0,0 +1,145 @@
+define(['jquery', 'vue'], function ($, Vue) {
+    const tableDataCss = '/static/plugs/lay-module/tableData/tableData.css';
+    const tableDataHtml = '/static/plugs/lay-module/tableData/tableData.html';
+
+    var tableData = function () {
+        var cssElement = document.createElement('link');
+
+        cssElement.setAttribute('rel', 'stylesheet');
+
+        cssElement.setAttribute('href', tableDataCss);
+
+        document.body.appendChild(cssElement);
+    };
+    var tableDataTemplate = '';
+
+    $.ajax({
+        type: "get",
+        url: tableDataHtml,
+        cache: true,
+        async: false,
+        success: function (template) {
+            tableDataTemplate = template;
+        }
+
+    });
+
+    tableData.prototype.render = function (elem, data) {
+        var app;
+        var clienWidth, clientHeight;
+        var width = document.body.clientWidth,
+            height = document.body.clientHeight;
+        if (width >= 800 && height >= 600) {
+            clienWidth = '800px';
+            clientHeight = '600px';
+        } else {
+            clienWidth = '100%';
+            clientHeight = '100%';
+        }
+
+        var defaultOption = {
+            width: clienWidth,
+            height: clientHeight,
+            placeholder: '请选择',
+            selectConfirmCallback: 'onTableDataConfirm',
+        }
+
+        var options = $.extend(defaultOption, data);
+        console.log(options);
+
+        var valueField = options.valueField;
+
+        if (options.index.indexOf('?') > -1) {
+            options.index += '&'
+        } else {
+            options.index += '?'
+        }
+
+        options.index += 'select_mode=' + options.selectType
+
+        app = new Vue({
+            el: elem,
+            data() {
+                return {
+                    setting: options,
+                    listSelected: [],
+                    value: ''
+                }
+            },
+            watch: {
+                listSelected(value) {
+                    console.log(value);
+
+                    var valueList = value.map(itemValue => itemValue[valueField])
+
+
+
+                    this.value = valueList.join(',')
+                }
+            },
+            created() {
+                this.value = options.selectValue;
+
+                var valueLength = this.value.split(',').length;
+                loading.show();
+                $.get(options.index,{
+                    page:1,
+                    limit:valueLength,
+                    filter:JSON.stringify({id:this.value}),
+                    op: JSON.stringify({id:'in'})
+                },(result)=>{
+                    loading.hide()
+                    this.listSelected = result.data;
+                })
+
+            },
+            template: tableDataTemplate,
+
+            methods: {
+                openSelectPage() {
+
+                    var index = layer.open({
+                        title: '选择数据',
+                        type: 2,
+                        area: [options.width, options.height],
+                        content: options.index,
+                        maxmin: true,
+                        moveOut: true,
+                        shadeClose: true,
+                        success: (layero, index) => {
+                            window[options.selectConfirmCallback] = (data) => {
+                                console.log(data);
+
+                                data.forEach(dataItem => {
+
+                                    var itemFind = this.listSelected.find(itemSelect => itemSelect[valueField] == dataItem[valueField])
+
+                                    if (itemFind == undefined) {
+                                        this.listSelected.push(dataItem)
+                                    }
+
+
+                                });
+                                this.$forceUpdate();
+                                layer.close(index);
+                            }
+
+                        },
+                        end: function () {
+                            index = null;
+                            window[options.selectConfirmCallback] = undefined;
+                        }
+                    });
+
+                },
+                removeItem(item, index) {
+                    this.listSelected.splice(index, 1);
+                }
+            }
+        })
+
+        return app;
+    }
+
+    return new tableData();
+})