dvcp_v2_webapp/packages/wxwork/AppNotification/components/recentNotice.vue

<template>
  <ai-list isTabs>
    <template #content>
      <ai-search-bar>
        <template #left>
          <ai-select
              v-model="search.readStatus"
              @change="getList()"
              placeholder="查阅状态"
              :selectList="dict.getDict('announcementReadStatus')"
          ></ai-select>
          <el-date-picker
              v-model="date"
              @change="search.current = 1,getList()"
              type="daterange"
              size="small"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </template>
        <template #right>
          <el-input v-model="search.title" @keyup.enter.native="getList()" placeholder="标题"
                    size="small" suffix-icon="iconfont iconSearch" clearable
                    @clear="search.current=1,getList()"></el-input>
        </template>
      </ai-search-bar>
      <div class="body">
        <ul v-if="tableData.length">
          <li v-for="(item,index) in tableData" :key="index" @click="goDetail(item)">
            <label>
              <!--              <em v-if="item.readStatus==0"></em>-->
              <div class="status" v-if="item.readStatus==0">未读</div>
              <div class="status read" v-else>已读</div>
              {{ item.title }}</label>
            <el-row type="flex" justify="space-between" class="row">
              <span style="display:flex">
                <b>发布人：</b>
                <span v-text="item.releaseUserName"/>
              </span>
              <span style="display:flex">
                <b>发布部门：</b>
                <span v-text="item.unitName"/>
              </span>
              <span>
                <b>发布日期：</b>
                {{ item.releaseTime }}</span>
            </el-row>
          </li>
        </ul>
        <div class="no-data" style="height:160px;" v-else></div>
      </div>
      <div class="pagination" v-if="tableData.length>0">
        <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            background
            :current-page.sync="search.current"
            :page-sizes="[5, 10, 50, 100,200]"
            :page-size="search.size"
            layout="slot,->,prev, pager, next,sizes,jumper"
            :total="total">
          <div class="page" style="text-align: left">共
            <em>{{ total }}</em>
            条记录
          </div>
        </el-pagination>
      </div>
    </template>
  </ai-list>
</template>

<script>
export default {
  name: "recentNotice",
  props: {
    instance: Function,
    dict: Object,
  },
  data() {
    return {
      search: {
        readStatus: "",
        title: "",
        current: 1,
        size: 10,
      },
      date: [],
      tableData: [],
      total: 0,
    }
  },
  methods: {
    pickerChange(e) {
      console.log(e);
    },
    goDetail(item) {
      this.$emit('goPage', {
        row: item,
        comp: 'detail'
      });
    },
    getList() {
      this.instance.post(`/app/appannouncement/list-latest`, null, {
        params: {
          ...this.search,
          startTime: this.date?.length ? this.date[0] : null,
          endTime: this.date?.length ? this.date[1] : null,
        }
      }).then(res => {
        if (res && res.data) {
          this.tableData = res.data.records;
          this.total = res.data.total;

        }
      });
    },
    handleCurrentChange(val) {
      this.search.current = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.search.size = val;
      this.getList();
    },
  },
  created() {
    this.dict.load("announcementReadStatus").then(_ => this.getList())
  }
}
</script>

<style lang="scss" scoped>
.body {

  ul {
    overflow: hidden;
    padding: 0;
    margin: 0;

    li {
      height: 86px;
      background: #FFFFFF;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 16px 215px 16px 32px;
      margin-top: 10px;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      label {
        display: flex;
        align-items: center;
        position: relative;
        font-size: 16px;
        color: #222222;

        .status {
          width: 40px;
          height: 20px;
          background: #FEF4E5;
          color: #F79300;
          border-radius: 4px;
          font-size: 12px;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 4px;
        }

        .read {
          background: #EEEEEE;
          color: #999999;
        }

        em {
          width: 8px;
          height: 8px;
          background: #ff4422;
          border-radius: 50%;
          position: absolute;
          left: -16px;
          top: 4px;
        }
      }
    }

    ::v-deep .row {
      margin-top: 10px;

      span {
        font-size: 14px;
        color: #222222;

        b {
          font-size: 14px;
          color: #888888;
        }
      }
    }
  }
}

::v-deep .page {
  font-size: 12px;
  color: #555555;

  em {
    font-style: normal;
    color: rgb(34, 102, 255);
  }
}
</style>