|
|
|
|
@ -1,36 +1,55 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 整个模块的容器类，用于包裹后续的表单、表格、分页以及相关弹窗组件等 -->
|
|
|
|
|
<div class="mod-config">
|
|
|
|
|
<!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
|
|
|
|
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
|
|
|
|
<!-- 标题输入框所在的表单项，使用el-input组件实现输入框，双向绑定dataForm.title，有占位提示文字且可清空输入内容 -->
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input v-model="dataForm.title" placeholder="标题" clearable></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 操作按钮所在的表单项 -->
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<!-- 查询按钮，点击时调用getDataList方法获取符合条件的数据列表 -->
|
|
|
|
|
<el-button @click="getDataList()">查询</el-button>
|
|
|
|
|
<!-- 批量复制按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为成功按钮，点击时调用copyHandle方法，当没有选中的数据项时禁用按钮 -->
|
|
|
|
|
<el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="copyHandle()" :disabled="dataListSelections.length <= 0">批量复制</el-button>
|
|
|
|
|
<!-- 推送消息按钮，根据权限决定是否显示，类型为成功按钮，点击时调用templateMsgTaskHandle方法，当选中的数据项数量不为1时禁用按钮 -->
|
|
|
|
|
<el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="templateMsgTaskHandle()" :disabled="dataListSelections.length!= 1">推送消息</el-button>
|
|
|
|
|
<!-- 批量删除按钮，根据权限决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
|
|
|
|
|
<el-button v-if="isAuth('wx:msgtemplate:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 靠右对齐的表单项，包含同步公众号模板按钮和模板管理指引链接按钮 -->
|
|
|
|
|
<el-form-item class="fr">
|
|
|
|
|
<!-- 同步公众号模板按钮，根据权限决定是否显示，点击时调用syncWxTemplate方法，按钮文字根据同步状态动态变化，正在同步时显示“同步中...”，否则显示“同步公众号模板”，同步过程中按钮禁用 -->
|
|
|
|
|
<el-button v-if="isAuth('wx:msgtemplate:save')" icon="el-icon-sort" type="success" @click="syncWxTemplate()" :disabled="synchonizingWxTemplate">{{synchonizingWxTemplate? '同步中...' : '同步公众号模板'}}</el-button>
|
|
|
|
|
<!-- 模板管理指引链接按钮，点击后在新标签页打开指定的链接 -->
|
|
|
|
|
<el-button><el-link type="primary" icon="el-icon-link" target="_blank" href="https://kf.qq.com/faq/170209E3InyI170209nIF7RJ.html">模板管理指引</el-link></el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，加载数据时显示加载提示，监听选择项变化事件 -->
|
|
|
|
|
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
|
|
|
|
|
<!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
|
|
|
|
|
<el-table-column type="selection" header-align="center" align="center" width="50">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 模板ID列，对应dataList中数据项的templateId属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
|
|
|
|
|
<el-table-column prop="templateId" show-overflow-tooltip header-align="center" align="center" label="模板ID">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 标题列，对应dataList中数据项的title属性，通过插槽使用a标签包裹内容使其可点击跳转（链接地址取自数据项的url属性），设置了表头和内容的对齐方式以及列标题 -->
|
|
|
|
|
<el-table-column prop="title" header-align="center" align="center" label="标题">
|
|
|
|
|
<a :href="scope.row.url" slot-scope="scope">{{scope.row.title}}</a>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 模版名称列，对应dataList中数据项的name属性，设置了表头和内容的对齐方式以及列标题 -->
|
|
|
|
|
<el-table-column prop="name" header-align="center" align="center" label="模版名称">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 模版字段列，对应dataList中数据项的content属性，显示溢出提示，设置了表头和内容的对齐方式以及列宽度 -->
|
|
|
|
|
<el-table-column prop="content" show-overflow-tooltip header-align="center" align="center" label="模版字段" width="200">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 是否有效列，对应dataList中数据项的status属性，通过插槽根据数据项的status值判断显示“是”或“否”，设置了表头和内容的对齐方式以及列标题 -->
|
|
|
|
|
<el-table-column prop="status" header-align="center" align="center" label="是否有效">
|
|
|
|
|
<span slot-scope="scope">{{scope.row.status? "是" : "否"}}</span>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了配置和删除按钮 -->
|
|
|
|
|
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">配置</el-button>
|
|
|
|
|
@ -38,16 +57,22 @@
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
<!-- 分页组件，绑定了相关的分页事件和属性，用于切换每页显示数量、当前页码等操作 -->
|
|
|
|
|
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
<!-- 弹窗, 新增 / 修改 -->
|
|
|
|
|
|
|
|
|
|
<!-- 新增/修改组件，通过属性和事件与父组件进行交互，根据addOrUpdateVisible的值决定是否显示 -->
|
|
|
|
|
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
|
|
|
|
|
<!-- 模板消息任务组件，根据templateMsgTaskVisible的值决定是否显示 -->
|
|
|
|
|
<template-msg-task v-if="templateMsgTaskVisible" ref="templateMsgTask"></template-msg-task>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// 引入新增/修改组件，用于实现模板的新增或修改功能相关交互逻辑
|
|
|
|
|
import AddOrUpdate from './msg-template-add-or-update'
|
|
|
|
|
// 引入模板消息任务组件，用于处理模板消息相关任务逻辑
|
|
|
|
|
import TemplateMsgTask from '@/components/template-msg-task'
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
@ -70,12 +95,15 @@ export default {
|
|
|
|
|
AddOrUpdate, TemplateMsgTask
|
|
|
|
|
},
|
|
|
|
|
activated() {
|
|
|
|
|
// 当组件被激活（例如路由切换到对应页面等情况）时，调用getDataList方法获取数据列表，用于展示初始数据
|
|
|
|
|
this.getDataList()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 获取数据列表
|
|
|
|
|
// 获取数据列表的方法
|
|
|
|
|
getDataList() {
|
|
|
|
|
this.dataListLoading = true
|
|
|
|
|
// 设置正在加载数据的状态为true
|
|
|
|
|
this.dataListLoading = true;
|
|
|
|
|
// 发起HTTP请求获取消息模板的数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
|
|
|
|
|
this.$http({
|
|
|
|
|
url: this.$http.adornUrl('/manage/msgTemplate/list'),
|
|
|
|
|
method: 'get',
|
|
|
|
|
@ -87,128 +115,159 @@ export default {
|
|
|
|
|
'order': 'desc'
|
|
|
|
|
})
|
|
|
|
|
}).then(({ data }) => {
|
|
|
|
|
// 根据返回数据的状态码判断是否请求成功
|
|
|
|
|
if (data && data.code === 200) {
|
|
|
|
|
this.dataList = data.page.list
|
|
|
|
|
this.totalCount = data.page.totalCount
|
|
|
|
|
// 如果成功，更新数据列表和总记录数
|
|
|
|
|
this.dataList = data.page.list;
|
|
|
|
|
this.totalCount = data.page.totalCount;
|
|
|
|
|
} else {
|
|
|
|
|
this.dataList = []
|
|
|
|
|
this.totalCount = 0
|
|
|
|
|
// 如果失败，清空数据列表和总记录数
|
|
|
|
|
this.dataList = [];
|
|
|
|
|
this.totalCount = 0;
|
|
|
|
|
}
|
|
|
|
|
this.dataListLoading = false
|
|
|
|
|
})
|
|
|
|
|
// 请求完成后，设置正在加载数据的状态为false
|
|
|
|
|
this.dataListLoading = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 每页数
|
|
|
|
|
// 每页数量改变时的处理方法，更新每页显示数量，将当前页码重置为1，然后重新获取数据列表
|
|
|
|
|
sizeChangeHandle(val) {
|
|
|
|
|
this.pageSize = val
|
|
|
|
|
this.pageIndex = 1
|
|
|
|
|
this.getDataList()
|
|
|
|
|
this.pageSize = val;
|
|
|
|
|
this.pageIndex = 1;
|
|
|
|
|
this.getDataList();
|
|
|
|
|
},
|
|
|
|
|
// 当前页
|
|
|
|
|
// 当前页码改变时的处理方法，更新当前页码，然后重新获取数据列表
|
|
|
|
|
currentChangeHandle(val) {
|
|
|
|
|
this.pageIndex = val
|
|
|
|
|
this.getDataList()
|
|
|
|
|
this.pageIndex = val;
|
|
|
|
|
this.getDataList();
|
|
|
|
|
},
|
|
|
|
|
// 多选
|
|
|
|
|
// 处理表格中选择项变化的方法，更新选中的数据项列表
|
|
|
|
|
selectionChangeHandle(val) {
|
|
|
|
|
this.dataListSelections = val
|
|
|
|
|
this.dataListSelections = val;
|
|
|
|
|
},
|
|
|
|
|
// 新增 / 修改
|
|
|
|
|
// 新增/修改操作的方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件，传入模板的id（可为空表示新增）
|
|
|
|
|
addOrUpdateHandle(id) {
|
|
|
|
|
this.addOrUpdateVisible = true
|
|
|
|
|
this.addOrUpdateVisible = true;
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.$refs.addOrUpdate.init(id)
|
|
|
|
|
})
|
|
|
|
|
this.$refs.addOrUpdate.init(id);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 删除
|
|
|
|
|
// 删除操作的方法，根据传入的id判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
|
|
|
|
|
deleteHandle(id) {
|
|
|
|
|
var ids = id ? [id] : this.dataListSelections.map(item => item.id)
|
|
|
|
|
// 如果传入了id，表示单个删除，将其放入数组；否则使用选中的数据项的id数组进行批量删除
|
|
|
|
|
var ids = id? [id] : this.dataListSelections.map(item => item.id);
|
|
|
|
|
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id? '删除' : '批量删除'}]操作?`, '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
// 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
|
|
|
|
|
this.$http({
|
|
|
|
|
url: this.$http.adornUrl('/manage/msgTemplate/delete'),
|
|
|
|
|
method: 'post',
|
|
|
|
|
data: this.$http.adornData(ids, false)
|
|
|
|
|
}).then(({ data }) => {
|
|
|
|
|
// 根据返回数据判断删除操作是否成功
|
|
|
|
|
if (data && data.code === 200) {
|
|
|
|
|
// 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '操作成功',
|
|
|
|
|
type: 'success',
|
|
|
|
|
duration: 1500,
|
|
|
|
|
onClose: () => {
|
|
|
|
|
this.getDataList()
|
|
|
|
|
this.getDataList();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(data.msg)
|
|
|
|
|
// 如果失败，弹出错误提示信息
|
|
|
|
|
this.$message.error(data.msg);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
syncWxTemplate() {
|
|
|
|
|
if(this.synchonizingWxTemplate)return
|
|
|
|
|
this.synchonizingWxTemplate=true
|
|
|
|
|
// 如果正在同步中，则直接返回，不进行后续操作
|
|
|
|
|
if (this.synchonizingWxTemplate) return;
|
|
|
|
|
// 设置正在同步的状态为true
|
|
|
|
|
this.synchonizingWxTemplate = true;
|
|
|
|
|
// 发起HTTP请求进行同步公众号模板操作
|
|
|
|
|
this.$http({
|
|
|
|
|
url: this.$http.adornUrl('/manage/msgTemplate/syncWxTemplate'),
|
|
|
|
|
method: 'post',
|
|
|
|
|
method: 'post'
|
|
|
|
|
}).then(({ data }) => {
|
|
|
|
|
this.synchonizingWxTemplate=false
|
|
|
|
|
// 同步完成后，设置正在同步的状态为false
|
|
|
|
|
this.synchonizingWxTemplate = false;
|
|
|
|
|
// 根据返回数据判断同步操作是否成功
|
|
|
|
|
if (data && data.code === 200) {
|
|
|
|
|
// 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '同步完成',
|
|
|
|
|
type: 'success',
|
|
|
|
|
duration: 1500,
|
|
|
|
|
onClose: () => {
|
|
|
|
|
this.getDataList()
|
|
|
|
|
this.getDataList();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(data.msg)
|
|
|
|
|
// 如果失败，弹出错误提示信息
|
|
|
|
|
this.$message.error(data.msg);
|
|
|
|
|
}
|
|
|
|
|
}).catch(()=>this.synchonizingWxTemplate=false)
|
|
|
|
|
}).catch(() => this.synchonizingWxTemplate = false);
|
|
|
|
|
},
|
|
|
|
|
templateMsgTaskHandle() {
|
|
|
|
|
this.templateMsgTaskVisible = true
|
|
|
|
|
// 设置模板消息任务组件的显示状态为true，即显示该组件
|
|
|
|
|
this.templateMsgTaskVisible = true;
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.$refs.templateMsgTask.init(this.dataListSelections[0])
|
|
|
|
|
})
|
|
|
|
|
// 在DOM更新后，初始化模板消息任务组件，传入当前选中的唯一一条数据项（因为按钮禁用条件限制了只能选中一个）
|
|
|
|
|
this.$refs.templateMsgTask.init(this.dataListSelections[0]);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
async copyHandle() {
|
|
|
|
|
let loading;
|
|
|
|
|
// 循环遍历选中的数据项列表，对每个数据项进行复制操作
|
|
|
|
|
for (let i = 0; i < this.dataListSelections.length; i++) {
|
|
|
|
|
let item = this.dataListSelections[i];
|
|
|
|
|
// 显示加载提示，提示文字显示正在复制的模板标题
|
|
|
|
|
loading = this.$loading({
|
|
|
|
|
lock: true,
|
|
|
|
|
text: "复制模板：" + item.title,
|
|
|
|
|
spinner: 'el-icon-loading',
|
|
|
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
|
|
|
});
|
|
|
|
|
// 将数据项的id清空（可能用于标识新增状态）
|
|
|
|
|
item.id = '';
|
|
|
|
|
item.updateTime=new Date()
|
|
|
|
|
item.name+='_COPY'
|
|
|
|
|
await this.addMsgTemplate(item).catch(()=>loading.close())
|
|
|
|
|
loading.close()
|
|
|
|
|
// 更新数据项的更新时间为当前时间
|
|
|
|
|
item.updateTime = new Date();
|
|
|
|
|
// 在模版名称后添加“_COPY”后缀
|
|
|
|
|
item.name += '_COPY';
|
|
|
|
|
// 调用addMsgTemplate方法添加消息模板，使用await等待异步操作完成，若出现错误则关闭加载提示
|
|
|
|
|
await this.addMsgTemplate(item).catch(() => loading.close());
|
|
|
|
|
// 关闭加载提示
|
|
|
|
|
loading.close();
|
|
|
|
|
}
|
|
|
|
|
loading.close()
|
|
|
|
|
this.getDataList()
|
|
|
|
|
// 最后再关闭一次加载提示（确保关闭，可能存在多余情况，但保证逻辑完整性）
|
|
|
|
|
loading.close();
|
|
|
|
|
// 重新获取数据列表，以更新展示的数据
|
|
|
|
|
this.getDataList();
|
|
|
|
|
},
|
|
|
|
|
addMsgTemplate(msgTemplate) {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
// 发起HTTP请求保存消息模板数据（此处应该是执行新增操作），对请求的数据进行了装饰处理
|
|
|
|
|
this.$http({
|
|
|
|
|
url: this.$http.adornUrl('/manage/msgTemplate/save'),
|
|
|
|
|
method: 'post',
|
|
|
|
|
data: this.$http.adornData(msgTemplate)
|
|
|
|
|
}).then(({ data }) => {
|
|
|
|
|
// 根据返回数据判断保存操作是否成功
|
|
|
|
|
if (data && data.code === 200) {
|
|
|
|
|
resolve()
|
|
|
|
|
// 如果成功，调用resolve函数，表示异步操作成功完成
|
|
|
|
|
resolve();
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(data.msg)
|
|
|
|
|
reject(data.msg)
|
|
|
|
|
// 如果失败，弹出错误提示信息，并调用reject函数，表示异步操作失败，传递错误信息
|
|
|
|
|
this.$message.error(data.msg);
|
|
|
|
|
reject(data.msg);
|
|
|
|
|
}
|
|
|
|
|
}).catch(err=>reject(err))
|
|
|
|
|
})
|
|
|
|
|
}).catch(err => reject(err));
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
