rt-sim-training-client/src/views/system/notification/index.vue

<template>
  <div class="card-box">
    <el-steps class="steps" :active="display">
      <el-step title="系统通知" icon="el-icon-edit-outline" />
      <el-step title="" icon="el-icon-upload" />
    </el-steps>
    <div class="joylink-card forms">
      <div style="height: 100%; padding-top: 40px; overflow-y: auto; position: relative;">
        <el-form ref="form" :model="messageModel" :rules="rules" label-width="200px">
          <el-form-item label="消息类型:" prop="type">
            <el-select v-model="messageModel.type" placeholder="请选择" style="width: 220px;">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="内容主题:" prop="subject">
            <el-input v-model="messageModel.subject" style="width: 450px" /></el-form-item>
          <el-form-item label="内容:" prop="content">
            <el-input
              v-model="messageModel.content"
              style="width: 450px"
              type="textarea"
              maxlength="450"
              show-word-limit
              :autosize="{ minRows: 4, maxRows: 12}"
            />
          </el-form-item>
          <el-form-item label="通知选择:" prop="noticeType">
            <el-checkbox-group v-model="messageModel.noticeType">
              <el-checkbox v-for="(item, index) in regionList" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
            <!-- <el-radio-group v-model="messageModel.noticeType">
              <el-radio v-for="(item, index) in regionList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="draft">
      <el-button type="primary" @click="pushNotification">发布</el-button>
    </div>
  </div>
</template>

<script>
import { pushSysNotice } from '@/api/pushMessage';

export default {
    name: 'News',
    data() {
        return {
            display: 1,
            regionList: [
                {label: '邮件通知', value: '01'}
                // {label: '短信通知', value: '02'}
            ],
            typeList: [],
            messageModel: {
                type: '',
                subject: '',
                content: '',
                noticeType: []
            },
            rules: {
                type: [
                    { required: true, message: '请选择消息类型', trigger: 'change'}
                ],
                subject: [
                    { required: true, message: this.$t('rules.enterTheNewsTitle'), trigger: 'blur'}
                ],
                content:[
                    { required: true, message: this.$t('rules.enterTheNewsContent'), trigger: 'blur' }
                ]
                // noticeType: [
                //     { required: true, message: this.$t('rules.chooseNewsCanBeClosed'), trigger: 'change' }
                // ]
            }
        };
    },
    mounted() {
        this.typeList = [];
        this.$Dictionary.noticeList().then(list => {
            this.typeList = list.map(elem => { return { value: elem.code, label: elem.name }; });
            console.log(this.typeList);
        });
    },
    methods: {
        pushNotification() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    pushSysNotice(this.messageModel).then(resp => {
                        this.$message.success('推送成功');
                        this.$refs.form.resetFields();
                    }).catch(() => {
                        this.$messageBox('推送失败');
                    });
                } else {
                    return false;
                }
            });
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .card-box {
        padding-top: 20px;
        height: 100%;
        margin: 0 auto;
    }

    .steps {
        width: 980px;
        margin: 0 auto;

        /deep/ {
            .el-step__icon.is-icon {
                width: 95px;
            }
        }
    }

    .online_box {
        position: absolute;
        left: 20px;
        top: 18px;
    }

    .forms {
        width: 800px;
        margin: 0 auto;
        margin-top: 10px;
        height: calc(100% - 150px);

        /deep/ {
            .el-select {
                float: left;
                width: calc(600px);
            }

            .el-textarea {
                float: left;
                width: calc(600px);
            }

            .el-form-item__content>.el-input {
                float: left;
                width: calc(600px);
            }

            .el-input-number {
                float: left;
                width: calc(250px);
            }
			.el-textarea .el-input__count {
				color: #909399;
				position: absolute;
				font-size: 12px;
				bottom: -10px;
				right: 7px;
				background: transparent;
			}
        }
    }

    .draft {
        width: 300px;
        text-align: center;
        margin: 20px auto;
    }
</style>