WIEN 定制

设计源于灵感,灵感始于积累。

ThinkCMF资源管理美化

ThinkCMF资源管理美化

543.png

修改HTML文件:

修改文件:themes\admin_simpleboot3\user\admin_asset\index.html

<include file="public@header"/>
<style>
.flex-start{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;}
.asset-item{width:130px;margin:15px;overflow:hidden;}
.img-show{display:block;width:130px;height:90px;margin:0 auto;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:auto 100%;}
.img-show i{width:100%;font-size:60px;text-align:center;line-height:90px;}
.asset-title{display:block;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;text-align:center;margin:10px 0 5px;font-size:13px;}
.asset-path{border:none;font-size:12px;width:100%;color:#9e9e9e}
.right-menu{position:absolute;z-index:9999;overflow:hidden;width:150px;background-color:#fff;border:1px solid #cecece;padding:5px;display:none;}
.right-menu span{display:block;font-size:12px;}
.right-menu span i{padding-right:10px;}
</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a href="{:url('AdminAsset/index')}">资源列表</a></li>
    </ul>
    <php>$status=['不可用', '可用'];</php>
    <div class="flex-start" id="item_box">
        <php>
            $asset_img_suffixes=['bmp','jpg','jpeg','png','gif','tiff'];
            $asset_txt_suffixes=['txt'];
        </php>
        <foreach name="assets" item="vo">
        <div class="asset-item">
            <div class="">
                <if condition="in_array(strtolower($vo['suffix']),$asset_img_suffixes)">
                    <a class="img-show" href="javascript:parent.imagePreviewDialog('{:cmf_get_image_preview_url($vo['file_path'])}');"
                style="background-image:url({:cmf_get_image_preview_url($vo['file_path'])})"></a>
                </if>
                <if condition="in_array(strtolower($vo['suffix']),$asset_txt_suffixes)">
                    <a class="img-show" ><i class="fa fa-file-o" aria-hidden="true"></i></a>
                </if>
                <h5 class="asset-title">{$vo.filename}</h5>
                <input class="asset-path" type="text" value="{$vo.file_path}">
                <if condition="!file_exists('upload/'.$vo['file_path'])">
                    <span style='color:red;'>&nbsp;&nbsp(文件丢失)</span>
                </if>
            </div>
            <div class="right-menu">  
                <span><i class="fa fa-sort-numeric-asc"></i>ID:{$vo.id} </span>
                <span><i class="fa fa-database"></i>大小:{$vo.file_size/1024|round}KB</span>
                <span><i class="fa fa-user-circle"></i>用户:{$vo.user_login}/{$vo.user_nickname}</span>
                <span><i class="fa fa-question-circle"></i>状态:{$status[$vo['status']]}</span>
                <span><i class="fa fa-trash"></i>操作:<a href="{:url('AdminAsset/delete',array('id'=>$vo['id']))}" class="js-ajax-delete">{:lang('DELETE')}</a></span>
            </div>
        </div>
        </foreach>
    </div>
    <div class="pagination">{$page|default=''}</div>
</div>
<script src="__STATIC__/js/admin.js"></script>
<script type="text/javascript">
window.onload = function(){
    var itemBox = document.getElementById('item_box');
    var items = itemBox.getElementsByClassName('asset-item');
    //获取所有新菜单
    var allMenu=itemBox.getElementsByClassName('right-menu');
    for(var i=0;i<items.length;i++){
        items[i].index=i;
        //事件_右键单击
        items[i].oncontextmenu=function(event){
            var event = event || window.event;
            //隐藏所有
            for(var k =0;k<allMenu.length;k++){
                allMenu[k].style.display="none";
            }
            //获取右键单击项目的菜单并给予显示
            var itemMenu = this.getElementsByClassName('right-menu')[0];
            itemMenu.style.display="block";
            itemMenu.style.left = event.pageX+"px";
            itemMenu.style.top = event.pageY+"px";
            //return false为了屏蔽浏览器默认事件  
            return false;
        }
        //再次点击,菜单消失
        document.onclick=function(){
            for(var k =0;k<allMenu.length;k++){
                allMenu[k].style.display="none";
            }
        }
    }
      
}
</script>
</body>
</html>

自定义显示数量:

文件地址:.\ThinkCMFX\app\user\controller\AdminAssetController.php

ThinkCMF 5.1版本后地址:.\ThinkCMFX\vendor\thinkcmf\cmf-app\src\user\controller\AdminAssetController.php

查询代码段:

$result = Db::name('asset')->field('a.*,u.user_login,u.user_email,u.user_nickname')
            ->alias('a')->join($join)
            ->order('create_time', 'DESC')
            ->paginate(10);

修改为:

$result = Db::name('asset')->field('a.*,u.user_login,u.user_email,u.user_nickname')
            ->alias('a')->join($join)
            ->order('create_time', 'DESC')
            ->paginate(50);

注:paginate()中数字自定义

评论