我的消息开发

2021-09-28 15:41:08 +08:00
parent d87b8eeb94
commit 74f0af9b74
14 changed files with 1612 additions and 213 deletions
@@ -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',
@@ -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>
@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export const Bus = new 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>
+
@@ -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>