企业公告首页渲染成功

src/assets/less/mytodo.css

@@ -41,17 +41,25 @@
   font-size: 12px;
   margin-top: 4px;
 }
+#home .secondLine .links {
+  background-color: pink;
+  flex-flow: row wrap;
+  box-sizing: border-box;
+}
 #home .secondLine .links button {
+  float: left;
   border-radius: 2px;
   border: none;
   margin-right: 10px;
   background-color: rgba(102, 155, 188, 0.7);
   margin-bottom: 10px;
+  width: calc((100% - 40px) / 4);
+  justify-content: center;
+  align-items: center;
 }
 #home .secondLine .links button a {
   color: white;
   font-size: 18px;
-  padding: 10px 14px;
 }
 #home .secondLine .links button:hover {
   background-color: #003049;

src/assets/less/mytodo.less

@@ -53,16 +53,26 @@
   .secondLine {
     // 友情链接
     .links {
+      // display: flex;
+      background-color: pink;
+      flex-flow: row wrap;
+      // justify-content: space-between;
+      box-sizing: border-box;
       button {
+        float: left;
         border-radius: 2px;
         border: none;
         margin-right: 10px;
         background-color: rgba(102, 155, 188, 0.7);
         margin-bottom: 10px;
+        width: calc((100% - 40px) / 4);
+        // display: flex;
+        justify-content: center;
+        align-items: center;
         a {
           color: white;
           font-size: 18px;
-          padding: 10px 14px;
+          // padding: 2px;
         }
       }
       button:hover {

src/components/page/GlobalNavFooter.vue

@@ -88,7 +88,12 @@
             </a-col>
 
             <a-col :span="20">
-              <a-input-search placeholder="请输入菜单名称" style="width: 180px" @search="searchMenu" />
+              <a-input-search
+                placeholder="请输入菜单名称"
+                style="width: 180px"
+                v-model="searchName"
+                @search="searchMenu"
+              />
             </a-col>
           </a-row>
         </div>
@@ -160,14 +165,39 @@ export default {
             placement: 'left', // 抽屉方向布局
             selectList: [], // 已选功能
             menuALL: {}, // 所有菜单
-            bottomMenuList: [] // 后台接收快捷菜单
+            bottomMenuList: [], // 后台接收快捷菜单
+            searchName: '' // 搜索的菜单名称
         }
     },
     created () {
         this.getFooterNav() // 获取快捷导航
     },
     methods: {
-    // 底部菜单跳转
+    // 搜索菜单
+        searchMenu () {
+            this.getMenuList()
+        },
+        // 所有菜单
+        getMenuList () {
+            this.$nextTick(() => {
+                let token = Vue.ls.get(ACCESS_TOKEN)
+                let params = { token: token, name: this.searchName }
+                console.log('params---->', params.name)
+                getUserPermissionByTokenBottom(params).then(res => {
+                    console.log('所有菜单res---->', res)
+                    if (res.success) {
+                        this.menuALL = res.result.menu
+                    }
+                })
+            })
+        },
+        // 设置快捷
+        showDrawer () {
+            // 每次打开抽屉时，重新渲染所有菜单
+            this.getMenuList()
+            this.visible = true
+        },
+        // 底部菜单跳转
         menuPuth (item) {
             console.log('点击快捷菜单', item)
             this.visible = false
@@ -219,7 +249,6 @@ export default {
 
         // 保存 快捷菜单
         async drawerSave () {
-            // console.log('保存')
             await addBatch({ bottomMenuList: this.selectList }).then(res => {
                 if (res.success) {
                     // 无需其他操作
@@ -239,35 +268,12 @@ export default {
             })
         },
 
-        // 所有菜单
-        async getMenuList () {
-            let token = Vue.ls.get(ACCESS_TOKEN)
-            let params = { token: token }
-            await getUserPermissionByTokenBottom(params).then(res => {
-                // console.log('所有菜单res---->', res)
-                if (res.success) {
-                    this.menuALL = res.result.menu
-                    // console.log('所有菜单res---->', res)
-                }
-            })
-        },
         // 抽屉取消
         openTips () {
             console.log('点击抽屉取消')
             this.visible = false
         },
 
-        // 搜索菜单
-        searchMenu () {
-            console.log('设置搜索条件')
-        },
-        // 设置快捷
-        showDrawer () {
-            // 每次打开抽屉时，加载所有菜单
-            this.getMenuList()
-            this.visible = true
-        },
-
         // 底部导航 显示隐藏
         handleChange () {
             // console.log(this.isShow)

src/views/dashboard/MyToDo.vue

@@ -71,13 +71,13 @@
         </a-card>
       </a-col>
 
-      <!-- 计划  友情链接 -->
-      <div style="height:350">
+      <!-- 计划  友情链接 style="height:350"-->
+      <div>
         <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="7" :style="{ marginBottom: '8px' }">
           <a-row :gutter="24">
             <!-- 我的计划 -->
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :style="{ marginBottom: '8px', paddingRight: 0 }">
-              <a-card title="我的计划" :bordered="false" style="width:100%;">
+              <a-card title="我的计划" :bordered="false" style="width:100%;height:175px">
                 <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :style="{ marginBottom: '8px', paddingRight: 0 }">
                   <p>
                     上月我的计划：
@@ -103,9 +103,13 @@
             </a-col>
             <!-- 友情链接 -->
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :style="{ marginBottom: '8px', paddingRight: 0 }">
-              <a-card title="友情链接" :bordered="false" style="width:100%;" class="links">
+              <a-card title="友情链接" :bordered="false" style="width:100%;height:188px">
                 <template #extra><a href="javascript:void(0);" @click="openMyLinks">更多</a></template>
-                <button><a href="https://www.yonyou.com/" target="_blank">用友</a></button>
+                <div v-for="item in linksList" :key="item.id" class="links">
+                  <button>
+                    <a href="https://www.yonyou.com/" target="_blank">{{ item.name }}</a>
+                  </button>
+                </div>
               </a-card>
             </a-col>
           </a-row>
@@ -196,6 +200,7 @@ export default {
       value: 0,
       annDetail: {}, //公告详情 数据
       annList: [], //公告列表 数据
+      linksList: [], //友情链接 数据
       config: {}, //轮播表配置
       //日历组件 参数
       calendarOptions: {
@@ -342,6 +347,8 @@ export default {
       // params:{xx1:'',xx2:'',......}
       await linksList().then(res => {
         console.log('友情链接后台返回结果', res)
+        this.linksList = res.result.records
+        console.log('this.linksList', this.linksList)
       })
     },