You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
flyapps/fir_client/src/components/user/FirUserNotify.vue

733 lines
24 KiB

<template>
<el-main>
<el-dialog :close-on-click-modal="false" :destroy-on-close="true" :title="title"
:visible.sync="dialogReceiverVisible" width="780px">
<el-form ref="recevierform" :model="addreceiverinfo"
label-width="80px" style="margin:0 auto;">
<el-form-item label="姓名">
<el-input v-model="addreceiverinfo.receiver_name"/>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="addreceiverinfo.email"/>
</el-form-item>
<el-form-item v-if="captcha.captcha_image" style="height: 40px">
<el-row style="height: 40px">
<el-col :span="16">
<el-input v-model="addreceiverinfo.verify_code" clearable maxlength="6"
placeholder="请输入验证码" @keyup.enter.native="onSubmit"/>
</el-col>
<el-col :span="8">
<el-image
:src="captcha.captcha_image"
fit="contain"
style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px" @click="get_auth_code">
</el-image>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-row>
<el-col :span="16">
<el-input v-model="addreceiverinfo.seicode" clearable
placeholder="邮箱验证码" prefix-icon="el-icon-mobile"/>
</el-col>
<el-col :span="8">
<el-button plain style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px" type="info"
@click="onGetCode">获取验证码
</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<div id="captcha" ref="captcha"></div>
</el-form-item>
<el-form-item label="微信">
<el-tag v-if="addreceiverinfo.wxopenid && addreceiverinfo.wxopenid.length > 6">
{{ addreceiverinfo.wxopenid }}
</el-tag>
<el-popover v-else
v-model="wx_visible"
placement="top"
title="打开微信扫一扫进行绑定"
trigger="manual">
<div>
<el-image :src="wx_login_qr_url" style="width: 176px;height: 166px"/>
</div>
<el-button slot="reference" size="small" @click="wxLogin">绑定微信</el-button>
</el-popover>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="addreceiverinfo.description"/>
</el-form-item>
<el-button @click="saveReceiver">保存</el-button>
<el-button @click="cancelReceiver">取消</el-button>
</el-form>
</el-dialog>
<el-dialog :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="dialogChangeReceiverVisible"
title="修改消息接收人">
<div style="text-align: left;margin-bottom: 10px">
<div style="margin-bottom: 10px">
<el-tag type="warning">提醒:如果以下消息接收人的信息有变更,请到“消息接收人管理”中进行修改。</el-tag>
</div>
消息类型:{{ notifyConfigMsg.message_type }} - {{ notifyConfigMsg.config_name }}
</div>
<el-table
ref="multipleTable"
:data="receiver_info_lists"
border
stripe
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
align="center"
fixed
label="姓名"
prop="receiver_name"
width="100">
</el-table-column>
<el-table-column
align="center"
label="邮箱"
prop="email"
width="200">
</el-table-column>
<el-table-column
align="center"
label="微信"
prop="domain_name"
width="260">
<template slot-scope="scope">
<el-popover v-if="scope.row.weixin.openid" placement="top" trigger="hover">
<div style="float: right;margin-top: 10px">
<el-image :src="scope.row.weixin.head_img_url" style="width: 80px;height: 80px"/>
</div>
<p>昵称: {{ scope.row.weixin.nickname }}</p>
<p>性别: {{ scope.row.weixin.sex|sex_filter }}</p>
<p>住址: {{ scope.row.weixin.address }}</p>
<p>微信ID: {{ scope.row.weixin.openid }}</p>
<div slot="reference" class="name-wrapper">
<el-tag>{{ scope.row.weixin.openid }}</el-tag>
</div>
</el-popover>
<el-tag v-else> /</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
label="备注"
prop="description">
</el-table-column>
</el-table>
<div style="text-align: left;margin-bottom: 10px;margin-top: 10px">
<el-button plain size="small" type="primary" @click="addRecevier">
新增消息接收人
</el-button>
</div>
<span slot="footer">
<el-button @click="updateConfig(undefined)">保存</el-button>
<el-button @click="dialogChangeReceiverVisible=false">取消</el-button>
</span>
</el-dialog>
<el-tabs v-model="activeName" tab-position="top" type="border-card" @tab-click="handleClick">
<el-tab-pane label="基本接收管理" name="config">
<el-table
:data="[{name:'消息类型',email:'邮件通知',weixin:'微信通知',user:'消息接收人'}]"
:show-header="false"
border
stripe
style="width: 100%">
<el-table-column
align="center"
prop="name"
width="200">
</el-table-column>
<el-table-column
align="center"
prop="email"
width="200">
</el-table-column>
<el-table-column
align="center"
prop="weixin"
width="200">
</el-table-column>
<el-table-column
align="center"
prop="user">
</el-table-column>
</el-table>
<el-collapse v-model="activeConfig">
<el-collapse-item v-for="info in message_type_choices" :key="info.id" :disabled="info.disabled"
:name="info.id">
<template slot="title">
<div style="width: 200px">
<h2>{{ info.name }}</h2>
</div>
</template>
<el-table
:data="info.data"
:show-header="false"
border
stripe
style="width: 100%">
<el-table-column
align="center"
fixed
prop="config_name"
width="200">
</el-table-column>
<el-table-column
align="center"
fixed
prop="enable_email"
width="200">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.enable_email" @change="updateConfig(scope.row)">邮件</el-checkbox>
</template>
</el-table-column>
<el-table-column
align="center"
fixed
prop="enable_weixin"
width="200">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.enable_weixin" @change="updateConfig(scope.row)">微信</el-checkbox>
</template>
</el-table-column>
<el-table-column
align="center"
fixed
prop="senders">
<template slot-scope="scope">
<el-tag v-for="user in scope.row.senders" :key="user.id" style="margin-right: 3px" type="info">
{{ user.receiver_name }}
</el-tag>
<el-tag type="success">
<el-link :underline="false" type="success" @click="changeNotifyConfig(scope.row)">修改</el-link>
</el-tag>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
</el-tab-pane>
<el-tab-pane label="消息接收人管理" name="receiver">
<div style="float: right;margin-bottom: 10px">
<el-button plain type="primary" @click="addRecevier">
新增消息接收人
</el-button>
</div>
<el-table
v-loading="loading"
:data="receiver_info_lists"
border
stripe
style="width: 100%">
<el-table-column
align="center"
fixed
label="姓名"
prop="receiver_name"
width="100">
</el-table-column>
<el-table-column
align="center"
label="邮箱"
prop="email"
width="200">
</el-table-column>
<el-table-column
align="center"
label="微信"
prop="domain_name">
<template slot-scope="scope">
<el-popover v-if="scope.row.weixin.openid" placement="top" trigger="hover">
<div style="float: right;margin-top: 10px">
<el-image :src="scope.row.weixin.head_img_url" style="width: 80px;height: 80px"/>
</div>
<p>昵称: {{ scope.row.weixin.nickname }}</p>
<p>性别: {{ scope.row.weixin.sex|sex_filter }}</p>
<p>住址: {{ scope.row.weixin.address }}</p>
<p>微信ID: {{ scope.row.weixin.openid }}</p>
<div slot="reference" class="name-wrapper">
<el-tag>{{ scope.row.weixin.openid }}</el-tag>
</div>
</el-popover>
<el-tag v-else> /</el-tag>
</template>
</el-table-column>
<el-table-column
:formatter="formatter"
align="center"
label="添加时间"
prop="create_time"
width="170">
</el-table-column>
<el-table-column
align="center"
label="备注"
prop="description">
</el-table-column>
<el-table-column
align="center"
label="操作"
width="120">
<template slot-scope="scope">
<!-- <el-button size="small" type="text" @click="editReceiver(scope.row)">编辑</el-button>-->
<el-button size="small" type="text" @click="deleteReceiver(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="阈值设置" name="threshold" style="text-align: center">
<el-tag style="margin: 20px 0"> 低于阈值设置,将会出发报警,若您配置了消息接收,将会将报警信息推送至关联的接收人</el-tag>
<div style="margin: auto;width: 700px;height: 100%">
<el-form ref="form" :model="threshold" label-width="180px">
<el-form-item label="下载次数不足阈值设置">
<el-input-number v-model="threshold.notify_available_downloads" :min="0"
style="width: 300px;margin: 0 20px"></el-input-number>
<el-button @click="notifyThreshold('update')">保存修改</el-button>
</el-form-item>
<el-form-item label="签名次数不足阈值设置">
<el-input-number v-model="threshold.notify_available_signs" :min="0"
style="width: 300px;margin: 0 20px"></el-input-number>
<el-button @click="notifyThreshold('update')">保存修改</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
</el-main>
</template>
<script>
import {notifyConfigInfo, NotifyInfoFun, notifyReceiverInfo, wxBindFun, wxLoginFun} from "@/restful";
import {geetest, getUserInfoFun} from "@/utils";
import {checkEmail, checkphone, format_time, getRandomStr} from "@/utils/base/utils";
export default {
name: "FirUserNotify",
data() {
return {
dialogReceiverVisible: false,
captcha: {"captcha_image": '', "captcha_key": '', "length": 8},
change_type: {email: false, sms: false},
wx_visible: false,
wx_login_qr_url: '',
unique_key: '',
userinfo: {},
addreceiverinfo: {description: '', wxopenid: '', email: '', receiver_name: '', verify_code: '', seicode: ''},
message_type_choices: [],
activeConfig: [],
dialogChangeReceiverVisible: false,
notifyConfigSelection: [],
notifyConfigMsg: {},
title: '',
isedit: false,
activeName: 'config',
receiver_info_lists: [],
loading: false,
threshold: {}
}
}, methods: {
onGetCode() {
this.addreceiverinfo.auth_token = '';
this.addreceiverinfo.seicode = '';
this.onSubmit();
},
onSubmit() {
let email = this.addreceiverinfo.email;
let verify_code = this.addreceiverinfo.verify_code;
let captcha_flag = this.addreceiverinfo.verify_code.length === this.captcha.length;
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) {
captcha_flag = true
}
if (captcha_flag) {
let checke = checkEmail(this.addreceiverinfo.email);
let checkp = checkphone(this.addreceiverinfo.email);
if (checke || checkp) {
let params = {
"target": email,
"verify_code": verify_code,
"captcha_key": this.captcha.captcha_key,
"n_type": 'notify',
};
let seicode = this.addreceiverinfo.seicode;
let auth_token = this.addreceiverinfo.auth_token;
if (seicode && seicode.length > 3) {
params['seicode'] = seicode
}
if (auth_token && auth_token.length > 3) {
params['auth_token'] = auth_token
}
if (this.auth_rules.geetest) {
geetest(this, this.addreceiverinfo.email, params, (n_params) => {
this.do_notify_sender(n_params)
}, NotifyInfoFun)
} else {
this.do_notify_sender(params)
}
} else {
this.$message({
message: '邮箱或手机号输入有误',
type: 'error'
});
}
} else {
this.$message({
message: '验证码有误',
type: 'warning'
});
}
},
do_notify_sender(params) {
NotifyInfoFun(data => {
if (data.code === 1000) {
this.$message.success("验证码发送成功")
this.addreceiverinfo.auth_token = data.data.auth_token;
} else {
this.$message.error(data.msg)
}
}, {
'methods': 'POST',
'data': params
})
},
get_auth_code() {
NotifyInfoFun(data => {
if (data.code === 1000) {
this.auth_rules = data.data.auth_rules;
this.captcha = this.auth_rules.captcha;
this.change_type = data.data.change_type;
this.addreceiverinfo.captcha_key = this.captcha.captcha_key;
if (this.addreceiverinfo.verify_code) {
this.addreceiverinfo.verify_code = '';
}
} else {
this.$message({
message: data.msg,
type: 'error'
});
}
}, {
"methods": "GET",
"data": {}
});
},
addRecevier() {
this.addreceiverinfo = {description: '', wxopenid: '', email: '', receiver_name: '', verify_code: '', seicode: ''}
this.dialogReceiverVisible = true
this.title = '新增消息接收人'
this.get_auth_code()
},
editReceiver(receiver) {
this.title = '编辑 ' + receiver.receiver_name + ' 消息接收人'
this.isedit = true
this.addreceiverinfo = receiver
this.dialogReceiverVisible = true
},
updateConfig(config = undefined) {
let data = {}
if (config) {
data = {
'config': config.id,
'enable_email': config.enable_email,
'enable_weixin': config.enable_weixin,
'm_type': config.message_type
}
} else {
let receiver_ids = []
for (let receiver of this.notifyConfigSelection) {
receiver_ids.push(receiver.id)
}
data = {'config': this.notifyConfigMsg.id, 'receiver': receiver_ids, 'm_type': this.notifyConfigMsg.m_type}
}
notifyConfigInfo(data => {
if (data.code === 1000) {
this.$message.success('保存成功')
if (!config) {
this.dialogChangeReceiverVisible = false;
}
this.notifyConfigInfoFun();
} else {
this.$message.error('保存失败,' + data.msg);
}
}, {"methods": 'PUT', "data": data});
},
changeNotifyConfig(info) {
let params = {"config": info.id, "message_type": info.m_type}
this.dialogChangeReceiverVisible = true;
notifyReceiverInfo(data => {
if (data.code === 1000) {
this.receiver_info_lists = data.data;
this.notifyConfigMsg = data.config
// eslint-disable-next-line no-unused-vars
this.$nextTick(res => {
data.data.forEach(row => {
for (let sender of data.senders) {
if (sender.sender === row.id) {
this.$refs.multipleTable.toggleRowSelection(row);
}
}
});
})
} else {
this.$message.error('获取失败,' + data);
}
this.loading = false;
}, {"methods": 'GET', "data": params});
},
handleSelectionChange(val) {
this.notifyConfigSelection = val;
},
// eslint-disable-next-line no-unused-vars
handleClick(tab, event) {
this.get_data_from_tabname(tab.name);
},
cancelReceiver() {
this.dialogReceiverVisible = false;
this.addreceiverinfo = {description: '', wxopenid: '', email: '', receiver_name: '', verify_code: '', seicode: ''}
},
saveReceiver() {
notifyReceiverInfo(data => {
if (data.code === 1000) {
this.$message.success('操作成功');
this.dialogReceiverVisible = false;
if (this.dialogChangeReceiverVisible) {
this.changeNotifyConfig(this.notifyConfigMsg)
} else {
this.get_data_from_tabname(this.activeName);
}
} else {
this.$message.error('操作失败,' + data.msg);
}
}, {"methods": 'POST', 'data': this.addreceiverinfo});
},
deleteReceiver(sinfo) {
this.$confirm(`将要删除接收人 ${sinfo.receiver_name}, 是否继续?`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
notifyReceiverInfo(data => {
if (data.code === 1000) {
this.$message.success('删除成功');
this.notifyReceiverInfoFun();
}
}, {"methods": 'DELETE', 'data': {'id': sinfo.id}})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
notifyReceiverInfoFun() {
this.loading = true;
notifyReceiverInfo(data => {
if (data.code === 1000) {
this.receiver_info_lists = data.data;
} else {
this.$message.error('获取失败,' + data);
}
this.loading = false;
}, {"methods": 'GET'});
},
setActiveConfig(message_type_choices) {
let activeConfig = []
for (let i of message_type_choices) {
activeConfig.push(i.id)
}
this.activeConfig = activeConfig;
},
notifyConfigInfoFun() {
this.loading = true;
notifyConfigInfo(data => {
if (data.code === 1000) {
this.receiver_info_lists = data.data;
this.message_type_choices = data.message_type_choices;
this.setActiveConfig(this.message_type_choices);
} else {
this.$message.error('获取失败,' + data);
}
this.loading = false;
}, {"methods": 'GET'});
},
notifyThreshold(act) {
notifyConfigInfo(data => {
if (data.code === 1000) {
this.threshold = data.data
if (act !== 'get') {
this.$message.success('保存成功')
}
} else {
this.$message.error('获取失败,' + data);
}
this.loading = false;
}, {"methods": 'POST', 'data': {'act': act, 'threshold': this.threshold}});
},
loop_get_wx_info(wx_login_ticket, c_count = 1, unique_key = getRandomStr()) {
if (wx_login_ticket && wx_login_ticket.length < 3) {
this.$message.error("获取登陆码失败,请稍后再试");
return
}
if (!this.wx_visible) {
return;
}
wxLoginFun(data => {
c_count += 1;
if (c_count > 30) {
return;
}
if (data.code === 1000) {
if (this.userinfo.uid === data.data.uid) {
if (data.data.to_user) {
this.addreceiverinfo.wxopenid = data.data.to_user
}
this.$message.success("绑定成功");
this.wx_visible = false;
}
} else if (data.code === 1005) {
this.$message({
message: data.msg,
type: 'error',
duration: 30000
});
} else if (data.code === 1004) {
this.loop_flag = false;
} else if (data.code === 1006) {
return this.loop_get_wx_info(wx_login_ticket, c_count, unique_key)
}
}, {
"methods": "POST",
data: {"ticket": wx_login_ticket, "unique_key": unique_key}
})
},
wxLogin() {
this.wx_visible = !this.wx_visible;
this.wx_login_qr_url = '';
if (this.wx_visible) {
wxBindFun(data => {
if (data.code === 1000) {
this.wx_login_qr_url = data.data.qr;
this.loop_get_wx_info(data.data.ticket);
} else {
this.$message.error(data.msg);
this.wx_visible = false;
}
}, {
"methods": "POST", "data": {"unique_key": this.unique_key, "w_type": 'notify'}
})
}
},
// eslint-disable-next-line no-unused-vars
formatter(row, column) {
return format_time(row.create_time)
},
// eslint-disable-next-line no-unused-vars
get_data_from_tabname(tabname, data = {}) {
this.$router.push({"name": 'FirUserNotify', params: {act: tabname}});
if (tabname === "config") {
this.notifyConfigInfoFun();
} else if (tabname === "receiver") {
this.notifyReceiverInfoFun();
} else if (tabname === "threshold") {
this.notifyThreshold('get');
}
},
}, mounted() {
getUserInfoFun(this);
this.userinfo = this.$store.state.userinfo;
this.unique_key = getRandomStr();
if (this.$route.params.act) {
let activeName = this.$route.params.act;
let activeName_list = ["config", "receiver", "threshold"];
for (let index in activeName_list) {
if (activeName_list[index] === activeName) {
this.activeName = activeName;
this.get_data_from_tabname(activeName);
return
}
}
}
this.get_data_from_tabname(this.activeName);
}, filters: {
sex_filter: function (x) {
let ret = '未知';
if (x === 1) {
ret = '男'
} else if (x === 2) {
ret = '女'
}
return ret;
},
}, watch: {
'$store.state.userinfo': function () {
this.userinfo = this.$store.state.userinfo;
}
}
}
</script>
<style scoped>
.el-main {
text-align: center;
margin: 20px auto 100px;
width: 1166px;
position: relative;
padding-bottom: 1px;
color: #9b9b9b;
-webkit-font-smoothing: antialiased;
border-radius: 1%;
}
</style>