aslan-admin/src/views/message/push/new-push-form.vue

<template>
  <div class="push-form">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item prop="title" :label="$t('pages.messagePushTask.form.title')">
        <el-input v-model="form.title" :placeholder="$t('pages.messagePushTask.placeholder.title')" maxlength="200" />
      </el-form-item>
      <el-form-item prop="content" :label="$t('pages.messagePushTask.form.content')">
        <el-input
          v-model="form.content"
          type="textarea"
          :placeholder="$t('pages.messagePushTask.placeholder.content')"
          maxlength="1000"
        />
      </el-form-item>
      <el-form-item :label="$t('pages.messagePushTask.form.system')" prop="sysOrigin">
        <el-select v-model="form.sysOrigin">
          <el-option
            v-for="item in sysOriginPlatforms"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('pages.messagePushTask.form.client')" prop="platform">
        <el-select v-model="form.platform" clearable :placeholder="$t('pages.messagePushTask.placeholder.all')">
          <el-option
            v-for="item in appPlatforms"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('pages.messagePushTask.form.pushPlatform')" prop="deviceType">
        <el-select v-model="form.deviceType">
          <el-option
            v-for="item in deviceTypes"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('pages.messagePushTask.form.language')" prop="language">
        <el-select v-model="form.language" clearable :placeholder="$t('pages.messagePushTask.placeholder.selectLanguage')">
          <el-option :label="$t('pages.messagePushTask.languageOption.ar')" value="ar" />
          <el-option :label="$t('pages.messagePushTask.languageOption.tr')" value="tr" />
          <el-option :label="$t('pages.messagePushTask.languageOption.other')" value="en" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('pages.messagePushTask.form.businessScene')" prop="businessScene">
        <el-select v-model="form.businessScene">
          <el-option :label="$t('pages.messagePushTask.businessScene.officialNotice')" value="OFFICIAL_MESSAGE_NOTICE" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="Push承接" prop="link">
        <el-input v-model="form.link" placeholder="请输入内容" />
      </el-form-item> -->
      <el-form-item :label="$t('pages.messagePushTask.form.fixedUserIds')" prop="fixedUserIds">
        <el-input
          v-model.trim="form.fixedUserIds"
          type="textarea"
          :placeholder="$t('pages.messagePushTask.placeholder.fixedUserIds')"
          @blur="fixedUserIdBlur"
          @input="fixedUserIdKeyup"
        />
        <div class="font-info">{{ $t('pages.messagePushTask.tips.fixedUserIds', { count: inputFixedNumber }) }}</div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{ $t('pages.messagePushTask.actions.submit') }}</el-button>
        <el-button @click="resetForm">{{ $t('pages.messagePushTask.actions.reset') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { appPlatforms, deviceTypes, sysOriginPlatforms } from '@/constant/origin'
import { validPositiveNumber } from '@/utils/validate'
import { newPush } from '@/api/message'

export default {
  data() {
    return {
      appPlatforms,
      deviceTypes,
      sysOriginPlatforms,
      form: {
        title: '',
        content: '',
        platform: '',
        businessScene: 'OFFICIAL_MESSAGE_NOTICE',
        link: '',
        fixedUserIds: '',
        deviceType: '',
        sysOrigin: '',
        language: ''
      },
      inputFixedNumber: 0
    }
  },
  computed: {
    rules() {
      return {
        title: [
          { required: true, message: this.$t('pages.messagePushTask.validation.enterTitle'), trigger: 'blur' },
          { min: 3, max: 200, message: this.$t('pages.messagePushTask.validation.length3To200'), trigger: 'blur' }
        ],
        content: [
          { required: true, message: this.$t('pages.messagePushTask.validation.enterContent'), trigger: 'blur' },
          { min: 3, max: 500, message: this.$t('pages.messagePushTask.validation.length3To500'), trigger: 'blur' }
        ],
        sysOrigin: { required: true, message: this.$t('pages.messagePushTask.validation.selectSystem'), trigger: 'blur' },
        deviceType: {
          required: true,
          message: this.$t('pages.messagePushTask.validation.selectPushPlatform'),
          trigger: 'blur'
        }
      }
    }
  },
  methods: {
    onSubmit() {
      const that = this
      that.$refs.form.validate((valid) => {
        if (!valid) {
          console.error('error submit!!')
          return false
        }
        that.$confirm(that.$t('pages.messagePushTask.confirm.submitMessage'), that.$t('pages.messagePushTask.confirm.title'), {
          confirmButtonText: that.$t('pages.messagePushTask.confirm.confirm'),
          cancelButtonText: that.$t('pages.messagePushTask.confirm.cancel'),
          type: 'warning'
        }).then(() => {
          newPush(that.form).then(res => {
            that.$message({
              type: 'success',
              message: that.$t('pages.messagePushTask.message.success')
            })
            that.resetForm()
          }).catch(er => {
            that.$opsMessage.success()
          })
        }).catch(() => {
          that.$message({
            type: 'info',
            message: that.$t('pages.messagePushTask.confirm.cancelled')
          })
        })
      })
    },
    resetForm() {
      this.inputFixedNumber = 0
      this.$refs.form.resetFields()
    },
    fixedUserIdBlur(value) {
      const list = this.filterUserIds(this.form.fixedUserIds.split(','), 100)
      this.form.fixedUserIds = list.join(',')
      this.inputFixedNumber = list.length
    },
    filterUserIds(contentArrays, maxSize) {
      const inputNumber = contentArrays.length
      var list = []
      for (let index = 0; index < inputNumber; index++) {
        const item = contentArrays[index]
        if (validPositiveNumber(item)) {
          list.push(item)
        }
        if (list.length === maxSize) {
          break
        }
      }
      return list
    },
    fixedUserIdKeyup(value) {
      if (!value) {
        this.inputFixedNumber = 0
        return
      }
      var contentArrays = value.split(',')
      if (contentArrays.length > 100) {
        var list = this.filterUserIds(contentArrays, 100)
        this.form.fixedUserIds = list.join(',')
        this.inputFixedNumber = list.length
        return
      }
      this.inputFixedNumber = contentArrays.length
    }
  }
}
</script>