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 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 effect="dark" :content="item.title" placement="top">
                <div class="right ellipsis">{{ item.title || '--' }}</div>
              </el-tooltip>
            </div>
          </div>
        </div>
      </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: "deptContacts",
          dataIndex: "deptContacts",
          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() {
      let data = {
        limit: 5,
        page: 1
      };
      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[0])
          this.list.push(this.list[0])
        },
        err => {
          this.loadingDynamic = false;
          this.$message.error(err)
          console.log('err-----发布动态------->', err);
        }
      );
    },
    // 部门推荐能力
    getApplyByDept() {
      let 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);
        }
      );
    }
  }
}
</script>
<style lang="scss" scoped>
.ellipsis {
  //超出一行省略号
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.bottom-view {
  width: 100%;
  height: 335px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;

  .container {
    background: #fff;
    width: 800px;
    height: 335px;
    padding: 0px 0 20px 10px;
  }
}

.dynamic-box {
  width: 770px;
  height: 335px;
}

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

  .wrapper {
    height: 50px;
    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: 18px;
        color: #464645;
        width: 600px;
      }
    }
  }
}

.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>