From 30b9065267f318d0a13a5f78a64e27748d4baf61 Mon Sep 17 00:00:00 2001 From: augushong Date: Sat, 28 Jan 2023 10:39:10 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=B1=9E=E6=80=A7=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/admin/view/mall/goods/add.html | 8 ++ app/admin/view/mall/goods/edit.html | 6 + public/static/config-admin.js | 1 + public/static/plugs/easy-admin/easy-admin.js | 16 ++- .../propertyInput/propertyInput.css | 8 ++ .../propertyInput/propertyInput.html | 19 +++ .../lay-module/propertyInput/propertyInput.js | 131 ++++++++++++++++++ .../propertyInput/propertyInput.scss | 12 ++ scssindex.md | 4 +- 9 files changed, 201 insertions(+), 4 deletions(-) create mode 100644 public/static/plugs/lay-module/propertyInput/propertyInput.css create mode 100644 public/static/plugs/lay-module/propertyInput/propertyInput.html create mode 100644 public/static/plugs/lay-module/propertyInput/propertyInput.js create mode 100644 public/static/plugs/lay-module/propertyInput/propertyInput.scss diff --git a/app/admin/view/mall/goods/add.html b/app/admin/view/mall/goods/add.html index 5e559d0..12b2066 100644 --- a/app/admin/view/mall/goods/add.html +++ b/app/admin/view/mall/goods/add.html @@ -65,6 +65,14 @@ +
+ +
+
+ +
+
+
diff --git a/app/admin/view/mall/goods/edit.html b/app/admin/view/mall/goods/edit.html index 1da4cab..97cd86d 100644 --- a/app/admin/view/mall/goods/edit.html +++ b/app/admin/view/mall/goods/edit.html @@ -66,6 +66,12 @@
+
+ +
+
+
+
diff --git a/public/static/config-admin.js b/public/static/config-admin.js index 825baf9..9878ad4 100644 --- a/public/static/config-admin.js +++ b/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"], diff --git a/public/static/plugs/easy-admin/easy-admin.js b/public/static/plugs/easy-admin/easy-admin.js index 4a8ed2f..57980c1 100644 --- a/public/static/plugs/easy-admin/easy-admin.js +++ b/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) { diff --git a/public/static/plugs/lay-module/propertyInput/propertyInput.css b/public/static/plugs/lay-module/propertyInput/propertyInput.css new file mode 100644 index 0000000..21c5e66 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/public/static/plugs/lay-module/propertyInput/propertyInput.html b/public/static/plugs/lay-module/propertyInput/propertyInput.html new file mode 100644 index 0000000..6f271fe --- /dev/null +++ b/public/static/plugs/lay-module/propertyInput/propertyInput.html @@ -0,0 +1,19 @@ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/public/static/plugs/lay-module/propertyInput/propertyInput.js b/public/static/plugs/lay-module/propertyInput/propertyInput.js new file mode 100644 index 0000000..ff84e39 --- /dev/null +++ b/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(); +}) \ No newline at end of file diff --git a/public/static/plugs/lay-module/propertyInput/propertyInput.scss b/public/static/plugs/lay-module/propertyInput/propertyInput.scss new file mode 100644 index 0000000..0e8d6a7 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/scssindex.md b/scssindex.md index f314b00..c570365 100644 --- a/scssindex.md +++ b/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" ] } ```