hi-ucs/back/src/views/modules/workBench/components/bottom-view.vue

<template>
  <div class="bottom-view">
    <!-- 部门发布动态 -->
    <div class="left container">
      <content-title :title="title.dynamic"></content-title>
      <div v-if="(list.length>0)" class="dynamic-box" v-loading="loadingDynamic">
        <div    class="dynamicView" v-for="(item, index) in list" :key="index" :number="index + 1" :item="item">
          <div class="wrapper">
            <div class="content">
              <div class="left">{{ item.createDate }}</div>
              <el-tooltip popper-class="testTooltip" effect="dark" :content="item.title" placement="top">
                <div class="right ellipsis">{{ item.title || '--' }}</div>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="more" @click="jumpTo">查看更多 ></div>
      </div>
      <div
      class="no-data"
      v-else
      style="display: flex; align-items: center; justify-content: center"
    >
      暂无数据
    </div>

    </div>
    <!-- 部门推荐能力 -->
    <div class="right container">
      <content-title :title="title.recommend"></content-title>
      <div class="recommendView">
        <a-table :dataSource="tableData" :columns="columns" bordered :pagination="false" :scroll="maxSize"
          :loading="loadingTable" size="small" />
      </div>
    </div>
  </div>
</template>
<script>
import contentTitle from './content-title'
import * as Apis from '../api'
export default {
  components: {
    contentTitle
  },
  data () {
    return {
      title: { dynamic: '部门发布动态', recommend: '部门推荐能力' },
      list: [],
      columns: [
        {
          title: '名称',
          key: 'name',
          dataIndex: 'name',
          width: 250
        },
        {
          title: '类型',
          key: 'type',
          dataIndex: 'type',
          width: 76
        },
        {
          title: '单位',
          key: 'deptName',
          dataIndex: 'deptName',
          width: 144
        },
        {
          title: '时间',
          key: 'createDate',
          dataIndex: 'createDate',
          width: 153
        },
        {
          title: '当前申请数',
          key: 'applyCount',
          dataIndex: 'applyCount',
          width: 145
        }
      ],
      tableData: [],
      maxSize: { y: 195 },
      loadingDynamic: false,
      loadingTable: false
    }
  },
  mounted () {
    this.getResourceByDept()
    this.getApplyByDept()
  },
  methods: {
    // 发布动态
    getResourceByDept () {
      const data = {
        limit: 5,
        page: 1,
        name: ''
      }
      this.loadingDynamic = true
      Apis.getResourceByDept(
        data,
        res => {
          this.loadingDynamic = false
          if (res.data.code !== 0) {
            return this.$message.error(res.data.msg)
          }
          console.log('res.data----发布动态-------->', res.data)
          this.list = res.data.data.list || []
          // this.list.push({})
          // this.list.push({})
        },
        err => {
          this.loadingDynamic = false
          this.$message.error(err)
          console.log('err-----发布动态------->', err)
        }
      )
    },
    // 部门推荐能力
    getApplyByDept () {
      const data = {
        limit: 5,
        page: 1
      }
      this.loadingTable = true
      Apis.getApplyByDept(
        data,
        res => {
          this.loadingTable = false
          if (res.data.code !== 0) {
            return this.$message.error(res.data.msg)
          }
          console.log('res.data------部门推荐能力------>', res.data)
          this.tableData = res.data.data.list || []
        },
        err => {
          this.loadingTable = false
          this.$message.error(err)
          console.log('err', err)
        }
      )
    },
    jumpTo () {
      this.$router.push({
        path: 'activiti-my-work-dynamics'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.ellipsis {
  //超出一行省略号
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

.bottom-view {
  width: 100%;
  height: 335px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  .no-data {
    width: 800px;
    height: 335px;
    line-height: 335px;
    font-size: 16px;
    color: #212121;
    text-align: center;
}
  .container {
    background: #fff;
    width: 800px;
    height: 335px;
    padding: 0px 0 0 10px;
    box-sizing: border-box;
  }
}

.dynamic-box {
  width: 770px;
  height: 285px;
  position: relative;
}

.dynamicView {
  cursor: pointer;
  width: 770px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;

  .wrapper {
    height: 45px;
    width: 770px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-image: url("../images/bgIndex.png");
    background-repeat: no-repeat;
    background-color: #f4f5f8;
    border-radius: 1px;

    .content {
      width: 760px;
      padding-right: 20px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-left: 12px;
      font-size: 16px;

      .left {
        width: 159px;
        color: #2b2b2b;
        font-size: 14px;
      }

      .right {
        font-size: 16px;
        color: #464645;
        width: 600px;
      }
    }
  }
}

.more {
  cursor: pointer;
  text-align: right;
  padding-top: 4px;
  display: inline-block;
  width: 100%;
  color: #2b2b2b;
  font-size: 14px;
  position: absolute;
  right: 15px;
  bottom: 10px;
}

.recommendView {
  cursor: pointer;
  width: 770px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

::v-deep .ant-table-thead {
  background-color: #f4f5f8;
}
</style>
<style lang="scss">
.testTooltip {
  width: 670px !important;
}
</style>