<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'),
specificWeekdayText: this.$t('CronPicker.specificWeekday'),
specificDateText: this.$t('CronPicker.specificDate'),
specificTimeText: this.$t('CronPicker.specificTime'),
specificMinuteText: this.$t('CronPicker.specificMinute'),
specificHourText: this.$t('CronPicker.specificHour'),
specificDayText: this.$t('CronPicker.specificDay'),
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'),
sundayText: this.$t('CronPicker.sunday'),
mondayText: this.$t('CronPicker.monday'),
tuesdayText: this.$t('CronPicker.tuesday'),
wednesdayText: this.$t('CronPicker.wednesday'),
thursdayText: this.$t('CronPicker.thursday'),
fridayText: this.$t('CronPicker.friday'),
saturdayText: this.$t('CronPicker.saturday')
}
}
},
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>
最新发布
作者记录了参加培训的第三十天，虽然没有详细的学习内容分享，但提到了计划购买SQL书籍进行自我提升。
扫一扫
702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
