通知公告新增阅读用户&详细

RuoYi

2026-04-14 7a4f61cf5e8d42d24907ccc3d7345d25012d3a55

 ruoyi-ui/src/views/system/notice/index.vue

@@ -1,12 +1,11 @@
<template>

  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="公告标题" prop="noticeTitle">

        <el-input

          v-model="queryParams.noticeTitle"

          placeholder="请输入公告标题"

          clearable

          size="small"

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

@@ -15,22 +14,21 @@
          v-model="queryParams.createBy"

          placeholder="请输入操作人员"

          clearable

          size="small"

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item label="类型" prop="noticeType">

        <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable size="small">

        <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable>

          <el-option

            v-for="dict in typeOptions"

            :key="dict.dictValue"

            :label="dict.dictLabel"

            :value="dict.dictValue"

            v-for="dict in dict.type.sys_notice_type"

            :key="dict.value"

            :label="dict.label"

            :value="dict.value"

          />

        </el-select>

      </el-form-item>

      <el-form-item>

        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

      </el-form-item>

    </el-form>

@@ -39,6 +37,7 @@
      <el-col :span="1.5">

        <el-button

          type="primary"

          plain

          icon="el-icon-plus"

          size="mini"

          @click="handleAdd"

@@ -48,6 +47,7 @@
      <el-col :span="1.5">

        <el-button

          type="success"

          plain

          icon="el-icon-edit"

          size="mini"

          :disabled="single"

@@ -58,6 +58,7 @@
      <el-col :span="1.5">

        <el-button

          type="danger"

          plain

          icon="el-icon-delete"

          size="mini"

          :disabled="multiple"

@@ -65,39 +66,27 @@
          v-hasPermi="['system:notice:remove']"

        >删除</el-button>

      </el-col>

      <div class="top-right-btn">

        <el-tooltip class="item" effect="dark" content="刷新" placement="top">

          <el-button size="mini" circle icon="el-icon-refresh" @click="handleQuery" />

        </el-tooltip>

        <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">

          <el-button size="mini" circle icon="el-icon-search" @click="showSearch=!showSearch" />

        </el-tooltip>

      </div>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

    </el-row>



    <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55" align="center" />

      <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"

        :formatter="typeFormat"

        width="100"

      />

      <el-table-column

        label="状态"

        align="center"

        prop="status"

        :formatter="statusFormat"

        width="100"

      />

      <el-table-column label="公告标题" align="center" :show-overflow-tooltip="true">

        <template slot-scope="scope">

          <a class="link-type" style="cursor:pointer" @click="handleViewData(scope.row)">{{ scope.row.noticeTitle }}</a>

        </template>

      </el-table-column>

      <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="createBy" width="100" />

      <el-table-column label="创建时间" align="center" prop="createTime" width="100">

        <template slot-scope="scope">

@@ -106,6 +95,13 @@
      </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"

            icon="el-icon-user"

            @click="handleReadUsers(scope.row)"

            v-hasPermi="['system:notice:list']"

          >阅读用户</el-button>

          <el-button

            size="mini"

            type="text"

@@ -143,12 +139,12 @@
          </el-col>

          <el-col :span="12">

            <el-form-item label="公告类型" prop="noticeType">

              <el-select v-model="form.noticeType" placeholder="请选择">

              <el-select v-model="form.noticeType" placeholder="请选择公告类型">

                <el-option

                  v-for="dict in typeOptions"

                  :key="dict.dictValue"

                  :label="dict.dictLabel"

                  :value="dict.dictValue"

                  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>

@@ -157,37 +153,40 @@
            <el-form-item label="状态">

              <el-radio-group v-model="form.status">

                <el-radio

                  v-for="dict in statusOptions"

                  :key="dict.dictValue"

                  :label="dict.dictValue"

                >{{dict.dictLabel}}</el-radio>

                  v-for="dict in dict.type.sys_notice_status"

                  :key="dict.value"

                  :label="dict.value"

                >{{dict.label}}</el-radio>

              </el-radio-group>

            </el-form-item>

          </el-col>

          <el-col :span="24">

            <el-form-item label="内容">

              <Editor v-model="form.noticeContent" />

              <editor v-model="form.noticeContent" :min-height="192"/>

            </el-form-item>

          </el-col>

        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer" style="padding-top:20px">

      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="submitForm">确 定</el-button>

        <el-button @click="cancel">取 消</el-button>

      </div>

    </el-dialog>



    <notice-detail-view ref="noticeViewRef" />

    <read-users-dialog ref="readUsersRef" />

  </div>

</template>



<script>

import { listNotice, getNotice, delNotice, addNotice, updateNotice, exportNotice } from "@/api/system/notice";

import Editor from '@/components/Editor';

import NoticeDetailView from "@/layout/components/HeaderNotice/DetailView"

import ReadUsersDialog from "./ReadUsers"

import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice"



export default {

  name: "Notice",

  components: {

    Editor

  },

  components: { NoticeDetailView, ReadUsersDialog },

  dicts: ['sys_notice_status', 'sys_notice_type'],

  data() {

    return {

      // 遮罩层

@@ -208,10 +207,6 @@
      title: "",

      // 是否显示弹出层

      open: false,

      // 类型数据字典

      statusOptions: [],

      // 状态数据字典

      typeOptions: [],

      // 查询参数

      queryParams: {

        pageNum: 1,

@@ -228,42 +223,28 @@
          { required: true, message: "公告标题不能为空", trigger: "blur" }

        ],

        noticeType: [

          { required: true, message: "公告类型不能为空", trigger: "blur" }

          { required: true, message: "公告类型不能为空", trigger: "change" }

        ]

      }

    };

    }

  },

  created() {

    this.getList();

    this.getDicts("sys_notice_status").then(response => {

      this.statusOptions = response.data;

    });

    this.getDicts("sys_notice_type").then(response => {

      this.typeOptions = response.data;

    });

    this.getList()

  },

  methods: {

    /** 查询公告列表 */

    getList() {

      this.loading = true;

      this.loading = true

      listNotice(this.queryParams).then(response => {

        this.noticeList = response.rows;

        this.total = response.total;

        this.loading = false;

      });

    },

    // 公告状态字典翻译

    statusFormat(row, column) {

      return this.selectDictLabel(this.statusOptions, row.status);

    },

    // 公告状态字典翻译

    typeFormat(row, column) {

      return this.selectDictLabel(this.typeOptions, row.noticeType);

        this.noticeList = response.rows

        this.total = response.total

        this.loading = false

      })

    },

    // 取消按钮

    cancel() {

      this.open = false;

      this.reset();

      this.open = false

      this.reset()

    },

    // 表单重置

    reset() {

@@ -273,79 +254,79 @@
        noticeType: undefined,

        noticeContent: undefined,

        status: "0"

      };

      this.resetForm("form");

      }

      this.resetForm("form")

    },

    /** 搜索按钮操作 */

    handleQuery() {

      this.queryParams.pageNum = 1;

      this.getList();

      this.queryParams.pageNum = 1

      this.getList()

    },

    /** 重置按钮操作 */

    resetQuery() {

      this.resetForm("queryForm");

      this.handleQuery();

      this.resetForm("queryForm")

      this.handleQuery()

    },

    // 多选框选中数据

    handleSelectionChange(selection) {

      this.ids = selection.map(item => item.noticeId)

      this.single = selection.length!=1

      this.single = selection.length != 1

      this.multiple = !selection.length

    },

    /** 新增按钮操作 */

    handleAdd() {

      this.reset();

      this.open = true;

      this.title = "添加公告";

      this.reset()

      this.open = true

      this.title = "添加公告"

    },

    /** 修改按钮操作 */

    handleUpdate(row) {

      this.reset();

      this.reset()

      const noticeId = row.noticeId || this.ids

      getNotice(noticeId).then(response => {

        this.form = response.data;

        this.open = true;

        this.title = "修改公告";

      });

        this.form = response.data

        this.open = true

        this.title = "修改公告"

      })

    },

    /** 提交按钮 */

    submitForm: function() {

    submitForm() {

      this.$refs["form"].validate(valid => {

        if (valid) {

          if (this.form.noticeId != undefined) {

            updateNotice(this.form).then(response => {

              if (response.code === 200) {

                this.msgSuccess("修改成功");

                this.open = false;

                this.getList();

              }

            });

            updateNotice(this.form).then(() => {

              this.$modal.msgSuccess("修改成功")

              this.open = false

              this.getList()

            })

          } else {

            addNotice(this.form).then(response => {

              if (response.code === 200) {

                this.msgSuccess("新增成功");

                this.open = false;

                this.getList();

              }

            });

            addNotice(this.form).then(() => {

              this.$modal.msgSuccess("新增成功")

              this.open = false

              this.getList()

            })

          }

        }

      });

      })

    },

    /** 查看公告详情 */

    handleViewData(row) {

      this.$refs.noticeViewRef.open(row)

    },

    /** 查看已读用户 */

    handleReadUsers(row) {

      this.$refs.readUsersRef.open(row)

    },

    /** 删除按钮操作 */

    handleDelete(row) {

      const noticeIds = row.noticeId || this.ids

      this.$confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项?', "警告", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning"

        }).then(function() {

          return delNotice(noticeIds);

        }).then(() => {

          this.getList();

          this.msgSuccess("删除成功");

        }).catch(function() {});

      this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {

        return delNotice(noticeIds)

      }).then(() => {

        this.getList()

        this.$modal.msgSuccess("删除成功")

      }).catch(() => {})

    }

  }

};

</script>
}

</script>