修复错误及优化界面显示

GalensGan · Sep 3, 2021 · d2f95fa · d2f95fa
1 parent ebc8296
commit d2f95fa
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 73 deletions.
diff --git a/Server/.vs/Server/v16/.suo b/Server/.vs/Server/v16/.suo
diff --git a/Server/Server/Http/Controller/Ctrler_Template.cs b/Server/Server/Http/Controller/Ctrler_Template.cs
@@ -38,7 +38,7 @@ public void GetTemplates()
 
  // 删除模板
  [Route(HttpVerbs.Delete, "/template/{id}")]
- public void DeleteTemplates(int id)
+ public void DeleteTemplates(string id)
  {
  var deleteResult = LiteDb.Delete<Template>(id);
  if (deleteResult) ResponseSuccess(deleteResult);

diff --git a/Server/Server/Http/Modules/SendEmail/SendTask.cs b/Server/Server/Http/Modules/SendEmail/SendTask.cs
@@ -449,7 +449,8 @@ private void SendItems(List<SendItem> sendItemList, string historyId)
  // 更新状态 
  sendItem.tryCount++;
  sendItem.isSent = false;
- sendItem.sendMessage = ex.InnerException.Message;
+ if (ex.InnerException == null) sendItem.sendMessage = ex.Message;
+ else sendItem.sendMessage = ex.InnerException.Message;
  _liteDb.Upsert(sendItem);
  }
  finally

diff --git a/UI/src/views/email/template.vue b/UI/src/views/email/template.vue
@@ -17,11 +17,11 @@
  :key="temp._id"
  flat
  bordered
- class="column q-pa-xs"
- style="width: 400px"
+ class="q-pa-xs column"
+ style="width: 400px; max-height: 300px"
  >
  <div class="text-overline">{{ temp.name }}</div>
- <q-img class="rounded-borders" :src="temp.imageUrl" />
+ <q-img class="rounded-borders" style="flex: 1" :src="temp.imageUrl" />
  <div class="row justify-between q-mt-sm">
  <div>创建时间:{{ temp.createDate | formatDate }}</div>
  <q-btn
@@ -36,13 +36,40 @@
  </div>
 
  <q-dialog v-model="isShowTemplateDialog" persistent>
- <q-card class="column" style="max-width: none">
- <div>{{ selectedFileName }}</div>
- <div id="capture" v-html="templateHtml"></div>
- <div class="row justify-end q-ma-sm q-gutter-sm">
- <q-btn color="warning" v-close-popup>取消</q-btn>
- <q-btn color="primary" @click="confirmTemplate">确认</q-btn>
- </div>
+ <q-card style="max-width: none">
+ <q-layout
+ view="lHh lpr lFf"
+ container
+ style="height: 400px; width: 600px"
+ class="shadow-2 rounded-borders"
+ >
+ <q-header elevated class="bg-teal">
+ <div class="text-subtitle1 q-pa-sm">{{ selectedFileName }}</div>
+ </q-header>
+
+ <q-footer elevated class="bg-teal">
+ <div class="row justify-end q-ma-sm q-gutter-sm">
+ <q-btn color="warning" size="sm" v-close-popup
+ >取消</q-btn
+ >
+ <q-btn
+ color="primary"
+ size="sm"
+ @click="confirmTemplate"
+ :loading="isSavingTemplate"
+ >确认</q-btn
+ >
+ </div>
+ </q-footer>
+
+ <q-page-container>
+ <div
+ id="capture"
+ v-html="templateHtml"
+ style="background-color: white"
+ ></div>
+ </q-page-container>
+ </q-layout>
  </q-card>
  </q-dialog>
  </div>
@@ -60,7 +87,8 @@ export default {
  templateHtml: '',
  isShowTemplateDialog: false,
  selectedFileName: '',
- data: []
+ data: [],
+ isSavingTemplate: false
  }
  },
  filters: {
@@ -116,32 +144,37 @@ export default {
 
  // 确认邮件
  async confirmTemplate() {
- // 生成模板预览图
- const canvas = await html2canvas(document.getElementById('capture'), {
- scale: 1, //缩放比例,默认为1
- allowTaint: false, //是否允许跨域图像污染画布
- useCORS: true, //是否尝试使用CORS从服务器加载图像
- //width: '500', //画布的宽度
- //height: '500', //画布的高度
- backgroundColor: '#000000' //画布的背景色，默认为透明
+ this.isSavingTemplate = true
+
+ this.$nextTick(async () => {
+ // 生成模板预览图
+ const canvas = await html2canvas(document.getElementById('capture'), {
+ scale: 1, //缩放比例,默认为1
+ allowTaint: false, //是否允许跨域图像污染画布
+ useCORS: true, //是否尝试使用CORS从服务器加载图像
+ //width: '500', //画布的宽度
+ //height: '500', //画布的高度
+ backgroundColor: '#000000' //画布的背景色，默认为透明
+ })
+
+ //将canvas转为base64格式
+ const imageUrl = canvas.toDataURL('image/png')
+
+ // 发送模板
+ const res = await newTemplate(
+ this.selectedFileName,
+ imageUrl,
+ this.templateHtml
+ )
+
+ // 添加到集合
+ this.data.push(res.data)
+
+ notifySuccess('添加成功')
+
+ this.isSavingTemplate = false
+ this.isShowTemplateDialog = false
  })
-
- //将canvas转为base64格式
- const imageUrl = canvas.toDataURL('image/png')
-
- // 发送模板
- const res = await newTemplate(
- this.selectedFileName,
- imageUrl,
- this.templateHtml
- )
-
- // 添加到集合
- this.data.push(res.data)
-
- notifySuccess('添加成功')
-
- this.isShowTemplateDialog = false
  },
 
  // 删除邮件

diff --git a/UI/src/views/send/components/historyDetail.vue b/UI/src/views/send/components/historyDetail.vue
@@ -30,6 +30,15 @@
  </q-td>
  </template>
 
+ <template v-slot:body-cell-sendMessage="props">
+ <q-td :props="props">
+ {{ props.value }}
+ <q-tooltip>
+ {{ props.value }}
+ </q-tooltip>
+ </q-td>
+ </template>
+
  <template v-slot:body-cell-operations="props">
  <q-td :props="props" class="row justify-end">
  <q-btn
@@ -45,15 +54,21 @@
  </q-table>
  <div class="row justify-end q-pa-sm">
  <q-btn
- :label="resendLabel"
+ label="重发"
  color="teal"
  size="sm"
  class="q-mr-sm"
+ :class="resentClass"
  v-if="isShowResent"
  :disable="disableResend"
  :loading="isResending"
  @click="resend"
- />
+ >
+ <template v-slot:loading>
+ <q-spinner-hourglass class="on-left" />
+ {{ resendLabel }}
+ </template>
+ </q-btn>
 
  <q-btn
  :disable="disableCancle"
@@ -157,7 +172,8 @@ export default {
  label: '原因',
  align: 'left',
  field: 'sendMessage',
- sortable: true
+ sortable: true,
+ style: 'max-width:200px;text-overflow: ellipsis;overflow: hidden'
  },
  {
  name: 'tryCount',
@@ -186,7 +202,7 @@ export default {
  disableResend: false,
  disableCancle: false,
  isResending: false,
- resendLabel: '重发'
+ resendLabel: '开始...'
  }
  },
  computed: {
@@ -203,6 +219,11 @@ export default {
  isShowResent() {
  const needResend = this.data.filter(d => !d.isSent)
  return needResend.length > 0
+ },
+
+ resentClass() {
+ if (this.isResending) return 'resend-runing'
+ else return 'resend-normal'
  }
  },
  async mounted() {
@@ -241,9 +262,10 @@ export default {
  return
  }
 
- // 关闭重发
+ // 关闭重发,关闭取消
  this.disableResend = true
  this.isResending = true
+ this.disableCancle = true
 
  // 开始发送
  await resendFail(this.historyId, ids)
@@ -257,14 +279,18 @@ export default {
  // 获取更新数据
  const res = await getSendingInfo()
  // console.log('getProgressInfo:', res.data)
- this.sendingInfo = res.data
- if (this.sendingInfo.index < this.sendingInfo.total) {
+ const sendingInfo = res.data
+
+ // 显示进度
+ this.resendLabel =
+ ((sendingInfo.index * 100) / (sendingInfo.total || 1)).toFixed(1) +
+ ' %'
+
+ if (sendingInfo.index < sendingInfo.total) {
  this.getProgressInfo()
  } else {
  // 获取发送结果
- const msgRes = await getHistoryGroupSendResult(
- this.sendingInfo.historyId
- )
+ const msgRes = await getHistoryGroupSendResult(sendingInfo.historyId)
 
  if (msgRes.data.ok) notifySuccess(msgRes.data.message)
  else notifyError(msgRes.data.message)
@@ -274,10 +300,13 @@ export default {
  this.data = res.data
 
  const needResend = this.data.filter(d => !d.isSent)
- this.disableResend = needResend.length < 1
 
+ // 打开按钮锁定
+ this.disableResend = needResend.length < 1
  this.disableCancle = false
  this.isResending = false
+ // 恢复重发初始值
+ this.resendLabel = '开始...'
  }
  }, 800)
  },
@@ -290,5 +319,8 @@ export default {
 }
 </script>
 
-<style>
+<style lang='scss'>
+.resend-runing {
+ width: 80px;
+}
 </style>
diff --git a/UI/src/views/send/index.vue b/UI/src/views/send/index.vue
@@ -33,13 +33,17 @@
  <div class="row justify-between">
  <div class="row content-center">
  <strong style="height: auto; align-self: center"> 模板：</strong>
- <el-select v-model="selectedTemplate" placeholder="请选择" size="small">
+ <el-select
+ v-model="selectedTemplate"
+ placeholder="请选择"
+ size="small"
+ value-key="_id"
+ >
  <el-tooltip
  v-for="item in options"
  :key="item._id"
  class="item"
  effect="light"
- content="Right Center 提示文字"
  placement="right"
  >
  <div slot="content">
@@ -98,26 +102,50 @@
  </q-dialog>
 
  <q-dialog v-model="isShowPreviewDialog" persistent>
- <q-card class="column" style="max-width: none">
- <div class="q-pa-sm text-subtitle1">
- 发送给：{{ previewData.receiverName }}/{{ previewData.receiverEmail }}
- </div>
- <div v-html="previewData.html"></div>
- <div class="row justify-between q-pa-sm">
- <div>
- 当前：{{ previewData.index + 1 }} / 合计：{{ previewData.total }}
- </div>
- <div class="row justify-end q-gutter-sm">
- <q-btn
- label="上一条"
- color="teal"
- size="sm"
- @click="previousItem"
- />
- <q-btn label="下一条" color="orange" size="sm" @click="nextItem" />
- <q-btn label="退出" color="negative" size="sm" v-close-popup />
- </div>
- </div>
+ <q-card style="max-width: none">
+ <q-layout
+ view="lHh lpr lFf"
+ container
+ style="height: 400px; width: 600px"
+ class="shadow-2 rounded-borders"
+ >
+ <q-header elevated class="bg-teal">
+ <div class="q-pa-sm text-subtitle1">
+ 发送给：{{ previewData.receiverName }}/{{
+ previewData.receiverEmail
+ }}
+ </div>
+ </q-header>
+
+ <q-footer elevated class="bg-teal">
+ <div class="row justify-between q-pa-sm">
+ <div>
+ 当前：{{ previewData.index + 1 }} / 合计：{{
+ previewData.total
+ }}
+ </div>
+ <div class="row justify-end q-gutter-sm">
+ <q-btn
+ label="上一条"
+ color="orange"
+ size="sm"
+ @click="previousItem"
+ />
+ <q-btn
+ label="下一条"
+ color="orange"
+ size="sm"
+ @click="nextItem"
+ />
+ <q-btn label="退出" color="negative" size="sm" v-close-popup />
+ </div>
+ </div>
+ </q-footer>
+
+ <q-page-container>
+ <div v-html="previewData.html"></div>
+ </q-page-container>
+ </q-layout>
  </q-card>
  </q-dialog>
 
@@ -320,7 +348,7 @@ export default {
  outline: none;
  }
 
- .preview-row{
+ .preview-row {
  position: fixed;
  right: 20px;
  bottom: 20px;