邮件管理编辑内容方式修改

main
wangxiaoshuang 2025-06-05 16:59:44 +08:00
parent 10f2953a94
commit 3bcf097c52
3 changed files with 117 additions and 197 deletions

23
package-lock.json generated
View File

@ -48,6 +48,7 @@
"nprogress": "^0.2.0",
"path-to-regexp": "^0.1.10",
"pdfobject": "^2.3.0",
"prismjs": "^1.30.0",
"qrcodejs2": "^0.0.2",
"screenfull": "^6.0.2",
"sortablejs": "^1.15.5",
@ -62,6 +63,7 @@
"vue-count-to": "^1.0.13",
"vue-demi": "^0.14.10",
"vue-i18n": "^8.28.2",
"vue-prism-editor": "^1.3.0",
"vue-puzzle-vcode": "^1.1.10",
"vue-router": "^3.0.6",
"vue-seamless-scroll": "^1.1.23",
@ -18044,6 +18046,15 @@
"renderkid": "^3.0.0"
}
},
"node_modules/prismjs": {
"version": "1.30.0",
"resolved": "https://registry.npmmirror.com/prismjs/-/prismjs-1.30.0.tgz",
"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/process": {
"version": "0.11.10",
"resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
@ -22997,6 +23008,18 @@
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/vue-prism-editor": {
"version": "1.3.0",
"resolved": "https://registry.npmmirror.com/vue-prism-editor/-/vue-prism-editor-1.3.0.tgz",
"integrity": "sha512-54RfgtMGRMNr9484zKMOZs1wyLDR6EfFylzE2QrMCD9alCvXyYYcS0vX8oUHh+6pMUu6ts59uSN9cHglpU2NRQ==",
"license": "MIT",
"engines": {
"node": ">=10"
},
"peerDependencies": {
"vue": "^2.6.11"
}
},
"node_modules/vue-puzzle-vcode": {
"version": "1.1.10",
"resolved": "https://registry.npmmirror.com/vue-puzzle-vcode/-/vue-puzzle-vcode-1.1.10.tgz",

View File

@ -54,6 +54,7 @@
"nprogress": "^0.2.0",
"path-to-regexp": "^0.1.10",
"pdfobject": "^2.3.0",
"prismjs": "^1.30.0",
"qrcodejs2": "^0.0.2",
"screenfull": "^6.0.2",
"sortablejs": "^1.15.5",
@ -68,6 +69,7 @@
"vue-count-to": "^1.0.13",
"vue-demi": "^0.14.10",
"vue-i18n": "^8.28.2",
"vue-prism-editor": "^1.3.0",
"vue-puzzle-vcode": "^1.1.10",
"vue-router": "^3.0.6",
"vue-seamless-scroll": "^1.1.23",

View File

@ -1,12 +1,5 @@
<template>
<el-form
ref="emailForm"
v-loading="loading"
:model="form"
label-width="180px"
size="small"
:rules="rules"
>
<el-form ref="emailForm" v-loading="loading" :model="form" label-width="180px" size="small" :rules="rules">
<el-row>
<el-col :span="24">
<!-- Code -->
@ -29,12 +22,7 @@
<el-col :span="12">
<!-- 邮件延时发送s数 -->
<el-form-item :label="$t('dictionary:email:label:emailDelaySeconds')" prop="EmailDelaySeconds">
<el-input
v-model.number="form.EmailDelaySeconds"
style="width: 300px"
type="number"
clearable
>
<el-input v-model.number="form.EmailDelaySeconds" style="width: 300px" type="number" clearable>
</el-input>
</el-form-item>
</el-col>
@ -42,12 +30,8 @@
<!-- 业务层级 -->
<el-form-item :label="$t('dictionary:email:label:businessLevel')" prop="BusinessLevelEnum">
<el-select v-model="form.BusinessLevelEnum" clearable class="mr">
<el-option
v-for="item of $d.BusinessLevel"
:key="`BusinessLevel${item.label}`"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item of $d.BusinessLevel" :key="`BusinessLevel${item.label}`" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</el-col>
@ -55,12 +39,8 @@
<!-- 业务模块 -->
<el-form-item :label="$t('dictionary:email:label:businessModule')" prop="BusinessModuleEnum">
<el-select v-model="form.BusinessModuleEnum" clearable class="mr">
<el-option
v-for="item of $d.BusinessModule"
:key="`BusinessModule${item.label}`"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item of $d.BusinessModule" :key="`BusinessModule${item.label}`" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</el-col>
@ -68,80 +48,46 @@
<!-- 业务场景 -->
<el-form-item :label="$t('trials:emailManageCfg:table:BusinessScenarioEnum')" prop="BusinessScenarioEnum">
<el-select v-model="form.BusinessScenarioEnum" clearable class="mr">
<el-option
v-for="item of $d.Email_BusinessScenario"
:key="`BusinessScenarioEnum${item.label}`"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item of $d.Email_BusinessScenario" :key="`BusinessScenarioEnum${item.label}`"
:label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- 收件人 -->
<el-form-item :label="$t('trials:emailManageCfg:title:toUserTypeList')" prop="ToUserTypeList">
<el-select
v-model="form.ToUserTypeList"
clearable
multiple
class="mr"
>
<el-option
v-for="item of $d.UserType"
:key="`ToUserTypeList${item.label}`"
:label="item.label"
:value="item.value"
/>
<el-select v-model="form.ToUserTypeList" clearable multiple class="mr">
<el-option v-for="item of $d.UserType" :key="`ToUserTypeList${item.label}`" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- 抄送人 -->
<el-form-item :label="$t('trials:emailManageCfg:title:copyUserTypeList')" prop="CopyUserTypeList">
<el-select
v-model="form.CopyUserTypeList"
clearable
multiple
class="mr"
>
<el-option
v-for="item of $d.UserType"
:key="`CopyUserTypeList${item.label}`"
:label="item.label"
:value="item.value"
/>
<el-select v-model="form.CopyUserTypeList" clearable multiple class="mr">
<el-option v-for="item of $d.UserType" :key="`CopyUserTypeList${item.label}`" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- 加急状态 -->
<el-form-item :label="$t('dictionary:email:label:IsUrgent')" prop="EmailUrgentEnum">
<el-select
v-model="form.EmailUrgentEnum"
@change="
(v) => {
v === 1 ? (form.EmailCron = null) : null
}
"
clearable
class="mr"
>
<el-option
v-for="item of $d.EmailUrgent"
:key="`EmailUrgent${item.label}`"
:label="item.label"
:value="item.value"
/>
<el-select v-model="form.EmailUrgentEnum" @change="
(v) => {
v === 1 ? (form.EmailCron = null) : null
}
" clearable class="mr">
<el-option v-for="item of $d.EmailUrgent" :key="`EmailUrgent${item.label}`" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- 发送周期和时间 -->
<el-form-item
:label="$t('trials:emailManageCfg:table:EmailCron')"
v-if="form.EmailUrgentEnum !== 1"
prop="EmailCron"
>
<el-form-item :label="$t('trials:emailManageCfg:table:EmailCron')" v-if="form.EmailUrgentEnum !== 1"
prop="EmailCron">
<el-input style="width: 300px" readonly v-model="form.EmailCron" />
<!-- 生成 cron -->
<el-button type="primary" @click="showDialog"> {{ $t('dictionary:email:button:cron') }} </el-button>
@ -151,12 +97,8 @@
<!-- 是否需要回执 -->
<el-form-item :label="$t('trials:emailManageCfg:title:isReturnRequired')" prop="IsReturnRequired">
<el-radio-group v-model="form.IsReturnRequired">
<el-radio
v-for="item of $d.YesOrNo"
:label="item.value"
:key="`IsReturnRequired${item.value}`"
>{{ item.label }}</el-radio
>
<el-radio v-for="item of $d.YesOrNo" :label="item.value" :key="`IsReturnRequired${item.value}`">{{
item.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
@ -164,48 +106,30 @@
<!-- 是否自动发送 -->
<el-form-item :label="$t('trials:emailManageCfg:table:IsAutoSend')" prop="IsAutoSend">
<el-radio-group v-model="form.IsAutoSend">
<el-radio
v-for="item of $d.YesOrNo"
:label="item.value"
:key="`IsAutoSend${item.value}`"
>{{ item.label }}</el-radio
>
<el-radio v-for="item of $d.YesOrNo" :label="item.value" :key="`IsAutoSend${item.value}`">{{ item.label
}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12" v-if="systemLevel">
<!-- 是否区分标准 -->
<el-form-item :label="$t('dictionary:email:button:isDistinguishCriteria')" prop="IsDistinguishCriteria">
<el-radio-group
v-model="form.IsDistinguishCriteria"
@change="
() => {
form.CriterionTypeEnum = null
}
"
>
<el-radio
v-for="item of $d.YesOrNo"
:label="item.value"
:key="`IsDistinguishCriteria${item.value}`"
>{{ item.label }}</el-radio
>
<el-radio-group v-model="form.IsDistinguishCriteria" @change="
() => {
form.CriterionTypeEnum = null
}
">
<el-radio v-for="item of $d.YesOrNo" :label="item.value" :key="`IsDistinguishCriteria${item.value}`">{{
item.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:label="$t('trials:auditRecord:table:criterion')"
v-if="form.IsDistinguishCriteria"
prop="CriterionTypeEnum"
>
<el-form-item :label="$t('trials:auditRecord:table:criterion')" v-if="form.IsDistinguishCriteria"
prop="CriterionTypeEnum">
<el-select v-model="form.CriterionTypeEnum" clearable class="mr">
<el-option
v-for="item of $d.CriterionType"
:key="`CriterionType${item.label}`"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item of $d.CriterionType" :key="`CriterionType${item.label}`" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</el-col>
@ -213,106 +137,65 @@
<!-- 是否启用 -->
<el-form-item :label="$t('trials:emailManageCfg:table:IsEnable')" prop="IsEnable">
<el-radio-group v-model="form.IsEnable">
<el-radio
v-for="item of $d.YesOrNo"
:label="item.value"
:key="`IsEnable${item.value}`"
>{{ item.label }}</el-radio
>
<el-radio v-for="item of $d.YesOrNo" :label="item.value" :key="`IsEnable${item.value}`">{{ item.label
}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- 附件CN -->
<el-form-item :label="$t('trials:emailManageCfg:table:fileListCN')" prop="IsEnable">
<el-upload
class="upload-demo"
action
:before-upload="beforeUploadCN"
:http-request="handleUploadFileCN"
:on-preview="handlePreviewCN"
:on-remove="handleRemoveFileCN"
:show-file-list="true"
:limit="1"
:file-list="fileListCN"
>
<el-button
size="small"
type="primary"
:disabled="fileListCN.length > 0"
>{{ $t('common:button:upload') }}</el-button
>
<el-upload class="upload-demo" action :before-upload="beforeUploadCN" :http-request="handleUploadFileCN"
:on-preview="handlePreviewCN" :on-remove="handleRemoveFileCN" :show-file-list="true" :limit="1"
:file-list="fileListCN">
<el-button size="small" type="primary" :disabled="fileListCN.length > 0">{{ $t('common:button:upload')
}}</el-button>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- 附件EN -->
<el-form-item :label="$t('trials:emailManageCfg:table:fileListEN')" prop="IsEnable">
<el-upload
class="upload-demo"
action
:before-upload="beforeUploadEN"
:http-request="handleUploadFileEN"
:on-preview="handlePreviewEN"
:on-remove="handleRemoveFileEN"
:show-file-list="true"
:limit="1"
:file-list="fileListEN"
>
<el-button
size="small"
type="primary"
:disabled="fileListEN.length > 0"
>{{ $t('common:button:upload') }}</el-button
>
<el-upload class="upload-demo" action :before-upload="beforeUploadEN" :http-request="handleUploadFileEN"
:on-preview="handlePreviewEN" :on-remove="handleRemoveFileEN" :show-file-list="true" :limit="1"
:file-list="fileListEN">
<el-button size="small" type="primary" :disabled="fileListEN.length > 0">{{ $t('common:button:upload')
}}</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<!-- 邮件内容模版CN -->
<el-form-item
:label="$t('dictionary:email:label:emailHtmlContentCN')"
prop="EmailHtmlContentCN"
style="position: relative"
>
<el-input
v-model="form.EmailHtmlContentCN"
type="textarea"
:autosize="{ minRows: 8, maxRows: 8 }"
/>
<el-button
:disabled="!form.EmailHtmlContentCN && form.EmailHtmlContent"
type="text"
<el-form-item :label="$t('dictionary:email:label:emailHtmlContentCN')" prop="EmailHtmlContentCN"
style="position: relative">
<div class="html_temp">
<prism-editor class="my-editor" v-model="form.EmailHtmlContentCN" :highlight="highlighter" :line-numbers="true"
style="width: 50%;max-height: 500px;"></prism-editor>
<div v-html="form.EmailHtmlContentCN" style="width: 50%;"></div>
</div>
<!-- <el-input v-model="form.EmailHtmlContentCN" type="textarea" :autosize="{ minRows: 8, maxRows: 8 }" />
<el-button :disabled="!form.EmailHtmlContentCN && form.EmailHtmlContent" type="text"
@click="PreviewHTML(form.EmailHtmlContentCN, form.EmailHtmlContent)"
style="position: absolute; left: -50px; top: 30px"
>
style="position: absolute; left: -50px; top: 30px">
{{ $t('common:button:preview') }}
</el-button>
</el-button> -->
</el-form-item>
<!-- 邮件内容模版EN -->
<el-form-item
:label="$t('dictionary:email:label:emailHtmlContent')"
prop="EmailHtmlContent"
style="position: relative"
>
<el-input
v-model="form.EmailHtmlContent"
type="textarea"
:autosize="{ minRows: 8, maxRows: 8 }"
/>
<el-button
:disabled="!form.EmailHtmlContentCN && form.EmailHtmlContent"
type="text"
<el-form-item :label="$t('dictionary:email:label:emailHtmlContent')" prop="EmailHtmlContent"
style="position: relative">
<div class="html_temp">
<prism-editor class="my-editor" v-model="form.EmailHtmlContent" :highlight="highlighter" :line-numbers="true"
style="width: 50%;max-height: 500px;"></prism-editor>
<div v-html="form.EmailHtmlContent" style="width: 50%;"></div>
</div>
<!-- <el-input v-model="form.EmailHtmlContent" type="textarea" :autosize="{ minRows: 8, maxRows: 8 }" />
<el-button :disabled="!form.EmailHtmlContentCN && form.EmailHtmlContent" type="text"
@click="PreviewHTML(form.EmailHtmlContentCN, form.EmailHtmlContent)"
style="position: absolute; left: -50px; top: 30px"
>
style="position: absolute; left: -50px; top: 30px">
{{ $t('common:button:preview') }}
</el-button>
</el-button> -->
</el-form-item>
<div
class="base-dialog-footer"
style="text-align: right; margin-top: 10px; padding-bottom: 10px"
>
<div class="base-dialog-footer" style="text-align: right; margin-top: 10px; padding-bottom: 10px">
<el-form-item style="text-align: right">
<el-button size="small" type="primary" @click="handleSave">
{{ $t('common:button:save') }}
@ -321,12 +204,7 @@
</div>
<!-- 生成 cron -->
<el-dialog append-to-body :title="$t('dictionary:email:button:cron')" :visible.sync="showCron">
<vcrontab
:hideComponent="['year']"
@hide="showCron = false"
@fill="crontabFill"
:expression="expression"
>
<vcrontab :hideComponent="['year']" @hide="showCron = false" @fill="crontabFill" :expression="expression">
</vcrontab>
</el-dialog>
</el-form>
@ -334,6 +212,14 @@
<script>
import { Upload, addOrUpdateEmailNoticeConfigList } from '@/api/dictionary'
import vcrontab from 'vcrontab'
import { PrismEditor } from 'vue-prism-editor';
import 'vue-prism-editor/dist/prismeditor.min.css';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism.css';
export default {
props: {
data: {
@ -355,7 +241,7 @@ export default {
},
},
},
components: { vcrontab },
components: { vcrontab, PrismEditor },
data() {
return {
expression: '',
@ -440,6 +326,9 @@ export default {
}
},
methods: {
highlighter(code) {
return highlight(code, languages.js);
},
showDialog() {
this.expression = this.form.EmailCron // cron UI
this.showCron = true
@ -563,3 +452,9 @@ export default {
},
}
</script>
<style lang="scss" scoped>
.html_temp {
display: flex;
}
</style>