Merge branch '12_4_dangyunlong' into dev

src/layout/components/Navbar.vue

@@ -19,7 +19,8 @@
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <!-- <img src="@/assets/public/nav/notice.png" class="user-notice"> -->
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar" v-if="avatar!=''">
+          <img src="@/assets/login/userDefault.png" class="user-avatar" v-else>
           <span class="userName">{{this.$store.state.user.name}}</span>
           <img src="@/assets/public/nav/arrowDown.png" class="arrowDown">
           <!--向下按钮-->

src/store/modules/template.js

@@ -1,6 +1,8 @@
 import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,getWebsiteArticlesList,
   selectWebsiteArticleInfo} from '@/api/cms'
 
+import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的
+
 const state = {
   //0.全局配置 start------------------------------------------------------------> 
   editWebsiteId: "",//当前编辑网站的id
@@ -10,7 +12,9 @@ const state = {
   pageStatus:1,//当前编辑哪个页面  1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=自定义列表页 7=自定义详情页 
   menuType:1, //当前菜单显示板块还是组件 1=板块 2=组件 
   pageData: { //准备提交到后台的数据
-    index:[],//首页
+    index:[
+      
+    ],//首页
     class:[],//分类页
     list:[],//列表页
     article:[],//详情页
@@ -18,6 +22,7 @@ const state = {
     aloneList:[],//自定义列表页
     aloneArticle:[],//自定义详情页
   },
+  editWindowStatus:false,//编辑弹出框是否显示
   // layout: [
   //   // i = id 
   //   // w = 最大宽度是12
@@ -70,6 +75,7 @@ const mutations = {
       type: data.type,
       content:""
     });
+    console.log(state.pageData.index);
   },
   //删除首页板块
   deleteIndexModule(state,data){
@@ -78,6 +84,7 @@ const mutations = {
         state.pageData.index.splice(i, 1);
       }
     }
+    Message.success('模块已删除！');
   },
   //修改首页板块高度
   setIndexModuleHeight(state,data){
@@ -85,6 +92,65 @@ const mutations = {
     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 模块高度 
@@ -107,6 +173,38 @@ const mutations = {
   //     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------------------------------------------------------------>
@@ -134,10 +232,6 @@ const mutations = {
       state.area.county = data.region;
     }
   },
-  //设置职能部门
-  setDepartmentList(state,data){
-    state.departmentList = data;
-  },
   //2.获取站点信息 end------------------------------------------------------------>
 }
 
@@ -176,17 +270,6 @@ const actions = {
       })
     })
   },
-  //设置职能部门
-  selectWebsiteDepartment({commit},data){
-    return new Promise((resolve, reject) => {
-      selectWebsiteDepartment(data).then(response => {
-        commit('setDepartmentList', response.data);
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
   //获取新闻列表
   getWebsiteArticlesList({commit},data){
     return new Promise((resolve, reject) => {

src/styles/global.less

@@ -105,11 +105,11 @@
   background:#CAD9CB;
 }
 .listSaveBtn{
-  color:#fff;
-  background:#2F2F2F;
+  color:#FFAF53;
+  background:#FFECD6;
 }
 .listSaveBtn:hover {
-  background:#646464;
+  background:#ffdcb5;
 }
 
 //表单样式微调

src/views/complaint/complaintList.vue

@@ -212,6 +212,9 @@
           <el-form-item label="姓名：" :label-width="formLabelWidth" prop="" class="custom-align-right">
             <el-input v-model="form.name" autocomplete="off" disabled placeholder="请输入姓名"></el-input>
           </el-form-item>
+          <el-form-item label="电话：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.mobile" autocomplete="off" disabled placeholder="请输入电话"></el-input>
+          </el-form-item>
           <el-form-item label="身份证号：" :label-width="formLabelWidth" prop="id_card" class="custom-align-right">
             <el-input v-model="form.id_card" autocomplete="off" disabled placeholder="请输入身份证号"></el-input>
           </el-form-item>
@@ -725,7 +728,7 @@ export default {
           }
           console.log(this.form.status) //100
           this.form.name = data.name;
-
+          this.form.mobile = data.mobile;
         }else{
           this.$message({
             type: 'warning',
@@ -770,7 +773,7 @@ export default {
         // nature_name1:this.form.nature_name1,
         // nature_name3:this.form.nature_name3,
         other:this.form.other,
-
+        mobile:this.form.mobile,
         type:this.form.type,
         type_level:this.form.type_level,
         status:this.form.status,

src/views/template/page/pageIndex.vue

@@ -1,17 +1,32 @@
 <template>
   <div class="grid-layout-demo">
+    <div class="FixedModuleBox">
+      <headSector />
+    </div>
+    <div class="FixedModuleBox">
+      <menuSector />
+    </div>
+    <div class="FixedModuleBox">
+      <img src="@/assets/template/creat.png">
+      <div>请选择板块到此区域</div>
+    </div>
     <grid-layout :layout="this.$store.state.template.pageData.index" :margin="[0,0]" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true">
       <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :key="item.i" :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
         <div class="grid-item-content">
-          <div class="grid-tools-menu">编辑</div>
+          <div class="grid-tools-menu">
+            <!-- <span><i class="el-icon-setting"></i></span> -->
+            <span><i class="el-icon-upload2" @click="moveIndexModule(item.i,'up')"></i></span>
+            <span><i class="el-icon-download" @click="moveIndexModule(item.i,'down')"></i></span>
+            <span><i class="el-icon-delete" @click="deleteIndexModule(item.i)"></i></span>
+          </div>
           <!-- 页头板块 -->
-          <div v-if="item.type == 'headSector'" class="moduleBox">
+          <!-- <div v-if="item.type == 'headSector'" class="moduleBox">
             <headSector />
-          </div>
+          </div> -->
           <!-- 导航板块 --> 
-          <div v-if="item.type == 'menuSector'" class="moduleBox">
+          <!-- <div v-if="item.type == 'menuSector'" class="moduleBox">
             <menuSector :id="item.i"/>
-          </div>
+          </div> -->
           <!-- 图片标题模块 --> 
           <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
             <imgTitleSector />
@@ -41,12 +56,15 @@
             <friendShipLinkSector />
           </div>
           <!-- 页尾板块 --> 
-          <div v-if="item.type == 'footerSector'" class="moduleBox">
+          <!-- <div v-if="item.type == 'footerSector'" class="moduleBox">
             <footerSector />
-          </div>
+          </div> -->
         </div>
       </grid-item>
     </grid-layout>
+    <div class="FixedModuleBox">
+      <footerSector />
+    </div>
   </div>
 </template>
 
@@ -118,16 +136,27 @@ export default {
         path: '/templateList'
       });
     },
-    //0.3 打开弹出框
+    //0.全局操作 end ------------------------------------------------------------>
+
+    //1.模块操作 start ------------------------------------------------------------>
+    //1.1 移动模块
+    moveIndexModule(i,moveType){
+      this.$store.commit('template/moveIndexModule',{i:i,moveType:moveType});
+    },
+    //1.2 删除模块
+    deleteIndexModule(i){
+      this.$store.commit('template/deleteIndexModule',{i:i});
+    },
+    //1.3 打开弹出框
     openWindow(item) {
       this.editModule = item.i;
       this.windowStatus = true;
     },
-    //0.4 关闭弹出框
+    //1.4 关闭弹出框
     closeWindow() {
       this.windowStatus = false;
     }
-    //0.全局操作 end ------------------------------------------------------------>
+    //1.模块操作 end ------------------------------------------------------------>
   },
   mounted(){
 
@@ -146,6 +175,17 @@ export default {
     box-sizing: border-box;
     border: 2px dashed #19499F;
   }
+  //固定的模块
+  .FixedModuleBox {
+    width: 100%;
+    border: 2px dashed #19499F;
+    font-size: 18px;
+    color: #999;
+    text-align: center;
+    img {
+      margin: 30px 0 20px 0;
+    }
+  }
   //模块 end------------------------------------------------------------> 
   //栅格布局 start------------------------------------------------------------> 
   .grid-item-content {
@@ -161,6 +201,30 @@ export default {
       top: 0;
       right: 0;
       z-index: 99;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        margin: 5px;
+        color: #000;
+        background: #fff;
+        border: 1px solid #000;
+        border-radius: 5px;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        font-size: 14px;
+        transition: all 0.3s;
+        &:hover {
+          color: #fff;
+          background: #000;
+        }
+      }
     }
   }
   .grid-layout {

src/views/template/public/editBtn.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="templateEditBtnBox">
+    <i class="el-icon-setting"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .templateEditBtnBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin: 5px;
+    color: #000;
+    background: #fff;
+    border: 1px solid #000;
+    border-radius: 5px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    font-size: 14px;
+    transition: all 0.3s;
+    z-index: 999;
+    &:hover {
+      color: #fff;
+      background: #000;
+    }
+  }
+</style>

src/views/template/style/1/bannerSector.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="bannerBox">
     <div class="itemTopBox">
+      <editBtn />
       <mainTitle />
     </div>
     <div class="itemBottomBox">
       <div class="bannerLayerBox">
+        <editBtn />
         <banner />
       </div>
       <div class="NewsListBox">
+        <editBtn />
         <tabsNews />
       </div>
     </div>
@@ -18,12 +21,14 @@
 import mainTitle from './components/mainTitle.vue'
 import banner from './components/banner.vue'
 import tabsNews from './components/tabsNews.vue'
+import editBtn from '../../public/editBtn.vue'
 
 export default {
   components: {
     mainTitle,
     banner,
-    tabsNews
+    tabsNews,
+    editBtn
   },
   props: {
     
@@ -48,9 +53,15 @@ export default {
     flex-direction: column;
     align-items: center;
     height: 340px;
+    
     .itemTopBox {
+      position: relative;
       border: 1px dashed #5570F1;
+      transition: all 0.3s;
       width: 80%;
+      &:hover {
+        background: #e7ebff;
+      }
     }
     .itemBottomBox {
       border: 1px dashed #5570F1;
@@ -61,14 +72,24 @@ export default {
       padding: 14px 0 0 0;
       height: 300px;
       .bannerLayerBox {
+        position: relative;
+        border: 1px dashed #5570F1;
         width: 55%;
         height: 226px;
+        &:hover {
+          background: #e7ebff;
+        }
       }
       .NewsListBox {
+        position: relative;
         width: 45%;
+        border: 1px dashed #5570F1;
         box-sizing: border-box;
         padding-left: 20px;
-        height: 226px
+        height: 226px;
+        &:hover {
+          background: #e7ebff;
+        }
       }
     }
     

src/views/template/style/1/menuSector.vue

@@ -83,9 +83,9 @@ export default {
   },
   mounted() {
     //获取当前元素的个数，现在一行是8个，每个高度是30px
-    let h = Math.floor(this.$store.state.template.webSiteMenu.length / 8) + (this.$store.state.template.webSiteMenu.length % 8 > 0 ? 1 : 0);
-    let menuH = (h*3)+4;
-    this.$store.commit('template/setIndexModuleHeight',{i:this.id,h:menuH});
+    // let h = Math.floor(this.$store.state.template.webSiteMenu.length / 8) + (this.$store.state.template.webSiteMenu.length % 8 > 0 ? 1 : 0);
+    // let menuH = (h*3)+4;
+    // this.$store.commit('template/setIndexModuleHeight',{i:this.id,h:menuH});
   },
 };
 </script>

src/views/template/templateCreat.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="mainBox">
+    <!-- 顶部菜单 start ---------------------------------------->
     <div class="topMenuBox">
       <div>
         <el-button icon="el-icon-refresh" type="primary">随机生成</el-button>
@@ -10,12 +11,8 @@
         <el-button type="info" @click="goStyle">上一步</el-button>
       </div>
     </div>
-    <!-- 工具栏 start ---------------------------------------->
-    <!-- <div class="menuPostionBox">
-      <MenuTopBox @add-module="addModule"/>
-    </div> -->
-    <!-- 工具栏 end ---------------------------------------->
-    <!-- 栅格布局 预览模式 start ---------------------------------------->
+    <!-- 顶部菜单 end ---------------------------------------->
+    <!-- 画布 start ---------------------------------------->
     <div class="websiteBox">
       <div class="pageTabsBox">
         <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 1 ? 'active' : '']" @click="openPage(1)">首页</div>
@@ -28,16 +25,25 @@
       </div>
       <pageIndex v-if="this.$store.state.template.pageStatus == 1"/>
     </div>
-    <!-- 栅格布局 预览模式 end ---------------------------------------->
+    <!-- 画布 end ---------------------------------------->
+
+    <!-- 弹出框 start ---------------------------------------->
+    <el-dialog title="编辑模块" :visible.sync="this.$store.state.template.editWindowStatus" :close-on-click-modal="false">
+      <div>123</div>
+      <div slot="footer" class="dialog-footer">
+        <div>
+          <el-button type="info">取消</el-button>
+          <el-button type="warning">编辑</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 弹出框 start ---------------------------------------->
   </div>
 </template>
 
 <script>
 //页面公用组件 start------------------------------------------------------------>
-//引入公用样式
 import '@/styles/global.less';
-//引入vue-grid-layout拖拽效果
-//import { GridLayout, GridItem } from 'vue-grid-layout';
 //页面公用组件 end------------------------------------------------------------>
 
 //页面组件 start------------------------------------------------------------>
@@ -67,12 +73,18 @@ export default {
     //0.全局操作 start ------------------------------------------------------------>
     //上一步  
     goStyle(){
-      this.$router.push({
-        path: '/templateStyle',
-        query: {
-          id: this.editId
-        }
-      });
+      this.$confirm('返回上一步会导致当前页面数据丢失, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$router.push({
+          path: '/templateStyle',
+          query: {
+            id: this.editId
+          }
+        }); 
+      })
     },
     //下一步
     gotoList(){
@@ -105,8 +117,6 @@ export default {
     this.$store.dispatch('template/getSiteInfo',{id:this.websiteId});
     //获取地区
     this.$store.dispatch('template/selectWebsiteArea',{});
-    //获取职能部门  
-    this.$store.dispatch('template/selectWebsiteDepartment');
   }
 }
 </script>
@@ -220,6 +230,11 @@ export default {
     grid-gap: 0;
     row-gap: 0;
   }
+  .vue-grid-placeholder {
+    background-color: #f0f0f0 !important; /* 更改为你想要的颜色 */
+    opacity: 0.8;
+    border: 2px dashed #f0f0f0;
+  }
   //栅格布局 end------------------------------------------------------------> 
 
   //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/

src/views/template/templateList.vue

@@ -58,8 +58,8 @@
               <template slot-scope="scope">
                 <div class="listBtnBox">
                   <div class="listEditBtn" @click="getDataMain(scope.row.id)" v-if="scope.row.status==2"><i class="el-icon-edit-outline"></i>编辑</div>
-                  <div class="listMainBtn" @click="creatWebsite(scope.row.id)" v-if="scope.row.status==0||scope.row.status==1"><i class="el-icon-brush"></i>构建</div>
-                  <div class="listSaveBtn"><i class="el-icon-finished"></i>应用</div>
+                  <div class="listSaveBtn" @click="creatWebsite(scope.row.id)" v-if="scope.row.status==0||scope.row.status==1"><i class="el-icon-brush"></i>构建</div>
+                  <div class="listMainBtn"><i class="el-icon-link"></i>应用</div>
                 </div>
               </template>
             </el-table-column>