official_website/app/admin/view/similar_article/index.html

845 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{extend name="foxcms" /}
{block name="css"}
{/block}
{block name="body"}
<input name="model" value="{$model}" type="hidden" />
<div class="foxcms-content-inner">
<!-- page content -->
<div class="company-news-content">
<div class="content-top-operation">
<div class="left">
<a href="{$addLink}?type=1">
<button class="foxui-size-small foxui-solid-primary">
<i class="foxui-icon-jiahao-o"></i>
<span>发布文章</span>
</button>
</a>
</div>
<div class="right display-flex">
<div class="foxui-input-group margin-right-20">
<div class="input-label">
<label >栏目:</label>
</div>
<div class="input-box">
<div class="foxui-select">
<div class="foxui-select-handle foxui-select-icon">
<input class="foxui-select-input foxui-size-small" readonly="readonly" placeholder="请选择所属栏目" data-id="{$column.id}" value="{$column.name}" name="column" />
<i class="foxui-icon-close-circle" style="display: none"></i>
</div>
<div class="foxui-select-menu">
<ul class="foxui-select-slide">
{foreach $columns as $key=>$vo }
<li class="foxui-select-item" data-id="{$vo.id}">{$vo.title}</li>
{/foreach}
</ul>
</div>
</div>
</div>
</div>
<div class="foxui-input-group item-input margin-right-20">
<div class="foxui-input-prepend">
<div class="foxui-prepend-inner">
<div class="foxui-select">
<div class="foxui-select-handle foxui-select-icon">
<input class="foxui-select-input" readonly="readonly" data-id="3" value="标题" name="prop"/>
</div>
<div class="foxui-select-menu">
<ul class="foxui-select-slide">
<li class="foxui-select-item" data-id="1">属性</li>
<li class="foxui-select-item" data-id="2">栏目</li>
<li class="foxui-select-item" data-id="3">标题</li>
</ul>
</div>
</div>
</div>
<input class="foxui-size-small" placeholder="请输入关键字" required value="" name="keyword"/>
</div>
</div>
<button class="foxui-solid-primary foxui-size-small search-btn">搜索</button>
</div>
</div>
<div class="section section-panel margin-top-10">
<div class="foxui-table foxui-table-border-bottom foxui-table-hover foxui-checkbox-group">
<ul class="foxui-table-thead foxui-checkbox-head">
<li class="foxui-table-tr">
<div class="foxui-table-th">
<div class="foxui-checkbox foxui-checkbox-all">
<span class="foxui-checkbox-input">
<i class="foxui-checkbox-icon"></i>
<input type="checkbox" value="" />
</span>
</div>
</div>
<div class="foxui-table-th">ID</div>
<div class="foxui-table-th"></div>
<div class="foxui-table-th">标题</div>
<div class="foxui-table-th">所属栏目</div>
<div class="foxui-table-th">浏览量</div>
<div class="foxui-table-th">发布时间</div>
<div class="foxui-table-th">文章属性</div>
<div class="foxui-table-th">操作</div>
</li>
</ul>
<ul class="foxui-table-tbody foxui-checkbox-list">
<!--表格内容-->
</ul>
<div class="table-footer foxui-checkbox-head">
<div class="left display-flex foxui-align-items-center">
<div class="foxui-checkbox foxui-checkbox-all margin-right-24">
<span class="foxui-checkbox-input">
<i class="foxui-checkbox-icon"></i>
<input type="checkbox" value="" />
</span>
</div>
<div class="display-flex">
<div class="foxui-dropdown">
<button class="foxui-dropdown-handle foxui-size-small foxui-plain-info" data-trigger="hover">
<i class="foxui-icon-menu"></i>
<span>批量操作</span>
</button>
<div class="foxui-dropdown-menu">
<ul class="foxui-dropdown-slide">
<li class="foxui-dropdown-item" data-id="1" id="addAttr">新增属性</li>
<li class="foxui-dropdown-item" data-id="2" id="deleteAttr">删除属性</li>
<li class="foxui-divided"></li>
<li class="foxui-dropdown-item" data-id="3" id="removeArticle">移动文章</li>
<li class="foxui-dropdown-item" data-id="4" id="copyArticle">复制文章</li>
<li class="foxui-dropdown-item" data-id="5" id="deleteArticle">删除文章</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pagination"></div>
</div>
</div>
</div>
{include file="footed-copy"/}
{/block}
{block name="js"}
<script>
// 批量操作-新增属性
$('#addAttr').click(function () {
let idList = articleIdList();
if (idList && idList.length > 0) {
foxui.dialog({
title: '批量新增属性',
content: addAttrHtml(idList.join()),
confirmText: '确定',
cancelText: '取消',
width: '550px',
border: true,
longButton: true,
buttonSize: 'small',
buttonAlign: 'center',
confirm: function (callback) {
let $checkbox = $('#addAttrDialog input[type="checkbox"]:checked'),
ids = $('#addAttrDialog input[name="article_ids"]').val();
let articleField = "";
$checkbox.each(function (){
let af = $(this).val();
articleField += af + ",";
});
if(articleField.length> 0){
articleField = articleField.substr(0, articleField.length -1);
}
if (!ids || articleField.length < 1) {
foxui.message({
text: '必须选择文章属性及填写文章ID',
type: 'danger',
});
return false;
}
// 上传数据
//批量添加属性
let model = $('input[name="model"]').val();
$.ajax({
type: "get",
// url: ADMIN_PATH + '/article/batchAddField',
url:"{:url('"+model+"/batchAddField')}",
dataType: "json",
async:false,
data:{'ids':ids,'articleField':articleField},
success: function(res) {
if (res.code == 1) {
foxui.message({
text: res.msg,
type: 'success',
});
//初始化文章数据
init();
}else{
foxui.message({
text: res.msg,
type: 'warning',
});
}
},
error: function(res) {
foxui.message({
text: res.responseJSON.msg,
type: 'warning',
});
}
});
callback();
},
});
}
});
// 批量操作-删除属性
$('#deleteAttr').click(function () {
let idList = articleIdList();
if (idList && idList.length > 0) {
let ids = idList.join();
foxui.dialog({
title: '批量删除文章属性',
content: `您确定要删除 id 为 ${ids} 的所有文章的所有属性吗?`,
confirmText: '删除',
cancelText: '取消',
buttonSize: 'small',
buttonType: 'danger',
confirm: function (callback) {
let model = $('input[name="model"]').val();
// 上传数据
$.ajax({
type: "get",
url:"{:url('"+model+"/batchDelField')}",
dataType: "json",
async:false,
data:{'ids':ids},
success: function(res) {
if (res.code == 1) {
foxui.message({
text: res.msg,
type: 'success',
});
//初始化文章数据
init({});
}else{
foxui.message({
text: res.msg,
type: 'warning',
});
}
},
error: function(res) {
foxui.message({
text: res.responseJSON.msg,
type: 'warning',
});
}
});
callback();
},
});
}
});
// 批量操作-移动文章
$('#removeArticle').click(function () {
let idList = articleIdList();
if (idList && idList.length > 0) {
let selectList = [
// { id: 1, title: '公司新闻' },
];
//查询栏目
$.ajax({
type: "get",
url: "{:url('column/getColumns')}",
dataType: "json",
data:{
"columnModel":'article'
},
async:false,
success: function(res) {
if (res.code == 1) {
selectList = res.data;
}
},
error: function(res) {
}
});
foxui.dialog({
title: '批量移动文章',
content: removeArticleHtml(idList.join(), selectList),
confirmText: '确定',
cancelText: '取消',
width: '550px',
border: true,
longButton: true,
buttonSize: 'small',
buttonAlign: 'center',
confirm: function (callback) {
let articleColumn = $('#removeArticleDialog .foxui-select input').val(),
columnId = $('#removeArticleDialog .foxui-select input').attr("data-id"),
ids = $('#removeArticleDialog input[name="article_ids"]').val();
if (!ids || !articleColumn) {
foxui.message({
text: '必须选择目标栏目及填写文章ID',
type: 'danger',
});
return false;
}
let nowColumnId = $('input[name="columnId"]').val();
if(nowColumnId == columnId){
foxui.message({
text: '文章已在当前栏目中!',
type: 'danger',
});
return false;
}
let model = $('input[name="model"]').val();
// 上传数据
$.ajax({
type: "get",
url:"{:url('"+model+"/batchMove')}",
dataType: "json",
async:false,
data:{'ids':ids, 'columnId':columnId},
success: function(res) {
if (res.code == 1) {
foxui.message({
text: res.msg,
type: 'success',
});
//初始化文章数据
init();
}else{
foxui.message({
text: res.msg,
type: 'warning',
});
}
},
error: function(res) {
foxui.message({
text: res.responseJSON.msg,
type: 'warning',
});
}
});
callback();
},
});
}
});
// 批量操作-复制文件
$('#copyArticle').click(function () {
let idList = articleIdList();
if (idList && idList.length > 0) {
let ids = idList.join();
foxui.dialog({
title: '批量复制文章',
content: `您确定要复制 id 为 ${ids} 的所有文章吗?`,
confirmText: '复制',
cancelText: '取消',
buttonSize: 'small',
confirm: function (callback) {
let model = $('input[name="model"]').val();
// 上传数据
$.ajax({
type: "get",
url:"{:url('"+model+"/batchCope')}",
dataType: "json",
async:false,
data:{'ids':ids},
success: function(res) {
if (res.code == 1) {
foxui.message({
text: res.msg,
type: 'success',
});
//初始化文章数据
init({});
}else{
foxui.message({
text: res.msg,
type: 'warning',
});
}
},
error: function(res) {
foxui.message({
text: res.responseJSON.msg,
type: 'warning',
});
}
});
callback();
},
});
}
});
// 批量操作-删除文章
$('#deleteArticle').click(function () {
let idList = articleIdList();
if (idList && idList.length > 0) {
let ids = idList.join();
foxui.dialog({
title: '批量删除文章',
content: `您确定要删除 id 为 ${ids} 的所有文章吗?`,
confirmText: '删除',
cancelText: '取消',
buttonSize: 'small',
buttonType: 'danger',
confirm: function (callback) {
let model = $('input[name="model"]').val();
// 上传数据
$.ajax({
type: "get",
url:"{:url('"+model+"/batchDel')}",
dataType: "json",
async:false,
data:{'ids':ids},
success: function(res) {
if (res.code == 1) {
foxui.message({
text: res.msg,
type: 'success',
});
//初始化文章数据
init({});
}else{
foxui.message({
text: res.msg,
type: 'warning',
});
}
},
error: function(res) {
foxui.message({
text: res.responseJSON.msg,
type: 'warning',
});
}
});
callback();
},
});
}
});
/**
* @description: 操作->编辑
* @param {*} id
* @return {*}
* @Date: 2022-01-12 14:52:13
*/
function handleEdit(id) {
let model = $('input[name="model"]').val();
window.location.href = "{:url('"+model+"/edit')}?type=1&id="+id;
}
/**
* @description: 操作->删除
* @param {*} id
* @return {*}
* @Date: 2022-01-12 14:50:15
*/
function handleDelete(id) {
foxui.dialog({
title: '删除文章',
content: `您确定要删除 id 为 ${id} 的文章吗`,
cancelText: '取消',
confirmText: '删除',
type: 'danger',
confirm: function (callback) {
let model = $('input[name="model"]').val();
$.ajax({
type: "get",
url: "{:url('"+model+"/batchDel')}",
dataType: "json",
async:false,
data:{'ids':id},
success: function(res) {
if (res.code == 1) {
foxui.message({
text: res.msg,
type: 'success',
});
//初始化文章数据
init();
}else{
foxui.message({
text: res.msg,
type: 'warning',
});
}
},
error: function(res) {
foxui.message({
text: res.responseJSON.msg,
type: 'warning',
});
}
});
callback();
},
cancel: function () {},
});
}
/**
* @description: 操作->浏览
* @param {*} id
* @return {*}
* @Date: 2022-01-12 14:54:40
*/
function handleView(id) {
let model = $('input[name="model"]').val();
let url = "{:url('"+model+"/look')}?id="+id;
window.open(url);
}
/**
* @description: 操作->复制
* @param {*} id
* @return {*}
* @Date: 2022-01-12 14:56:59
*/
function handleCopy(id) {
foxui.dialog({
title: '复制文章',
content: `您确定要复制 id 为 ${id} 的文章吗`,
cancelText: '取消',
confirmText: '确定',
confirm: function (callback) {
let model = $('input[name="model"]').val();
//复制文章信息
$.ajax({
type: "get",
url:"{:url('"+model+"/batchCope')}",
dataType: "json",
async:false,
data:{'ids':id},
success: function(res) {
if (res.code == 1) {
foxui.message({
text: res.msg,
type: 'success',
});
//初始化文章数据
init();
}else{
foxui.message({
text: res.msg,
type: 'warning',
});
}
},
error: function(res) {
foxui.message({
text: res.responseJSON.msg,
type: 'warning',
});
}
});
callback()
},
cancel: function () {},
});
}
</script>
<script>
// 获取选中的文章ID
function articleIdList() {
let idList = [];
$('.foxui-table-tbody .foxui-checkbox.is-checked')
.closest('.foxui-table-td')
.next('.foxui-table-td')
.each(function () {
idList.push($(this).text());
});
if (idList.length < 1) {
foxui.message({
text: '请选择文章!',
type: 'danger',
});
return false;
}
return idList;
}
// 批量操作-新增属性 弹框 html
function addAttrHtml(ids) {
return [
'<div id="addAttrDialog" style="padding:0 24px">',
'<div class="foxui-row foxui-gutter-x-3 foxui-gutter-y-7">',
'<div class="foxui-col-xs-4 foxui-col-sm-4"><label>文章属性:</label></div>',
'<div class="foxui-col-xs-20 foxui-col-sm-20 display-flex">',
// 头条
'<div class="column-4 margin-bottom-10">',
'<div class="foxui-checkbox">',
'<span class="foxui-checkbox-input">',
'<i class="foxui-checkbox-icon"></i>',
'<input type="checkbox" value="t" />',
'</span>',
'<span class="foxui-checkbox-label">头条(t)</span>',
'</div>',
'</div>',
// 推荐
'<div class="column-4 margin-bottom-10">',
'<div class="foxui-checkbox">',
'<span class="foxui-checkbox-input">',
'<i class="foxui-checkbox-icon"></i>',
'<input type="checkbox" value="c" />',
'</span>',
'<span class="foxui-checkbox-label">推荐(c)</span>',
'</div>',
'</div>',
// 热门
'<div class="column-4 margin-bottom-10">',
'<div class="foxui-checkbox">',
'<span class="foxui-checkbox-input">',
'<i class="foxui-checkbox-icon"></i>',
'<input type="checkbox" value="h" />',
'</span>',
'<span class="foxui-checkbox-label">热门(h)</span>',
'</div>',
'</div>',
// 加粗
'<div class="column-4 margin-bottom-10">',
'<div class="foxui-checkbox">',
'<span class="foxui-checkbox-input">',
'<i class="foxui-checkbox-icon"></i>',
'<input type="checkbox" value="b" />',
'</span>',
'<span class="foxui-checkbox-label">加粗(b)</span>',
'</div>',
'</div>',
// 幻灯
'<div class="column-4 margin-bottom-10">',
'<div class="foxui-checkbox">',
'<span class="foxui-checkbox-input">',
'<i class="foxui-checkbox-icon"></i>',
'<input type="checkbox" value="s" />',
'</span>',
'<span class="foxui-checkbox-label">幻灯(s)</span>',
'</div>',
'</div>',
'</div>',
'<div class="foxui-col-xs-4 foxui-col-sm-4" style="height:32px; line-height:32px"><label>文章ID</label></div>',
'<div class="foxui-col-xs-20 foxui-col-sm-20">',
`<input class="foxui-size-small" name="article_ids" placeholder="请输入文章id多个用英文逗号分开1,2,3" value="${ids}" />`,
'</div>',
'</div>',
'</div>',
].join('');
}
// 批量操作-移动文章 弹框 html
function removeArticleHtml(ids, selectList) {
return [
'<div id="removeArticleDialog" style="padding:0 24px">',
'<div class="foxui-row foxui-gutter-x-3 foxui-gutter-y-7">',
'<div class="foxui-col-xs-4 foxui-col-sm-4" style="height:32px; line-height:32px"><label>目标栏目:</label></div>',
'<div class="foxui-col-xs-20 foxui-col-sm-20">',
'<div class="foxui-select" style="width: 100%">',
'<div class="foxui-select-handle foxui-select-icon">',
'<input class="foxui-select-input foxui-size-small" readonly="readonly" placeholder="请选择目标栏目" value="" />',
'</div>',
'<div class="foxui-select-menu">',
'<ul class="foxui-select-slide">',
`${selectHtml(selectList)}`,
'</ul>',
'</div>',
'</div>',
'</div>',
'<div class="foxui-col-xs-4 foxui-col-sm-4" style="height:32px; line-height:32px"><label>文章ID</label></div>',
'<div class="foxui-col-xs-20 foxui-col-sm-20">',
`<input class="foxui-size-small" name="article_ids" placeholder="请输入文章id多个用英文逗号分开1,2,3" value="${ids}" />`,
'</div>',
'<div class="foxui-col-xs-20 foxui-col-sm-20 foxui-offset-xs-4 foxui-offset-sm-4 info">切换栏目级别需要重新设置文章的栏目从属关系,以免导致用户浏览不到相关文章</div>',
'</div>',
'</div>',
].join('');
}
// select html
function selectHtml(selectList) {
let htmlArr = [];
selectList.forEach(item => {
htmlArr.push(`<li class="foxui-select-item" data-id="${item.id}">${item.title}</li>`);
});
return htmlArr.join('');
}
</script>
<script>
/**
* @description: 初始化表格
* @param {*} pageSize
* @param {*} total
* @param {*} currentPage
* @param {*} dataList
* @return {*}
* @Date: 2022-01-12 10:55:11
*/
function initTable({ pageSize, total, currentPage }, dataList) {
if (dataList == undefined){
dataList = [];
}
if(total == undefined){
total = 0;
}
// 追加表格 html
_appendToTable(dataList);
// 分页
foxui.pagination(
{
el: '#pagination',
currentPage: currentPage,
total: total,
onchange: function ({ currentPage, pageSize, total }, callback) {
callback({ total, pageSize, currentPage });
let param = {pageSize, currentPage};
init(param)
},
},
{
type: 'plain',
isShowJump: true,
isShowTotal: true,
isShowSize: true,
pageSize: pageSize
}
);
}
/**
* @description: 追加表格 html
* @param {*} dataList
* @return {*}
* @Date: 2022-01-12 00:18:40
*/
function _appendToTable(dataList) {
const html = _trsHtml(dataList);
$('.foxui-table-tbody').empty().append(html);
}
/**
* @description: 表格 html
* @param {*} dataList
* @return {*}
* @Date: 2022-01-12 00:18:52
*/
function _trsHtml(dataList) {
let htmlArr = [];
dataList.forEach(item => {
htmlArr.push(`
<li class="foxui-table-tr">
<div class="foxui-table-td" style="flex: initial; width: 40px">
<div class="foxui-checkbox">
<span class="foxui-checkbox-input">
<i class="foxui-checkbox-icon"></i>
<input type="checkbox" value="" />
</span>
</div>
</div>
<div class="foxui-table-td">${item.id}</div>
<div class="foxui-table-td">
<div class="image-box">
<img data-id="${item.breviary_pic_id}" src="${item.img_url}">
</div>
</div>
<div class="foxui-table-td">${item.title}</div>
<div class="foxui-table-td" style="word-wrap: break-word; word-break: break-word;">${item.column}</div>
<div class="foxui-table-td">${item.click}</div>
<div class="foxui-table-td">${item.release_time}</div>
<div class="foxui-table-td">${_attrHtml(item.attr_list)}</div>
<div class="foxui-table-td">
<button class="foxui-text-primary foxui-size-medium edit-btn" onclick="handleEdit(${item.id})">编辑</button>
<button class="foxui-text-primary foxui-size-medium delete-btn" onclick="handleDelete(${item.id})">删除</button>
<button class="foxui-text-primary foxui-size-medium preview-btn" onclick="handleView(${item.id})">浏览</button>
<button class="foxui-text-primary foxui-size-medium copy-btn" onclick="handleCopy(${item.id})">复制</button>
</div>
</li>
`);
});
return htmlArr.join('');
}
/**
* @description: 文章属性 html
* @param {*} list
* @return {*}
* @Date: 2022-01-12 00:19:04
*/
function _attrHtml(list) {
let htmlArr = [];
list.forEach(item => {
htmlArr.push(`<span class="state-${item.state === 1 ? 'enable' : 'disabled'}">${item.text}</span>`);
});
return htmlArr.join('');
}
</script>
<script>
//初始化文章数据
init();
//搜索
$(".search-btn").on('click', function() {
init();
});
/**
* 初始化文章数据
* @param searchData
*/
function init(param){
if(param == undefined){
param = new Object();
}
let prop = $('input[name="prop"]').attr("data-id");
let keyword = $('input[name="keyword"]').val();
let model = $('input[name="model"]').val();
let column = $('input[name="column"]').val();
param.prop = prop;
param.keyword = keyword;
param.model = model;
param.column = column;
$.ajax({
type: "post",
url:"{:url('index')}",
dataType: "json",
data: param,
async:false,
success: function (res) {
if (res.code == 1 && res.data) {
let data = res.data;
let paginationData = {
pageSize: data.per_page,
total: data.total,
currentPage: data.current_page
};
initTable(paginationData, data.data);
}
}, error: function (res) {
}
});
}
</script>
{/block}