jazz
2022-08-24 a4b91616ceae752e11cb6fc5198ebadf52cd68ed
提交 | 用户 | age
5dfa4a 1 <template>
J 2   <div class="app-container">
3     <!-- 返回按钮和标题 -->
4     <!-- <el-page-header class="mb20" content="xx" @back="$router.go(-1)" /> -->
5
6     <!-- 搜索区 ↓↓↓↓↓↓↓↓↓↓ -->
7     <el-form v-show="showSearch" ref="searchForm" :inline="true">
8       <el-form-item label="批次名称">
9         <el-input
10           v-model="batchName"
11           placeholder="搜索批次名称"
12           clearable
13           size="small"
14           style="width: 240px"
15           maxlength="50"
16           @keyup.enter.native="reGetList"
17         />
18       </el-form-item>
19       <el-form-item label="批次编号">
20         <el-input
21           v-model="batchCode"
22           placeholder="搜索批次编号"
23           clearable
24           size="small"
25           style="width: 240px"
26           maxlength="50"
27           @keyup.enter.native="reGetList"
28         />
29       </el-form-item>
b41339 30       <el-form-item label="短信类型">
J 31         <el-select v-model="smsType" clearable placeholder="选择短信类型" @change="reGetList">
32           <el-option
33             v-for="item in smsTypeOpts"
34             :key="item.value"
35             :label="item.label"
36             :value="item.value"
37           />
38         </el-select>
39       </el-form-item>
5dfa4a 40       <el-form-item>
J 41         <el-button type="cyan" icon="el-icon-search" size="mini" @click="reGetList">搜索</el-button>
42         <el-button icon="el-icon-refresh" size="mini" @click="resetHandle">重置</el-button>
f2a2b4 43         <el-button type="primary" icon="el-icon-download" size="mini" @click="exportList">下载发送模板</el-button>
5dfa4a 44       </el-form-item>
J 45     </el-form>
46     <!-- 搜索区 ↑↑↑↑↑↑↑↑↑↑ -->
47
48     <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
49     <el-row :gutter="10" class="mb8">
50       <el-col :span="1.5">
51         <!-- 权限判断 v-if="getAuthValueFN('xxx_add')" -->
52         <el-button
53           type="primary"
54           icon="el-icon-plus"
55           size="mini"
56           @click="showAddDialog"
57         >临时发送</el-button>
58       </el-col>
59       <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
60     </el-row>
61     <!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ -->
62
63     <!--
64       table参数设置:
65       stripe 是否为斑马纹
66       border 是否带有纵向边框
67       max-height 最大高度
68     -->
69     <el-table :data="list" stripe>
70       <el-table-column type="index" label="序号" align="center" width="60" />
71       <el-table-column label="创建时间" prop="createTime" align="center" min-width="160" />
72       <el-table-column label="批次名称" prop="batchName" align="center" />
73       <el-table-column label="批次编号" prop="batchCode" align="center" />
74       <el-table-column label="期望发送时间" prop="timingTime" align="center" min-width="160" />
75       <el-table-column label="发送短信时间" prop="executionTime" align="center" min-width="160" />
76       <el-table-column label="发送成功总数" prop="sendSuccess" align="center" />
77       <el-table-column label="发送失败总数" prop="sendFail" align="center" />
78       <el-table-column label="发送总数" prop="sendTotal" align="center" />
79       <el-table-column label="状态" prop="status" align="center">
80         <template slot-scope="scope">
f2a2b4 81           <span v-if="scope.row.status == 0">待执行</span>
J 82           <span v-if="scope.row.status == 1">执行中</span>
83           <span v-if="scope.row.status == 2">完成</span>
84           <span v-if="scope.row.status == 3">取消</span>
85           <span v-if="scope.row.status == 4">失败</span>
5dfa4a 86         </template>
J 87       </el-table-column>
88       <el-table-column label="短信模内容" prop="smsTemplate" align="center" min-width="160">
89         <template slot-scope="scope">
90           <el-popover
91             placement="top-start"
92             width="400"
93             popper-class="el-popover_tableFilter"
94             trigger="hover"
95             :popper-options="{ removeOnDestroy: true }"
96           >
97             <div style="max-height: 500px;overflow-y: auto;">{{ scope.row.smsTemplate }}</div>
98             <div slot="reference" class="line-clamp-2" style="line-height: 1.2">{{ scope.row.smsTemplate }}</div>
99           </el-popover>
100         </template>
101       </el-table-column>
102       <!-- <el-table-column label="是否上架" prop="isUp" align="center" min-width="100">
103         <template slot-scope="scope">
104           <el-switch
105             v-model="scope.row.isUp"
106             :active-value="1"
107             :inactive-value="0"
108             @change="handleUpChange(scope.row)"
109           />
110         </template>
111       </el-table-column> -->
f2a2b4 112       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
5dfa4a 113         <template slot-scope="scope">
f2a2b4 114           <!-- <el-button
5dfa4a 115             size="mini"
J 116             type="text"
117             icon="el-icon-edit"
118             @click="showEditDialog(scope.row)"
f2a2b4 119           >编辑</el-button> -->
5dfa4a 120           <el-button
J 121             size="mini"
122             type="text warn"
123             icon="el-icon-delete"
124             @click="handleDelete(scope.row)"
f2a2b4 125           >取消批次</el-button>
5dfa4a 126         </template>
f2a2b4 127       </el-table-column>
5dfa4a 128     </el-table>
J 129
130     <!-- 新增&编辑 -->
131     <el-dialog v-el-drag-dialog :title="'临时发送短信'" width="800px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
132       <el-form ref="refDialog" :model="dialogData" label-width="110px" :rules="rules" size="small">
133         <el-form-item label="批次名称" prop="batchName">
134           <el-input v-model="dialogData.batchName" placeholder="请输入批次名称" maxlength="255" />
135         </el-form-item>
136         <el-form-item label="批次编号" prop="batchCode">
137           <el-input v-model="dialogData.batchCode" placeholder="请输入批次编号" maxlength="255" />
138         </el-form-item>
b41339 139         <el-form-item label="短信类型" prop="smsType">
J 140           <el-select v-model="dialogData.smsType" clearable placeholder="选择短信类型">
141             <el-option
142               v-for="item in smsTypeOpts"
143               :key="item.value"
144               :label="item.label"
145               :value="item.value"
146             />
147           </el-select>
148         </el-form-item>
5dfa4a 149         <el-form-item label="上传文件" prop="uploadFiles">
J 150           <div class="upload_single_file">
151             <!-- 上传文件组件(单) -->
152             <el-upload
153               ref="refUploadFile"
154               :auto-upload="false"
155               action="#"
156               :limit="1"
157               :file-list="uploadFiles"
158               :on-change="addUploadFile"
159               :on-remove="delUploadFile"
160               :http-request="uploadFileReq"
161               :before-upload="beforeUploadFile"
162               size="mini"
163             >
164               <el-button style="display: block" :disabled="uploadFiles&&uploadFiles.length>0" class="mb8" type="primary" size="small" icon="el-icon-plus">上传文件</el-button>
165             </el-upload>
166           </div>
167         </el-form-item>
168         <el-form-item label="短信模内容" prop="smsTemplate">
169           <el-input v-model="dialogData.smsTemplate" type="textarea" placeholder="请输入短信模版内容" maxlength="500" rows="5" />
170         </el-form-item>
171         <!-- <el-form-item label="短信模内容" prop="smsTemplate">
172           <WangEnduit :catchdata="catchData" :content="dialogData.smsTemplate" :rangenum="rangenum" />
173         </el-form-item> -->
174       </el-form>
175       <div slot="footer" class="dialog-footer">
176         <el-button @click="hideDialog">取消</el-button>
177         <el-button type="primary" @click="submitHandle">确定</el-button>
178       </div>
179     </el-dialog>
180
181     <pagination
182       v-show="total>0"
183       :total="total"
184       :page.sync="pageNum"
185       :limit.sync="pageSize"
186       @pagination="getList"
187     />
188
189     <back-to-top :visibility-height="300" :back-position="50" transition-name="fade" />
190   </div>
191 </template>
192
193 <script>
194 import BackToTop from '@/components/BackToTop'
f2a2b4 195 import { getToken } from '@/utils/auth' // get token from session
5dfa4a 196 // import WangEnduit from '@/components/WangEnduit' // 富文本
J 197 export default {
198   name: 'Index',
199   components: {
200     BackToTop
201     // WangEnduit
202   },
203   data() {
204     return {
205       showSearch: true, // 是否显示搜索区
206       // keyWord: '', // 搜索区字段,可自行扩展其余字段
207       batchName: '',
208       batchCode: '',
b41339 209       smsType: '',
5dfa4a 210
J 211       objectName: '短信', // 对象名称,用于删除提示、启用提示、弹窗标题等
212
213       // 数据列表
214       list: [],
215       userList: [], // 用户列表
216
217       uploadFiles: [], // 上传文件
218
219       // 弹窗数据
220       dialogVisible: false,
221       dialogData: {},
b41339 222
J 223       smsTypeOpts: [
224         { label: '验证码', value: 0 },
225         { label: '通知短信', value: 1 },
226         { label: '营销短信', value: 2 }
227       ],
5dfa4a 228
J 229       // 富文本编辑器
230       // rangenum: null,
231
232       // 分页 ↓↓↓↓↓↓↓↓↓↓
233       total: 0,
234       pageNum: 1,
235       pageSize: 20,
236       // 分页 ↑↑↑↑↑↑↑↑↑↑
237
238       // 表单校验
239       rules: {
240         batchName: [
241           { required: true, message: '批次名称不能为空', trigger: 'change' }
242         ],
243         batchCode: [
244           { required: true, message: '批次编号不能为空', trigger: 'change' }
245         ],
246         smsTemplate: [
247           { required: true, message: '短信模内容不能为空', trigger: 'change' }
b41339 248         ],
J 249         smsType: [
250           { required: true, message: '短信类型不能为空', trigger: 'change' }
5dfa4a 251         ]
J 252         // isUp: [
253         //   { required: true, message: '是否上架不能为空', trigger: 'change' }
254         // ]
255       }
256     }
257   },
258   mounted() {
259     this.init()
260   },
261   methods: {
262     // 初始化
263     init() {
264       this.getList()
265     },
266
267     // ========== 富文本相关
268     // 富文本编辑器的内容赋值
269     // catchData(content) {
270     //   if (content === '<p><br></p>') content = ''
271     //   try {
272     //     const currentRange = window.getSelection().getRangeAt(0)
273     //     this.rangenum = currentRange
274     //   } catch (e) {
275     //     console.log(e)
276     //   }
277     //   this.$set(this.dialogData, 'smsTemplate', content)
278     //   this.$refs['refDialog'].validateField('smsTemplate')
279     // },
280     // ========== 富文本相关
281
282     // 获取列表
283     getList() {
b41339 284       var { pageNum, pageSize, batchName, batchCode, smsType } = this
5dfa4a 285       this.postFN({
J 286         url: 'send-general/list',
287         header: { 'Content-Type': 'application/json;charset=UTF-8' },
288         params: {
289           pageNum: pageNum,
290           pageSize: pageSize,
291
292           batchName: batchName,
b41339 293           batchCode: batchCode,
J 294           smsType: smsType
5dfa4a 295         },
J 296         mockData: {
297           code: 100,
298           msg: '',
299           data: {
300             list: [{
301               id: 'xxx',
302               index: 1,
303               name: '超级管理员',
304               createTime: '2020-08-09 10:10:10'
305             }],
306             total: 100
307           }
308         }
309       }, (inf) => {
310         this.list = inf.list || []
311         this.userList = inf.userList || []
312         this.total = inf.total
313       })
314     },
315     // 重新获取列表
316     reGetList() {
317       this.pageNum = 1
318       this.getList()
319     },
320     // 重置
321     resetHandle() {
322       this.batchCode = ''
323       this.batchName = ''
b41339 324       this.smsType = ''
5dfa4a 325       this.reGetList()
J 326     },
327     // 删除
328     handleDelete(item) {
329       // 打开二次确认弹窗
f2a2b4 330       this.$confirm('是否确认取消该短信批次?', '提示', {
5dfa4a 331         confirmButtonText: '确定',
J 332         cancelButtonText: '取消',
333         type: 'warning'
334       }).then(() => {
335         // 确定回调
336         this.postFN({
f2a2b4 337           url: 'send-general/cancel',
J 338           header: { 'Content-Type': 'application/json;charset=UTF-8' },
5dfa4a 339           params: {
J 340             id: item.id
341           },
342           mockData: {
343             code: 100,
344             msg: '',
345             data: {}
346           }
347         }, () => {
348           this.getList()
f2a2b4 349           this.$messageSuc('取消成功')
5dfa4a 350         })
J 351       }).catch(() => {})
352     },
353     // 修改是否上架
354     handleUpChange(item) {
355       const text = item.isUp === 1 ? '上架' : '下架'
356       this.$confirm('确认要' + text + '该' + this.objectName + '吗?', '提示', {
357         confirmButtonText: '确定',
358         cancelButtonText: '取消',
359         type: 'warning'
360       }).then(() => {
361         // TODO url
362         this.postFN({
363           url: 'xxx',
364           params: {
365             id: item.id,
366             isUp: item.isUp
367           },
368           mockData: {
369             code: 100,
370             msg: '',
371             data: {}
372           }
373         }, () => {
374           this.$messageSuc(text + '成功')
375         }, (res) => {
376           item.isUp = item.isUp === 1 ? 0 : 1
377           this.$messageError(res.msg)
378         })
379       }).catch(() => {
380         item.isUp = item.isUp === 1 ? 0 : 1
381       })
382     },
383
384     // 打开新增弹窗
385     showAddDialog() {
386       var dialogData = {
387         batchCode: '',
388         batchName: '',
b41339 389         smsTemplate: '',
J 390         smsType: ''
5dfa4a 391       }
J 392       this.uploadFiles = []
393       this.dialogVisible = true
394       this.$nextTick(() => {
395         this.dialogData = dialogData
396         this.$refs['refDialog'].resetFields()
397       })
398     },
399     // 打开编辑弹框
400     showEditDialog(item) {
401       var dialogData = {
402         type: 'edit',
403         ...item
404       }
405       console.log('dialogData', dialogData)
406       this.dialogVisible = true
407       this.$nextTick(() => {
408         this.dialogData = dialogData
409         this.$refs['refDialog'].resetFields()
410       })
411     },
412     // 关闭编辑弹窗
413     hideDialog() {
414       this.dialogData = {
415
416       }
417       this.dialogVisible = false
418       // 清空富文本
419       // this.rangenum = null
420     },
421     // 提交新增&编辑
422     submitHandle() {
423       this.$refs['refDialog'].validate(valid => {
424         if (valid) {
425           this.uploadFileReq()
426           // this.submitReq()
427         }
428       })
429     },
430     // 提交接口
431     submitReq() {
432       var { dialogData } = this
433       var params = {
434         name: dialogData.name,
435         isUp: dialogData.isUp
436         // TODO 参数
437       }
438
439       if (dialogData.password) params.password = dialogData.password
440
441       var isAdd = dialogData.type === 'add'
442       // TODO url
443       var url = isAdd ? 'xxx/add' : 'xxx/edit'
444
445       !isAdd && (params.id = dialogData.id)
446
447       this.postFN({
448         url: url,
449         params: params,
450         mockData: {
451           code: 100,
452           msg: '',
453           data: {}
454         }
455       }, () => {
456         this.$messageSuc('保存成功')
457         this.hideDialog()
458         isAdd ? this.reGetList() : this.getList()
459       })
460     },
461     // 上传文件 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
462     // 上传前确认格式
463     beforeUploadFile(file) {
464       const isTooLarge = file.size / 1024 / 1024 > 50
465       let flag = true
466       if (isTooLarge) {
467         this.$message.error('请勿上传大于50MB的文件')
468         flag = false
469       }
470       return flag
471     },
472     // 增加文件
473     addUploadFile(file, fileList) {
474       this.uploadFiles = fileList
475     },
476     // 删除文件
477     delUploadFile(file, fileList) {
478       this.uploadFiles = fileList
479     },
480     // 执行上传商品图
481     runUploadFile(suc_cb) {
482       if (this.checkNeedUpload(this.uploadFiles)) {
483         this.callback = suc_cb
484         this.$refs.refUploadFile.submit()
485       } else {
486         suc_cb && suc_cb()
487       }
488     },
489     // 上传文件
490     uploadFileReq() {
491       var { dialogData, uploadFiles } = this
492       var file
493       uploadFiles[0] && (file = uploadFiles[0].raw)
494       const formData = new FormData()
495       for (const key in dialogData) {
496         formData.append(key, dialogData[key])
497       }
498       formData.append('file', file)
499       if (!file) {
500         this.$message.error('请上传文件')
501         return
502       }
503       console.log('/*******************提交数据formData/', dialogData, file)
504       this.postFN({
505         url: 'send-general/temporary-send',
506         header: { 'Content-Type': 'multipart/form-data' },
507         params: formData,
508         mockData: {
509           code: 100,
510           msg: '',
511           data: {
512             imgUrl: '上传文件成功'
513           }
514         }
515       }, (inf) => {
516         console.log('上传文件成功且结束', inf)
517
518         this.reGetList()
519
520         this.hideDialog()
521
522         // 提交
523         // this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
524         // this.callback && this.callback(inf.imgUrl)
525       })
526     },
527     // 获取文件后缀名
528     extname(filename) {
529       if (!filename || typeof filename !== 'string') {
530         return ''
531       }
532       const a = filename.split('').reverse().join('')
533       const b = a.substring(0, a.search(/\./)).split('').reverse().join('')
534       return b
f2a2b4 535     },
5dfa4a 536     // 上传文件 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
f2a2b4 537     // 导出列表
J 538     exportList() {
539       var adminToken = getToken()
a4b916 540       const path = `${window.location.protocol}//${window.location.host}/sms-admin/send-general/get/temp?adminToken=${adminToken}`
f2a2b4 541       console.log('path', path)
J 542       window.location.href = path
543     }
5dfa4a 544   }
J 545 }
546 </script>
547
548 <style lang="scss" scoped>
549 .upload_single_file .el-upload-list__item-name{
550   padding: 5px!important;
551 }
552 </style>