@ -5,6 +5,83 @@ layui.config({
} ) ; } ) ;
/ * *
* 随机生成字符串
* 参考 ： https : //blog.csdn.net/jiciqiang/article/details/121915750
* @ param len 指定生成字符串长度
* /
function getRandomString ( len ) {
let _charStr = 'abacdefghjklmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ0123456789' ,
min = 0 ,
max = _charStr . length - 1 ,
_str = '' ; //定义随机字符串 变量
//判断是否指定长度，否则默认长度为15
len = len || 15 ;
//循环生成字符串
for ( var i = 0 , index ; i < len ; i ++ ) {
index = ( function ( randomIndexFunc , i ) {
return randomIndexFunc ( min , max , i , randomIndexFunc ) ;
} ) ( function ( min , max , i , _self ) {
let indexTemp = Math . floor ( Math . random ( ) * ( max - min + 1 ) + min ) ,
numStart = _charStr . length - 10 ;
if ( i == 0 && indexTemp >= numStart ) {
indexTemp = _self ( min , max , i , _self ) ;
}
return indexTemp ;
} , i ) ;
_str += _charStr [ index ] ;
}
return _str ;
}
//生成6位随机数并存储到sessionStorage
function set _icon _name ( ) {
sessionStorage . icon _name = getRandomString ( 6 ) ;
}
//获取icon名称
function get _icon _name ( ) {
let icon _name ;
//从表单获取
let tmp _name = $ ( "#font_icon" ) . val ( ) ;
if ( tmp _name == undefined ) {
return false ;
}
tmp _name = tmp _name . split ( "/" ) ;
tmp _name = tmp _name . pop ( ) ;
tmp _name = tmp _name . split ( "." ) ;
tmp _name = tmp _name [ 0 ] ;
icon _name = tmp _name ;
//如果不存在，则从session获取
if ( icon _name == "" || icon _name == undefined ) {
icon _name = sessionStorage . icon _name ;
}
//如果session也不存在，则重新设置一个
if ( icon _name == "" || icon _name == undefined ) {
set _icon _name ( ) ;
icon _name = sessionStorage . icon _name ;
}
//最后返回
return icon _name ;
}
//获取老图标的完整路径
function get _old _pic ( ) {
let old _pic = $ ( "#font_icon" ) . val ( ) ;
if ( old _pic != undefined ) {
return old _pic ;
}
else {
return '' ;
}
}
// 2022014
// 2022014
layui . use ( [ 'element' , 'table' , 'layer' , 'form' , 'upload' , 'iconHhysFa' ] , function ( ) { layui . use ( [ 'element' , 'table' , 'layer' , 'form' , 'upload' , 'iconHhysFa' ] , function ( ) {
var element = layui . element ; var element = layui . element ;
@ -21,6 +98,9 @@ layui.use(['element','table','layer','form','upload','iconHhysFa'], function(){
, page : true //开启分页
, page : true //开启分页
, cols : [ [ //表头
, cols : [ [ //表头
{ field : 'id' , title : 'ID' , width : 80 , sort : true , fixed : 'left' } { field : 'id' , title : 'ID' , width : 80 , sort : true , fixed : 'left' }
, { field : 'font_icon' , title : '图标' , width : 60 , templet : function ( d ) {
return '<i class="fa-lg ' + d . font _icon + '"></i>' ;
} }
, { field : 'name' , title : '分类名称' , width : 160 } , { field : 'name' , title : '分类名称' , width : 160 }
, { field : 'fname' , title : '父级分类' , width : 160 } , { field : 'fname' , title : '父级分类' , width : 160 }
, { field : 'add_time' , title : '添加时间' , width : 160 , sort : true , templet : function ( d ) { , { field : 'add_time' , title : '添加时间' , width : 160 , sort : true , templet : function ( d ) {
@ -84,6 +164,18 @@ layui.use(['element','table','layer','form','upload','iconHhysFa'], function(){
, cols : [ [ //表头
, cols : [ [ //表头
{ type : 'checkbox' } //开启复选框
{ type : 'checkbox' } //开启复选框
, { field : 'id' , title : 'ID' , width : 80 , sort : true } , { field : 'id' , title : 'ID' , width : 80 , sort : true }
, { field : 'font_icon' , title : '图标' , width : 60 , templet : function ( d ) {
if ( d . font _icon == null || d . font _icon == "" )
{
return '<img src="static/images/default.png" width="28" height="28">' ;
}
else
{
let random = getRandStr ( 4 ) ;
let font _icon = d . font _icon ;
return ` <img src=" ${ font _icon } ?random= ${ random } " width="28" height="28"> ` ;
}
} }
// ,{field: 'fid', title: '分类ID',sort:true, width:90}
// ,{field: 'fid', title: '分类ID',sort:true, width:90}
, { field : 'category_name' , title : '所属分类' , sort : true , width : 120 } , { field : 'category_name' , title : '所属分类' , sort : true , width : 120 }
, { field : 'url' , title : 'URL' , width : 140 , templet : function ( d ) { , { field : 'url' , title : 'URL' , width : 140 , templet : function ( d ) {
@ -623,7 +715,14 @@ layui.use(['element','table','layer','form','upload','iconHhysFa'], function(){
$ . post ( '/index.php?c=api&method=add_link' , data . field , function ( data , status ) { $ . post ( '/index.php?c=api&method=add_link' , data . field , function ( data , status ) {
//如果添加成功
//如果添加成功
if ( data . code == 0 ) { if ( data . code == 0 ) {
//重新设置图标
set _icon _name ( ) ;
layer . msg ( '已添加！' , { icon : 1 } ) ; layer . msg ( '已添加！' , { icon : 1 } ) ;
//禁用按钮
$ ( "#add_link" ) . addClass ( "layui-btn-disabled" ) ;
setTimeout ( ( ) => {
window . location . reload ( ) ;
} , 1500 ) ;
} }
else { else {
layer . msg ( data . err _msg , { icon : 5 } ) ; layer . msg ( data . err _msg , { icon : 5 } ) ;
@ -648,7 +747,7 @@ layui.use(['element','table','layer','form','upload','iconHhysFa'], function(){
} ) ; } ) ;
//更新链接
//更新链接
form . on ( 'submit(edit_link)' , function ( data ) { form . on ( 'submit(edit_link)' , function ( data ) {
$ . post ( '/index.php?c=api&method=edit_link' , data . field , function ( data , status ) { $ . post ( '/index.php?c=api&method=edit_link&type=console' , data . field , function ( data , status ) {
//如果添加成功
//如果添加成功
if ( data . code == 0 ) { if ( data . code == 0 ) {
layer . msg ( '已更新！' , { icon : 1 } ) ; layer . msg ( '已更新！' , { icon : 1 } ) ;
@ -720,6 +819,40 @@ layui.use(['element','table','layer','form','upload','iconHhysFa'], function(){
} }
} ) ; } ) ;
upload . render ( {
elem : '#iconUpload' //绑定元素
, url : 'index.php?c=api&method=uploadImages' //上传接口
, accept : 'file'
, exts : 'ico|jpg|jpeg|png|bmp|svg' ,
size : 100
, data : {
//传递图片名称
"icon_name" : get _icon _name ( ) ,
//传递老图片名称，接口先将老图片删除
"old_pic" : get _old _pic ( )
} ,
choose : function ( obj ) {
this . data . old _pic = get _old _pic ( ) ;
}
, done : function ( res ) {
//console.log(res);
//上传完毕回调
if ( res . code == 200 ) {
$ ( "#font_icon" ) . val ( res . data . file _name ) ;
//显示图标
$ ( "#show_icon img" ) . attr ( "src" , "/" + res . data . file _name + "?random" + getRandStr ( 4 ) ) ;
}
else if ( res . code < 0 ) {
layer . msg ( res . msg , { icon : 5 } ) ;
layer . close ( ) ;
}
}
, error : function ( ) {
layer . msg ( "发生预料之外的错误！" , { icon : 5 } ) ;
layer . close ( ) ;
}
} ) ;
} ) ; } ) ;
function get _link _info ( ) { function get _link _info ( ) {
@ -963,3 +1096,33 @@ function getRandStr(n) {
} }
return res ; return res ;
} }
//删除图标
function del _link _icon ( ) {
let icon _path = $ ( "#font_icon" ) . val ( ) ;
//如果图标为空
if ( icon _path == "" ) {
layer . msg ( "图标为空，无需删除！" , { icon : 1 } ) ;
return true ;
}
console . log ( icon _path . indexOf ( "http" ) ) ;
//如果图标包含http开头，则是网络图片，直接清空即可
if ( icon _path . indexOf ( "http" ) >= 0 ) {
//置空
$ ( "#font_icon" ) . val ( "" ) ;
$ ( "#show_icon img" ) . attr ( "src" , "" ) ;
layer . msg ( "图标已清空，请保存！" , { icon : 1 } ) ;
return true ;
}
$ . post ( "/index.php?c=api&method=del_link_icon" , { icon _path : icon _path } , function ( data , status ) {
if ( data . code == 200 ) {
$ ( "#font_icon" ) . val ( "" ) ;
$ ( "#show_icon img" ) . attr ( "src" , "" ) ;
layer . msg ( "图标已删除，请保存！" , { icon : 1 } ) ;
}
else {
layer . msg ( data . msg , { icon : 5 } ) ;
}
} ) ;
}
GitHub
