eta1.4.2

src/views/system_manage/components/smartReportImgSet.vue

@@ -0,0 +1,202 @@
+<template>
+    <div class="smart-report-img-set-page">
+        <div class="top-wrap">
+            <el-input placeholder="请输入图片名称" style="width:200px;margin-right:20px"></el-input>
+            <el-select placeholder="请选择图片类型" v-model="type" style="width:200px">
+                <el-option label="版头" value="版头"></el-option>
+                <el-option label="版尾" value="版尾"></el-option>
+            </el-select>
+            <el-button type="primary" style="float:right" @click="uploadImgPop=true">上传图片</el-button>
+        </div>
+        <ul class="img-list-wrap">
+            <li class="img-item" v-for="item in 6" :key="item">
+                <img class="img" src="" alt="">
+                <div class="opt-box">
+
+                </div>
+            </li>
+        </ul>
+
+        <!-- 上传图片弹窗 -->
+        <el-dialog
+            :visible.sync="uploadImgPop"
+            title="上传图片"
+            :close-on-click-modal="false"
+            :append-to-body="true"
+            @close="cancelHandle"
+            custom-class="classify-dialog"
+            center
+            width="650px"
+            v-dialogDrag
+        >
+            
+            <el-form 
+                :model="ruleForm" 
+                :rules="formRules" 
+                ref="ruleForm" 
+                label-width="100px" 
+                class="upload-img-form"
+            >
+                <el-form-item label="图片名称" prop="name">
+                    <el-input v-model="formData.name" placeholder="请输入图片名称"></el-input>
+                </el-form-item>
+                <el-form-item label="图片类型" prop="type">
+                    <el-radio-group v-model="formData.type">
+                        <el-radio label="1">版头</el-radio>
+                        <el-radio label="2">版尾</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item 
+                    label="上传图片" 
+                    prop="imgUrl"
+                >
+                    <el-upload 
+                        action="" 
+                        accept="image/*" 
+                        :http-request="handleUploadImg" 
+                        :show-file-list="false"
+                    >
+                        <div class="upload-box">
+                            <template v-if="!formData.imgUrl">
+                                <i class="el-icon-plus" style="font-size: 24px;"></i>
+                            </template>
+                            <template v-else>
+                                <img class="upload-img" :src="formData.imgUrl" alt="">
+                            </template>
+                        </div>
+                    </el-upload>
+                    <p>支持jpg、jpeg、png等格式，建议上传版头800*200,版尾800*80</p>
+                </el-form-item>
+                <div style="text-align: center;padding: 30px 0;">
+                    <el-button type="primary" plain style="width:120px;" @click="handleCloseImgUpload">取消</el-button>
+                    <el-button type="primary" style="margin-left:20px;width:120px;">确定</el-button>
+                </div>
+            </el-form>
+            
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import {bannerupload} from '@/api/api.js';
+export default {
+    data() {
+        return {
+            keyword:'',
+            type:'',
+
+            uploadImgPop:false,
+            formData:{
+                name:'',
+                type:'',
+                imgUrl:''
+            },
+            formRules:{
+                name:[{ required: true, message: '请输入图片名称', trigger: 'blur' }],
+                type:[{ required: true, message: '请选择图片类型', trigger: 'change' }],
+                imgUrl:[{ required: true, message: '请上传图片', trigger: 'change' }]
+            }
+
+        }
+    },
+    methods: {
+        handleUploadImg(file){
+            //图片大小和格式限制
+            const {size,type} = file.file
+            let form = new FormData();
+            form.append('file',file.file);
+            bannerupload(form).then(res=>{
+                // console.log(res);
+                if(res.Ret!==200) return 
+                this.formData.imgUrl=res.Data.ResourceUrl
+            })
+        
+        },
+
+        handleCloseImgUpload(){
+            this.uploadImgPop=false
+            this.$refs.ruleForm.resetFields()
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.img-list-wrap{
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    .img-item{
+        position: relative;
+        width: 200px;
+        height: 200px;
+        background-color: #f5f5f5;
+        cursor: pointer;
+        .img{
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+        .opt-box{
+            display: none;
+        }
+    }
+}
+.upload-img-form{
+    .el-upload {
+        .upload-box {
+            position: relative;
+            width: 120px;
+            height: 120px;
+            background-color: #F5F7F9;
+            border: 1px dashed #DCDFE6;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            padding: 4px;
+            overflow: hidden;
+
+            &:hover {
+                border: 1px dashed #3375e1;
+
+                .upload-mask {
+                    opacity: 1;
+                }
+            }
+
+            .form-hint {
+                margin-top: 10px;
+                color: #999999;
+            }
+
+            .upload-img,
+            .upload-mask {
+                width: 100%;
+                height: 100%;
+            }
+
+            .upload-mask {
+                position: absolute;
+                left: 0;
+                top: 0;
+                cursor: default;
+                text-align: center;
+                color: #fff;
+                opacity: 0;
+                font-size: 20px;
+                background-color: rgba(0, 0, 0, .5);
+                transition: opacity .3s;
+                z-index: 2;
+                line-height: 120px;
+
+                .mask-icon {
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/system_manage/etaBaseConfig.vue

@@ -1,55 +1,26 @@
 <template>
     <div class="eta-base-config">
-        <el-form  :model="formData" :rules="rules" label-position="top" class="base-config-form"
-            label-width="120px" ref="baseConfigForm">
-            <div class="part-base part">
-                <div class="side">
-                    <el-form-item label="公司名称" prop="CompanyName">
-                        <el-input type="text" v-model="formData.CompanyName" placeholder="请输入公司名称" />
-                        <ConfigAnnotation picHintText="" picName="CompanyName" @showImage="previewImage"/>
-                    </el-form-item>
-                    <el-form-item label="公司水印" prop="CompanyWatermark" class="watermark">
-                        <ImgUpload 
-                            :imgUrl="formData.CompanyWatermark"
-                            @showImage="showImage"
-                            @upload="(file)=>handleUploadImage(file,'CompanyWatermark')"
-                            @remove="deleteFormImg('CompanyWatermark')"
-                            />
-                        <!-- 后面可能会有新的选项 -->
-                        <div style="position: absolute;top: -40px;left: 100px;display:flex;gap:0 20px">
-                            <el-checkbox-group v-if="isShowYBChart"
-                                v-model="checkList" >
-                                <el-checkbox label="研报图表"></el-checkbox>
-                            </el-checkbox-group>
-                            <div>
-                                <el-checkbox label="研报分享" v-model="formData.WatermarkReport"></el-checkbox>
-                                <el-tooltip 
-                                    effect="dark" 
-                                    content="研报详情分享页水印,水印内容为分享人用户名称+手机号(无手机号时为邮箱地址)" 
-                                    placement="top"
-                                >
-                                    <i class="el-icon-warning"></i>
-                                </el-tooltip>
-                            </div>
-                            
-                        </div>
-                        <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>
+        <el-tabs v-model="sectionType">
+            <el-tab-pane label="通用设置" :name="1"></el-tab-pane>
+            <el-tab-pane label="资源库" :name="2"></el-tab-pane>
+        </el-tabs>
+        <!-- 通用设置 -->
+        <template v-if="sectionType==1">
+        <el-form  
+            :model="formData" 
+            :rules="rules" 
+            label-position="top" 
+            class="base-config-form"
+            label-width="120px" 
+            ref="baseConfigForm"
+        >
+            <div class="part-type-box" style="margin-bottom:20px">
+                <el-button type="primary" @click="partType=1">登陆设置</el-button>
+                <el-button type="primary" @click="partType=2">研报设置</el-button>
+                <el-button type="primary" v-if="isShowPPT||isShowEnPPT" @click="partType=3">PPT配置</el-button>
             </div>
-            <div class="part-base-tow part" >
+            <!-- 登录设置模块 -->
+            <div class="part" v-show="partType===1">
                 <div class="side">
                     <!-- <el-form-item label="国内短信模板" prop="LoginSmsTpId" >
                         <div class="form-item-type-two sms-type">
@@ -101,12 +72,79 @@
                         <ConfigAnnotation picName="emailContentTemplate" @showImage="previewImage" picHintText=""/>
                     </el-form-item>
                 </div>
+            </div>
+            <!-- 研报设置 -->
+            <div class="part" v-show="partType===2">
                 <div class="side">
-                    <el-form-item label="中文研报分享标题" prop="H5ShareName">
-                        <el-input type="text" v-model="formData.H5ShareName" placeholder="请输入中文研报分享标题" />
+                    <el-form-item label="公司名称" prop="CompanyName">
+                        <el-input type="text" v-model="formData.CompanyName" placeholder="请输入公司名称" />
+                        <ConfigAnnotation picHintText="" picName="CompanyName" @showImage="previewImage"/>
                     </el-form-item>
-                    <el-form-item label="英文研报分享标题" prop="H5ShareEnName">
-                        <el-input type="text" v-model="formData.H5ShareEnName" placeholder="请输入英文研报分享标题" />
+                    <el-form-item label="公司水印" prop="CompanyWatermark" class="watermark">
+                        <ImgUpload 
+                            :imgUrl="formData.CompanyWatermark"
+                            @showImage="showImage"
+                            @upload="(file)=>handleUploadImage(file,'CompanyWatermark')"
+                            @remove="deleteFormImg('CompanyWatermark')"
+                            />
+                        <!-- 后面可能会有新的选项 -->
+                        <div style="position: absolute;top: -40px;left: 100px;display:flex;gap:0 20px">
+                            <el-checkbox-group v-if="isShowYBChart"
+                                v-model="checkList" >
+                                <el-checkbox label="研报图表"></el-checkbox>
+                            </el-checkbox-group>
+                            <div>
+                                <el-checkbox label="研报分享" v-model="formData.WatermarkReport"></el-checkbox>
+                                <el-tooltip 
+                                    effect="dark" 
+                                    content="研报详情分享页水印,水印内容为分享人用户名称+手机号(无手机号时为邮箱地址)" 
+                                    placement="top"
+                                >
+                                    <i class="el-icon-warning"></i>
+                                </el-tooltip>
+                            </div>
+                            
+                        </div>
+                        <ConfigAnnotation picName="CompanyWatermark" @showImage="previewImage"/>
+                    </el-form-item>
+                    <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 v-if="isShowXunFei">
+                        <!-- 科大讯飞 -->
+                        <div style="width:100%;">
+                            <span style="color:#606266;">科大讯飞服务</span> 
+                            <el-switch v-model="Iflytek"></el-switch>
+                        </div>
+                        <template v-if="Iflytek">
+                            <el-form-item label="APPID" prop="XfAppid">
+                                <el-input type="text" v-model="formData.XfAppid" placeholder="请输入APPID" />
+                            </el-form-item>
+                            <el-form-item label="APIKey" prop="XfApiKey">
+                                <el-input type="text" v-model="formData.XfApiKey" placeholder="请输入APIKey" />
+                            </el-form-item>
+                            <el-form-item label="APISecret" prop="XfApiSecret">
+                                <el-input type="text" v-model="formData.XfApiSecret" placeholder="请输入APISecret" />
+                            </el-form-item>
+                            <el-form-item label="vcn(voice_name)" prop="XfVcn">
+                                <el-input type="text" v-model="formData.XfVcn" placeholder="请输入voice_name" />
+                            </el-form-item>
+                        </template>
+                    </div>
+                </div>
+                <div class="side">
+                    <el-form-item label="中文研报分享抬头" prop="H5ShareName">
+                        <el-input type="text" v-model="formData.H5ShareName" placeholder="请输入中文研报分享抬头" />
+                    </el-form-item>
+                    <el-form-item label="英文研报分享抬头" prop="H5ShareEnName">
+                        <el-input type="text" v-model="formData.H5ShareEnName" placeholder="请输入英文研报分享抬头" />
                     </el-form-item>
                     <el-form-item label="关联公众号" prop="WxAppId">
                         <el-input type="text" v-model.trim="formData.WxAppId" placeholder="请输入AppID" />
@@ -130,7 +168,8 @@
                     </el-form-item>
                 </div>
             </div>
-            <div class="part-ppt part" v-if="isShowPPT||isShowEnPPT">
+            <!-- PPT配置 -->
+            <div class="part" v-if="isShowPPT||isShowEnPPT" v-show="partType===3">
                 <el-radio-group v-model="pptLang" style="margin-bottom: 22px;">
                     <el-radio-button label="cn">中文PPT</el-radio-button>
                     <el-radio-button label="en">英文PPT</el-radio-button>
@@ -235,37 +274,15 @@
                     </el-form-item>
                 </div>
             </div>
-            <div class="part-Iflytek part" 
-                v-if="isShowXunFei">
-                <!-- 科大讯飞 -->
-                <div style="width:100%;">
-                    <span style="color:#606266;">科大讯飞服务</span> 
-                    <el-switch v-model="Iflytek"></el-switch>
-                </div>
-                <template v-if="Iflytek">
-                    <div class="side">
-                        <el-form-item label="APPID" prop="XfAppid">
-                            <el-input type="text" v-model="formData.XfAppid" placeholder="请输入APPID" />
-                        </el-form-item>
-                        <el-form-item label="APIKey" prop="XfApiKey">
-                            <el-input type="text" v-model="formData.XfApiKey" placeholder="请输入APIKey" />
-                        </el-form-item>
-                    </div>
-                    <div class="side">
-                        <el-form-item label="APISecret" prop="XfApiSecret">
-                            <el-input type="text" v-model="formData.XfApiSecret" placeholder="请输入APISecret" />
-                        </el-form-item>
-                        <el-form-item label="vcn(voice_name)" prop="XfVcn">
-                            <el-input type="text" v-model="formData.XfVcn" placeholder="请输入voice_name" />
-                        </el-form-item>
-                    </div>
-                </template>
-            </div>
         </el-form>
         <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>
+        </template>
+        <!-- 资源库 -->
+        <smartReportImgSet v-if="sectionType==2"/>
+
         <el-image-viewer 
             v-if="showViewer" 
             :on-close="()=>{this.picShowList=[];this.showViewer = false}" 
@@ -278,11 +295,12 @@ import ImgThumbnail from './components/imgThumbnail.vue';
 import ImgUpload from './components/imgUpload.vue';
 import ConfigAnnotation from './components/configAnnotation.vue';
 import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
+import smartReportImgSet from './components/smartReportImgSet.vue'
 
 import {bannerupload} from '@/api/api.js';
 import {etaBaseConfigInterence} from '@/api/modules/etaBaseConfigApi.js';
 export default {
-    components: { ConfigAnnotation , ElImageViewer , ImgThumbnail , ImgUpload},
+    components: { ConfigAnnotation , ElImageViewer , ImgThumbnail , ImgUpload,smartReportImgSet},
     data() {
         let ListValidator = (rule,value,callback)=>{
             if(!value.length){
@@ -412,6 +430,11 @@ export default {
             /* loading */
             configLoading:null,
 
+            partType:1,//1登陆设置 2研报设置 3PPT配置
+
+            sectionType:2,//1通用设置 2资源库
+
+
         };
     },
     computed:{
@@ -640,12 +663,6 @@ export default {
             display: flex;
             justify-content: space-between;
             flex-wrap: wrap;
-            &:not(:last-child){
-                border-bottom: 1px solid #DCDFE6;
-            }
-            &:not(:first-child){
-                margin-top: 50px;
-            }
             .side{
                 width:45%;
                 .form-item-type-two{