1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711 |
- //cms中的接口 获取网站基本信息,网站导航,网站底部导航,网站行政区划,行政职能
- import {getSiteInfo,getSiteCategory,getFooterCategoryList,selectWebsiteArea,selectWebsiteDepartment } from '@/api/cms'
- //自助建站的接口 用于添加基本信息
- import {getWebsiteintel,addWebsiteTemplateintel,getWebsiteTemplateintel,upWebsiteTemplateintel,getAllTemplateClass,getWebsiteTemplateList,addWebsiteTemplateclassintel,
- getWebsiteTemplateclassintel,addWebsiteTemplate,getWebsiteTemplateInfo,getWebsiteTemplateData} from '@/api/template'
- import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的
- import Vue from 'vue'; //导入Vue 因为我们要进行深层次的json修改,深拷贝的数据无法令视图更新
- //所以我们需要使用Vue的$set方法来强制视图更新,在vuex中没有this,这里我们需要通过引入vue来使用vue.$set
- //引入随机模板json
- //首页 风格1
- import randomIndex1 from '@/utils/templateJson/index/style1/1.js';
- //首页 风格2
- import randomIndex2 from '@/utils/templateJson/index/style1/2.js';
- const state = {
- //0.全局配置 start------------------------------------------------------------>
- editWebsiteId: "",//当前编辑网站的id
- editWebsiteClass:"",//当前编辑网站的风格
- stepStatus: true,//是否显示现在进行到哪一步:true=显示 false=不显示
- //0.全局配置 end------------------------------------------------------------>
-
- //1.画布数据 start------------------------------------------------------------>
- pageStatus:1,//当前编辑哪个页面 1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=自定义列表页 7=自定义详情页
- menuType:1, //当前菜单显示板块还是组件 1=板块 2=组件
- previewStatus:false,//是否预览
- gridKey:0,//使用gridKey来强制更新视图
- loading:false,//是否显示加载中
- ad_id:"",//生成储存的广告id
- showPage:{ //哪些页面可以被展示
- index:true,
- class:false,
- list:true,
- article:true,
- search:false,
- aloneList:false,
- aloneArticle:false
- },
- pageData: { //自助建站拖拽板块的数据,注意,这里并不是提交到后台的数据
- index:[
-
- ],//首页
- class:[],//分类页
- list:[],//列表页
- article:[],//详情页
- search:[],//搜索页
- aloneList:[],//自定义列表页
- aloneArticle:[],//自定义详情页
- },
- // layout: [
- // // i = id
- // // w = 最大宽度是12
- // // { i: "0", x: 0, y: 0, w: 12, h: 2, content:""},
- // // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
- // ],
- //1.画布数据 end------------------------------------------------------------>
- //2.站点数据 start------------------------------------------------------------>
- webSiteInfo:"",//网站信息
- webSiteMenu:"",//网站包含的导航池
- area:{//地区
- economize:[],//省区
- market:[],//市区
- county:[]//县区
- },
- departmentList:[],//职能部门
- //2.站点数据 end------------------------------------------------------------>
- //3.画布构造 start------------------------------------------------------------>
- editSectorY:0,//当前组件在画布中的位置
- mouseXY:{//鼠标位置
- "x": 12,
- "y": 33
- },
- DragPos:{//创建的占位符大小
- "x": null,
- "y": null,
- "w": 12,
- "h": 2,
- "i": null
- },
- //获得gridlayout对象
- gridlayoutObj:null,
- //3.画布构造 end------------------------------------------------------------>
- //4.构造的网站数据 start------------------------------------------------------------>
- editWindowStatus:false,//编辑组件弹出框是否显示
- editComponentWindowStatus:false,//选择组件样式弹出框是否显示
- editWebsiteTemplateJsonWindow:false,//当前准备提交的数据 后期删除
- editWindowTitle:"",//编辑弹出框标题
- editSectorId:0,//当前正在编辑的板块id
- editDataSort:0,//当前正在编辑的数据位置
- editComponentSort:0,//当前正在编辑的组件id
- editComponentType:0,//当前正在编辑的组件类型
- editComponentSize:0,//当前组件展示的条数
- editComponentStyle:0,//当前编辑的组件样式
- editWebsiteCategory:[],//当前网站全部关联导航
- webSiteData:{
- //1.base网站基本信息
- base:{
- websiteId:"",//网站id
- },
- //2.style信息
- style:{
- styleId:"",//风格id
- },
- //3.板块信息 header,menu,footer 是页面自带的无需构建
- template:{
- //index = 首页 class=分类页 list=列表页 article=详情页 search=搜索页 aloneList=自定义列表页 aloneArticle=自定义详情页
- index:[],
- class:[],//分类页
- list:[],//列表页
- article:[],//详情页
- search:[],//搜索页
- aloneList:[],//自定义列表页
- aloneArticle:[],//自定义详情页
- }
- },
- canSubmit:false,//当前数据是否可以被提交
- //4.构造的网站数据 end------------------------------------------------------------>
- //5.组件回显数据 start------------------------------------------------------------>
- componentViewData:{
- pid_arr:[],//导航池
- pageSize:"",//展示条数
- adName:"",//广告名称
- titleName:"",//标题名称
- }
- //5.组件回显数据 start------------------------------------------------------------>
- }
- const mutations = {
- //0.全局配置 start------------------------------------------------------------>
- //设置网站的id
- setEditWebsiteId(state,id){
- state.editWebsiteId = id;
- },
- //设置网站的风格
- setClassNumber(state,id){
- state.editWebsiteClass = id;
- },
- //展示步骤
- showStepStatus(state){
- state.stepStatus = true;
- },
- //隐藏步骤
- hiddenStepStatus(state){
- state.stepStatus = false;
- },
- //设置步骤
- setPageStatus(state,num){
- state.pageStatus = num;
- },
- //设置预览状态
- setPreviewStatus(state){
- state.previewStatus = !state.previewStatus;
- },
- //打开编辑组件弹出框
- setEditWindowStatus(state,data){
- state.editWindowStatus = true;
- state.editSectorId = data.id;
- state.editSectorY = data.y;
- state.editDataSort = data.dataSort;
- state.editComponentSort = data.sort;
- state.editComponentType = data.type;
- state.editComponentSize = data.size;
- },
- //关闭编辑组件弹出框
- closeEditWindowStatus(state){
- state.editWindowStatus = false;
- },
- //打开选择组件样式弹出框
- setComponentStyleStatus(state,data){
- state.editComponentWindowStatus = true;
- state.editSectorId = data.id;
- state.editDataSort = data.dataSort;
- state.editComponentSort = data.sort;
- state.editComponentType = data.type;
- state.editComponentStyle = data.style;
- },
- //关闭选择组件样式弹出框
- closeComponentStyleStatus(state){
- state.editComponentWindowStatus = false;
- },
- //关闭提交数据弹出框
- closeEditWebsiteTemplateJsonWindow(state){
- state.editWebsiteTemplateJsonWindow = false;
- },
- //选择组件样式
- selectComponentStyleNumber(state,data){
- state.editComponentStyle = data;
- },
- //设置组件回显数据
- setComponentViewData(state,data){
- //首页
- if(state.pageStatus == 1){
- //找到要修改的板块
- const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
- //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
- if(state.editComponentType == 1){
- state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
- state.componentViewData.pageSize = state.editComponentSize;
- }
- //2=tabs新闻选项卡
- if(state.editComponentType == 2){
- state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
- state.componentViewData.pageSize = state.editComponentSize;
- }
- //3=广告名称
- if(state.editComponentType == 3){
- state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
- }
- //7=标题
- if(state.editComponentType == 7){
- state.componentViewData.titleName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
- }
- }
- //pageStatus==2 分类页
- if(state.pageStatus == 2){}
- //pageStatus==3 列表页
- if(state.pageStatus == 3){
- const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id);
- //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
- if(state.editComponentType == 1){
- state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
- state.componentViewData.pageSize = state.editComponentSize;
- }
- //2=tabs新闻选项卡
- if(state.editComponentType == 2){
- state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
- state.componentViewData.pageSize = state.editComponentSize;
- }
- //3=广告名称
- if(state.editComponentType == 3){
- state.componentViewData.adName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text;
- }
- //7=标题
- if(state.editComponentType == 7){
- state.componentViewData.titleName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text;
- }
- }
- //pageStatus==4 详情页
- if(state.pageStatus == 4){
-
- const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
- //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
- if(state.editComponentType == 1){
- state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
- state.componentViewData.pageSize = state.editComponentSize;
- }
- //2=tabs新闻选项卡
- if(state.editComponentType == 2){
- state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
- state.componentViewData.pageSize = state.editComponentSize;
- }
- //3=广告名称
- if(state.editComponentType == 3){
- state.componentViewData.adName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text;
- }
- //7=标题
- if(state.editComponentType == 7){
- state.componentViewData.titleName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text;
- }
- }
- //pageStatus==5 搜索页
- if(state.pageStatus == 5){}
- //pageStatus==6 自定义列表页
- if(state.pageStatus == 6){}
- //pageStatus==7 自定义详情页
- if(state.pageStatus == 7){}
- },
- //生成一个随机的广告id
- getRandomAdid(state){
- //网站id
- const websiteId = state.editWebsiteId;
- // 生成 3 个随机字母 (a-z)
- const randomLettersOne = Math.random().toString(36).substring(2, 5); // 生成随机字母并去除前面的 "0."
- // 获取当前时间戳(毫秒级)
- const timestamp = Date.now();
- // 生成 5 个随机字母 (a-z)
- const randomLettersTwo = Math.random().toString(36).substring(2, 7); // 生成随机字母并去除前面的 "0."
- // 拼接时间戳和随机字母生成唯一 ID
- const ad_id = `${websiteId}${randomLettersOne}${timestamp}${randomLettersTwo}`;
- state.ad_id = ad_id;
- },
- //0.全局配置 start------------------------------------------------------------>
- //1.配置模块 start------------------------------------------------------------>
- //获得gridlayout对象
- setGridlayoutObj(state,data){
- state.gridlayoutObj = data;
- },
- //添加板块
- addModule(state,data){
- //pageStatus==1 首页 index
- if(state.pageStatus == 1){
- //开始复制 start------------------------------------------------------------>
- //判断当前一共有多少个模块最多能添加10个
- if(state.pageData.index.length >= 10){
- Message.error('最多只能添加10个模块!');
- return;
- }else{
- console.log(data.jsonData)
- //判断是拖拽的还是点击添加进来的 click=点击
- if(data.source == "click"){
- console.log("通过点击添加一个板块");
- //通过时间戳生成id
- const currentTimestamp = Date.now();
- let id = currentTimestamp;
- //data.type 组件名称 data.h 模块高度
- //计算当前布局的最大 y 值
- const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
- console.log(data);
- //设置数据在构建json中的位置
- let dataSort = state.pageData.index.length;
- //判断添加的是否为广告模块 如果是 添加一个ad_id
- if(data.jsonData.componentList[0].component_type==3){
- this.commit("template/getRandomAdid")
- //添加板块id
- state.pageData.index.push({
- //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
- i: id,
- x: 0,
- y: maxY + 1,
- w: 12,
- h: data.h,
- type: data.type,
- adid: state.ad_id,
- //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
- content:data.jsonData,
- dataSort:dataSort,
- });
- }else{
- state.pageData.index.push({
- //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
- i: id,
- x: 0,
- y: maxY + 1,
- w: 12,
- h: data.h,
- type: data.type,
- //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
- content:data.jsonData,
- dataSort:dataSort,
- });
- }
- console.log("当前添加模块的dataSort为:" + dataSort);
- //当前的页面构建数据
- console.log(state.pageData.index);
- }
- //drag=拖拽
- if(data.source == "drag"){
- //拖拽添加
- console.log("通过拖拽添加一个板块");
- //通过时间戳生成id
- const currentTimestamp = Date.now();
- let id = currentTimestamp;
- //data.type 组件名称 data.h 模块高度
- //计算当前布局的最大 y 值
- const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
- console.log(data);
- //设置数据在构建json中的位置
- let dataSort = state.pageData.index.length;
- //判断添加的是否为广告模块 如果是 添加一个ad_id
- if(data.jsonData.componentList[0].component_type==3){
- this.commit("template/getRandomAdid")
- //添加板块id
- state.pageData.index.push({
- //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
- i: id,
- x: 0,
- y: maxY + 1,
- w: 12,
- h: data.h,
- type: data.type,
- adid: state.ad_id,
- //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
- content:data.jsonData,
- dataSort:dataSort,
- });
- }else{
- state.pageData.index.push({
- //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
- i: id,
- x: 0,
- y: maxY + 1,
- w: 12,
- h: data.h,
- type: data.type,
- //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
- content:data.jsonData,
- dataSort:dataSort,
- });
- }
- console.log("当前添加模块的dataSort为:" + dataSort);
- //当前的页面构建数据
- console.log(state.pageData.index);
- //需要调查一下这里最后的1,1
- state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1,1);
- try {
- state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display="block";
- } catch {}
- }
- }
- //开始复制 end------------------------------------------------------------>
- }
- //pageStatus==2 分类页 class
- if(state.pageStatus == 2){}
- //pageStatus==3 列表页 list
- if(state.pageStatus == 3){
- //开始复制 start------------------------------------------------------------>
- //判断当前一共有多少个模块最多能添加10个
- if(state.pageData.list.length >= 10){
- Message.error('最多只能添加10个模块!');
- return;
- }else{
- //判断是拖拽的还是点击添加进来的 click=点击
- if(data.source == "click"){
- console.log("通过点击添加一个板块");
- //通过时间戳生成id
- const currentTimestamp = Date.now();
- let id = currentTimestamp;
- //data.type 组件名称 data.h 模块高度
- //计算当前布局的最大 y 值
- const maxY = Math.max(...state.pageData.list.map(item => item.y), 0);
- console.log(data);
- //设置数据在构建json中的位置
- let dataSort = state.pageData.list.length;
- //判断添加的是否为广告模块 如果是 添加一个ad_id
- if(data.jsonData.componentList[0].component_type==3){
- this.commit("template/getRandomAdid")
- //添加板块id
- state.pageData.list.push({
- //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
- i: id,
- x: 0,
- y: maxY + 1,
- w: 12,
- h: data.h,
- type: data.type,
- adid: state.ad_id,
- //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
- content:data.jsonData,
- dataSort:dataSort,
- });
- }else{
- state.pageData.list.push({
- //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
- i: id,
- x: 0,
- y: maxY + 1,
- w: 12,
- h: data.h,
- type: data.type,
- //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
- content:data.jsonData,
- dataSort:dataSort,
- });
- }
- }
- //drag=拖拽
- if(data.source == "drag"){
- //拖拽添加
- console.log("通过拖拽添加一个板块");
- //通过时间戳生成id
- const currentTimestamp = Date.now();
- let id = currentTimestamp;
- //data.type 组件名称 data.h 模块高度
- //计算当前布局的最大 y 值
- const maxY = Math.max(...state.pageData.list.map(item => item.y), 0);
- console.log(data);
- //设置数据在构建json中的位置
- let dataSort = state.pageData.list.length;
- //判断添加的是否为广告模块 如果是 添加一个ad_id
- if(data.jsonData.componentList[0].component_type==3){
- this.commit("template/getRandomAdid")
- //添加板块id
- state.pageData.list.push({
- //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
- i: id,
- x: 0,
- y: maxY + 1,
- w: 12,
- h: data.h,
- type: data.type,
- adid: state.ad_id,
- //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
- content:data.jsonData,
- dataSort:dataSort,
- });
- }else{
- state.pageData.list.push({
- //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
- i: id,
- x: 0,
- y: maxY + 1,
- w: 12,
- h: data.h,
- type: data.type,
- //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
- content:data.jsonData,
- dataSort:dataSort,
- });
- }
- console.log("当前添加模块的dataSort为:" + dataSort);
- //当前的页面构建数据
- console.log(state.pageData.list);
- //需要调查一下这里最后的1,1
- state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1,1);
- try {
- state.gridlayoutObj.$children[state.pageData.list.length].$refs.item.style.display="block";
- } catch {}
- }
- }
- //开始复制 end------------------------------------------------------------>
- }
- //pageStatus==4 详情页 article
- if(state.pageStatus == 4){
- //开始复制 start------------------------------------------------------------>
- //判断当前一共有多少个模块最多能添加10个
- if(state.pageData.article.length >= 10){
- Message.error('最多只能添加10个模块!');
- return;
- }else{
- //判断添加的是否为广告模块 如果是 添加一个ad_id
- if(data.jsonData.componentList[0].component_type==3){
- //生成一个随机的ad_id给广告模块
- this.commit("template/getRandomAdid");
- console.log("添加广告模块!id为:" + state.ad_id)
- data.jsonData.componentList[0].componentData.ad_id = state.ad_id;
- }
-
- //判断是拖拽的还是点击添加进来的 click=点击
- if(data.source == "click"){
- console.log("通过点击添加一个板块");
- //通过时间戳生成id
- const currentTimestamp = Date.now();
- let id = currentTimestamp;
- //data.type 组件名称 data.h 模块高度
- //计算当前布局的最大 y 值
- const maxY = Math.max(...state.pageData.article.map(item => item.y), 0);
- console.log(data);
- //设置数据在构建json中的位置
- let dataSort = state.pageData.article.length;
- //判断添加的是否为广告模块 如果是 添加一个ad_id
- if(data.jsonData.componentList[0].component_type==3){
- this.commit("template/getRandomAdid")
- //添加板块id
- state.pageData.article.push({
- //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
- i: id,
- x: 0,
- y: maxY + 1,
- w: 12,
- h: data.h,
- type: data.type,
- adid: state.ad_id,
- //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
- content:data.jsonData,
- dataSort:dataSort,
- });
- }else{
- state.pageData.article.push({
- //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
- i: id,
- x: 0,
- y: maxY + 1,
- w: 12,
- h: data.h,
- type: data.type,
- //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
- content:data.jsonData,
- dataSort:dataSort,
- });
- }
- }
- //drag=拖拽
- if(data.source == "drag"){
- //拖拽添加
- console.log("通过拖拽添加一个板块");
- //通过时间戳生成id
- const currentTimestamp = Date.now();
- let id = currentTimestamp;
- //data.type 组件名称 data.h 模块高度
- //计算当前布局的最大 y 值
- const maxY = Math.max(...state.pageData.article.map(item => item.y), 0);
- console.log(data);
- //设置数据在构建json中的位置
- let dataSort = state.pageData.article.length;
- //判断添加的是否为广告模块 如果是 添加一个ad_id
- if(data.jsonData.componentList[0].component_type==3){
- this.commit("template/getRandomAdid")
- //添加板块id
- state.pageData.article.push({
- //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
- i: id,
- x: 0,
- y: maxY + 1,
- w: 12,
- h: data.h,
- type: data.type,
- adid: state.ad_id,
- //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
- content:data.jsonData,
- dataSort:dataSort,
- });
- }else{
- state.pageData.article.push({
- //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
- i: id,
- x: 0,
- y: maxY + 1,
- w: 12,
- h: data.h,
- type: data.type,
- //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
- content:data.jsonData,
- dataSort:dataSort,
- });
- }
- console.log("当前添加模块的dataSort为:" + dataSort);
- //当前的页面构建数据
- console.log(state.pageData.article);
- //需要调查一下这里最后的1,1
- state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1,1);
- try {
- state.gridlayoutObj.$children[state.pageData.article.length].$refs.item.style.display="block";
- } catch {}
- }
- }
- //开始复制 end------------------------------------------------------------>
- }
- //pageStatus==5 搜索页 search
- if(state.pageStatus == 5){}
- //pageStatus==6 自定义列表页 aloneList
- if(state.pageStatus == 6){}
- //pageStatus==7 自定义详情页 aloneArticle
- if(state.pageStatus == 7){}
- },
- //删除板块
- deleteModule(state,data){
- //data.i = id
- //data.dataSort = dataSort
- //pageStatus==1 首页
- if(state.pageStatus == 1){
- //开始复制 start------------------------------------------------------------>
- //必须通过重新查找id的方式来删除
- const indexToRemove = state.pageData.index.findIndex(item => item.i === data.i);
- if (indexToRemove !== -1) {
- state.pageData.index.splice(indexToRemove, 1);
- Message.success('模块已删除!');
- console.log('模块已删除,当前的页面构建数据为:', state.pageData.index);
- } else {
- Message.warning('未找到要删除的模块!');
- }
- //开始复制 end------------------------------------------------------------>
- // base 0.0.2 如果使用splice方法删除sort,当你就剩下最后一个的时候,会出现找不到那个元素的问题
- // state.pageData.index.splice(data.dataSort,1);
- // Message.success('模块已删除!');
- // console.log(state.pageData.index);
- }
- //pageStatus==2 分类页
- if(state.pageStatus == 2){}
- //pageStatus==3 列表页
- if(state.pageStatus == 3){
- //开始复制 start------------------------------------------------------------>
- //必须通过重新查找id的方式来删除
- const indexToRemove = state.pageData.list.findIndex(item => item.i === data.i);
- if (indexToRemove !== -1) {
- state.pageData.list.splice(indexToRemove, 1);
- Message.success('模块已删除!');
- console.log('模块已删除,当前的页面构建数据为:', state.pageData.list);
- } else {
- Message.warning('未找到要删除的模块!');
- }
- //开始复制 end------------------------------------------------------------>
- }
- //pageStatus==4 详情页
- if(state.pageStatus == 4){
- //开始复制 start------------------------------------------------------------>
- //必须通过重新查找id的方式来删除
- const indexToRemove = state.pageData.article.findIndex(item => item.i === data.i);
- if (indexToRemove !== -1) {
- state.pageData.article.splice(indexToRemove, 1);
- Message.success('模块已删除!');
- console.log('模块已删除,当前的页面构建数据为:', state.pageData.article);
- } else {
- Message.warning('未找到要删除的模块!');
- }
- //开始复制 end------------------------------------------------------------>
- }
- //pageStatus==5 搜索页
- if(state.pageStatus == 5){}
- //pageStatus==6 自定义列表页
- if(state.pageStatus == 6){}
- //pageStatus==7 自定义详情页
- if(state.pageStatus == 7){}
- },
- //设置组件样式
- setComponentStyleNumber(state,data){
- let id = state.editSectorId;
- let dataSort = state.editDataSort;
- let sort = state.editComponentSort;
- let num = state.editComponentStyle;
- console.log(id,dataSort,sort,num);
- //pageStatus==1 首页
- if(state.pageStatus == 1){
- //开始复制 start------------------------------------------------------------>
- // 获取当前模块数据并进行深拷贝
- let module = JSON.parse(JSON.stringify(state.pageData.index[dataSort]));
- //module.content.componentList[sort].component_style = num;
- //确保修改属性时 Vue 能监控到变化
- Vue.set(module.content.componentList, sort, {
- ...module.content.componentList[sort],
- component_style: num
- });
- // 拷贝后直接替换原来的板块
- //state.pageData.index[id] = module;
- // 使用Vue.set来强制视图更新
- Vue.set(state.pageData.index, dataSort, module);
- console.log("当前的板块数据为:");
- console.log(state.pageData.index);
- //开始复制 end------------------------------------------------------------>
- }
- //pageStatus==2 分类页
- if(state.pageStatus == 2){}
- //pageStatus==3 列表页
- if(state.pageStatus == 3){
- //开始复制 start------------------------------------------------------------>
- // 获取当前模块数据并进行深拷贝
- let module = JSON.parse(JSON.stringify(state.pageData.list[dataSort]));
- //module.content.componentList[sort].component_style = num;
- //确保修改属性时 Vue 能监控到变化
- Vue.set(module.content.componentList, sort, {
- ...module.content.componentList[sort],
- component_style: num
- });
- // 拷贝后直接替换原来的板块
- //state.pageData.index[id] = module;
- // 使用Vue.set来强制视图更新
- Vue.set(state.pageData.list, dataSort, module);
- console.log("当前的板块数据为:");
- console.log(state.pageData.list);
- //开始复制 end------------------------------------------------------------>
- }
- //pageStatus==4 详情页
- if(state.pageStatus == 4){
- //开始复制 start------------------------------------------------------------>
- // 获取当前模块数据并进行深拷贝
- let module = JSON.parse(JSON.stringify(state.pageData.article[dataSort]));
- //module.content.componentList[sort].component_style = num;
- //确保修改属性时 Vue 能监控到变化
- Vue.set(module.content.componentList, sort, {
- ...module.content.componentList[sort],
- component_style: num
- });
- // 拷贝后直接替换原来的板块
- //state.pageData.index[id] = module;
- // 使用Vue.set来强制视图更新
- Vue.set(state.pageData.article, dataSort, module);
- console.log("当前的板块数据为:");
- console.log(state.pageData.article);
- //开始复制 end------------------------------------------------------------>
- }
- //pageStatus==5 搜索页
- if(state.pageStatus == 5){}
- //pageStatus==6 自定义列表页
- if(state.pageStatus == 6){}
- //pageStatus==7 自定义详情页
- if(state.pageStatus == 7){}
- },
- //保存组件设置的数据
- saveComponentData(state,data){
- //传入的板块id
- console.log("当前编辑板块:" + data.id)
- //pageStatus==1 首页
- if(state.pageStatus == 1){
- //开始复制 start------------------------------------------------------------>
- const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
- console.log("要修改的模块id为:") //找到要修改的板块
- console.log(data.sort) //找到要修改的板块
- console.log(targetModuleIndex) //找到要修改的板块
- //console.log(targetModuleIndex) //找到要修改的板块
- //state.pageData.index[targetModuleIndex].content.componentList[data.sort] //当前编辑的组件
- //data.data.pid_arr //导航池
- //state.editComponentSize //展示条数
- //判断数据的类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
- //1=普通新闻
- //注意,vue有一个bug就是,当你修改复杂对象的时候,如果对象的内部是数组
- //vue可能无法检测到变化,而当你修改无法被检测变化的数据时,就会把所有数据都修改成相同的值
- //解决办法是通过vue的set方法将整个对象,即你的数组外层那个对象进行深拷贝,然后修改完再替换回去
- if(state.editComponentType == 1){
- // 获取当前模块数据并进行深拷贝
- let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex])); // 深拷贝整个模块
- // 更新 category_id 和 pageSize
- module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
- module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
- // 使用Vue.set来强制视图更新
- Vue.set(state.pageData.index, targetModuleIndex, module); // 替换为深拷贝的模块
- console.log("当前的板块数据为:");
- console.log(state.pageData.index);
- }
- //2=tabs新闻选项卡
- if(state.editComponentType == 2){
- // 获取当前模块数据并进行深拷贝
- let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex])); // 深拷贝整个模块
- // 更新 category_id 和 pageSize
- module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
- module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
- // 使用Vue.set来强制视图更新
- Vue.set(state.pageData.index, targetModuleIndex, module); // 替换为深拷贝的模块
- console.log("当前的板块数据为:");
- console.log(state.pageData.index);
- }
- //3=广告
- if(state.editComponentType == 3){;
- let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
- module.content.componentList[data.sort].componentData.text = data.data.adName;
- Vue.set(state.pageData.index, targetModuleIndex, module);
- console.log("当前的板块数据为:");
- console.log(state.pageData.index);
- }
- //4=友情链接
- //if(state.editComponentType == 4){}
- //6=静态组件
- //if(state.editComponentType == 6){}
- //7=文本
- if(state.editComponentType == 7){
- let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
- module.content.componentList[data.sort].componentData.text = data.data.titleName;
- Vue.set(state.pageData.index, targetModuleIndex, module);
- console.log("当前的板块数据为:");
- console.log(state.pageData.index);
- }
- //8=评论
- //if(state.editComponentType == 8){}
- //开始复制 end------------------------------------------------------------>
- }
- //pageStatus==2 分类页
- if(state.pageStatus == 2){}
- //pageStatus==3 列表页
- if(state.pageStatus == 3){
- //开始复制 start------------------------------------------------------------>
- const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id);
- console.log("要修改的模块id为:") //找到要修改的板块
- console.log(data.sort) //找到要修改的板块
- console.log(targetModuleIndex) //找到要修改的板块
- if(state.editComponentType == 1){
- // 获取当前模块数据并进行深拷贝
- let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex])); // 深拷贝整个模块
- // 更新 category_id 和 pageSize
- module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
- module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
- // 使用Vue.set来强制视图更新
- Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块
- console.log("当前的板块数据为:");
- console.log(state.pageData.list);
- }
- //2=tabs新闻选项卡
- if(state.editComponentType == 2){
- // 获取当前模块数据并进行深拷贝
- let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex])); // 深拷贝整个模块
- // 更新 category_id 和 pageSize
- module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
- module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
- // 使用Vue.set来强制视图更新
- Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块
- console.log("当前的板块数据为:");
- console.log(state.pageData.list);
- }
- //3=广告
- if(state.editComponentType == 3){;
- let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
- module.content.componentList[data.sort].componentData.text = data.data.adName;
- Vue.set(state.pageData.list, targetModuleIndex, module);
- console.log("当前的板块数据为:");
- console.log(state.pageData.list);
- }
- //7=文本
- if(state.editComponentType == 7){
- let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
- module.content.componentList[data.sort].componentData.text = data.data.titleName;
- Vue.set(state.pageData.list, targetModuleIndex, module);
- console.log("当前的板块数据为:");
- console.log(state.pageData.list);
- }
- //开始复制 end------------------------------------------------------------>
- }
- //pageStatus==4 详情页
- if(state.pageStatus == 4){
- //开始复制 start------------------------------------------------------------>
- const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
- console.log("要修改的模块id为:") //找到要修改的板块
- console.log(data.sort) //找到要修改的板块
- console.log(targetModuleIndex) //找到要修改的板块
- if(state.editComponentType == 1){
- // 获取当前模块数据并进行深拷贝
- let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex])); // 深拷贝整个模块
- // 更新 category_id 和 pageSize
- module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
- module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
- // 使用Vue.set来强制视图更新
- Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
- console.log("当前的板块数据为:");
- console.log(state.pageData.article);
- }
- //2=tabs新闻选项卡
- if(state.editComponentType == 2){
- // 获取当前模块数据并进行深拷贝
- let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex])); // 深拷贝整个模块
- // 更新 category_id 和 pageSize
- module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
- module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
- // 使用Vue.set来强制视图更新
- Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
- console.log("当前的板块数据为:");
- console.log(state.pageData.article);
- }
- //3=广告
- if(state.editComponentType == 3){;
- let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
- module.content.componentList[data.sort].componentData.text = data.data.adName;
- Vue.set(state.pageData.article, targetModuleIndex, module);
- console.log("当前的板块数据为:");
- console.log(state.pageData.article);
- }
- //7=文本
- if(state.editComponentType == 7){
- let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
- module.content.componentList[data.sort].componentData.text = data.data.titleName;
- Vue.set(state.pageData.article, targetModuleIndex, module);
- console.log("当前的板块数据为:");
- console.log(state.pageData.article);
- }
- //开始复制 end------------------------------------------------------------>
- }
- //pageStatus==5 搜索页
- if(state.pageStatus == 5){}
- //pageStatus==6 自定义列表页
- if(state.pageStatus == 6){}
- //pageStatus==7 自定义详情页
- if(state.pageStatus == 7){}
- },
- //通过按钮移动板块 (暂时停用)
- moveModule(state, data) {
- Message.error("该功能暂时禁用")
- // pageStatus == 1 首页
- // if (state.pageStatus == 1) {
- // const moveType = data.moveType;
- // const moduleId = data.i;
- // const modules = state.pageData.index;
-
- // // 深拷贝 modules,避免直接操作原数据
- // const newModules = JSON.parse(JSON.stringify(modules));
-
- // // 查找模块在数组中的实际索引
- // const thisIndex = newModules.findIndex(module => module.i === moduleId);
- // if (thisIndex === -1) {
- // Message.error('模块未找到!');
- // return;
- // }
- // const thisY = newModules[thisIndex].y;
- // let thatY;
-
- // if (moveType === 'up') {
- // thatY = Math.max(
- // ...newModules.filter(item => item.y < thisY).map(item => item.y)
- // );
- // if (thatY === -Infinity) {
- // Message.error('已经是顶部了!');
- // return;
- // }
- // const thatIndex = newModules.findIndex(item => item.y === thatY);
- // if (thatIndex === -1) {
- // Message.error('上方模块未找到!');
- // return;
- // }
- // // 交换y值
- // [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];
-
- // } else if (moveType === 'down') {
- // thatY = Math.min(
- // ...newModules.filter(item => item.y > thisY).map(item => item.y)
- // );
- // if (thatY === Infinity) {
- // Message.error('已经是底部了!');
- // return;
- // }
- // const thatIndex = newModules.findIndex(item => item.y === thatY);
- // if (thatIndex === -1) {
- // Message.error('下方模块未找到!');
- // return;
- // }
- // // 交换y值
- // [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];
- // } else {
- // Message.error('未知的移动类型!');
- // return;
- // }
-
- // // 交换后对模块进行排序以确保顺序一致
- // newModules.sort((a, b) => a.y - b.y);
-
- // // 使用 Vue.set 强制更新数组,确保视图更新
- // //Vue.set(state.pageData, 'index', newModules); // 这里更新整个数组
- // state.pageData.index = newModules;
- // //state.gridKey+=1;
-
- // console.log(state.pageData.index); // 打印查看是否已修改
- // }
-
- // // pageStatus == 2 分类页
- // if (state.pageStatus == 2) {}
- // // pageStatus == 3 列表页
- // if (state.pageStatus == 3) {}
- // // pageStatus == 4 详情页
- // if (state.pageStatus == 4) {}
- // // pageStatus == 5 搜索页
- // if (state.pageStatus == 5) {}
- // // pageStatus == 6 自定义列表页
- // if (state.pageStatus == 6) {}
- // // pageStatus == 7 自定义详情页
- // if (state.pageStatus == 7) {}
- },
- //从外部拖拽板块
- drag(state, data) {
- // pageStatus == 1 首页
- if (state.pageStatus == 1) {
- //开始复制 start------------------------------------------------------------>
- let parentRect = document.getElementById('content').getBoundingClientRect();
- //console.log(parentRect); 获取画布
- let mouseInGrid = false;
- if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
- mouseInGrid = true;
- }
- //state.gridlayoutObj
- //如果没有占位符就创建一个
- if (mouseInGrid === true && (state.pageData.index.findIndex(item => item.i === 'drop')) === -1) {
- state.pageData.index.push({
- x: (state.pageData.index.length * 2) % (this.colNum || 12),
- y: state.pageData.index.length + (this.colNum || 12), // puts it at the bottom
- w: 12,
- h: 2,
- i: 'drop',
- });
- }
- //如果已经存在占位符
- let index = state.pageData.index.findIndex(item => item.i === 'drop');
- if (index !== -1) {
- try {
- state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "none";
- } catch {
- }
- let el = state.gridlayoutObj.$children[index];
- el.dragging = {"top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left};
- let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
- if (mouseInGrid === true) {
- state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
- state.DragPos.i = String(index);
- state.DragPos.x = state.pageData.index[index].x;
- state.DragPos.y = state.pageData.index[index].y;
- }
- if (mouseInGrid === false) {
- state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
- state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
- }
- }
- //开始复制 end------------------------------------------------------------>
- }
- // pageStatus == 2 分类页
- if (state.pageStatus == 2) {}
- // pageStatus == 3 列表页
- if (state.pageStatus == 3) {
- //开始复制 start------------------------------------------------------------>
- let parentRect = document.getElementById('content').getBoundingClientRect();
- //console.log(parentRect); 获取画布
- let mouseInGrid = false;
- if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
- mouseInGrid = true;
- }
- //如果没有占位符就创建一个
- if (mouseInGrid === true && (state.pageData.list.findIndex(item => item.i === 'drop')) === -1) {
- state.pageData.list.push({
- x: (state.pageData.list.length * 2) % (this.colNum || 12),
- y: state.pageData.list.length + (this.colNum || 12), // puts it at the bottom
- w: 12,
- h: 2,
- i: 'drop',
- });
- }
- //如果已经存在占位符
- let index = state.pageData.list.findIndex(item => item.i === 'drop');
- if (index !== -1) {
- try {
- state.gridlayoutObj.$children[state.pageData.list.length].$refs.item.style.display = "none";
- } catch {
- }
- let el = state.gridlayoutObj.$children[index];
- el.dragging = {"top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left};
- let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
- if (mouseInGrid === true) {
- state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
- state.DragPos.i = String(index);
- state.DragPos.x = state.pageData.list[index].x;
- state.DragPos.y = state.pageData.list[index].y;
- }
- if (mouseInGrid === false) {
- state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
- state.pageData.list = state.pageData.list.filter(obj => obj.i !== 'drop');
- }
- }
- //开始复制 end------------------------------------------------------------>
- }
- // pageStatus == 4 详情页
- if (state.pageStatus == 4) {
- //开始复制 start------------------------------------------------------------>
- let parentRect = document.getElementById('content').getBoundingClientRect();
- //console.log(parentRect); 获取画布
- let mouseInGrid = false;
- if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
- mouseInGrid = true;
- }
- //如果没有占位符就创建一个
- if (mouseInGrid === true && (state.pageData.article.findIndex(item => item.i === 'drop')) === -1) {
- state.pageData.article.push({
- x: (state.pageData.article.length * 2) % (this.colNum || 12),
- y: state.pageData.article.length + (this.colNum || 12), // puts it at the bottom
- w: 12,
- h: 2,
- i: 'drop',
- });
- }
- //如果已经存在占位符
- let index = state.pageData.article.findIndex(item => item.i === 'drop');
- if (index !== -1) {
- try {
- state.gridlayoutObj.$children[state.pageData.article.length].$refs.item.style.display = "none";
- } catch {
- }
- let el = state.gridlayoutObj.$children[index];
- el.dragging = {"top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left};
- let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
- if (mouseInGrid === true) {
- state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
- state.DragPos.i = String(index);
- state.DragPos.x = state.pageData.article[index].x;
- state.DragPos.y = state.pageData.article[index].y;
- }
- if (mouseInGrid === false) {
- state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
- state.pageData.article = state.pageData.article.filter(obj => obj.i !== 'drop');
- }
- }
- //开始复制 end------------------------------------------------------------>
- }
- // pageStatus == 5 搜索页
- if (state.pageStatus == 5) {}
- // pageStatus == 6 自定义列表页
- if (state.pageStatus == 6) {}
- // pageStatus == 7 自定义详情页
- if (state.pageStatus == 7) {}
- },
- //拖拽结束 定位落点
- dragend(state, data) {
- // pageStatus == 1 首页
- if (state.pageStatus == 1) {
- //开始复制 start------------------------------------------------------------>
- //获取画布尺寸
- let parentRect = document.getElementById('content').getBoundingClientRect();
- //判断是否在画布内
- let mouseInGrid = false;
- if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
- mouseInGrid = true;
- }
- //如果在画布内,开始创建元素
- if (mouseInGrid === true) {
- alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
- state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
- state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
- // UNCOMMENT below if you want to add a grid-item
- /*
- this.layout.push({
- x: DragPos.x,
- y: DragPos.y,
- w: 1,
- h: 1,
- i: DragPos.i,
- });
- this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
- try {
- this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
- } catch {
- }
- */
- let sendData = {
- source:"drag",//添加时判断此模块来自外部拖拽,而不是点击
- type:data.type,
- h:data.h,
- jsonData:data.jsonData,
- x: state.DragPos.x,
- y: state.DragPos.y,
- w: 12,
- }
- //开发到这里了,注意我可能还需要上面那个 this.$refs.gridLayout.dragEvent方法
- this.commit('template/addModule',sendData);
- }
- //开始复制 end------------------------------------------------------------>
- }
- // pageStatus == 2 分类页
- if (state.pageStatus == 2) {}
- // pageStatus == 3 列表页
- if (state.pageStatus == 3) {
- //开始复制 start------------------------------------------------------------>
- //获取画布尺寸
- let parentRect = document.getElementById('content').getBoundingClientRect();
- //判断是否在画布内
- let mouseInGrid = false;
- if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
- mouseInGrid = true;
- }
- //如果在画布内,开始创建元素
- if (mouseInGrid === true) {
- alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
- state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
- state.pageData.list = state.pageData.list.filter(obj => obj.i !== 'drop');
- let sendData = {
- source:"drag",//添加时判断此模块来自外部拖拽,而不是点击
- type:data.type,
- h:data.h,
- jsonData:data.jsonData,
- x: state.DragPos.x,
- y: state.DragPos.y,
- w: 12,
- }
- this.commit('template/addModule',sendData);
- }
- //开始复制 end------------------------------------------------------------>
- }
- // pageStatus == 4 详情页
- if (state.pageStatus == 4) {
- //开始复制 start------------------------------------------------------------>
- //获取画布尺寸
- let parentRect = document.getElementById('content').getBoundingClientRect();
- //判断是否在画布内
- let mouseInGrid = false;
- if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
- mouseInGrid = true;
- }
- //如果在画布内,开始创建元素
- if (mouseInGrid === true) {
- alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
- state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
- state.pageData.article = state.pageData.article.filter(obj => obj.i !== 'drop');
- let sendData = {
- source:"drag",//添加时判断此模块来自外部拖拽,而不是点击
- type:data.type,
- h:data.h,
- jsonData:data.jsonData,
- x: state.DragPos.x,
- y: state.DragPos.y,
- w: 12,
- }
- this.commit('template/addModule',sendData);
- }
- //开始复制 end------------------------------------------------------------>
- }
- // pageStatus == 5 搜索页
- if (state.pageStatus == 5) {}
- // pageStatus == 6 自定义列表页
- if (state.pageStatus == 6) {}
- // pageStatus == 7 自定义详情页
- if (state.pageStatus == 7) {}
- },
- //修改首页板块高度
- setModuleHeight(state,data){
- // pageStatus == 1 首页
- if (state.pageStatus == 1) {
- console.log(data);
- state.pageData.index[data.i].h = data.h;
- console.log(state.pageData.index[data.i]);
- }
- // pageStatus == 2 分类页
- if (state.pageStatus == 2) {}
- // pageStatus == 3 列表页
- if (state.pageStatus == 3) {
- console.log(data);
- state.pageData.list[data.i].h = data.h;
- console.log(state.pageData.list[data.i]);
- }
- // pageStatus == 4 详情页
- if (state.pageStatus == 4) {
- console.log(data);
- state.pageData.article[data.i].h = data.h;
- console.log(state.pageData.article[data.i]);
- }
- // pageStatus == 5 搜索页
- if (state.pageStatus == 5) {}
- // pageStatus == 6 自定义列表页
- if (state.pageStatus == 6) {}
- // pageStatus == 7 自定义详情页
- if (state.pageStatus == 7) {}
- },
- //格式化模板信息
- formatTemplateInfo(state, data) {
- // 深拷贝数据,避免直接修改原数据
- let clonedData = JSON.parse(JSON.stringify(data));
- // 把ad_id传进去
- for(let item of clonedData.data){
- if(item.adid){
- item.content.componentList[0].componentData.ad_id = item.adid;
- }
- }
- // 按照 clonedData.data.y 的大小排序
- clonedData.data.sort((a, b) => a.y - b.y);
- //console.log(clonedData, clonedData);
- let websiteData = [];
- // 获取板块的 sort
- for (let index = 0; index < clonedData.data.length; index++) {
- console.log(clonedData.data[index].content);
- // 使用 Vue.set 来确保属性变更能被 Vue 追踪
- Vue.set(clonedData.data[index].content, 'sort', Number(index) + 1);
- // if (data.type == "index") {
- // // 不要把数据直接保存到 state.webSiteData.template 中,否则无法删除
- // websiteData.push(clonedData.data[index].content);
- // }
- websiteData.push(clonedData.data[index].content);
- }
- // 保存到对应的页面 json 中
- if (data.type == "index") {
- state.webSiteData.template.index = websiteData;
- }
- if (data.type == "list") {
- state.webSiteData.template.list = websiteData;
- }
- if (data.type == "article") {
- state.webSiteData.template.article = websiteData;
- }
- },
- //保存模板
- saveTemplate(state) {
- //临时展示保存的数据 后期移除
- state.editWebsiteTemplateJsonWindow = true;
- //调用mutations中的方法无需使用$store
- //格式化index的信息
- this.commit('template/formatTemplateInfo',{data:state.pageData.index,type:"index"});
- //格式化list的信息
- this.commit('template/formatTemplateInfo',{data:state.pageData.list,type:"list"});
- //格式化article的信息
- this.commit('template/formatTemplateInfo',{data:state.pageData.article,type:"article"});
- // console.log(state.webSiteData);
- // console.log(state.editWebsiteId)
- //给与网站id和模板风格id
- state.webSiteData.base.websiteId = state.editWebsiteId;
- state.webSiteData.style.styleId = state.editWebsiteClass;
- },
- //随机生成模板
- randomTemplate(state){
- state.loading = true;
- const randomIndex = Math.floor(Math.random() * 2); // Generates a random number between 1 and 2
- console.log(`随机生成的数字是: ${randomIndex}`);
- //console.log(randomIndex1)
- //console.log(randomIndex2)
- //Message.warning("该功能研发中");
- // pageStatus == 1 首页
- if (state.pageStatus == 1) {
- // 先清空里面的内容
- Vue.set(state.pageData, 'index', []);
- // 深拷贝 randomIndex1 和 randomIndex2
- const newData1 = JSON.parse(JSON.stringify(randomIndex1));
- const newData2 = JSON.parse(JSON.stringify(randomIndex2));
- if (randomIndex == 0) {
- Vue.set(state.pageData, 'index', newData1);
- }
- if (randomIndex == 1) {
- Vue.set(state.pageData, 'index', newData2);
- }
- state.loading = false;
- }
- // pageStatus == 2 分类页
- if (state.pageStatus == 2) {}
- // pageStatus == 3 列表页
- if (state.pageStatus == 3) {
- Message.warning("暂无模板可用!");
- state.loading = false;
- }
- // pageStatus == 4 详情页
- if (state.pageStatus == 4) {
- Message.warning("暂无模板可用!");
- state.loading = false;
- }
- // pageStatus == 5 搜索页
- if (state.pageStatus == 5) {}
- // pageStatus == 6 自定义列表页
- if (state.pageStatus == 6) {}
- // pageStatus == 7 自定义详情页
- if (state.pageStatus == 7) {}
- },
- //提交数据之前执行完整度检查
- IntegrityCheck(state){
- //先设置为true看能否通过判断
- state.canSubmit = true;
- //先判断当前有哪几个板块可用
- //state.canSubmit == false 不可以提交
- //state.canSubmit == true 可以提交
- //首页
- if(state.showPage.index == true){
- if(state.template.index == []){
- state.canSubmit = false;
- }
- }
- //分类页
- if(state.showPage.class == true){
- if(state.template.class == []){
- state.canSubmit = false;
- }
- }
- //列表页
- if(state.showPage.list == true){
- if(state.template.list == []){
- state.canSubmit = false;
- }
- }
- //详情页
- if(state.showPage.article == true){
- if(state.template.article == []){
- state.canSubmit = false;
- }
- }
- //搜索页
- if(state.showPage.search == true){
- if(state.template.search == []){
- state.canSubmit = false;
- }
- }
- //自定义列表页
- if(state.showPage.aloneList == true){
- if(state.template.aloneList == []){
- state.canSubmit = false;
- }
- }
- //自定义详情页
- if(state.showPage.aloneArticle == true){
- if(state.template.aloneArticle == []){
- state.canSubmit = false;
- }
- }
- //最后判断一下是否可以提交
- if(state.canSubmit == ture){
- }else{
- Message.error('您还有未构建的页面,请检查!');
- }
- },
- //1.配置模块 end------------------------------------------------------------>
- //2.获取站点信息 start------------------------------------------------------------>
- //获取站点详情
- setWebsiteInfo(state,data){
- state.webSiteInfo = data;
- },
- //获取站点导航池
- setGetSiteCategory(state,data) {
- state.webSiteMenu = data;
- },
- //设置地区
- setArea(state,data){
- //都没有的时候返回的是省
- if(data.province==undefined){
- state.area.economize = data;
- }
- //没有region的时候返回的是市
- if(data.province!=undefined&&data.city!=undefined&&data.region==undefined){
- state.area.market = data.city;
- }
- //有region的时候返回的是县
- if(data.province!=undefined&&data.city!=undefined&&data.region!=undefined){
- state.area.county = data.region;
- }
- },
- //设置职能
- setDepartment(state,data){
- for(let item of data){
- let options = {
- value: item.id,
- label: item.name
- }
- state.departmentList.push(options)
- }
- console.log(state.departmentList)
- },
- //获取全部导航
- setWebsiteCategory(state,data){
- let arrayData = []
- for(let item of data){
- let options = {
- key:item.id,
- label:item.name,
- value:item.id
- }
- arrayData.push(options);
- }
- state.editWebsiteCategory = arrayData;
- },
- //2.获取站点信息 end------------------------------------------------------------>
-
- //3.提示信息 start------------------------------------------------------------>
- alertMessage(state,data){
- Message({
- message: "配置阶段仅展示,无法真实调用该功能!",
- type: 'warning',
- duration: 0,
- showClose: true
- });
- }
- //3.提示信息 end------------------------------------------------------------>
- }
- const actions = {
- //1.显示画板组件数据 start------------------------------------------------------------>
- //1.1 获取网站基本信息
- getSiteInfo({commit},data){
- return new Promise((resolve, reject) => {
- getSiteInfo(data).then(response => {
- commit('setWebsiteInfo', response.data);
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //1.2 获取网站导航池
- getSiteCategory({commit},data){
- return new Promise((resolve, reject) => {
- getSiteCategory(data).then(response => {
- commit('setGetSiteCategory', response.data);
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //1.3 获取网站底部导航
- getFooterCategoryList({commit},data){
- return new Promise((resolve, reject) => {
- getFooterCategoryList(data).then(response => {
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //1.4 获取行政区划
- selectWebsiteArea({commit},data){
- return new Promise((resolve, reject) => {
- selectWebsiteArea(data).then(response => {
- commit('setArea', response.data);
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //1.5 获取所有职能部门
- selectWebsiteDepartment({commit},data){
- return new Promise((resolve, reject) => {
- selectWebsiteDepartment(data).then(response => {
- commit('setDepartment', response.data);
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //1.显示画板组件数据 end------------------------------------------------------------>
-
- //2.构建网站json start------------------------------------------------------------>
- //2.1 搜索网站
- getWebsiteintel({commit},data){
- return new Promise((resolve, reject) => {
- getWebsiteintel(data).then(response => {
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //2.2 添加网站基本信息 如果只传入website_id,则验证是否已经关联导航池
- addWebsiteTemplateintel({commit},data){
- return new Promise((resolve, reject) => {
- addWebsiteTemplateintel(data).then(response => {
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //2.3 获取网站基本信息
- getWebsiteTemplateintel({commit},data){
- return new Promise((resolve, reject) => {
- getWebsiteTemplateintel(data).then(response => {
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //2.4 修改网站基本信息
- upWebsiteTemplateintel({commit},data){
- return new Promise((resolve, reject) => {
- upWebsiteTemplateintel(data).then(response => {
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //2.5 获取所有风格
- getAllTemplateClass({commit},data){
- return new Promise((resolve, reject) => {
- getAllTemplateClass(data).then(response => {
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //2.6 搜索并获取所有网站风格
- getWebsiteTemplateList({commit},data){
- return new Promise((resolve, reject) => {
- getWebsiteTemplateList(data).then(response => {
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //2.7 保存用户选择的风格
- addWebsiteTemplateclassintel({commit},data){
- return new Promise((resolve, reject) => {
- addWebsiteTemplateclassintel(data).then(response => {
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //2.8 获取用户选择的风格
- getWebsiteTemplateclassintel({commit},data){
- return new Promise((resolve, reject) => {
- getWebsiteTemplateclassintel(data).then(response => {
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //2.9 保存模板
- addWebsiteTemplate({commit},data){
- return new Promise((resolve, reject) => {
- addWebsiteTemplate(data).then(response => {
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //2.10 获取模板配置
- getWebsiteTemplateInfo({commit},data){
- return new Promise((resolve, reject) => {
- getWebsiteTemplateInfo(data).then(response => {
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //2.11 预览模板信息
- getWebsiteTemplateData({commit},data){
- return new Promise((resolve, reject) => {
- getWebsiteTemplateData(data).then(response => {
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
- //2.构建网站json end------------------------------------------------------------>
- }
- export default {
- namespaced: true,
- state,
- mutations,
- actions
- }
|