admin_home/src/store/modules/template.js

import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,getWebsiteArticlesList,
  selectWebsiteArticleInfo} from '@/api/cms'

import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的

const state = {
  //0.全局配置 start------------------------------------------------------------> 
  editWebsiteId: "",//当前编辑网站的id
  stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
  //0.全局配置 end------------------------------------------------------------>
  
  //1.画布数据 start------------------------------------------------------------>
  pageStatus:1,//当前编辑哪个页面  1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=自定义列表页 7=自定义详情页 
  menuType:1, //当前菜单显示板块还是组件 1=板块 2=组件 
  pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据
    index:[
      
    ],//首页
    class:[],//分类页
    list:[],//列表页
    article:[],//详情页
    search:[],//搜索页
    aloneList:[],//自定义列表页
    aloneArticle:[],//自定义详情页
  },
  editWindowStatus:false,//编辑弹出框是否显示
  editWindowTitle:"",//编辑弹出框标题
  // 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------------------------------------------------------------>
  webData:{
    //1.base网站基本信息
    base:{
      websiteId:"",//网站id 
    },
    //2.style信息
    style:{
      styleId:"",//风格id
    },
    //3.板块信息 header,menu,footer 是页面自带的无需构建
    template:[  
      {
        index:[{
          sectorName:"bannerSector",
          sectorId:1,
          sort:1,
          componentList:[
            {
              component_type:1,
              component_name:"mainTitle",
              sort:1,
              componentData:{
                category_id:1,
                pageSize:1,
                listType:[
                  "title",
                  "created_time",
                  "author",
                  "imgUrl",
                  //...
                ]
              }
            }
          ]
        }]
      }
    ]
  }
  //3.网站数据 end------------------------------------------------------------>
}

const mutations = {
  //0.全局配置 start------------------------------------------------------------>
  //设置创建网站的id
  setEditWebsiteId(state,id){
    state.editWebsiteId = id;
  },
  //展示步骤
  showStepStatus(state){
    state.stepStatus = true;
  },
  //隐藏步骤
  hiddenStepStatus(state){
    state.stepStatus = false;
  },
  setPageStatus(state,num){
    state.pageStatus = num;
  },
  //打开编辑弹出框
  setEditWindowStatus(state,title){
    state.editWindowStatus = true;
    state.editWindowTitle = title;
  },
  //关闭编辑弹出框
  closeEditWindowStatus(state){
    state.editWindowStatus = false;
    state.editWindowTitle = "";
  },
  //0.全局配置 start------------------------------------------------------------>
  //1.配置模块 start------------------------------------------------------------>
  //添加首页板块
  addIndexModule(state,data){
    //判断当前一共有多少个模块最多能添加10个
    if(state.pageData.index.length >= 10){
      Message.error('最多只能添加10个模块！');
      return;
    }else{
      //data.type 组件名称 data.h 模块高度 
      // 计算当前布局的最大 y 值
      const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
      state.pageData.index.push({
        i: state.pageData.index.length, 
        x: 0, 
        y: maxY + 1, 
        w: 12, 
        h: data.h, 
        type: data.type,
        content:""
      });
      console.log(state.pageData.index);
    }
    
  },
  //删除首页板块
  deleteIndexModule(state,data){
    for(let i = 0; i < state.pageData.index.length; i++) {
      if(state.pageData.index[i].i == data.i) {
        state.pageData.index.splice(i, 1);
      }
    }
    Message.success('模块已删除！');
  },
  //修改首页板块高度
  setIndexModuleHeight(state,data){
    console.log(data);
    state.pageData.index[data.i].h = data.h;
    console.log(state.pageData.index[data.i]);
  },
  moveIndexModule(state, data) {
    const moveType = data.moveType;
    const moduleId = data.i;
    const modules = state.pageData.index;
    // 查找模块在数组中的实际索引
    const thisIndex = modules.findIndex(module => module.i === moduleId);
    if (thisIndex === -1) {
      Message.error('模块未找到！');
      return;
    }
    const thisY = modules[thisIndex].y;
    
    if (moveType === 'up') {
      // 查找比当前模块 y 值小的最大的 y 值
      const thatY = Math.max(
        ...modules
          .filter(item => item.y < thisY)
          .map(item => item.y)
      );
      if (thatY === -Infinity) {
        Message.error('已经是顶部了！');
        return;
      }
      // 查找具有 thatY 的模块索引
      const thatIndex = modules.findIndex(item => item.y === thatY);
      if (thatIndex === -1) {
        Message.error('上方模块未找到！');
        return;
      }
      // 交换 y 值
      [modules[thisIndex].y, modules[thatIndex].y] = [modules[thatIndex].y, modules[thisIndex].y];

    } else if (moveType === 'down') {
      // 查找比当前模块 y 值大的最小的 y 值
      const thatY = Math.min(
        ...modules
          .filter(item => item.y > thisY)
          .map(item => item.y)
      );
      if (thatY === Infinity) {
        Message.error('已经是底部了！');
        return;
      }
      // 查找具有 thatY 的模块索引
      const thatIndex = modules.findIndex(item => item.y === thatY);
      if (thatIndex === -1) {
        Message.error('下方模块未找到！');
        return;
      }
      // 交换 y 值
      [modules[thisIndex].y, modules[thatIndex].y] = [modules[thatIndex].y, modules[thisIndex].y];
      
    } else {
      Message.error('未知的移动类型！');
      return;
    }
    // 交换后对模块进行排序以确保顺序一致
    state.pageData.index.sort((a, b) => a.y - b.y);
  },
  //添加模块
  // addModule(state,data) {
  //   //data.type 组件名称 data.h 模块高度 
  //   // 计算当前布局的最大 y 值
  //   const maxY = Math.max(...state.layout.map(item => item.y), 0);
  //   state.layout.push({
  //     i: state.layout.length, 
  //     x: 0, 
  //     y: maxY + 1, 
  //     w: 12, 
  //     h: data.h, 
  //     type: data.type,
  //     content:""
  //   });
  // },
  //删除模块
  // deleteModule(item) {
  //   //找到对应的模块删除掉
  //   for(let i = 0; i < state.layout.length; i++) {
  //     if(state.layout[i].i == item.i) {
  //       state.layout.splice(i, 1);
  //     }
  //   }
  // },
  //移动模块
  // moveIndexModule(state,data){
  //   console.log(state.pageData.index[data.i]);

  //   if(data.moveType == 'up'){
      
  //   }else{
      
  //     if(state.pageData.index[data.i].y === Math.max(...state.pageData.index.map(item => item.y))){
  //       Message.error('已经是底部了！');
  //     }else{
  //       console.log(state.pageData.index);
  //       //当前选择的模块
  //       let thisIndex = data.i;
  //       let thisY = state.pageData.index[thisIndex].y;
        
  //       //找到下方的模块的y值
  //       //注意，这里不能用i去定位，因为模块是通过y值去排序的，跟数据的位置，i的位置都没有关系
  //       const thatY = Math.min(...state.pageData.index
  //         .filter(item => item.y > thisY)
  //         .map(item => item.y), 
  //         Infinity);
  //       //再通过y值找到对应的模块i
  //       const thatIndex = state.pageData.index.findIndex(item => item.y === thatY);
        
  //       //最后交换位置
  //       state.pageData.index[thisIndex].y = thatY;
  //       state.pageData.index[thatIndex].y = thisY;
  //     }
      
  //   }
  // },
  //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;
    }
  },
  //2.获取站点信息 end------------------------------------------------------------>
}

const actions = {
  //1.站点数据 start------------------------------------------------------------>
  //获取网站基本信息
  getSiteInfo({commit},data){
    return new Promise((resolve, reject) => {
      getSiteInfo(data).then(response => {
        commit('setWebsiteInfo', response.data);
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },
  //获取网站导航池
  getSiteCategory({commit},data){
    return new Promise((resolve, reject) => {
      getSiteCategory(data).then(response => {
        commit('setGetSiteCategory', response.data);
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },
  //设置行政区划
  selectWebsiteArea({commit},data){
    return new Promise((resolve, reject) => {
      selectWebsiteArea(data).then(response => {
        commit('setArea', response.data);
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },
  //获取新闻列表
  getWebsiteArticlesList({commit},data){
    return new Promise((resolve, reject) => {
      getWebsiteArticlesList(data).then(response => {
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },
  //获取新闻详情
  selectWebsiteArticleInfo({commit},data){
    return new Promise((resolve, reject) => {
      selectWebsiteArticleInfo(data).then(response => {
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  }
  //1.站点数据 end------------------------------------------------------------>
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}