388 lines
12 KiB
JavaScript
388 lines
12 KiB
JavaScript
|
/*
|
|||
|
|
* @Descripttion :
|
|||
|
|
* @Author : liuzhifang
|
|||
|
|
* @Date : 2022-08-10 14:35:18
|
|||
|
|
* @LastEditors : liuzhifang
|
|||
|
|
* @LastEditTime : 2022-08-10 15:57:14
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// 已安装
|
|||
|
|
// const webInstalledDataList = [
|
|||
|
|
// // type 1、只有电脑端； 2、只有移动端； 3、有电脑端和移动端； 4、自适应
|
|||
|
|
// { id: 1, title: '广告公司网站源码传媒公司', serial: 'FOX0001', src: 'https://file.liuzhifang.com/web/web01.jpg', isUsed: 1, type: '3' },
|
|||
|
|
// ];
|
|||
|
|
|
|||
|
|
// 未安装
|
|||
|
|
// const webUninstalledDataList = [
|
|||
|
|
// { id: 1, title: '广告公司网站源码传媒公司', author: '黔狐掌柜', src: 'https://file.liuzhifang.com/web/web05.jpg', type: '4' },
|
|||
|
|
// ];
|
|||
|
|
|
|||
|
|
//初始化模板查询
|
|||
|
|
function templateInit(){
|
|||
|
|
let tabContent = $(".foxui-tabs-header .foxui-tabs-item.is-active").html();
|
|||
|
|
let runStatus = 2;
|
|||
|
|
let keyword = $('input[name="keyword"]').val();
|
|||
|
|
if(tabContent.indexOf("已安装模板") != -1){
|
|||
|
|
runStatus = 1;
|
|||
|
|
}
|
|||
|
|
let datas = {
|
|||
|
|
"keyword": $.trim(keyword),
|
|||
|
|
"bcid": bcid,
|
|||
|
|
runStatus
|
|||
|
|
};
|
|||
|
|
initTemplateList(datas, runStatus);//查询
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化表格
|
|||
|
|
*/
|
|||
|
|
function initTemplateList(param, runStatus) {
|
|||
|
|
let bcid = $("input[name='bcid']").val();
|
|||
|
|
param.bcid = bcid;
|
|||
|
|
param.runStatus = runStatus;
|
|||
|
|
let data = getTemplate(param);
|
|||
|
|
if(runStatus == 1){//已安装
|
|||
|
|
initInstalledTemplateList(data); // 已安装模板
|
|||
|
|
}else if(runStatus == 2){//未安装
|
|||
|
|
initUninstalledTemplateList(data); // 未安装模板
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//获取模型数据
|
|||
|
|
function getTemplate(datas){
|
|||
|
|
let data= null;
|
|||
|
|
$.ajax({
|
|||
|
|
type: "post",
|
|||
|
|
url: ADMIN_PATH + '/LocalTemplate/index',
|
|||
|
|
dataType: "json",
|
|||
|
|
data: datas,
|
|||
|
|
async:false,
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.code == 1 && res.data) {
|
|||
|
|
data = res.data;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function(res) {
|
|||
|
|
console.log("查询模板失败。。。")
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return data;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description: 已安装模板初始化
|
|||
|
|
* @param {*}
|
|||
|
|
* @return {*}
|
|||
|
|
* @Date: 2022-01-18 14:58:47
|
|||
|
|
*/
|
|||
|
|
function initInstalledTemplateList(data) {
|
|||
|
|
|
|||
|
|
let pageSize = data.per_page,
|
|||
|
|
total = data.total,
|
|||
|
|
currentPage = data.current_page;
|
|||
|
|
let dataList = data.data;
|
|||
|
|
// 初始化列表数据
|
|||
|
|
_appendToInstalledList(dataList);
|
|||
|
|
// 初始化分页
|
|||
|
|
foxui.pagination(
|
|||
|
|
{
|
|||
|
|
el: '#installedPagination',
|
|||
|
|
currentPage: currentPage,
|
|||
|
|
total: total,
|
|||
|
|
onchange: function ({ currentPage, pageSize, total }, callback) {
|
|||
|
|
// 获取页码相关数据，添加异步请求
|
|||
|
|
callback({ total, pageSize, currentPage });
|
|||
|
|
let param = {currentPage, pageSize};
|
|||
|
|
initTemplateList(param,1);//已安装
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'plain',
|
|||
|
|
pageSize: pageSize,
|
|||
|
|
isShowJump: true,
|
|||
|
|
isShowTotal: true,
|
|||
|
|
isShowSize: true,
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description: 未安装模板初始化
|
|||
|
|
* @param {*} data
|
|||
|
|
* @return {*}
|
|||
|
|
* @Date: 2022-01-18 16:16:53
|
|||
|
|
*/
|
|||
|
|
function initUninstalledTemplateList(data) {
|
|||
|
|
let pageSize = data.per_page,
|
|||
|
|
total = data.total,
|
|||
|
|
currentPage = data.current_page;
|
|||
|
|
let dataList = data.data;
|
|||
|
|
$("#unCount").html(total);//未安装的模板
|
|||
|
|
// 初始化列表数据
|
|||
|
|
_appendToUninstalledList(dataList);
|
|||
|
|
// 初始化分页
|
|||
|
|
foxui.pagination(
|
|||
|
|
{
|
|||
|
|
el: '#uninstalledPagination',
|
|||
|
|
currentPage: currentPage,
|
|||
|
|
total: total,
|
|||
|
|
onchange: function ({ currentPage, pageSize, total }, callback) {
|
|||
|
|
callback({ total, pageSize, currentPage });
|
|||
|
|
let param = {currentPage, pageSize};
|
|||
|
|
initTemplateList(param,2);//已安装
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'plain',
|
|||
|
|
pageSize: pageSize,
|
|||
|
|
isShowJump: true,
|
|||
|
|
isShowTotal: true,
|
|||
|
|
isShowSize: true,
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description: 已安装模板->使用模板
|
|||
|
|
* @param {*}
|
|||
|
|
* @return {*}
|
|||
|
|
* @Date: 2022-01-18 16:37:43
|
|||
|
|
*/
|
|||
|
|
$(document).on('click', '.template-item .use', function () {
|
|||
|
|
let $this = $(this),
|
|||
|
|
$curItem = $this.closest('.template-item'),
|
|||
|
|
$actItem = $this.closest('.foxui-row').find('.template-item').filter('.is-active');
|
|||
|
|
|
|||
|
|
foxui.dialog({
|
|||
|
|
title: '<i class="foxui-icon-info-solid" style="color:#ffcc00; font-size:20px; margin-right: 6px;"></i><span>确认提示</span>',
|
|||
|
|
content: '<span style="margin-left: 26px;">启用此模板作为前端网站模板，是否继续？</span>',
|
|||
|
|
confirmText: '确定',
|
|||
|
|
cancelText: '取消',
|
|||
|
|
confirm: function (callback) {
|
|||
|
|
const id = $this.closest('.template-item').attr('data-id');
|
|||
|
|
callback();
|
|||
|
|
foxui.loading();
|
|||
|
|
|
|||
|
|
// 异步提交数据
|
|||
|
|
console.log(id);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
$actItem.removeClass('is-active');
|
|||
|
|
$curItem.addClass('is-active');
|
|||
|
|
foxui.closeLoading();
|
|||
|
|
}, 1500);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description: 已安装模板->设置模板
|
|||
|
|
* @param {*}
|
|||
|
|
* @return {*}
|
|||
|
|
* @Date: 2022-01-18 16:43:45
|
|||
|
|
*/
|
|||
|
|
$(document).on('click', '.template-item .set', function () {
|
|||
|
|
const id = $(this).closest('.template-item').attr('data-id');
|
|||
|
|
window.location.href = `local_template_set.html?id=${id}`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description: 已安装模板->导出模板
|
|||
|
|
* @param {*}
|
|||
|
|
* @return {*}
|
|||
|
|
* @Date: 2022-08-10 15:08:34
|
|||
|
|
*/
|
|||
|
|
$(document).on('click', '.template-item .export', function () {
|
|||
|
|
alert('导出模板');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description: 已安装模板->卸载模板
|
|||
|
|
* @param {*} event
|
|||
|
|
* @return {*}
|
|||
|
|
* @Date: 2022-01-20 09:43:46
|
|||
|
|
*/
|
|||
|
|
$(document).on('click', '.template-item .uninstall', function () {
|
|||
|
|
const id = $(this).closest('.template-item').attr('data-id');
|
|||
|
|
window.location.href = `uninstall_template.html?id=${id}`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description: 未安装模板->安装模板
|
|||
|
|
* @param {*} event
|
|||
|
|
* @return {*}
|
|||
|
|
* @Date: 2022-01-19 19:49:32
|
|||
|
|
*/
|
|||
|
|
$(document).on('click', '.template-item .install', function () {
|
|||
|
|
const id = $(this).closest('.template-item').attr('data-id');
|
|||
|
|
window.location.href = `install_template.html?id=${id}`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description: 未安装模板->删除模板
|
|||
|
|
* @param {*} event
|
|||
|
|
* @return {*}
|
|||
|
|
* @Date: 2022-01-19 19:51:50
|
|||
|
|
*/
|
|||
|
|
$(document).on('click', '.template-item .delete', function () {
|
|||
|
|
const $this = $(this),
|
|||
|
|
id = $this.closest('.template-item').attr('data-id');
|
|||
|
|
foxui.dialog({
|
|||
|
|
title: '删除',
|
|||
|
|
content: '您确定要删除此模板吗',
|
|||
|
|
confirmText: '删除',
|
|||
|
|
cancelText: '取消',
|
|||
|
|
buttonType: 'danger',
|
|||
|
|
confirm: function (callback) {
|
|||
|
|
callback();
|
|||
|
|
// 添加异步请求，删除数据
|
|||
|
|
console.log(id);
|
|||
|
|
$this.closest('.foxui-col-sm-4').remove();
|
|||
|
|
foxui.message({
|
|||
|
|
text: '删除成功',
|
|||
|
|
type: 'success',
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* 子方法
|
|||
|
|
---------------------------------------------------------------------------------------------------- */
|
|||
|
|
/**
|
|||
|
|
* @description: 更新已安装模板列表
|
|||
|
|
* @param {*} dataList
|
|||
|
|
* @return {*}
|
|||
|
|
* @Date: 2022-01-18 14:55:04
|
|||
|
|
*/
|
|||
|
|
function _appendToInstalledList(dataList) {
|
|||
|
|
const html = _listInstalledHtml(dataList);
|
|||
|
|
$('.foxui-tabs .foxui-tabs-pane .installed').empty().append(html);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description: 更新未安装模板列表
|
|||
|
|
* @param {*} dataList
|
|||
|
|
* @return {*}
|
|||
|
|
* @Date: 2022-01-18 16:14:59
|
|||
|
|
*/
|
|||
|
|
function _appendToUninstalledList(dataList) {
|
|||
|
|
const html = _listUninstalledHtml(dataList);
|
|||
|
|
$('.foxui-tabs .foxui-tabs-pane .uninstalled').empty().append(html);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description: 生成已安装模板列表 html
|
|||
|
|
* @param {*} dataList
|
|||
|
|
* @return {*}
|
|||
|
|
* @Date: 2022-01-18 14:55:23
|
|||
|
|
*/
|
|||
|
|
function _listInstalledHtml(dataList) {
|
|||
|
|
let htmlArr = [];
|
|||
|
|
dataList.forEach(item => {
|
|||
|
|
htmlArr.push(
|
|||
|
|
[
|
|||
|
|
'<div class="foxui-col-xs-4 foxui-col-sm-4">',
|
|||
|
|
`<div class="template-item ${item.run_status === 1 ? 'is-active' : ''}" data-id="${item.id}">`,
|
|||
|
|
'<div class="template-main">',
|
|||
|
|
`<img src="${item.thumb_url || ''}" />`,
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="template-footer">',
|
|||
|
|
'<div class="serial-number">',
|
|||
|
|
'<div class="left trapezoid">',
|
|||
|
|
`<span class="serial">${item.code || ''}</span>`,
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="right">',
|
|||
|
|
`${_typeHtml(item.type)}`,
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
`<div class="title">${item.title || ''}</div>`,
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="template-mask">',
|
|||
|
|
'<div class="center-btns">',
|
|||
|
|
'<button class="foxui-size-medium foxui-solid-primary use">启用模板</button>',
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="btn-list">',
|
|||
|
|
'<button class="foxui-solid-info foxui-size-mini foxui-solid-primary set">',
|
|||
|
|
'<i class="foxui-icon-shezhi-o"></i>',
|
|||
|
|
'</button>',
|
|||
|
|
'<button class="foxui-solid-info foxui-size-mini foxui-solid-primary export">',
|
|||
|
|
'<i class="foxui-icon-shangchuan-o"></i>',
|
|||
|
|
'</button>',
|
|||
|
|
'<button class="foxui-solid-info foxui-size-mini foxui-solid-primary uninstall">',
|
|||
|
|
'<i class="foxui-icon-shanchu-o"></i>',
|
|||
|
|
'</button>',
|
|||
|
|
'</div>',
|
|||
|
|
'<i class="foxui-icon-mark-top-center mark inuse">启用</i>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
].join('')
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
return htmlArr.join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description: 生成未安装模板列表 html
|
|||
|
|
* @param {*} dataList
|
|||
|
|
* @return {*}
|
|||
|
|
* @Date: 2022-01-18 16:14:24
|
|||
|
|
*/
|
|||
|
|
function _listUninstalledHtml(dataList) {
|
|||
|
|
let htmlArr = [];
|
|||
|
|
dataList.forEach(item => {
|
|||
|
|
htmlArr.push(
|
|||
|
|
[
|
|||
|
|
'<div class="foxui-col-xs-4 foxui-col-sm-4">',
|
|||
|
|
`<div class="template-item" data-id="${item.id}">`,
|
|||
|
|
'<div class="template-main">',
|
|||
|
|
`<img src="${item.thumb_url || ''}" />`,
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="template-footer">',
|
|||
|
|
'<div class="serial-number">',
|
|||
|
|
'<div class="left">',
|
|||
|
|
`<span class="author">作者：${item.author || ''}</span>`,
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="right">',
|
|||
|
|
`${_typeHtml(item.type)}`,
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
`<div class="title">${item.title || ''}</div>`,
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="template-mask">',
|
|||
|
|
'<div class="center-btns">',
|
|||
|
|
'<button class="foxui-size-medium foxui-solid-primary install"">安装模板</button>',
|
|||
|
|
'<button class="foxui-size-medium foxui-solid-danger delete">删除模板</button>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
].join('')
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
return htmlArr.join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description: 模板类型 html
|
|||
|
|
* @param {*} type
|
|||
|
|
* @return {*}
|
|||
|
|
* @Date: 2022-01-18 15:14:49
|
|||
|
|
*/
|
|||
|
|
function _typeHtml(type) {
|
|||
|
|
switch (type) {
|
|||
|
|
case '1':
|
|||
|
|
return `<i class="foxui-icon-pc"></i>`;
|
|||
|
|
case '2':
|
|||
|
|
return `<i class="foxui-icon-phone"></i>`;
|
|||
|
|
case '3':
|
|||
|
|
return `<i class="foxui-icon-pc"></i><i class="foxui-icon-phone"></i>`;
|
|||
|
|
case '4':
|
|||
|
|
return `<i class="foxui-icon-pc-phone"></i>`;
|
|||
|
|
default:
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
}
|