邮件管理模板添加预览功能
continuous-integration/drone/push Build is passing Details

uat_us
DESKTOP-6C3NK6N\WXS 2024-10-12 10:31:36 +08:00
parent 98c42c7b6a
commit 109470ca1a
2 changed files with 207 additions and 161 deletions

View File

@ -99,7 +99,7 @@
v-model="form.EmailUrgentEnum"
@change="
(v) => {
v === 1 ? (form.EmailCron = null) : null;
v === 1 ? (form.EmailCron = null) : null
}
"
clearable
@ -146,7 +146,7 @@
v-model="form.IsDistinguishCriteria"
@change="
() => {
form.CriterionTypeEnum = null;
form.CriterionTypeEnum = null
}
"
>
@ -196,7 +196,7 @@
size="small"
type="primary"
:disabled="fileListCN.length > 0"
>{{ $t("common:button:upload") }}</el-button
>{{ $t('common:button:upload') }}</el-button
>
</el-upload>
</el-form-item>
@ -218,25 +218,49 @@
size="small"
type="primary"
:disabled="fileListEN.length > 0"
>{{ $t("common:button:upload") }}</el-button
>{{ $t('common:button:upload') }}</el-button
>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="邮件内容模版CN" prop="EmailHtmlContentCN">
<el-form-item
label="邮件内容模版CN"
prop="EmailHtmlContentCN"
style="position: relative"
>
<el-input
v-model="form.EmailHtmlContentCN"
type="textarea"
:autosize="{ minRows: 8, maxRows: 8 }"
/>
<el-button
:disabled="!form.EmailHtmlContentCN"
type="text"
@click="PreviewHTML(form.EmailHtmlContentCN)"
style="position: absolute; left: -50px; top: 30px"
>
{{ $t('common:button:preview') }}
</el-button>
</el-form-item>
<el-form-item label="邮件内容模版EN" prop="EmailHtmlContent">
<el-form-item
label="邮件内容模版EN"
prop="EmailHtmlContent"
style="position: relative"
>
<el-input
v-model="form.EmailHtmlContent"
type="textarea"
:autosize="{ minRows: 8, maxRows: 8 }"
/>
<el-button
:disabled="!form.EmailHtmlContent"
type="text"
@click="PreviewHTML(form.EmailHtmlContent)"
style="position: absolute; left: -50px; top: 30px"
>
{{ $t('common:button:preview') }}
</el-button>
</el-form-item>
<div
class="base-dialog-footer"
@ -259,44 +283,44 @@
</el-form>
</template>
<script>
import { Upload, addOrUpdateEmailNoticeConfigList } from "@/api/dictionary";
import { Upload, addOrUpdateEmailNoticeConfigList } from '@/api/dictionary'
export default {
props: {
data: {
type: Object,
default() {
return {};
return {}
},
},
systemLevel: {
type: Number,
default() {
return 0;
return 0
},
},
},
data() {
return {
expression: "",
expression: '',
showCron: false,
form: {
Id: "",
Code: "",
EmailTopicCN: "",
EmailTopic: "",
BusinessLevelEnum: "",
BusinessModuleEnum: "",
ToUserTypeList: "",
CopyUserTypeList: "",
EmailUrgentEnum: "",
EmailCron: "",
Id: '',
Code: '',
EmailTopicCN: '',
EmailTopic: '',
BusinessLevelEnum: '',
BusinessModuleEnum: '',
ToUserTypeList: '',
CopyUserTypeList: '',
EmailUrgentEnum: '',
EmailCron: '',
BusinessScenarioEnum: null,
EmailHtmlContentCN: "",
EmailHtmlContent: "",
AttachPath: "",
AttachName: "",
AttachNameCN: "",
AttachCNPath: "",
EmailHtmlContentCN: '',
EmailHtmlContent: '',
AttachPath: '',
AttachName: '',
AttachNameCN: '',
AttachCNPath: '',
IsDistinguishCriteria: true,
IsReturnRequired: true,
IsUrgent: true,
@ -305,173 +329,177 @@ export default {
CriterionTypeEnum: null,
},
rules: {
Code: [{ required: true, message: "Please select", trigger: ["blur"] }],
Code: [{ required: true, message: 'Please select', trigger: ['blur'] }],
BusinessScenarioEnum: [
{ required: true, message: "Please select", trigger: ["blur"] },
{ required: true, message: 'Please select', trigger: ['blur'] },
],
EmailTopicCN: [
{ required: true, message: "Please select", trigger: ["blur"] },
{ required: true, message: 'Please select', trigger: ['blur'] },
],
EmailTopic: [
{ required: true, message: "Please select", trigger: ["blur"] },
{ required: true, message: 'Please select', trigger: ['blur'] },
],
BusinessLevelEnum: [
{ required: true, message: "Please select", trigger: ["blur"] },
{ required: true, message: 'Please select', trigger: ['blur'] },
],
ToUserTypeList: [
{ required: true, message: "Please select", trigger: ["blur"] },
{ required: true, message: 'Please select', trigger: ['blur'] },
],
EmailCron: [
{ required: true, message: "Please select", trigger: ["blur"] },
{ required: true, message: 'Please select', trigger: ['blur'] },
],
EmailUrgentEnum: [
{ required: true, message: "Please select", trigger: ["blur"] },
{ required: true, message: 'Please select', trigger: ['blur'] },
],
EmailHtmlContentCN: [
{ required: true, message: "Please select", trigger: ["blur"] },
{ required: true, message: 'Please select', trigger: ['blur'] },
],
EmailHtmlContent: [
{ required: true, message: "Please select", trigger: ["blur"] },
{ required: true, message: 'Please select', trigger: ['blur'] },
],
CriterionTypeEnum: [
{ required: true, message: "Please select", trigger: ["blur"] },
{ required: true, message: 'Please select', trigger: ['blur'] },
],
},
scenarioOption: [],
fileListCN: [],
fileListEN: [],
loading: false,
};
}
},
mounted() {
this.initForm();
this.initForm()
if (this.systemLevel) {
if (this.systemLevel === 1) {
this.form.ToUserTypeList = [];
this.form.ToUserTypeList = []
}
this.form.CopyUserTypeList = [];
this.form.EmailUrgentEnum = "3";
this.form.IsReturnRequired = false;
this.form.IsDistinguishCriteria = false;
this.form.CopyUserTypeList = []
this.form.EmailUrgentEnum = '3'
this.form.IsReturnRequired = false
this.form.IsDistinguishCriteria = false
}
},
methods: {
showDialog() {
this.expression = this.form.EmailCron; // cron UI
this.showCron = true;
this.expression = this.form.EmailCron // cron UI
this.showCron = true
},
crontabFill(value) {
this.form.EmailCron = value;
this.form.EmailCron = value
},
handleRemoveFileCN() {
this.form.AttachNameCN = null;
this.form.AttachCNPath = null;
this.fileListCN = [];
this.form.AttachNameCN = null
this.form.AttachCNPath = null
this.fileListCN = []
},
beforeUploadCN() {
if (this.fileListCN.length > 0) {
this.$alert("最多只能传一个附件");
return;
this.$alert('最多只能传一个附件')
return
}
},
handlePreviewCN(row, r2) {
if (row.fullPath) {
window.open(row.fullPath, "_blank");
window.open(row.fullPath, '_blank')
}
},
handleUploadFileCN(param) {
this.btnLoading = true;
const formData = new FormData();
formData.append("file", param.file);
this.form.AttachNameCN = param.file.name;
this.btnLoading = true
const formData = new FormData()
formData.append('file', param.file)
this.form.AttachNameCN = param.file.name
Upload(formData, 3).then((res) => {
this.form.AttachCNPath = res.Result.FilePath;
this.btnLoading = false;
this.form.AttachCNPath = res.Result.FilePath
this.btnLoading = false
this.fileListCN.push({
name: param.file.name,
path: res.Result.FilePath,
fullPath: res.Result.FullFilePath,
url: res.Result.FilePath,
});
});
})
})
},
handleUploadFileEN(param) {
this.btnLoading = true;
const formData = new FormData();
formData.append("file", param.file);
this.form.AttachName = param.file.name;
this.btnLoading = true
const formData = new FormData()
formData.append('file', param.file)
this.form.AttachName = param.file.name
Upload(formData, 3).then((res) => {
this.form.AttachPath = res.Result.FilePath;
this.btnLoading = false;
this.form.AttachPath = res.Result.FilePath
this.btnLoading = false
this.fileListEN.push({
name: param.file.name,
path: res.Result.FilePath,
fullPath: res.Result.FullFilePath,
url: res.Result.FilePath,
});
});
})
})
},
handleRemoveFileEN() {
this.form.AttachName = null;
this.form.AttachPath = null;
this.fileListEN = [];
this.form.AttachName = null
this.form.AttachPath = null
this.fileListEN = []
},
beforeUploadEN() {
if (this.fileListEN.length > 0) {
this.$alert("最多只能传一个附件");
return;
this.$alert('最多只能传一个附件')
return
}
},
handlePreviewEN(row, r2) {
if (row.fullPath) {
window.open(row.fullPath, "_blank");
window.open(row.fullPath, '_blank')
}
},
async initForm() {
this.loading = true;
this.loading = true
// await this.getScenarios()
for (const k in this.form) {
if (this.data.hasOwnProperty(k)) {
this.form[k] = this.data[k];
this.form[k] = this.data[k]
}
if (k === "AttachPath" && this.form[k]) {
if (k === 'AttachPath' && this.form[k]) {
this.fileListEN.push({
name: this.data.AttachName,
path: this.data.AttachPath,
fullPath: this.data.AttachPath,
url: this.data.AttachPath,
});
})
}
if (k === "AttachCNPath" && this.form[k]) {
if (k === 'AttachCNPath' && this.form[k]) {
this.fileListCN.push({
name: this.data.AttachNameCN,
path: this.data.AttachCNPath,
fullPath: this.data.AttachCNPath,
url: this.data.AttachCNPath,
});
})
}
}
this.loading = false;
this.loading = false
},
//
handleSave() {
this.$refs.emailForm.validate((valid) => {
if (!valid) return;
this.loading = true;
this.form.systemLevel = this.systemLevel;
if (!valid) return
this.loading = true
this.form.systemLevel = this.systemLevel
addOrUpdateEmailNoticeConfigList(this.form)
.then((res) => {
this.loading = false;
this.$emit("closeDialog");
this.$emit("getList");
this.$message.success("Saved successfully");
this.loading = false
this.$emit('closeDialog')
this.$emit('getList')
this.$message.success('Saved successfully')
})
.catch(() => {
this.loading = false;
});
});
this.loading = false
})
})
},
//
PreviewHTML(html) {
this.$emit('PreviewHTML', html)
},
},
};
}
</script>

View File

@ -111,7 +111,7 @@
min-width="120"
>
<template slot-scope="scope">
{{ $fd("CriterionType", scope.row.CriterionTypeEnum) }}
{{ $fd('CriterionType', scope.row.CriterionTypeEnum) }}
</template>
</el-table-column>
<el-table-column
@ -136,7 +136,7 @@
min-width="100"
>
<template slot-scope="scope">
{{ $fd("BusinessLevel", scope.row.BusinessLevelEnum) }}
{{ $fd('BusinessLevel', scope.row.BusinessLevelEnum) }}
</template>
</el-table-column>
<el-table-column
@ -147,7 +147,7 @@
min-width="100"
>
<template slot-scope="scope">
{{ $fd("BusinessModule", scope.row.BusinessModuleEnum) }}
{{ $fd('BusinessModule', scope.row.BusinessModuleEnum) }}
</template>
</el-table-column>
<el-table-column
@ -158,7 +158,7 @@
min-width="130"
>
<template slot-scope="scope">
{{ $fd("Email_BusinessScenario", scope.row.BusinessScenarioEnum) }}
{{ $fd('Email_BusinessScenario', scope.row.BusinessScenarioEnum) }}
</template>
</el-table-column>
<!-- 收件人 -->
@ -172,10 +172,10 @@
<template slot-scope="scope">
{{
scope.row.ToUserTypeList.length > 0
? scope.row.ToUserTypeList.map((v) => $fd("UserType", v)).join(
"、"
? scope.row.ToUserTypeList.map((v) => $fd('UserType', v)).join(
'、'
)
: ""
: ''
}}
</template>
</el-table-column>
@ -190,10 +190,10 @@
<template slot-scope="scope">
{{
scope.row.CopyUserTypeList.length > 0
? scope.row.CopyUserTypeList.map((v) => $fd("UserType", v)).join(
"、"
? scope.row.CopyUserTypeList.map((v) => $fd('UserType', v)).join(
'、'
)
: ""
: ''
}}
</template>
</el-table-column>
@ -206,7 +206,7 @@
v-if="!systemLevel"
>
<template slot-scope="scope">
{{ $fd("EmailUrgent", scope.row.EmailUrgentEnum) }}
{{ $fd('EmailUrgent', scope.row.EmailUrgentEnum) }}
</template>
</el-table-column>
<el-table-column
@ -246,10 +246,10 @@
>
<template slot-scope="scope">
<el-tag v-if="scope.row.IsReturnRequired" type="danger">
{{ $fd("YesOrNo", scope.row.IsReturnRequired) }}
{{ $fd('YesOrNo', scope.row.IsReturnRequired) }}
</el-tag>
<el-tag v-else type="primary">{{
$fd("YesOrNo", scope.row.IsReturnRequired)
$fd('YesOrNo', scope.row.IsReturnRequired)
}}</el-tag>
</template>
</el-table-column>
@ -264,10 +264,10 @@
>
<template slot-scope="scope">
<el-tag v-if="scope.row.IsAutoSend" type="danger">
{{ $fd("YesOrNo", scope.row.IsAutoSend) }}
{{ $fd('YesOrNo', scope.row.IsAutoSend) }}
</el-tag>
<el-tag v-else type="primary">{{
$fd("YesOrNo", scope.row.IsAutoSend)
$fd('YesOrNo', scope.row.IsAutoSend)
}}</el-tag>
</template>
</el-table-column>
@ -281,10 +281,10 @@
>
<template slot-scope="scope">
<el-tag v-if="scope.row.IsEnable" type="danger">
{{ $fd("YesOrNo", scope.row.IsEnable) }}
{{ $fd('YesOrNo', scope.row.IsEnable) }}
</el-tag>
<el-tag v-else type="primary">{{
$fd("YesOrNo", scope.row.IsEnable)
$fd('YesOrNo', scope.row.IsEnable)
}}</el-tag>
</template>
</el-table-column>
@ -340,6 +340,7 @@
:system-level="systemLevel"
@closeDialog="closeDialog"
@getList="getList"
@PreviewHTML="preview"
/>
</el-dialog>
@ -359,131 +360,148 @@
@getList="getList"
/>
</el-dialog>
<!-- 预览模板 -->
<el-dialog
v-if="previewVisible"
:visible.sync="previewVisible"
:close-on-click-modal="false"
title="预览"
fullscreen
custom-class="base-dialog-wrapper"
>
<div v-html="previewHTML"></div>
</el-dialog>
</box-content>
</template>
<script>
import {
getEmailNoticeConfigList,
deleteEmailNoticeConfig,
} from "@/api/dictionary";
import BoxContent from "@/components/BoxContent";
import Pagination from "@/components/Pagination";
import EmailForm from "./EmailForm";
import AttachmentList from "./AttachmentList";
} from '@/api/dictionary'
import BoxContent from '@/components/BoxContent'
import Pagination from '@/components/Pagination'
import EmailForm from './EmailForm'
import AttachmentList from './AttachmentList'
const searchDataDefault = () => {
return {
IsReturnRequired: "",
IsUrgent: "",
IsEnable: "",
IsReturnRequired: '',
IsUrgent: '',
IsEnable: '',
CriterionTypeEnum: null,
PageIndex: 1,
PageSize: 20,
};
};
}
}
export default {
name: "EmailList",
name: 'EmailList',
components: { BoxContent, Pagination, EmailForm, AttachmentList },
props: {
isDistinguishCriteria: {
type: Boolean,
default() {
return false;
return false
},
},
systemLevel: {
type: Number,
default() {
return 0;
return 0
},
},
},
data() {
return {
activeTab: "0",
activeTab: '0',
searchData: searchDataDefault(),
loading: false,
list: [],
total: 0,
rowData: {},
title: "",
title: '',
editVisible: false,
attachmentVisible: false,
};
previewVisible: false,
previewHTML: null,
}
},
mounted() {
this.getList();
this.getList()
},
methods: {
//
getList() {
this.loading = true;
this.searchData.IsDistinguishCriteria = this.isDistinguishCriteria;
this.searchData.systemLevel = this.systemLevel;
this.loading = true
this.searchData.IsDistinguishCriteria = this.isDistinguishCriteria
this.searchData.systemLevel = this.systemLevel
getEmailNoticeConfigList(this.searchData)
.then((res) => {
this.loading = false;
this.list = res.Result.CurrentPageData;
this.total = res.Result.TotalCount;
this.loading = false
this.list = res.Result.CurrentPageData
this.total = res.Result.TotalCount
})
.catch(() => {
this.loading = false;
});
this.loading = false
})
},
//
handleAdd() {
this.rowData = {};
this.title = "新增";
this.editVisible = true;
this.rowData = {}
this.title = '新增'
this.editVisible = true
},
//
handleEdit(row) {
this.rowData = { ...row };
this.title = "编辑";
this.editVisible = true;
this.rowData = { ...row }
this.title = '编辑'
this.editVisible = true
},
//
handleDelete(row) {
this.$confirm(this.$t("trials:staffResearch:message:confirmDel"), {
type: "warning",
this.$confirm(this.$t('trials:staffResearch:message:confirmDel'), {
type: 'warning',
distinguishCancelAndClose: true,
}).then(() => {
deleteEmailNoticeConfig(row.Id).then((res) => {
if (res.IsSuccess) {
this.getList();
this.$message.success("删除成功!");
this.getList()
this.$message.success('删除成功!')
}
});
});
})
})
},
handleDetail(row) {
this.rowData = { ...row };
this.attachmentVisible = true;
this.rowData = { ...row }
this.attachmentVisible = true
},
//
handleSearch() {
this.searchData.PageIndex = 1;
this.getList();
this.searchData.PageIndex = 1
this.getList()
},
//
handleReset() {
this.searchData = searchDataDefault();
this.getList();
this.searchData = searchDataDefault()
this.getList()
},
//
handleSortByColumn(column) {
if (column.order === "ascending") {
this.searchData.Asc = true;
if (column.order === 'ascending') {
this.searchData.Asc = true
} else {
this.searchData.Asc = false;
this.searchData.Asc = false
}
this.searchData.SortField = column.prop;
this.searchData.PageIndex = 1;
this.getList();
this.searchData.SortField = column.prop
this.searchData.PageIndex = 1
this.getList()
},
//
closeDialog() {
this.editVisible = false;
this.editVisible = false
},
preview(html) {
this.previewHTML = html
this.previewVisible = true
},
},
};
}
</script>