zhangnian
LinTiee 9 months ago
parent cd8fb5a54e
commit f8b0cea41a

@ -233,41 +233,45 @@
var tableIns;
layui.use(['jquery', 'form', 'layer', 'table','upload'], function () {
var $ = layui.jquery;
var form = layui.form;
var layer = layui.layer;
var table = layui.table;
var upload = layui.upload;
var $ = layui.jquery; // 引入jQuery模块
var form = layui.form; // 引入表单模块
var layer = layui.layer; // 引入弹出层模块
var table = layui.table; // 引入表格模块
var upload = layui.upload; // 引入文件上传模块
//初始化表格 加载数据
tableIns = table.render({
elem: "#goodsTable",
title: "商品数据表格",
url: "/goods/loadAllGoods",
toolbar: "#goodsToolBar",
page: true,
height: "full-180",
cols: [ [
{field: 'id', title: 'ID', align: 'center',width:'50'},
{field: 'goodsname', title: '', align: 'center',width:'150'},
{field: 'providername', title: '', align: 'center',width:'150'},
{field: 'produceplace', title: '', align: 'center',width:'150'},
{field: 'description', title: '', align: 'center',width:'150'},
{field: 'price', title: '', align: 'center',width:'90'},
{field: 'number', title: '', align: 'center',width:'90'},
{field: 'dangernum', title: '', align: 'center',width:'100'},
{field: 'goodsimg', title: '', align: 'center',width:'150', templet:function(d){
return '<img width=40 height=40 src=/file/showImageByPath?path='+d.goodsimg+ ' />';
}},
{field: 'size', title: '', align: 'center',width:'120'},
{field: 'goodspackage', title: '', align: 'center',width:'120'},
{field: 'productcode', title: '', align: 'center',width:'130'},
{field: 'promitcode', title: '', align: 'center',width:'130'},
{field: 'available', title: '', align: 'center',width:'100',templet:function (d) {
return d.available==1?'<font color="blue"></font>':'<font color="red"></font>';
}},
{fixed: 'right', title: '', toolbar: '#goodsRowBar', align: 'center',width:'180'}
] ],
elem: "#goodsTable", // 绑定元素ID
title: "商品数据表格", // 表格标题
url: "/goods/loadAllGoods", // 数据接口
toolbar: "#goodsToolBar", // 工具栏模板选择器
page: true, // 开启分页
height: "full-180", // 设置表格高度
cols: [[ // 定义表头
{field: 'id', title: 'ID', align: 'center', width: '50'},
{field: 'goodsname', title: '', align: 'center', width: '150'},
{field: 'providername', title: '', align: 'center', width: '150'},
{field: 'produceplace', title: '', align: 'center', width: '150'},
{field: 'description', title: '', align: 'center', width: '150'},
{field: 'price', title: '', align: 'center', width: '90'},
{field: 'number', title: '', align: 'center', width: '90'},
{field: 'dangernum', title: '', align: 'center', width: '100'},
{
field: 'goodsimg', title: '', align: 'center', width: '150', templet: function (d) {
return '<img width=40 height=40 src=/file/showImageByPath?path=' + d.goodsimg + ' />';
}
},
{field: 'size', title: '', align: 'center', width: '120'},
{field: 'goodspackage', title: '', align: 'center', width: '120'},
{field: 'productcode', title: '', align: 'center', width: '130'},
{field: 'promitcode', title: '', align: 'center', width: '130'},
{
field: 'available', title: '', align: 'center', width: '100', templet: function (d) {
return d.available == 1 ? '<font color="blue"></font>' : '<font color="red"></font>';
}
},
{fixed: 'right', title: '', toolbar: '#goodsRowBar', align: 'center', width: '180'}
]],
done: function (data, curr, count) {
//不是第一页时如果当前返回的数据为0那么就返回上一页
if (data.data.length == 0 && curr != 1) {
@ -281,163 +285,160 @@
});
//初始化查询条件的下拉列表
$.get("/provider/loadAllProviderForSelect",function (res) {
var data = res.data;
var dom = $("#select_providerid");
var html = '<option value="0"></option>';
$.each(data,function (index, item) {
html += '<option value="'+item.id+'">'+item.providername+'</option>';
$.get("/provider/loadAllProviderForSelect", function (res) {
var data = res.data; // 获取返回的数据
var dom = $("#select_providerid"); // 获取下拉列表的DOM元素
var html = '<option value="0"></option>'; // 初始化下拉列表的HTML内容
$.each(data, function (index, item) {
html += '<option value="' + item.id + '">' + item.providername + '</option>'; // 动态添加选项
})
dom.html(html);
//重新渲染下拉列表
form.render("select");
dom.html(html); // 将生成的HTML内容添加到下拉列表中
form.render("select"); // 重新渲染下拉列表
});
//监控模糊查询按钮事件
form.on("submit(doSearch)", function (data) {
tableIns.reload({
where: data.field,
where: data.field, // 设置查询条件
page: {
curr: 1
curr: 1 // 重置到第一页
}
});
return false;
return false; // 阻止表单默认提交行为
});
//监控工具条事件
// 监控工具条事件
table.on("toolbar(goodsTable)", function (obj) {
switch (obj.event) {
case 'add':
case 'add': // 添加按钮事件
openAddLayer();
break;
case 'deleteBatch':
case 'deleteBatch': // 批量删除按钮事件
batchDeleteGoods();
break;
};
}
});
//监控行工具条事件
table.on("tool(goodsTable)", function (obj) {
//获取当前行数据
var data = obj.data;
var data = obj.data; // 获取当前行数据
switch (obj.event) {
case 'delete':
case 'delete': // 删除按钮事件
deleteGoods(data);
break;
case 'update':
case 'update': // 更新按钮事件
updateGoods(data);
break;
};
}
});
//文件上传
upload.render({
elem: '.thumbBox',
url: '/file/uploadFile',
acceptMime:'image/*',
field:'mf',
method : "post",
done: function(res, index, upload){
var path=res.path;
$('.thumbImg').attr('src','/file/showImageByPath?path='+path);
$('.thumbBox').css("background","#fff");
elem: '.thumbBox', // 绑定上传元素
url: '/file/uploadFile', // 上传接口地址
acceptMime: 'image/*', // 接受的文件类型
field: 'mf', // 上传字段名
method: "post", // 请求方式
done: function (res, index, upload) {
var path = res.path;
$('.thumbImg').attr('src', '/file/showImageByPath?path=' + path);
$('.thumbBox').css("background", "#fff");
//给隐藏域赋值
$("#goodsimg").val(path);
}
});
var mainIndex;
var url;
var mainIndex; // 用于存储弹出层的索引
var url; // 用于存储请求的URL地址
//打开添加弹出层
// 打开添加弹出层
function openAddLayer() {
mainIndex = layer.open({
type:1,
content:$("#addOrUpdateDiv"),
area:['700px','500px'],
title:'',
success:function () {
$("#dataFrm")[0].reset();
url="/goods/addGoods";
$.get("/provider/loadAllProviderForSelect",function(res){
var data=res.data;
var dom=$("#providerid");
var html='<option value="0"></option>'
$.each(data,function(index,item){
html+='<option value="'+item.id+'">'+item.providername+'</option>'
type: 1, // 弹出层类型为页面层
content: $("#addOrUpdateDiv"), // 弹出层内容为id为addOrUpdateDiv的元素
area: ['700px', '500px'], // 设置弹出层大小
title: '', // 设置弹出层标题
success: function () {
$("#dataFrm")[0].reset(); // 重置表单
url = "/goods/addGoods"; // 设置提交表单的URL
$.get("/provider/loadAllProviderForSelect", function (res) {
var data = res.data; // 获取供应商数据
var dom = $("#providerid"); // 获取供应商下拉列表元素
var html = '<option value="0"></option>'; // 初始化下拉列表选项
$.each(data, function (index, item) {
html += '<option value="' + item.id + '">' + item.providername + '</option>'; // 动态生成下拉列表选项
});
dom.html(html);
form.render("select");
dom.html(html); // 将生成的选项添加到下拉列表中
form.render("select"); // 重新渲染下拉列表
});
//设置默认为无图片
$(".thumbImg").attr("src",'/file/showImageByPath?path=images/noDefaultImage.jpg');
$("#goodsimg").val('/images/noDefaultImage.jpg');
// 设置默认图片
$(".thumbImg").attr("src", '/file/showImageByPath?path=images/noDefaultImage.jpg');
$("#goodsimg").val('/images/noDefaultImage.jpg'); // 设置默认图片路径到隐藏域
}
});
}
//打开修改的弹出层
// 打开修改的弹出层
function updateGoods(data) {
mainIndex = layer.open({
type:1,
content:$("#addOrUpdateDiv"),
area:['700px','500px'],
title:'',
success:function () {
//清空原有的数据
$("#dataFrm")[0].reset();
//装载新的数据
form.val("dataFrm",data);
//图片进行回显
$(".thumbImg").attr("src",'/file/showImageByPath?path='+data.goodsimg);
//下拉列表的回显
$.get("/provider/loadAllProviderForSelect",function(res){
var redata=res.data;
var dom=$("#providerid");
var html='<option value="0"></option>'
$.each(redata,function(index,item){
if (data.providerid===item.id){
html+='<option value="'+item.id+'" selected>'+item.providername+'</option>'
}else {
html+='<option value="'+item.id+'">'+item.providername+'</option>'
type: 1, // 弹出层类型为页面层
content: $("#addOrUpdateDiv"), // 弹出层内容为id为addOrUpdateDiv的元素
area: ['700px', '500px'], // 设置弹出层大小
title: '', // 设置弹出层标题
success: function () {
$("#dataFrm")[0].reset(); // 重置表单
form.val("dataFrm", data); // 填充表单数据
$(".thumbImg").attr("src", '/file/showImageByPath?path=' + data.goodsimg); // 显示商品图片
$.get("/provider/loadAllProviderForSelect", function (res) {
var redata = res.data; // 获取供应商数据
var dom = $("#providerid"); // 获取供应商下拉列表元素
var html = '<option value="0"></option>'; // 初始化下拉列表选项
$.each(redata, function (index, item) {
if (data.providerid === item.id) {
html += '<option value="' + item.id + '" selected>' + item.providername + '</option>'; // 选中当前供应商
} else {
html += '<option value="' + item.id + '">' + item.providername + '</option>'; // 其他供应商选项
}
});
dom.html(html);
form.render("select");
dom.html(html); // 将生成的选项添加到下拉列表中
form.render("select"); // 重新渲染下拉列表
});
url="/goods/updateGoods";
url = "/goods/updateGoods"; // 设置提交表单的URL
}
});
}
form.on("submit(doSubmit)",function (data) {
$.post(url,data.field,function (res) {
if (res.code==200){
tableIns.reload();
// 表单提交事件处理函数
form.on("submit(doSubmit)", function (data) {
$.post(url, data.field, function (res) {
if (res.code == 200) {
tableIns.reload(); // 刷新表格数据
}
layer.msg(res.msg);
layer.close(mainIndex);
layer.msg(res.msg); // 显示操作结果消息
layer.close(mainIndex); // 关闭弹出层
});
return false;
return false; // 阻止表单默认提交行为
});
//删除
// 删除商品函数
function deleteGoods(data) {
layer.confirm('' + data.goodsname + '退退', {icon: 3, title: ''}, function (index) {
$.post("/goods/deleteGoods", {id: data.id,goodsimg:data.goodsimg},function (res) {
layer.confirm('' + data.goodsname + '退退', {
icon: 3,
title: ''
}, function (index) {
$.post("/goods/deleteGoods", {id: data.id, goodsimg: data.goodsimg}, function (res) {
if (res.code == 200) {
tableIns.reload({
where:"",
});
tableIns.reload({where: ""}); // 刷新表格数据
}
layer.msg(res.msg);
layer.msg(res.msg); // 显示操作结果消息
});
layer.close(index);
layer.close(index); // 关闭确认对话框
});
}
})
});
</script>

Loading…
Cancel
Save