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

新增tableData组件；完成商品标签示例；

Browse Source
This commit is contained in:
augushong
2022-07-05 18:36:28 +08:00
parent 5afca6b412
commit 948461337b
15 changed files with 387 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,11 @@
define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSelect, undefined, miniTheme) {
define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData'], function ($, tableSelect, undefined, miniTheme, tableData) {
window.onInitElemStyle = function () {
miniTheme.renderElemStyle()
$('iframe').each(function(index,iframe){
if(typeof iframe.contentWindow.onInitElemStyle == "function"){
$('iframe').each(function (index, iframe) {
if (typeof iframe.contentWindow.onInitElemStyle == "function") {
iframe.contentWindow.onInitElemStyle();
}
})
@@ -13,6 +13,8 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel
}
window.onInitElemStyle();
var selectMode, selectConfirmCallback;
var form = layui.form,
layer = layui.layer,
table = layui.table,
@@ -294,6 +296,12 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel
}
selectMode = admin.getQueryVariable("select_mode");
selectConfirmCallback = admin.getQueryVariable('select_confirm_callback', 'onTableDataConfirm');
// 判断是否为移动端
if (admin.checkMobile()) {
options.defaultToolbar = !options.search ? ['filter'] : ['filter', {
@@ -309,6 +317,27 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel
}
}
if (selectMode == 'checkbox') {
if (options.cols[0][0].type == 'radio') {
options.cols[0][0].type = 'checkbox';
} else if (options.cols[0][0].type != 'checkbox') {
options.cols[0].unshift({
type: 'checkbox'
})
}
} else if(selectMode == 'radio') {
if (options.cols[0][0].type == 'checkbox') {
options.cols[0][0].type = 'radio';
} else if (options.cols[0][0].type != 'radio') {
options.cols[0].unshift({
type: 'radio'
})
}
}
// 判断元素对象是否有嵌套的
options.cols = admin.table.formatCols(options.cols, options.init);
@@ -322,6 +351,11 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel
// 初始化表格左上方工具栏
options.toolbar = options.toolbar || ['refresh', 'add', 'delete', 'export'];
if (selectMode == 'checkbox' || selectMode == 'radio') {
options.toolbar.unshift('selectConfirm');
}
options.toolbar = admin.table.renderToolbar(options.toolbar, options.elem, options.id, options.init);
// 判断是否有操作列表权限
@@ -347,9 +381,11 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel
// 监听表格开关切换
admin.table.listenEdit(options.init, options.layFilter, options.id, options.modifyReload);
// 监听导出事件
admin.table.listenExport(options);
// 监听表格选择器
admin.table.listenTableSelectConfirm(options)
return newTable;
},
@@ -371,6 +407,8 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel
if (admin.checkAuth('export', elem)) {
toolbarHtml += '<button class="layui-btn layui-btn-sm layui-btn-success easyadmin-export-btn" data-url="' + init.export_url + '" data-table-export="' + tableId + '"><i class="fa fa-file-excel-o"></i> 导出</button>\n';
}
} else if (v === 'selectConfirm') {
toolbarHtml += '<button class="layui-btn layui-btn-sm layui-btn-success easyadmin-export-btn select-confirm" data-table-target="' + tableId + '"> 确定选择</button>\n';
} else if (typeof v === "object") {
$.each(v, function (ii, vv) {
vv.class = vv.class || '';
@@ -959,7 +997,7 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel
// 统一列返回数据处理
returnColumnValue(data) {
if(!data.LAY_COL){
if (!data.LAY_COL) {
return '';
}
var option = data.LAY_COL;
@@ -1100,6 +1138,18 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel
});
}
},
listenTableSelectConfirm(options) {
$('.select-confirm').click(function () {
var checkStatus = table.checkStatus(options.id);
if (checkStatus.data.length == 0) {
layer.msg('请选择数据');
return false;
}
parent.window[selectConfirmCallback](checkStatus.data);
})
},
listenExport: function (options) {
var exportFields = {};
@@ -1270,6 +1320,9 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel
// 监听时间控件生成
admin.api.date();
// 监听通用表格数据控件生成
admin.api.tableData();
// 初始化layui表单
form.render();
@@ -1887,6 +1940,14 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel
});
}
},
tableData() {
var dateList = document.querySelectorAll('[data-toggle="table-data"]');
$.each(dateList, function (i, v) {
var data = $(v).data()
tableData.render(v, data, admin);
});
}
},
getQueryVariable(variable, defaultValue) {
if (typeof defaultValue == 'undefined') {

8
public/static/plugs/lay-module/tableData/tableData.css Normal file
View File

@@ -0,0 +1,8 @@
.table-data-container .layui-input {
display: flex;
align-items: center;
justify-content: left;
}
.table-data-container .layui-input .placeholder {
color: #808080;
}

11
public/static/plugs/lay-module/tableData/tableData.html Normal file
View File

@@ -0,0 +1,11 @@
<div class="table-data-container">
<input type="hidden" :name="setting.name" :value="value">
<div class="layui-input" @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)"></i>
</div>
</div>
</div>

145
public/static/plugs/lay-module/tableData/tableData.js Normal file
View File

@@ -0,0 +1,145 @@
define(['jquery', 'vue'], function ($, Vue) {
const tableDataCss = '/static/plugs/lay-module/tableData/tableData.css';
const tableDataHtml = '/static/plugs/lay-module/tableData/tableData.html';
var tableData = function () {
var cssElement = document.createElement('link');
cssElement.setAttribute('rel', 'stylesheet');
cssElement.setAttribute('href', tableDataCss);
document.body.appendChild(cssElement);
};
var tableDataTemplate = '';
$.ajax({
type: "get",
url: tableDataHtml,
cache: true,
async: false,
success: function (template) {
tableDataTemplate = template;
}
});
tableData.prototype.render = function (elem, data) {
var app;
var clienWidth, clientHeight;
var width = document.body.clientWidth,
height = document.body.clientHeight;
if (width >= 800 && height >= 600) {
clienWidth = '800px';
clientHeight = '600px';
} else {
clienWidth = '100%';
clientHeight = '100%';
}
var defaultOption = {
width: clienWidth,
height: clientHeight,
placeholder: '请选择',
selectConfirmCallback: 'onTableDataConfirm',
}
var options = $.extend(defaultOption, data);
console.log(options);
var valueField = options.valueField;
if (options.index.indexOf('?') > -1) {
options.index += '&'
} else {
options.index += '?'
}
options.index += 'select_mode=' + options.selectType
app = new Vue({
el: elem,
data() {
return {
setting: options,
listSelected: [],
value: ''
}
},
watch: {
listSelected(value) {
console.log(value);
var valueList = value.map(itemValue => itemValue[valueField])
this.value = valueList.join(',')
}
},
created() {
this.value = options.selectValue;
var valueLength = this.value.split(',').length;
loading.show();
$.get(options.index,{
page:1,
limit:valueLength,
filter:JSON.stringify({id:this.value}),
op: JSON.stringify({id:'in'})
},(result)=>{
loading.hide()
this.listSelected = result.data;
})
},
template: tableDataTemplate,
methods: {
openSelectPage() {
var index = layer.open({
title: '选择数据',
type: 2,
area: [options.width, options.height],
content: options.index,
maxmin: true,
moveOut: true,
shadeClose: true,
success: (layero, index) => {
window[options.selectConfirmCallback] = (data) => {
console.log(data);
data.forEach(dataItem => {
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;
window[options.selectConfirmCallback] = undefined;
}
});
},
removeItem(item, index) {
this.listSelected.splice(index, 1);
}
}
})
return app;
}
return new tableData();
})

13
public/static/plugs/lay-module/tableData/tableData.scss Normal file
View File

@@ -0,0 +1,13 @@
.table-data-container {
.layui-input {
display : flex;
align-items : center;
justify-content: left;
.placeholder {
color: #808080
}
.layui-btn {}
}
}