群控系统服务端开发模式-应用开发-前端邮箱短信通道开发

一、添加视图

        在根目录下src文件夹下views文件夹下param文件夹下emailsms文件夹下，新建index.vue，代码如下

<template>
  <el-tabs type="border-card">
    <el-tab-pane v-if="$store.getters.butts.includes('ParamEmailsmsIndexDetails')" label="邮箱短信通道">
      <el-form ref="resEmailsmsForm" :rules="resEmailsmsRules" :model="resEmailsmsModel" label-width="140px"
               class="demo-ruleForm">
        <el-form-item label="短信通道" prop="sms_id">
          <el-radio-group v-model="resEmailsmsModel.sms_id">
            <el-radio v-for="sms_channel in smss" :key="sms_channel.id" :label="sms_channel.id">{{sms_channel.title}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱通道" prop="email_ids">
          <div style="width:5%;float:left;">
            <el-checkbox v-model="checkEmailAll" :indeterminate="isEmailIndeterminate"
                         @change="handleCheckAllEmailChange">全选
            </el-checkbox>
          </div>
          <div style="width:95%;float:left;">
            <el-checkbox-group v-model="resEmailsmsModel.email_id" @change="handleCheckedEmailChange">
              <el-checkbox v-for="mail_channel in mails" :key="mail_channel.id" :label="mail_channel.id">{{ mail_channel.title }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item v-if="$store.getters.butts.includes('ParamEmailsmsIndexSave')">
          <el-button type="primary" @click="saveEmailsmsForm()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import { err, succ, warn } from '@/utils/message'
  import { getEmailsmsInfo, saveEmailsmsInfo } from '@/api/param/system'
  import { getAll as getMailAll } from '@/api/param/mail'
  import { getAll as getSmsAll } from '@/api/param/sms'
  export default {
    name: 'ParamEmailsmsIndex',
    data() {
      const validateEmailIds = (rule, value, callback) => {
        if (this.resEmailsmsModel.email_id.length == 0) {
          callback(new Error('请至少选择一个邮件通道!'))
        } else {
          callback()
        }
      }
      return {
        checkEmailAll: false,
        isEmailIndeterminate: true,
        mails: [],
        smss: [],
        resEmailsmsModel: {
          id: 1,
          sms_id: 0,
          email_id: []
        },
        resEmailsmsRules: {
          sms_id: [{required: true, message: '请选择短信通道', trigger: 'change'}],
          email_ids: [{required: true, trigger: 'change', validator: validateEmailIds}]
        }
      }
    },
    // 初始化执行的
    created() {
      this.getMail()//获取邮箱类型
      this.getSms()//获取短信类型
      this.getEmailsmsInfo()// 获取参数上传数据
    },
    methods: {
      async getMail(){
        const res = await getMailAll();
        this.mails = res.data;
      },
      async getSms(){
        const res = await getSmsAll();
        this.smss = res.data;
      },
      async getEmailsmsInfo() {
        await getEmailsmsInfo({id: 1}).then(res => {
          var row = res.data
          this.resEmailsmsModel.sms_id = row.sms_id * 1
          const checkedEmailsms = row.email_id.split(',')// 拆分成数组
          const checkedEmailsmsCou = checkedEmailsms.length
          this.checkEmailAll = checkedEmailsmsCou === this.mails.length
          this.isEmailIndeterminate = checkedEmailsmsCou > 0 && checkedEmailsmsCou !== this.mails.length
          for (let j = 0; j < checkedEmailsms.length; j++) {
            this.resEmailsmsModel.email_id.push(checkedEmailsms[j] * 1)
          }
          this.$nextTick(() => {
            this.$refs['resEmailsmsForm'].clearValidate()
          })
        })
      },
      saveEmailsmsForm() {
        this.$refs.resEmailsmsForm.validate((valid) => {
          if (valid) {
            saveEmailsmsInfo(this.resEmailsmsModel).then(res => {
              succ(res.message)
              this.getEmailsmsInfo()
            })
          }
        })
      },
      handleCheckAllEmailChange(val) {
        if(val == false){
          this.resEmailsmsModel.email_id = [];
          this.checkEmailAll = false
        }else{
          for (let i = 0; i < this.mails.length; i++) {
            this.resEmailsmsModel.email_id.push(this.mails[i].id)
          }
          this.checkEmailAll = true
        }
        this.isEmailIndeterminate = this.resEmailsmsModel.email_id.length > 0 && this.resEmailsmsModel.email_id.length < this.mails.length
      },
      handleCheckedEmailChange(value) {
        const checkedCount = value.length
        this.checkEmailAll = checkedCount === this.mails.length
        this.isEmailIndeterminate = checkedCount > 0 && checkedCount < this.mails.length
      }
    }
  }
</script>

二、添加ajax请求

        在根目录下src文件夹下api文件夹下param文件夹下system.js，代码如下

// 获取邮箱短信配置信息
export function getEmailsmsInfo(data) {
  return request({
    url: '/param/emailsms/get_info',
    method: 'post',
    data
  })
}
// 保存邮箱短信配置信息
export function saveEmailsmsInfo(data) {
    return request({
        url: '/param/emailsms/save_info',
        method: 'post',
        data
    })
}