wms / wms4_globalaerjiliya · Files

<template>
  <j-modal
    :title="title"
    :width="modelStyle.width"
    :visible="visible"

    :bodyStyle="bodyStyle"

    :switchFullscreen="switchFullscreen"
    @cancel="handleCancel"

  >

    <template slot="footer">

      <a-button key="back" @click="handleCancel">{{$t('button.close')}}</a-button>

      <a-button v-if="record.openType === 'url'" type="primary" @click="toHandle">{{ $t('system.goToDealWith') }}</a-button>

    </template>
    <a-card class="daily-article" :loading="loading">

      <a-card-meta :title="record.titile"
                   :description="$t('system.publishingTime') + ' : ' + record.sendTime + '，'+ $t('system.publisher') +' : '+ record.sender"/>

      <!-- <a-divider/> -->

      <span v-html="record.msgContent" class="article-content"></span>
    </a-card>
  </j-modal>
</template>

<script>

import { getUserList } from '@/api/api'

export default {

  name: 'SysAnnouncementModal',

  components: {},
  data() {
    return {

      title: this.$t('system.notificationMessage'),

      record: {},
      labelCol: {

        xs: { span: 24 },
        sm: { span: 5 }

      },

      wrapperCol: {

        xs: { span: 24 },
        sm: { span: 16 }

      },

      visible: false,
      switchFullscreen: true,
      loading: false,
      bodyStyle: {

        padding: '5',
        height: window.innerHeight * 0.6 + 'px',
        'overflow-y': 'auto'

      },

      modelStyle: {
        width: '60%',

        style: { top: '20px' },

        fullScreen: false
      }

    }

  },

  created() {},

  methods: {
    detail(record) {
      //update-begin---author:wangshuai ---date:20220107  for：将其它页面传递过来的用户名改成用户真实姓名
      if (record.sender) {

        getUserList({ username: record.sender }).then(res => {

          if (res.success && res.result.records.length > 0) {
            record.sender = res.result.records[0].realname
          }
        })
      }
      //update-end---author:wangshuai ---date:20220107  for：将其它页面传递过来的用户名改成用户真实姓名

      this.visible = true
      this.record = record

    },
    handleCancel() {

      this.visible = false

    },
    /** 切换全屏显示 */
    handleClickToggleFullScreen() {
      let mode = !this.modelStyle.fullScreen
      if (mode) {
        this.modelStyle.width = '100%'
        this.modelStyle.style.top = '20px'
      } else {
        this.modelStyle.width = '60%'
        this.modelStyle.style.top = '50px'
      }
      this.modelStyle.fullScreen = mode
    },
    toHandle() {
      if (this.record.openType === 'url') {

        this.visible = false

        //链接跳转

        this.$router.push({ path: this.record.openPage })

      }

    }

  }

}

</script>

<style lang="less">

.announcementCustomModal {
  .ant-modal-header {
    border: none;
    display: inline-block;
    position: absolute;
    z-index: 1;
    right: 56px;
    padding: 0;

    .ant-modal-title {
      .custom-btn {
        width: 56px;
        height: 56px;
        border: none;
        box-shadow: none;

      }
    }
  }

  .daily-article {
    border-bottom: 0;
  }
}

</style>
<style scoped lang="less">

.daily-article {
  .article-button {
    font-size: 1.2rem !important;
  }

  .ant-card-body {
    padding: 18px !important;
  }

  .ant-card-head {
    padding: 0 1rem;
  }

  .ant-card-meta {
    margin-bottom: 1rem;
  }

  .article-content {
    p {
      word-wrap: break-word;
      word-break: break-all;
      text-overflow: initial;
      white-space: normal;

      font-size: 0.9rem !important;
      margin-bottom: 0.8rem;

    }
  }

}

</style>