<template> <div class="sendEmail || page"> <vue-form ref="myForm" v-loading="loading" v-model="formData" :ui-schema="uiSchema" :schema="schema" :error-schema="errorSchema" v-hasPermi="['biz:mail:sendExpress']" @on-submit="sendMail()" @on-cancel="cancel()" > <div slot-scope="{ formRefFn }"> <p style="float: right; margin-bottom: 30px"> <el-button @click="cancel(formRefFn)">取消</el-button> <el-button @click="saveBtn(formRefFn)" type="primary" v-hasPermi="['biz:mail:sendExpress']" >保存</el-button > </p> </div> </vue-form> <el-dialog title="邮件保存" :visible.sync="saveLog" :close-on-click-modal="false" width="500px" > <span style="font-size: 18px">确定保存吗?</span> <el-form :model="mailSaveData"> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancelSave()">取 消</el-button> <el-button type="primary" @click="saveLogBtn()">确 定</el-button> </div> </el-dialog> </div> </template> <script> //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) //例如:import 《组件名称》 from '《组件路径》'; import upload from "@c/Upload/upload"; import colorSelector from "@c/ColorSelector/colorSelector"; import { sendExpress, saveExpress } from "@/api/portal/otd"; import { listTemplate, getTemplate } from "@/api/portal/template"; import { listReceiver, getReceiver } from "@/api/portal/receiver"; import { listEmailTemplateLog, getEmailTemplateLog, addEmailTemplateLog, } from "@/api/emailTemplateLog/emailTemplateLog"; import { getOtdhtml, updateOtdhtml } from "@/api/portal/otdhtml"; export default { name: "sendExpress", //import引入的组件需要注入到对象中才能使用 components: { upload, colorSelector, }, data() { //这里存放数据 return { loading: false, headTitleSizeEn: "13.0", headTitleSizeZh: "11.0", sectionTitleSizeEn: "13.0", sectionTitleSizeZh: "15.0", contentSizeEn: "10.0", contentSizeZh: "10.0", imageUrl: "", formData: {}, emailData: { templateJson: "", }, mailSaveData: { remark: "", }, optType: "", mailData: [], //分页 total: 0, type: 1, queryParams: { pageNum: 1, pageSize: 10, remark: null, templateJson: null, createTime: null, optType: null, webPic: null, appPic: null, }, saveLog: false, schema: { type: "object", required: [ "title", "bannerPicture", "AppbannerPicture", "expressNo", "otdNo", ], properties: { // emailTitle: { // title: "邮件主题", // type: "string", // }, title: { title: "标题", type: "string", }, expressNo: { title: "期号", type: "string", default: "ISSUE 202207", }, bannerPicture: { "ui:widget": upload, title: "WEB主图片", type: "string", default: "", }, AppBannerPicture: { "ui:widget": upload, title: "APP主图片", type: "string", default: "", }, expressSection: { title: "内容部分", type: "array", items: { type: "object", required: [ "colorInfoOutside", "colorInfoInside", "btnImg", "sectionTitleZh", "sectionTitleEn", ], properties: { colorInfoOutside: { "ui:widget": colorSelector, title: "外边框颜色", type: "string", default: "", }, colorInfoInside: { "ui:widget": colorSelector, title: "内边框颜色", type: "string", default: "", }, btnImg: { title: "按钮图片", type: "string", }, sectionTitleZh: { title: "一级标题(中文)", type: "string", }, sectionTitleEn: { title: "一级标题(英文)", type: "string", }, subSection: { title: "一级内容部分", type: "array", items: { type: "object", required: [ "subTitleZh", "subTitleEn", "imgUrlList", "expressSubContent", ], properties: { subTitleZh: { title: "二级标题(中文)", type: "string", }, subTitleEn: { title: "二级标题(英文)", type: "string", }, imgUrlList: { title: "二级内容图片", type: "array", minItems: 1, maxItems: 2, items: { type: "string", }, }, expressSubContent: { title: "二级段落部分", type: "array", items: { type: "object", required: ["contentZh", "contentEn"], properties: { contentZh: { title: "段落内容(中文)", type: "string", }, contentEn: { title: "段落内容(英文)", type: "string", }, }, }, }, }, }, }, }, }, }, }, }, uiSchema: { bannerPicture: { "ui:widget": upload, "ui:prop": "imageUrl", }, AppBannerPicture: { "ui:widget": upload, "ui:prop": "imageUrl", }, expressSection: { items: { btnImg: { "ui:widget": upload, }, subSection: { items: { imgUrlList: { items: { "ui:widget": upload, }, }, }, }, }, }, }, errorSchema: { title: { "err:options": { required: "标题不能为空", }, }, expressNo: { "err:options": { required: "显示期号不能为空", }, }, bannerPicture: { "err:options": { required: "请输入WEB主图片", }, }, AppBannerPicture: { "err:options": { required: "请输入APP主图片", }, }, expressSection: { items: { colorInfoInside: { "err:options": { required: "请选择一个内边框颜色", }, }, colorInfoInside: { "err:options": { required: "请选择一个外边框颜色", }, }, btnImg: { "err:options": { required: "请添加按钮图片", }, }, sectionTitleZh: { "err:options": { required: "内容不能为空", }, }, sectionTitleEn: { "err:options": { required: "内容不能为空", }, }, subSection: { items: { subTitleZh: { "err:options": { required: "内容不能为空", }, }, subTitleEn: { "err:options": { required: "内容不能为空", }, }, imgUrlList: { items: { "err:options": { required: "请添加内容图片", }, }, }, expressSubContent: { items: { contentZh: { "err:options": { required: "内容不能为空", }, }, contentEn: { "err:options": { required: "内容不能为空", }, }, }, }, }, }, }, }, }, }; }, //监听属性 类似于data概念 computed: {}, //如果页面有keep-alive缓存功能,这个函数会触发 activated() {}, //方法集合 methods: { //保存弹窗 saveBtn() { this.$ refs.myForm.$$uiFormRef.validate((valid) => { if (valid) { this.saveLog = true; return; } this.saveLog = false; }); }, //保存草稿 saveLogBtn() { if (this.saveId != null) { let data = {}; data.id = this.saveId; this.templateJson = { formData: this.formData, }; data.templateJson = JSON.stringify(this.templateJson); data.webPic = this.formData.bannerPicture; data.appPic = this.formData.AppBannerPicture; updateOtdhtml(data).then((response) => { this.msgSuccess("修改成功"); this.$ router.replace({ path: "/otdPreview/otdPreview", }); }); } else { saveExpress({ formData: this.formData, }).then((response) => { this.msgSuccess("保存成功"); this.$ router.replace({ path: "/otdPreview/otdPreview", }); }); } this.saveLog = false; }, // getPreview(id) { if (id !== undefined) { getOtdhtml(id).then((response) => { console.log(response); this.templateJson = JSON.parse(response.data.templateJson); this.formData = this.templateJson.formData; this.formData.AppBannerPicture = response.data.appPic; console.log("this.formData(回显)", this.formData); }); } }, cancel() { this.formData = {}; }, cancelSave() { this.mailSaveData.remark = ""; this.saveLog = false; }, }, //生命周期 - 创建完成(可以访问当前this实例) created() { this.saveId = this.$ route.params.id; this.getPreview(this.saveId); }, //生命周期 - 挂载完成(可以访问DOM元素) mounted() {}, //监控data中的数据变化 watch: {}, }; </script> <style rel="stylesheet/scss" lang="scss" scoped> .sendEmail { margin: 20px auto; width: 80%; } /deep/ .fieldGroupWrap_title { line-height: inherit !important; margin-bottom: 0px !important; } /deep/ .el-form-item { margin-bottom: 8px !important; } /deep/.formItemErrorBox { padding-top: 0px !important; } /deep/.fieldGroupWrap_title { height: 28px !important; } /deep/.arrayField:not(.genFormItem) { margin-bottom: 0px; } .mailHistory { float: right; font-weight: bold; &:hover { color: #0077ff; } } .templateJson_1 { // 3行文本超长换行 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; box-orient: vertical; cursor: pointer; &:hover { color: #0077ff; } } .typeface { float: right; width: 50%; } </style>
换成vue3 setup写法