Merge branch 'ETA1.4.2'

src/api/modules/smartReport.js

@@ -76,6 +76,26 @@ const apiSmartReport={
     //获取上期已发布报告
     getLastReport:params=>{
         return http.get('/smart_report/last_published_report',params)
+    },
+
+    // 资源库列表
+    imgReourceList:params=>{
+        return http.get('/smart_report/resource/list',params)
+    },
+
+    //新增资源库图片
+    imgReourceAdd:params=>{
+        return http.post('/smart_report/resource/add',params)
+    },
+
+    //资源库图片重命名
+    imgReourceRename:params=>{
+        return http.post('/smart_report/resource/rename',params)
+    },
+
+    //资源库图片删除
+    imgReourceDel:params=>{
+        return http.post('/smart_report/resource/remove',params)
     }
 
 }

src/utils/buttonConfig.js

@@ -42,7 +42,7 @@ export const reportManageBtn={
     reportManage_reportView:'smartReportManage:reportView',//研报预览：即是否能点击研报名称跳转预览页面
     reportManage_reportView_wechartShare:'smartReportManage:reportView:wechartShare',//研报预览页面-微信分享
     reportManage_reportView_copyWechat:'smartReportManage:reportView:copyWechat',//研报预览页面-复制链接
-    reportManage_reportView_exportImg:'smartReportManage:reportView:exportImg',//研报预览页面-导出图片
+    reportManage_exportImg:'smartReportManage:exportImg',//导出图片
     reportManage_audioDownload:'smartReportManage:audioDownload',//音频下载
     reportManage_audioUpload:'smartReportManage:audioUpload',//音频上传
     reportManage_reportDel:'smartReportManage:reportDel',//删除研报

src/views/smartReport/components/ImgSource.vue

@@ -0,0 +1,208 @@
+<template>
+    <div class="statistic-analysis-wrap">
+        <div class="top-box">
+            <div class="left-card">
+                <span>选择图片</span>
+            </div>
+            <div class="right">
+                <el-input
+                    class="search-box"
+					placeholder="请输入图片名称"
+					v-model="keyword"
+					size="medium"
+                    @input="handleSearch"
+                    style="width:240px"
+				/>
+                <el-select placeholder="请选择图片类型" v-model="type" style="width:240px" @change="handleSearch">
+                    <el-option label="版头" :value="1"></el-option>
+                    <el-option label="版尾" :value="2"></el-option>
+                </el-select>
+            </div>
+        </div>
+        <div class="main-box">
+            <!-- <div class="type-select-box">
+                <span style="margin-right:20px">版面设置</span>
+                <el-radio-group v-model="setType">
+                    <el-radio :label="1">版头</el-radio>
+                    <el-radio :label="2">版尾</el-radio>
+                </el-radio-group>
+            </div> -->
+            <div style="flex:1;overflow-y: auto;padding:20px 0">
+            <tableNoData text="暂无数据" size="mini" v-if="list.length===0&&finished"/>
+            <div class="list-wrap" v-infinite-scroll="handleLoadMore" :infinite-scroll-immediate="false">
+                <div 
+                    :class="['item',selectItem&&selectItem.ResourceId===item.ResourceId?'active':'']" 
+                    v-for="item in list" 
+                    :key="item.ResourceId" 
+                    @click="handleSelectItem(item)"
+                >
+                    <div class="img" :style="'backgroundImage:url('+item.ImgUrl+')'"></div>
+                    <div class="title">{{item.ImgName}}</div>
+                </div>
+            </div>
+            </div>
+            <div class="btns-box">
+                <el-button type="primary" plain @click="handleClose">取消</el-button>
+                <el-button type="primary" @click="handleSave">保存</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {apiSmartReport}  from '@/api/modules/smartReport'
+export default {
+    data() {
+        return {
+            keyword:'',
+            type:1,
+            list:[],
+            page:1,
+            pageSize:20,
+            finished:false,
+
+            setType:'',
+            selectItem:null
+        }
+    },
+    created(){
+        this.getImgList()
+    },
+    methods: {
+        //资源库列表
+        async getImgList(){
+            const res=await apiSmartReport.imgReourceList({
+                CurrentIndex:this.page,
+                PageSize:this.pageSize,
+                Type:this.type,
+                Keyword:this.keyword
+            })
+            if(res.Ret===200){
+                const arr = res.Data.List || [];
+                this.list =
+                    this.page === 1
+                    ? arr
+                    : [...this.list, ...arr];
+                this.finished =  res.Data.Paging.IsEnd;
+            }
+        },
+
+        handleLoadMore(){
+            if(this.finished) return
+            this.page++
+            this.getImgList()
+        },
+
+        handleSearch(){
+            this.page=1
+            this.finished=false
+            this.getImgList()
+        },
+
+        handleSelectItem(e){
+            this.selectItem=e
+        },
+
+        handleClose(){
+            this.$emit('close')
+        },
+
+        handleSave(){
+            // if(!this.setType){
+            //     this.$message.warning('请选择设置的版面类型')
+            //     return
+            // }
+            if(!this.selectItem){
+                this.$message.warning('请选择版图')
+                return
+            }
+            this.$emit('change',{
+                type:this.type,
+                data:this.selectItem
+            })
+        }
+        
+
+    },
+
+}
+</script>
+
+<style lang="scss" scoped>
+div{
+    box-sizing: border-box;
+}
+.statistic-analysis-wrap{
+    .top-box{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .right{
+            .search-box{
+                width: 330px;
+            }
+        }
+    }
+    .main-box{
+        margin-top: 30px;
+        height: calc(100vh - 180px);
+        border-radius: 4px;
+        border: 1px solid var(--gary-gy-5-line, #C8CDD9);
+        background: #FFF;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        .list-wrap{
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+            .item{
+                width: 240px;
+                cursor: pointer;
+                .img{
+                    background: var(--gary-gy-3-disabled, #EBEFF6);
+                    width: 240px;
+                    height: 240px;
+                    background-size: contain;
+                    background-position: center;
+                    background-repeat: no-repeat;
+                }
+                .title{
+                    margin-top: 5px;
+                    display: -webkit-box;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    -webkit-line-clamp: 2;
+                    line-break: anywhere;
+                    -webkit-box-orient: vertical;
+                }
+            }
+            .active{
+                position: relative;
+                .img{
+                    border: 1px solid #0052D9;
+                }
+                &::before{
+                    content: '';
+                    display: block;
+                    width: 20px;
+                    height: 20px;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    background-image: url('~@/assets/img/smartReport/icon17.png');
+                    background-size: cover;
+                    background-repeat: no-repeat;
+                }
+            }
+        }
+        .btns-box{
+            padding-top: 20px;
+            text-align: center;
+            .el-button{
+                width: 200px;
+            }
+        }
+    }
+}
+</style>

src/views/smartReport/editReport.vue

@@ -55,23 +55,35 @@
                     animation="300"
                     :sort="false"
                     tag="ul"
+                    filter='.unDrag'
                 >
                     <li class="comp-item" :comp-data="JSON.stringify(comp)" v-for="comp in compList" :key="comp.id">
                         <img :src="comp.icon">
                     </li>
+                    <li class="comp-item unDrag" style="cursor: pointer;">
+                        <el-color-picker v-model="bgColor" @change="handleBgColorChange"></el-color-picker>
+                    </li>
                 </draggable>
 
-                <div class="report-content-box">
+                <div class="report-content-box" id="report-content-box">
+                    <div class="html-head-img-box">
+                        <div class="opt-btn-box" style="display: none;">
+                            <div class="del-btn" @click.stop="headImg=''"></div>
+                        </div>
+                        <img :src="headImg" alt="" style="display:block;width:100%">
+                    </div>
                     <draggable
                         :list="conList"
                         :group="{ name: 'component', pull: true, put: true }"
                         class="report-html-wrap"
+                        id="report-html-content"
                         animation="300"
                         tag="div"
                         handle=".drag-btn_p"
                         @add="handleParentAdd"
                         @remove="handleParentRemove"
                         :move="handleParentMove"
+                        :style="{backgroundColor:bgColor}"
                     >
                         <div 
                             :class="[
@@ -132,6 +144,12 @@
                             </draggable>
                         </div>
                     </draggable>
+                    <div class="html-end-img-box">
+                        <div class="opt-btn-box" style="display: none;">
+                            <div class="del-btn" @click.stop="endImg=''"></div>
+                        </div>
+                        <img :src="endImg" alt="" style="display:block;width:100%">
+                    </div>
                 </div>
             </div>
 
@@ -168,6 +186,8 @@
                 <ETASandBox v-if="rightType==='etaSandBox'"/>
                 <!-- 语义分析 -->
                 <SemanticAnalysis v-if="rightType==='semanticAnalysis'"/>
+                <!-- 版图资源库 -->
+                <ImgSource v-if="rightType==='imgSource'" @change="handleInsertImgSource" @close="handleCloseRight"/>
                 </div>
                 </div>
             </div>
@@ -226,6 +246,7 @@ import ETAPriceChart from './components/ETAPriceChart.vue'
 import ETASandBox from './components/ETASandBox.vue'
 import SemanticAnalysis from './components/SemanticAnalysis.vue'
 import { getUrlParams } from '@/utils/common'
+import ImgSource from './components/ImgSource.vue'
 export default {
     name:"smartReportEdit",
     components: {
@@ -242,7 +263,8 @@ export default {
         StatisticAnalysis,
         ETAPriceChart,
         ETASandBox,
-        SemanticAnalysis
+        SemanticAnalysis,
+        ImgSource
     },
     watch:{
         'taskTime'(){
@@ -283,6 +305,11 @@ export default {
             showReportBaseInfo:false,
 
             topTypeList:[
+                {
+                    name:'版图资源库',
+                    type:'imgSource',
+                    icon:require('@/assets/img/smartReport/icon04.png')
+                },
                 {
                     name:'图库',
                     type:'etaChart',
@@ -358,6 +385,10 @@ export default {
             contentChange:false,//内容是否发生变化
 
             isDragResize:false,//是否正在拖动缩放
+
+            bgColor:'',//背景色
+            headImg:'',//版头图片
+            endImg:'',//版尾图片
         }
     },
     methods: {
@@ -459,7 +490,7 @@ export default {
 
         // 跳转预览
         handlePreviewReport(){
-            const htmlStr=$('.report-html-wrap').html()
+            const htmlStr=document.getElementById('report-content-box').outerHTML;
             sessionStorage.setItem('smartReportContent', htmlStr);
 			let { href } = this.$router.resolve({ 
                 path: '/smartReportDetail',
@@ -762,11 +793,15 @@ export default {
 
         // 编辑保存报告
         handleReportEdit(e){
+            const html=document.getElementById('report-content-box').outerHTML;
             const params={
                 SmartReportId:Number(this.$route.query.id)||0,
                 ...e,
-                Content:$('.report-html-wrap').html(),
-                ContentStruct:JSON.stringify(this.conList)
+                Content:html,
+                ContentStruct:JSON.stringify(this.conList),
+                HeadImg:this.headImg,
+                EndImg:this.endImg,
+                CanvasColor:this.bgColor
             }
             console.log(params);
             apiSmartReport.reportEdit({...params}).then(res=>{
@@ -796,6 +831,9 @@ export default {
                 if(res.Ret===200){
                     this.reportInfo=res.Data
                     this.conList=res.Data.ContentStruct?JSON.parse(res.Data.ContentStruct):[]
+                    this.headImg=res.Data.HeadImg
+                    this.endImg=res.Data.EndImg
+                    this.bgColor=res.Data.CanvasColor
                     this.$nextTick(()=>{
                         this.contentChange=false
                     })
@@ -850,14 +888,18 @@ export default {
         
         // 自动/存草稿保存内容
         handleSaveContent({isAutoSave}){
+            const html=document.getElementById('report-content-box').outerHTML;
             return new Promise((resolve,reject)=>{
                 const id=this.$route.query.id||0
                 if(!id) return
                 apiSmartReport.saveReportContent({
                     SmartReportId:Number(id),
-                    Content:$('.report-html-wrap').html(),
+                    Content:html,
                     ContentStruct:JSON.stringify(this.conList),
                     NoChange:this.contentChange?2:1,
+                    HeadImg:this.headImg,
+                    EndImg:this.endImg,
+                    CanvasColor:this.bgColor
                 }).then(res=>{
                     if(res.Ret===200){
                         resolve(true)
@@ -1006,6 +1048,23 @@ export default {
         //报告消息推送
         reportSendMsg(){
             apiSmartReport.reportMsgSend({SmartReportId:Number(this.$route.query.id)}).then(res=>{})
+        },
+
+        // 插入版头版尾
+        handleInsertImgSource(e){
+            if(e.type=='1'){
+                this.$message.success('版头设置成功')
+                this.headImg=e.data.ImgUrl
+            }else{
+                this.$message.success('版尾设置成功')
+                this.endImg=e.data.ImgUrl
+            }
+            this.contentChange=true
+        },
+
+        handleBgColorChange(e){
+            this.bgColor=e||''
+            this.contentChange=true
         }
     },
     created() {
@@ -1049,6 +1108,33 @@ export default {
     // min-height: 0 !important;
     // border: none !important;
 }
+
+.el-color-picker__trigger{
+    &::after{
+        content:'';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #fff;
+    }
+    .el-color-picker__color::after{
+        content: '';
+        display: block;
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        left: 7px;
+        top: 7px;
+        background-image: url('~@/assets/img/smartReport/icon18.png');
+        background-size: cover;
+        background-repeat: no-repeat;
+        z-index: 10;
+    }
+}
+
 }
 </style>
 <style lang='scss' scoped>
@@ -1138,13 +1224,14 @@ div{
         display: flex;
         align-items: center;
         background-color: #fff;
-        height: 50px;
+        height: 80px;
         border-radius: 4px;
         border: 1px solid var(--gary-gy-5-line, #C8CDD9);
         .item{
             cursor: pointer;
             flex: auto;
             display: flex;
+            flex-direction: column;
             align-items: center;
             justify-content: center;
             border-right: 1px solid #C8CDD9;
@@ -1155,7 +1242,7 @@ div{
             .icon{
                 width: 20px;
                 height: 20px;
-                margin-right: 4px;
+                // margin-right: 4px;
             }
         }
     }
@@ -1164,9 +1251,32 @@ div{
         border: 1px solid var(--gary-gy-5-line, #C8CDD9);
         background: #FFF;
         padding: 20px 20px 20px 44px;
-        height: calc(100vh - 180px);
+        height: calc(100vh - 210px);
         position: relative;
         overflow-y: auto;
+        .html-head-img-box,.html-end-img-box{
+            position: relative;
+            &:hover{
+                .opt-btn-box{
+                    display: block !important;
+                }
+            }
+            .opt-btn-box{
+                position: absolute;
+                left: -36px;
+                padding-right: 8px;
+                top: 0;
+                .del-btn::after{
+                    content: '';
+                    display: block;
+                    width: 28px;
+                    height: 28px;
+                    background-image: url('~@/assets/img/smartReport/icon13.png');
+                    background-size: cover;
+                    cursor: pointer;
+                }
+            }
+        }
     }
 }
 

src/views/smartReport/reportList.vue

@@ -309,7 +309,7 @@
                                 >取消发布</span>
                                 <span
                                     v-if="scope.row.DetailImgUrl"
-                                    v-permission="permissionBtn.smartReportManageBtn.reportManage_reportView_exportImg"
+                                    v-permission="permissionBtn.smartReportManageBtn.reportManage_exportImg"
                                     @click="handleDownReportImg(scope.row.DetailImgUrl,scope.row.Title)"
                                     style="cursor: pointer; color: #4099ef;display:inline-block"
                                 >图片下载</span>

src/views/system_manage/components/smartReportImgSet.vue

@@ -0,0 +1,464 @@
+<template>
+    <div class="smart-report-img-set-page">
+        <div class="top-wrap">
+            <el-input v-model="keyword" placeholder="请输入图片名称" clearable style="width:200px;margin-right:20px" @input="handleSearch"></el-input>
+            <el-select placeholder="请选择图片类型" v-model="type" clearable style="width:200px" @change="handleSearch">
+                <el-option label="版头" :value="1"></el-option>
+                <el-option label="版尾" :value="2"></el-option>
+            </el-select>
+            <el-button type="primary" style="float:right" @click="handleShowUploadPop">上传图片</el-button>
+        </div>
+
+        <div class="select-status-box" v-if="selectIds.length>0">
+            <el-checkbox 
+                :indeterminate="isIndeterminate" 
+                v-model="checkAll" 
+                @change="handleCheckAllChange"
+            >全选</el-checkbox>
+            <span>已选择{{selectIds.length}}项</span>
+            <span @click="selectIds=[]" style="color:#1146DB;margin-left:20px;cursor: pointer;">取消选择</span>
+            <span @click="handleBatchDel" style="color:#1146DB;margin-left:20px;cursor: pointer;">删除</span>
+        </div>
+
+
+        <ul class="img-list-wrap">
+            <li class="img-item" v-for="item in list" :key="item.ResourceId">
+                <div :class="['select-box',selectIds.includes(item.ResourceId)?'select-box-active':'']" @click="handleSelectItem(item)"></div>
+                <div class="opt-box">
+                    <div class="item" @click="handleShowImgFull(item)">
+                        <img src="~@/assets/img/icons/fullsreen.png" alt="">
+                    </div>
+                    <el-dropdown @command="handleClickOpt">
+                    <div class="item">
+                        <img src="~@/assets/img/icons/more.png" alt="">
+                    </div>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item :command="{type:'rename',data:item}">重命名</el-dropdown-item>
+                        <el-dropdown-item :command="{type:'del',data:item}">删除</el-dropdown-item>
+                    </el-dropdown-menu>
+                    </el-dropdown>
+                </div>
+                <img class="img" :src="item.ImgUrl" alt="">
+                <p class="name">{{item.ImgName}}</p>
+            </li>
+        </ul>
+        <tableNoData text="暂无数据" v-if="list.length===0"/>
+        <!-- <el-col :span="24" class="toolbar">
+            <el-pagination
+                layout="total,prev,pager,next"
+                background
+                @current-change="handleCurrentChange"
+                :page-size="pageSize"
+                :total="total"
+                style="float: right"
+            />
+        </el-col> -->
+
+        <!-- 上传图片弹窗 -->
+        <el-dialog
+            :visible.sync="uploadImgPop"
+            :title="formData.id?'重命名':'上传图片'"
+            :close-on-click-modal="false"
+            :append-to-body="true"
+            @close="cancelHandle"
+            custom-class="classify-dialog"
+            center
+            width="650px"
+            v-dialogDrag
+        >
+            
+            <el-form 
+                :model="formData" 
+                :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" :disabled="formData.id">
+                        <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"
+                        :disabled="formData.id"
+                    >
+                        <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;" @click="handleSave">确定</el-button>
+                </div>
+            </el-form>
+            
+        </el-dialog>
+
+        <el-image-viewer 
+            v-if="showViewer" 
+            :on-close="()=>{this.picShowList=[];this.showViewer = false}" 
+            :url-list="picShowList" 
+        />
+    </div>
+</template>
+
+<script>
+import {bannerupload} from '@/api/api.js';
+import {apiSmartReport}  from '@/api/modules/smartReport'
+import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
+export default {
+    components:{ElImageViewer},
+    data() {
+        return {
+            keyword:'',
+            type:'',
+            page:1,
+            pageSize:1000,
+            list:[],
+            total:0,
+
+            uploadImgPop:false,
+            formData:{
+                id:0,
+                name:'',
+                type:'',
+                imgUrl:''
+            },
+            formRules:{
+                name:[{ required: true, message: '请输入图片名称', trigger: 'blur' }],
+                type:[{ required: true, message: '请选择图片类型', trigger: 'change' }],
+                imgUrl:[{ required: true, message: '请上传图片', trigger: 'change' }]
+            },
+
+            showViewer:false,
+            picShowList:[],
+
+            delIds:[],//要删除的id集合
+            selectIds:[],
+
+            isIndeterminate:false,
+            checkAll:false
+        }
+    },
+    created() {
+        this.getImgList()
+    },
+    methods: {
+        handleSelectItem(e){
+            const index=this.selectIds.indexOf(e.ResourceId)
+            if(index>-1){
+                this.selectIds.splice(index,1)
+            }else{
+                this.selectIds.push(e.ResourceId)
+            }
+
+            this.checkAll=this.selectIds.length===this.list.length?true:false
+            this.isIndeterminate=this.selectIds.length>0&&this.selectIds.length<this.list.length
+        },
+        handleCheckAllChange(val){
+            if(val){
+                this.selectIds=this.list.map(item=>item.ResourceId)
+            }else{
+                this.selectIds=[]
+            }
+        },
+
+        //分页页码跳转
+        handleCurrentChange(current) {
+            this.page = current;
+            this.getImgList();
+        },
+
+
+        //资源库列表
+        async getImgList(){
+            // 获取列表数据重置选择数据
+            this.selectIds=[]
+            this.isIndeterminate=false
+            this.checkAll=false
+            this.delIds=[]
+            
+            const res=await apiSmartReport.imgReourceList({
+                CurrentIndex:this.page,
+                PageSize:this.pageSize,
+                Type:this.type,
+                Keyword:this.keyword
+            })
+            if(res.Ret===200){
+                this.list=res.Data.List||[]
+                this.total=res.Data.Paging.Totals
+            }
+        },
+
+        handleSearch(){
+            this.page=1
+            this.getImgList()
+        },
+
+        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
+            })
+        
+        },
+
+        handleSave(){
+            this.$refs.ruleForm.validate((valid)=>{
+                if(valid){
+                    const params={
+                        Type:this.formData.type,
+                        ImgUrl:this.formData.imgUrl,
+                        ImgName:this.formData.name
+                    }
+                    if(this.formData.id){
+                        // 编辑
+                        apiSmartReport.imgReourceRename({
+                            ResourceId:this.formData.id,
+                            ImgName:this.formData.name
+                        }).then(res=>{
+                            if(res.Ret===200){
+                                this.$message.success('修改成功')
+                                this.page=1
+                                this.getImgList()
+                                this.handleCloseImgUpload()
+                            }
+                        })
+                        return
+                    }
+                    apiSmartReport.imgReourceAdd(params).then(res=>{
+                        if(res.Ret===200){
+                            this.$message.success('新增成功')
+                            this.page=1
+                            this.getImgList()
+                            this.handleCloseImgUpload()
+                        }
+                    })
+                }
+            })
+        },
+
+        handleCloseImgUpload(){
+            this.uploadImgPop=false
+            this.formData.id=0
+            this.$refs.ruleForm.resetFields()
+        },
+
+        handleShowImgFull(e){
+            console.log(e);
+            this.picShowList=[e.ImgUrl]
+            this.showViewer=true
+        },
+
+        handleClickOpt(e){
+            if(e.type==='del'){
+                this.delIds=[e.data.ResourceId]
+                this.handleImgDel()
+            }
+            if(e.type==='rename'){
+                this.formData.id=e.data.ResourceId
+                this.formData.name=e.data.ImgName
+                this.formData.type=e.data.Type
+                this.formData.imgUrl=e.data.ImgUrl
+                this.uploadImgPop=true
+            }
+        },
+
+        handleShowUploadPop(){
+            this.formData.id=0
+            this.formData.name=''
+            this.formData.type=''
+            this.formData.imgUrl=''
+            this.uploadImgPop=true
+        },
+
+        handleBatchDel(){
+            this.delIds=this.selectIds
+            this.handleImgDel()
+        },
+
+        handleImgDel(){
+            this.$confirm('是否确认删除选中图片?','提示',{
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(()=>{
+                apiSmartReport.imgReourceDel({ResourceIds:this.delIds.join(',')}).then(res=>{
+                    if(res.Ret===200){
+                        this.$message.success('删除成功')
+                        this.page=1
+                        this.getImgList()
+                    }
+                })
+            })
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.smart-report-img-set-page{
+    padding: 30px;
+    padding-bottom: 100px;
+    .select-status-box{
+        background-color: #F8F8F8;
+        padding: 10px 20px;
+        margin-top: 20px;
+    }
+}
+.img-list-wrap{
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    .img-item{
+        position: relative;
+        width: 160px;
+        cursor: pointer;
+        .img{
+            display: block;
+            width: 100%;
+            height: 160px;
+            background-color: var(--gary-gy-3-disabled, #EBEFF6);
+            object-fit: contain !important;
+            box-sizing: border-box;
+            &:hover{
+                border: 1px solid #3375e1;
+            }
+        }
+        .name{
+            margin-top: 5px;
+            display: -webkit-box;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-line-clamp: 2;
+            line-break: anywhere;
+            -webkit-box-orient: vertical;
+        }
+        .select-box{
+            position: absolute;
+            left: 1px;
+            top: 1px;
+            width: 12px;
+            height: 12px;
+            background-color: #EBEFF6;
+            display: none;
+        }
+        .select-box-active{
+            background-image: url('~@/assets/img/smartReport/icon17.png');
+            background-repeat: no-repeat;
+            background-size: cover;
+            display: block;
+        }
+        .opt-box{
+            display: none;
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            z-index: 5;
+            .item{
+                width: 24px;
+                height: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: #fff;
+                border-radius: 50%;
+                margin-left: 10px;
+                img{
+                    width: 16px;
+                    height: 16px;
+                }
+            }
+        }
+        &:hover{
+            .opt-box{
+                display: flex;
+            }
+            .select-box{
+                display: block;
+            }
+        }
+    }
+}
+.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,30 @@
 <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 class="nav-type-box">
+            <span :class="[sectionType===1?'active':'']" @click="sectionType=1">通用设置</span>
+            <span :class="[sectionType===2?'active':'']" @click="sectionType=2">资源库</span>
+        </div>
+        <!-- 通用设置 -->
+        <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:40px">
+                <el-button type="primary" :plain="partType===1?false:true" @click="partType=1" :style="{width:'120px',border:'none',color:partType==1?'#fff':'#333'}">登录设置</el-button>
+                <el-button type="primary" :plain="partType===2?false:true" @click="partType=2" :style="{width:'120px',border:'none',color:partType==2?'#fff':'#333'}">研报设置</el-button>
+                <el-button type="primary" :plain="partType===3?false:true" v-if="isShowPPT||isShowEnPPT" @click="partType=3" :style="{width:'120px',border:'none',color:partType==3?'#fff':'#333'}">PPT配置</el-button>
+                <div class="btn-wrap" style="text-align: center;float:right">
+                    <el-button type="primary" plain style="width:120px;" @click="cancel">取消</el-button>
+                    <el-button type="primary"  style="margin-left:20px;width:120px;" @click="saveBaseConfig">保存</el-button>
                 </div>
             </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 +76,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="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>
+                    <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 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 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 +172,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 +278,12 @@
                     </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 +296,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 +431,11 @@ export default {
             /* loading */
             configLoading:null,
 
+            partType:1,//1登陆设置 2研报设置 3PPT配置
+
+            sectionType:1,//1通用设置 2资源库
+
+
         };
     },
     computed:{
@@ -628,10 +652,29 @@ export default {
 <style scoped lang="scss">
 .eta-base-config{
     box-sizing: border-box;
-    padding:30px;
+    // padding:30px;
     border-radius: 4px;
     background-color: #fff;
+    .nav-type-box{
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #E7E7E7;
+        span{
+            display: block;
+            height: 100%;
+            line-height: 32px;
+            padding: 8px;
+            cursor: pointer;
+            margin-right: 10px;
+            color: rgba($color: #000000, $alpha: 0.6);
+        }
+        .active{
+            color: #0052D9;
+            border-bottom: 2px solid #0052D9;
+        }
+    }
     .base-config-form{
+        padding: 30px;
         .el-form-item{
             width:100%;
         }
@@ -640,12 +683,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{