Эх сурвалжийг харах

Merge branch '12_4_dangyunlong' into dev

Sean 3 сар өмнө
parent
commit
a479a9e4c6

BIN
src/assets/template/component/calendar.png


BIN
src/assets/template/component/pictureTitle1.png


BIN
src/assets/template/component/pictureTitle2.png


BIN
src/assets/template/component/pictureTitle3.png


BIN
src/assets/template/component/pictureTitle4.png


BIN
src/assets/template/component/pictureTitle5.png


+ 6 - 6
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>

+ 2 - 0
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------------------------------------------------------------>
 }

+ 14 - 3
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 ------------------------------------------------------------>
     }

+ 4 - 2
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%;

+ 78 - 0
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>

+ 80 - 0
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>

+ 22 - 14
src/views/template/style/1/components/fivePicture.vue

@@ -1,6 +1,10 @@
 <template>
-  <div>
-   
+  <div class="fivePictureBox">
+    <div><img src="@/assets/template/component/pictureTitle1.png"/></div>
+    <div><img src="@/assets/template/component/pictureTitle2.png"/></div>
+    <div><img src="@/assets/template/component/pictureTitle3.png"/></div>
+    <div><img src="@/assets/template/component/pictureTitle4.png"/></div>
+    <div><img src="@/assets/template/component/pictureTitle5.png"/></div>
   </div>
 </template>
 
@@ -24,17 +28,21 @@ export default {
 </script>
 
 <style scoped lang="less">
-  .styleTitleBox {
-    width: 468px;
-    height: 41px;
-    text-align: center;
-    font-size: 32px;
-    font-weight: bold;
-    color: #333;
-    line-height: 41px;
-  }
-  .titleBoxStyle1{
-    background: url('../../../../../assets/template/component/titleStyle1.png') no-repeat center center;
-    background-size: 100% 100%;
+  .fivePictureBox {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 0;
+    div {
+      width: 20%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        display: block;
+        width: 90%;
+      }
+    }
   }
 </style>

+ 96 - 0
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>
+

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

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

+ 142 - 0
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>
+

+ 1 - 0
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;

+ 1 - 0
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%;

+ 58 - 0
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>

+ 39 - 6
src/views/template/style/1/manyPictureSector.vue

@@ -3,18 +3,30 @@
     <div class="manyPictureSectorBoxTitle">
       <styleTitle />
     </div>
-    <div>
-      
+    <div class="manyPictureSectorBox">
+      <fivePicture />
+    </div>
+    <div class="manyPictureNewsBox">
+      <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
+    styleTitle,
+    fivePicture,
+    listNews
   },
   props: {
     
@@ -36,7 +48,7 @@ export default {
 <style scoped lang="less">
   .manyPictureSectorBox {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
     align-items: center;
     width:100%;
     .manyPictureSectorBoxTitle {
@@ -47,7 +59,28 @@ export default {
       justify-content: center;
       align-items: center;
     }
+    .manyPictureSectorBox {
+      width: 80%;
+      border: 1px dashed #5570F1;
+    }
+    .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>
 

+ 9 - 10
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; 

+ 16 - 3
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------------------------------------------------------------> 
 

+ 24 - 17
src/views/website/WebsiteList.vue

@@ -16,12 +16,12 @@
             <el-cascader v-model="getApiData.website_column_id" :props="{checkStrictly:true}" :options="website_column_arr" clearable></el-cascader>
           </div>
         </el-col>
-        <el-col :span="8">
+        <!-- <el-col :span="8">
           <div class="searchBox">
-            <div class="searchTitle">网站城市:</div>
+            <div class="searchTitle">行政区划:</div>
             <CityCascader v-model="getApiData.city_arr_id" @update-city-id="updateCityId"></CityCascader>
           </div>
-        </el-col>
+        </el-col> -->
       </el-row>
       </div>
     </div>
@@ -41,7 +41,7 @@
       <el-row>
         <template>
           <el-table :data="tableData" style="width: 100%">
-            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+            <el-table-column fixed prop="index" label="编号" width="50"></el-table-column>
             <el-table-column prop="website_name" label="网站名称"></el-table-column>
             <el-table-column prop="column_name" label="上级网系"></el-table-column>
             <el-table-column label="网站地址">
@@ -53,7 +53,7 @@
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="city_name" label="网站城市"></el-table-column>
+            <!-- <el-table-column prop="city_name" label="行政区划"></el-table-column> -->
             <el-table-column prop="created_at" label="创建时间"></el-table-column>
             <el-table-column prop="updated_at" label="修改时间"></el-table-column>
             <el-table-column fixed="right" label="操作" width="240" header-align="center">
@@ -148,9 +148,9 @@
           <el-form-item label="上级网系:" :label-width="formLabelWidth" prop="website_column_arr_id" class="custom-align-right">
             <el-cascader v-model="form.website_column_arr_id" :props="{checkStrictly:true}" :options="website_column_arr"></el-cascader>
           </el-form-item>
-          <el-form-item label="城市:" :label-width="formLabelWidth" prop="city_arr_id" class="custom-align-right">
+          <!-- <el-form-item label="行政区划:" :label-width="formLabelWidth" prop="city_arr_id" class="custom-align-right">
             <CityCascader v-model="form.city_arr_id" @update-city-id="updateFormCityId"></CityCascader>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item label="网站logo:" prop="logo" :label-width="formLabelWidth" :class="['custom-form-item']" class="custom-align-right">
             <div class="uploaderBox">
               <!-- <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
@@ -322,7 +322,7 @@ export default {
           {url:"",show:false}
         ],
         website_column_arr_id:[],//需要提交的上级网系 数组
-        city_arr_id:[0],//需要提交的城市id
+        //city_arr_id:[0],//需要提交的城市id
         logo:"",//logo地址 提交文件换取地址
         title:"",//需要提交的网站标题
         keywords:"",//需要提交的网站标题
@@ -341,7 +341,7 @@ export default {
         //网系不能为空 注意,因为是select框,只有提交的时候才会验证
         website_column_arr_id: [{type:'array',required:true,trigger:'change',message:'必须选择一个网系!',validator:validateColumn}],
         //网站标题,关键词,描述不能为空
-        city_arr_id:[{required:true,trigger:'blur',validator:validateColumn}],
+        //city_arr_id:[{required:true,trigger:'blur',validator:validateColumn}],
         title:[{required:true,trigger:'blur',validator:validateEmpty}],
         keywords:[{required:true,trigger:'blur',validator:validateEmpty}],
         description:[{required:true,trigger:'blur',validator:validateEmpty}],
@@ -385,10 +385,17 @@ export default {
       //console.log(this.getApiData)
       this.$store.dispatch('pool/getWebList',this.getApiData).then(res=> {
         let newData = [];
-        for(let item of res.data.rows){
-          if(item.city_name==null){item.city_name="--"}
-          newData.push(item)
+        //显示原有的id
+        // for(let item of res.data.rows){
+        //   if(item.city_name==null){item.city_name="--"}
+        //   newData.push(item)
+        // }
+        //显示1-10编号
+        for(let i=0;i<res.data.rows.length;i++){
+          newData[i] = res.data.rows[i];
+          newData[i].index = i+1;
         }
+        console.log(newData)
         //格式化网站地址
         // res.data.rows.forEach(item => {
         //   item.website_url = item.website_url.join(', ');
@@ -446,7 +453,7 @@ export default {
       this.getApiData.keyword = "";
       this.getApiData.website_column_id = [];
       this.getApiData.city_id = [];
-      this.getApiData.city_arr_id = [];
+      //this.getApiData.city_arr_id = [];
       this.getApiData.page = 1;
       this.getApiData.pageSize = 10;
       this.getData();
@@ -483,7 +490,7 @@ export default {
         {url:"",show:false},
         {url:"",show:false}
       ];
-      this.form.city_arr_id = [0];
+      //this.form.city_arr_id = [0];
       this.form.logo = "";
       this.form.title = "";
       this.form.keywords = "";
@@ -554,8 +561,8 @@ export default {
     },
     //3.5 弹出框的城市选择器
     updateFormCityId(value){
-      console.log("城市ID已更新:", value);
-      this.form.city_arr_id = value;
+      //console.log("城市ID已更新:", value);
+      //this.form.city_arr_id = value;
     },
     //3.6 上传图片操作
     beforeAvatarUpload(file) {
@@ -768,7 +775,7 @@ export default {
         }
         //回显id
         //存放城市id
-        this.form.city_arr_id = res.data.city_arr_id;
+        //this.form.city_arr_id = res.data.city_arr_id;
         //当cascaderKey的值改变的时候 级联选择器会重置里面的内容
         //this.cascaderKey += 1;
         //回显网站标题,描述,关键词

+ 9 - 3
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) {