0.0.48

0.0.48

src/layout/components/template/componentMenu.vue

@@ -7,7 +7,7 @@
     <div v-if="type == 'sector'">
       <el-scrollbar wrap-class="scrollbar-wrapper">
         <div class="sectorBox">
-          <div class="sectorItemBox" @click="addModule('headSector',10)">
+          <div class="sectorItemBox" @click="addModule('headSector',19)">
             <div class="sectorItem">
               <img src="@/assets/template/sector/headSector.png" />
             </div>
@@ -19,7 +19,7 @@
             </div>
             <div class="sectorItemTitle">网站导航</div>
           </div>
-          <div class="sectorItemBox" @click="addModule('imgTitleSector',3)">
+          <div class="sectorItemBox" @click="addModule('imgTitleSector',6)">
             <div class="sectorItem">
               <img src="@/assets/template/sector/imgTitleSector.png" />
             </div>
@@ -27,25 +27,25 @@
           </div>
           <div class="sectorItemBox">
             <div class="sectorItem">
-              <img src="@/assets/template/sector/bannerSector.png" @click="addModule('bannerSector',17)"/>
+              <img src="@/assets/template/sector/bannerSector.png" @click="addModule('bannerSector',34)"/>
             </div>
             <div class="sectorItemTitle">焦点图</div>
           </div>
           <div class="sectorItemBox">
             <div class="sectorItem">
-              <img src="@/assets/template/sector/moreServicesSector.png" @click="addModule('manyPictureSector',17)"/>
+              <img src="@/assets/template/sector/moreServicesSector.png" @click="addModule('manyPictureSector',41)"/>
             </div>
             <div class="sectorItemTitle">多图菜单</div>
           </div>
           <div class="sectorItemBox">
             <div class="sectorItem">
-              <img src="@/assets/template/sector/commentSector.png" />
+              <img src="@/assets/template/sector/commentSector.png" @click="addModule('commentSector',40)"/>
             </div>
             <div class="sectorItemTitle">文章列表带评论</div>
           </div>
           <div class="sectorItemBox">
             <div class="sectorItem">
-              <img src="@/assets/template/sector/newsSector.png" />
+              <img src="@/assets/template/sector/newsSector.png" @click="addModule('listSector',20)"/>
             </div>
             <div class="sectorItemTitle">文章列表</div>
           </div>

src/store/modules/template.js

@@ -92,7 +92,9 @@ const mutations = {
   },
   //修改模块高度
   setModuleHeight(state,data){
+    console.log(data);
     state.layout[data.i].h = data.h;
+    console.log(state.layout[data.i]);
   },
   //2.获取站点信息 end------------------------------------------------------------>
 }

src/views/role/roleList.vue

@@ -54,10 +54,10 @@
           <el-form-item label="职能描述：" :label-width="formLabelWidth" prop="remark" class="custom-align-right">
             <el-input type="textarea" v-model="form.remark" class="custom-textarea" placeholder="请输入职能描述"></el-input>
           </el-form-item>
-          <el-form-item label="排序：" :label-width="formLabelWidth" prop="sort" class="custom-align-right">
+          <el-form-item label="排序：" :label-width="formLabelWidth" prop="" class="custom-align-right">
             <el-input v-model="form.sort" autocomplete="off" placeholder="请输入排序"></el-input>
           </el-form-item>
-          <el-form-item label="权限：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+          <el-form-item label="权限：" :label-width="formLabelWidth" prop="rule" class="custom-align-right">
             <div class="treeBox">
               <el-tree
                 ref="tree"
@@ -70,6 +70,7 @@
               </el-tree>
             </div>
           </el-form-item>
+          <input type="hidden" v-model="form.rule" />
         </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -105,6 +106,14 @@ export default {
         callback()
       }
     }
+    //数组不能为空
+    const validateArray = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
     //0.全局操作 end ------------------------------------------------------------>
 
     return {
@@ -151,7 +160,9 @@ export default {
         //职能描述不能为空
         remark:[{required:true,trigger:'blur',validator:validateEmpty}],
         //排序不能为空
-        sort:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //sort:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //权限不能为空
+        rule:[{required:true,trigger:'blur',validator:validateArray}],
       },
       //弹出框中的表单设置 end ------------------------------------------------------------>
     }

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

@@ -47,6 +47,7 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
+    height: 340px;
     .itemTopBox {
       border: 1px dashed #5570F1;
       width: 80%;
@@ -57,10 +58,11 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 22px 0;
+      padding: 14px 0 0 0;
+      height: 300px;
       .bannerLayerBox {
         width: 55%;
-        height: 226px
+        height: 226px;
       }
       .NewsListBox {
         width: 45%;

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

@@ -0,0 +1,78 @@
+<template>
+  <div class="commentSectorBox">
+    <div class="commentSectorBoxTitle">
+      <styleTitle />
+    </div>
+    <div class="commentSectorBoxContent">
+      <div class="tabsCalendarNewsBox">
+        <tabsCalendarNews />
+      </div>
+      <div class="calendarBox">
+        <calendar />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import styleTitle from './components/styleTitle.vue';
+import tabsCalendarNews from './components/tabsCalendarNews.vue';
+import calendar from './components/calendar.vue';
+
+export default {
+  components: {
+    styleTitle,
+    tabsCalendarNews,
+    calendar
+  },
+  props: {
+    id: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .commentSectorBox {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .commentSectorBoxTitle {
+      width: 80%;
+      border: 1px dashed #5570F1;
+      height: 41px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .commentSectorBoxContent {
+      width: 80%;
+      display: flex;
+      .tabsCalendarNewsBox {
+        width: 70%;
+        box-sizing: border-box;
+        padding-right: 20px;
+        border: 1px dashed #5570F1;
+      }
+      .calendarBox {
+        width: 30%;
+        border: 1px dashed #5570F1;
+      }
+    }
+  }
+</style>

src/views/template/style/1/components/calendar.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="calendarMainBox">
+    <div class="calendarTitle">
+      <span>三农调查</span>
+    </div>
+    <div class="calendarBg">
+      <span>问卷调查</span>
+    </div>
+    <div class="calendarItem">
+      <div class="calendarProblemItemTitle">问卷调查内容问卷调查内容问卷调查内容问卷调查..</div>
+      <el-input type="textarea" v-model="usertext" placeholder="请输入内容" rows="4"></el-input>
+      <el-button type="primary" class="calendarBtn" size="small">提交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      usertext:"",
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .calendarMainBox {
+    overflow: hidden;
+    .calendarTitle {
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      span {
+        padding-left: 20px;
+        padding-right: 20px;
+        border-left: 5px solid #E8EDF6;
+        border-right: 5px solid #E8EDF6;
+      }
+    }
+    .calendarBg {
+      width: 100%;
+      height: 110px;
+      background: url('../../../../../assets/template/component/calendar.png') no-repeat center center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      padding-top: 35px;
+      padding-left: 36px;
+      span {
+        font-size: 32px;
+        color: #fff;
+        font-weight: bold;
+      }
+    }
+    .calendarItem {
+      font-size: 18px;
+      background: #EAF3FF;
+      padding:20px;
+      position: relative;
+      .calendarProblemItemTitle {
+        margin-bottom: 20px;
+        height: 48px;
+      }
+      .calendarBtn {
+        position: absolute;
+        bottom: 30px;
+        right: 30px;
+      }
+    }
+  }
+</style>

src/views/template/style/1/components/listNews.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="listNewsBox">
+    <div class="listNewsTitle">
+      <div class="listNewsStyleBorder">新闻列表标题</div>
+    </div>
+    <ul class="listNewsUl">
+      <li>
+        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+        <div>11-29</div>
+      </li>
+      <li>
+        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+        <div>11-29</div>
+      </li>
+      <li>
+        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+        <div>11-29</div>
+      </li>
+      <li>
+        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+        <div>11-29</div>
+      </li>
+      <li>
+        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+        <div>11-29</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      activeName:"first"
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .listNewsBox {
+    .listNewsTitle {
+      color: #19499F;
+      font-size: 22px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #D9D9D9;
+      .listNewsStyleBorder {
+        border-bottom: 2px solid #19499F;
+        padding-bottom: 18px;
+        padding-top: 18px;
+      }
+    }
+    .listNewsUl {
+      padding: 0;
+      li {
+        list-style-type: none;
+        height: 20px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        a {
+          display: block;
+          background: url('../../../../../assets/template/component/listyle.png') no-repeat left center;
+          box-sizing: border-box;
+          padding-left: 20px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex: 1;
+          font-size: 16px;
+        }
+        div {
+          color: #999;
+          width: 50px;
+        }
+      }
+    }
+  }
+</style>
+

src/views/template/style/1/components/styleTitle.vue

@@ -12,7 +12,7 @@ export default {
   data() {
     return {
       type:1,
-      text:"多图板块"
+      text:"板块标题"
     };
   },
   methods: {

src/views/template/style/1/components/tabsCalendarNews.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="tabsCalendarMainNewsBox">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="市场资讯" name="sczx">
+        <ul class="newsListBox">
+          <li class="newsCalendarBox">
+            <div class="CalendarItemBox">
+              <div class="Calendar">
+                <div class="CalendarDay">3</div>
+                <div class="CalendarMonth">2024-12</div>
+              </div>
+              <div class="CalendarNewsTitle">
+                <div class="CalendarTitle">商务部：牢牢把握产业振兴，在抓好农产品冷链物流等方面采取更多务实举措</div>
+                <div class="newsContent">会议总结了前一阶段工作情况，研究商务服务乡村振兴重点工作和定点帮扶工作计划，部署下一步工作。 </div>
+              </div>
+            </div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="市场行情" name="schq"></el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      activeName:"sczx"
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tabsCalendarMainNewsBox {
+    width: 100%;
+    .newsListBox {
+      padding-left: 0;
+      .newsCalendarBox {
+        list-style-type: none;
+        margin-bottom: 20px;
+        width: 100%;
+        .CalendarItemBox {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          .Calendar {
+            width: 100px;
+            height: 100px;
+            background: #EAF3FF;
+            box-sizing: border-box;
+            padding: 10px 10px 0 10px;
+            margin-right: 25px;
+            .CalendarDay {
+              font-size: 38px;
+              color: #19499F;
+              text-align: center;
+              padding-bottom: 10px;
+              border-bottom: 1px solid #19499F;
+            }
+            .CalendarMonth {
+              font-size: 16px;
+              color: #19499F;
+              text-align: center;
+              padding-top: 10px;
+            }
+          }
+          .CalendarNewsTitle {
+            flex: 1;
+            .CalendarTitle {
+              font-size: 18px;
+              color: #333;
+            }
+            .newsContent {
+              font-size: 16px;
+              color: #999999;
+              padding-top: 10px;
+            }
+          }
+        }
+      }
+      .newsItemBox {
+        list-style-type: none;
+        height: 20px;
+        margin-bottom: 20px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        a {
+          display: block;
+          background: url('../../../../../assets/template/component/listyle.png') no-repeat left center;
+          box-sizing: border-box;
+          padding-left: 20px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex: 1;
+          font-size: 16px;
+        }
+        div {
+          color: #999;
+        }
+      }
+    }
+  }
+</style>
+

src/views/template/style/1/components/topInfo.vue

@@ -42,6 +42,7 @@ export default {
   .headTopBox {
     width: 80%;
     border: 1px dashed #5570F1;
+    height: 190px;
     .headTopInfo {
       display: flex;
       justify-content: space-between;

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

@@ -29,6 +29,7 @@ export default {
     .imgSectorBox {
       border: 1px dashed #5570F1;
       width: 80%;
+      height: 60px;
       img {
         width: 100%;
         height: 100%;

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

@@ -0,0 +1,58 @@
+<template>
+  <div class="listSectorBox">
+    <div class="listSectorBoxTitle">
+      <styleTitle />
+    </div>
+    <div class="listSectorBoxContent">
+      <div class="listNewsLeft">
+        <listNews />
+      </div>
+      <div class="listNewsRight">
+        <listNews />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import styleTitle from './components/styleTitle.vue';
+import listNews from './components/listNews.vue';
+
+export default {
+  components: {
+    styleTitle, 
+    listNews
+  },
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .listSectorBox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width:100%;
+    .listSectorBoxTitle {
+      width: 80%;
+      border: 1px dashed #5570F1;
+      height: 41px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .listSectorBoxContent {
+
+    }
+    .listNewsRight {
+
+    }
+  }
+</style>

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

@@ -7,20 +7,26 @@
       <fivePicture />
     </div>
     <div class="manyPictureNewsBox">
-      <div></div>
-      <div></div>
+      <div class="manyPictureNewsItem">
+        <listNews />
+      </div>
+      <div class="manyPictureNewsItem">
+        <listNews />
+      </div>
     </div>
   </div>
-  
 </template>
 
 <script>
 import styleTitle from './components/styleTitle.vue';
 import fivePicture from './components/fivePicture.vue';
+import listNews from './components/listNews.vue';
+
 export default {
   components: {
     styleTitle,
-    fivePicture
+    fivePicture,
+    listNews
   },
   props: {
     
@@ -60,8 +66,21 @@ export default {
     .manyPictureNewsBox {
       width: 80%;
       border: 1px dashed #5570F1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .manyPictureNewsItem {
+        width: 50%;
+        border: 1px dashed #5570F1;
+        box-sizing: border-box;
+      }
+      .manyPictureNewsItem:nth-child(1) {
+        padding-right: 10px;
+      }
+      .manyPictureNewsItem:nth-child(2) {
+        padding-left: 10px;
+      }
     }
   }
-  
 </style>
 

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

@@ -82,13 +82,10 @@ export default {
     }
   },
   mounted() {
-    //获取当前元素的高度，然后修改store中的layer
-    //console.log(this.id);
-    const menuSectorBoxHeight = this.$refs.menuBox.clientHeight; // 获取高度
-    //console.log(menuSectorBoxHeight);
-    let h = Math.round(menuSectorBoxHeight / 10) + 1;
-    console.log(h);
-    this.$store.commit('template/setModuleHeight',{i:this.id,h:h});
+    //获取当前元素的个数，现在一行是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/setModuleHeight',{i:this.id,h:menuH});
   },
 };
 </script>
@@ -104,15 +101,17 @@ export default {
       justify-content: center;
       .menuBox {
         width: 80%;
-        border: 1px dashed #fff;
+        box-sizing: border-box;
+        border-left: 1px dashed #fff;
+        border-right: 1px dashed #fff;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         div {
           width: 12.5%;
           font-size: 14px;
-          height: 28px;
-          line-height: 28px;
+          height: 30px;
+          line-height: 30px;
           text-align: center;
           overflow: hidden; 
           white-space: nowrap; 

src/views/template/templateCreat.vue

@@ -27,7 +27,7 @@
         <div :class="['pageTabsItem', editPageStatus === 7 ? 'active' : '']">自定义详情页</div>
       </div>
       <div class="grid-layout-demo">
-        <grid-layout :layout="this.$store.state.template.layout" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true">
+        <grid-layout :layout="this.$store.state.template.layout" :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.layout" :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">              
               <!-- 页头板块 --> 
@@ -50,6 +50,14 @@
               <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
                 <manyPictureSector />
               </div>
+              <!-- 评论模块 --> 
+              <div v-if="item.type == 'commentSector'" class="moduleBox">
+                <commentSector />
+              </div>
+              <!-- 双联文章列表模块 --> 
+              <div v-if="item.type == 'listSector'" class="moduleBox">
+                <listSector />
+              </div>
             </div>
           </grid-item>
         </grid-layout>
@@ -75,6 +83,8 @@ import menuSector from './style/1/menuSector.vue';
 import imgTitleSector from './style/1/imgTitleSector.vue';
 import bannerSector from './style/1/bannerSector.vue'; 
 import manyPictureSector from './style/1/manyPictureSector.vue'; 
+import commentSector from './style/1/commentSector.vue'; 
+import listSector from './style/1/listSector.vue';
 //自助建站组件 end------------------------------------------------------------>
 
 export default {
@@ -86,7 +96,9 @@ export default {
     menuSector,
     imgTitleSector,
     bannerSector,
-    manyPictureSector
+    manyPictureSector,
+    commentSector,
+    listSector
   },
   data() {
     return {
@@ -283,7 +295,8 @@ export default {
     height: 100%;
     position: relative;
     justify-content: space-between;
-    border: 2px dashed #5570F1;
+    box-sizing: border-box;
+    border: 2px dashed #19499F;
   }
   //模块 end------------------------------------------------------------> 
 

src/views/website/categoryList.vue

@@ -300,7 +300,7 @@ export default {
       formRules: {
         //网站名称不能为空
         name:[{required:true,trigger:'blur',validator:validateEmpty}],//导航池名称不能为空
-        web_url:[{required:true,trigger:'blur',validator:validateEmpty}],//外链地址���能为空
+        web_url:[{required:true,trigger:'blur',validator:validateEmpty}],//外链地址不能为空
         department_arr_id: [{type:'array',required:true,trigger:'change',message:'请选择职能部门！',validator:validateDepartment}],
         city_arr_id: [{type:'array',required:true,trigger:'change',message:'请选择行政区划！',validator:validateCity}],
         //pid_arr: [{type:'array',required:true,trigger:'change',message:'请选择父级导航！',validator:validatePid}],
@@ -339,7 +339,7 @@ export default {
       //获取职能部门
       departmentKey:0,//弹窗用的key
       departmentData: {
-        checkStrictly: true,
+        checkStrictly: true,//父级不可选
         lazy: true,
         async lazyLoad (node, resolve) {
           const { level, data } = node;
@@ -635,7 +635,13 @@ export default {
     },
     //修改表单
     editToServe(){
-
+      //防止提交[1,1]这种重复的数据
+      if (this.form.department_arr_id.length > 1) {
+        const lastIndex = this.form.department_arr_id.length - 1;
+        if (this.form.department_arr_id[lastIndex] === this.form.department_arr_id[lastIndex - 1]) {
+          this.form.department_arr_id.pop(); // Remove the last element if it's the same as the previous one
+        }
+      }
       this.form.id = this.editId;
       this.$refs.form.validate(valid => {
         if (valid) {