<template>
<e
-layout>
<!
-- 搜索
-->
<template v
-slot:search
-bar>
<el
-form :inline="true" :model="searchForm" @keyup.enter.native="search" @submit.native.prevent>
<el
-form
-item>
<el
-date
-picker
v
-model="searchForm.date"
type="datetimerange"
:picker
-options="$constants.datePickerOptions"
:range
-separator="$t('Common.searchForm.datePicker.separator')"
:start
-placeholder="$t('Common.searchForm.datePicker.startTime')"
:end
-placeholder="$t('Common.searchForm.datePicker.endTime')"
value
-format="yyyy
-MM
-dd HH:mm:ss"
:default
-time="['00:00:00', '23:59:59']"
align="right">
</el
-date
-picker>
</el
-form
-item>
<el
-form
-item>
<el
-input v
-model="searchForm.ani" :placeholder="$t('OutboundCallJob.searchForm.ani')" clearable></el
-input> <!
-- 主叫号码
-->
</el
-form
-item>
<el
-form
-item>
<el
-input v
-model="searchForm.dnis" :placeholder="$t('OutboundCallJob.searchForm.dnis')" clearable></el
-input> <!
-- 被叫号码
-->
</el
-form
-item>
<el
-form
-item>
<template>
<el
-select v
-model="searchForm.status" :placeholder="$t('OutboundCallJob.searchForm.status')" clearable>
<el
-option :label="$t('Common.enum.status.enabled')" value="enabled"></el
-option> <!
-- 启用
-->
<el
-option :label="$t('Common.enum.status.disabled')" value="disabled"></el
-option> <!
-- 停用
-->
</el
-select>
</template>
</el
-form
-item>
<el
-form
-item>
<el
-button type="primary" size="mini" @click="search" :loading="loading" icon="el
-icon
-search">{{ $t('Common.button.search') }}</el
-button> <!
-- 搜索
-->
</el
-form
-item>
</el
-form>
</template>
<!
-- 按钮
-->
<template v
-slot:btn
-bar>
<el
-row>
<el
-button type="success" size="mini" @click="toAdd" icon="el
-icon
-plus" v
-has
-permission="'monitor:outbound
-call
-task:addCycle'">{{ $t('Common.button.new') }}</el
-button> <!
-- 新建
-->
</el
-row>
</template>
<!
-- 表格
-->
<template v
-slot:main
-content>
<el
-table :data="tableData" height="100%" highlight
-current
-row ref="clearTableData">
<template slot="empty">
<el
-empty :description="$t('Common.table.emptyDescription')" /> <!
-- 暂无数据
-->
</template>
<el
-table
-column type="index" :label="$t('Common.table.index')" width="50" fixed="left" align='center'/> <!
-- 序号
-->
<el
-table
-column prop="createTime" :label="$t('OutboundCallJob.table.createTime')" min
-width="150" align='center'/> <!
-- 创建时间
-->
<el
-table
-column prop="userName" :label="$t('OutboundCallJob.table.userName')" min
-width="120" align='left'/> <!
-- 创建人
-->
<el
-table
-column prop="ani" :label="$t('OutboundCallJob.table.ani')" min
-width="150" align='left'/> <!
-- 主叫号码
-->
<el
-table
-column prop="dnis" :label="$t('OutboundCallJob.table.dnis')" min
-width="150" align='left'/> <!
-- 被叫号码
-->
<el
-table
-column prop="status" :label="$t('OutboundCallJob.table.status')" min
-width="100" align='center'> <!
-- 状态
-->
<template v
-slot="scope">
<el
-tag v
-if="scope.row.status === 'disabled'" type="info" effect="plain">{{ $t('Common.enum.status.disabled') }}</el
-tag> <!
-- 停用
-->
<el
-tag v
-else
-if="scope.row.status === 'enabled'" type="success" effect="plain">{{ $t('Common.enum.status.enabled') }}</el
-tag> <!
-- 启用
-->
</template>
</el
-table
-column>
<el
-table
-column prop="text" :label="$t('OutboundCallJob.table.text')" show
-overflow
-tooltip min
-width="300" align='left'/> <!
-- 文本内容
-->
<el
-table
-column prop="cron" :label="$t('OutboundCallJob.table.cron')" min
-width="100" align='left'/> <!
-- cron表达式
-->
<el
-table
-column :label="$t('Common.table.operate')" min
-width="200" class
-name="small
-padding fixed
-width" fixed="right" > <!
-- 操作
-->
<template v
-slot="scope">
<span>
<el
-button type='text' class="row
-button" @click.stop="toEdit(scope.row)" v
-has
-permission="'outbound:cycle:update'"><i class="el
-icon
-edit"> </i>{{ $t('Common.button.edit') }}</el
-button> <!
-- 编辑
-->
<el
-button type="text" class="row
-button" @click.stop="toDelete(scope.row)" v
-has
-permission="'outbound:cycle:delete'"><i class="el
-icon
-delete"> </i>{{ $t('Common.button.delete') }}</el
-button> <!
-- 删除
-->
<el
-button type="text" class="row
-button" @click.stop="viewDetail(scope.row)"><i class="el
-icon
-document"> </i>{{ $t('OutboundCallTask.detailLabel') }}</el
-button> <!
-- 执行详情
-->
</span>
</template>
</el
-table
-column>
</el
-table>
</template>
<!
--分页工具条
-->
<template v
-slot:pagination
-bar>
<el
-pagination
@size
-change="handleSizeChange"
@current
-change="handleCurrentChange"
:current
-page.sync="pagination.currentPage"
:page
-size.sync="pagination.pageSize"
:page
-sizes="pagination.pageSizes"
:total="pagination.total"
layout="prev, pager, next, total, sizes, jumper"
background
>
</el
-pagination>
</template>
<!
-- 新建弹窗
-->
<el
-dialog :title="dialogTitle" :visible.sync="isShowDialog" :close
-on
-click
-modal="false" width="600px">
<el
-form ref="addForm" label
-width="90px" :model="form" :rules="addFormRules" >
<!
-- 执行周期
-->
<el
-form
-item :label="$t('OutboundCallJob.form.label.scheduleInterval')" prop="scheduleInterval"> <!
-- 执行周期
-->
<cron
-picker :cron="form.cron" @change="onChange" :locale="en" />
</el
-form
-item>
<!
-- Cron表达式
-->
<el
-form
-item :label="$t('OutboundCallJob.form.label.cron')" prop="cron" style="margin
-top:
-15px"> <!
-- Cron表达式
-->
<el
-input v
-model="form.cron" disabled></el
-input>
</el
-form
-item>
<!
-- 主叫号码
-->
<el
-form
-item :label="$t('OutboundCallJob.form.label.ani')" prop="ani"> <!
-- 主叫号码
-->
<el
-input v
-model="form.ani" :placeholder="$t('OutboundCallJob.form.placeholder.ani')"></el
-input>
</el
-form
-item>
<!
-- 被叫号码
-->
<el
-form
-item :label="$t('OutboundCallJob.form.label.dnis')" prop="dnis"> <!
-- 被叫号码
-->
<div style="display: flex; justify
-content: space
-between">
<el
-input v
-model="form.dnis" :placeholder="$t('OutboundCallJob.form.placeholder.dnis')" style="margin
-right: 10px"></el
-input>
<el
-button type="success" icon="el
-icon
-share" @click.prevent="fillMyMobile">{{ $t('Common.button.copy') }}</el
-button> <!
-- 我的号码
-->
</div>
</el
-form
-item>
<!
-- 文本内容
-->
<el
-form
-item :label="$t('OutboundCallJob.form.label.text')" prop="text" :autosize="{ minRows: 4, maxRows: 8}">
<el
-input type="textarea" v
-model="form.text" :placeholder="$t('OutboundCallJob.form.placeholder.text')"></el
-input>
</el
-form
-item>
<!
-- 状态
-->
<el
-form
-item :label="$t('OutboundCallJob.form.label.status')">
<template>
<el
-radio
-group v
-model="form.status">
<el
-radio label="enabled">{{ $t('Common.enum.status.enabled') }}</el
-radio> <!
-- 启用
-->
<el
-radio label="disabled">{{ $t('Common.enum.status.disabled') }}</el
-radio> <!
-- 停用
-->
</el
-radio
-group>
</template>
</el
-form
-item>
</el
-form>
<div slot="footer" class="dialog
-footer">
<el
-button @click="isShowDialog = false" icon="el
-icon
-close">{{ $t('Common.dialog.button.cancel') }}</el
-button> <!
-- 取 消
-->
<el
-button type="primary" @click="createCallJob" icon="el
-icon
-check">{{ $t('Common.dialog.button.save') }}</el
-button> <!
-- 保 存
-->
</div>
</el
-dialog>
</e
-layout>
</template>
<script>
import CronPicker from 'cron
-picker
-vue'
import expiringStorage from '@/utils/expiringStorage'
export default {
components: {
CronPicker
},
data () {
return {
tableData: [],
dialogTitle: '',
isShowDialog: false,
searchForm: {
status: '',
result: '',
ani: '',
dnis: '',
date: []
},
form: {
scheduleInterval: '
day', // 调度周期
cron: '', // Cron 表达式
ani: '',
dnis: '',
status: '',
text: ''
},
// 表单验证
addFormRules: {
cron: [
{ required: true, message: this.$t('OutboundCallJob.rules.addFormRules.cron.required'), trigger: 'blur' } // 执行周期不能为空
],
dnis: [
{ required: true, message: this.$t('OutboundCallJob.rules.addFormRules.dnis.required'), trigger: 'blur' } // 被叫号码不能为空
],
text: [
{ required: true, message: this.$t('OutboundCallJob.rules.addFormRules.text.required'), trigger: 'blur' } // 文本内容不能为空
]
},
loading: false,
pagination: {
currentPage: 1,
pageSize: 20,
total: 0,
pageSizes: [20, 40, 60, 80, 100, 200, 500]
}
}
},
computed: {
cronLocale () {
return {
everyText: this.$t('CronPicker.every'),
minutesText: this.$t('CronPicker.minutes'),
hoursText: this.$t('CronPicker.hours'),
daysText: this.$t('CronPicker.
days'),
weeksText: this.$t('CronPicker.weeks'),
monthsText: this.$t('CronPicker.months'),
yearsText: this.$t('CronPicker.years'),
specificWeek
dayText: this.$t('CronPicker.specificWeek
day'),
specificDateText: this.$t('CronPicker.specificDate'),
specificTimeText: this.$t('CronPicker.specificTime'),
specificMinuteText: this.$t('CronPicker.specificMinute'),
specificHourText: this.$t('CronPicker.specificHour'),
specific
DayText: this.$t('CronPicker.specific
Day'),
specificMonthText: this.$t('CronPicker.specificMonth'),
specificYearText: this.$t('CronPicker.specificYear'),
atText: this.$t('CronPicker.at'),
andText: this.$t('CronPicker.and'),
onText: this.$t('CronPicker.on'),
ofText: this.$t('CronPicker.of'),
theText: this.$t('CronPicker.
the'),
lastText: this.$t('CronPicker.last'),
firstText: this.$t('CronPicker.first'),
secondText: this.$t('CronPicker.second'),
thirdText: this.$t('CronPicker.third'),
fourthText: this.$t('CronPicker.fourth'),
fifthText: this.$t('CronPicker.fifth'),
sixthText: this.$t('CronPicker.sixth'),
seventhText: this.$t('CronPicker.seventh'),
eighthText: this.$t('CronPicker.eighth'),
ninthText: this.$t('CronPicker.ninth'),
tenthText: this.$t('CronPicker.tenth'),
eleventhText: this.$t('CronPicker.eleventh'),
twelfthText: this.$t('CronPicker.twelfth'),
thirteenthText: this.$t('CronPicker.thirteenth'),
fourteenthText: this.$t('CronPicker.fourteenth'),
fifteenthText: this.$t('CronPicker.fifteenth'),
sixteenthText: this.$t('CronPicker.sixteenth'),
seventeenthText: this.$t('CronPicker.seventeenth'),
eighteenthText: this.$t('CronPicker.eighteenth'),
nineteenthText: this.$t('CronPicker.nineteenth'),
twentiethText: this.$t('CronPicker.twentieth'),
twentyFirstText: this.$t('CronPicker.twentyFirst'),
twentySecondText: this.$t('CronPicker.twentySecond'),
twentyThirdText: this.$t('CronPicker.twentyThird'),
twentyFourthText: this.$t('CronPicker.twentyFourth'),
twentyFifthText: this.$t('CronPicker.twentyFifth'),
twentySixthText: this.$t('CronPicker.twentySixth'),
twentySeventhText: this.$t('CronPicker.twentySeventh'),
twentyEighthText: this.$t('CronPicker.twentyEighth'),
twentyNinthText: this.$t('CronPicker.twentyNinth'),
thirtiethText: this.$t('CronPicker.
thirtieth'),
thirtyFirstText: this.$t('CronPicker.thirtyFirst'),
sun
dayText: this.$t('CronPicker.sun
day'),
mon
dayText: this.$t('CronPicker.mon
day'),
tues
dayText: this.$t('CronPicker.tues
day'),
wednes
dayText: this.$t('CronPicker.wednes
day'),
thurs
dayText: this.$t('CronPicker.thurs
day'),
fri
dayText: this.$t('CronPicker.fri
day'),
satur
dayText: this.$t('CronPicker.satur
day')
}
}
},
created () {
this.search()
},
methods: {
toAdd () {
this.reset()
this.dialogTitle = this.$t('OutboundCallJob.dialog.title.new') // 新建
this.isShowDialog = true
},
toEdit (row) {
this.reset()
this.dialogTitle = this.$t('OutboundCallJob.dialog.title.edit') // 编辑
this.isShowDialog = true
Object.assign(this.form, row)
this.form.id = row.id
},
// 创建确认
createCallJob () {
let fromData = new FormData()
fromData.append('ani', this.form.ani)
fromData.append('dnis', this.form.dnis)
fromData.append('cron', this.form.cron)
fromData.append('status', this.form.status)
fromData.append('scheduleInterval', this.form.scheduleInterval)
fromData.append('text', this.form.text)
this.$refs['addForm'].validate(valid => {
// 判断输入校验是否成功
if (!valid) {
return
}
// 新建
if (!this.form.id) {
this.$http.post(this.$apiUrl('callJobCreate'), fromData,
{ headers: { 'Content
-Type': 'application/json' } }
).
then(response => {
this.$message.success(this.$t('OutboundCallJob.message.createSuccess')) // 创建成功
this.isShowDialog = false
this.search()
})
// 编辑
} else {
fromData.append('id', this.form.id)
this.$http.put(this.$apiUrl('callJobUpdate'), fromData,
{ headers: { 'Content
-Type': 'application/json' } }
).
then(response => {
this.$message.success(this.$t('OutboundCallJob.message.updateSuccess')) // 修改成功
this.isShowDialog = false
this.search()
}).catch((error) => {
console.dir(error)
this.$message.error(error.message)
})
}
})
},
// 删除
toDelete (row) {
this.$confirm(
this.$t('OutboundCallJob.confirm.delete'), // 此操作将删除该任务,是否继续?
this.$t('OutboundCallJob.confirm.title'), // 提示
{
confirmButtonText: this.$t('OutboundCallJob.confirm.confirmButtonText'), // 确定
cancelButtonText: this.$t('OutboundCallJob.confirm.cancelButtonText'), // 取消
type: 'warning'
}).
then(() => {
this.delete(row.id)
})
},
delete (id) {
this.$http.delete(this.$apiUrl('callJobDelete', [id]))
.
then(response => {
this.$message.success(this.$t('OutboundCallJob.message.deleteSuccess')) // 删除成功！
this.search()
})
.catch((error) => {
if (error.response) {
this.$message.error(`${this.$t('OutboundCallJob.message.deleteFail')}: ${error.response.data.message}`) // 删除失败! ${error.response.data.message}
} else {
this.$message.error(`${this.$t('OutboundCallJob.message.deleteFail')}: ${error.message}`) // 删除失败! ${error.message}
}
})
},
// 列表搜索
search () {
let startTime = ''
let endTime = ''
if (this.searchForm.date && this.searchForm.date.length > 0) {
startTime = this.searchForm.date[0]
endTime = this.searchForm.date[1]
}
let form = {
startTime: startTime,
endTime: endTime,
page: this.pagination.currentPage,
size: this.pagination.pageSize,
...this.searchForm
}
let url = this.$apiUrl('callJobSearch') + '?' + this.$qs.stringify(form)
this.$http.get(url).
then(response => {
this.tableData = response.data.data.records
this.pagination.total = response.data.data.total
}).catch((error) => {
this.$message.error(error.message)
})
},
// 重置表单
reset () {
this.form = {
scheduleInterval: '
day', // 调度周期
cron: '', // Cron 表达式
ani: '',
dnis: '',
status: 'enabled',
text: ''
}
this.$nextTick(() => {
this.$refs['addForm'].clearValidate()
})
},
fillMyMobile () {
let user = expiringStorage.get('user')
console.log(user)
if (user.mobile) {
this.form.dnis = user.mobile
}
},
viewDetail (callJob) {
this.$emit('navigateToDetail', callJob.id)
},
// change 事件会返回新的 interval 和 cron
onChange (cron) {
console.log(cron)
this.form.cron = cron
},
handleSizeChange (val) {
this.pagination.pageSize = val
this.search()
},
handleCurrentChange (val) {
this.pagination.currentPage = val
this.search()
}
}
}
</script>
<style scoped lang="scss">
::v
-deep .cron
-picker .el
-select {
margin
-bottom: 15px;
}
</style>
欢迎收听美国马赛克节目。节目中我们将播放电子吉他手马尼斯特恩的音乐，并且回答有关作家托妮莫里森的问题。此外，我们还将介绍已故披头士乐队成员约翰·列侬的一些特别的汽车销售情况。1965年，披头士乐队发行了歌曲《Drive My Car》，同年约翰·列侬通过了他的驾驶考试。很快，许多汽车经销商出现在他的家门口，希望能说服这位明星购买他们的汽车。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
