smsTemplate.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  1. <template>
  2. <div class="app-container">
  3. <doc-alert title="短信配置" url="https://doc.iocoder.cn/sms/" />
  4. <!-- 搜索工作栏 -->
  5. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="150px">
  6. <el-form-item label="短信类型" prop="type">
  7. <el-select v-model="queryParams.type" placeholder="请选择短信类型" clearable>
  8. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE)"
  9. :key="dict.value" :label="dict.label" :value="dict.value"/>
  10. </el-select>
  11. </el-form-item>
  12. <el-form-item label="开启状态" prop="status">
  13. <el-select v-model="queryParams.status" placeholder="请选择开启状态" clearable>
  14. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
  15. :key="dict.value" :label="dict.label" :value="dict.value"/>
  16. </el-select>
  17. </el-form-item>
  18. <el-form-item label="模板编码" prop="code">
  19. <el-input v-model="queryParams.code" placeholder="请输入模板编码" clearable @keyup.enter.native="handleQuery"/>
  20. </el-form-item>
  21. <el-form-item label="短信 API 的模板编号" prop="apiTemplateId">
  22. <el-input v-model="queryParams.apiTemplateId" placeholder="请输入短信 API 的模板编号" clearable size="small" @keyup.enter.native="handleQuery"/>
  23. </el-form-item>
  24. <el-form-item label="短信渠道" prop="channelId">
  25. <el-select v-model="queryParams.channelId" placeholder="请选择短信渠道" clearable>
  26. <el-option v-for="channel in channelOptions"
  27. :key="channel.id" :value="channel.id"
  28. :label="channel.signature + '【' + getDictDataLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code) + '】'" />
  29. </el-select>
  30. </el-form-item>
  31. <el-form-item label="创建时间" prop="createTime">
  32. <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
  33. range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
  34. </el-form-item>
  35. <el-form-item>
  36. <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
  37. <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  38. </el-form-item>
  39. </el-form>
  40. <!-- 操作工具栏 -->
  41. <el-row :gutter="10" class="mb8">
  42. <el-col :span="1.5">
  43. <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
  44. v-hasPermi="['system:sms-template:create']">新增</el-button>
  45. </el-col>
  46. <el-col :span="1.5">
  47. <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
  48. v-hasPermi="['system:sms-template:export']">导出</el-button>
  49. </el-col>
  50. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  51. </el-row>
  52. <!-- 列表 -->
  53. <el-table v-loading="loading" :data="list">
  54. <el-table-column label="模板编码" align="center" prop="code" />
  55. <el-table-column label="模板名称" align="center" prop="name" />
  56. <el-table-column label="模板内容" align="center" prop="content" width="300" />
  57. <el-table-column label="短信类型" align="center" prop="type">
  58. <template v-slot="scope">
  59. <dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="scope.row.type"/>
  60. </template>
  61. </el-table-column>
  62. <el-table-column label="开启状态" align="center" prop="status">
  63. <template v-slot="scope">
  64. <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
  65. </template>
  66. </el-table-column>
  67. <el-table-column label="备注" align="center" prop="remark" />
  68. <el-table-column label="短信 API 的模板编号" align="center" prop="apiTemplateId" width="180" />
  69. <el-table-column label="短信渠道" align="center" width="120">
  70. <template v-slot="scope">
  71. <div>{{ formatChannelSignature(scope.row.channelId) }}</div>
  72. <dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.channelCode"/>
  73. </template>
  74. </el-table-column>
  75. <el-table-column label="创建时间" align="center" prop="createTime" width="180">
  76. <template v-slot="scope">
  77. <span>{{ parseTime(scope.row.createTime) }}</span>
  78. </template>
  79. </el-table-column>
  80. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
  81. <template v-slot="scope">
  82. <el-button size="mini" type="text" icon="el-icon-share" @click="handleSendSms(scope.row)"
  83. v-hasPermi="['system:sms-template:send-sms']">测试</el-button>
  84. <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
  85. v-hasPermi="['system:sms-template:update']">修改</el-button>
  86. <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
  87. v-hasPermi="['system:sms-template:delete']">删除</el-button>
  88. </template>
  89. </el-table-column>
  90. </el-table>
  91. <!-- 分页组件 -->
  92. <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
  93. @pagination="getList"/>
  94. <!-- 对话框(添加 / 修改) -->
  95. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  96. <el-form ref="form" :model="form" :rules="rules" label-width="140px">
  97. <el-form-item label="短信渠道编号" prop="channelId">
  98. <el-select v-model="form.channelId" placeholder="请选择短信渠道编号">
  99. <el-option v-for="channel in channelOptions"
  100. :key="channel.id" :value="channel.id"
  101. :label="channel.signature + '【' + getDictDataLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code) + '】'" />
  102. </el-select>
  103. </el-form-item>
  104. <el-form-item label="短信类型" prop="type">
  105. <el-select v-model="form.type" placeholder="请选择短信类型">
  106. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE)"
  107. :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
  108. </el-select>
  109. </el-form-item>
  110. <el-form-item label="模板编号" prop="code">
  111. <el-input v-model="form.code" placeholder="请输入模板编号" />
  112. </el-form-item>
  113. <el-form-item label="模板名称" prop="name">
  114. <el-input v-model="form.name" placeholder="请输入模板名称" />
  115. </el-form-item>
  116. <el-form-item label="模板内容" prop="content">
  117. <el-input type="textarea" v-model="form.content" placeholder="请输入模板内容" />
  118. </el-form-item>
  119. <el-form-item label="开启状态" prop="status">
  120. <el-radio-group v-model="form.status">
  121. <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
  122. :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
  123. </el-radio-group>
  124. </el-form-item>
  125. <el-form-item label="短信 API 模板编号" prop="apiTemplateId">
  126. <el-input v-model="form.apiTemplateId" placeholder="请输入短信 API 的模板编号" />
  127. </el-form-item>
  128. <el-form-item label="备注" prop="remark">
  129. <el-input v-model="form.remark" placeholder="请输入备注" />
  130. </el-form-item>
  131. </el-form>
  132. <div slot="footer" class="dialog-footer">
  133. <el-button type="primary" @click="submitForm">确 定</el-button>
  134. <el-button @click="cancel">取 消</el-button>
  135. </div>
  136. </el-dialog>
  137. <!-- 对话框(发送短信) -->
  138. <el-dialog title="测试发送短信" :visible.sync="sendSmsOpen" width="500px" append-to-body>
  139. <el-form ref="sendSmsForm" :model="sendSmsForm" :rules="sendSmsRules" label-width="140px">
  140. <el-form-item label="模板内容" prop="content">
  141. <el-input v-model="sendSmsForm.content" type="textarea" placeholder="请输入模板内容" readonly />
  142. </el-form-item>
  143. <el-form-item label="手机号" prop="mobile">
  144. <el-input v-model="sendSmsForm.mobile" placeholder="请输入手机号" />
  145. </el-form-item>
  146. <el-form-item v-for="param in sendSmsForm.params" :key="param" :label="'参数 {' + param + '}'" :prop="'templateParams.' + param">
  147. <el-input v-model="sendSmsForm.templateParams[param]" :placeholder="'请输入 ' + param + ' 参数'" />
  148. </el-form-item>
  149. </el-form>
  150. <div slot="footer" class="dialog-footer">
  151. <el-button type="primary" @click="submitSendSmsForm">确 定</el-button>
  152. <el-button @click="cancelSendSms">取 消</el-button>
  153. </div>
  154. </el-dialog>
  155. </div>
  156. </template>
  157. <script>
  158. import { createSmsTemplate, updateSmsTemplate, deleteSmsTemplate, getSmsTemplate, getSmsTemplatePage,
  159. exportSmsTemplateExcel, sendSms } from "@/api/system/sms/smsTemplate";
  160. import { getSimpleSmsChannels } from "@/api/system/sms/smsChannel";
  161. export default {
  162. name: "SmsTemplate",
  163. data() {
  164. return {
  165. // 遮罩层
  166. loading: true,
  167. // 导出遮罩层
  168. exportLoading: false,
  169. // 显示搜索条件
  170. showSearch: true,
  171. // 总条数
  172. total: 0,
  173. // 短信模板列表
  174. list: [],
  175. // 弹出层标题
  176. title: "",
  177. // 是否显示弹出层
  178. open: false,
  179. // 查询参数
  180. queryParams: {
  181. pageNo: 1,
  182. pageSize: 10,
  183. type: null,
  184. status: null,
  185. code: null,
  186. content: null,
  187. apiTemplateId: null,
  188. channelId: null,
  189. createTime: []
  190. },
  191. // 表单参数
  192. form: {},
  193. // 表单校验
  194. rules: {
  195. type: [{ required: true, message: "短信类型不能为空", trigger: "change" }],
  196. status: [{ required: true, message: "开启状态不能为空", trigger: "blur" }],
  197. code: [{ required: true, message: "模板编码不能为空", trigger: "blur" }],
  198. name: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
  199. content: [{ required: true, message: "模板内容不能为空", trigger: "blur" }],
  200. apiTemplateId: [{ required: true, message: "短信 API 的模板编号不能为空", trigger: "blur" }],
  201. channelId: [{ required: true, message: "短信渠道编号不能为空", trigger: "change" }],
  202. },
  203. // 短信渠道
  204. channelOptions: [],
  205. // 发送短信
  206. sendSmsOpen: false,
  207. sendSmsForm: {
  208. params: [], // 模板的参数列表
  209. },
  210. sendSmsRules: {
  211. mobile: [{ required: true, message: "手机不能为空", trigger: "blur" }],
  212. templateCode: [{ required: true, message: "手机不能为空", trigger: "blur" }],
  213. templateParams: { }
  214. }
  215. };
  216. },
  217. created() {
  218. this.getList();
  219. // 获得短信渠道
  220. getSimpleSmsChannels().then(response => {
  221. this.channelOptions = response.data;
  222. })
  223. },
  224. methods: {
  225. /** 查询列表 */
  226. getList() {
  227. this.loading = true;
  228. // 执行查询
  229. getSmsTemplatePage(this.queryParams).then(response => {
  230. this.list = response.data.list;
  231. this.total = response.data.total;
  232. this.loading = false;
  233. });
  234. },
  235. /** 取消按钮 */
  236. cancel() {
  237. this.open = false;
  238. this.reset();
  239. },
  240. /** 表单重置 */
  241. reset() {
  242. this.form = {
  243. id: undefined,
  244. type: undefined,
  245. status: undefined,
  246. code: undefined,
  247. name: undefined,
  248. content: undefined,
  249. remark: undefined,
  250. apiTemplateId: undefined,
  251. channelId: undefined,
  252. };
  253. this.resetForm("form");
  254. },
  255. /** 搜索按钮操作 */
  256. handleQuery() {
  257. this.queryParams.pageNo = 1;
  258. this.getList();
  259. },
  260. /** 重置按钮操作 */
  261. resetQuery() {
  262. this.resetForm("queryForm");
  263. this.handleQuery();
  264. },
  265. /** 新增按钮操作 */
  266. handleAdd() {
  267. this.reset();
  268. this.open = true;
  269. this.title = "添加短信模板";
  270. },
  271. /** 修改按钮操作 */
  272. handleUpdate(row) {
  273. this.reset();
  274. const id = row.id;
  275. getSmsTemplate(id).then(response => {
  276. this.form = response.data;
  277. this.open = true;
  278. this.title = "修改短信模板";
  279. });
  280. },
  281. /** 提交按钮 */
  282. submitForm() {
  283. this.$refs["form"].validate(valid => {
  284. if (!valid) {
  285. return;
  286. }
  287. // 修改的提交
  288. if (this.form.id != null) {
  289. updateSmsTemplate(this.form).then(response => {
  290. this.$modal.msgSuccess("修改成功");
  291. this.open = false;
  292. this.getList();
  293. });
  294. return;
  295. }
  296. // 添加的提交
  297. createSmsTemplate(this.form).then(response => {
  298. this.$modal.msgSuccess("新增成功");
  299. this.open = false;
  300. this.getList();
  301. });
  302. });
  303. },
  304. /** 删除按钮操作 */
  305. handleDelete(row) {
  306. const id = row.id;
  307. this.$modal.confirm('是否确认删除短信模板编号为"' + id + '"的数据项?').then(function() {
  308. return deleteSmsTemplate(id);
  309. }).then(() => {
  310. this.getList();
  311. this.$modal.msgSuccess("删除成功");
  312. }).catch(() => {});
  313. },
  314. /** 导出按钮操作 */
  315. handleExport() {
  316. // 处理查询参数
  317. let params = {...this.queryParams};
  318. params.pageNo = undefined;
  319. params.pageSize = undefined;
  320. // 执行导出
  321. this.$modal.confirm('是否确认导出所有短信模板数据项?', "警告").then(() => {
  322. this.exportLoading = true;
  323. return exportSmsTemplateExcel(params);
  324. }).then(response => {
  325. this.$download.excel(response, '短信模板.xls');
  326. this.exportLoading = false;
  327. }).catch(() => {});
  328. },
  329. /** 发送短息按钮 */
  330. handleSendSms(row) {
  331. this.resetSendSms(row);
  332. // 设置参数
  333. this.sendSmsForm.content = row.content;
  334. this.sendSmsForm.params = row.params;
  335. this.sendSmsForm.templateCode = row.code;
  336. this.sendSmsForm.templateParams = row.params.reduce(function(obj, item) {
  337. obj[item] = undefined;
  338. return obj;
  339. }, {});
  340. // 根据 row 重置 rules
  341. this.sendSmsRules.templateParams = row.params.reduce(function(obj, item) {
  342. obj[item] = { required: true, message: '参数 ' + item + " 不能为空", trigger: "change" };
  343. return obj;
  344. }, {});
  345. // 设置打开
  346. this.sendSmsOpen = true;
  347. },
  348. /** 重置发送短信的表单 */
  349. resetSendSms() {
  350. // 根据 row 重置表单
  351. this.sendSmsForm = {
  352. content: undefined,
  353. params: undefined,
  354. mobile: undefined,
  355. templateCode: undefined,
  356. templateParams: {}
  357. };
  358. this.resetForm("sendSmsForm");
  359. },
  360. /** 取消发送短信 */
  361. cancelSendSms() {
  362. this.sendSmsOpen = false;
  363. this.resetSendSms();
  364. },
  365. /** 提交按钮 */
  366. submitSendSmsForm() {
  367. this.$refs["sendSmsForm"].validate(valid => {
  368. if (!valid) {
  369. return;
  370. }
  371. // 添加的提交
  372. sendSms(this.sendSmsForm).then(response => {
  373. this.$modal.msgSuccess("提交发送成功!发送结果,见发送日志编号:" + response.data);
  374. this.sendSmsOpen = false;
  375. });
  376. });
  377. },
  378. /** 格式化短信渠道 */
  379. formatChannelSignature(channelId) {
  380. for (const channel of this.channelOptions) {
  381. if (channel.id === channelId) {
  382. return channel.signature;
  383. }
  384. }
  385. return '找不到签名:' + channelId;
  386. }
  387. }
  388. };
  389. </script>