zkthink
508 lines
15 KiB
Vue
508 lines
15 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-form
|
||
ref="form" :model="smsTask" :rules="rules"
|
||
label-position="right"
|
||
label-width="100px" status-icon
|
||
>
|
||
<el-row>
|
||
<el-col :sm="12" :xs="24" style="margin-top: 10px;">
|
||
<el-form-item :label="$t('table.smsTask.templateId')" prop="templateId">
|
||
<el-select
|
||
v-model="smsTask.templateId" :disabled="type==='view'" :multiple="false"
|
||
filterable
|
||
placeholder="请输入关键词" style="width:300px;" @change="changeTemplate"
|
||
>
|
||
<el-option v-for="item in smsTemplateList" :key="item.id" :label="item.name + '('+item.customCode+')'" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :sm="12" :xs="24" style="margin-top: 10px;">
|
||
<el-form-item v-show="type==='view'" :label="$t('table.smsTask.status')" prop="status">
|
||
<el-tag :disabled="type==='view'" :type="smsTask.status | statusFilter">{{ smsTask.status.desc }}</el-tag>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item :label="$t('table.smsTask.receiver')" prop="receiver">
|
||
<el-tag
|
||
v-for="tag in receiverList" :key="tag" :closable="type!=='view'"
|
||
:disable-transitions="false"
|
||
@close="handleClose(tag)"
|
||
>{{ tag }}</el-tag>
|
||
<el-input
|
||
v-if="receiverVisible" ref="saveTagInput" v-model="receiver"
|
||
:disabled="type==='view'"
|
||
class="input-new-tag" @blur="handleInputConfirm" @keyup.enter.native="handleInputConfirm"
|
||
/>
|
||
<el-button v-else :disabled="type==='view'" class="button-new-tag" @click="showInput">添加</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('table.smsTask.topic')" prop="topic">
|
||
<el-input v-model="smsTask.topic" :disabled="type==='view'" />
|
||
</el-form-item>
|
||
<el-form-item :label="$t('table.smsTask.content')" prop="content2">
|
||
<el-row class="message">
|
||
<el-col :sm="12" :xs="24" style="margin-top: 10px;">
|
||
<el-form-item v-for="(item, key, index) in smsTask.templateParam" :key="index" :label="key" prop="content">
|
||
<el-input :disabled="type==='view'" :value="item" maxlength="255" @input="(value)=>{templateCode(value,key,index)}" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :sm="12" :xs="24" style="margin-top: 10px;">
|
||
<el-form-item label="预览：">
|
||
<div class="article" v-html="smsTask.content"></div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<el-row>
|
||
<el-col :sm="12" :xs="24" style="margin-top: 10px;">
|
||
<el-form-item label="定时发送" prop="sendTime">
|
||
<el-radio-group v-model="timing" :disabled="type==='view'" size="medium">
|
||
<el-radio-button :label="false">否</el-radio-button>
|
||
<el-radio-button :label="true">是</el-radio-button>
|
||
</el-radio-group>
|
||
<el-date-picker
|
||
v-show="timing"
|
||
v-model="smsTask.sendTime"
|
||
:disabled="type==='view'"
|
||
:picker-options="pickerOptions"
|
||
align="right"
|
||
format="yyyy-MM-dd HH:mm:ss"
|
||
placeholder="选择发送时间"
|
||
style="margin-left:20px"
|
||
type="datetime"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :sm="12" :xs="24" style="margin-top: 10px;">
|
||
<el-form-item v-show="type==='view'" label="是否草稿" prop="draft">
|
||
<el-radio-group v-model="smsTask.draft" :disabled="type==='view'" size="medium">
|
||
<el-radio-button :label="false">否</el-radio-button>
|
||
<el-radio-button :label="true">是</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
v-show="type!=='view'" :disabled="disabled" plain
|
||
type="primary"
|
||
@click="submitForm(false)"
|
||
>立即发送</el-button>
|
||
<el-button
|
||
v-show="type!=='view'" :disabled="disabled" plain
|
||
type="warning"
|
||
@click="submitForm(true)"
|
||
>存草稿</el-button>
|
||
</div>
|
||
<aside v-show="type!=='view'" class="tips">
|
||
模板提示：
|
||
<p>1.长度不超过500字，单条短信超过70字后，按67字/条分多条计费；</p>
|
||
<p>2.短信模板内容不能包含【】符号。</p>
|
||
</aside>
|
||
<div v-show="type==='view'">
|
||
<send-status-index ref="statusList" :dialog-visible="dialog.isVisible" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import smsTemplateApi from '@/api/SmsTemplate.js'
|
||
import smsTaskApi from '@/api/SmsTask.js'
|
||
import { validMobile } from '@/utils/my-validate'
|
||
import SendStatusIndex from './SendStatusIndex'
|
||
|
||
export default {
|
||
name: 'SmsTaskEdit',
|
||
components: { SendStatusIndex },
|
||
filters: {
|
||
statusFilter (status) {
|
||
const map = {
|
||
WAITING: 'danger',
|
||
SUCCESS: 'success',
|
||
FAIL: 'error'
|
||
}
|
||
return map[status] || 'success'
|
||
}
|
||
},
|
||
props: {
|
||
|
||
},
|
||
data () {
|
||
return {
|
||
dialog: {
|
||
isVisible: false
|
||
},
|
||
type: 'add',
|
||
smsTask: this.initSmsTask(),
|
||
smsTemplateList: [],
|
||
receiverList: [],
|
||
receiverVisible: false,
|
||
receiver: '',
|
||
timing: false,
|
||
disabled: false,
|
||
smsTemplate: '',
|
||
content: '',
|
||
rules: {
|
||
topic: [
|
||
{ required: true, message: this.$t('rules.require'), trigger: 'blur' },
|
||
{ min: 1, max: 255, message: this.$t('rules.range4to10'), trigger: 'blur' }
|
||
],
|
||
templateId: { required: true, message: this.$t('rules.require'), trigger: 'blur' },
|
||
sendTime: {
|
||
validator: (rule, value, callback) => {
|
||
const vm = this
|
||
if (vm.timing) {
|
||
if (vm.smsTask.sendTime) {
|
||
callback()
|
||
} else {
|
||
callback('请选择发送日期')
|
||
}
|
||
} else {
|
||
callback()
|
||
}
|
||
}, trigger: 'change'
|
||
}
|
||
},
|
||
pickerOptions: {
|
||
shortcuts: [{
|
||
text: '一小时后',
|
||
onClick (picker) {
|
||
const date = new Date()
|
||
date.setTime(date.getTime() + 3600 * 1000 * 1)
|
||
picker.$emit('pick', date)
|
||
}
|
||
}, {
|
||
text: '明天',
|
||
onClick (picker) {
|
||
const date = new Date()
|
||
date.setTime(date.getTime() + 3600 * 1000 * 24)
|
||
picker.$emit('pick', date)
|
||
}
|
||
}, {
|
||
text: '一周后',
|
||
onClick (picker) {
|
||
const date = new Date()
|
||
date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
|
||
picker.$emit('pick', date)
|
||
}
|
||
}]
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
watch: {
|
||
$route () {
|
||
if (this.$route.path === '/sms/manage/edit') {
|
||
this.initSmsTemplateList()
|
||
this.loadSendStatus()
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
// 在vue的mount阶段执行的函数都是顺序执行，不会阻塞的，所以如果希望mount阶段的函数也是阻塞的，需要额外写一个async函数，然后把需要同步执行的函数写到里面，然后在mount阶段调用这个额外写的函数
|
||
this.initSmsTemplateList()
|
||
this.loadSendStatus()
|
||
},
|
||
methods: {
|
||
loadSendStatus () {
|
||
const type = this.$route.query.type
|
||
const id = this.$route.query.id
|
||
if (type === 'view') {
|
||
this.$refs.statusList.setTaskId(id)
|
||
}
|
||
},
|
||
async loadSmsTask () {
|
||
const type = this.$route.query.type
|
||
const id = this.$route.query.id
|
||
this.type = type
|
||
if (type) { // 切换到别的页面时，无需重置表单
|
||
// this.smsTask = this.initSmsTask()
|
||
this.reset()
|
||
}
|
||
if (type === 'view') {
|
||
this.disabled = true
|
||
} else {
|
||
this.disabled = false
|
||
}
|
||
|
||
if (id) {
|
||
await smsTaskApi.get(id)
|
||
.then(response => {
|
||
const res = response.data
|
||
this.smsTask = { ...this.smsTask, ...res.data }
|
||
if (type !== 'edit') {
|
||
this.smsTask.id = ''
|
||
}
|
||
this.changeTemplate(this.smsTask.templateId)
|
||
this.receiverList = this.smsTask.receiver.split(",")
|
||
|
||
if (this.smsTask.templateParams) {
|
||
this.smsTask.templateParam = JSON.parse(this.smsTask.templateParams)
|
||
}
|
||
this.smsTask.content = res.data.content
|
||
console.log('查询')
|
||
if (this.smsTask.sendTime) {
|
||
this.timing = true
|
||
} else {
|
||
this.timing = false
|
||
}
|
||
|
||
this.smsTemplate = this.smsTemplateList.find(item => item.id === this.smsTask.templateId)
|
||
})
|
||
}
|
||
},
|
||
changeTemplate (id) {
|
||
const vm = this
|
||
// vm.preSearch()
|
||
if (id) {
|
||
// 遍历模板添加文本框
|
||
for (const item of vm.smsTemplateList) {
|
||
if (item.id === id) {
|
||
let templateParam = {}
|
||
if (typeof (item.templateParams) === 'string') {
|
||
templateParam = JSON.parse(item.templateParams)
|
||
} else {
|
||
templateParam = item.templateParams
|
||
}
|
||
|
||
for (const prop in templateParam) {
|
||
templateParam[prop] = ''
|
||
}
|
||
vm.smsTemplate = item
|
||
if (vm.type !== 'view') {
|
||
console.log('赋值')
|
||
vm.smsTask.templateParam = templateParam
|
||
// vm.smsTask.content = item.content
|
||
this.content = item.content
|
||
}
|
||
break
|
||
}
|
||
}
|
||
vm.changeContent()
|
||
}
|
||
},
|
||
// 模板文本框输入内容
|
||
templateCode (val, key) {
|
||
const vm = this
|
||
vm.smsTask.templateParam[key] = val
|
||
vm.changeContent()
|
||
},
|
||
// 短信内容处理
|
||
changeContent () {
|
||
const vm = this
|
||
if (!vm.smsTemplate) {
|
||
return
|
||
}
|
||
const type = vm.smsTemplate.providerType.code
|
||
let content = vm.smsTemplate.content
|
||
|
||
for (const key in vm.smsTask.templateParam) {
|
||
let strs = ''
|
||
if (type == "TENCENT") {
|
||
strs = '{' + key + '}'
|
||
} else {
|
||
strs = '${' + key + '}'
|
||
}
|
||
if (vm.smsTask.templateParam[key]) {
|
||
content = content.replace(strs, vm.smsTask.templateParam[key])
|
||
}
|
||
}
|
||
if (vm.type !== 'view') {
|
||
console.log('赋值')
|
||
vm.smsTask.content = content
|
||
}
|
||
},
|
||
async initSmsTemplateList () {
|
||
await smsTemplateApi.page({ current: 1, size: 10000, model: {}})
|
||
.then(response => {
|
||
const res = response.data
|
||
if (res.isSuccess) {
|
||
this.smsTemplateList = res.data.records
|
||
}
|
||
})
|
||
await this.loadSmsTask() // 顺序不能变
|
||
},
|
||
initSmsTask () {
|
||
return {
|
||
templateId: '',
|
||
receiver: '',
|
||
topic: '',
|
||
templateParam: {},
|
||
sendTime: null,
|
||
content: '',
|
||
draft: false,
|
||
status: {
|
||
code: '',
|
||
desc: ''
|
||
}
|
||
}
|
||
},
|
||
reset () {
|
||
// 先清除校验，再清除表单，不然有奇怪的bug
|
||
this.$refs.form.clearValidate()
|
||
this.$refs.form.resetFields()
|
||
this.smsTask = this.initSmsTask()
|
||
this.receiverList = []
|
||
},
|
||
submitForm (draft) {
|
||
const vm = this
|
||
if (vm.smsTask.templateParam && Object.keys(vm.smsTask.templateParam).length > 0) {
|
||
let flag = false
|
||
for (const key in vm.smsTask.templateParam) {
|
||
if (!vm.smsTask.templateParam[key]) {
|
||
flag = true
|
||
break
|
||
}
|
||
}
|
||
if (flag) {
|
||
vm.$message({
|
||
message: '发送内容不能为空',
|
||
type: 'error'
|
||
})
|
||
return
|
||
}
|
||
} else {
|
||
vm.$message({
|
||
message: '发送内容不能为空',
|
||
type: 'error'
|
||
})
|
||
return
|
||
}
|
||
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
vm.editSubmit(draft)
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
editSubmit (draft) {
|
||
const vm = this
|
||
vm.smsTask.draft = draft
|
||
vm.smsTask.receiver = vm.receiverList.join(',')
|
||
if (!vm.timing) {
|
||
vm.smsTask.sendTime = null
|
||
}
|
||
if (vm.type === 'edit') {
|
||
vm.update()
|
||
} else {
|
||
vm.save()
|
||
}
|
||
},
|
||
save () {
|
||
const vm = this
|
||
vm.disabled = true
|
||
smsTaskApi.save(vm.smsTask)
|
||
.then((response) => {
|
||
vm.disabled = false
|
||
const res = response.data
|
||
if (res.isSuccess) {
|
||
vm.$message({
|
||
message: vm.$t('tips.createSuccess'),
|
||
type: 'success'
|
||
})
|
||
vm.reset()
|
||
vm.$router.push('/sms/manage')
|
||
}
|
||
})
|
||
},
|
||
update () {
|
||
const vm = this
|
||
vm.disabled = true
|
||
smsTaskApi.update(vm.smsTask)
|
||
.then((response) => {
|
||
vm.disabled = false
|
||
const res = response.data
|
||
if (res.isSuccess) {
|
||
vm.$message({
|
||
message: vm.$t('tips.createSuccess'),
|
||
type: 'success'
|
||
})
|
||
vm.reset()
|
||
vm.$router.push('/sms/manage')
|
||
}
|
||
})
|
||
},
|
||
handleClose (tag) {
|
||
this.receiverList.splice(this.receiverList.indexOf(tag), 1)
|
||
},
|
||
showInput () {
|
||
this.receiverVisible = true
|
||
this.$nextTick(() => {
|
||
this.$refs.saveTagInput.$refs.input.focus()
|
||
})
|
||
},
|
||
handleInputConfirm () {
|
||
const vm = this
|
||
// 正则校验
|
||
const inputValue = vm.receiver
|
||
if (inputValue) {
|
||
if (!validMobile(inputValue)) {
|
||
this.$message({
|
||
message: '该手机号不合法',
|
||
type: 'error'
|
||
})
|
||
vm.$refs.saveTagInput.focus()
|
||
return
|
||
}
|
||
|
||
if (this.receiverList.indexOf(inputValue) === -1) {
|
||
vm.receiverList.push(inputValue)
|
||
vm.receiverVisible = false
|
||
vm.receiver = ''
|
||
} else {
|
||
this.$message({
|
||
message: '该账号已经存在',
|
||
type: 'error'
|
||
})
|
||
vm.$refs.saveTagInput.focus()
|
||
}
|
||
} else {
|
||
this.receiverVisible = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.el-tag {
|
||
margin-right: 10px;
|
||
}
|
||
.button-new-tag {
|
||
margin-left: 10px;
|
||
height: 32px;
|
||
line-height: 30px;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
.input-new-tag {
|
||
width: 120px;
|
||
vertical-align: bottom;
|
||
}
|
||
.message {
|
||
border: 1px solid #ddd;
|
||
padding-bottom: 10px;
|
||
}
|
||
aside {
|
||
margin-top: 10px;
|
||
margin-bottom: 0;
|
||
}
|
||
.tips {
|
||
border: 1px solid #ddd;
|
||
margin-left: 18px;
|
||
}
|
||
.tips p {
|
||
text-indent: 20px;
|
||
padding: 0;
|
||
margin: 0px;
|
||
}
|
||
.article {
|
||
font-size: 12px;
|
||
height: auto;
|
||
}
|
||
</style>
|