Browse Source

研报模块页面样式调整

cxmo 1 year ago
parent
commit
2ddec84153

+ 3 - 0
src/assets/icons/filter.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V4.78597L9.75 7.28597V14H6.25V7.28597L2 4.78597V3ZM13 3H3V4.21403L7.25 6.71403V13H8.75V6.71403L13 4.21403V3Z" fill="#666666"/>
+</svg>

+ 2 - 2
src/views/classify_manage/classifylist.vue

@@ -68,7 +68,7 @@
 				<img :src="isadd?$icons.add:$icons.edit" style="color:#fff;width:16px;height:16px;marginRight:5px;">
 				<span style="fontSize:16px;">{{isadd?'添加分类':'编辑分类'}}</span>
 			</div>
-			<el-form :model="aeForm" :rules="aerules" ref="aeForm" label-position="right" label-width="140px" class="demo-aeForm" id="login-container" @submit.native.prevent>
+			<el-form :model="aeForm" :rules="aerules" ref="aeForm" label-position="right" label-width="140px" class="aeForm"  @submit.native.prevent>
 				<el-form-item prop="classify_name" label="分类名称">
 					<el-input type="text" v-model="aeForm.classify_name" placeholder="请输入" size="small" style="width:400px;"></el-input>
 				</el-form-item>
@@ -938,7 +938,7 @@ export default{
 		transform: translate(-50%,-50%);
 		margin-top: 0 !important;
 		.el-dialog__body {
-			max-height: 600px;
+			height:65vh;
     		overflow-y: auto;
 		}
 	}

+ 37 - 3
src/views/report_manage/addreportNew.vue

@@ -2,6 +2,7 @@
 	<div id="addreport">
 		<div 
 			id="leftfroala" 
+			:class="{'full':!isRightFormShow,'block':isRightFormShow}"
 			v-loading="importChartNum>0" 
 			element-loading-text="图表批量插入中..."
 			element-loading-spinner="el-icon-loading"
@@ -15,7 +16,7 @@
 				v-model="aeForm.content"
 			></froala>
 		</div>
-		<div id="rightitems">
+		<div id="rightitems" v-show="isRightFormShow">
 			<div
 				style="
 					text-align: right;
@@ -304,6 +305,13 @@
 				</div>
 			</div>
 		</div>
+		<span
+			class="slide-icon"
+			:class="{'slide-left':!isRightFormShow,'slide-right':isRightFormShow}"
+			@click="isRightFormShow = !isRightFormShow"
+		>
+			<i :class="{'el-icon-d-arrow-left':!isRightFormShow,'el-icon-d-arrow-right':isRightFormShow}"></i>
+		</span>
 
 		<!-- 定时发布弹窗 -->
 		<el-dialog 
@@ -437,7 +445,7 @@ export default {
 		}
 	},
 	updated() {
-		$('#leftfroala').find('p').css({ fontSize: '16px' });
+		$('#leftfroala').find('p').css({ fontSize: '16px',width:'100%' });
 		$('#leftfroala').find('p strong span').css({ fontSize: '16px' });
 		$('#leftfroala')
 			.find('.fr-placeholder')
@@ -915,7 +923,13 @@ export default {
 	overflow: hidden;
 	#leftfroala {
 		flex: 1;
-		max-width: calc(100vw - 750px);
+		overflow: hidden;
+		&.full{
+			max-width: calc(100vw - 200px - 60px);
+		}
+		&.block{
+			max-width: calc(100vw - 200px - 60px - 500px);
+		}
 	}
 	#rightitems {
 		width: 500px;
@@ -973,6 +987,26 @@ export default {
 			font-size: 14px;
 		}
 	}
+	.slide-icon {
+		padding: 20px 0;
+		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
+		border-radius: 5px;
+		background-color: #fff;
+		cursor: pointer;
+		position: fixed;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 99;
+		&:hover {
+			background-color: #e0e0e0;
+		}
+		&.slide-left {
+			right: 30px;
+		}
+		&.slide-right {
+			right: 500px;
+		}
+	}
 }
 </style>
 <style lang="scss">

+ 37 - 3
src/views/report_manage/editreportNew.vue

@@ -2,6 +2,7 @@
 	<div id="editreport">
 		<div 
 			id="leftfroala"
+			:class="{'full':!isRightFormShow,'block':isRightFormShow}"
 			v-loading="importChartNum>0" 
 			element-loading-text="图表批量插入中..."
 			element-loading-spinner="el-icon-loading"
@@ -15,7 +16,7 @@
 				v-model="aeForm.content"
 			></froala>
 		</div>
-		<div id="rightitems">
+		<div id="rightitems" v-show="isRightFormShow">
 			<div
 				style="
 					text-align: right;
@@ -301,6 +302,13 @@
 				</div>
 			</div>
 		</div>
+		<span
+			class="slide-icon"
+			:class="{'slide-left':!isRightFormShow,'slide-right':isRightFormShow}"
+			@click="isRightFormShow = !isRightFormShow"
+		>
+			<i :class="{'el-icon-d-arrow-left':!isRightFormShow,'el-icon-d-arrow-right':isRightFormShow}"></i>
+		</span>
 
 		<!-- 定时发布弹窗 -->
 		<el-dialog 
@@ -434,7 +442,7 @@ export default {
 		window.addEventListener('message',this.reInitIframe)
 	},
 	updated() {
-		$('#leftfroala').find('p').css({ fontSize: '16px' });
+		$('#leftfroala').find('p').css({ fontSize: '16px',width:'100%'});
 	},
 	destroyed() {
 		window.removeEventListener('message',this.reInitIframe)
@@ -900,7 +908,13 @@ export default {
 	overflow: hidden;
 	#leftfroala {
 		flex: 1;
-		max-width: calc(100vw - 750px);
+		overflow: hidden;
+		&.full{
+			max-width: calc(100vw - 200px - 60px);
+		}
+		&.block{
+			max-width: calc(100vw - 200px - 60px - 500px);
+		}
 	}
 	#rightitems {
 		width: 500px;
@@ -957,6 +971,26 @@ export default {
 			font-size: 14px;
 		}
 	}
+	.slide-icon {
+		padding: 20px 0;
+		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
+		border-radius: 5px;
+		background-color: #fff;
+		cursor: pointer;
+		position: fixed;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 99;
+		&:hover {
+			background-color: #e0e0e0;
+		}
+		&.slide-left {
+			right: 30px;
+		}
+		&.slide-right {
+			right: 500px;
+		}
+	}
 }
 </style>
 <style lang="scss">

+ 1 - 0
src/views/report_manage/mixins/messagePush.js

@@ -4,6 +4,7 @@ export default {
   data() {
     return {
       isMessagePost: false,
+      isRightFormShow:true
     };
   },
   methods: {

+ 39 - 4
src/views/report_manage/reportEn/reportEditor.vue

@@ -1,6 +1,6 @@
 <template>
 	<div id="editreport">
-    <div class="leftitems">
+    <div class="leftitems" :class="{'full':!isRightFormShow,'block':isRightFormShow}">
       <div class="overview" :style="{marginBottom:value?'20px':'0'}">
         <p @click="value=!value">Overview
           <span><i :class="value?'el-icon-arrow-down':'el-icon-arrow-up'"></i></span>
@@ -30,7 +30,7 @@
 		  </div>
     </div>
 		
-		<div id="rightitems">
+		<div id="rightitems" v-show="isRightFormShow">
 			<div
 				style="
 					text-align: right;
@@ -85,7 +85,7 @@
 				</el-tabs>
 				<div
 					v-if="tabsactive == '基础信息'"
-					style="height: calc(100vh - 280px); overflow-y: auto"
+					style="height: calc(100vh - 315px); overflow-y: auto"
 				>
 					<el-form
 						:model="aeForm"
@@ -313,6 +313,13 @@
 				</div>
 			</div>
 		</div>
+		<span
+			class="slide-icon"
+			:class="{'slide-left':!isRightFormShow,'slide-right':isRightFormShow}"
+			@click="isRightFormShow = !isRightFormShow"
+		>
+			<i :class="{'el-icon-d-arrow-left':!isRightFormShow,'el-icon-d-arrow-right':isRightFormShow}"></i>
+		</span>
 
 		<!-- 设置英文信息弹窗 -->
 		<set-en-name-dia 
@@ -955,15 +962,22 @@ export default {
   box-sizing: border-box;
   .leftitems{
     flex: 1;
-		max-width: calc(100% - 500px);
     display: flex;
     flex-direction: column;
+	&.full{
+		max-width: calc(100vw - 200px - 120px);
+	}
+	&.block{
+		max-width: calc(100vw - 200px - 120px - 500px);
+	}
     .overview{
+		overflow: hidden;
       p{
         margin-bottom: 35px;
       }
     }
     #leftfroala{
+		overflow: hidden;
       flex: 1;
       #froala-editor{
 
@@ -980,6 +994,7 @@ export default {
 		overflow: hidden;
 		position: fixed;
 		right: 70px;
+		/* bottom:30px; */
 		#tabs {
 			padding: 0px 20px;
 			box-sizing: border-box;
@@ -1036,6 +1051,26 @@ export default {
       color: #C0C4CC;
     }
 	}
+	.slide-icon {
+		padding: 20px 0;
+		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
+		border-radius: 5px;
+		background-color: #fff;
+		cursor: pointer;
+		position: fixed;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 99;
+		&:hover {
+			background-color: #e0e0e0;
+		}
+		&.slide-left {
+			right: 30px;
+		}
+		&.slide-right {
+			right: 540px;
+		}
+	}
 }
 </style>
 <style lang="scss">

+ 115 - 10
src/views/report_manage/reportEn/reportlist.vue

@@ -21,7 +21,85 @@
               @click="handlePullReport"
             >同步策略报告</el-button>
           </el-form-item>
+          <!-- 整合的筛选项 -->
           <el-form-item label="">
+            <el-popover 
+                placement="bottom" 
+                trigger="click" 
+                :visible-arrow="false"
+                popper-class="report-select-popover"
+                width="320" style="display: inline-block;">
+                <div class="select-wrap">
+                    <p>筛选项</p>
+                    <div class="select-item">
+                        <el-select
+                            v-model="searchform.timeType"
+                            placeholder="选择时间类型"
+                            size="medium"
+                            style="width:100%;"
+                        >
+                            <el-option label="发布时间" value="publish_time"></el-option>
+                            <el-option label="更新时间" value="modify_time"></el-option>
+                        </el-select>
+                    </div>
+                    <div class="select-item">
+                        <el-select
+                            v-model="searchform.frequency"
+                            placeholder="更新频度筛选"
+                            size="medium"
+                            clearable
+                            style="width:100%;"
+                        >
+                            <el-option v-for="item in frequencyArr" :key="item" :label="item" :value="item"></el-option>
+                        </el-select>
+                    </div>
+                    <div class="select-item">
+                        <el-cascader
+                            :options="optionsArr"
+                            :props="{
+                                value:'Id',
+                                label:'ClassifyName',
+                                children:'Child'
+                            }"
+                            v-model="searchform.classifynameArr"
+                            clearable
+                            placeholder="类型筛选"
+                            style="width:100%;"
+                        ></el-cascader>
+                    </div>
+                    <div class="select-item">
+                        <el-select
+                            v-model.number="searchform.publishState"
+                            placeholder="发布筛选"
+                            size="medium"
+                            clearable
+                            style="width:100%;"
+                        >
+                            <el-option label="已发布" :value="2"></el-option>
+                            <el-option label="未发布" :value="1"></el-option>
+                        </el-select>
+                    </div>
+                    <div class="select-item">
+                        <el-select
+                            v-permission="permissionBtn.enReportManageBtn.enReport_sendEmail"
+                            v-model.number="searchform.EmailState"
+                            placeholder="群发状态筛选"
+                            size="medium"
+                            clearable
+                            style="width:100%;"
+                        >
+                            <el-option label="未群发邮件" :value="1"></el-option>
+                            <el-option label="已群发邮件" :value="2"></el-option>
+                        </el-select>
+                    </div>
+                </div>
+                <div class="select-btn" slot="reference">
+                    <img src="~@/assets/icons/filter.svg">
+                    <span>筛选条件</span>
+                </div>
+            </el-popover>
+          </el-form-item>
+          <!-- <el-form-item label="">
             <el-select
               v-model="searchform.timeType"
               placeholder="选择时间类型"
@@ -31,7 +109,7 @@
               <el-option label="发布时间" value="publish_time"></el-option>
               <el-option label="更新时间" value="modify_time"></el-option>
             </el-select>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item label="">
             <el-date-picker
               v-model="searchform.dateValue"
@@ -45,7 +123,7 @@
               style="width: 280px"
             ></el-date-picker>
           </el-form-item>
-          <el-form-item label="">
+          <!-- <el-form-item label="">
             <el-select
               v-model="searchform.frequency"
               placeholder="更新频度筛选"
@@ -55,8 +133,8 @@
             >
               <el-option v-for="item in frequencyArr" :key="item" :label="item" :value="item"></el-option>
             </el-select>
-          </el-form-item>
-          <el-form-item label="">
+          </el-form-item> -->
+          <!-- <el-form-item label="">
             <el-cascader
               :options="optionsArr"
               :props="{
@@ -69,8 +147,8 @@
               placeholder="类型筛选"
               size="medium"
             ></el-cascader>
-          </el-form-item>
-          <el-form-item label="">
+          </el-form-item> -->
+          <!-- <el-form-item label="">
             <el-select
               v-model.number="searchform.publishState"
               placeholder="发布筛选"
@@ -81,8 +159,8 @@
               <el-option label="已发布" :value="2"></el-option>
               <el-option label="未发布" :value="1"></el-option>
             </el-select>
-          </el-form-item>
-          <el-form-item label="">
+          </el-form-item> -->
+          <!-- <el-form-item label="">
             <el-select
               v-permission="permissionBtn.enReportManageBtn.enReport_sendEmail"
               v-model.number="searchform.EmailState"
@@ -94,7 +172,7 @@
               <el-option label="未群发邮件" :value="1"></el-option>
               <el-option label="已群发邮件" :value="2"></el-option>
             </el-select>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item>
             <el-input
               placeholder="标题 / 创建人"
@@ -125,6 +203,7 @@
 					:sortable="item.sortable"
 					align="center"
 					:prop="item.key"
+					:fixed="item.fixed?item.fixed:false"
 				>
           <template #header>
             <span v-if="item.key==='Pv'">
@@ -470,7 +549,8 @@ export default {
         {
 					label: '操作',
 					key: 'handle',
-          widthsty: 150
+					widthsty: 150,
+					fixed:'right',
 				},
       ],
 
@@ -857,6 +937,15 @@ export default {
     width: 100%;
   }
 }
+.report-select-popover{
+    .select-wrap{
+          padding:8px;
+          margin:0 20px;
+          .select-item{
+              margin-top:20px;
+          }
+      }
+}
 </style>
 <style scoped lang="scss">
 #reportlist {
@@ -864,6 +953,22 @@ export default {
   .header .el-form-item {
     margin-bottom: 0;
   }
+  .header{
+      .select-btn{
+          cursor: pointer;
+          width:120px;
+          height: 36px;
+          text-align: center;
+          background-color: #ECF2FE;
+          border-radius: 4px;
+          box-sizing: border-box;
+          line-height:36px;
+          img,span{
+            display: inline-block;
+            vertical-align: middle;
+          }
+      }
+  }
   .opt-btns {
     span,
     a {

+ 1 - 1
src/views/report_manage/reportVariety.vue

@@ -3,7 +3,7 @@
         <div class="top-wrap">
             <el-button type="primary" v-permission="permissionBtn.enChartPermission.enChartPermission_save"
                 @click="showEditBreed=true;getParentVarietyList()">添加品种</el-button>
-            <el-input placeholder="品种名称" v-model="searchVal" style="max-width: 520px; float: right" @change="handleSearch" clearable>
+            <el-input placeholder="品种名称" v-model="searchVal" style="max-width: 262px; float: right" @change="handleSearch" clearable>
                 <i slot="prefix" class="el-input__icon el-icon-search"></i>
             </el-input>
         </div>

+ 4 - 0
src/views/report_manage/reportdtl.vue

@@ -214,5 +214,9 @@
 				list-style-position: inside !important;
 			}
 		}
+        @media (max-width:1400px) {
+            margin-right: 100px;
+            
+        }
 	}
 </style>

+ 124 - 15
src/views/report_manage/reportlist.vue

@@ -2,7 +2,7 @@
   <div id="reportlist">
     <el-card class="box-card">
       <div slot="header" class="header">
-        <el-form :inline="true" :model="searchform" @submit.native.prevent>
+        <el-form :inline="true" :model="searchform" @submit.native.prevent style="display:flex;">
           <el-form-item label="">
             <el-button
               v-permission="permissionBtn.reportManageBtn.reportManage_reportAdd"
@@ -33,7 +33,92 @@
               </a>
             </template>
           </el-form-item>
+          <!-- 整合的筛选项 -->
           <el-form-item label="">
+            <el-popover 
+                placement="bottom" 
+                trigger="click" 
+                :visible-arrow="false"
+                popper-class="report-select-popover"
+                width="320" style="display: inline-block;">
+                <div class="select-wrap">
+                    <p>筛选项</p>
+                    <div class="select-item">
+                        <el-select
+                            v-model="searchform.timeType"
+                            placeholder="选择时间类型"
+                            size="medium"
+                            style="width:100%;"
+                            @change="search"
+                        >
+                            <el-option label="发布时间" value="publish_time"></el-option>
+                            <el-option label="更新时间" value="modify_time"></el-option>
+                        </el-select>
+                    </div>
+                    <div class="select-item">
+                        <el-select
+                            @change="search"
+                            v-model="searchform.frequency"
+                            placeholder="更新频度筛选"
+                            size="medium"
+                            clearable
+                            style="width:100%;"
+                        >
+                            <el-option label="年度" value="年度"></el-option>
+                            <el-option label="半年度" value="半年度"></el-option>
+                            <el-option label="季度" value="季度"></el-option>
+                            <el-option label="月度" value="月度"></el-option>
+                            <el-option label="双周度" value="双周度"></el-option>
+                            <el-option label="周度" value="周度"></el-option>
+                            <el-option label="日度" value="日度"></el-option>
+                            <el-option label="不定时" value="不定时"></el-option>
+                        </el-select>
+                    </div>
+                    <div class="select-item">
+                        <el-cascader
+                            @change="search"
+                            :options="optionsArr"
+                            v-model="searchform.classifynameArr"
+                            clearable
+                            placeholder="类型筛选"
+                            style="width:100%;"
+                        ></el-cascader>
+                    </div>
+                    <div class="select-item">
+                        <el-select
+                            v-model.number="searchform.publishState"
+                            placeholder="发布筛选"
+                            size="medium"
+                            clearable
+                            style="width:100%;"
+                            @change="search"
+                        >
+                            <el-option label="已发布" :value="2"></el-option>
+                            <el-option label="未发布" :value="1"></el-option>
+                        </el-select>
+                    </div>
+                    <div class="select-item">
+                        <el-select
+                            v-permission="permissionBtn.reportManageBtn.reportManage_reportList_sendTime"
+                            @change="search"
+                            v-model.number="searchform.msgIsSend"
+                            placeholder="推送消息状态"
+                            size="medium"
+                            clearable
+                            style="width:100%;"
+                        >
+                            <el-option label="未推送消息" :value="1"></el-option>
+                            <el-option label="已推送消息" :value="2"></el-option>
+                        </el-select>
+                    </div>
+                </div>
+                <div class="select-btn" slot="reference">
+                    <img src="~@/assets/icons/filter.svg">
+                    <span>筛选条件</span>
+                </div>
+            </el-popover>
+          </el-form-item>
+          <!-- <el-form-item label="">
             <el-select
               v-model="searchform.timeType"
               placeholder="选择时间类型"
@@ -44,7 +129,7 @@
               <el-option label="发布时间" value="publish_time"></el-option>
               <el-option label="更新时间" value="modify_time"></el-option>
             </el-select>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item label="">
             <el-date-picker
               @change="search"
@@ -59,7 +144,7 @@
               style="width: 280px"
             ></el-date-picker>
           </el-form-item>
-          <el-form-item label="">
+          <!-- <el-form-item label="">
             <el-select
               @change="search"
               v-model="searchform.frequency"
@@ -77,8 +162,8 @@
               <el-option label="日度" value="日度"></el-option>
               <el-option label="不定时" value="不定时"></el-option>
             </el-select>
-          </el-form-item>
-          <el-form-item label="">
+          </el-form-item> -->
+          <!-- <el-form-item label="">
             <el-cascader
               @change="search"
               :options="optionsArr"
@@ -87,8 +172,8 @@
               placeholder="类型筛选"
               size="medium"
             ></el-cascader>
-          </el-form-item>
-          <el-form-item label="">
+          </el-form-item> -->
+          <!-- <el-form-item label="">
             <el-select
               v-model.number="searchform.publishState"
               placeholder="发布筛选"
@@ -100,8 +185,8 @@
               <el-option label="已发布" :value="2"></el-option>
               <el-option label="未发布" :value="1"></el-option>
             </el-select>
-          </el-form-item>
-          <el-form-item label="">
+          </el-form-item> -->
+          <!-- <el-form-item label="">
             <el-select
               v-permission="permissionBtn.reportManageBtn.reportManage_reportList_sendTime"
               @change="search"
@@ -114,17 +199,16 @@
               <el-option label="未推送消息" :value="1"></el-option>
               <el-option label="已推送消息" :value="2"></el-option>
             </el-select>
-          </el-form-item>
-          <el-form-item>
+          </el-form-item> -->
+          <el-form-item style="flex:1;text-align: right;">
             <el-input
               @input="search"
               placeholder="标题 / 创建人"
               v-model="searchform.key_word"
               clearable
               size="medium"
-            >
-              <i class="el-icon-search" slot="prefix" @click="search"></i>
-            </el-input>
+              prefix-icon="el-icon-search"
+            />
           </el-form-item>
           <!-- <el-form-item><el-button type="primary" size="medium" @click.native="search">搜索</el-button></el-form-item> -->
         </el-form>
@@ -256,7 +340,7 @@
               >{{ hasUV? scope.row.Pv+'/'+scope.row.Uv:scope.row.Pv }}</template
             >
           </el-table-column>
-          <el-table-column label="操作" align="center" min-width="130">
+          <el-table-column label="操作" align="center" min-width="130" fixed="right">
             <template slot-scope="scope">
               <div class="opt-btns">
                 <template
@@ -1142,6 +1226,15 @@ export default {
     white-space: normal;
   }
 }
+.report-select-popover{
+    .select-wrap{
+          padding:8px;
+          margin:0 20px;
+          .select-item{
+              margin-top:20px;
+          }
+      }
+}
 </style>
 <style scoped lang="scss">
 #reportlist {
@@ -1149,6 +1242,22 @@ export default {
   .header .el-form-item {
     margin-bottom: 0;
   }
+  .header{
+      .select-btn{
+          cursor: pointer;
+          width:120px;
+          height: 36px;
+          text-align: center;
+          background-color: #ECF2FE;
+          border-radius: 4px;
+          box-sizing: border-box;
+          line-height:36px;
+          img,span{
+            display: inline-block;
+            vertical-align: middle;
+          }
+      }
+  }
   .opt-btns {
     span,
     a {