From 96d0f629cd0eac115e871b7ea8b200559ead9837 Mon Sep 17 00:00:00 2001 From: augushong Date: Mon, 11 Jul 2022 12:11:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=A0=87=E7=AD=BE=E8=BE=93?= =?UTF-8?q?=E5=85=A5=E7=BB=84=E4=BB=B6=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/admin/service/curd/BuildCurdService.php | 10 +- .../curd/templates/view/module/tag.code | 7 ++ app/admin/view/test/goods/add.html | 12 +- app/admin/view/test/goods/edit.html | 10 +- public/static/admin/js/test/goods.js | 2 +- public/static/config-admin.js | 1 + public/static/plugs/easy-admin/easy-admin.js | 31 +++-- .../plugs/lay-module/tagInput/tagInput.css | 24 ++++ .../plugs/lay-module/tagInput/tagInput.html | 13 ++ .../plugs/lay-module/tagInput/tagInput.js | 114 ++++++++++++++++++ .../plugs/lay-module/tagInput/tagInput.scss | 31 +++++ 11 files changed, 231 insertions(+), 24 deletions(-) create mode 100644 app/admin/service/curd/templates/view/module/tag.code create mode 100644 public/static/plugs/lay-module/tagInput/tagInput.css create mode 100644 public/static/plugs/lay-module/tagInput/tagInput.html create mode 100644 public/static/plugs/lay-module/tagInput/tagInput.js create mode 100644 public/static/plugs/lay-module/tagInput/tagInput.scss diff --git a/app/admin/service/curd/BuildCurdService.php b/app/admin/service/curd/BuildCurdService.php index 5b98442..0287ef1 100644 --- a/app/admin/service/curd/BuildCurdService.php +++ b/app/admin/service/curd/BuildCurdService.php @@ -225,7 +225,7 @@ class BuildCurdService * 表单类型 * @var array */ - protected $formTypeArray = ['text', 'image', 'images', 'file', 'files', 'select', 'switch', 'date', 'editor', 'textarea', 'checkbox', 'radio', 'relation', 'table', 'city']; + protected $formTypeArray = ['text', 'image', 'images', 'file', 'files', 'select', 'switch', 'date', 'editor', 'textarea', 'checkbox', 'radio', 'relation', 'table', 'city','tag']; /** * 初始化 @@ -1277,6 +1277,8 @@ class BuildCurdService } elseif ($val['formType'] == 'city') { $templateFile = "view{$this->DS}module{$this->DS}city"; $define = $this->buildCityView($field, $val, $val['default']); + }elseif ($val['formType'] == 'tag') { + $templateFile = "view{$this->DS}module{$this->DS}tag"; } @@ -1286,6 +1288,7 @@ class BuildCurdService 'comment' => $val['comment'], 'field' => $field, 'required' => $this->buildRequiredHtml($val['required']), + 'required_text' => $val['required'] ? '1' : '', 'value' => $val['default'], 'define' => $define, ] @@ -1373,6 +1376,8 @@ class BuildCurdService } elseif ($val['formType'] == 'city') { $templateFile = "view{$this->DS}module{$this->DS}city"; $define = $this->buildCityView($field, $val, $value); + }elseif ($val['formType'] == 'tag') { + $templateFile = "view{$this->DS}module{$this->DS}tag"; } $editFormList .= $this->replaceTemplate( @@ -1381,6 +1386,7 @@ class BuildCurdService 'comment' => $val['comment'], 'field' => $field, 'required' => $this->buildRequiredHtml($val['required']), + 'required_text' => $val['required'] ? '1' : '', 'value' => $value, 'define' => $define, ] @@ -1479,7 +1485,7 @@ class BuildCurdService } } - $indexCols .= $this->formatColsRow("{width: 250, title: '操作', templet: ea.table.tool},\r"); + $indexCols .= $this->formatColsRow("{width: 250, title: '操作', templet: ea.table.tool , fixed:'right'},\r"); $jsValue = $this->replaceTemplate( $this->getTemplate("static{$this->DS}js"), diff --git a/app/admin/service/curd/templates/view/module/tag.code b/app/admin/service/curd/templates/view/module/tag.code new file mode 100644 index 0000000..75938c8 --- /dev/null +++ b/app/admin/service/curd/templates/view/module/tag.code @@ -0,0 +1,7 @@ + +
+ +
+
+
+
\ No newline at end of file diff --git a/app/admin/view/test/goods/add.html b/app/admin/view/test/goods/add.html index df5454b..25a28e8 100644 --- a/app/admin/view/test/goods/add.html +++ b/app/admin/view/test/goods/add.html @@ -144,9 +144,9 @@
- +
-
+
@@ -160,7 +160,13 @@
- + +
+
+
+ +
+
diff --git a/app/admin/view/test/goods/edit.html b/app/admin/view/test/goods/edit.html index af7d75b..5fd10ba 100644 --- a/app/admin/view/test/goods/edit.html +++ b/app/admin/view/test/goods/edit.html @@ -144,9 +144,9 @@
- +
-
+
@@ -163,6 +163,12 @@
+
+ +
+
+
+
diff --git a/public/static/admin/js/test/goods.js b/public/static/admin/js/test/goods.js index 63eaca0..bec81b2 100644 --- a/public/static/admin/js/test/goods.js +++ b/public/static/admin/js/test/goods.js @@ -17,7 +17,7 @@ define(["jquery", "easy-admin"], function ($, ea) { ea.table.render({ init: init, cols: [[ - {type: 'checkbox'}, {field: 'id', title: 'id'}, {field: 'cate_id', title: '分类ID'}, {field: 'title', title: '商品名称'}, {field: 'logo', title: '商品logo', templet: ea.table.image}, {field: 'total_stock', title: '总库存'}, {field: 'sort', title: '排序', edit: 'text'}, {field: 'status', search: 'select', selectList: ea.getDataBrage('select_list_status'), title: '状态', templet: ea.table.switch}, {field: 'cert_file', title: '合格证', templet: ea.table.url}, {field: 'remark', title: '备注说明', templet: ea.table.text}, {field: 'create_time', title: 'create_time'}, {field: 'publish_time', title: '发布日期'}, {field: 'sale_time', title: '售卖日期'}, {field: 'intro', title: '简介'}, {field: 'time_status', search: 'select', selectList: ea.getDataBrage('select_list_time_status'), title: '秒杀状态'}, {field: 'is_recommend', search: 'select', selectList: ea.getDataBrage('select_list_is_recommend'), title: '是否推荐'}, {field: 'shop_type', search: 'select', selectList: ea.getDataBrage('select_list_shop_type'), title: '商品类型'}, {field: 'from_area', title: '产地'}, {field: 'store_city', title: '仓库'}, {field: 'mallCate.id', title: ''}, {field: 'mallCate.title', title: '分类名'}, {field: 'mallCate.image', title: '分类图片', templet: ea.table.image}, {field: 'mallCate.sort', title: '排序', edit: 'text'}, {field: 'mallCate.status', title: '状态', templet: ea.table.switch}, {field: 'mallCate.remark', title: '备注说明', templet: ea.table.text}, {field: 'mallCate.create_time', title: '创建时间'}, {width: 250, title: '操作', templet: ea.table.tool}, + {type: 'checkbox'}, {field: 'id', title: 'id'}, {field: 'cate_id', title: '分类ID'}, {field: 'title', title: '商品名称'}, {field: 'logo', title: '商品logo', templet: ea.table.image}, {field: 'total_stock', title: '总库存'}, {field: 'sort', title: '排序', edit: 'text'}, {field: 'status', search: 'select', selectList: ea.getDataBrage('select_list_status'), title: '状态', templet: ea.table.switch}, {field: 'cert_file', title: '合格证', templet: ea.table.url}, {field: 'remark', title: '备注说明', templet: ea.table.text}, {field: 'create_time', title: 'create_time'}, {field: 'publish_time', title: '发布日期'}, {field: 'sale_time', title: '售卖日期'}, {field: 'intro', title: '简介'}, {field: 'time_status', search: 'select', selectList: ea.getDataBrage('select_list_time_status'), title: '秒杀状态'}, {field: 'is_recommend', search: 'select', selectList: ea.getDataBrage('select_list_is_recommend'), title: '是否推荐'}, {field: 'shop_type', search: 'select', selectList: ea.getDataBrage('select_list_shop_type'), title: '商品类型'}, {field: 'from_area', title: '产地'}, {field: 'store_city', title: '仓库'}, {field: 'tag_input', title: '商品标签 （输入）'}, {field: 'mallCate.id', title: ''}, {field: 'mallCate.title', title: '分类名'}, {field: 'mallCate.image', title: '分类图片', templet: ea.table.image}, {field: 'mallCate.sort', title: '排序', edit: 'text'}, {field: 'mallCate.status', title: '状态', templet: ea.table.switch}, {field: 'mallCate.remark', title: '备注说明', templet: ea.table.text}, {field: 'mallCate.create_time', title: '创建时间'}, {width: 250, title: '操作', templet: ea.table.tool , fixed:'right'}, ]], }); diff --git a/public/static/config-admin.js b/public/static/config-admin.js index beb60b0..0a88a27 100644 --- a/public/static/config-admin.js +++ b/public/static/config-admin.js @@ -18,6 +18,7 @@ require.config({ "treetable": ["plugs/lay-module/treetable-lay/treetable"], "tableSelect": ["plugs/lay-module/tableSelect/tableSelect"], "tableData": ["plugs/lay-module/tableData/tableData"], + "tagInput": ["plugs/lay-module/tagInput/tagInput"], "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 d69524b..24b408f 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'], function ($, tableSelect, undefined, miniTheme, tableData) { +define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypicker','tagInput'], function ($, tableSelect, undefined, miniTheme, tableData,citypicker,tagInput) { window.onInitElemStyle = function () { miniTheme.renderElemStyle() @@ -1355,6 +1355,9 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick // 监听通用表格数据控件生成 admin.api.tableData(); + // 监听标签输入控件生成 + admin.api.tagInput(); + // 初始化layui表单 form.render(); @@ -1734,9 +1737,6 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick if (cityList.length > 0) { $.each(cityList, function (i, v) { - console.log(i); - console.log(v); - // format-all=解析全部，name=不进行解析（提交名称），code=不进行解析（提交地区代码），format-name=解析名称，format-code，解析地区代码 var fieldName = $(v).attr('name'); var code = $(v).data('citypicker').getCode(); @@ -1744,8 +1744,6 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick var level = $(v).data('level'); var formatTargetList = {}; - console.log(level); - formatTargetList['name'] = 1; formatTargetList['code'] = 1; formatTargetList['name-province'] = 1; @@ -1794,13 +1792,6 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick dataField[fieldName + '_code_district'] = codeArr[2] || ''; } - - - console.log(fieldName); - - console.log(code); - console.log(text); - }) } return dataField @@ -2058,13 +2049,21 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick } }, tableData() { - var dateList = document.querySelectorAll('[data-toggle="table-data"]'); - $.each(dateList, function (i, v) { + var tableList = document.querySelectorAll('[data-toggle="table-data"]'); + $.each(tableList, function (i, v) { var data = $(v).data() tableData.render(v, data, admin); }); - } + }, + tagInput() { + var list = document.querySelectorAll('[data-toggle="tag-input"]'); + $.each(list, function (i, v) { + var data = $(v).data() + tagInput.render(v, data, admin); + }); + + }, }, getQueryVariable(variable, defaultValue) { if (typeof defaultValue == 'undefined') { diff --git a/public/static/plugs/lay-module/tagInput/tagInput.css b/public/static/plugs/lay-module/tagInput/tagInput.css new file mode 100644 index 0000000..3d71174 --- /dev/null +++ b/public/static/plugs/lay-module/tagInput/tagInput.css @@ -0,0 +1,24 @@ +.tag-input-container .layui-input { + height: auto; + min-height: 30px; + padding-bottom: 8px; +} +.tag-input-container .main-input { + border: none; + height: 22px; + line-height: 22px; + margin-left: 5px; + margin-top: 8px; + vertical-align: bottom; +} +.tag-input-container .input-preshow { + display: inline-block; + height: 0px; + overflow: hidden; +} +.tag-input-container .layui-form-danger + .layui-input { + border-color: #ff5722 !important; +} +.tag-input-container .layui-btn { + margin-top: 8px; +} \ No newline at end of file diff --git a/public/static/plugs/lay-module/tagInput/tagInput.html b/public/static/plugs/lay-module/tagInput/tagInput.html new file mode 100644 index 0000000..649921d --- /dev/null +++ b/public/static/plugs/lay-module/tagInput/tagInput.html @@ -0,0 +1,13 @@ +
+ +
+
+ {{itemTag}} + +
+ +
+
+ {{inputValuePreview}} +
+
\ No newline at end of file diff --git a/public/static/plugs/lay-module/tagInput/tagInput.js b/public/static/plugs/lay-module/tagInput/tagInput.js new file mode 100644 index 0000000..2201653 --- /dev/null +++ b/public/static/plugs/lay-module/tagInput/tagInput.js @@ -0,0 +1,114 @@ +define(['jquery', 'vue'], function ($, Vue) { + const tagInputCss = '/static/plugs/lay-module/tagInput/tagInput.css'; + const tagInputHtml = '/static/plugs/lay-module/tagInput/tagInput.html'; + + var tagInput = function () { + var cssElement = document.createElement('link'); + + cssElement.setAttribute('rel', 'stylesheet'); + + cssElement.setAttribute('href', tagInputCss); + + document.body.appendChild(cssElement); + }; + var tagInputTemplate = ''; + + $.ajax({ + type: "get", + url: tagInputHtml, + cache: true, + async: false, + success: function (template) { + tagInputTemplate = template; + } + + }); + + tagInput.prototype.render = function (elem, data) { + + var defaultOption = { + placeholder: '请选择', + required: '' + } + + var options = $.extend(defaultOption, data); + + + + app = new Vue({ + el: elem, + data() { + return { + setting: options, + value: '', + inputValue: '', + inputWidth: 100, + inputValuePreview: '', + listTag: [] + } + }, + watch: { + inputValue(value) { + + this.inputValuePreview = value; + this.updateInputWidth() + }, + listTag(value) { + this.value = value.join(',') + } + }, + created() { + if (options.value.length > 0) { + this.listTag = options.value.split(',') + + } + + }, + mounted() { + if (options.required == 1) { + $(this.$refs['tagInput']).closest('.layui-form-item').children('.layui-form-label').addClass('required'); + } + }, + template: tagInputTemplate, + + methods: { + onInputConfirm(e) { + + if (e) e.preventDefault(); + + if ($.trim(this.inputValue).length == 0) { + return false; + } + + this.listTag.push(this.inputValue) + this.inputValue = ''; + return false; + }, + onContainerClick() { + $(this.$refs['tagInputMain']).focus() + }, + onInputChange(e) { + + var cvalue = $(e.target).val(); + this.inputValuePreview = cvalue; + + }, + updateInputWidth() { + var width = $(this.$refs['preshow']).width(); + + if (width < 100) { + width = 100; + } + this.inputWidth = width + 60; + }, + removeItem(item, index) { + this.listTag.splice(index, 1) + } + } + }) + + return app; + } + + return new tagInput(); +}) \ No newline at end of file diff --git a/public/static/plugs/lay-module/tagInput/tagInput.scss b/public/static/plugs/lay-module/tagInput/tagInput.scss new file mode 100644 index 0000000..a135cac --- /dev/null +++ b/public/static/plugs/lay-module/tagInput/tagInput.scss @@ -0,0 +1,31 @@ +.tag-input-container { + + .layui-input { + height : auto; + min-height : 30px; + padding-bottom: 8px; + } + + .main-input { + border : none; + height : 22px; + line-height : 22px; + margin-left : 5px; + margin-top : 8px; + vertical-align: bottom; + } + + .input-preshow { + display : inline-block; + height : 0px; + overflow: hidden; + } + + .layui-form-danger+.layui-input { + border-color: #ff5722 !important; + } + + .layui-btn { + margin-top: 8px; + } +} \ No newline at end of file