html批量修改

src/components/page/comArtHtmlEdit.vue

@@ -11,17 +11,26 @@
 			<h3 class="man_Title">
 				{{detailTitle}}
 			</h3>
-			<div class="type_MTxt">
+			<div class="opBtn top">
-				<div class="type_MTxt_item" v-for="(item,index) in Main_List" :key="index">
+				<el-button type="success" plain :disabled = "checkList.length > 0 ? false : true" @click="clearSelect">Select None</el-button>
-					<div :class="[item.is_title == 1 ? 'Ptitle' : '']">
+				<el-button :disabled = "checkList.length > 0 ? false : true" type="danger" plain @click="deleteSelect">Delete</el-button>
-						<p v-html="item.text" v-if="item.width==0"></p>
+			</div>
+			<div class="type_MTxt">				
+				<div class="type_MTxt_item" v-for="(item,index) in Main_List" :key="index">		
+					<el-checkbox-group v-model="checkList" @change="handleCheckedChange" style="display: inline-block; float: left;width: 40px;">		
+						<el-checkbox :label="item.article_main_id"  ><br/></el-checkbox>
+					</el-checkbox-group>
+					<div style="float:right; width:calc(100% - 45px);">
+						<div v-if="item.width==0" :class="[item.is_title == 1 ? 'Ptitle' : '']">				
+							<p v-html="item.text"  class="html"></p>
+						</div>
+						<p v-if="item.width!=0" class="MaxPicture">
+							<img :src="baseUrl+'public/mainimg/'+item.content" :style="'width:'+item.width+'px'">
+							<font :style="'width:'+item.width+'px'">{{item.note}}
+							</font>
+						</p>
+						<font v-if="item.getnum!=0" class="chNumer">{{item.getnum}}</font>
 					</div>
-					<p v-if="item.width!=0" class="MaxPicture">
-						<img :src="baseUrl+'public/mainimg/'+item.content" :style="'width:'+item.width+'px'">
-						<font :style="'width:'+item.width+'px'">{{item.note}}
-						</font>
-					</p>
-					<font v-if="item.getnum!=0" class="chNumer">{{item.getnum}}</font>
 					<div class="tools">
 					<b class="MaxBtn" @click="MTxtEdit(item,index)" style="background-color: #006699;">
 						<i class="el-icon-edit"></i>
@@ -58,8 +67,14 @@
 					</b>					
 					
 				</div>
+				
 				</div>
+			
 			</div>
+			<div class="opBtn bottom">
+				<el-button type="success" plain :disabled = "checkList.length > 0 ? false : true" @click="clearSelect">Select None</el-button>
+				<el-button :disabled = "checkList.length > 0 ? false : true" type="danger" plain @click="deleteSelect">Delete</el-button>
+			</div>		
 			<div style="height: 20px;"></div>
 		</div>
 
@@ -250,6 +265,7 @@ import VueUeditorWrap from 'vue-ueditor-wrap'; // ES6 Module
 				txtStyle: {
 					text: '',
 				},
+				checkList:[], // 复选框
 				txtVisible: false,
 				lineStyle: {
 					titleTop: '',
@@ -300,6 +316,34 @@ import VueUeditorWrap from 'vue-ueditor-wrap'; // ES6 Module
 			VueUeditorWrap
 		},
 		methods: {
+			// 清空多选
+			clearSelect(){
+				this.checkList = []				
+			},
+			// 批量删除选中
+			deleteSelect(){
+				this.$confirm('Are you sure you want to delete these?', 'Tips', {
+				confirmButtonText: 'Sure',
+				cancelButtonText: 'Cancel',
+				type: 'warning'
+				}).then(() => {
+					this.$api
+					.post('api/Production/delWebMains', {
+						'ids':this.checkList,						
+					} ).then((res)=>{
+							if (res.code == 0) {	
+								this.checkList = []							
+								this.getDate()															
+							}else{
+								this.$message.error(res.msg);
+							}
+						}).catch(err => {
+								console.log(err);
+							});
+				}).catch(() => {
+				       
+				});
+			},
 			// 添加空白行
 			addReturn(item, index){
 				this.$api
@@ -479,7 +523,10 @@ import VueUeditorWrap from 'vue-ueditor-wrap'; // ES6 Module
 					this.pictVisible = true
 				}
 			},
-
+			// 修改选中
+			handleCheckedChange(val){
+				console.log(val)				
+			},
 
 			// 添加段落
 			MTxtAdtxt(val, num) {
@@ -830,14 +877,15 @@ import VueUeditorWrap from 'vue-ueditor-wrap'; // ES6 Module
 		position: relative;
 	}
 
-
+	.opBtn.top{margin-bottom: 15px;}
+	.opBtn.bottom{margin-top: 15px;}
 	.type_MTxt>div {
 		position: relative;
 		padding: 8px 15px;
 		min-height: 22px;
 		border: 2px dashed #fff;
 		border-radius: 5px;
-		color: #606266;
+		color: #606266; overflow: hidden;
 	}