我的消息开发

src/api/api.js

@@ -91,6 +91,8 @@ const checkRuleByCode = (params) => getAction('/sys/checkRule/checkByCode', para
 //加载我的通告信息
 const getUserNoticeInfo= (params)=>getAction('/sys/sysAnnouncementSend/getMyAnnouncementSend',params)
 const getTransitURL = url => `/sys/common/transitRESTful?url=${encodeURIComponent(url)}`
+// 通过文件的id获取文件的相应信息
+const getFileInfo = (params) => getAction('/sys/oss/file/queryById', params)
 // 中转HTTP请求
 export const transitRESTful = {
   get: (url, parameter) => getAction(getTransitURL(url), parameter),
@@ -153,7 +155,8 @@ export {
   saveDeptRolePermission,
   queryMyDepartTreeList,
   getUserNoticeInfo,
-  getDictItemsFromCache
+  getDictItemsFromCache,
+  getFileInfo
 }
 
 

src/api/incomePaymentsApi.js

@@ -0,0 +1,13 @@
+import {getAction} from '@api/manage'
+// 普通项目管理-通过项目id查询其他的信息
+const queryCommonProjectById = (param) => getAction('/project/payCommonProject/queryById', param)
+// 通过会议id获取会议的详细信息
+const getMeetInfoById = (params) => getAction('/meeting/payMeeting/queryById',params)
+// 通过id获取参会人详细信息
+const getSingUpUserInfo = (params) => getAction('/meeting/payMeetingSituation/queryById',params)
+
+export {
+  queryCommonProjectById,
+  getMeetInfoById,
+  getSingUpUserInfo
+}

src/api/manage.js

@@ -33,7 +33,7 @@ export function httpAction(url,parameter,method) {
 export function putAction(url,parameter) {
   return axios({
     url: url,
-    method:'put',
+    method:'post',
     data: parameter
   })
 }

src/assets/less/common.less

@@ -63,3 +63,42 @@
 .ant-table-tbody .ant-table-row td .action-span-cell a + a{
   padding-left: 20px;
 }
+.primary-color{
+  color: #069f99;
+  cursor: pointer;
+}
+
+// 标题及标题前的圆点
+.part-title {
+  padding: 10px 0;
+  font-size: 16px;
+  font-family: PingFang SC, PingFang SC-Bold;
+  font-weight: 700;
+  text-align: left;
+  color: #333333;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  &-text {
+    padding-left: 20px;
+  }
+
+  &-text::before {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 10px;
+    background: #069f99;
+    border-radius: 5px;
+  }
+}
+
+.reset-button {
+  color: #08B6AF;
+  background: rgba(8,182,175,0.10);
+  border: 1px solid #08b6af;
+}

src/components/jero/JImageUpload.vue

@@ -33,7 +33,8 @@
   import Vue from 'vue'
   import { ACCESS_TOKEN } from '@/store/mutation-types'
   import { getFileAccessHttpUrl } from '@/api/manage'
-  // eslint-disable-next-line no-undef
+  import {getFileInfo} from '@api/api'
+  // eslint-disable-next-line
   const Base64 = require('js-base64').Base64
 
   const uidGenerator=()=>{
@@ -67,6 +68,11 @@
         type:[String,Array],
         required:false
       },
+      /* 返回文件id*/
+      returnId:{
+        type:Boolean,
+        default:false
+      },
       disabled:{
         type:Boolean,
         required:false,
@@ -88,7 +94,6 @@
     computed: {
       //透传给下级组件的事件，需要排除本组件使用的change事件
       childListeners() {
-        // const vm = this
         let result = Object.assign({},
           this.$listeners,
         )
@@ -98,7 +103,8 @@
     },
     watch:{
       value: {
-        handler(val) {
+        handler() {
+          let val = this.value
           if (val instanceof Array) {
             this.initFileList(val.join(','))
           } else {
@@ -117,21 +123,57 @@
       this.headers = {'X-Access-Token':token}
     },
     methods:{
-      initFileList(paths){
+      async initFileList(paths){
         if(!paths || paths.length === 0){
           this.fileList = []
           return
         }
         this.picUrl = true
         let arr = paths.split(',')
+        let fileList = []
         for(var a=0;a<arr.length;a++){
-          this.fileList.forEach((item)=>{
-            if (item.url === arr[a]){
-              item.uid = uidGenerator()
-              item.response.status = 'history'
+          // 通过文件id获取文件信息
+          const fileObj = await this.getFileInfo(arr[a])
+          // 获取图片路径
+          const url = getFileAccessHttpUrl(fileObj.url)
+          fileList.push({
+            uid: uidGenerator(),
+            name: (fileObj || {}).fileName,
+            status: 'done',
+            url: url,
+            response: {
+              status: 'history',
+              message: arr[a],
+              result: fileObj
             }
           })
         }
+        this.fileList = [...fileList]
+        this.fileList.forEach((item)=>{
+          if(this.returnId){
+            item.url = this.getImgUrl(item.response.result.id,item.name)
+          }
+          if (item.url === arr[a]){
+            item.uid = uidGenerator()
+            item.response.status = 'history'
+          }
+        })
+      },
+      /**
+       * 通过文件的id获取文件的相关信息
+       * @param id
+       */
+      getFileInfo(id) {
+        return new Promise(resolve => {
+          let result = {}
+          getFileInfo({id: id}).then(res => {
+            if (res.success) {
+              result = res.result
+            }
+          }).finally(() => {
+            resolve(result)
+          })
+        })
       },
       beforeUpload: function(file){
         var fileType = file.type
@@ -153,7 +195,11 @@
             this.picUrl = true
             fileList = fileList.map((file) => {
               if (file.response) {
-                file.url = `${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.response.result.fileName}`
+                if(this.returnId){
+                  file.url = `${file.response.result.id}`
+                }else {
+                  file.url = `${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.response.result.fileName}`
+                }
               }
               return file
             })
@@ -180,6 +226,7 @@
       getAvatarView(){
         if(this.fileList.length>0){
           let url = this.fileList[this.fileList.length-1].url
+          // console.log( getFileAccessHttpUrl(url),'url')
           return getFileAccessHttpUrl(url)
         }
       },
@@ -208,8 +255,7 @@
         }
         this.$emit('change', path)
       },
-      // eslint-disable-next-line no-unused-vars
-      handleDelete(file){
+      handleDelete(){
         //如有需要新增 删除逻辑
       },
       handleCancel() {
@@ -219,6 +265,16 @@
       close () {
 
       },
+      getImgUrl(id,name){
+        return `${id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${name}`
+      },
+      getFileInfos(ids){
+       return new Promise(resolve => {
+         getFileInfo({id:ids}).then(res => {
+           resolve(res.result)
+         })
+       })
+      }
     },
     model: {
       prop: 'value',

src/components/jero/PreviewFile.vue

@@ -0,0 +1,104 @@
+<template>
+  <!--  父组件的文件id如果是异步获取的 需要加上v-if判断-->
+<div style="display: inline-block">
+  <span v-for="(item) of fileList" :key="item.id">{{ item.name +'  ' }}
+    <span class="m-l-4 color-blue" @click="handleDownLoad(item)">下载</span> <span class="m-l-4 color-blue" @click="handlePreview(item)">查看</span>
+  </span>
+</div>
+</template>
+
+<script>
+import Vue from 'vue'
+import {ACCESS_TOKEN} from '@/store/mutation-types'
+import {getFileInfo} from '@/api/api'
+import {downloadFile} from '@api/manage'
+// eslint-disable-next-line
+const Base64 = require('js-base64').Base64
+
+
+export default {
+  name: 'PreviewFile',
+  props: {
+    /*
+    * 文件id
+    * */
+    fileId: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {
+      fileInfo: {},
+      fileList: [],
+    }
+  },
+  mounted() {
+    this.getFileInfo(this.fileId)
+  },
+  watch: {
+    fileId: {
+      immediate: true,
+      handler(val) {
+        this.initFileList(val)
+      }
+    }
+  },
+  methods: {
+    /*
+    * 通过文件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) {
+      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({id: fileObj.id, name: fileObj.fileName})
+        }
+        this.fileList = [...fileList]
+      }else {
+        this.fileList = []
+      }
+    },
+    handleDownLoad(file){
+      console.log(file)
+      downloadFile(`sys/common/download/${file.id}`, file.name)
+    },
+    handlePreview(file) {
+      if (file && file.id) {
+        const fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
+        let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
+        // let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
+        window.open(url)
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+.color-blue {
+  color: #069f99 !important;
+  cursor: pointer;
+}
+.m-l-4 {
+  margin-left: 4px;
+}
+</style>

src/components/tools/Bus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export const Bus = new Vue()

src/components/tools/HeaderNotice.vue

@@ -4,66 +4,29 @@
     placement="bottomRight"
     :autoAdjustOverflow="true"
     :arrowPointAtCenter="true"
+    :visible="hovered"
     overlayClassName="header-notice-wrapper"
     @visibleChange="handleHoverChange"
     :overlayStyle="{ width: '300px', top: '50px' }">
     <template slot="content">
       <a-spin :spinning="loadding">
-        <a-tabs>
-          <a-tab-pane :tab="msg1Title" key="1">
-            <!--<a-list>
-              <a-list-item>
-                <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta title="你推荐的 IT大牛 已通过第三轮面试" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
-                </a-list-item-meta>
-              </a-list-item>
-            </a-list>-->
-            <a-list>
-              <a-list-item :key="index" v-for="(record, index) in announcement1">
-                <div style="margin-left: 5%;width: 80%">
-                  <p><a @click="showAnnouncement(record)">{{ record.titile }}</a></p>
-                  <p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p>
-                </div>
-                <div style="text-align: right">
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag>
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag>
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag>
-                </div>
-              </a-list-item>
-              <div style="margin-top: 5px;text-align: center">
-                <a-button @click="toMyAnnouncement()" type="dashed" block>查看更多</a-button>
-              </div>
-            </a-list>
-          </a-tab-pane>
-          <a-tab-pane :tab="msg2Title" key="2">
-            <a-list>
-              <a-list-item :key="index" v-for="(record, index) in announcement2">
-                <div style="margin-left: 5%;width: 80%">
-                  <p><a @click="showAnnouncement(record)">{{ record.titile }}</a></p>
-                  <p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p>
-                </div>
-                <div style="text-align: right">
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag>
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag>
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag>
-                </div>
-              </a-list-item>
-              <div style="margin-top: 5px;text-align: center">
-                <a-button @click="toMyAnnouncement()" type="dashed" block>查看更多</a-button>
-              </div>
-            </a-list>
-          </a-tab-pane>
-        </a-tabs>
+        <div class="notice-title">系统通知</div>
+        <a-list>
+          <a-list-item :key="index" v-for="(record, index) in announcement2">
+            <div style="margin-left: 5%;width: 80%">
+              <p><a @click="showAnnouncement(record)">{{ record.titile }}</a></p>
+              <p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p>
+            </div>
+            <div style="text-align: right">
+              <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag>
+              <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag>
+              <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag>
+            </div>
+          </a-list-item>
+          <div style="margin-top: 5px;text-align: center">
+            <a-button @click="toMyAnnouncement()" type="dashed" block>查看更多</a-button>
+          </div>
+        </a-list>
       </a-spin>
     </template>
     <span @click="fetchNotice" class="header-notice">
@@ -81,6 +44,7 @@
   // import ShowAnnouncement from './ShowAnnouncement'
   import store from '@/store/'
   import DynamicNotice from './DynamicNotice'
+  import {Bus} from '@comp/tools/Bus'
 
 
   export default {
@@ -117,15 +81,22 @@
         return parseInt(this.msg1Count)+parseInt(this.msg2Count)
       }
     },
+    created() {
+      Bus.$on('notice-change', () => {
+        // console.log('notice-change')
+        this.loadData()
+      })
+    },
+    destroyed: function () { // 离开页面生命周期函数
+      this.websocketOnclose()
+      Bus.$off('notice-change')
+    },
     mounted() {
       this.loadData()
       //this.timerFun();
       this.initWebSocket()
      // this.heartCheckFun();
     },
-    destroyed: function () { // 离开页面生命周期函数
-      this.websocketOnclose()
-    },
     methods: {
       timerFun() {
         this.stopTimer = false
@@ -174,21 +145,32 @@
         putAction(this.url.editCementSend,{anntId:record.id}).then((res)=>{
           if(res.success){
             this.loadData()
+            Bus.$emit('header-notice-change')
           }
         })
         this.hovered = false
+        const param = JSON.parse(record.busId)
         if(record.openType==='component'){
           this.openPath = record.openPage
-          this.formData = {id:record.busId}
+          this.formData = param
           this.$refs.showDynamNotice.detail(record.openPage)
-        }else{
-          // this.$refs.ShowAnnouncement.detail(record);
+        }else if(record.openType === 'url') {
+          console.log(record.openPage,'url')
+          const param = JSON.parse(record.busId)
+          // 如果是url 跳转页面
+          this.$router.push({
+            path:record.openPage,
+            query:param
+          })
+        }else {
+          this.$refs.ShowAnnouncement.detail(record)
         }
       },
       toMyAnnouncement(){
         this.$router.push({
           path: '/system/userAnnouncementList'
         })
+        this.handleHoverChange(false)
       },
       modalFormOk(){
       },
@@ -334,4 +316,12 @@
       vertical-align: initial;
     }
   }
+  .notice-title {
+    text-align: center;
+    padding: 3px 0;
+    border-bottom: 1px solid #e8e8e8;
+    letter-spacing: 1px;
+  }
+
 </style>
+

src/components/tools/JDate.vue

@@ -0,0 +1,101 @@
+<template>
+  <a-date-picker
+    :disabledDate="disabledDate"
+    :disabled="disabled || readOnly"
+    :placeholder="placeholder"
+    @change="handleDateChange"
+    :value="momVal"
+    :showTime="showTime"
+    :format="dateFormat"
+    :mode="mode"
+    :getCalendarContainer="getCalendarContainer"
+  />
+</template>
+<script>
+import moment from 'moment'
+export default {
+  name: 'JDate',
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+      required: false
+    },
+    value: {
+      type: String,
+      required: false
+    },
+    disabledDate: {
+      type: Function
+    },
+    dateFormat: {
+      type: String,
+      default: 'YYYY-MM-DD',
+      required: false
+    },
+    // 此属性可以被废弃了
+    triggerChange: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    readOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    showTime: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    getCalendarContainer: {
+      type: Function,
+      default: (node) => node.parentNode
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: 'date'
+    }
+  },
+  data() {
+    const dateStr = this.value
+    return {
+      decorator: '',
+      momVal: !dateStr ? null : moment(dateStr, this.dateFormat)
+    }
+  },
+  watch: {
+    value(val) {
+      if (!val) {
+        this.momVal = null
+      } else {
+        this.momVal = moment(val, this.dateFormat)
+      }
+    }
+  },
+  methods: {
+    moment,
+    handleDateChange(mom, dateStr) {
+      console.log('handleDateChange----', dateStr)
+      this.$emit('change', dateStr)
+    }
+  },
+  // 2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+<style lang="less" scoped>
+  /deep/ .ant-input {
+    padding: 4px 6px;
+  }
+</style>

src/mixins/RangeDateMixin.js

@@ -0,0 +1,37 @@
+/* 查询条件有时间范围的 混入方法 */
+import moment from 'moment'
+export const RangeDateMixin = {
+  data() {
+    return {
+      dateKeyObj: {
+        beginKey: 'startTime',
+        endKey: 'endTime'
+      },
+      rangeDateFormat: {
+        begin: 'YYYY-MM-DD HH:mm:ss',
+        end: 'YYYY-MM-DD HH:mm:ss'
+      }
+    }
+  },
+
+  methods: {
+    disabledStartDate(startValue) {
+      const endValue = this.queryParam[this.dateKeyObj.endKey] && moment(this.queryParam[this.dateKeyObj.endKey], this.rangeDateFormat.end)
+      if (!startValue || !endValue) {
+        return false
+      }
+      return startValue.valueOf() > endValue.valueOf()
+    },
+
+    disabledEndDate(endValue) {
+      const startValue = this.queryParam[this.dateKeyObj.beginKey] && moment(this.queryParam[this.dateKeyObj.beginKey], this.rangeDateFormat.begin)
+      if (!endValue || !startValue) {
+        return false
+      }
+      return startValue.valueOf() > endValue.valueOf()
+    },
+    disabledDateBeforeToday(current) {
+      return current < moment().subtract(1, 'day') // 当天之前的不可选，不包括当天
+    }
+  }
+}

src/views/MessagePage/MeetingDetailModal.vue

@@ -0,0 +1,289 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <!--会议信息begin-->
+    <section class="base-info">
+      <h3 class="title">会议信息</h3>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>会议名称：</label>
+          <span><j-ellipsis :value="model.meetingName" :length="20"></j-ellipsis></span>
+        </a-col>
+        <a-col :span="12">
+          <label>会议类型：</label>
+          <span><j-ellipsis :value="generateMeetingType(model.meetingType)" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>召开时间：</label>
+          <span>{{model.startTime + '~' + model.endTime}}</span>
+        </a-col>
+        <a-col :span="12">
+          <label>年份：</label>
+          <span><j-ellipsis :value="model.particularYear" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>召开地点：</label>
+          <span><j-ellipsis :value="model.venue + '/' + model.address"></j-ellipsis></span>
+        </a-col>
+        <a-col :span="12">
+          <label>负责人：</label>
+          <span><j-ellipsis :value="model.directorName" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>报名截止时间：</label>
+          <span><j-ellipsis :value="model.registerDeadline" :length="20"></j-ellipsis></span>
+        </a-col>
+        <a-col :span="12">
+          <label>会议通知：</label>
+          <span><preview-file :file-id="model.meetingFiles"></preview-file></span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <label>会议内容：</label>
+          <span><j-ellipsis :value="model.meetingContent" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+    </section>
+    <!--会议信息end-->
+    <!--报名信息begin-->
+    <section class="base-info">
+      <h3 class="title">报名信息</h3>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>参会单位：</label>
+          <span><j-ellipsis :value="model.principalName" :length="20"></j-ellipsis></span>
+        </a-col>
+
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>参会人：</label>
+          <span><j-ellipsis :value="model.principalName" :length="20"></j-ellipsis></span>
+        </a-col>
+        <a-col :span="12">
+          <label>身份：</label>
+          <span><j-ellipsis :value="model.receivableAmount" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>性别：</label>
+          <span><j-ellipsis :value="model.remarks" :length="20"></j-ellipsis></span>
+        </a-col>
+        <a-col :span="12">
+          <label>手机号：</label>
+          <span><j-ellipsis :value="model.remarks" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>付款方式：</label>
+          <span><j-ellipsis :value="model.remarks" :length="20"></j-ellipsis></span>
+        </a-col>
+        <a-col :span="12">
+          <label>需要发票：</label>
+          <span><j-ellipsis :value="model.remarks" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>发票邮寄地址：</label>
+          <span><j-ellipsis :value="model.remarks" :length="20"></j-ellipsis></span>
+        </a-col>
+        <a-col :span="12">
+          <label>邮编：</label>
+          <span><j-ellipsis :value="model.remarks" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+    </section>
+    <!--报名信息end-->
+    <!--会议资料begin-->
+    <section class="base-info">
+      <h3 class="title">会议资料</h3>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>参会单位：</label>
+          <span><j-ellipsis :value="model.principalName" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+    </section>
+    <!--会议资料end-->
+    <!--开票邮寄信息begin-->
+    <section class="base-info">
+      <h3 class="title">开票邮寄信息</h3>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>参会单位：</label>
+          <span><j-ellipsis :value="model.principalName" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+    </section>
+    <!--开票邮寄信息end-->
+
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import PreviewFile from '@comp/jero/PreviewFile'
+import JEllipsis from '@comp/jero/JEllipsis'
+import {getMeetInfoById} from '@api/incomePaymentsApi'
+// import {getSingUpUserInfo} from '@api/incomePaymentsApi'
+
+export default {
+  name: 'MeetingDetailModal',
+  components:{
+    PreviewFile,
+    JEllipsis
+  },
+  data() {
+    return {
+      title: '会议详情',
+      width: 800,
+      visible: false,
+      model: {},
+    }
+  },
+  methods: {
+    open(param) {
+      this.visible = true
+      if(param){
+        this.queryMeetingInfoById(param.id).then(res => {
+          // 会议详情
+          this.model = Object.assign({},res)
+          console.log(this.model,'this.model')
+        })
+      }
+    },
+    close() {
+      this.visible = false
+    },
+    handleCancel() {
+      this.close()
+    },
+    /*
+    * 通过会议id获取会议性情
+    * */
+    queryMeetingInfoById(id){
+      return new Promise(resolve => {
+        let result = {}
+        getMeetInfoById({id}).then(res => {
+          if(res.success){
+            result = res.result
+          }
+        }).finally( () => {
+          resolve(result)
+        })
+      })
+    },
+    /*
+     * 会议类型 1 工作组会议 2 标协会议 3国际研讨会 4 其他会议
+     * */
+    generateMeetingType(val) {
+      switch (val) {
+        case '1':
+          return '工作组会议'
+        case '2':
+          return '标协会议'
+        case '3':
+          return '国际研讨会'
+        case '4':
+          return '其他会议'
+        default:
+          return '其他会议'
+      }
+    },
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+.ant-row {
+  margin: 12px;
+}
+
+h3 {
+  position: relative;
+}
+
+label {
+  color: #666;
+}
+
+.contract-num {
+  color: #42b983;
+  cursor: pointer;
+}
+
+h3.title::before {
+  position: absolute;
+  top: 4px;
+  left: -10px;
+  content: "";
+  height: 20px;
+  width: 2px;
+  background: #069f99;
+}
+
+/* 到账信息 */
+.payment-info {
+  margin-bottom: 14px;
+
+  &-title {
+    text-align: center;
+    font-size: 14px;
+    height: 35px;
+    line-height: 35px;
+    letter-spacing: 1px;
+    color: #fff;
+    background: #a2e6e4;
+  }
+
+  &-content {
+    color: #424242;
+    //background: #efefef;
+    padding: 5px;
+    padding-left: 10px;
+    border: 1px solid #ccc;
+    border-top: none;
+  }
+
+
+}
+
+/*  开票邮寄信息 */
+.wrap-table {
+  border: 1px solid #ccc;
+  border-bottom: none;
+}
+
+/deep/ .ant-table-thead {
+  tr > th {
+    color: #fff;
+    background: #a2e6e4;
+    border: none;
+  }
+}
+
+/deep/ .ant-table-tbody {
+  tr > td {
+    border: none;
+    border-bottom: 1px solid #ccc;
+  }
+}
+</style>

src/views/MessagePage/ProjectDetailModal.vue

@@ -0,0 +1,416 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <!-- 基本信息begin-->
+    <section class="base-info">
+      <h3 class="title">基本信息</h3>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>项目负责人：</label>
+          <span><j-ellipsis :value="basicInfo.principalName" :length="20"></j-ellipsis></span>
+        </a-col>
+        <a-col :span="12">
+          <label>应收金额：</label>
+          <span><j-ellipsis :value="basicInfo.receivableAmount" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>备注：</label>
+          <span><j-ellipsis :value="basicInfo.remarks" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+      <!--      来款方式为合同的显示-->
+      <a-row :gutter="24" v-if="!!basicInfo.contractNum">
+        <a-col :span="12">
+          <label>{{createIncomeType(basicInfo.projectType)}}：</label>
+          <span>{{ basicInfo.chargeWay_dictText }}</span>
+        </a-col>
+        <a-col :span="12">
+          <label>合同编号：</label>
+          <span class="contract-num" @click="toContractDetail">{{ basicInfo.contractNum }}</span>
+        </a-col>
+      </a-row>
+    </section>
+    <!-- 基本信息end-->
+    <!-- 企业信息begin-->
+    <section class="enterprise-info">
+      <h3 class="title">企业信息</h3>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>来款企业：</label>
+          <span><j-ellipsis :value="basicInfo.companyName" :length="20"></j-ellipsis></span>
+        </a-col>
+        <a-col :span="12">
+          <label>企业联系人：</label>
+          <span>{{ basicInfo.name }}</span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>企业联系人性别：</label>
+          <span>{{ basicInfo.gender_dictText }}</span>
+        </a-col>
+        <a-col :span="12">
+          <label>企业联系人职务：</label>
+          <span>{{ basicInfo.post }}</span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>企业联系人电话：</label>
+          <span>{{ basicInfo.phone }}</span>
+        </a-col>
+        <a-col :span="12">
+          <label>企业联系人邮箱：</label>
+          <span>{{ basicInfo.email }}</span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>企业联系人邮编：</label>
+          <span>{{ basicInfo.postalCodeContacts }}</span>
+        </a-col>
+        <a-col :span="12">
+          <label>企业联系人地址：</label>
+          <span><j-ellipsis :value="basicInfo.contactAddress" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>是否需要发票：</label>
+          <span>{{ basicInfo.needInvoice_dictText }}</span>
+        </a-col>
+        <a-col :span="12">
+          <label>是否打包：</label>
+          <span>{{ basicInfo.pack_dictText }}</span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>企业邮编：</label>
+          <span>{{ basicInfo.postalCodeCompany }}</span>
+        </a-col>
+        <a-col :span="12">
+          <label>企业地址：</label>
+          <span><j-ellipsis :value="basicInfo.companyAddress" :length="20"></j-ellipsis></span>
+        </a-col>
+      </a-row>
+    </section>
+    <!--企业信息end-->
+    <!--到账信息begin-->
+    <section class="payment-info">
+      <h3 class="title">到账信息</h3>
+      <section class="payment-info-title">到账信息</section>
+      <div class="payment-info-content" v-for="item of paymentInfoList" :key="item.id">
+        {{ item.paymentDate }}到账{{ item.amountReceived }}元
+      </div>
+    </section>
+    <!--到账信息end-->
+    <!--开票邮寄信息begin-->
+    <section class="logistics-info">
+      <h3 class="title">开票邮寄信息</h3>
+      <div class="wrap-table">
+        <a-table
+          ref="table"
+          size="middle"
+          rowKey="id"
+          :pagination="false"
+          :columns="columns"
+          :dataSource="logisticsInfoList"
+          class="j-table-force-nowrap"
+        >
+        <span slot="action" class="action-span-cell">
+          <a @click="lookLogistics()">查看物流</a>
+        </span>
+          <!--          <p slot="expandedRowRender" slot-scope="record" style="margin: 0">-->
+          <!--            {{ record.sendDate }}-->
+          <!--          </p>-->
+        </a-table>
+      </div>
+    </section>
+    <!--开票邮寄信息end-->
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import {queryCommonProjectById} from '@api/incomePaymentsApi'
+import JEllipsis from '@comp/jero/JEllipsis'
+// import {getAction} from "@api/manage";
+const paymentInfoList = [
+  {
+    id: 1001,
+    year: '2021',
+    money: '200'
+  },
+  {
+    id: 1002,
+    year: '2021',
+    money: '200'
+  },
+  {
+    id: 1003,
+    year: '2021',
+    money: '200'
+  },
+]
+const logisticsInfoList = [
+  {
+    id: '01',
+    person: '张三',
+    time: '2021年10月21',
+    money: '200',
+    piaoNo: '123456',
+    projects: ['项目一', '项目二', '项目三'],
+    postPerson: '李四',
+    postTime: '2021年10月21',
+    emsOrSF: 'EMS',
+    postNo: '123456'
+  }
+]
+const columns = [
+  {
+    title: '开票人',
+    align: 'center',
+    dataIndex: 'createBy',
+  },
+  {
+    title: '日期',
+    align: 'center',
+    dataIndex: 'billDate',
+  },
+  {
+    title: '金额(元)',
+    align: 'center',
+    dataIndex: 'invoiceAmount',
+  },
+  {
+    title: '票号',
+    align: 'center',
+    dataIndex: 'billNo',
+  },
+  {
+    title: '项目',
+    align: 'center',
+    dataIndex: 'chargeCompanyName',
+  },
+  {
+    title: '邮寄人',
+    align: 'center',
+    dataIndex: 'liaisonMan',
+  },
+  {
+    title: '快递',
+    align: 'center',
+    dataIndex: 'sendMethod',
+  },
+  {
+    title: '快递单号',
+    align: 'center',
+    dataIndex: 'postNo',
+  },
+  {
+    title: '操作',
+    align: 'center',
+    dataIndex: '',
+    scopedSlots: {customRender: 'action'}
+  },
+]
+export default {
+  name: 'ProjectDetailModal',
+  props: {
+    // 字段名称是否非id，适用于票据邮寄等页面id不是项目id的情况
+    notId: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      description: '项目详情模态框',
+      width: 800,
+      visible: false,
+      title: '项目信息',
+      // 当前项目id
+      currentProjectId: '',
+      // 基本信息
+      basicInfo: {},
+      // 企业信息
+      enterpriseInfo: {},
+      // 联系人信息
+      contactsInfo: {},
+      columns,
+      // 到账信息
+      paymentInfoList,
+      // 开票邮寄信息
+      logisticsInfoList,
+    }
+  },
+  computed: {},
+  components: {
+    JEllipsis
+  },
+  methods: {
+    open(record) {
+      this.visible = true
+      // 记录当前项目id
+      if (this.notId) {
+        this.currentProjectId = record.projectId
+      } else {
+        this.currentProjectId = record.id
+      }
+      // 通过id查询项目详情
+      queryCommonProjectById({id: this.currentProjectId}).then(res => {
+        if (res.success) {
+          console.log(res.result, 'res.result')
+          // 项目信息
+          this.basicInfo = res.result
+          // 到账信息
+          this.paymentInfoList = res.result.paymentRecord
+          // 开票邮寄信息
+          this.logisticsInfoList = res.result.mailBill
+        } else {
+          console.log('未查到相应的信息')
+        }
+      })
+
+    },
+    handleCancel() {
+      this.visible = false
+    },
+    /*
+    * 生成每一个开票信息
+    * */
+    createItemInfo(item) {
+      let porjectItem = ''
+      if (item.projects.length > 0) {
+        item.projects.forEach((val, index) => {
+          if (index === item.projects.length - 1) {
+            porjectItem += val
+          } else {
+            porjectItem += val + '、'
+          }
+        })
+      }
+      return `${item.person}于${item.time}开票，金额为:${item.money}元,票号:${item.piaoNo},项目:${porjectItem}`
+    },
+    /*
+    *  查看物流
+    * */
+    lookLogistics() {
+      window.open('https://www.ems.com.cn/', '_blank')
+    },
+    /*
+    * 去合同详情 传入合同id
+    * */
+    toContractDetail() {
+      if(this.basicInfo.contractId){
+        this.$router.push({
+          path: '/contractManagement/RevenueContractDetail', query: {
+            revenueId: this.basicInfo.contractId
+          }
+        })
+      }else {
+        this.$message.warn('该项目未与合同关联')
+      }
+    },
+    /*
+    * 每一个项目的来款方式不同
+    * */
+    createIncomeType(val) {
+      if (val === 1 || val === 2 || val === 4) {
+        return  '来款方式'
+      }else {
+        return  '缴费方式'
+      }
+
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.ant-row {
+  margin: 12px;
+}
+
+h3 {
+  position: relative;
+}
+
+label {
+  color: #666;
+}
+
+.contract-num {
+  color: #42b983;
+  cursor: pointer;
+}
+
+h3.title::before {
+  position: absolute;
+  top: 4px;
+  left: -10px;
+  content: "";
+  height: 20px;
+  width: 2px;
+  background: #069f99;
+}
+
+/* 到账信息 */
+.payment-info {
+  margin-bottom: 14px;
+
+  &-title {
+    text-align: center;
+    font-size: 14px;
+    height: 35px;
+    line-height: 35px;
+    letter-spacing: 1px;
+    color: #fff;
+    background: #a2e6e4;
+  }
+
+  &-content {
+    color: #424242;
+    //background: #efefef;
+    padding: 5px;
+    padding-left: 10px;
+    border: 1px solid #ccc;
+    border-top: none;
+  }
+
+
+}
+
+/*  开票邮寄信息 */
+.wrap-table {
+  border: 1px solid #ccc;
+  border-bottom: none;
+}
+
+/deep/ .ant-table-thead {
+  tr > th {
+    color: #fff;
+    background: #a2e6e4;
+    border: none;
+  }
+}
+
+/deep/ .ant-table-tbody {
+  tr > td {
+    border: none;
+    border-bottom: 1px solid #ccc;
+  }
+}
+</style>

src/views/MessagePage/UploadMeetingCertificateModal.vue

@@ -0,0 +1,259 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <label>会议名称：</label>
+          <span>{{model.meetingName}}</span>
+        </a-col>
+      </a-row>
+      <section class="base-info">
+        <h3 class="title">报名信息</h3>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <label>参会单位：</label>
+            <span><j-ellipsis :value="model.companyName" :length="20"></j-ellipsis></span>
+          </a-col>
+
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <label>参会人：</label>
+            <span><j-ellipsis :value="model.companyContactName" :length="20"></j-ellipsis></span>
+          </a-col>
+          <a-col :span="12">
+            <label>身份：</label>
+            <span><j-ellipsis :value="model.identity_dictText" :length="20"></j-ellipsis></span>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <label>性别：</label>
+            <span><j-ellipsis :value="model.sex" :length="20"></j-ellipsis></span>
+          </a-col>
+          <a-col :span="12">
+            <label>手机号：</label>
+            <span><j-ellipsis :value="model.phone" :length="20"></j-ellipsis></span>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <label>付款方式：</label>
+            <span><j-ellipsis :value="model.payMode_dictText " :length="20"></j-ellipsis></span>
+          </a-col>
+          <a-col :span="12">
+            <label>需要发票：</label>
+            <span><j-ellipsis :value="model.needInvoice_dictText" :length="20"></j-ellipsis></span>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <label>发票邮寄地址：</label>
+            <span><j-ellipsis :value="model.postContactAddress" :length="20"></j-ellipsis></span>
+          </a-col>
+          <a-col :span="12">
+            <label>邮编：</label>
+            <span><j-ellipsis :value="model.postCode" :length="20"></j-ellipsis></span>
+          </a-col>
+        </a-row>
+      </section>
+      <section class="base-info">
+        <h3 class="title">付款凭证</h3>
+        <a-form :form="form">
+          <a-row :gutter="24">
+            <a-col :xl="12" :sm="24">
+              <a-form-item label="付款凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-image-upload v-decorator="['paymentRecord',validatorRules.paymentRecord]" :return-id="true"></j-image-upload>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+        </a-form>
+      </section>
+
+
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import {httpAction} from '@api/manage'
+import JImageUpload from '@comp/jero/JImageUpload'
+import { getSingUpUserInfo} from '@api/incomePaymentsApi'
+
+export default {
+  name: 'UploadMeetingCertificateModal',
+  data() {
+    return {
+      title:'上传凭证',
+      width:800,
+      visible:false,
+      confirmLoading:false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: {span: 24},
+        sm: {span: 6}
+      },
+      wrapperCol: {
+        xs: {span: 24},
+        sm: {span: 18}
+      },
+      validatorRules: {
+        paymentRecord: {
+          rules: [{required: false, message: '请上传汇款凭证'}],
+          validateTrigger: 'change'
+        },
+      },
+      url: {
+        edit:'/meeting/payMeetingSituation/edit'
+      }
+    }
+  },
+  components:{
+    JImageUpload
+  },
+  methods:{
+    open(param){
+      this.visible = true
+      if(param.id){
+        this.querySingUpUserInfo(param.id).then(res => {
+          this.model = res
+        })
+      }
+    },
+    close(){
+      this.visible = false
+    },
+    handleOk(){
+      const that  = this
+      this.form.validateFields((err, values) => {
+        if(!err){
+          that.confirmLoading = true
+          let method = 'post'
+          let url = this.url.edit
+          const formData = Object.assign({},values)
+          httpAction(url,formData,method).then(res => {
+            if(res.success){
+              that.$message.success(res.message)
+              that.$emit('ok')
+              that.handleCancel()
+              that.confirmLoading = false
+            }else {
+              this.$message.warn(res.message)
+            }
+          }).finally( () => {
+            that.confirmLoading = false
+          })
+        }else {
+          this.confirmLoading = false
+        }
+
+      })
+    },
+    handleCancel(){
+      this.close()
+    },
+    /*
+    * 获取参会人信息
+    * */
+    querySingUpUserInfo(id){
+      return new Promise(resolve => {
+        let result = {}
+        getSingUpUserInfo({id}).then(res => {
+          if(res.success){
+            result = res.result
+          }
+        }).finally( () => {
+          resolve(result)
+        })
+      })
+    }
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+.ant-row {
+  margin: 12px;
+}
+
+h3 {
+  position: relative;
+}
+
+label {
+  color: #666;
+}
+
+.contract-num {
+  color: #42b983;
+  cursor: pointer;
+}
+
+h3.title::before {
+  position: absolute;
+  top: 4px;
+  left: -10px;
+  content: "";
+  height: 20px;
+  width: 2px;
+  background: #069f99;
+}
+
+/* 到账信息 */
+.payment-info {
+  margin-bottom: 14px;
+
+  &-title {
+    text-align: center;
+    font-size: 14px;
+    height: 35px;
+    line-height: 35px;
+    letter-spacing: 1px;
+    color: #fff;
+    background: #a2e6e4;
+  }
+
+  &-content {
+    color: #424242;
+    //background: #efefef;
+    padding: 5px;
+    padding-left: 10px;
+    border: 1px solid #ccc;
+    border-top: none;
+  }
+
+
+}
+
+/*  开票邮寄信息 */
+.wrap-table {
+  border: 1px solid #ccc;
+  border-bottom: none;
+}
+
+/deep/ .ant-table-thead {
+  tr > th {
+    color: #fff;
+    background: #a2e6e4;
+    border: none;
+  }
+}
+
+/deep/ .ant-table-tbody {
+  tr > td {
+    border: none;
+    border-bottom: 1px solid #ccc;
+  }
+}
+</style>

src/views/system/UserAnnouncementList.vue

@@ -5,21 +5,34 @@
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
 
-          <a-col :span="6">
-            <a-form-item label="标题">
-              <a-input placeholder="请输入标题" v-model="queryParam.titile"></a-input>
+          <a-col :xl="7" :lg="8" :md="8" :sm="24">
+            <a-form-item label="提醒类型">
+              <j-dict-select-tag dict-code="notice_type" placeholder="请选择提醒类型"
+                                 v-model="queryParam.titile"></j-dict-select-tag>
             </a-form-item>
           </a-col>
-          <a-col :span="6">
-            <a-form-item label="发布人">
-              <a-input placeholder="请输入发布人" v-model="queryParam.sender"></a-input>
+          <a-col :xl="7" :lg="8" :md="8" :sm="24">
+            <a-form-item label="提醒时间">
+              <j-date
+                placeholder="请选择开始日期"
+                class="query-group-cust"
+                v-model="queryParam.startTime"
+                :disabled-date="disabledStartDate">
+              </j-date>
+              <span class="query-group-split-cust"></span>
+              <j-date
+                placeholder="请选择结束日期"
+                class="query-group-cust"
+                v-model="queryParam.endTime"
+                :disabled-date="disabledEndDate">
+              </j-date>
             </a-form-item>
           </a-col>
 
-          <a-col :span="8" >
+          <a-col :xl="6" :lg="8" :md="8" :sm="24">
             <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
               <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+              <a-button class="reset-button" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
             </span>
           </a-col>
 
@@ -27,10 +40,6 @@
       </a-form>
     </div>
 
-    <div class="table-operator">
-      <a-button type="primary" @click="readAll" icon="book">全部标注已读</a-button>
-    </div>
-
     <a-table
       ref="table"
       size="default"
@@ -41,8 +50,23 @@
       :pagination="ipagination"
       :loading="loading"
       @change="handleTableChange">
-      <span slot="action" slot-scope="text, record">
+        <span slot="templateContent" slot-scope="text">
+          <a-tooltip>
+            <template slot="title">
+              <span v-html="text" class="ellipsis-span"></span>
+            </template>
+            <span v-html="myEllipsis(text,20)" class="ellipsis-span"></span>
+          </a-tooltip>
+        </span>
+
+      <template slot="text" slot-scope="text">
+        <j-ellipsis v-if="text" :value="text" :length="20"></j-ellipsis>
+        <span v-else></span>
+      </template>
+      <span slot="action" class="action-span-cell" slot-scope="text, record">
         <a @click="showAnnouncement(record)">查看</a>
+        <a @click="haveRead(record)" v-if="record.readFlag === '0' ">已读</a>
+         <a class="readed" v-if="record.readFlag === '1' ">已读</a>
       </span>
     </a-table>
     <show-announcement ref="ShowAnnouncement"></show-announcement>
@@ -51,142 +75,207 @@
 </template>
 
 <script>
-  // import { filterObj } from '@/utils/util'
-  import { getAction,putAction } from '@/api/manage'
-  import ShowAnnouncement from '@/components/tools/ShowAnnouncement'
-  import {JeroListMixin} from '@/mixins/JeroListMixin'
-  import DynamicNotice from '../../components/tools/DynamicNotice'
+import {getAction, putAction} from '@/api/manage'
+import ShowAnnouncement from '@/components/tools/ShowAnnouncement'
+import {JeroListMixin} from '@/mixins/JeroListMixin'
+import {RangeDateMixin} from '@/mixins/RangeDateMixin'
+import DynamicNotice from '../../components/tools/DynamicNotice'
+import JDictSelectTag from '@comp/dict/JDictSelectTag'
+import JDate from '@comp/tools/JDate'
+import {Bus} from '@comp/tools/Bus'
 
-  export default {
-    name: 'UserAnnouncementList',
-    mixins: [JeroListMixin],
-    components: {
-      DynamicNotice,
-      ShowAnnouncement
-    },
-    data () {
-      return {
-        description: '系统通告表管理页面',
-        queryParam: {},
-        columns: [{
-          title: '标题',
-          align:'center',
-          dataIndex: 'titile'
-        },{
-          title: '消息类型',
+
+
+export default {
+  name: 'UserAnnouncementList',
+  mixins: [JeroListMixin, RangeDateMixin],
+  components: {
+    DynamicNotice,
+    ShowAnnouncement,
+    JDictSelectTag,
+    JDate,
+
+  },
+  data() {
+    return {
+      description: '系统通告表管理页面',
+      queryParam: {},
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 80,
           align: 'center',
-          dataIndex: 'msgCategory',
-          customRender: function (text) {
-            if (text == '1') {
-              return '通知公告'
-            } else if (text == '2') {
-              return '系统消息'
-            } else {
-              return text
-            }
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
           }
-        },{
-          title: '发布人',
-          align:'center',
-          dataIndex: 'sender'
-        },{
-          title: '发布时间',
-          align:'center',
-          dataIndex: 'sendTime'
-        },{
-          title: '优先级',
-          align:'center',
-          dataIndex: 'priority',
-          customRender:function (text) {
-            if(text=='L'){
-              return '低'
-            }else if(text=='M'){
-              return '中'
-            }else if(text=='H'){
-              return '高'
-            } else {
-              return text
-            }
-          }
-        },{
-          title: '阅读状态',
-          align:'center',
-          dataIndex: 'readFlag',
-          customRender:function (text) {
-            if(text=='0'){
-              return '未读'
-            }else if(text=='1'){
-              return '已读'
-            } else {
-              return text
-            }
-          }
-        },{
+        },
+        {
+          title: '提醒类型',
+          align: 'center',
+          dataIndex: 'titile_dictText',
+          scopedSlots: {customRender: 'text'},
+          width: 160
+        },
+        {
+          title: '提醒内容',
+          align: 'center',
+          dataIndex: 'msgContent',
+          scopedSlots: {customRender: 'templateContent'},
+        },
+        {
+          title: '提醒时间',
+          align: 'center',
+          dataIndex: 'sendTime',
+          scopedSlots: {customRender: 'text'},
+          width: 240
+        },
+        {
           title: '操作',
           dataIndex: 'action',
-          align:'center',
-          scopedSlots: { customRender: 'action' },
-        }],
-        url: {
-          list: '/sys/sysAnnouncementSend/getMyAnnouncementSend',
-          editCementSend:'sys/sysAnnouncementSend/editByAnntIdAndUserId',
-          readAllMsg:'sys/sysAnnouncementSend/readAll',
-        },
-        loading:false,
-        openPath:'',
-        formData:''
+          align: 'center',
+          scopedSlots: {customRender: 'action'},
+          width: 160
+        }
+      ],
+      url: {
+        list: '/sys/sysAnnouncementSend/getMyAnnouncementSend',
+        editCementSend: 'sys/sysAnnouncementSend/editByAnntIdAndUserId',
+        readAllMsg: 'sys/sysAnnouncementSend/readAll',
+      },
+      loading: false,
+      openPath: '',
+      formData: ''
+    }
+  },
+  created() {
+    Bus.$on('header-notice-change', () => {
+      this.loadData()
+    })
+  },
+  destroyed: function () { // 离开页面生命周期函数
+    Bus.$off('header-notice-change')
+  },
+  methods: {
+    handleDetail: function (record) {
+      this.$refs.sysAnnouncementModal.detail(record)
+      this.$refs.sysAnnouncementModal.title = '查看'
+    },
+    showAnnouncement(record) {
+      putAction(this.url.editCementSend, {anntId: record.anntId}).then((res) => {
+        if (res.success) {
+          this.loadData()
+          this.syncHeadNotic(record.anntId)
+          Bus.$emit('notice-change')
+        }
+      })
+      const param = JSON.parse(record.busId)
+      if (record.openType === 'component') {
+        this.openPath = record.openPage
+        // 将参数传入
+        this.formData = param
+        this.$refs.showDynamNotice.detail()
+      } else if(record.openType === 'url') {
+        console.log(record.openPage,'url')
+        const param = JSON.parse(record.busId)
+        // 如果是url 跳转页面
+        this.$router.push({
+          path:record.openPage,
+          query:param
+        })
+      }else {
+        this.$refs.ShowAnnouncement.detail(record)
       }
     },
-    methods: {
-      handleDetail: function(record){
-        this.$refs.sysAnnouncementModal.detail(record)
-        this.$refs.sysAnnouncementModal.title='查看'
-      },
-      showAnnouncement(record){
-        putAction(this.url.editCementSend,{anntId:record.anntId}).then((res)=>{
-          if(res.success){
-            this.loadData()
-            this.syncHeadNotic(record.anntId)
-          }
-        })
-        if(record.openType==='component'){
-          this.openPath = record.openPage
-          this.formData = {id:record.busId}
-          this.$refs.showDynamNotice.detail()
-        }else{
-          this.$refs.ShowAnnouncement.detail(record)
+    syncHeadNotic(anntId) {
+      getAction('sys/annountCement/syncNotic', {anntId: anntId})
+    },
+    readAll() {
+      var that = this
+      that.$confirm({
+        title: '确认操作',
+        content: '是否全部标注已读?',
+        onOk: function () {
+          putAction(that.url.readAllMsg).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              that.loadData()
+              that.syncHeadNotic()
+            }
+          })
         }
-      },
-      syncHeadNotic(anntId){
-        getAction('sys/annountCement/syncNotic',{anntId:anntId})
-      },
-      readAll(){
-        var that = this
-        that.$confirm({
-          title:'确认操作',
-          content:'是否全部标注已读?',
-          onOk: function(){
-            putAction(that.url.readAllMsg).then((res)=>{
-              if(res.success){
-                that.$message.success(res.message)
-                that.loadData()
-                that.syncHeadNotic()
-              }
-            })
-          }
-        })
-      },
+      })
+    },
+    /*
+     * 字符串截取
+     * * */
+    myEllipsis(value, vlength = 25) {
+      if (!value) {
+        return value
+      }
+      if (value.length > vlength) {
+        return value.slice(0, vlength) + '...'
+      }
+      return value
+    },
+    haveRead(record) {
+      putAction(this.url.editCementSend, {anntId: record.anntId}).then((res) => {
+        if (res.success) {
+          this.loadData()
+          this.syncHeadNotic(record.anntId)
+          Bus.$emit('notice-change')
+        }
+      })
+    },
+    meetingDetail(){
+      this.$refs.meetingDetailModal.open({id:'1442374989698080770'})
+    },
+    uploadMeeting(){
+      this.$refs.upload.open()
     }
   }
+}
 </script>
-<style scoped>
-  .ant-card-body .table-operator{
-    margin-bottom: 18px;
-  }
-  .anty-row-operator button{margin: 0 5px}
-  .ant-btn-danger{background-color: #ffffff}z
+<style scoped lang="less">
+@import '~@assets/less/common.less';
 
-  .ant-modal-cust-warp{height: 100%}
-  .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
-  .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
+.ellipsis-span /deep/ * {
+  display: inline;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.readed {
+  user-select: none;
+  color: #999;
+  pointer-events: none;
+}
+
+.ant-card-body .table-operator {
+  margin-bottom: 18px;
+}
+
+.anty-row-operator button {
+  margin: 0 5px
+}
+
+.ant-btn-danger {
+  background-color: #ffffff
+}
+
+z
+.ant-modal-cust-warp {
+  height: 100%
+}
+
+.ant-modal-cust-warp .ant-modal-body {
+  height: calc(100% - 110px) !important;
+  overflow-y: auto
+}
+
+.ant-modal-cust-warp .ant-modal-content {
+  height: 90% !important;
+  overflow-y: hidden
+}
 </style>