rt-sim-training-client/src/views/news/index.vue

<template>
  <div class="card-box">
    <el-steps class="steps" :active="display">
      <el-step :title="this.$t('system.newsBulletin')" 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;">
        <el-form ref="form" :model="messageModel" :rules="rules" label-width="200px">
          <el-form-item :label="this.$t('system.newsHeadlines')" prop="title">
            <el-input v-model="messageModel.title" style="width: 450px" /></el-form-item>
          <el-form-item :label="this.$t('system.newsContent')" prop="message">
            <el-input v-model="messageModel.message" style="width: 450px" type="textarea" :autosize="{ minRows: 2, maxRows: 6}" />
          </el-form-item>
          <el-form-item :label="this.$t('system.whetherTheNewsCanBeClosed')" prop="showClose">
            <el-radio-group v-model="messageModel.showClose">
              <el-radio :label="radioValue.yes">{{ $t('global.yes') }}</el-radio>
              <el-radio :label="radioValue.no">{{ $t('global.no') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="draft">
      <el-button type="primary" @click="pushNotification">{{ $t('system.push') }}</el-button>
    </div>
  </div>
</template>

<script>
import {pushMessage} from '@/api/pushMessage';
export default {
    name: 'News',
    data() {
        return {
            display: 1,
            messageModel: {
                title: '',
                message: '',
                showClose: false
            },
            radioValue: {
                yes: true,
                no: false
            },
            rules: {
                title: [
                    { required: true, message: this.$t('rules.enterTheNewsTitle'), trigger: 'blur'}
                ],
                message:[
                    { required: true, message: this.$t('rules.enterTheNewsContent'), trigger: 'blur' }
                ],
                showClose: [
                    { required: true, message: this.$t('rules.chooseNewsCanBeClosed'), trigger: 'change' }
                ]
            }
        };
    },
    methods: {
        pushNotification() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    pushMessage(this.messageModel).then(resp => {
                        this.$message.success(this.$t('tip.pushNewsSuccess'));
                    }).catch(() => {
                        this.$messageBox(this.$t('tip.pushNewsFailed'));
                    });
                } 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;
            }
        }
    }

    .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);
            }
        }
    }

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