ulthon/ulthon_admin
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_admin.git synced 2026-07-05 17:42:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

开始优化多列和拖动

Browse Source
This commit is contained in:
augushong
2023-11-02 18:24:46 +08:00
parent 00cf8a5bfc
commit 29893bf97a
5 changed files with 116 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
extend/base/admin/view/mall/goods/edit.html
View File

@@ -75,7 +75,7 @@
<div class="layui-form-item full-line">
<label class="layui-form-label">属性（指定列）</label>
<div class="layui-input-block">
<div data-toggle="property-input" data-name="property_static">{$row.property_static|raw|default=''}</div>
<div data-toggle="property-input" data-name="property_static" data-field='{memory_size:"内存",disk_size:"硬盘",cpu_nums:"CPU核心数"}'>{$row.property_static|raw|default=''}</div>
</div>
</div>
<div class="layui-form-item full-line">

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

@@ -1,8 +1,6 @@
.property-input-container .input-item {
display: flex;
align-items: center;
justify-content: flex-start;
}
.property-input-container .input-item .input-value {
min-width: 240px;
}
.property-input-container .input-item .input-option {
white-space: nowrap;
}

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

@@ -1,23 +1,30 @@
<div class="property-input-container" ref="propertyInput">
<input type="hidden" :name="setting.name" :value="value" :lay-verify="setting.required == 1?'required':''">
<draggable tag="div" :list="listItem" class="input-list" handle=".drag-item">
<draggable tag="table" :list="listItem" class="input-list" handle=".drag-item">
<div class="input-item" v-for="(item,index) in listItem">
<div class="input-name"><input type="text" class="layui-input" placeholder="请输入名称" :value="item.name" @change="onItemNameChange(item,index,$event)"></div>
<div class="input-value"><input type="text" class="layui-input" placeholder="请输入数据" :value="item.value" @change="onItemValueChange(item,index,$event)"></div>
<div class="input-option">
<tr class="input-item" slot="header">
<td class="input-item-name" :class="'input-item-name-'+item.key" v-for="(item,index) in field">{{item.title}}</td>
<td class="input-item-name input-item-name-options">操作</td>
</tr>
<tr class="input-item" :key="index" v-for="(item,index) in listItem">
<td class="input-value" :class="'input-item-value-'+itemField.key" 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)">
</td>
<td class="input-option">
<div class="layui-btn-group">
<div class="layui-btn layui-btn-primary drag-item"><i class=" fa fa-arrows"></i></div>
<div class="layui-btn layui-btn-primary" @click="onItemDelete(item,index)"><i class="fa fa-close"></i></div>
</div>
</div>
</div>
<div class="input-item" slot="footer">
</td>
</tr>
<tr class="input-item" slot="footer">
<td>
<div class="layui-btn layui-btn-primary" @click="onAddItem" title="增加"><i class="layui-icon layui-icon-add-1"></i></div>
<div class="layui-btn layui-btn-primary" @click="onResetItem" title="重置"><i class="layui-icon layui-icon-refresh"></i></div>
</div>
</td>
</tr>
</draggable>
</div>

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

@@ -37,6 +37,77 @@
options.value = $.trim(options.value);
// 处理field参数
// 如果是字符串，则转为json
if (typeof options.field === 'string') {
try {
options.field = JSON.parse(options.field);
} catch (e) {
try {
options.field = eval('(' + options.field + ')');
} catch (e) {
options.field = [];
}
}
}
// 如果没有定义，则初始化
if (!options.field) {
options.field = [
{
key: 'name',
title: '名称'
},
{
key: 'value',
title: '数据'
}
];
} else {
// 如果是对象，则转成数组
if (typeof options.field === 'object' && !Array.isArray(options.field)) {
var field = [];
for (var key in options.field) {
field.push({
key: key,
title: options.field[key]
});
}
options.field = field;
} else if (!Array.isArray(options.field) || options.field.length < 1) {
// 如果field不符合规则，则初始化
options.field = [
{
key: 'name',
title: '名称'
},
{
key: 'value',
title: '数据'
}
];
}
}
// 如果field没有key或title，则初始化
for (var i = 0; i < options.field.length; i++) {
if (!options.field[i].key) {
options.field[i].key = 'name';
}
if (!options.field[i].title) {
options.field[i].title = '名称';
}
}
// 处理value参数
// 如果是字符串，则转为json
if (typeof options.value === 'string') {
try {
options.value = JSON.parse(options.value);
} catch (e) {
options.value = [];
}
}
app = new Vue({
el: elem,
@@ -45,31 +116,16 @@
setting: options,
value: '',
listItem: [
{
name: '',
value: ''
}
],
originalValue: ''
originalValue: '',
field: options.field
};
},
watch: {
listItem: {
handler(newValue, oldValue) {
// 在这里标记页面编辑状态
this.value = JSON.stringify(newValue);
},
// 通过指定deep属性为true, watch会监听对象里面每一个值的变化
deep: true
}
},
created() {
if (this.setting.value) {
this.originalValue = this.setting.value;
if (typeof this.setting.value === 'string') {
this.setting.value = JSON.parse(this.setting.value);
}
this.originalValue = $.extend(true, [], this.setting.value);
this.listItem = this.setting.value;
this.value = this.setting.value;
}
@@ -84,44 +140,25 @@
methods: {
onResetItem() {
if (typeof this.originalValue === 'string') {
this.listItem = JSON.parse(this.originalValue);
} else {
this.listItem = this.originalValue;
}
this.listItem = $.extend(true, [], this.originalValue);
},
removeItem(item, index) {
this.listTag.splice(index, 1);
this.listItem.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]);
var emptyItem = {};
for (var i = 0; i < this.field.length; i++) {
emptyItem[this.field[i].key] = '';
}
this.listItem.push(emptyItem);
},
onItemChange(item, index, itemField, event) {
this.listItem[index][itemField.key] = event.target.value;
this.updateValue(this.listItem);
},
onItemDelete(item, index) {
if (this.listItem.length <= 1) {
@@ -135,6 +172,9 @@
this.listItem.splice(index, 1);
}
},
updateValue(newValue) {
this.value = JSON.stringify(newValue);
}
}
});

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

@@ -1,12 +1,11 @@
.property-input-container {
.input-item {
display : flex;
align-items : center;
justify-content: flex-start;
.input-value {
min-width: 240px;
}
.input-option{
white-space: nowrap;
}
}
}