|
@@ -0,0 +1,265 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="card-container">
|
|
|
|
|
+ <div class="card-content">
|
|
|
|
|
+ <el-form
|
|
|
|
|
+ v-loading="loading"
|
|
|
|
|
+ :model="formInfo"
|
|
|
|
|
+ :rules="rules"
|
|
|
|
|
+ ref="addForm"
|
|
|
|
|
+ label-width="200px"
|
|
|
|
|
+ label-position="right">
|
|
|
|
|
+ <div class="section-title">Send Notification</div>
|
|
|
|
|
+ <el-row :gutter="20">
|
|
|
|
|
+ <el-col :xs="24" :md="12">
|
|
|
|
|
+ <el-form-item
|
|
|
|
|
+ label="Notification Title"
|
|
|
|
|
+ prop="title">
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ class="add-text"
|
|
|
|
|
+ v-model="formInfo.title"
|
|
|
|
|
+ placeholder="Add text"
|
|
|
|
|
+ maxlength="30"
|
|
|
|
|
+ :readonly="!isEdit"/>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :xs="22" :md="12">
|
|
|
|
|
+ <el-form-item
|
|
|
|
|
+ label="Target"
|
|
|
|
|
+ prop="targets">
|
|
|
|
|
+ <el-select
|
|
|
|
|
+ class="add-text"
|
|
|
|
|
+ v-model="formInfo.targets"
|
|
|
|
|
+ :disabled="!isEdit"
|
|
|
|
|
+ multiple>
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="(item, index) in targetOptions"
|
|
|
|
|
+ :key="index"
|
|
|
|
|
+ :label="item"
|
|
|
|
|
+ :value="item"/>
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ <el-row :gutter="20">
|
|
|
|
|
+ <el-col :xs="24" :md="12">
|
|
|
|
|
+ <el-form-item
|
|
|
|
|
+ label="Notification Message"
|
|
|
|
|
+ prop="message">
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ class="add-text"
|
|
|
|
|
+ v-model="formInfo.message"
|
|
|
|
|
+ placeholder="Add text"
|
|
|
|
|
+ :autosize="autosize"
|
|
|
|
|
+ :readonly="!isEdit"
|
|
|
|
|
+ type="textarea"
|
|
|
|
|
+ maxlength="300"/>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ <div class="sparator" style="margin: 10px -80px;"></div>
|
|
|
|
|
+ <div class="buttons" v-if="isEdit">
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ class="cancel-button"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ @click="onBack">
|
|
|
|
|
+ Cancel
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ class="confirm-button"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ @click="onSend">
|
|
|
|
|
+ Save
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="buttons" v-else>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ class="cancel-button"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ @click="onBack">
|
|
|
|
|
+ Back
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import api from '../../http/api/notification'
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ loading: false,
|
|
|
|
|
+ formInfo: {
|
|
|
|
|
+ title: "",
|
|
|
|
|
+ message: "",
|
|
|
|
|
+ targets: []
|
|
|
|
|
+ },
|
|
|
|
|
+ autosize: {
|
|
|
|
|
+ minRows: 3,
|
|
|
|
|
+ maxRows: 10,
|
|
|
|
|
+ },
|
|
|
|
|
+ targetOptions: [],
|
|
|
|
|
+ rules: {
|
|
|
|
|
+ title: {
|
|
|
|
|
+ required: true,
|
|
|
|
|
+ trigger: 'blur',
|
|
|
|
|
+ message: 'Please input title'
|
|
|
|
|
+ },
|
|
|
|
|
+ message: {
|
|
|
|
|
+ required: true,
|
|
|
|
|
+ trigger: 'blur',
|
|
|
|
|
+ message: 'Please input message'
|
|
|
|
|
+ },
|
|
|
|
|
+ targets: {
|
|
|
|
|
+ required: true,
|
|
|
|
|
+ trigger: 'change',
|
|
|
|
|
+ message: 'Please select target platform'
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ isEdit: true
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ created() {
|
|
|
|
|
+ this.getTargets();
|
|
|
|
|
+ if (this.$route.params.id) {
|
|
|
|
|
+ this.isEdit = false;
|
|
|
|
|
+ this.viewNotification()
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ onBack() {
|
|
|
|
|
+ this.$router.push('/notification')
|
|
|
|
|
+ },
|
|
|
|
|
+ onSend() {
|
|
|
|
|
+ this.$refs['addForm'].validate(result => {
|
|
|
|
|
+ if (result) {
|
|
|
|
|
+ this.$confirm("Confirm to send the notificaton?", "Notification").then(res => {
|
|
|
|
|
+ this.sendNotification();
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ getTargets() {
|
|
|
|
|
+ this.loading = true;
|
|
|
|
|
+ api.getPlatformTarget().then(res => {
|
|
|
|
|
+ if (res.data) {
|
|
|
|
|
+ this.targetOptions = res.data
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(err =>{
|
|
|
|
|
+
|
|
|
|
|
+ }).finally(() => {
|
|
|
|
|
+ this.loading = false;
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ viewNotification() {
|
|
|
|
|
+ this.loading = true;
|
|
|
|
|
+ api.viewNotification({
|
|
|
|
|
+ notificationId: this.$route.params.id
|
|
|
|
|
+ }).then(res => {
|
|
|
|
|
+ if (res.data) {
|
|
|
|
|
+ this.formInfo = res.data
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(err => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ type: 'error',
|
|
|
|
|
+ message: err
|
|
|
|
|
+ })
|
|
|
|
|
+ }).finally(() => {
|
|
|
|
|
+ this.loading = false;
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ sendNotification() {
|
|
|
|
|
+ this.loading = true;
|
|
|
|
|
+ api.sendNotification(this.formInfo).then(res => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ type: 'success',
|
|
|
|
|
+ message: "Send successfully!"
|
|
|
|
|
+ })
|
|
|
|
|
+ setTimeout(() => this.onBack(), 300);
|
|
|
|
|
+ }).catch(err => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ type: 'error',
|
|
|
|
|
+ message: err
|
|
|
|
|
+ })
|
|
|
|
|
+ }).finally(() => {
|
|
|
|
|
+ this.loading = false;
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped="scoped" lang='scss'>
|
|
|
|
|
+ @import '../../styles/variables.scss';
|
|
|
|
|
+
|
|
|
|
|
+ .card-container {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding: 20px 60px;
|
|
|
|
|
+ min-height: $mainAppMinHeight;
|
|
|
|
|
+ background-color: #F0F5FC;
|
|
|
|
|
+ }
|
|
|
|
|
+ .card-content {
|
|
|
|
|
+ padding: 15px 80px;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ background-color: white;
|
|
|
|
|
+ }
|
|
|
|
|
+ .section-title {
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ margin-top: 20px;
|
|
|
|
|
+ margin-bottom: 30px;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ user-select: none;
|
|
|
|
|
+ line-height: 24px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-family: sans-serif;
|
|
|
|
|
+ text-transform: uppercase;
|
|
|
|
|
+ }
|
|
|
|
|
+ .add-text {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ max-width: 300px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .add-text ::v-deep .el-textarea__inner {
|
|
|
|
|
+ font-family: sans-serif;
|
|
|
|
|
+ }
|
|
|
|
|
+ .hr {
|
|
|
|
|
+ height: 2px;
|
|
|
|
|
+ margin: 10px -40px;
|
|
|
|
|
+ background-color: #F0F5FC;
|
|
|
|
|
+ }
|
|
|
|
|
+ .hr-full {
|
|
|
|
|
+ height: 2px;
|
|
|
|
|
+ margin: 20px -80px;
|
|
|
|
|
+ background-color: #F0F5FC;
|
|
|
|
|
+ }
|
|
|
|
|
+ .rate-list-view {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ .rate-text {
|
|
|
|
|
+ max-width: 150px;
|
|
|
|
|
+ padding-right: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .list-item-icon {
|
|
|
|
|
+ width: 30px;
|
|
|
|
|
+ height: 30px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ margin: 0 10px 22px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .buttons {
|
|
|
|
|
+ padding-top: 15px;
|
|
|
|
|
+ padding-bottom: 30px;
|
|
|
|
|
+ }
|
|
|
|
|
+ @media screen and (max-width: 500px) {
|
|
|
|
|
+ .card-container {
|
|
|
|
|
+ padding: 0px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .card-content {
|
|
|
|
|
+ padding: 15px 40px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .form-unit ::v-deep .el-form-item__label {
|
|
|
|
|
+ line-height: 30px;
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|