ThinkCMF后台页面模板demo

秒速五厘米 2023-06-18 11:55 13阅读 0赞

## index列表页面模板 ##

<include file="public@header"/>
    </head>
    <body>
    
    <div class="wrap js-check-wrap">
        
        <ul class="nav nav-tabs">
            <li class="active"><a href="javascript:;">所有文章</a></li>
            <li><a href="{:url('AdminIndex/add')}">添加文章</a></li>
        </ul>
        
        
        <form class="well form-inline margin-top-20" method="post" action="{:url('AdminIndex/index')}">
            标题:
            <input type="text" class="form-control" name="keyword" style="width: 200px;"
                   value="{$keyword|default=''}" placeholder="请输入关键字">
            <button class="btn btn-primary">搜索</button>
        </form>
        
        
        <form class="js-ajax-form" action="" method="post">
            
            <div class="table-actions">
                <button class="btn btn-danger btn-sm js-ajax-submit" type="submit" data-action="{:url('AdminIndex/delete')}"
                        data-subcheck="true" data-msg="{:lang('DELETE_CONFIRM_MESSAGE')}">{:lang('DELETE')}
                </button>
                
            </div>
            
    
            
            <table class="table table-hover table-bordered table-list">
                
                <thead>
                <tr>
                    <th width="16">
                        <label>
                            <input type="checkbox" class="js-check-all" data-direction="x" data-checklist="js-check-x">
                        </label>
                    </th>
                    <th width="100">ID</th>
                    <th>标题</th>
                    <th width="80">作者</th>
                    <th width="160">发布时间</th>
                    <th width="80">状态</th>
                    <th width="120">操作</th>
                </tr>
                </thead>
                
                
                <foreach name="data" item="vo">
                    <tr>
                        <td>
                            <input type="checkbox" class="js-check" data-yid="js-check-y" data-xid="js-check-x" name="ids[]"
                                   value="{$vo.id}">
                        </td>
                        <td>{$vo.id}</td>
                        <td>
                            <a href="{:url('portal/page/index',array('id'=>$vo['id']))}" target="_blank">
                                {$vo.post_title}
                            </a>
                        </td>
                        <td>{$vo.user_nickname}</td>
                        <td>
                            <empty name="vo.published_time">
                                未发布
                                <else/>
                                {:date('Y-m-d H:i',$vo['published_time'])}
                            </empty>
                        </td>
                        <td>
                            <notempty name="vo.post_status">
                                <a data-toggle="tooltip" title="已发布"><i class="fa fa-check"></i></a>
                                <else/>
                                <a data-toggle="tooltip" title="未发布"><i class="fa fa-close"></i></a>
                            </notempty>
                        </td>
                        <td>
                            <a class="btn btn-xs btn-primary" href="{:url('AdminIndex/edit',array('id'=>$vo['id']))}">{:lang('EDIT')}</a>
                            <a class="btn btn-xs btn-danger js-ajax-delete" href="{:url('AdminIndex/delete',array('id'=>$vo['id']))}">{:lang('DELETE')}</a>
                        </td>
                    </tr>
                </foreach>
                
            </table>
            
            
            <div class="pagination">{$page}</div>
            
        </form>
        
    </div>
    
    
    <script src="__STATIC__/js/admin.js"></script>
    
    <script>
        $(function () {
            //异步加载js、css ,别名或者绝对地址
            Wind.use('layer',function(){});
            Wind.css('layer',function(){})
        });
    </script>
    </body>
    </html>

## add添加页面模板 ##

<include file="public@header"/>
    <style type="text/css">
        .pic-list li {
            margin-bottom: 5px;
        }
    </style>
    
    <script type="text/html" id="photos-item-tpl">
        <li id="saved-image{id}">
            <input id="photo-{id}" type="hidden" name="photo_urls[]" value="{filepath}">
            <input class="form-control" id="photo-{id}-name" type="text" name="photo_names[]" value="{name}"
                   style="width: 200px;" title="图片名称">
            <img id="photo-{id}-preview" src="{url}" style="height:36px;width: 36px;"
                 onclick="imagePreviewDialog(this.src);">
            <a href="javascript:uploadOneImage('图片上传','#photo-{id}');">替换</a>
            <a href="javascript:(function(){$('#saved-image{id}').remove();})();">移除</a>
        </li>
    </script>
    
    
    <script type="text/html" id="files-item-tpl">
        <li id="saved-file{id}">
            <input id="file-{id}" type="hidden" name="file_urls[]" value="{filepath}">
            <input class="form-control" id="file-{id}-name" type="text" name="file_names[]" value="{name}"
                   style="width: 200px;" title="文件名称">
            <a id="file-{id}-preview" href="{preview_url}" target="_blank">下载</a>
            <a href="javascript:uploadOne('文件上传','#file-{id}','file');">替换</a>
            <a href="javascript:(function(){$('#saved-file{id}').remove();})();">移除</a>
        </li>
    </script>
    
    </head>
    <body>
    <div class="wrap js-check-wrap">
        
        <ul class="nav nav-tabs">
            <li><a href="{:url('AdminIndex/index')}">{:lang('ADMIN_TAG_INDEX')}</a></li>
            <li class="active"><a href="{:url('AdminIndex/add')}">{:lang('ADMIN_TAG_ADD')}</a></li>
            <li><a  href="{:url('nav/edit')}" >{:lang('ADMIN_NAV_EDIT')}</a></li>
        </ul>
        
        
        <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('AdminIndex/addPost')}">
    
            
            <div class="form-group">
                <label class="col-sm-2 control-label"><span class="form-required">*</span>名称:</label>
                <div class="col-md-6 col-sm-10">
                    <input type="text" class="form-control" name="name" value="">
                </div>
            </div>
            
    <div class="form-group">
                <label for="input-description">描述</label>
                <div>
                    <textarea class="form-control" name="post[description]" id="input-description"></textarea>
                </div>
            </div>
    
           <div class="form-group">
                <label class="col-sm-2 control-label">缩略图</label>
                <div class="col-md-6 col-sm-10">
                    <input type="hidden" name="more[thumbnail]" class="form-control"
                           id="js-thumbnail-input">
                    <div>
                        <a href="javascript:uploadOneImage('图片上传','#js-thumbnail-input');">
                            <img src="__TMPL__/public/assets/images/default-thumbnail.png"
                                 id="js-thumbnail-input-preview"
                                 width="135" style="cursor: pointer"/>
                        </a>
                    </div>
                </div>
            </div>
    
            <div class="form-group">
                <label class="col-sm-2 control-label">内容:</label>
                <div class="col-md-6 col-sm-10">
                    <script type="text/plain" id="content" name="content"></script>
                </div>
            </div>
    
            <tr>
                <th>相册</th>
                <td>
                    <ul id="photos" class="pic-list list-unstyled form-inline"></ul>
                    <a href="javascript:uploadMultiImage('图片上传','#photos','photos-item-tpl');"
                       class="btn btn-default btn-sm">选择图片</a>
                </td>
            </tr>
    
            <tr>
                <th>附件</th>
                <td>
                    <ul id="files" class="pic-list list-unstyled form-inline">
                    </ul>
                    <a href="javascript:uploadMultiFile('附件上传','#files','files-item-tpl','file');"
                       class="btn btn-sm btn-default">选择文件</a>
                </td>
            </tr>
    
            <tr>
                <th>音频</th>
                <td class="form-inline">
                    <input id="file-audio" class="form-control" type="text" name="post[more][audio]"
                           value="{$post.more.audio|default=''}" placeholder="请上传音频文件" style="width: 200px;">
                    <notempty name="post.more.audio">
                        <a id="file-audio-preview" href="{:cmf_get_file_download_url($post.more.audio)}"
                           target="_blank">下载</a>
                    </notempty>
    
                    <a href="javascript:uploadOne('文件上传','#file-audio','audio');">上传</a>
                </td>
            </tr>
    
            <tr>
                <th>视频</th>
                <td class="form-inline">
                    <input id="file-video" class="form-control" type="text" name="post[more][video]"
                           value="{$post.more.video|default=''}" placeholder="请上传视频文件" style="width: 200px;">
                    <notempty name="post.more.video">
                        <a id="file-video-preview" href="{:cmf_get_file_download_url($post.more.video)}"
                           target="_blank">下载</a>
                    </notempty>
                    <a href="javascript:uploadOne('文件上传','#file-video','video');">上传</a>
                </td>
            </tr>
    
    
    
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary js-ajax-submit">{:lang("SAVE")}</button>
                <a class="btn btn-default" href="__URL__">返回</a>
            </div>
        </form>
        
    </div>
    <script src="__STATIC__/js/admin.js"></script>
    
    <script type="text/javascript">
        //编辑器路径定义
        var editorURL = GV.WEB_ROOT;
    </script>
    <script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript">
        $(function () {
    
            editorcontent = new baidu.editor.ui.Editor();
            editorcontent.render('content');
            try {
                editorcontent.sync();
            } catch (err) {
            }
            /*缩略图的js*/
            $('.btn-cancel-thumbnail').click(function () {
                $('#thumbnail-preview').attr('src', '__TMPL__/public/assets/images/default-thumbnail.png');
                $('#thumbnail').val('');
            });
    
        });
    </script>
    
    </body>
    </html>

## edit编辑页面模板 ##

<include file="public@header"/>
    <style type="text/css">
        .pic-list li {
            margin-bottom: 5px;
        }
    </style>
    
    <script type="text/html" id="photos-item-tpl">
        <li id="saved-image{id}">
            <input id="photo-{id}" type="hidden" name="photo_urls[]" value="{filepath}">
            <input class="form-control" id="photo-{id}-name" type="text" name="photo_names[]" value="{name}"
                   style="width: 200px;" title="图片名称">
            <img id="photo-{id}-preview" src="{url}" style="height:36px;width: 36px;"
                 onclick="imagePreviewDialog(this.src);">
            <a href="javascript:uploadOneImage('图片上传','#photo-{id}');">替换</a>
            <a href="javascript:(function(){$('#saved-image{id}').remove();})();">移除</a>
        </li>
    </script>
    
    <script type="text/html" id="files-item-tpl">
        <li id="saved-file{id}">
            <input id="file-{id}" type="hidden" name="file_urls[]" value="{filepath}">
            <input class="form-control" id="file-{id}-name" type="text" name="file_names[]" value="{name}"
                   style="width: 200px;" title="文件名称">
            <a id="file-{id}-preview" href="{preview_url}" target="_blank">下载</a>
            <a href="javascript:uploadOne('文件上传','#file-{id}','file');">替换</a>
            <a href="javascript:(function(){$('#saved-file{id}').remove();})();">移除</a>
        </li>
    </script>
    </head>
    <body>
    <div class="wrap js-check-wrap">
        
        <ul class="nav nav-tabs">
            <li><a href="{:url('AdminArticle/index')}">文章管理</a></li>
            <li>
                <a href="{:url('AdminArticle/add')}">添加文章</a>
            </li>
            <li class="active"><a href="#">编辑文章</a></li>
        </ul>
    
        
        <form action="{:url('AdminArticle/editPost')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
            
            <div class="form-group">
                <label class="col-sm-2 control-label"><span class="form-required">*</span>名称:</label>
                <div class="col-md-6 col-sm-10">
                    <input type="text" class="form-control" name="name" value="{$post.name}">
                </div>
            </div>
            
    
    
            <div class="form-group">
                <label class="col-sm-2 control-label">缩略图</label>
                <div class="col-md-6 col-sm-10">
                    <input type="hidden" name="post[more][thumbnail]" id="thumbnail"
                           value="{$post.more.thumbnail|default=''}">
                    <a href="javascript:uploadOneImage('图片上传','#thumbnail');">
                        <if condition="empty($post.more.thumbnail)">
                            <img src="__TMPL__/public/assets/images/default-thumbnail.png"
                                 id="thumbnail-preview"
                                 width="135" style="cursor: pointer"/>
                            <else/>
                            <img src="{:cmf_get_image_preview_url($post.more.thumbnail)}"
                                 id="thumbnail-preview"
                                 width="135" style="cursor: pointer"/>
                        </if>
                    </a>
                    <input type="button" class="btn btn-sm btn-cancel-thumbnail" value="取消图片">
                </div>
            </div>
    
            <tr>
                <th>内容</th>
                <td>
                    <script type="text/plain" id="content" name="post[post_content]">{$post.post_content}</script>
                </td>
            </tr>
    
            <tr>
                <th>相册</th>
                <td>
                    <ul id="photos" class="pic-list list-unstyled form-inline">
                        <notempty name="post.more.photos">
                            <foreach name="post.more.photos" item="vo">
                                <php>$img_url=cmf_get_image_preview_url($vo['url']);</php>
                                <li id="saved-image{$key}">
                                    <input id="photo-{$key}" type="hidden" name="photo_urls[]"
                                           value="{$vo.url}">
                                    <input class="form-control" id="photo-{$key}-name" type="text"
                                           name="photo_names[]"
                                           value="{$vo.name|default=''}" style="width: 200px;" title="图片名称">
                                    <img id="photo-{$key}-preview"
                                         src="{:cmf_get_image_preview_url($vo['url'])}"
                                         style="height:36px;width: 36px;"
                                         onclick="parent.imagePreviewDialog(this.src);">
                                    <a href="javascript:uploadOneImage('图片上传','#photo-{$key}');">替换</a>
                                    <a href="javascript:(function(){$('#saved-image{$key}').remove();})();">移除</a>
                                </li>
                            </foreach>
                        </notempty>
                    </ul>
                    <a href="javascript:uploadMultiImage('图片上传','#photos','photos-item-tpl');"
                       class="btn btn-sm btn-default">选择图片</a>
                </td>
            </tr>
    
            <tr>
                <th>附件</th>
                <td>
                    <ul id="files" class="pic-list list-unstyled form-inline">
                        <notempty name="post.more.files">
                            <foreach name="post.more.files" item="vo">
                                <php>$file_url=cmf_get_file_download_url($vo['url']);</php>
                                <li id="saved-file{$key}">
                                    <input id="file-{$key}" type="hidden" name="file_urls[]"
                                           value="{$vo.url}">
                                    <input class="form-control" id="file-{$key}-name" type="text"
                                           name="file_names[]"
                                           value="{$vo.name}" style="width: 200px;" title="图片名称">
                                    <a id="file-{$key}-preview" href="{$file_url}" target="_blank">下载</a>
                                    <a href="javascript:uploadOne('文件上传','#file-{$key}','file');">替换</a>
                                    <a href="javascript:(function(){$('#saved-file{$key}').remove();})();">移除</a>
                                </li>
                            </foreach>
                        </notempty>
                    </ul>
                    <a href="javascript:uploadMultiFile('附件上传','#files','files-item-tpl','file');"
                       class="btn btn-sm btn-default">选择文件</a>
                </td>
            </tr>
    
            <tr>
                <th>音频</th>
                <td class="form-inline">
                    <input id="file-audio" class="form-control" type="text" name="post[more][audio]"
                           value="{$post.more.audio|default=''}" placeholder="请上传音频文件" style="width: 200px;">
                    <notempty name="post.more.audio">
                        <a id="file-audio-preview" href="{:cmf_get_file_download_url($post.more.audio)}"
                           target="_blank">下载</a>
                    </notempty>
    
                    <a href="javascript:uploadOne('文件上传','#file-audio','audio');">上传</a>
                </td>
            </tr>
    
            <tr>
                <th>视频</th>
                <td class="form-inline">
                    <input id="file-video" class="form-control" type="text" name="post[more][video]"
                           value="{$post.more.video|default=''}" placeholder="请上传视频文件" style="width: 200px;">
                    <notempty name="post.more.video">
                        <a id="file-video-preview" href="{:cmf_get_file_download_url($post.more.video)}"
                           target="_blank">下载</a>
                    </notempty>
                    <a href="javascript:uploadOne('文件上传','#file-video','video');">上传</a>
                </td>
            </tr>
    
    
    
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary js-ajax-submit">{:lang("SAVE")}</button>
                <a class="btn btn-default" href="__URL__">返回</a>
            </div>
        </form>
    
    </div>
    <script type="text/javascript" src="__STATIC__/js/admin.js"></script>
    
    <script type="text/javascript">
        //编辑器路径定义
        var editorURL = GV.WEB_ROOT;
    </script>
    <script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript">
        $(function () {
    
            editorcontent = new baidu.editor.ui.Editor();
            editorcontent.render('content');
            try {
                editorcontent.sync();
            } catch (err) {
            }
    
            /*缩略图*/
            $('.btn-cancel-thumbnail').click(function () {
                $('#thumbnail-preview').attr('src', '__TMPL__/public/assets/images/default-thumbnail.png');
                $('#thumbnail').val('');
            });
    
        });
    </script>