样式模板

src/api/paper.js

@@ -15,6 +15,14 @@ export const getPaper = (data) => {
 		data
     })
 }
+export const getPaperStyle = (data) => {
+    return service({
+        url: "/admin/getPaperStyle",
+        method: 'post',
+		data
+    })
+}
+
 
 export const addPaper = (data) => {
     return service({

src/view/weixin/info.vue

@@ -9,8 +9,19 @@
 					</el-select>
 				</el-form-item>
 				
+				<el-form-item label="类型" prop="type">
+				  <el-select v-model="searchInfo.type"  clearable>
+					<el-option v-for="(item,index) in typeList"
+						:value="item" 
+						:key="index" 
+						:label="item">
+					</el-option>
+				  </el-select>
+				</el-form-item>
+				
 				<el-form-item >
 					<el-button @click="createPaperItem" type="primary">添加内容</el-button>
+					<el-button @click="flushAll" type="primary">刷新</el-button>
 				</el-form-item>
 			</el-form>
 	   </div>
@@ -18,14 +29,26 @@
 	     <el-table-column prop="id"   		label="序号" width="50"></el-table-column>
 	     <el-table-column prop="parentId"   label="父节点" width="50"></el-table-column>
 	     <el-table-column prop="type"     label="类型" width="60"></el-table-column>
-	     <el-table-column prop="image"      label="图片地址"></el-table-column>
+	     <!-- <el-table-column prop="image"      label="图片地址"></el-table-column> -->
 	     <el-table-column prop="style"  label="样式"></el-table-column>
-	     <el-table-column prop="preview"    label="预览" width="50"></el-table-column>
-	     <el-table-column prop="desc" 	label="描述"></el-table-column>
-	     <el-table-column prop="text" 	 label="文本"></el-table-column>
-	     <el-table-column prop="video" 		 label="视频" ></el-table-column>
-		 <el-table-column prop="poster"  label="视频图片" ></el-table-column>
-		 <el-table-column prop="marks"  label="图片文字" ></el-table-column>
+	     <!-- <el-table-column prop="preview"    label="预览" width="50"></el-table-column> -->
+	     <el-table-column prop="desc" 	label="描述">
+			 <template slot-scope="{ row }">
+			   <div v-html="row.desc" style="height: 50px;text-overflow: ellipsis;overflow: hidden;">  </div>
+			 </template>
+		 </el-table-column>
+	     <el-table-column prop="text" 	 label="文本">
+			 <template slot-scope="{ row }">
+			   <div v-html="row.text" style="height: 50px;text-overflow: ellipsis;overflow: hidden;">  </div>
+			 </template>
+		 </el-table-column>
+	     <!-- <el-table-column prop="video" 		 label="视频" ></el-table-column> -->
+		 <!-- <el-table-column prop="poster"  label="视频图片" ></el-table-column> -->
+		 <el-table-column prop="marks"  label="图片文字" >
+			<template slot-scope="{ row }">
+			  <div v-html="row.marks">  </div>
+			</template>
+		 </el-table-column>
 		 <el-table-column prop="link"  label="链接"  width="50"></el-table-column>
 		 <el-table-column prop="orderId"  label="排序"  width="50"></el-table-column>
 	     <el-table-column
@@ -105,31 +128,40 @@
 				
 				<el-col :span="24">
 					<el-form-item label="样式" prop="style">
+						<el-select @change="(item)=>{form.style= item}" clearable>
+							<el-option v-for="(item,index) in paperStyleList"
+								:value="item.style" 
+								:key="index" 
+								:label="item.name">
+							</el-option>
+						</el-select>
 						<el-input v-model="form.style" style="width: 600px;" type="textarea"/>
 					</el-form-item>
 				</el-col>
 				
-				<el-col :span="12">
+				<el-col :span="24">
 					<el-form-item label="图片文字" prop="marks">
-					  <el-input v-model="form.marks" style="width: 220px;"/>
+					  <el-input v-model="form.marks" style="width: 600px;" type="textarea"/>
 					</el-form-item>
 				</el-col>
 				
-				<el-col :span="12">
+				<el-col :span="8">
 					<el-form-item label="链接" prop="link">
-					  <el-input v-model.number="form.link" type="number" style="width: 220px;"/>
+					  <el-input v-model.number="form.link" type="number" style="width: 100px;"/>
 					</el-form-item>
 				</el-col>
 				
-				<el-col :span="12">
+				<el-col :span="8">
 					<el-form-item label="是否预览" prop="marks">
-						<el-switch :active-value="1" :inactive-value="0"  v-model="form.preview"></el-switch>
+						<el-switch :active-value="1" :inactive-value="0"  v-model="form.preview"
+						style="width: 100px;"
+						></el-switch>
 					</el-form-item>
 				</el-col>
 				
-				<el-col :span="12">
+				<el-col :span="8">
 					<el-form-item label="排序" prop="orderId">
-					  <el-input v-model.number="form.orderId" type="number" style="width: 220px;"/>
+					  <el-input v-model.number="form.orderId" type="number" style="width: 100px;"/>
 					</el-form-item>
 				</el-col>
 				
@@ -154,7 +186,7 @@
   import BImage from '@/components/upload/BImage.vue'
   import Inode from './components/Inode.vue'
   import { tow60 } from "@/utils/stringFun";
-  import { getPaper, addPaper, addPaperItem } from "@/api/paper";
+  import { getPaper, addPaper, addPaperItem, getPaperStyle } from "@/api/paper";
   
   const getTitle = function(item){
 	  return item.text||item.marks||item.desc||(''+item.id);
@@ -180,6 +212,10 @@
 		children: [],
         nodeList: [],
 		tableData:[],
+		paperStyleList:[],
+		searchInfo:{
+			type:'',
+		},
         rules: {
 			type: [{ required: true, message: "请选择类型", trigger: "blur" }],
         }
@@ -191,13 +227,25 @@
       if( this.id ){
         this.loadData( )
       }
+	  this.getPaperStyle()
     },
 	watch:{
 		nodeId(){
 			this.filterData()
+		},
+		searchInfo:{
+			handler(new_value,old_value){
+				this.page = 1;
+				this.filterData();
+		    },
+			deep: true,
 		}
 	},
     methods:{
+		flushAll(){
+			this.loadData( )
+			this.getPaperStyle()
+		},
 		initEdit(row ){
 			this.form = Object.assign( this.form, row );
 			this.form.nodeId = this.nodeId;
@@ -233,8 +281,11 @@
       },
 	  filterData(){
 		let nodeId = this.nodeId||'main';
+		let {type}= this.searchInfo;
 		this.tableData = this.children.filter( item =>{
-			return item.nodeId == nodeId
+			if( item.nodeId != nodeId) return false;
+			if( type && item.type != type) return false
+			return true
 		})  
 	  },
 	  addPaperItem(){
@@ -255,6 +306,11 @@
 	  },
 	  onFinish(url, index){
 		this.info.slider[index] = url;  
+	  },
+	  getPaperStyle(){
+		  getPaperStyle({}).then( res=>{
+			  this.paperStyleList = res.data||[]
+		  })
 	  }
     }
   }