<!DOCTYPE html>
<html xmlns
:th="http
://www
.thymeleaf.org">
<head>
<meta charset="utf-8">
<title></title>
<header th
:replace="header
::html"></header>
</head>
<body class="pear-container">
<div class="
layui-card">
<div class="
layui-card-body">
<form class="
layui-form" action="">
<div class="
layui-form-item">
<label class="
layui-form-label">模具型号</label>
<div class="
layui-input-inline">
<input type="text" name="modelMold" placeholder="" class="
layui-input">
</div>
<label class="
layui-form-label">模具类型</label>
<div class="
layui-input-inline">
<!-- <select name="dp" id="dp" lay-verify="required"//这个参数为要求必填 lay-filter="xmFilter">-->
<select name="modelType" id="modelType" >
<option value=""></option>
</select>
</div>
<label class="
layui-form-label">在库状态</label>
<div class="
layui-input-inline">
<select name="instockStatus">
<option value=""></option>
<option value="0">在库</option>
<option value="1">不在库</option>
</select>
</div>
<!--<label class="
layui-form-label">报废状态</label>
<div class="
layui-input-inline">
<select name="scrapStatus">
<option value=""></option>
<option value="0">未报废</option>
<option value="1">已报废</option>
</select>
</div>-->
<button id="model-query" class="pear-btn pear-btn-md pear-btn-primary" lay-submit="" lay-filter="model-query">
<i class="
layui-icon
layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="
layui-icon
layui-icon-refresh"></i>
重置
</button>
</div>
</form>
</div>
</div>
<div class="
layui-row
layui-
col-space15">
<!-- <div class="
layui-
col-md9">-->
<div class="
layui-card">
<div class="
layui-card-body">
<table id="model-table" lay-filter="model-table"></table>
</div>
</div>
<!-- </div>-->
</div>
<script type="text/html" id="model-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="
layui-icon
layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="
layui-icon
layui-icon-delete"></i>
删除
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchQR">
<i class="
layui-icon
layui-icon-add"></i>
打印
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="exportTitle">
<i class="
layui-icon
layui-icon-add"></i>
导出标签
</button>
</script>
<script type="text/html" id="instock-status">
<input type="checkbox" name="instockStatus" value="{{d
.modelUuid}}" lay-skin="switch" lay-text="在库|不在库" mid="{{d
.modelUuid}}" lay-filter="instock-status" {{ d
.instockStatus == '0' ? 'checked'
: '' }}>
</script>
<script type="text/html" id="scrap-status">
<input type="checkbox" name="scrapStatus" value="{{d
.modelUuid}}" lay-skin="switch" lay-text="未报废|已报废" mid="{{d
.modelUuid}}" lay-filter="scrap-status" {{ d
.scrapStatus == '0' ? 'checked'
: '' }}>
</script>
<script type="text/html" id="model-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="
layui-icon
layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="
layui-icon
layui-icon-delete"></i></button>
</script>
<script>
layui.use(['upload', 'element', 'layer'], function(){
var $ =
layui.jquery
,upload =
layui.upload
,element =
layui.element
,layer =
layui.layer;
upload
.render({
elem
: '#test3'
,url
: '' //此处配置你自己的上传接口即可
,accept
: 'file' //普通文件
,done
: function(res){
layer
.msg('上传成功');
console
.log(res);
}
});})
</script>
<script>
//下拉框可能会用到 New option
//这个里面的参数说明 第一个是显示的文本，第二个是value值
//例如：new Option(item
.xm, item
.id)第一个参数是下拉列表中显示的值 第二个参数是选中传递给后台的值
layui.use(['form', 'upload','jquery'],function(){
var form =
layui.form;
let $ =
layui.jquery;
$
.ajax({
url
: '/api/model/modelType',
dataType
: '
json',
type
: 'get',
success
: function (data) {
console
.log(data);//下面会提到这个data是什么值
//使用循环遍历，给下拉列表赋值
$
.each(data
.data, function (index, value) {
$('#modelType')
.append(new Option(value
.value,value
.key));// 下拉菜单里添加元素
});
layui.form
.render("select");//重新
渲染 固定
写法
}
})
});
</script>
<script>
layui.use(['table', 'form', 'jquery'], function () {
let table =
layui.table;
let form =
layui.form;
let $ =
layui.jquery;
let
cols = [
[
{type
:'checkbox'},
{title
: 'modelUuid', field
: 'modelUuid', align
:'center', width
:150},
{title
: '模具型号', field
: 'modelMold', align
:'center'},
{title
: '模具类型', field
: 'modelType', align
:'center'},
{title
: '模具id', field
: 'modelId', align
:'center'},
{title
: '在库状态', field
: 'instockStatus', align
:'center',templet
:'#instock-status'},
// {title
: '报废状态', field
: 'scrapStatus', align
:'center',templet
:'#scrap-status'},
// {title
: '报废时间', field
: 'scrapTime', align
:'center'},
// {title
: '报废原因', field
: 'scrapReason', align
:'center'},
{title
: '操作', toolbar
: '#model-bar', align
:'center', width
:130}
]
]
var tableIns =table
.render({
elem
: '#model-table',
url
: '/api/model',
page
: true ,
cols: cols ,
skin
: 'line',
toolbar
: '#model-toolbar',
defaultToolbar
: [{
layEvent
: 'refresh',
icon
: '
layui-icon-refresh',
}, 'filter', 'print', 'exports']
});
// console
.log(tableIns);
table
.on('tool(model-table)', function(obj) {
if (obj
.event === 'remove') {
window
.remove(obj);
} else if (obj
.event === 'edit') {
window
.edit(obj);
}
});
table
.on('toolbar(model-table)', function (obj) {
if (obj
.event === 'add') {
window
.add();
} else if (obj
.event === 'refresh') {
window
.refresh();
} else if (obj
.event === 'batchRemove') {
window
.batchRemove(obj);
}else if (obj
.event === 'batchQR') {
window
.batchQR(obj);
}else if (obj
.event === 'exportTitle') {
window
.exportTitle(obj);
}
});
form
.on('submit(model-query)', function(data){
var formData = data
.field;
var modelUuid = formData
.modelUuid;
var modelId = formData
.modelId;
var modelMold=formData
.modelMold;
var modelType=formData
.modelType;
var instockStatus=formData
.instockStatus;
var scrapStatus=formData
.scrapStatus;
var scrapTime=formData
.scrapTime;
var scrapReason=formData
.scrapReason;
tableIns
.reload({
page
: {
curr
: 1 //重新从第 1 页开始
}
, where
: {//这里传参 向后台
modelUuid
: modelUuid,
modelId
: modelId,
modelMold
: modelMold,
modelType
:modelType,
instockStatus
:instockStatus,
scrapStatus
:scrapStatus
//可传多个参数到后台
... ，分隔
}
, url
: '/api/model'//后台做模糊搜索接口路径
, method
: 'get'
});
return false;
});
window
.add = function () {
layer
.open({
type
: 2,
title
: '新增',
shade
: 0
.1,
area
: ['500px', '500px'],
content
: '/api/model/modelAdd'
});
}
window
.edit = function(obj){
console
.log(obj)
layer
.open({
type
: 2,
title
: '修改',
shade
: 0
.1,
area
: ['500px', '500px'],
content
: '/api/model/modelEdit/?modelUuid='+ obj
.data['modelUuid']
});
}
window
.remove = function(obj){
layer
.confirm('确定要删除该用户', {icon
: 3, title
:'提示'}, function(index){
layer
.close(index);
let loading = layer
.load();
$
.ajax({
url
: "/api/model?modelUuid="+obj
.data['modelUuid'],
dataType
:'
json',
type
:'delete',
success
:function(result){
layer
.close(loading);
if(result
.success){
layer
.msg(result
.msg,{icon
:1,time
:1000},function(){
obj
.del();
});
}else{
layer
.msg(result
.msg,{icon
:2,time
:1000});
}
}
})
});
}
window
.batchQR = function (obj) {
let data = table
.checkStatus(obj
.config
.id)
.data;
if (data
.length === 0) {
layer
.msg("未选中数据", {
icon
: 3,
time
: 1000
});
return false;
}
let ids = "";
for (let i = 0; i < data
.length; i++) {
ids += data[i]
.modelUuid + ",";
}
ids = ids
.substr(0, ids
.length - 1);
layer
.confirm('确定要打印这些型号的二维码', {
icon
: 3,
title
: '提示'
}, function (index) {
layer
.close(index);
let loading = layer
.load();
$
.ajax({
url
: "batchQR/?ids=" + ids,
dataType
: '
json',
type
: 'get',
success
: function (result) {
layer
.close(loading);
if (result
.success) {
layer
.msg(result
.msg, {
icon
: 1,
time
: 1000
}, function () {
table
.reload('model-table');
});
} else {
layer
.msg(result
.msg, {
icon
: 2,
time
: 1000
});
}
}
})
});
}
// 打印标签
window
.exportTitle = function (obj) {
let data = table
.checkStatus(obj
.config
.id)
.data;
if (data
.length === 0) {
layer
.msg("未选中数据", {
icon
: 3,
time
: 1000
});
return false;
}
var list = [];
for (let i = 0; i < data
.length; i++) {
var map={};
map["modelUuid"]=data[i]
.modelUuid;
map["modelId"]=data[i]
.modelId;
map["modelMold"]=data[i]
.modelMold;
map["modelType"]=data[i]
.modelType;
list
.push(map);
}
var data
Json=
JSON
.stringify(list);
layer
.confirm('确定要导出这些型号的标签', {
icon
: 3,
title
: '提示'
}, function (index) {
layer
.close(index);
let loading = layer
.load();
$
.ajax({
url
: "/api/model/exportTitle",
data
:data
Json,
dataType
: '
json',
contentType
:'application/
json',
type
: 'post',
success
: function (result) {
layer
.close(loading);
if (result
.success) {
layer
.msg(result
.msg, {
icon
: 1,
time
: 1000
}, function () {
table
.reload('model-table');
});
} else {
layer
.msg(result
.msg, {
icon
: 2,
time
: 1000
});
}
}
})
});
}
window
.batchRemove = function (obj) {
let data = table
.checkStatus(obj
.config
.id)
.data;
if (data
.length === 0) {
layer
.msg("未选中数据", {
icon
: 3,
time
: 1000
});
return false;
}
let ids = "";
for (let i = 0; i < data
.length; i++) {
ids += data[i]
.organizationId + ",";
}
ids = ids
.substr(0, ids
.length - 1);
layer
.confirm('确定要删除这些用户', {
icon
: 3,
title
: '提示'
}, function (index) {
layer
.close(index);
let loading = layer
.load();
$
.ajax({
url
: "batchRemove/" + ids,
dataType
: '
json',
type
: 'delete',
success
: function (result) {
layer
.close(loading);
if (result
.success) {
layer
.msg(result
.msg, {
icon
: 1,
time
: 1000
}, function () {
table
.reload('model-table');
});
} else {
layer
.msg(result
.msg, {
icon
: 2,
time
: 1000
});
}
}
})
});
}
window
.refresh = function (param) {
table
.reload('model-table');
}
})
</script>
</body>
</html>我要新增一个上传文件的按钮和
方法，请根据我的代码生成
扫一扫
3636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
