优化表格选择器,支持textarea,支持多字段显示;

This commit is contained in:
2024-04-10 16:33:15 +08:00
parent 0cf8c1773c
commit 77bcee07c5
5 changed files with 36 additions and 17 deletions

View File

@@ -12,12 +12,12 @@ use think\console\Output;
class VersionBase extends Command
{
public const VERSION = 'v2.0.96';
public const VERSION = 'v2.0.97';
public const LAYUI_VERSION = '2.8.17';
public const COMMENT = [
'优化PHP配置进程数',
'优化表格选择器支持textarea支持多字段显示',
'发布新版本',
];

View File

@@ -2,6 +2,7 @@
display: flex;
align-items: center;
justify-content: left;
flex-wrap: wrap;
}
.table-data-container .layui-input .placeholder {
color: #808080;

View File

@@ -1,11 +1,12 @@
<div class="table-data-container" ref="tableData">
<input type="hidden" :name="setting.name" :value="value" :lay-verify="setting.required == 1?'required':''">
<div class="layui-input" @click="openSelectPage">
<div :class="setting.className" @click="openSelectPage">
<div class="placeholder" v-if="listSelected.length == 0">{{setting.placeholder}}</div>
<div class="layui-btn layui-btn-xs layui-btn-normal" v-for="(itemSelect,indexSelect) in listSelected">
<span>{{itemSelect[setting.fieldName]}}</span>
<i class="layui-icon layui-icon-close" @click.stop="removeItem(itemSelect,indexSelect)" v-if="setting.readonly != 1"></i>
<div class="layui-btn-container">
<div class="layui-btn layui-btn-xs layui-btn-normal" v-for="(itemSelect,indexSelect) in listSelectedShow">
<span>{{itemSelect['_select_show']}}</span>
<i class="layui-icon layui-icon-close" @click.stop="removeItem(itemSelect,indexSelect)" v-if="setting.readonly != 1"></i>
</div>
</div>
</div>
</div>

View File

@@ -20,7 +20,6 @@
success: function (template) {
tableDataTemplate = template;
}
});
tableData.prototype.render = function (elem, data) {
@@ -41,6 +40,8 @@
height: clientHeight,
placeholder: '请选择',
selectConfirmCallback: 'onTableDataConfirm',
type:'input',
className:'layui-input',
};
var options = $.extend(defaultOption, data);
@@ -55,6 +56,10 @@
options.index += 'select_mode=' + options.selectType;
if(options.type == 'textarea'){
options.className = 'layui-textarea';
}
app = new Vue({
el: elem,
data() {
@@ -72,6 +77,24 @@
this.value = valueList.join(',');
}
},
computed: {
listSelectedShow() {
if (this.setting.fieldName.indexOf('|') < 0) {
return this.listSelected.map(item => item['_select_show'] = item[this.setting.fieldName]);
}
var fieldNameList = this.setting.fieldName.split('|');
return this.listSelected.map(item => {
var showText = '';
fieldNameList.forEach(fieldName => {
showText += item[fieldName] + ' ';
});
item['_select_show'] = showText;
return item;
});
},
},
created() {
this.value = options.selectValue;
if (typeof this.value != 'string') {
@@ -106,7 +129,6 @@
}
var selectedIds = this.listSelected.map(item => item.id);
var index = layer.open({
title: '选择数据',
type: 2,
@@ -122,19 +144,14 @@
if (options.selectType == 'radio') {
this.listSelected = [];
}
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;

View File

@@ -1,8 +1,9 @@
.table-data-container {
.layui-input {
display : flex;
align-items : center;
display: flex;
align-items: center;
justify-content: left;
flex-wrap: wrap;
.placeholder {
color: #808080
@@ -17,7 +18,6 @@
}
}
.layui-form-danger+.layui-input {
border-color: #ff5722 !important;
}