ulthon/ulthon_admin
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_admin.git synced 2026-07-01 15:32:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

完成标签输入组件；

Browse Source
This commit is contained in:
augushong
2022-07-11 12:11:33 +08:00
parent e45f232f21
commit 96d0f629cd
11 changed files with 231 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/admin/service/curd/BuildCurdService.php
View File

@@ -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"),

7
app/admin/service/curd/templates/view/module/tag.code Normal file
View File

@@ -0,0 +1,7 @@
<div class="layui-form-item">
<label class="layui-form-label">{{comment}}</label>
<div class="layui-input-block">
<div data-toggle="tag-input" data-name="{{field}}" data-value="{{value}}" data-required="{{required_text}}"></div>
</div>
</div>

12
app/admin/view/test/goods/add.html
View File

@@ -144,9 +144,9 @@
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商品标签2</label>
<label class="layui-form-label">商品标签（单选）</label>
<div class="layui-input-block">
<div data-toggle="table-data" data-index="{:__url('mall.tag/index')}" data-select-type="checkbox" data-select-value="" data-value-field="id" data-name="tag_backup" data-field-name="title" data-required="">
<div data-toggle="table-data" data-index="{:__url('mall.tag/index')}" data-select-type="radio" data-select-value="" data-value-field="id" data-name="tag_backup" data-field-name="title" data-required="">
</div>
</div>
@@ -160,7 +160,13 @@
<div class="layui-form-item">
<label class="layui-form-label">仓库</label>
<div class="layui-input-block">
<input class="layui-input" name="store_city" data-toggle="city-picker" lay-verify="required" value="" type="text" data-level="city" readonly >
<input class="layui-input" name="store_city" data-toggle="city-picker" lay-verify="required" value="山东省/临沂市" type="text" data-level="city" readonly >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商品标签 （输入）</label>
<div class="layui-input-block">
<div data-toggle="tag-input" data-name="tag_input" data-value="" data-required="1"></div>
</div>
</div>
<div class="hr-line"></div>

10
app/admin/view/test/goods/edit.html
View File

@@ -144,9 +144,9 @@
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商品标签2</label>
<label class="layui-form-label">商品标签（单选）</label>
<div class="layui-input-block">
<div data-toggle="table-data" data-index="{:__url('mall.tag/index')}" data-select-type="checkbox" data-select-value="{$row.tag_backup|default=''}" data-value-field="id" data-name="tag_backup" data-field-name="title" data-required="">
<div data-toggle="table-data" data-index="{:__url('mall.tag/index')}" data-select-type="radio" data-select-value="{$row.tag_backup|default=''}" data-value-field="id" data-name="tag_backup" data-field-name="title" data-required="">
</div>
</div>
@@ -163,6 +163,12 @@
<input class="layui-input" name="store_city" data-toggle="city-picker" lay-verify="required" value="{$row.store_city|default=''}" type="text" data-level="city" readonly >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商品标签 （输入）</label>
<div class="layui-input-block">
<div data-toggle="tag-input" data-name="tag_input" data-value="{$row.tag_input|default=''}" data-required="1"></div>
</div>
</div>
<div class="hr-line"></div>
<div class="layui-form-item text-center">
<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>

2
public/static/admin/js/test/goods.js
View File

@@ -17,7 +17,7 @@ define(["jquery", "easy-admin"], function ($, ea) {
ea.table.render({
init: init,
cols: [[
{type: 'checkbox'},
{type: 'checkbox'},
{field: 'id', title: 'id'},
{field: 'cate_id', title: '分类ID'},
{field: 'title', title: '商品名称'},

1
public/static/config-admin.js
View File

@@ -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"],

31
public/static/plugs/easy-admin/easy-admin.js
View File

@@ -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') {

24
public/static/plugs/lay-module/tagInput/tagInput.css Normal file
View File

@@ -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;
}

13
public/static/plugs/lay-module/tagInput/tagInput.html Normal file
View File

@@ -0,0 +1,13 @@
<div class="tag-input-container" ref="tagInput">
<input type="hidden" :name="setting.name" :value="value" :lay-verify="setting.required == 1?'required':''">
<div class="layui-input" @click="onContainerClick">
<div class="layui-btn layui-btn-xs layui-btn-normal" v-for="(itemTag,indexTag) in listTag">
<span>{{itemTag}}</span>
<i class="layui-icon layui-icon-close" @click.stop="removeItem(itemTag,indexTag)"></i>
</div>
<input type="text" class="main-input" ref="tagInputMain" @keydown="onInputChange" @keydown.enter="onInputConfirm" v-model="inputValue" placeholder="输入标签" :style="{width:inputWidth+'px'}">
</div>
<div class="input-preshow" ref="preshow">
{{inputValuePreview}}
</div>
</div>

114
public/static/plugs/lay-module/tagInput/tagInput.js Normal file
View File

@@ -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();
})

31
public/static/plugs/lay-module/tagInput/tagInput.scss Normal file
View File

@@ -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;
}
}