一、添加视图

        在根目录下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.datathis.resEmailsmsModel.sms_id = row.sms_id * 1const checkedEmailsms = row.email_id.split(',')// 拆分成数组const checkedEmailsmsCou = checkedEmailsms.lengththis.checkEmailAll = checkedEmailsmsCou === this.mails.lengththis.isEmailIndeterminate = checkedEmailsmsCou > 0 && checkedEmailsmsCou !== this.mails.lengthfor (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.lengththis.checkEmailAll = checkedCount === this.mails.lengththis.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})
}