update 首页

src/views/dashboard/modules/QuickEnterCard.vue

@@ -2,38 +2,83 @@
   <a-card :bordered="false">
     <a-spin :spinning="loading">
       <div class="top-wrapper">
-        <p class="left-p"><i class="iconfont icon-rukou left-icon"></i>快捷入口</p>
-        <p class="right-p" @click="menuManage"><i class="iconfont icon-settings"></i>菜单管理</p>
+        <p class="left-p"><i class="iconfont icon-rukou left-icon"></i>{{ this.$t('dashboard.quickEnter.quickEnter') }}</p>
+        <p class="right-p" @click="menuManage"><i class="iconfont icon-settings"></i>{{ this.$t('dashboard.quickEnter.menuManage') }}</p>
       </div>
       <div class="content-wrapper">
-        <div class="content-div" v-for="item in dataSource" :key="item.id">
-          <i class="iconfont" :class="'icon-' + item.iconName"></i>
-          <p>{{ item.name }}</p>
+        <div class="content-div" v-for="item in dataSource" :key="item.id" @click="handleTo(item.url)">
+          <img class="icon-img" :src="item.src" alt=''>
+          <!--<i class="iconfont" :class="'icon-' + 'shengchanliuchengguanli'"></i>-->
+          <a-tooltip placement="top">
+            <template slot="title">{{item.name}}</template>
+            <p>{{ item.name }}</p>
+          </a-tooltip>
         </div>
-        <div class="plus-div">
-          <a-icon type="plus" />
+        <div class="plus-div" @click="menuManage" v-if="dataSource.length < 9">
+          <a-icon type="plus" class="text-primary-color" />
         </div>
       </div>
     </a-spin>
+    <!-- 菜单管理 -->
+    <menu-manage-modal ref="menuManageModal" @ok="loadData"/>
   </a-card>
 </template>
 
 <script>
+import MenuManageModal from '@views/dashboard/modules/MenuManageModal'
+import { getQuickEntryModuleList } from '@api/dashboard'
 export default {
   name: 'QuickEnterCard',
+  components: { MenuManageModal },
   data () {
     return {
       loading: false,
       dataSource: [
-        { iconName: 'shengchanliuchengguanli', name: '新建流程' },
-        { iconName: 'a-moxingkuaisuchaifen1', name: '标准拆分' },
-        { iconName: 'shoucang', name: '我的收藏' },
-        { iconName: 'a-fagui1', name: '国内法规' },
-        { iconName: 'a-moxingkuaisuchaifen1', name: '征求意见' },
-        { iconName: 'jiaoseguanli', name: '角色管理' },
-        { iconName: 'wenda1', name: '我的问答' }
+        // { iconName: 'shengchanliuchengguanli', name: '新建流程' },
+        // { iconName: 'a-moxingkuaisuchaifen1', name: '标准拆分' },
+        // { iconName: 'shoucang', name: '我的收藏' },
+        // { iconName: 'a-fagui1', name: '国内法规' },
+        // { iconName: 'a-moxingkuaisuchaifen1', name: '征求意见' },
+        // { iconName: 'jiaoseguanli', name: '角色管理' },
+        // { iconName: 'wenda1', name: '我的问答' }
       ]
     }
+  },
+  created () {
+    this.loadData()
+  },
+  methods: {
+    // 获取快捷入口
+    loadData () {
+      this.loading = true
+      getQuickEntryModuleList().then(res => {
+        if (res.success) {
+          const data = res.result || []
+          this.dataSource = data.map(item => {
+            try {
+              item.src = require(`@/assets/image/dashboard/${item.name}.png`)
+            } catch (e) {
+              console.log(e)
+              item.src = ''
+            }
+            return item
+          })
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 点击快捷入口,跳转对应页面
+    handleTo (path) {
+      this.$router.push({ path })
+    },
+    // 菜单管理
+    menuManage () {
+      const ids = this.dataSource.map(item => item.id)
+      this.$refs.menuManageModal.show(ids)
+    }
   }
 }
 </script>
@@ -45,13 +90,14 @@ export default {
   //flex-wrap: wrap;
   //justify-content: space-between;
   display: grid;
-  grid-template-columns: repeat(auto-fill, 100px);
+  grid-template-columns: repeat(auto-fill, calc((100% - 20px) / 3));
   grid-gap: 10px;
   grid-auto-flow: row;
   margin-top: 10px;
   & > div {
-    width: 100px;
-    height: 100px;
+    //width: 100px;
+    //height: 100px;
+    min-height: 50px;
     border-radius: 8px 8px 8px 8px;
     display: flex;
     flex-direction: column;
@@ -59,21 +105,33 @@ export default {
     align-items: center;
   }
   .content-div {
+    // （总高度 - 内边距 - 标题 - 上下边距） / 3
+    height: calc((306px - 48px - 31px - 20px) / 3);
+    cursor: pointer;
     background: rgba(213,44,38,0.08);
+    .icon-img {
+      width: 27px;
+    }
     .iconfont {
       font-size: 27px;
       color: @primary-color;
     }
     p {
+      width: 90%;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       margin-bottom: 0;
       font-size: 16px;
-      font-family: PingFang SC, PingFang SC;
+      font-family: PingFang SC, PingFang SC, sans-serif;
       font-weight: 400;
       color: #000000;
       line-height: 28px;
     }
   }
   .plus-div {
+    cursor: pointer;
     border: 1px dashed @primary-color;
     box-sizing: border-box;
     .anticon {
@@ -81,4 +139,17 @@ export default {
     }
   }
 }
+.text-primary-color {
+  color: @primary-color
+}
+
+@media screen and (max-width: 1366px) {
+  .content-wrapper {
+    .content-div {
+      p {
+        font-size: 14px;
+      }
+    }
+  }
+}
 </style>