wanghongjun
2 years ago
3 changed files with 427 additions and 31 deletions
@ -0,0 +1,58 @@ |
|||
<?php |
|||
|
|||
namespace app\index\controller; |
|||
|
|||
use think\Db; |
|||
use think\response\Json; |
|||
use think\Exception; |
|||
use think\db\exception\DataNotFoundException; |
|||
use think\db\exception\ModelNotFoundException; |
|||
use think\exception\DbException; |
|||
|
|||
class Product extends Base |
|||
{ |
|||
public function _initialize() |
|||
{ |
|||
// parent::_initialize(); // TODO: Change the autogenerated stub |
|||
if (!session('root')) { |
|||
$this->error('亲，您还没有登录呢！', '/'); |
|||
} |
|||
} |
|||
|
|||
public function index() |
|||
{ |
|||
return $this->fetch(); |
|||
} |
|||
|
|||
/** |
|||
* 获取产品列表 |
|||
* @return Json |
|||
* @throws DataNotFoundException |
|||
* @throws DbException |
|||
* @throws Exception |
|||
* @throws ModelNotFoundException |
|||
*/ |
|||
public function productList() |
|||
{ |
|||
$page = input("get.page") ? input("get.page") : 1; |
|||
$page = intval($page); |
|||
$limit = input("get.limit") ? input("get.limit") : 1; |
|||
$limit = intval($limit); |
|||
$start = $limit * ($page - 1); |
|||
|
|||
$where = []; |
|||
$result = Db::table("bs_product")->where($where)->order('id desc')->limit($start, $limit)->select(); |
|||
$num = Db::table("bs_product")->where($where)->count(); |
|||
|
|||
foreach ($result as &$item) { |
|||
$item['encryptionType'] = $item['encryptionType'] == 1 ? '一型一密' : '一机一密'; |
|||
} |
|||
|
|||
$list["msg"] = ""; |
|||
$list["code"] = 0; |
|||
$list["count"] = $num; |
|||
$list["data"] = $result; |
|||
|
|||
return json($list); |
|||
} |
|||
} |
|||
@ -0,0 +1,323 @@ |
|||
<!DOCTYPE html> |
|||
<html class="x-admin-sm"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>设备信息总览</title> |
|||
<meta name="renderer" content="webkit"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|||
<meta name="viewport" |
|||
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/> |
|||
<link rel="stylesheet" href="/css/font.css"> |
|||
<link rel="stylesheet" href="/css/xadmin.css"> |
|||
<script src="/lib/layui/layui.js" charset="utf-8"></script> |
|||
<script type="text/javascript" src="/js/xadmin.js"></script> |
|||
<!-- 让IE8/9支持媒体查询，从而兼容栅格 --> |
|||
<!--[if lt IE 9]> |
|||
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> |
|||
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> |
|||
<![endif]--> |
|||
<style> |
|||
.layui-table thead span { |
|||
/*background-color: #acd3ed;*/ |
|||
font-size: 15px; |
|||
} |
|||
|
|||
.layui-table tbody tr td div { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.layui-table tbody tr:hover { |
|||
background-color: #f7e8df; |
|||
} |
|||
|
|||
.layui-table tbody tr:hover td div { |
|||
font-size: 18px; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body class="layui-anim layui-anim-scale flag" style="display: none"><br/> |
|||
|
|||
<div class="x-nav"> |
|||
<span class="layui-breadcrumb"> |
|||
<a>首页</a> |
|||
<a>产品信息总览</a> |
|||
<a>产品序列号</a> |
|||
|
|||
</span> |
|||
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:5px;float:right" |
|||
id="refresh" title="刷新"> |
|||
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i> |
|||
</a> |
|||
</div> |
|||
<div class="layui-fluid" style="margin-bottom: 30px;min-height: 740px"> |
|||
<!-- style="width: 90%;margin-left: auto;margin-right: auto;"--> |
|||
<div class="layui-card" style="border-radius: 20px;"> |
|||
|
|||
<div class="layui-card-body" |
|||
style="background-image: linear-gradient(#f7e8df,#ffffff , #f7e8df);border-radius: 20px;"> |
|||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;"> |
|||
<legend class="layui-icon">产品序列号管理 </legend> |
|||
</fieldset> |
|||
<form class="layui-form layui-col-space5" action="" id="myForm"> |
|||
<div class="layui-input-inline"> |
|||
<select lay-verify="choose" lay-filter="choose" name="option"> |
|||
<option value="">选择要查找的内容</option> |
|||
<option value="1">产品ID</option> |
|||
</select> |
|||
</div> |
|||
<div class="layui-inline layui-show-xs-block"> |
|||
<input style="display: none" lay-verify="" id="findText" type="text" name="message" |
|||
autocomplete="false" placeholder="" lay-reqText="" class="layui-input"> |
|||
</div> |
|||
<div class="layui-inline layui-show-xs-block"> |
|||
<button class="layui-btn" lay-submit="" lay-filter="search"> |
|||
<i class="layui-icon"></i>查找 |
|||
</button> |
|||
</div> |
|||
</form> |
|||
<table id="demo" lay-filter="demo"></table> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<script> |
|||
|
|||
|
|||
|
|||
layui.use(['table', 'form', 'layer', 'jquery',], function () { |
|||
var table = layui.table; |
|||
var form = layui.form; |
|||
var layer = layui.layer; |
|||
var $ = layui.jquery; |
|||
|
|||
$("#fresh").click(function () { |
|||
setTimeout(() => window.scrollTo(0, 870), 10); |
|||
}); |
|||
|
|||
$("#refresh").click(function () { |
|||
$("#myForm")[0].reset(); |
|||
layui.form.render(); |
|||
$("#findText").hide(); |
|||
parent.layui.notice.remove(); |
|||
parent.layui.notice.success("设备序列号列表已校准", "<div class = 'layui-icon layui-icon-heart-fill'> 同步成功</div>", parent.noticeOpt6); |
|||
table.render({ |
|||
elem: '#demo' |
|||
, url: '/index/Product/productList' //数据接口 |
|||
, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 |
|||
, loading: true |
|||
, size: 'lg' |
|||
|
|||
, page: { |
|||
layout: ['prev', 'page', 'next', 'count', 'limit']//自定义布局顺序 |
|||
|
|||
, groups: 10 //最多几个跳页按钮 |
|||
, first: false //不显示首页 |
|||
, last: false //不显示尾页 |
|||
} |
|||
, cols: [[ //表头,style: 'background-color: #bee4ca ; color: #2c2525 ' ,style: 'background-color: #acd3ed;color: #2c2525;' ,style: 'background-color: #bda9c5' |
|||
{ |
|||
field: 'productId', |
|||
title: '产品ID', |
|||
minWidth: 100, |
|||
align: 'center' |
|||
} |
|||
, { |
|||
field: 'status', title: '状态', |
|||
width: 90, align: 'center', |
|||
templet: function (d) { |
|||
if (d.status == 1) { |
|||
return '<span style="color: #ab3635;font-family: 黑体;font-weight: bold;">正常</span>' |
|||
} else { |
|||
return '<span style="color: #33912b;font-family: 黑体;font-weight: bold;">停用</span>' |
|||
} |
|||
} |
|||
} |
|||
, { |
|||
field: 'operation', |
|||
title: '操作', |
|||
width: 90, |
|||
align: 'center', |
|||
toolbar: '#barDemo' |
|||
} |
|||
]] |
|||
}); |
|||
}); |
|||
|
|||
//动态显示 |
|||
parent.layui.notice.remove(); |
|||
parent.layui.notice.info('设备信息总览', '已进入', parent.noticeOpt1); |
|||
setTimeout(function () { |
|||
$('.flag').show(); |
|||
tableIns.resize(); |
|||
},20); |
|||
|
|||
|
|||
//自定义验证规则 |
|||
form.verify({ |
|||
choose: function (value) { |
|||
if (!value) { |
|||
parent.layui.notice.remove(); |
|||
parent.layui.notice.error('请选择搜索项', '操作异常', parent.noticeOpt5); |
|||
return '请选择搜索项！' |
|||
} |
|||
// return '请选择搜索项！' |
|||
}, |
|||
message: function (value) { |
|||
if (!value) { |
|||
parent.layui.notice.remove(); |
|||
parent.layui.notice.error('请输入要搜索的内容', '操作异常', parent.noticeOpt5); |
|||
return '请输入要搜索的内容'; |
|||
} |
|||
|
|||
} |
|||
|
|||
}); |
|||
|
|||
// 动态显示搜索选项提示 |
|||
form.on('select(choose)', function (data) { |
|||
// console.log(data.elem); //得到select原始DOM对象 |
|||
// console.log(data.value); //得到被选中的值 |
|||
// console.log(data.othis); //得到美化后的DOM对象 |
|||
var findText = $("#findText"); |
|||
var select = data.value; |
|||
//默认不显示输入框 |
|||
findText.hide(); |
|||
//重置验证类型 |
|||
findText.attr('lay-verify', ''); |
|||
//每次切换搜索项后都要清空里面的值 |
|||
findText.val(''); |
|||
// console.log(findText.val); |
|||
switch (select) { |
|||
case "1": |
|||
findText.attr('lay-verify', 'message'); |
|||
findText.attr('placeholder', '请输入要搜索的设备ID'); |
|||
// findText.attr('lay-reqText', '请输入要搜索的设备ID'); |
|||
findText.show(); |
|||
break; |
|||
case "2": |
|||
findText.attr('lay-verify', 'message'); |
|||
findText.attr('placeholder', '请输入要搜索的设备类型'); |
|||
// findText.attr('lay-reqText', '请输入要搜索的设备类型'); |
|||
findText.show(); |
|||
break; |
|||
} |
|||
|
|||
}); |
|||
|
|||
//生成数据表格 |
|||
var tableIns = table.render({ |
|||
elem: '#demo' |
|||
, url: '/index/Product/productList' //数据接口 |
|||
, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 |
|||
, loading: true |
|||
, size: 'lg' |
|||
|
|||
, page: { |
|||
layout: ['prev', 'page', 'next', 'count', 'limit']//自定义布局顺序 |
|||
|
|||
, groups: 10 //最多几个跳页按钮 |
|||
, first: false //不显示首页 |
|||
, last: false //不显示尾页 |
|||
} |
|||
, cols: [[ //表头,style: 'background-color: #bee4ca ; color: #2c2525 ' ,style: 'background-color: #acd3ed;color: #2c2525;' ,style: 'background-color: #bda9c5' |
|||
{ |
|||
field: 'productId', |
|||
title: '设备ID', |
|||
minWidth: 100, |
|||
align: 'center' |
|||
} |
|||
, { |
|||
field: 'productName', |
|||
title: '设备名称', |
|||
minWidth: 100, |
|||
align: 'center' |
|||
} |
|||
, { |
|||
field: 'productDesc', |
|||
title: '设备描述', |
|||
minWidth: 100, |
|||
align: 'center' |
|||
} |
|||
, { |
|||
field: 'productTypeValue', |
|||
title: '产品分类名称', |
|||
minWidth: 100, |
|||
align: 'center' |
|||
} |
|||
, { |
|||
field: 'secondaryTypeValue', |
|||
title: '二级分类名称', |
|||
minWidth: 100, |
|||
align: 'center' |
|||
} |
|||
, { |
|||
field: 'thirdTypeValue', |
|||
title: '三级分类名称', |
|||
minWidth: 100, |
|||
align: 'center' |
|||
} |
|||
, { |
|||
field: 'encryptionType', |
|||
title: '加密认证方式', |
|||
minWidth: 100, |
|||
align: 'center' |
|||
} |
|||
, { |
|||
field: 'status', title: '状态', |
|||
width: 90, align: 'center', |
|||
templet: function (d) { |
|||
if (d.status == 1) { |
|||
return '<span style="color: #33912b;font-family: 黑体;font-weight: bold;">正常</span>' |
|||
} else { |
|||
return '<span style="color: #ab3635;font-family: 黑体;font-weight: bold;">停用</span>' |
|||
} |
|||
} |
|||
} |
|||
, { |
|||
field: 'operation', |
|||
title: '操作', |
|||
width: 90, |
|||
align: 'center', |
|||
toolbar: '#barDemo' |
|||
} |
|||
]] |
|||
}); |
|||
|
|||
//搜索功能 |
|||
form.on('submit(search)', function (data) { |
|||
layer.msg('搜索中', {time: 500}); |
|||
// console.log(data.field.findTime); |
|||
var load = layer.load(); |
|||
tableIns.reload({ |
|||
where: { //设定异步数据接口的额外参数，任意设 |
|||
choose: data.field.option |
|||
, message: data.field.message |
|||
} |
|||
, page: { |
|||
curr: 1 //重新从第 1 页开始 |
|||
} |
|||
, done: function (res, curr, count) { |
|||
layer.close(load); |
|||
parent.layui.notice.remove(); |
|||
if (count === 0) { |
|||
parent.layui.notice.success(res.msg, '搜索完成', parent.noticeOpt4); |
|||
layer.msg('搜索完成，' + res.msg, {time: 1500}); |
|||
} else { |
|||
parent.layui.notice.success('找到' + count + '条数据', '搜索完成', parent.noticeOpt4); |
|||
layer.msg('搜索完成，找到' + count + '条数据', {time: 1500}); |
|||
} |
|||
|
|||
} |
|||
}); |
|||
|
|||
return false; |
|||
}); |
|||
|
|||
}); |
|||
|
|||
|
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue