[update] 首页添加公告面板

src/views/dashboard/Analysis.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="main-box">
-    <a-card :bordered="false">
+    <!--  2023-07变更：首页添加公告面板  -->
+    <a-card
+      :bordered="false"
+      :tab-list="tabListTitle"
+      :active-tab-key="titleKey"
+      @tabChange="key => onTabChange(key, 'titleKey')"
+    >
       <a-table
+        v-if="titleKey === 'message'"
         ref="table"
         size="middle"
         rowKey="id"
@@ -38,6 +45,34 @@
           <a class="readed" v-if="record.readFlag === '1' ">已读</a>
         </span>
       </a-table>
+
+      <a-table
+        v-else-if="titleKey === 'notice'"
+        ref="table"
+        size="middle"
+        rowKey="id"
+        :columns="noticeColumns"
+        :scroll="{x: 1000}"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        @change="handleTableChange"
+        class="j-table-force-nowrap">
+
+        <template slot="text" slot-scope="text">
+          <a-tooltip>
+            <template slot="title">
+              <span v-html="text" class="ellipsis-span"></span>
+            </template>
+            <span v-html="myEllipsis(text,35)"
+                  class="ellipsis-span"></span>
+          </a-tooltip>
+        </template>
+
+        <span slot="action" class="action-span-cell" slot-scope="text, record">
+          <a @click="showNotice(record)" style="margin-right: 8px">查看</a>
+        </span>
+      </a-table>
     </a-card>
     <div class="download">
 
@@ -51,6 +86,7 @@
     </div>
     <show-announcement ref="ShowAnnouncement"></show-announcement>
     <dynamic-notice ref="showDynamNotice" :path="openPath" :formData="formData"/>
+    <show-notice-modal ref="showNoticeModal"></show-notice-modal>
   </div>
   <!--  <div class="index-home">-->
   <!--    <img class="index-bgimg" src="../../assets/indexImgs/index-bg.png"/>-->
@@ -105,13 +141,16 @@ import {Bus} from '@comp/tools/Bus'
 import ShowAnnouncement from '@/components/tools/ShowAnnouncement'
 import {JeroListMixin} from '@/mixins/JeroListMixin'
 import DynamicNotice from '@comp/tools/DynamicNotice'
+// 查看公告详情
+import ShowNoticeModal from './components/ShowNoticeModal'
 
 
 export default {
   name: 'Analysis',
   components: {
     DynamicNotice,
-    ShowAnnouncement
+    ShowAnnouncement,
+    ShowNoticeModal
   },
   mixins: [JeroListMixin],
   data() {
@@ -143,6 +182,30 @@ export default {
           scopedSlots: {customRender: 'action'}
         }
       ],
+      noticeColumns: [
+        {
+          title: '名称',
+          align: 'center',
+          dataIndex: 'noticeName',
+          scopedSlots: {customRender: 'text'}
+        }, {
+          title: '内容',
+          align: 'center',
+          dataIndex: 'noticeContent',
+          scopedSlots: {customRender: 'text'}
+        }, {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          width: 160,
+          scopedSlots: {customRender: 'action'}
+        }
+      ],
+      tabListTitle: [
+        { key: 'message', tab: '消息' },
+        { key: 'notice', tab: '公告'}
+      ],
+      titleKey: 'message',
       url: {
         list: '/sys/sysAnnouncementSend/getCompanyMyAnnouncementSend',
         editCementSend: 'sys/sysAnnouncementSend/editCompanyByAnntIdAndUserId',
@@ -346,6 +409,32 @@ export default {
     },
     syncHeadNotic(anntId) {
       getAction('sys/annountCement/syncNotic', {anntId: anntId})
+    },
+    // 2023-07变更：首页添加公告面板
+    onTabChange(key, type) {
+      this[type] = key
+      this.ipagination = {
+        current: 1,
+          pageSize: 10,
+          pageSizeOptions: ['10', '20', '30', '50', '100'],
+          showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' 共' + total + '条'
+        },
+          showQuickJumper: true,
+          showSizeChanger: true,
+          total: 0
+      }
+      this.dataSource = []
+      if (key === 'message') {
+        this.url.list = '/sys/sysAnnouncementSend/getCompanyMyAnnouncementSend'
+      } else if (key === 'notice') {
+        this.url.list = '/sysNotice/page'
+      }
+      this.loadData(1)
+    },
+    // 查看公告
+    showNotice (record) {
+      this.$refs.showNoticeModal.look(record)
     }
   }
 }

src/views/dashboard/components/ShowNoticeModal.vue

@@ -0,0 +1,134 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-row :gutter="24">
+        <a-col :span="24" class="basic-info-item"><label>公告名称：</label><span>{{ detail.noticeName }}</span>
+        </a-col>
+        <a-col :span="24" class="basic-info-item"><label>公告内容：</label><span>{{ detail.noticeContent }}</span>
+        </a-col>
+        <a-col :span="24" class="basic-info-item"><label>附件：</label><span><a @click="lookFile">查看</a></span>
+        </a-col>
+      </a-row>
+    </a-spin>
+    <template slot="footer">
+      <a-button key="back" @click="handleCancel">关闭</a-button>
+    </template>
+    <under-study-files-modal ref="filesModal" :columns="fileColumns" :isCommittee="false"></under-study-files-modal>
+  </j-modal>
+</template>
+
+<script>
+import UnderStudyFilesModal from '@views/MessagePage/modules/UnderStudyFilesModal'
+import { getFileInfo } from '@api/api'
+export default {
+  name: 'ShowNoticeModal',
+  components: {UnderStudyFilesModal},
+  data () {
+    return {
+      title: '查看',
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      detail: {},
+      fileLoading: false,
+      fileList: [],
+      fileColumns: [
+        {
+          title: '文件名',
+          align: 'center',
+          dataIndex: 'fileName',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '上传时间',
+          align: 'center',
+          dataIndex: 'createTime',
+          scopedSlots: { customRender: 'time' }
+        }, {
+          title: '操作',
+          align: 'center',
+          dataIndex: 'action',
+          width: 160,
+          scopedSlots: { customRender: 'action' }
+        }
+      ]
+    }
+  },
+  methods: {
+    look (record) {
+      this.visible = true
+      this.detail = Object.assign({}, record)
+      this.initFileList(this.detail.noticeFile)
+    },
+    lookFile () {
+      this.$refs.filesModal.title = '附件'
+      this.$refs.filesModal.dataSource = this.fileList
+      this.$refs.filesModal.visible = true
+    },
+    /*
+    * 通过文件id获取文件的相关信息
+    * */
+    getFileInfo(id) {
+      return new Promise(resolve => {
+        let result = {}
+        getFileInfo({ id: id }).then(res => {
+          if (res.success) {
+            result = res.result
+          }
+        }).finally(() => {
+          resolve(result)
+        })
+      })
+    },
+    /*
+    * 获取文件信息
+    * */
+    async initFileList(fileIds) {
+      this.fileLoading = true
+      if (fileIds) {
+        const fileList = []
+        let arr = fileIds.split(',')
+        for (let i = 0; i < arr.length; i++) {
+          let fileObj = {}
+          fileObj = await this.getFileInfo(arr[i])
+          fileList.push({ fileId: fileObj.id, fileName: fileObj.fileName, createTime: fileObj.createTime })
+        }
+        this.fileList = [...fileList]
+      } else {
+        this.fileList = []
+      }
+      this.fileLoading = false
+      console.log(this.fileList)
+    },
+    handleCancel () {
+      this.visible = false
+      this.detail = {}
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.basic-info {
+
+  .ant-col {
+    margin: 5px 0;
+  }
+
+  &-item {
+    display: flex;
+
+    label {
+      flex-shrink: 0;
+      width: 10%;
+      text-align: right;
+    }
+  }
+}
+</style>