HwJyHbMes/hw-ui/src/components/workshopNotice/index.vue

<template>
  <div class="navbar">
    <div class="right-menu">
      <el-tooltip content="历史通知" class="right-menu-item hover-effect">
	        <span
            class="exceptionHandling"
            @click="getNoticeData(true)"
          ><i class="el-icon-message"></i>
	        </span>
      </el-tooltip>
    </div>
    <el-dialog :visible.sync="visible" title="通知" width="50%">
      <el-form ref="form" :model="noticeListData" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="公告标题：" prop="noticeTitle">
              <span>{{ noticeListData.noticeTitle }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告类型" prop="noticeType">
              <el-select v-model="noticeListData.noticeType" placeholder="请选择公告类型" disabled>
                <el-option
                  v-for="dict in dict.type.sys_notice_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容">
              <ReadOnlyEditor v-model="noticeListData.noticeContent" :min-height="192"/>
              <DownloadFile v-model="noticeListData.attachPath" @file-clicked="handleFileClick"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
    </el-dialog>

    <el-dialog :visible.sync="noticeOpen" title="历史通知记录" width="50" append-to-body>
      <el-table v-loading="noticeLoading" :data="historyNoticeList" >
        <el-table-column label="序号" align="center" prop="noticeId" width="100" />
        <el-table-column
          label="公告标题"
          align="center"
          prop="noticeTitle"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="viewContent(scope.row)"
            >查看内容</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
      <el-button @click="noticeOpen = false">关闭</el-button>
      </span>
      <pagination
        v-show="noticeTotal>0"
        :total="noticeTotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getHistoryNoticeList"
      />
    </el-dialog>
  </div>
</template>

<script>
import ReadOnlyEditor from "@/components/ReadOnlyEditor/index.vue";
import DownloadFile from "@/components/DownloadFile/index.vue";
import {updateUserNotice, workshopNoticeList} from "@/api/system/notice";
import {parseTime} from "@/utils/ruoyi";

export default {
  dicts: ['sys_notice_status', 'sys_notice_type'],
  components: {
    ReadOnlyEditor,
    DownloadFile
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    noticeListData: {
      type: Object,
      default: () => [],
    },
  },
  data() {
    return {
      noticeOpen: false,
      noticeLoading: false,
      historyNoticeList: [],
      noticeTotal: 0,
      // 选中数组
      routerIds: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        noticeType: '1'
      },
    };
  },
  methods: {
    handleFileClick(fileUrl) {
      console.log('已下载文件:', fileUrl);
      let userNotice = this.noticeListData.sysUserNoticeList[0];
      userNotice.downloadStatus = '1'
      userNotice.downloadTime = parseTime(new Date());
      userNotice.checkTime = null;
      updateUserNotice(userNotice).then(res => {
      })
    },
    /** 报警列表 */
    getNoticeData(open) {
      this.noticeOpen = open;
      this.noticeLoading = true;
      this.getHistoryNoticeList();
    },
    getHistoryNoticeList() {
      workshopNoticeList(this.queryParams).then((response) => {
        this.historyNoticeList = response.rows;
        this.noticeTotal = response.total;
        this.noticeLoading = false;
      });
    },
    viewContent(row){
      this.noticeListData = row;
      this.visible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.right-menu {
  float: right;
  height: 100%;
  line-height: 50px;

  &:focus {
    outline: none;
  }

  .right-menu-item {
    .right-menu {
      float: right;
      height: 100%;
      line-height: 50px;

      &:focus {
        outline: none;
      }

      .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        color: #5a5e66;
        vertical-align: text-bottom;

        &.hover-effect {
          cursor: pointer;
          transition: background .3s;

          &:hover {
            background: rgba(0, 0, 0, .025)
          }
        }
      }

      .avatar-container {
        margin-right: 30px;

        .avatar-wrapper {
          margin-top: 5px;
          position: relative;

          .user-avatar {
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 10px;
          }

          .el-icon-caret-bottom {
            cursor: pointer;
            position: absolute;
            right: -20px;
            top: 25px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>