fe-manage/src/components/drawers/NoticeHis.vue

<!--发布公告-->
<template>
  <!-- <div class="split"></div> -->
  <div class="noticeconTitle">
    <!-- <div class="notitle"><span class="titlespan">公告</span></div> -->
    <div>公告内容</div>
    <div>发布时间</div>
  </div>
  <div class="noticeContent">
    <div v-for="item in notice" :key="item.id" class="item">
      <div class="itemcontent">{{ item.content }}</div>
      <div class="itemtime">{{ item.pubtime }}</div>
    </div>
  </div>
</template>s
<script>
import { reactive, toRefs, onMounted } from "vue";
import { getTask } from "../../api/indexTaskadd";
import { noticeList } from "../../api/indexNotice";
import emitter from "../../utils/bus";
// import { toDate } from "../../api/method";
export default {
  name: "NoticeHis",
  props: {
    projectId: {
      type: Number,
      default: null,
    },
  },

  setup(props) {
    const state = reactive({
      noticeChecked: true,
      notice: [
        // {
        //   id: 1,
        //   content:
        //     "jwlfwefefweffjwofiewjffwefwowefjwlfwefwefwefweffjwofiewjfowefjwlfwefwefwefweffjwofiewjfowefjwlfwefwefwefweffjwofiewjfowefjwlfwefwefwefweffjwofiewjfowefjwlfwefwefwefweffjwofiewjfowefjwlfwefwefwefweffjwofiewjfowefjwlfwefwefwefwef",
        //   pubtime: "2022-11-7    12:23:00",
        // },
      ],
      projectInfo: {},
    });
    const getTaskInfo = () => {
      getTask({ projectId: props.projectId }).then((res) => {
        console.log("公告获取项目", res.data.data.projectInfo);
        state.projectInfo = res.data.data.projectInfo;
        //下一步是把公告赋值给state.notice
      });
    };
    //获取公告历史
    emitter.on("setNotice", (data) => {
      console.log("setNotice", data);
      getNotice();
    });
    const setNoticeData = (tableData) => {
      let data = tableData;
      let array = [];
      data.map((item) => {
        let obj = {
          id: item.noticeId,
          content: item.notice,
          createId: item.createId,
          pubtime: item.createTime,
        };
        array.push(obj);
      });
      state.notice = array;
    };
    const getNotice = () => {
      let obj = {
        pageNo: 1,
        pageSize: 10,
        projectId: props.projectId,
      };
      noticeList(obj)
        .then((res) => {
          console.log("获取公告列表成功", res.data.data);
          let result = res.data.data;
          if (result.total > 0) {
            setNoticeData(result.rows);
          }
        })
        .catch((err) => {
          console.log("获取公告列表失败", err);
        });
    };
    onMounted(() => {
      getTaskInfo();
      getNotice();
    });
    return {
      ...toRefs(state),
      getTaskInfo,
      getNotice,
      setNoticeData,
    };
  },
};
</script>
<style lang="scss">
.noticeconTitle {
  // margin-left: 32px;
  // margin-right: 32px;
  // padding-top: 20px;
  margin: 20px 32px 0 32px;
  width: 70%;
  // background-color: #bfa;
  display: flex;
  justify-content: space-between;
}
.noticeContent {
  margin-top: 20px;
  margin-left: 32px;
  .item {
    height: 66px;
    width: 74%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 66px;
    .itemcontent {
      width: 500px;
      word-break: break-all;
      word-wrap: break-word;
      // overflow: hidden;
      // text-overflow: ellipsis;
      white-space: wrap;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 22px;
    }
    .itemtime {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 22px;
      display: flex;
      align-items: center;
    }
  }
}
</style>