cbjsxt-front-master/src/views/personal/notice/index.vue

<template>
  <div class="content-container">
    <!-- 表格 -->
    <div class="table">
      <el-table v-loading="loading" border :data="list" style="width: 100%">
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="noticeTitle"
          label="标题"
          align="center"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="noticeSource"
          label="消息来源"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="noticeType"
          label="类型"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.noticeType == 1 ? '通知' : '公告' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="noticeContent"
          label="内容"
          width="500"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="100"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.status == '0' ? '正常' : '关闭' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="发送时间"
          width="120"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              {{
                scope.row.createTime ? scope.row.createTime.split(' ')[0] : ''
              }}
            </div>
            <div>
              {{
                scope.row.createTime ? scope.row.createTime.split(' ')[1] : ''
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="action"
          label="操作"
          width="120"
          align="center"
          fixed="right"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleView(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt20"
        background
        :current-page="search.pageNum"
        :page-sizes="[50, 100]"
        :page-size="search.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
      <!-- 详情弹窗 -->
      <el-dialog
        title="详情"
        :visible.sync="visible"
        width="60%"
        :close-on-click-modal="false"
      >
        <el-form ref="form" :model="form" label-width="140px" disabled>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="标题：">
                {{ form.noticeTitle }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型：">
                {{ form.noticeType == 1 ? '通知' : '公告' }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="消息来源：">
                {{ form.noticeSource }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发送对象：">
                {{ getUserName(form.sendTarget) }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="状态：">
                {{ form.status == '0' ? '正常' : '关闭' }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发送时间：">
                {{ form.createTime }}
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="发送人：">
                {{ form.createBy }}
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="项目名称：">
                {{ form.projectName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="被监审单位名称：">
                {{ form.enterpriseName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="内容：">
                {{ form.noticeContent }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：">{{ form.remark }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import { getNoticeList, readNotice, getNoticeDetail } from '@/api/home'
  export default {
    name: 'Home',
    data() {
      return {
        search: {
          pageNum: 1,
          pageSize: 50,
        },
        list: [],
        loading: false,
        total: 0,
        form: {},
        visible: false,
      }
    },
    computed: {
      user() {
        return this.$store.state.user.userInfo.user
      },
    },
    mounted() {
      this.getList()
    },
    methods: {
      // 获取更多消息列表
      async getList() {
        let user = this.user
        try {
          this.loading = true
          let params = {
            ...this.search,
            sendTarget: user.userId,
          }
          const res = await getNoticeList(params)
          if (res.value && res.value.records.length > 0) {
            this.list = res.value.records || []
            this.total = res.value.total || 0
          }
        } catch (error) {
          console.log(error)
        } finally {
          this.loading = false
        }
      },
      // 详情
      handleView(row) {
        readNotice({ id: row.noticeId }).then(() => {
          this.getList()
        })
        getNoticeDetail({ id: row.noticeId }).then((res) => {
          if (res.value) {
            this.form = {
              ...res.value,
            }
            this.visible = true
          }
        })
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.search.pageSize = val
        this.getList()
      },
      // 分页当前页改变
      handleCurrentChange(val) {
        this.search.pageNum = val
        this.getList()
      },
      // 获取用户姓名
      getUserName(userId) {
        let user = this.user
        if (user.userId == userId) {
          return user.fullname || user.userName
        }
        return ''
      },
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/costAudit.scss';
</style>