nd_admin/src/view/weixin/info.vue

<template>
  <div class="main">
	   <div class="search-term">
			<el-form class="demo-form-inline" label-width="100" :inline="true">
				<el-form-item label="页面" prop="username">
					<el-select v-model="nodeId"  clearable>
					  <el-option v-for="(item,index) in nodeList"
					  :value="item.nodeId" :key="index" :label="item.title"></el-option>
					</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 label="搜索" prop="content">
				  <el-input v-model="searchInfo.content"  clearable> </el-input>
				</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>
	   <el-table :data="tableData.slice( page*size-size, page*size)" border highlight-current-row style="width: 100%;margin-top:20px;">
	     <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="style"  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="文本或json">
			 <template slot-scope="{ row }">
			   <div v-html="row.text||row.content" 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
	       align="center"
	       width="160px"
	       label="操作"
	       class-name="small-padding fixed-width"
	     >
	       <template slot-scope="{row, $index}">
	     	  <el-button
	     	    type="primary"
	     	    size="small"
	     	    icon="el-icon-edit"
	     	    @click="initEdit(row)"
	     	  >编辑</el-button>  
			  <el-button
			    type="danger"
			    size="small"
			    icon="el-icon-delete"
			    @click="deleteRow(row)"
			  >删除</el-button>  
	       </template>
	     </el-table-column>
	   </el-table>
	   <el-pagination :current-page="page" 
	   :page-size="size" 
	   :page-sizes="[10,20,  50, 100]" 
	    :total="tableData.length" 
	    @current-change="(page)=>{this.page= page}" 
	    @size-change="(size)=>{this.size= size}" 
	    layout="total, sizes, prev, pager, next, jumper">
	   </el-pagination>
	   
	   
	   <el-dialog title="编辑内容" center :visible.sync="dialogItem" width="800px">
	     <el-form :model="form" :rules="rules" label-width="100px" ref="elForm">
			<el-row>
				<el-col :span="12">
					<el-form-item label="类型" prop="type">
					  <el-select v-model="form.type"  clearable>
						<el-option v-for="(item,index) in typeList"
							:value="item" 
							:key="index" 
							:label="item">
						</el-option>
					  </el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="父节点" prop="parentId">
					  <el-select v-model="form.parentId"  clearable>
						<el-option v-for="(item,index) in tableData"
							:value="item.id" 
							:key="index" 
							:label="item.id">
						</el-option>
					  </el-select>
					</el-form-item>
				</el-col>
				
				<el-col :span="24">
					<el-form-item label="json文本" prop="content">
					  <el-input v-model="form.content" style="width: 600px;" type="textarea"/>
					</el-form-item>
				</el-col>
				
				<el-col :span="24" v-if="form.type=='image'">
					<el-form-item label="图片地址" prop="parentId">
					  <el-input v-model="form.image" style="width: 600px;"/>
					</el-form-item>
				</el-col>
				
				<el-col :span="24" v-if="form.type=='video'">
					<el-form-item label="视频地址" prop="video">
					  <el-input v-model="form.video" style="width: 600px;"/>
					</el-form-item>
				</el-col>
				
				<el-col :span="24" v-if="form.type=='video'">
					<el-form-item label="视频图片" prop="poster">
					  <el-input v-model="form.poster" style="width: 600px;"/>
					</el-form-item>
				</el-col>
				
				<el-col :span="24" v-if="form.type=='table-texts'">
					<el-form-item label="表格数据" prop="desc">
						<el-input v-model="form.desc" style="width: 600px;" type="textarea" placeholder="|分列;分行"/>
					</el-form-item>
				</el-col>
				
				<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="24">
					<el-form-item label="图片文字" prop="marks">
					  <el-input v-model="form.marks" style="width: 600px;" type="textarea"/>
					</el-form-item>
				</el-col>
				
				<el-col :span="8">
					<el-form-item label="链接" prop="link">
					  <el-input v-model.number="form.link" type="number" style="width: 100px;"/>
					</el-form-item>
				</el-col>
				
				<el-col :span="8">
					<el-form-item label="是否预览" prop="marks">
						<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="8">
					<el-form-item label="排序" prop="orderId">
					  <el-input v-model.number="form.orderId" type="number" style="width: 100px;"/>
					</el-form-item>
				</el-col>
				
				<el-col :span="24">
					<el-form-item label="文本" prop="text">
					  <el-input v-model="form.text" style="width: 600px;" type="textarea"/>
					</el-form-item>
				</el-col>
			</el-row>
			
			</el-form>
			<div class="dialog-footer" slot="footer">
			  <el-button @click="dialogItem = false">取 消</el-button>
			  <el-button @click="addPaperItem" type="primary">确 定</el-button>
			</div>
		</el-dialog>	
  </div>

</template>

<script>
  import BImage from '@/components/upload/BImage.vue'
  import Inode from './components/Inode.vue'
  import { tow60 } from "@/utils/stringFun";
  
  import { getPaper, addPaper, addPaperItem, getPaperStyle,delPaperItem } from "@/api/paper";
  
  const getTitle = function(item){
	  return item.text||item.marks||item.desc||(''+item.id);
  }
  const gbForm = {
	  children: [],desc: "",id: 0,preview: 0,style:'',text:'',type:'',video:'',content:'',
	  image: "", link: 0,marks: "",nodeId: "main",orderId: 0,parentId: 0,poster: "",isJson:0
	}
  export default {
    name: 'application',
    data() {
      return {
		tow60,
        loading:false,
        id:0,
		page:1,
		size:10,
		getTitle,
		form: Object.assign({}, gbForm),
		typeList:['image','title','text','form','form-input','form-radio','form-datetime','video','slider','matrix','tabs','table-texts','bold-text'],
		dialogItem: false,
		nodeId:'main',
		children: [],
        nodeList: [],
		tableData:[],
		paperStyleList:[],
		searchInfo:{
			type:'',
			content:'',
		},
        rules: {
			type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        }
      }
    },
	components:{BImage,Inode},
    created(){
      this.id = +this.$route.query.id;
      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;
			this.form.paperId = this.id;
			this.dialogItem = true;
		},
		createPaperItem(){
			this.form = Object.assign(this.form, gbForm)
			this.dialogItem = true;
			let orderId = -1;
			this.tableData.forEach(item=>{
				if(item.orderId>orderId) orderId= item.orderId;
			});
			this.form.orderId = orderId+1;
		},
		loadData( ){
			let id = this.id;
			getPaper({id}).then(res => {
			   if (res.code == 200) {
				  this.info = res.data;
				  this.children = res.data.children||[];
				  let nodeList =[{nodeId:'main', title:'主页'}];
				  for( let i in this.children){
					  let item = this.children[i];
					  if( item.link>0) {
						  nodeList.push( {nodeId: item.link, title:getTitle(item)})
					  }
				  }
				  this.nodeList = nodeList;
				  this.filterData();
			   }
			})
      },
	  filterData(){
		let nodeId = this.nodeId||'main';
		let {type, content}= this.searchInfo;
		this.tableData = this.children.filter( item =>{
			if( item.nodeId != nodeId) return false;
			if( type && item.type != type) return false;
			if( content){
				let allcontent = item.text + item.marks + item.desc;
				if(allcontent.indexOf(content)==-1) return false;
			}
			return true
		})  
	  },
	  addPaperItem(){
		let param = Object.assign({}, this.form);
		param.orderId = +param.orderId;
		param.link = +param.link;
		param.paperId = this.id;
		param.nodeId = ''+this.nodeId;
		this.$refs["elForm"].validate((valid) => {
			if (!valid) return;
			addPaperItem( param).then( res=>{
				if( res.code != 200) return;
				this.$message.successMsg("添加成功", 2);
				this.dialogItem = false;
				this.loadData();
			})
		})
	  },
	  deleteRow( row ){
		let param = {id:row.id}
		delPaperItem( param).then( res=>{
			if( res.code != 200) return;
			this.$message.successMsg("移除", 2);
			this.loadData();
		})
	  },
	  getPaperStyle(){
		  getPaperStyle({}).then( res=>{
			  this.paperStyleList = res.data||[]
		  })
	  }
    }
  }
</script>

<style>
	@import url("../../style/paper.css");
  .ipt-select{
    width: 500px;
  }
</style>