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 '';
|
||
}
|
||
}
|