新增查看更多公告页面

src/views/system/notice/seeMore.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :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>
+<!--      <el-form-item label="操作人员" prop="createBy">-->
+<!--        <el-input-->
+<!--          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-option
+            v-for="dict in typeOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="cyan" 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>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="noticeList">
+      <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" prop="createBy" width="100" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="100">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</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"
+            icon="el-icon-view"
+            @click="handleView(scope.row)"
+          >查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+<!--    查看详细内容-->
+    <el-dialog
+      :visible.sync="open"
+      :close-on-click-modal="false"
+      width="780px"
+      append-to-body
+      :title="title"
+    >
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="公告标题" prop="noticeTitle">
+              <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公告类型" prop="noticeType">
+              <el-select v-model="form.noticeType" placeholder="请选择" disabled>
+                <el-option
+                  v-for="dict in typeOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="内容">
+              <div class="notice-content" v-html="form.noticeContent"></div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="open = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listNotice, getNotice } from "@/api/system/notice";
+
+
+export default {
+  name: "seeMore",
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        noticeTitle: undefined,
+        createBy: undefined,
+        status: undefined
+      },
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 公告表格数据
+      noticeList: [],
+      // 类型数据字典
+      statusOptions: [],
+      // 状态数据字典
+      typeOptions: [],
+      // 遮罩层
+      loading: true,
+      // 主表内容
+      form: {},
+      open: false,
+      title: '',
+    }
+  },
+  created() {
+    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;
+      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);
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        noticeId: undefined,
+        noticeTitle: undefined,
+        noticeType: undefined,
+        noticeContent: undefined,
+        status: "0"
+      };
+    },
+    /** 查看按钮操作 */
+    handleView(row) {
+      this.reset();
+      const noticeId = row.noticeId || this.ids
+      getNotice(noticeId).then(response => {
+        this.form = response.data;
+        this.title = "查看公告";
+        this.open = true;
+      });
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.notice-content {
+  width: 100%;
+  border: 1px solid #cec9c9;
+  border-radius: 5px;
+  padding: 0px 5px;
+}
+.notice-content p {
+  width: 100%;
+}
+/deep/ .notice-content p img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100% !important;
+}
+</style>