Blame view

juvenile-prosecution-vue/src/components/tools/ShowAnnouncement.vue 3.12 KB
6c637641   wxy   no message
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
  <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">关闭</a-button>
        <a-button v-if="record.openType==='url'" type="primary" @click="toHandle">去处理</a-button>
      </template>
      <a-card class="daily-article" :loading="loading">
        <a-card-meta
          :title="record.titile"
          :description="'发布人:'+record.sender + ' 发布时间: ' + record.sendTime">
        </a-card-meta>
        <a-divider />
        <span v-html="record.msgContent" class="article-content"></span>
      </a-card>
    </j-modal>
  </template>
  
  <script>
    export default {
      name: "SysAnnouncementModal",
      components: {
      },
      data () {
        return {
          title:"通知消息",
          record: {},
          labelCol: {
            xs: { span: 24 },
            sm: { span: 5 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
          },
          visible: false,
          switchFullscreen: true,
          loading: false,
          bodyStyle:{
            padding: "0",
            height:(window.innerHeight*0.8)+"px",
            "overflow-y":"auto",
  
          },
          modelStyle:{
            width: '60%',
            style: { top: '20px' },
            fullScreen: false
          }
        }
      },
      created () {
      },
      methods: {
        detail (record) {
          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: .9rem !important;
          margin-bottom: .8rem;
        }
      }
    }
  </style>