15
06月
2020
{extend name="index/admin/index"}
{block name="right"}
<div class="company-right">
<div class="top-bar">
<span>栏目管理</span>
</div>
<!-- 主体内容 -->
<div class="site-text">
<p>
<i class="layui-icon layui-icon-tips"></i> 点击栏目名称和排序进行修改，只能修改子栏目的排序，数字大排在后面
</p>
</div>
<table class="layui-table" lay-data="{literal}{url:'/index/admin/cateInfo', id:'table1'}{/literal}" lay-filter="table1">
<thead>
<tr>
<th lay-data="{field:'name', templet: '#nameTpl', edit: 'text', minWidth: 150, }">栏目名称</th>
<th lay-data="{field:'order', templet: '#sortTpl', edit: 'text', width: 60}">排序</th>
<th lay-data="{field:'explain', templet: '#descTpl'}">说明</th>
<th lay-data="{toolbar: '#tbOperate', minWidth: 120, align: 'center'}">操作</th>
</tr>
</thead>
</table>
<script type="text/html" id="sortTpl">
{{# if (d.f_id == '0') { }}
{{# } else { }}
{{d.order}}
{{# } }}
</script>
<script type="text/html" id="nameTpl">
{{# if(d.f_id > 0){ }} └─ {{# } }}
{{d.name}}
</script>
<script type="text/html" id="tbOperate">
{{# if (d.f_id == '0') { }}
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="additem"> 添加子栏目 </a>
<input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-filter="show" lay-text="隐藏|隐藏" {{ d.status == 0 ? 'checked' : '' }}>
{{# } else { }}
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
{{# } }}
</script>
<br>
<fieldset class="layui-elem-field layui-field-title">
<legend>帮助说明</legend>
</fieldset>
<div class="layui-elem-quote layui-text">
<p>
1、【关于我们】属于单页面，你可以把【关于我们】改成【公司简介】，或者在下面添加二级分类：比如【公司简介】、【企业文化】等。
<br>一个二级分类只对应一个页面。
</p>
<p style="height: 10px"></p>
<p>
2、【产品展示】属于图片列表页，假如你是一家展览公司没产品，你可以把【产品展示】改成【展会信息】。
</p>
</div>
<div class="layui-row" id="popWindow" style="display: none;">
<form class="layui-form layui-from-pane" action="" style="margin: 20px 0">
<div class="layui-form-item">
<label class="layui-form-label">栏目名称</label>
<div class="layui-input-inline">
<input type="text" name="name" required="" lay-verify="required" id="addName" placeholder="请输入栏目名称" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-inline">
<input type="text" name="order" required="" lay-verify="required" value="1" maxlength="5" placeholder="数字大排在后面" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="formSubmit">确认添加</button>
</div>
</div>
</form>
</div>
<!-- 主体内容 -->
</div>
{/block}
{block name="js"}
<script>
layui.use(['jquery','table','form'], function(){
var table = layui.table;
var $ = jQuery = layui.$;
var form = layui.form;
$('.company-tree dd a').eq(1).addClass('active'); //样式选中
//监听隐藏操作
form.on('switch(show)', function(obj){
var id = this.value;
var field = this.name;
var value = obj.elem.checked != true ? 1 : 0;
console.log(id+field+value);
$.ajax({
url: "/index/admin/cateStatus",
type: 'post',
data: { 'id': id, 'field': field, 'value': value },
dataType: 'json',
beforeSend () {
layer.load(2);
},
success: function (resdata) {
if(resdata.code) {
layer.msg(resdata.msg);
table.reload('table1');
}else {
layer.msg(resdata.msg, function(){ });
}
},
complete (resdata, status) {
layer.closeAll('loading');
},
fail: function (err, status) {
console.log(err)
}
});
});
//监听工具条
table.on('tool(table1)', function(obj) {
var data = obj.data;
if (obj.event === 'additem') {
layer.open({
//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
type: 1,
title: "添加【"+data.name+"】下面的子栏目",
area: ['320px', '280px'],
content: $("#popWindow")//引用的弹出层的页面层的方式加载修改界面表单
});
//动态向表传递赋值
setFormValue(obj, data);
} else if (obj.event === 'del'){
layer.confirm('真的删除么', function(index){
layer.close(index);
$.post("/index/admin/cateDel", { 'id': data.id }, function(res){
if(res.code) {
obj.del();
layer.msg(res.msg);
}else{
layer.msg(res.msg,function(){ });
}
});
});
}
});
function setFormValue(obj, rowdata){
//监听提交
form.on('submit(formSubmit)', function(formdata) {
console.log(rowdata);
formdata.field.f_id = rowdata.id;
formdata.field.u_id = rowdata.u_id;
formdata.field.explain = rowdata.explain;
formdata.field.order = 1;
var param = formdata.field; //定义临时变量获取表单提交过来的数据
var btntext = formdata.elem.innerHTML; //提交按钮的文本
console.log(param);
$.ajax({
url: "/index/admin/cateAdd",
type: 'POST',
data: param,
beforeSend () {
formdata.elem.disabled = true;
formdata.elem.innerHTML = '提交中...';
layer.load(2);
},
success:function (resdata) {
if(resdata.code){
layer.msg(resdata.msg);
layer.closeAll('page');//关闭弹出层
$('#addName').val('');
table.reload('table1');
}else{
layer.msg(resdata.msg, {icon:5, shift: 6, shade: [0.2, '#000']});
}
},
complete (data, status) {
formdata.elem.disabled = false;
formdata.elem.innerHTML = btntext;
layer.closeAll('loading');
},
fail: function (err, status) {
console.log(err)
}
});
return false;
})
}
//监听单元格编辑
table.on('edit(table1)', function(obj) {
var rowdata = obj.data, //得到所在行所有键值
field = obj.field;
if (field == 'order' && rowdata.f_id == 0) {
//console.log(obj);
layer.msg('只能修改子栏目的排序',function(){ });
return;
}
$.ajax({
url: "/index/admin/cateEdit",
type: 'post',
data: rowdata,
dataType: 'json',
beforeSend () {
layer.load(2);
},
success: function (resdata) {
//console.log(data);
if(resdata.code) {
layer.msg(resdata.msg);
table.reload('table1');
}else {
layer.msg(resdata.msg, function(){ });
}
},
complete () {
layer.closeAll('loading');
},
fail: function (err) {
console.log(err)
}
});
});
});
</script>
{/block}树状图是在查询中做了排序
//一级栏目
$cateInfo = Db::table('index_cate')->order('order asc')->order('id desc')->where('f_id',0)->where('u_id',$userInfo['id'])->select();
// //二级栏目
$cateInfom = Db::table('index_cate')->order('order asc')->order('id desc')->where('f_id','neq',0)->where('u_id',$userInfo['id'])->select();
$array = [];
//一级二级栏目排序
foreach($cateInfo as $k => $v){
array_push($array,$cateInfo[$k]);
foreach ($cateInfom as $a => $b){
if ($b['f_id'] == $v['id']){
array_push($array,$cateInfom[$a]);
}
}
}
$data['code'] = 0;
$data['data'] = $array;
return json($data);