132 lines
3.7 KiB
Vue
132 lines
3.7 KiB
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="150px">
|
||
|
|
<el-form-item :label="this.$t('system.newsHeadlines')" prop="title">
|
||
|
|
<el-input v-model="messageModel.title" /></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('推送消息成功！');
|
||
|
|
}).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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.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>
|
||
|
|
|