portal-vue/src/views/home/Link.vue

<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>外部应用导航</span>
        <el-button class="header-more-btn" type="text" @click="showMore">更多<i class="el-icon-arrow-right" /></el-button>
      </div>
      <div class="link-content">
        <div class="link-box">
          <div class="link-item-box">
            <a v-for="item in tableData" :key="item.id" class="link-item" :href="item.url" target="_blank">
              {{ item.designation }}
            </a>
          </div>
        </div>
        <div class="link-btn">
          <el-button type="text" @click="showAdd">添加</el-button>
        </div>
      </div>
    </el-card>
    <link-add ref="linkAdd" @refreshData="getTablelist" />
    <link-list ref="linkList" />
  </div>
</template>

<script>
import { fetchLinkList } from '@/api/link'
import { hasValidRecords } from '@/utils/convert'

import LinkAdd from './components/LinkAdd'
import LinkList from './components/LinkList'

export default {
  name: 'HomeLink',
  components: {
    LinkAdd,
    LinkList
  },
  data() {
    return {
      // table
      tableData: [],
      loading: false
    }
  },
  created() {
    this.getTablelist()
  },
  methods: {
    // 获取table数据
    getTablelist() {
      this.loading = true
      const params = {
        page: 1,
        size: 6,
        order: 'create_time',
        params: {
          delFlag: 0
        }
      }
      fetchLinkList(params).then(response => {
        this.loading = false
        if (hasValidRecords(response)) {
          this.tableData = response.data.records
        } else {
          this.tableData = []
        }
      }).catch(error => {
        console.log(error)
        this.loading = false
        this.$message({
          type: 'error',
          duration: 0,
          showClose: true,
          message: '获取消息列表出错: ' + error.message
        })
      })
    },
    showAdd() {
      this.$refs['linkAdd'].open()
    },
    showMore() {
      this.$refs['linkList'].open()
    }
  }
}
</script>

<style lang="scss" scoped>
.link-content {
  height: calc(100% - 40px) !important;
  margin: 20px 0;
  background-color: rgba(0,0,0,0.02);
  display: flex;
  align-items: center;
}

.link-box {
  width: calc(100% - 60px);
  height: 100%;
  display: inline-block;
}

.link-item-box {
  height: 100%;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  flex-wrap: wrap;
}

.link-item {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 14px;
  color: rgba(0,0,0,0.85);

  &+.link-item {
    margin-left: 20px;
  }
}

.link-btn {
  display: inline-block;
  width: 60px;
  text-align: center;
}
</style>