需求和UI 调整内容

src/views/system_manage/etaBaseConfig.vue

@@ -22,25 +22,55 @@
                         </el-checkbox-group>
                         <ConfigAnnotation picName="CompanyWatermark" @showImage="previewImage"/>
                     </el-form-item>
+                </div>
+                <div class="side">
+                    <el-form-item label="免责声明" prop="Disclaimer" class="disclaimer">
+                    <div class="rich-editor-wrap">
+                        <froala :id="`disclaimer-editor`"
+                            :ref="`disclaimerEditor`" 
+                            :tag="'textarea'" 
+                            :config="disclaimerConfig" v-model="formData.Disclaimer">
+                        </froala>
+                    </div>
+                    <ConfigAnnotation picHintText="" picName="Disclaimer" @showImage="previewImage"/>
+                </el-form-item>
+                </div>
+            </div>
+            <div class="part-base-tow part" >
+                <div class="side">
                     <el-form-item label="短信模板" prop="SMSTemplateId" >
                         <div class="form-item-type-two">
-                            <el-input type="text" v-model="formData.SMSTemplateId" placeholder="请输入短信模板ID" />
-                            <el-tooltip content="登陆系统或找回密码或验证身份" placement="top">
-                                <img src="~@/assets/img/icons/warn-circle-black.png" />
-                            </el-tooltip>
+                            <el-input type="text" v-model="formData.SMSTemplateId" placeholder="请输入短信模板ID" >
+                                <template slot="suffix">
+                                    <el-tooltip content="登陆系统或找回密码或验证身份" placement="top">
+                                        <div class="input-suffix">
+                                            <img src="~@/assets/img/icons/warn-circle-gray.png" />
+                                        </div>
+                                    </el-tooltip>
+                                </template>
+                            </el-input>
                         </div>
                     </el-form-item>
                     <el-form-item label="邮件模板" prop="EmailTemplateTitle" >
                         <div class="form-item-type-two">
-                            <el-input type="text" v-model="formData.EmailTemplateTitle" placeholder="请输入邮件标题" />
-                            <el-tooltip content="登陆系统或找回密码或验证身份" placement="top">
-                                <img src="~@/assets/img/icons/warn-circle-black.png" />
-                            </el-tooltip>
+                            <el-input type="text" v-model="formData.EmailTemplateTitle" placeholder="请输入邮件标题" >
+                                <template slot="suffix">
+                                        <el-tooltip content="登陆系统或找回密码或验证身份" placement="top">
+                                    <div class="input-suffix">
+                                        <img src="~@/assets/img/icons/warn-circle-gray.png" />
+                                    </div>
+                                </el-tooltip>
+                                </template>
+                            </el-input>
                         </div>
                     </el-form-item>
                     <el-form-item prop="EmailTemplateContent" >
-                        <el-input type="textarea" v-model="formData.EmailTemplateContent" :rows="7" :maxlength="300"
-                        placeholder="请输入邮件内容" show-word-limit />
+                        <froala id="email-content-editor"
+                            ref="emailContentEditor" 
+                            tag="textarea" 
+                            :config="{...disclaimerConfig,...emailEditorConfig}" v-model="formData.EmailTemplateContent">
+                        </froala>
+                        <ConfigAnnotation picName="emailContentTemplate" @showImage="previewImage" picHintText=""/>
                     </el-form-item>
                 </div>
                 <div class="side">
@@ -64,23 +94,11 @@
                             @upload="(file)=>handleUploadImage(file,'OfficialAccountsLogo')"
                             @remove="deleteFormImg('OfficialAccountsLogo')"
                             />
-                        <ConfigAnnotation picName="OfficialAccountsLogoPic" @showImage="previewImage"
-                            picHintText=""/>
+                        <!-- <ConfigAnnotation picName="OfficialAccountsLogoPic" @showImage="previewImage"
+                            picHintText=""/> -->
                     </el-form-item>
                 </div>
             </div>
-            <div class="part-statement part" >
-                <el-form-item label="免责声明" prop="Disclaimer" class="disclaimer">
-                    <div class="rich-editor-wrap">
-                        <froala :id="`disclaimer-editor`"
-                            :ref="`disclaimerEditor`" 
-                            :tag="'textarea'" 
-                            :config="disclaimerConfig" v-model="formData.Disclaimer">
-                        </froala>
-                    </div>
-                    <ConfigAnnotation picHintText="" picName="Disclaimer" @showImage="previewImage"/>
-                </el-form-item>
-            </div>
             <div class="part-ppt part" v-if="isShowPPT||isShowEnPPT">
                 <el-radio-group v-model="pptLang" style="margin-bottom: 22px;">
                     <el-radio-button label="cn">中文PPT</el-radio-button>
@@ -88,14 +106,14 @@
                 </el-radio-group>
                 <div v-if="isShowPPT" v-show="pptLang === 'cn'" class="ppt-form-item-wrap">
                     <div class="inner-input-wrap">
-                        <el-form-item label="公司名称" prop="PptCompanyName">
+                        <el-form-item label="公司名称" prop="PptCompanyName" class="inline-form-item">
                             <el-input type="text" v-model="formData.PptCompanyName"></el-input>
                         </el-form-item>
-                        <el-form-item label="团队名称" prop="PptTeamName">
+                        <el-form-item label="团队名称" prop="PptTeamName" class="inline-form-item">
                             <el-input type="text" v-model="formData.PptTeamName"></el-input>
                         </el-form-item>
-                        <el-form-item label="字体颜色" prop="PptFontColor">
-                            <el-input type="color" style="width:100px;" v-model="formData.PptFontColor"></el-input>
+                        <el-form-item label="字体颜色" prop="PptFontColor" class="inline-form-item">
+                            <el-input type="color" style="width:64px;" v-model="formData.PptFontColor"></el-input>
                         </el-form-item>
                     </div>
                     
@@ -138,14 +156,14 @@
                 </div>
                 <div v-if="isShowEnPPT" v-show="pptLang === 'en'" class="ppt-form-item-wrap">
                     <div class="inner-input-wrap">
-                        <el-form-item label="公司名称" prop="PptCompanyNameEn">
+                        <el-form-item label="公司名称" prop="PptCompanyNameEn" class="inline-form-item">
                             <el-input type="text" v-model="formData.PptCompanyNameEn"></el-input>
                         </el-form-item>
-                        <el-form-item label="团队名称" prop="PptTeamNameEn">
+                        <el-form-item label="团队名称" prop="PptTeamNameEn" class="inline-form-item">
                             <el-input type="text" v-model="formData.PptTeamNameEn"></el-input>
                         </el-form-item>
-                        <el-form-item label="字体颜色" prop="PptFontColorEn">
-                            <el-input type="color" style="width:100px;" v-model="formData.PptFontColorEn"></el-input>
+                        <el-form-item label="字体颜色" prop="PptFontColorEn" class="inline-form-item">
+                            <el-input type="color" style="width:64px;" v-model="formData.PptFontColorEn"></el-input>
                         </el-form-item>
                     </div>
                     <el-form-item label="PPT封面图" prop="EnPptCoverImgs">
@@ -213,7 +231,7 @@
                 </template>
             </div>
         </el-form>
-        <div class="btn-wrap" style="text-align: center;">
+        <div class="btn-wrap" style="text-align: center;padding: 90px 0 60px 0;">
             <el-button type="primary" plain style="width:200px;" @click="cancel">取消</el-button>
             <el-button type="primary"  style="margin-left:50px;width:200px;" @click="saveBaseConfig">保存</el-button>
         </div>
@@ -321,7 +339,9 @@ export default {
                 wordPasteModal:false,
                 pluginsEnabled:['colors'],//定义可用插件
             },//富文本编辑器配置项
-
+            emailEditorConfig:{
+                placeholderText:'请输入邮件内容',
+            },
             /* ppt config */
             pptLang:'cn',//切换中英文表单 
             CnPptCoverImgs:[],//中文封面列表
@@ -340,7 +360,7 @@ export default {
                 'pptCoverList':[require('@/assets/img/eta_base_config/ppt_cover.jpg')],
                 'pptBgPic':[require('@/assets/img/eta_base_config/ppt_bgpic.jpg')],
                 'pptBackPic':[require('@/assets/img/eta_base_config/ppt_back.jpg')],
-                'OfficialAccountsLogoPic':[require('@/assets/img/eta_base_config/ppt_back.jpg')],
+                'emailContentTemplate':[require('@/assets/img/eta_base_config/email_content_template.png')],
             },
             /* loading */
             configLoading:null,
@@ -453,10 +473,25 @@ export default {
         saveBaseConfig(){
             //froala 在非本地环境会有版权标识，在表单验证前去掉
             this.formData.Disclaimer = this.formData.Disclaimer.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, "");
+            this.formData.EmailTemplateContent = this.formData.EmailTemplateContent.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, "");
             //rules验证
             this.$refs.baseConfigForm.validate((valid,obj)=>{
+
                 console.log('valid',valid)
                 console.log('obj',obj)
+                if(this.formData.AppID || this.formData.AppSecret || this.formData.PrimevalId){
+                    // 只要有一个填，其他必填
+                    if(!this.formData.AppID){
+                        this.$message.warning('AppID 不能为空')
+                        return 
+                    }else if(!this.formData.AppSecret){
+                        this.$message.warning('AppSecret 不能为空')
+                        return 
+                    }else{
+                        this.$message.warning('PrimevalId 不能为空')
+                        return 
+                    }
+                }
                 //如果是中英文ppt没填写，切换标签栏
                 const keys = Object.keys(obj)
                 const cnProps = ['CnPptCoverImgs','CnPptBackgroundImg','CnPptBottomImg']
@@ -501,6 +536,36 @@ export default {
     .el-form-item{
         .el-form-item__content{line-height: normal;}
     }
+    .inline-form-item{
+        display: flex;
+        align-items: center;
+        label{
+            height: 40px;
+            margin-right: 10px;
+            white-space: nowrap;
+        }
+        .el-form-item__content{
+            flex-grow: 1;
+        }
+    }
+    .el-input__inner[type="color"]{
+        height: 32px;
+        padding: 0;
+        border: none;
+    }
+    .fr-wrapper{
+        height: 220px!important;
+        .fr-element{
+            min-height: 220px!important;
+        }
+    }
+    .el-input--suffix .el-input__inner{
+        padding-right:34px ;
+    }
+    .el-radio-button__inner{
+        width: 150px;
+    }
+    
 }
 </style>
 <style scoped lang="scss">
@@ -514,6 +579,7 @@ export default {
             width:100%;
         }
         .part{
+            padding-bottom: 30px;
             display: flex;
             justify-content: space-between;
             flex-wrap: wrap;
@@ -521,17 +587,21 @@ export default {
                 border-bottom: 1px solid #DCDFE6;
             }
             &:not(:first-child){
-                margin-top: 30px;
+                margin-top: 50px;
             }
             .side{
                 width:45%;
                 .form-item-type-two{
-                    display: flex;
-                    align-items: center;
-                    img{
-                        height: 20px;
-                        cursor: pointer;
-                        margin-left: 12px;
+                    .input-suffix{
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        height: 100%;
+                        padding-right: 6px;
+                        img{
+                            height: 16px;
+                            cursor: pointer;
+                        }
                     }
                 }
                 .input-hint{
@@ -539,6 +609,7 @@ export default {
                     font-size: 14px;
                     line-height: 20px;
                     margin-bottom: 10px;
+                    margin-top: -3px;
                 }
             }
             .ppt-form-item-wrap{
@@ -550,6 +621,7 @@ export default {
                     width: 100%;
                     display: flex;
                     justify-content: space-between;
+                    margin: 20px 0;
                     >.el-form-item{
                         width:30%;
                     }