apeblog/app/admin/view/article/edit.html

311 lines
16 KiB
HTML

<!DOCTYPE html>
<html lang="zh">
<head>
<title>编辑文章 - {:system_config('title')}后台管理系统</title>
{include file="public/header" /}
<!--标签插件-->
<link rel="stylesheet" href="/static/admin/js/jquery-tags-input/jquery.tagsinput.min.css">
<!--富文本输入框-->
<link rel="stylesheet" href="/static/admin/js/summernote/summernote.min.css">
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<ul id="myTabs" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab">基本信息</a></li>
<li><a href="#profile" role="tab" id="profile-tab" data-toggle="tab">文章设置</a></li>
<li class="tab-right"><a data-toggle="tooltip" data-original-title="返回"
onclick="history.back(-1);return false;">返 回</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<form action="#!" method="post" class="row add-form" onsubmit="return false;">
<div class="form-group col-md-12">
<label>文章名称</label>
<input type="hidden" name="id" value="{$info.id}">
<input type="text" class="form-control" id="title" name="title" placeholder="文章名称" value="{$info.title}"/>
</div>
<div class="form-group col-md-12">
<label for="category_id">栏目分类</label>
<div class="form-controls">
<select name="category_id" id="category_id" class="form-control">
{volist name="category" id="vo"}
<option value="{$vo.id}" {if $vo.id == $info.category_id}selected{/if}>{$vo.html}{$vo.title}</option>
{/volist}
</select>
</div>
</div>
<div class="form-group col-md-12">
<label for="author">作者</label>
<input type="text" class="form-control" id="author" name="author" placeholder="原作者" value="{$info.author}"/>
</div>
<div class="form-group col-md-12">
<label>主图</label>
<div class="form-controls">
<ul class="list-inline clearfix lyear-uploads-pic">
{notempty name="info.cover_path"}
<li class="col-xs-4 col-sm-3 col-md-2" id="pic-image" style="display: block;">
<figure>
<img src="{$info.cover_path}" alt="{$info.cover_path|basename}">
<figcaption>
<a class="btn btn-round btn-square btn-danger btn-image-delete"
href="#!"><i class="mdi mdi-delete"></i></a>
</figcaption>
</figure>
</li>
<li class="col-xs-4 col-sm-3 col-md-2" id="pic-upload" style="display: none;">
<input type="hidden" class="form-control" name="cover_path" id="cover_path"
value="{$info.cover_path}">
<input type="file" id="file_cover_path" style="display: none;"
onchange="upload('cover_path')">
<a class="pic-add" href="#!" onclick="btnClick('cover_path')"
title="上传"></a>
</li>
{else /}
<li class="col-xs-4 col-sm-3 col-md-2" id="pic-image"
style="display: none;"></li>
<li class="col-xs-4 col-sm-3 col-md-2" id="pic-upload">
<input type="hidden" class="form-control" name="cover_path" id="cover_path">
<input type="file" id="file_cover_path" style="display: none;"
onchange="upload('cover_path')">
<a class="pic-add" href="#!" onclick="btnClick('cover_path')"
title="上传"></a>
</li>
{/notempty}
</ul>
</div>
</div>
<div class="form-group col-md-12">
<label for="abstract">摘要</label>
<input type="text" class="form-control" name="abstract" id="abstract"
placeholder="请输入摘要" value="{$info.abstract}">
</div>
<div class="form-group col-md-12">
<label for="abstract">标签</label>
<input class="form-control js-tags-input" type="text" name="tags" data-height="38px"
placeholder="请输入标签" value="{$info.tags}">
</div>
<div class="form-group col-md-12">
<label for="content">文章内容</label>
<textarea id="content" name="content" data-provide="summernote" data-toolbar="full">{$info.content}</textarea>
</div>
<div class="form-group col-md-12">
<button type="submit" class="btn btn-primary ajax-post" target-form="add-form">立即提交
</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="profile">
<form action="#!" method="post" class="row add-form" onsubmit="return false;">
<div class="form-group row col-md-2">
<div class="col-xs-6">推荐</div>
<div class="col-xs-6">
<label class="lyear-switch switch-solid switch-primary">
<input type="checkbox" name="is_recommend" {if $info.is_recommend}checked{/if}>
<span></span>
</label>
</div>
</div>
<div class="form-group row col-md-2">
<div class="col-xs-6">热门</div>
<div class="col-xs-6">
<label class="lyear-switch switch-solid switch-primary">
<input type="checkbox" name="is_hot" {if $info.is_hot}checked{/if}>
<span></span>
</label>
</div>
</div>
<div class="form-group row col-md-2">
<div class="col-xs-6">置顶</div>
<div class="col-xs-6">
<label class="lyear-switch switch-solid switch-primary">
<input type="checkbox" name="is_top" {if $info.is_top}checked{/if}>
<span></span>
</label>
</div>
</div>
<div class="form-group col-md-12">
<label for="abstract">排序</label>
<input type="text" class="form-control" name="sort" placeholder="请输入排序"
value="{$info.sort}">
</div>
<div class="form-group col-md-12">
<label for="link_str">外链</label>
<input type="text" class="form-control" name="link_str" id="link_str" placeholder="外链"
value="{$info.link_str}">
</div>
<div class="form-group col-md-12">
<label for="keywords">seo关键字</label>
<input type="text" class="form-control" id="keywords" name="keywords"
placeholder="请输入seo关键字" value="{$info.keywords}">
</div>
<div class="form-group col-md-12">
<label for="description">seo描述</label>
<input type="text" class="form-control" name="description" id="description"
placeholder="seo描述" value="{$info.description}">
</div>
<div class="form-group col-md-12">
<button type="submit" class="btn btn-primary ajax-post" target-form="add-form">立即提交
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{include file="public/footer"/}
<!--select2-->
<script type="text/javascript" src="/static/admin/js/select2.min.js"></script>
<!--富文本输入框-->
<script type="text/javascript" src="/static/admin/js/summernote/summernote.min.js"></script>
<script type="text/javascript" src="/static/admin/js/summernote/lang/summernote-zh-CN.min.js"></script>
<!--标签-->
<script src="/static/admin/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script>
$(function () {
$('#tag').select2();
});
$(document).ready(function(){
$('[data-provide="summernote"]').each(function() {
var options = {
dialogsInBody: true,
lang: 'zh-CN',
dialogsFade: true
};
var config = {};
$.each( $(this).data(), function(key, value){
key = key.replace(/-([a-z])/g, function(x){return x[1].toUpperCase();});
if ( key == 'provide' ) {
return;
}
config[key] = value;
});
options = $.extend(options, config);
options.toolbar = [
// [groupName, [list of button]]
['para_style', ['style']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontname', 'fontsize', 'height']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph', 'hr']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['do', ['undo', 'redo']],
['misc', ['fullscreen', 'codeview', 'help']]
];
$(this).summernote(options);
});
$(document).on('click', '[data-summernote-edit]', function(){
var target = $(this).data('summernote-edit');
$(target).summernote({focus: true});
});
$(document).on('click', '[data-summernote-save]', function(){
var target = $(this).data('summernote-save');
var markup = $(target).summernote('code');
$(target).summernote('destroy');
alert('修改完成');
});
});
/**
* 选择文件
* @param inputName
*/
function btnClick(inputName) {
$("#file_" + inputName).click()
}
/**
* 异步上传
* @param inputName
*/
function upload(inputName) {
var formData = new FormData();
formData.append("type", 'image');
formData.append("file", $("#file_" + inputName)[0].files[0]);
$.ajax({
type: 'POST',
url: '/admin/file/upload',
data: formData,
cache: false,
processData: false,
contentType: false,
success: function (res) {
if (res.code == 200) {
$("#" + inputName).val(res.data.filePath);
let html = ' <figure>\n' +
' <img src="' + res.data.filePath + '" alt="' + res.data.name + '">\n' +
' <figcaption>\n' +
' <a class="btn btn-round btn-square btn-danger btn-image-delete" href="#!"><i class="mdi mdi-delete"></i></a>\n' +
' </figcaption>\n' +
' </figure>';
$('#pic-image').html(html);
$('#pic-image').show().next('li').hide();
} else {
lightyear.notify(res.msg, 'danger', 3000, 'mdi mdi-emoticon-happy', 'top', 'center');
return false;
}
}
});
}
$(".add-form").submit(function () {
let Arr = $('.add-form').serializeArray();
let checkResult = true;
$.each(Arr, function (index, item) {
try {
switch (item.name) {
case 'category_id':
if (!item.value) {
throw "栏目分类不能为空";
}
break;
case 'title':
if (!item.value) {
throw "文章名称不能为空";
}
break;
case 'cover_path':
if (!item.value) {
throw "主图不能为空";
}
break;
}
} catch (error) {
lightyear.notify(error, 'danger', 3000, 'mdi mdi-emoticon-happy', 'top', 'center');
checkResult = false;
return false;
}
})
// 检验不通过终止执行
if (!checkResult) {
return false;
}
$.post(url = "/admin/article/save", $('.add-form').serialize(), function (res) {
if (res.code == 200) {
lightyear.notify(res.msg, 'success', 3000, 'mdi mdi-emoticon-happy', 'top', 'center');
setTimeout(function () {
location.href = '/admin/article/index';
}, 2000)
} else lightyear.notify(res.msg, 'danger', 3000, 'mdi mdi-emoticon-happy', 'top', 'center');
});
return true;
})
//删除事件
$('body').on('click', '.btn-image-delete', function () {
$('#pic-image').hide().next('li').show();
$('#cover_path').val('');
})
</script>
</body>
</html>