dvcp_v2_webapp/project/sass/apps/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>
                <ai-open-data type="userName"  :openid="item.releaseUserName"></ai-open-data>
              </span>
              <span style="display:flex;width:33%;">
                <b>发布部门：</b>
                <ai-open-data type="departmentName"  :openid="item.unitName"></ai-open-data>
              </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;
            this.$store.dispatch('initOpenData')
          }
        });
      },
      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;
          }
        }
      }

      :deep( .row ){
        margin-top: 10px;

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

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

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

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