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

845 lines
23 KiB
HTML
Raw Normal View History

2024-12-02 13:57:08 +08:00
{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}