我的消息开发

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>