📖 File Reader
{include file="public/top"/}
<link href="__PUBLIC__/layui-v2.9.14/layui/css/layui.css" rel="stylesheet">
<style>
.control-label{
font-weight:normal!important;
}
.col-sm-10{
padding-left:0px;
}
.form-control{
height: 38px;
line-height: 1.3;
}
.bixuan{
color:red;
}
/*图片上传样式*/
.upload{border: 1px dashed #c9c7c7;width: 80px;height: 80px;position: relative;
border-radius: 6px;overflow: hidden;}
.upload .test{position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;outline: none;}
.img_center{width: 100%;height: 100%;}
.img_center img{width: 100%;height: 100%;}
.jia0708_fu{display: flex;align-items: center;flex-wrap: wrap;}
.jia0708_box1{border: 1px dashed #c9c7c7;position: relative;width: 80px;height: 80px;margin-right: 10px;border-radius: 6px;margin-top: 10px;}
.jia0708_box1_img1{width: 100%;height: 100%;border-radius: 6px;}
.jia0708_box1_guan{position: absolute;right: -8px;top: -8px;display: block;width: 20px;height: 20px;background: #acabab;color: #ffffff;border-radius: 100%;text-align: center;line-height: 20px;font-size: 12px;cursor: pointer;}
.jia0708_box1_font1{position: absolute;background: rgba(0,0,0,0.3);color: #ffffff;text-align: center;width: 100%;bottom: 0;left: 0;height: 20px;display: flex;align-items: center;justify-content: center;border-radius: 0 0 6px 6px;}
.jia0708_box1_font1_sort{width: 100%;text-align: center;background-color:#afafaf;border:0px;line-height:20px;}
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" id="vue">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title" style="position: relative;">
<h5>菜单设置 <small>创建</small></h5>
<a href="/admin/Config/menu_list">
<div style="position: absolute;right: 20px;top: 50%;transform: translateY(-50%);width: 100px;height: 40px;text-align: center;line-height: 40px;color: #8d8c8c;font-size: 12px;">返回上一页</div>
</a>
</div>
<div class="ibox-content" style="padding-top:30px;">
<form method="post" onSubmit="return chkform(this)" name="form" id="form" action="" enctype="multipart/form-data" onkeydown="if(event.keyCode==13)return false;" onSubmit="return checkSubmit();" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label"><a class="bixuan">* </a>菜单名称</label>
<div class="col-sm-10" >
<input type="text" v-model="title" value="" placeholder="请输入名称" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">连接地址</label>
<div class="col-sm-10" >
<input type="text" v-model="url" value="" placeholder="请输入地址" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">所属分类</label>
<div class="col-sm-10">
<select v-model="act_id" class="form-control" style="width: 20%;float:left;" @change="ActChange">
<option value="0">顶级</option>
<option v-for="item in menu_act" :value="item.id">{{item.title}}</option>
</select>
<select v-model="act_id2" class="form-control" style="width: 20%;float:left;">
<option value="0">请选择</option>
<option v-for="item in menu_act2" :value="item.id">{{item.title}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">排序</label>
<div class="col-sm-10">
<input type="text" placeholder="请输入排序" v-model="sort" class="form-control" style="width: 20%;">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">图标</label>
<div class="col-sm-10">
<input type="text" placeholder="请输入图标" v-model="icon" class="form-control" style="width: 20%;">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">类型</label>
<div class="col-sm-10">
<div class="radio i-checks">
<label>
<input type="radio" value="1" name="is_left" {if $config_menus.is_left == 1}checked="checked"{/if}>
<i></i> 菜单栏
</label>
<label>
<input type="radio" value="0" name="is_left" {if $config_menus.is_left == 0}checked="checked"{/if}>
<i></i> 权限
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">展示角色权限（菜单栏）</label>
<div class="col-sm-10">
<div class="radio i-checks">
<label>
<input type="radio" value="0" name="role_type" {if $config_menus.role_type == 0}checked="checked"{/if}>
<i></i> 全部
</label>
<label>
<input type="radio" value="1" name="role_type" {if $config_menus.role_type == 1}checked="checked"{/if}>
<i></i> 平台管理员
</label>
<label>
<input type="radio" value="2" name="role_type" {if $config_menus.role_type == 2}checked="checked"{/if}>
<i></i> 店铺管理员
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">显示</label>
<div class="col-sm-10">
<div class="radio i-checks">
<label>
<input type="radio" value="1" name="is_show" {if $config_menus.is_show == 1}checked="checked"{/if}>
<i></i> 是
</label>
<label>
<input type="radio" value="0" name="is_show" {if $config_menus.is_show == 0}checked="checked"{/if}>
<i></i> 否
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">描述</label>
<div class="col-sm-10">
<textarea v-model="describe" placeholder="请输入描述" class="form-control" style="width: 80%;height: 80px;"></textarea>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-primary" type="button" @click="submit()">保存内容</button>
<button class="btn btn-primary" type="button" @click="Icon()" style="background-color: #ff5722;border-color: #ff5722;">查看图标</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
{include file="public/vue"/}
<script>
var vm = new Vue({
el: '#vue',
data: {
'menu_act':[],//所属分类
'id':0,
'act_id':0,
'menu_act2':[],//所属分类二级
'act_id2':0,
'superior_id':0,//所属上级
'title':'',
'url':'',
'sort':'',
'icon':'',
'is_left':0,
'is_show':0,
'role_type':0,
'describe':'',
},
mounted () {
},
methods: {
/*菜单详情*/
MenuInfo(){
var that = this;
req_post('/admin/Config/menu_info', {'id':that.id}).then(res => {
if (res.code == 200){
that.title = res.data.info.title;
that.url = res.data.info.url;
that.sort = res.data.info.sort;
that.icon = res.data.info.icon;
that.is_left = res.data.info.is_left;
that.is_show = res.data.info.is_show;
that.role_type = res.data.info.role_type;
that.describe = res.data.info.describe;
that.superior_id = res.data.info.superior_id;
that.act_id = res.data.act_id;
if (res.data.act_id > 0){
that.ActList(res.data.act_id)
}
that.act_id2 = res.data.act_id2;
}
});
},
/*所属分类*/
ActList(superior_id){
var that = this;
req_post('/admin/Config/menu_act', {'superior_id':superior_id}).then(res => {
if (res.code == 200){
if (superior_id == 0){
that.menu_act = res.data.list;
}else{
that.menu_act2 = res.data.list;
}
}
});
},
/*分类切换*/
ActChange(){
var that = this;
that.act_id2 = 0;
that.menu_act2 = [];
that.ActList(that.act_id,0);
},
/*表单提交*/
submit(){
var that = this;
var is_show = document.form.is_show.value;
var is_left = document.form.is_left.value;
var role_type = document.form.role_type.value;
if (that.act_id){
that.superior_id = that.act_id;
}
if (that.act_id2){
that.superior_id = that.act_id2;
}
req_post('/admin/Config/menu_update', {'id':that.id,'superior_id':that.superior_id,'title':that.title,'url':that.url,'sort':that.sort,'icon':that.icon,'is_left':is_left,'is_show':is_show,'role_type':role_type,'describe':that.describe}).then(res => {
if (res.code == 200){
if (res.code == 200){
layer.msg(res.msg,{
icon:1,
time:1800,
end:function () {
window.location.href="/admin/Config/menu_list.html";
}
})
}
}
});
},
/*查看图标*/
Icon(){
parent.layer.open({
type: 2,
title: '查看图标',
shadeClose: true,
shade: 0.5,
maxmin: true, //开启最大化最小化按钮
area: ['70%','80%'],
content: '/admin/Config/menu_icon',
end:function(res,err) {
}
});
},
},
created() {
this.id = "{$id}";
if (this.id > 0){
this.MenuInfo();
}
this.ActList(0);
}
})
</script>
<!-- 全局js -->
<script src="__PUBLIC__/admin/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/admin/js/bootstrap.min.js?v=3.3.7"></script>
<!-- iCheck -->
<script src="__PUBLIC__/admin/js/plugins/iCheck/icheck.min.js"></script>
<!--编辑器引入文件-->
{include file="public/editor"/}
<script>
$(document).ready(function () {
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
});
});
</script>
<script>
//获取图片路劲的方法，兼容多种浏览器，通过createObjectURL实现
function getObjectURL(file){
var url = null;
if(window.createObjectURL != undefined){
url = window.createObjectURL(file);//basic
}else if(window.URL != undefined){
url = window.URL.createObjectURL(file);
}else if(window.webkitURL != undefined){
url = window.webkitURL.createObjectURL(file);
}
return url;
}
//实现功能代码
$(function(){
$(".test").change(function(){
var path = $(".test").value;
var objUrl = getObjectURL(this.files[0]);
if(objUrl){
// $('.img1-img').attr("src",objUrl);
$(this).parents('.upload').find('.img1-img').attr("src",objUrl);
}
});
})
</script>
</body>
</html>