<template>
<div class="content">
<tool-table>
<template #toolbar>
<el-form
ref="searchForm"
:inline="true"
:model="searchForm"
label-width="90px"
@submit.native.prevent
>
<el-form-item label="模板名称:">
<el-input v-model="searchForm.teName" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search()">查询</el-button>
<el-button @click="reset()">重置</el-button>
<el-button type="primary" @click="handleAdd()">新增</el-button>
</el-form-item>
</el-form>
</template>
<template #table>
<el-table
:data="tableData"
:append-to-body="true"
style="width: 100%;overflow-y: auto;"
v-loading="loading"
border
highlight-current-row
:header-cell-style="headerClass"
>
<el-table-column label="序号" type="index" width="50px"></el-table-column>
<el-table-column label="操作" width="200px">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.row)" icon="el-icon-edit"></el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row.teId)"
icon="el-icon-delete"
></el-button>
<el-button
v-if="scope.row.teAutomatic==1"
size="mini"
type="primary"
@click="handleExa(scope.row)"
>审核</el-button>
</template>
</el-table-column>
<el-table-column prop="teOtherId" label="模板ID" width="100px"></el-table-column>
<el-table-column prop="teName" label="模板名称" width="130px"></el-table-column>
<el-table-column prop="teType" label="模板类型" width="100px">
<template #default="scope">
<span v-if="scope.row.teType == 1">腾讯云信</span>
<span v-else-if="scope.row.teType == 2">网易云信</span>
</template>
</el-table-column>
<el-table-column prop="teContent" label="模板内容" width="600px"></el-table-column>
<el-table-column prop="teParamStr" label="模板参数" width="200px"></el-table-column>
<el-table-column prop="teRemake" label="模板备注" width="100px"></el-table-column>
<el-table-column prop="teStatus" label="审核状态" width="100px">
<template #default="scope">
<span v-if="scope.row.teStatus == 2">审核失败</span>
<span v-else-if="scope.row.teStatus == 0">待审核</span>
<span v-else-if="scope.row.teStatus == 1">审核中</span>
<span v-else-if="scope.row.teStatus == 3">审核成功</span>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" width="140px">
<template #default="scope">
{{
scope.row.createTime
? $moment(scope.row.createTime).format("YYYY-MM-DD HH:mm")
: ""
}}
</template>
</el-table-column>
<el-table-column prop="createUser.name" label="创建人"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="searchForm.pageIndex"
:page-sizes="[20, 50, 100, 200, 300, 400, 500]"
:page-size="searchForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</template>
</tool-table>
<ysDialog
:title="editType === 'add' ? '新增' : '编辑'"
:width="'950px'"
:closeOnClickModal="false"
ref="ysDialog"
@handleSubmit="handleSubmit"
@search="search"
>
<template #form>
<el-form :model="ruleForm" ref="ruleForm" :inline="true" label-width="100px" :rules="rules">
<el-form-item label="模板名称" prop="teName">
<el-input v-model="ruleForm.teName"></el-input>
</el-form-item>
<el-form-item label="模板类型" prop="teType">
<el-select
v-model="ruleForm.teType"
placeholder="请选择"
:disabled="isEdit"
@change="changeTemplate"
>
<el-option
v-for="item in teTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="模板ID" prop="teOtherId" v-if=" autoType == 1">
<el-input v-model="ruleForm.teOtherId"></el-input>
</el-form-item>
<el-form-item label="模板内容" prop="teContent">
<el-input
v-model="ruleForm.teContent"
type="textarea"
:rows="4"
style="width:435px"
placeholder="请输入内容"
></el-input>
</el-form-item>
<div class="teParamStrBox">
<el-form-item label="内容参数">
<div class="tr" v-for="(item, index) in paramAry" :key="index">
<span>{{ index+1 +"、" }}</span>
<el-select v-model="item.name" placeholder="请选择" clearable>
<el-option
v-for="item in teParamStrOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-button type="text" icon="el-icon-remove" class="delBtn" @click="onDel(index)"></el-button>
<p class="tip" v-show="item.isTip">请先选择</p>
</div>
<el-button type="text" icon="el-icon-circle-plus" class="ys-green" @click="onAdd" />
</el-form-item>
</div>
<el-form-item label="模板备注" prop="teRemake">
<el-input
v-model="ruleForm.teRemake"
type="textarea"
:rows="4"
style="width:435px"
placeholder="请输入内容"
></el-input>
</el-form-item>
</el-form>
</template>
</ysDialog>
<el-dialog :title="'审核'" :visible.sync="exaVisible" width="400px" :close-on-click-modal="false">
<el-form label-width="100px">
<el-form-item label="审核状态:">
<el-select v-model="teStatus" placeholder="请选择">
<el-option
v-for="item in teStatusStatus"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="exaVisible = false">取 消</el-button>
<el-button type="primary" @click="handleChangeExa()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
get_template_ListNew,
get_templateNew,
delete_templateNew,
get_template_remake,
up_statusNew,
getSmsTemplateType
} from './api'
import { loadUserByIdBatch } from '@/services/core'
import tool_table from '@/views/components/tool_table'
import ysDialog from '@/components/revisit/VisitDialog'
export default {
components: {
'tool-table': tool_table,
ysDialog: ysDialog
},
data() {
return {
loading: false,
total: 0,
tableData: [],
searchForm: {
pageIndex: 1,
pageSize: 15,
teName: ''
},
teRemake: '',
editType: '',
isSubmit: true,
ruleForm: {
teId: '',
teOtherId: '',
teName: '',
teContent: '',
teType: '',
teRemake: '',
teParamStr: ''
},
paramAry: [{ name: '', isTip: false }],
teParamStrOptions: [
{
value: 'customerCode',
label: 'customerCode(卡号)'
},
{
value: 'customerName',
label: 'customerName(客户名称)'
},
{
value: 'customerSex',
label: 'customerSex(客户性别)'
}
],
teTypeOptions: [],
rules: {
teOtherId: [{ required: true, message: '请输入模板ID', trigger: 'blur' }],
teName: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
teType: [{ required: true, message: '请选择模板类型', trigger: 'blur' }],
teContent: [{ required: true, message: '请输入模板内容', trigger: 'blur' }]
},
exaVisible: false,
rowData: '',
exaValue: '',
teStatusStatus: [
{
value: 2,
label: '审核失败'
},
{
value: 3,
label: '审核成功'
}
],
teStatus: '',
isEdit: false,
autoTypeList: '',
autoType: ''
}
},
mounted() {
getSmsTemplateType().then(res => {
if (res.code == 200) {
this.autoTypeList = res.data
this.teTypeOptions = res.data.map(item => {
return { label: item.lable, value: Number(item.value) }
})
} else {
if (res.msg.includes('登录已失效，请重新登录')) {
$message.error('登录已失效，请重新登录')
this.$router.push('/login')
return
} else {
$message.error(res.msg)
}
}
})
this.searchFn()
},
methods: {
headerClass() {
return 'background:#f8f8f9;'
},
async searchFn() {
this.loading = true
var findAll = await get_template_ListNew(this.searchForm).catch(res => {
this.tableData = []
this.loading = false
})
if (findAll.code == 200) {
if (findAll.data.records.length > 0) {
try {
await loadUserByIdBatch(findAll.data.records, 'createUser', row => row.createUserId)
} catch {}
this.tableData = findAll.data.records
this.total = findAll.data.total
} else {
this.tableData = []
}
} else {
if (findAll.msg.includes('登录已失效，请重新登录')) {
$message.error('登录已失效，请重新登录')
this.$router.push('/login')
return
} else {
$message.error(findAll.msg)
}
}
this.loading = false
},
search() {
this.searchForm.pageIndex = 1
this.searchFn()
},
async handleAdd() {
this.editType = 'add'
this.initRuleForm()
this.isSubmit = true
this.$refs.ysDialog.open()
this.isEdit = false
},
async handleEdit(row) {
this.initRuleForm()
this.editType = 'edit'
this.isSubmit = true
this.$refs.ysDialog.open()
this.isEdit = true
this.ruleForm.teId = row.teId
this.ruleForm.teOtherId = row.teOtherId
this.ruleForm.teName = row.teName
this.ruleForm.teContent = row.teContent
this.ruleForm.teType = row.teType
this.ruleForm.teRemake = row.teRemake
if (!row.teParamStr) {
this.paramAry = [{ name: '', isTip: false }]
} else {
this.paramAry = []
row.teParamStr.split(',').forEach((v, i) => {
let obj = {}
obj.name = v
obj.isTip = false
this.paramAry.push(obj)
})
}
},
async handleSubmit() {
let teContentNum = this.ruleForm.teContent.split('{').length - 1
let paramAryName = []
this.paramAry.forEach((v, i) => {
console.log(v, i)
if (v.name != '') {
paramAryName.push(v.name)
}
})
if (teContentNum != paramAryName.length) {
this.$message.error(`内容参数个数和模板内容占位符个数不一致!`)
return false
}
this.ruleForm.teParamStr = paramAryName.join(',')
this.$refs['ruleForm'].validate(valid => {
if (valid) {
console.log('this.ruleForm', this.ruleForm)
if (this.isSubmit && this.editType == 'add') {
this.$refs.ysDialog.handleSubmit({
data: this.ruleForm,
type: 'Post',
url: '/api/sms/v1/addCommSmsTemplate'
})
} else {
this.$refs.ysDialog.handleSubmit({
data: this.ruleForm,
type: 'Post',
url: '/api/sms/v1/upCommSmsTemplateById'
})
}
}
})
},
async handleDelete(teId) {
let obj = {}
obj.teId = teId
obj.teDeleted = 1
this.$confirm('确定要删除吗？', {
type: 'warning'
}).then(async () => {
delete_templateNew(obj).then(res => {
if (res.code == 200) {
$message.success('删除成功！')
this.searchFn()
} else {
if (res.msg.includes('登录已失效，请重新登录')) {
$message.error('登录已失效，请重新登录')
this.$router.push('/login')
return
} else {
$message.error(res.msg)
}
}
})
})
},
async handleExa(row) {
this.exaVisible = true
this.rowData = row
this.teStatus = ''
},
async handleChangeExa() {
let params = {}
params.teId = this.rowData.teId
params.teStatus = this.teStatus
await up_statusNew(params).then(res => {
if (res.code == 200) {
$message.success('审核成功')
} else {
if (res.msg.includes('登录已失效，请重新登录')) {
$message.error('登录已失效，请重新登录')
this.$router.push('/login')
return
} else {
$message.error(res.msg)
}
}
})
this.exaVisible = false
this.searchFn()
},
reset() {
this.searchForm = {
pageIndex: 1,
pageSize: 15,
teName: ''
}
},
initRuleForm() {
this.ruleForm = {
teId: '',
teName: '',
teContent: '',
teType: '',
teRemake: '',
teParamStr: ''
}
this.paramAry = [{ name: '', isTip: false }]
},
onAdd() {
let teContentNum = this.ruleForm.teContent.split('{').length - 1
let paramAryNum = this.paramAry.length
if (teContentNum == 0) {
this.$message.warning(`模板内容中无参数占位符!`)
return
}
if (paramAryNum < teContentNum) {
this.paramAry.push({ name: '', isTip: false })
} else {
this.$message.warning(`内容参数只能选择${teContentNum}个`)
}
},
onDel(index) {
let teContentNum = this.ruleForm.teContent.split('{').length - 1
let paramAryNum = this.paramAry.length
if (paramAryNum <= teContentNum) {
this.$message.warning(`内容参数不能少于${teContentNum}个`)
return
}
this.paramAry.splice(index, 1)
},
handleSizeChange(val) {
this.searchForm.pageSize = val
this.searchFn()
},
handleCurrentChange(val) {
this.searchForm.pageIndex = val
this.searchFn()
},
changeTemplate(val) {
this.autoTypeList.forEach(v => {
if (v.value == val) {
this.autoType = v.autoType
}
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
box-sizing: border-box;
// min-height: 100%;
height: 100%;
.el-input__inner {
max-width: rpx(170);
}
.el-icon-check {
color: #66b1ff;
font-size: rpx(20);
}
.el-icon-remove-outline {
color: #f00;
font-size: rpx(20);
}
.detail_split {
background: #f2f2f2;
width: 960px;
height: 30px;
font-size: 20px;
line-height: 30px;
}
}
.paramTip .tip {
padding-left: 100px;
margin-top: -12px;
margin-bottom: 18px;
font-size: 12px;
color: #f56c6c;
}
.teParamStrBox {
.tr {
margin-top: 10px;
}
.tr:first-child {
margin-top: 0px;
.delBtn {
display: none;
}
}
button {
font-size: rpx(20);
margin-left: 10px;
}
.ys-green {
position: absolute;
top: -5px;
left: 202px;
}
}
.el-table::before {
height: 0px;
}
</style>
