558 lines
24 KiB
HTML
558 lines
24 KiB
HTML
<div class="warp-box">
|
||
<div v-for="(item,key) in MianData" class="warp-block" :key="item.key" v-loading="item.loading" element-loading-text="保存中">
|
||
<div class="title-header">
|
||
<div class="left">
|
||
<el-icon class="icon-header"><Rank /></el-icon>
|
||
<el-text truncated tag="b">{{item.title}}</el-text>
|
||
<el-icon class="edit" @click="MainOperation('edit',key)"><Edit-Pen /></el-icon>
|
||
</div>
|
||
|
||
<div class="right" v-show="mainvisible">
|
||
<!--{template components/setting/style}-->
|
||
<el-button style="margin-left: 12px;" type="primary" plain size="small" @click="MainOperation('save',key)">保存</el-button>
|
||
<el-popconfirm title="此操作无法恢复，确定删除？" @confirm="MainOperation('delete',key)">
|
||
<template #reference>
|
||
<el-button type="danger" plain size="small">删除</el-button>
|
||
</template>
|
||
</el-popconfirm>
|
||
</div>
|
||
</div>
|
||
<div v-show="mainvisible" class="warp-content">
|
||
<component
|
||
v-if="item.data && item.data.length"
|
||
:is="'Tmp'+item.type"
|
||
:field="MianFieldType[item.type].data"
|
||
:model="item"
|
||
:typecollection="TypeCollection"
|
||
:ParenIndex="key"></component>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<script>
|
||
const MainMixin = {
|
||
data(){
|
||
return {
|
||
MianData:[],
|
||
editorVal:'',
|
||
mainvisible:true,
|
||
MainStyle:{},
|
||
Mainthemeid:'',
|
||
MianFieldType:{
|
||
slide:{
|
||
loading:false,
|
||
key:'',
|
||
tid:0,//块id
|
||
type:'slide',//块类型
|
||
title:'幻灯片',//块名称
|
||
style:{style:'',size:''},//样式
|
||
data:[
|
||
{
|
||
tdid:0,
|
||
data:[
|
||
{key:0,url:'',img:'',aid:0,link:'0',linkval:''},
|
||
]
|
||
}
|
||
]
|
||
},
|
||
rich_text:{
|
||
loading:false,
|
||
key:'',
|
||
tid:0,//块id
|
||
type:'rich_text',//块类型
|
||
title:'富文本',//块名称
|
||
style:{style:'',size:''},//样式
|
||
data:[
|
||
{
|
||
name:'标题',
|
||
key:0,
|
||
tdid:0,
|
||
data:''
|
||
}
|
||
]
|
||
},
|
||
link:{
|
||
loading:false,
|
||
tid:0,//块id
|
||
key:'',
|
||
type:'link',//块类型
|
||
title:'链接',//块名称
|
||
style:{style:'',size:''},//样式
|
||
size:'',//尺寸
|
||
data:[
|
||
{
|
||
tdid:0,
|
||
data:[
|
||
{
|
||
key:0,
|
||
aid:0,
|
||
img:'',
|
||
title:'',
|
||
message:'',
|
||
link:'0',
|
||
linkval:'',
|
||
},
|
||
]
|
||
}
|
||
]
|
||
},
|
||
contact:{
|
||
loading:false,
|
||
tid:0,//块id
|
||
key:'',
|
||
type:'contact',//块类型
|
||
title:'联系方式',//块名称
|
||
style:{style:'',size:''},//样式
|
||
data:[
|
||
{
|
||
tdid:0,
|
||
data:[
|
||
{
|
||
key:0,
|
||
aid:0,
|
||
img:'',
|
||
title:'',
|
||
},
|
||
]
|
||
}
|
||
]
|
||
},
|
||
question:{
|
||
loading:false,
|
||
tid:0,//块id
|
||
key:'',
|
||
type:'question',//块类型
|
||
title:'常见问题',//块名称
|
||
style:{style:'',size:''},//样式
|
||
data:[
|
||
{
|
||
name:'标题',
|
||
key:0,
|
||
tdid:0,
|
||
data:[
|
||
{key:0,title:'',answer:''},
|
||
]
|
||
}
|
||
]
|
||
},
|
||
manual_rec:{
|
||
loading:false,
|
||
tid:0,//块id
|
||
key:'',
|
||
type:'manual_rec',//块类型
|
||
title:"手动推荐",//块名称
|
||
style:{style:'',size:''},//样式
|
||
data:[
|
||
{
|
||
name:'标题',
|
||
tdid:0,
|
||
key:0,
|
||
data:[
|
||
{
|
||
key:0,
|
||
url:'',
|
||
title:'',
|
||
img:'',
|
||
aid:0,
|
||
link:'0',
|
||
linkval:''
|
||
},
|
||
]
|
||
},
|
||
]
|
||
},
|
||
file_rec:{
|
||
loading:false,
|
||
tid: 0,//块id
|
||
key:'',
|
||
type: 'file_rec',//块类型
|
||
style:{style:'',size:''},//样式
|
||
title: '文件推荐',
|
||
data: [
|
||
{
|
||
tdid:0,
|
||
data:[
|
||
{
|
||
key:0,
|
||
name: '标题',//tab标题
|
||
ftype: 0,//是0库还是1智能数据
|
||
id: '',//数据源id
|
||
type: 1,//1全部、2标签、3评分、4分类
|
||
sort: 1,//1最新、2最热、3文件名
|
||
number: 1,//排数
|
||
time:600,//缓存时间
|
||
isfilename: 0,//文件名
|
||
isdown: 0,//下载按钮
|
||
link:'0',//链接类型，0地址、1库、2单页、2栏目
|
||
linkval:'',//更多链接地址
|
||
moretxt: '更多',//更多文字
|
||
gradetype:0,//评分类型，0是,1不是,2包含及以下3,包含及以上
|
||
value: '',//推荐标签、评分的值、分类的值
|
||
classify:{//分类回显值
|
||
text:[],
|
||
expandedkeys:[],
|
||
checked:[]
|
||
},
|
||
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
tab_rec:{
|
||
loading:false,
|
||
tid: 0,//块id
|
||
key:'',
|
||
type: 'tab_rec',//块类型
|
||
style:{style:'',size:''},//样式
|
||
title: '专辑推荐',
|
||
data: [
|
||
{
|
||
tdid:0,
|
||
data:[
|
||
{
|
||
key:0,
|
||
name: '标题',//tab标题
|
||
id: '',//数据源id
|
||
sort: 1,//1最新、2最热
|
||
number: 1,//排数
|
||
time:600,//缓存时间
|
||
link:'0',//链接类型，0地址、1库、2单页、2栏目
|
||
linkval:'',//更多链接地址
|
||
moretxt: '更多',//更多文字
|
||
value: '',//推荐标签、评分的值、分类的值
|
||
classify:{//分类回显值
|
||
text:[],
|
||
expandedkeys:[],
|
||
checked:[]
|
||
},
|
||
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
db_ids:{
|
||
loading:false,
|
||
tid: 0,//块id
|
||
key:'',
|
||
type: 'db_ids',//块类型
|
||
title:'库',//块名称
|
||
style:{style:'',size:''},//样式
|
||
data: [
|
||
{
|
||
name:'标题',
|
||
tdid:0,
|
||
key:0,
|
||
data:[
|
||
{
|
||
id: '',//数据源id
|
||
ftype: 0,//是0库还是1智能数据
|
||
sort: 1,//1最新、2最热、3文件名
|
||
isfilename: 0,//文件名
|
||
number: 0,//获取数量
|
||
time:600,//缓存时间
|
||
moretxt:'更多',
|
||
link: '0',//更多链接
|
||
linkval:'',//更多链接
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
banner:{
|
||
loading:false,
|
||
tid:0,//块id
|
||
key:'',
|
||
type:'banner',//块类型
|
||
title:'横幅广告',//块名称
|
||
style:{style:'',size:''},//样式
|
||
data:[
|
||
{
|
||
tdid:0,
|
||
data:[
|
||
{key:0,url:'',img:'',aid:0,link:'0',linkval:''},
|
||
]
|
||
}
|
||
]
|
||
},
|
||
search_rec:{
|
||
loading:false,
|
||
tid:0,//块id
|
||
key:'',
|
||
type:'search_rec',//块类型
|
||
title:'搜索',//块名称
|
||
style:{style:'',size:''},//样式
|
||
data:[
|
||
{
|
||
tdid:0,
|
||
data:[
|
||
{
|
||
key:0,
|
||
img:'',
|
||
aid:0,
|
||
title:'',
|
||
desc:'',
|
||
searchclassify:[],
|
||
defaultclassify: '',
|
||
hots: 0,
|
||
hotsValue:[]
|
||
},
|
||
]
|
||
}
|
||
]
|
||
},
|
||
}
|
||
}
|
||
},
|
||
created(){
|
||
this.MainGetStyle();
|
||
},
|
||
methods:{
|
||
|
||
async MainOperation(type,index,flag){
|
||
const self = this;
|
||
switch(type){
|
||
case 'add'://块添加
|
||
let val = JSON.parse(JSON.stringify(this.MianFieldType[flag]));
|
||
if(val){
|
||
val['key'] - this.MainGetId();
|
||
this.MianData.splice(index,0,val);
|
||
// this.MainSave(this.MianData[index],index);
|
||
}
|
||
break;
|
||
case 'save'://块保存
|
||
var data = this.MianData[index];
|
||
if(data){
|
||
this.MainSave(data,index);
|
||
}
|
||
|
||
break;
|
||
case 'delete'://块删除
|
||
var data = this.MianData[index];
|
||
if(data.tid){
|
||
const {data: res} = await axios.post(BasicUrl+'deltag',{
|
||
tid:data.tid,
|
||
});
|
||
if(res.success){
|
||
data.loading = true;
|
||
this.MianData.splice(index,1);
|
||
}else{
|
||
self.$message.error(res.msg || '删除失败');
|
||
}
|
||
}else{
|
||
this.MianData.splice(index,1);
|
||
}
|
||
|
||
|
||
break;
|
||
case 'edit'://块修改名称
|
||
var data = this.MianData[index];
|
||
if(data){
|
||
self.$messageBox.prompt('', '修改', {
|
||
confirmButtonText: '确定',
|
||
inputValue:data.title,
|
||
cancelButtonText: '关闭',
|
||
}).then(({ value }) => {
|
||
data.title = value;
|
||
}).catch(() => {
|
||
|
||
})
|
||
}
|
||
|
||
break;
|
||
}
|
||
},
|
||
MainGetId(){
|
||
let date = Date.now();
|
||
let rund = Math.ceil(Math.random()*1000)
|
||
let id = date + '' + rund;
|
||
return id;
|
||
},
|
||
async MainSave(data,disp){
|
||
const self = this;
|
||
data.loading = true;
|
||
let NewData = JSON.parse(JSON.stringify(data));
|
||
delete NewData['loading'];
|
||
delete NewData['key'];
|
||
NewData['disp'] = disp;
|
||
switch(NewData.type){
|
||
case 'slide':
|
||
case 'link':
|
||
case 'search_rec':
|
||
case 'contact':
|
||
case 'banner':
|
||
if(NewData.data[0].data && NewData.data[0].data.length){
|
||
NewData.data[0].data.forEach(current => {
|
||
delete current['key'];
|
||
delete current['url'];
|
||
});
|
||
}
|
||
break;
|
||
case 'rich_text':
|
||
if(NewData.data && NewData.data.length){
|
||
NewData.data.forEach(current => {
|
||
delete current['key'];
|
||
delete current['url'];
|
||
});
|
||
}
|
||
break;
|
||
case 'file_rec':
|
||
case 'manual_rec':
|
||
case 'question':
|
||
if(NewData.data && NewData.data.length){
|
||
NewData.data.forEach(current => {
|
||
delete current['key'];
|
||
delete current['url'];
|
||
if(current.data && current.data.length){
|
||
current.data.forEach(current => {
|
||
delete current['key'];
|
||
delete current['url'];
|
||
});
|
||
}
|
||
});
|
||
}
|
||
break;
|
||
}
|
||
const {data: res} = await axios.post(BasicUrl+'setpage',{
|
||
id:$id,
|
||
data:NewData
|
||
});
|
||
if(res.success){
|
||
data.loading = false;
|
||
data.tid = res.data.tid;
|
||
switch(data.type){
|
||
case 'slide':
|
||
case 'link':
|
||
case 'contact':
|
||
case 'search_rec':
|
||
case 'banner':
|
||
if(data.data[0]){
|
||
data.data[0].tdid = res.data.data[0].tdid;
|
||
}
|
||
break;
|
||
case 'file_rec':
|
||
case 'manual_rec':
|
||
case 'rich_text':
|
||
case 'question':
|
||
case 'db_ids':
|
||
if(data.data && data.data.length){
|
||
data.data.forEach((current,inx) => {
|
||
current.tdid = res.data.data[inx].tdid
|
||
});
|
||
}
|
||
break;
|
||
}
|
||
self.$message({
|
||
type:'success',
|
||
message:'保存成功'
|
||
})
|
||
}else{
|
||
self.$message.error(res.msg || '提交失败');
|
||
}
|
||
},
|
||
async MainGetStyle(){
|
||
const self = this;
|
||
const {data: res} = await axios.get(BasicUrl+'getmouldstyle');
|
||
if(res.success){
|
||
this.MainStyle = res.data;
|
||
this.Mainthemeid = res.themeid;
|
||
for (const key in this.MainStyle) {
|
||
if (Object.hasOwnProperty.call(this.MainStyle, key)) {
|
||
this.mianDefaultValue(key);
|
||
}
|
||
}
|
||
}else{
|
||
self.$message.error(res.msg || '模板样式获取失败');
|
||
}
|
||
},
|
||
mianDefaultValue(type){
|
||
const self = this;
|
||
if(!this.MainStyle[type])return false;
|
||
let data = this.MainStyle[type];
|
||
if(self.MianFieldType[type]){
|
||
for (const fkey in data) {
|
||
if (Object.hasOwnProperty.call(data, fkey)) {
|
||
let item = data[fkey];
|
||
if(item.default == "true"){
|
||
self.MianFieldType[type]['style']['style'] = item.value;
|
||
if(item.size && item.size.length){
|
||
for (let index = 0; index < item.size.length; index++) {
|
||
let element = item.size[index];
|
||
if(element.default == "true"){
|
||
self.MianFieldType[type]['style']['size'] = element.value;
|
||
continue;
|
||
}
|
||
}
|
||
}
|
||
continue;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
},
|
||
mianSortable(){
|
||
const self = this;
|
||
var tbody = document.querySelector('.warp-box');
|
||
new Sortable(tbody, {
|
||
draggable: ".warp-block",
|
||
handle: ".icon-header",
|
||
group: {
|
||
name: 'shared',
|
||
},
|
||
animation: 150,
|
||
// 元素被选中
|
||
onStart: function (/**Event*/evt) {
|
||
self.mainvisible = false;
|
||
evt.preventDefault();
|
||
},
|
||
// 结束拖拽
|
||
onEnd: function (/**Event*/evt) {
|
||
self.mainvisible = true;
|
||
const currentRow = self.MianData.splice(evt.oldIndex, 1)[0];
|
||
self.MianData.splice(evt.newIndex, 0, currentRow);
|
||
self.mianSortableSave();
|
||
},
|
||
// 元素从一个列表拖拽到另一个列表
|
||
onAdd: function ({item, newIndex, oldIndex}) {
|
||
item.remove();
|
||
let curr = self.rightData[oldIndex];
|
||
self.MainOperation('add',newIndex,curr.flag);
|
||
},
|
||
// 元素从一个列表拖拽到另一个列表
|
||
onChange: function (evt) {
|
||
evt.preventDefault();
|
||
},
|
||
});
|
||
},
|
||
async mianSortableSave(){
|
||
const self = this;
|
||
let ids = [];
|
||
if(!self.MianData.length || self.MianData.length == 1)return false;
|
||
for (let index = 0; index < self.MianData.length; index++) {
|
||
const element = self.MianData[index];
|
||
if(element.tid){
|
||
ids.push(element.tid)
|
||
}
|
||
|
||
}
|
||
if(!ids.length)return false;
|
||
const {data: res} = await axios.post(BasicUrl+'sorttag',{
|
||
id:$id,
|
||
tids:ids.join(',')
|
||
});
|
||
}
|
||
},
|
||
mounted(){
|
||
this.mianSortable();
|
||
let tbody = document.querySelector('.el-main').clientHeight;
|
||
document.querySelector('.warp-box').style.minHeight = tbody+"px";
|
||
var self = this;
|
||
|
||
|
||
}
|
||
}
|
||
</script> |