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
2023-11-17 17:44:13 +08:00
parent 494ccc144a
commit ebd774ddf7
7 changed files with 122 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/static/plugs/lay-module/propertyInput/propertyInput.css
View File

@@ -3,4 +3,16 @@
}
.property-input-container .input-item .input-option {
white-space: nowrap;
}
.property-input-container .input-item .layui-textarea {
min-height: auto;
}
.property-input-container .input-item td {
vertical-align: top;
}
.property-input-container .input-item .input-radio label {
margin-right: 10px;
}
.property-input-container .input-item .input-radio .item-radio {
display: inline-block;
}

16
public/static/plugs/lay-module/propertyInput/propertyInput.html
View File

@@ -5,7 +5,21 @@
<tr class="input-item" :key="item.uid" v-for="(item,index) in listItem">
<td class="input-value" :class="item.uid+itemField.key" :key="'drag-item-'+indexField" v-for="(itemField,indexField) in field">
<input type="text" class="layui-input" :placeholder="'请输入'+itemField.title" :value="item[itemField.key]" @change="onItemChange(item,index,itemField,$event)">
<template v-if="itemField.type == 'text'">
<input type="text" class="layui-input" :placeholder="'请输入'+itemField.title" :value="item[itemField.key]" @change="onItemChange(item,index,itemField,$event)">
</template>
<template v-else-if="itemField.type == 'textarea'">
<textarea class="layui-textarea" :style="{height: itemField.height}" :placeholder="'请输入'+itemField.title" :value="item[itemField.key]" @change="onItemChange(item,index,itemField,$event)" rows="1"></textarea>
</template>
<template v-else-if="itemField.type == 'radio'">
<div class="input-radio">
<template v-for="(itemSelect,indexSelect) in itemField.selectList">
<input lay-ignore class="item-radio" type="radio" :name="itemField.key+item.uid" :id="itemField.key+item.uid+indexSelect" :value="itemSelect.value" :checked="item[itemField.key] == itemSelect.value" @change="onItemChange(item,index,itemField,$event)">
<label :for="itemField.key+item.uid+indexSelect">{{itemSelect.title}}</label>
</template>
</div>
</td>
<td class="input-option">
<div class="layui-btn-group">

80
public/static/plugs/lay-module/propertyInput/propertyInput.js
View File

@@ -36,7 +36,6 @@
var options = $.extend(defaultOption, data);
options.value = $.trim(options.value);
// 处理field参数
// 如果是字符串，则转为json
if (typeof options.field === 'string') {
@@ -47,6 +46,7 @@
options.field = eval('(' + options.field + ')');
} catch (e) {
options.field = [];
console.error('field参数格式错误');
}
}
}
@@ -89,7 +89,7 @@
}
}
// 如果field没有key或title，则初始化
// 如果field没有key、title、type、default，则初始化
for (var i = 0; i < options.field.length; i++) {
if (!options.field[i].key) {
options.field[i].key = 'name';
@@ -97,6 +97,74 @@
if (!options.field[i].title) {
options.field[i].title = '名称';
}
if (!options.field[i].type) {
options.field[i].type = 'text';
}
if (!options.field[i].default) {
options.field[i].default = '';
}
// 如果type是textarea且没有定义height，则高度为40px
if (options.field[i].type == 'textarea' && !options.field[i].height) {
options.field[i].height = '40px';
}
// 如果type是radio
if (options.field[i].type == 'radio') {
// selectList支持以下三种形式的数据
// 1 ['string1','string2']
// 2 [{title:'string1',value:'string1'},{title:'string2',value:'string2'}]
// 3 {string1:'string1',string2:'string2'}
// 第2个是标准格式
// 如果没有定义selectList
if (!options.field[i].selectList) {
options.field[i].selectList = [
{
title: '是',
value: 1
},
{
title: '否',
value: 0
}
];
}
// 如果selectList是数组，但是数组的元素是字符串，则将该元素转为对象，title和value都为该元素
if (Array.isArray(options.field[i].selectList)) {
for (var j = 0; j < options.field[i].selectList.length; j++) {
if (typeof options.field[i].selectList[j] === 'string') {
options.field[i].selectList[j] = {
title: options.field[i].selectList[j],
value: options.field[i].selectList[j]
};
}
}
} else if (typeof options.field[i].selectList === 'object') {
// 如果selectList是对象，则将该对象转为数组
var selectList = [];
for (var key in options.field[i].selectList) {
selectList.push({
title: options.field[i].selectList[key],
value: key
});
}
options.field[i].selectList = selectList;
}
// selectList必须包含title和value，如果没有则报错
for (var j = 0; j < options.field[i].selectList.length; j++) {
if (!options.field[i].selectList[j].title || !options.field[i].selectList[j].value) {
console.error('selectList的元素必须包含title和value');
}
}
}
}
// 处理value参数
@@ -162,12 +230,12 @@
var emptyItem = {};
for (var i = 0; i < this.field.length; i++) {
emptyItem[this.field[i].key] = '';
}
emptyItem.uid = ua.randdomString();
for (var i = 0; i < this.field.length; i++) {
emptyItem[this.field[i].key] = this.field[i].default;
}
this.listItem.push(emptyItem);
this.updateValue(this.listItem);

18
public/static/plugs/lay-module/propertyInput/propertyInput.scss
View File

@@ -7,5 +7,23 @@
.input-option{
white-space: nowrap;
}
.layui-textarea{
min-height: auto;
}
td{
vertical-align: top;
}
.input-radio{
label{
margin-right: 10px;
}
.item-radio{
display: inline-block;
}
}
}
}

1
public/static/plugs/ulthon-admin/ulthon-admin.js
View File

@@ -2328,6 +2328,7 @@
var list = document.querySelectorAll('[data-toggle="property-input"]');
$.each(list, function (i, v) {
var data = $(v).data();
data.value = $(v).text();
propertyInput.render(v, data, admin);