|
|
@@ -1,83 +1,151 @@
|
|
|
<template>
|
|
|
<div class="main">
|
|
|
- <div class="main-body">
|
|
|
- <el-form label-width="90px" label-position="center"
|
|
|
- ref="elForm" :model="info" :rules="rules" >
|
|
|
- <el-row>
|
|
|
- <el-col :span="12" >
|
|
|
- <el-form-item label="考察团" class="mt20" prop="title" >
|
|
|
- <el-input v-model="info.title"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <div class="m-account ml20">
|
|
|
- <div class="account-tit" style="height:30px">
|
|
|
- <a :class="{'current':show===1}" style="text-decoration: none;padding-bottom: 5px" @click="show=1" class="">导航图片</a>
|
|
|
- <a :class="{'current':show===2}" style="text-decoration: none;padding-bottom: 5px" @click="show=2" class="">主页引导</a>
|
|
|
- <a :class="{'current':show===3}" style="text-decoration: none;padding-bottom: 5px" @click="show=3" class="">精彩视频</a>
|
|
|
- <a :class="{'current':show===4}" style="text-decoration: none;padding-bottom: 5px" @click="show=4" class="">宁德风貌</a>
|
|
|
- <a :class="{'current':show===5}" style="text-decoration: none;padding-bottom: 5px" @click="show=5" class="">考察点</a>
|
|
|
- <a :class="{'current':show===6}" style="text-decoration: none;padding-bottom: 5px" @click="show=6" class="">行程安排</a>
|
|
|
- <a :class="{'current':show===7}" style="text-decoration: none;padding-bottom: 5px" @click="show=7" class="">详细页面</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 导航图片 -->
|
|
|
- <div v-if="show===1" class="lwh-ul-form p20">
|
|
|
+ <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 >
|
|
|
+ <el-button @click="createPaperItem" 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="描述"></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="link" label="链接" width="50"></el-table-column>
|
|
|
+ <el-table-column prop="orderId" label="排序" width="50"></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ width="100px"
|
|
|
+ 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>
|
|
|
+ </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="6" v-for="(slider, index) in info.main.nodes.slider.children" :key="index">
|
|
|
- <vue-viewer class="preview" width="200px" height="200px" :thumb="tow60(slider.image)" :full="slider.image"></vue-viewer>
|
|
|
- <b-image @onFinish="(url)=>{slider.image=url}"placeholder="更换图片"> </b-image>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div v-if="show===2" class="lwh-ul-form p20">
|
|
|
- <el-row v-for="(matrix,index) in info.main.nodes.matrix.children" :key="index">
|
|
|
- <el-col :span="6">
|
|
|
- <img :src="tow60(matrix.image)" width="180px" height="180px"></img>
|
|
|
+ <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 children"
|
|
|
+ :value="item.id"
|
|
|
+ :key="index"
|
|
|
+ :label="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </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="6">
|
|
|
- <el-form-item label="图片标题">
|
|
|
- <el-input v-model="matrix.marks" style="width: 200px;"></el-input>
|
|
|
+ <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-form-item label-width="20px">
|
|
|
- <b-image @onFinish="(url)=>{matrix.image=url}"placeholder="更换图片" width="100px"> </b-image>
|
|
|
+ </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-row>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div v-if="show===3" class="lwh-ul-form p20">
|
|
|
- <Inode :list="info.pages.video.nodes"></Inode>
|
|
|
- </div>
|
|
|
- <div v-if="show===4" class="lwh-ul-form p20">
|
|
|
- <Inode :list="info.pages.image.nodes"></Inode>
|
|
|
- </div>
|
|
|
- <div v-if="show===5" class="lwh-ul-form p20">
|
|
|
- <Inode :list="info.pages.brief.nodes"></Inode>
|
|
|
- </div>
|
|
|
- <div v-if="show===6" class="lwh-ul-form p20">
|
|
|
- <Inode :list="info.pages.trip.nodes"></Inode>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div v-if="show===7" class="lwh-ul-form p20">
|
|
|
- <el-row >
|
|
|
- <el-col :span="6" style="width:200px">
|
|
|
- <el-row v-for="(item,id) in info.pages" :key="id">
|
|
|
- <el-button @click="curPage=id" style="width:100px" type="primary"> {{item.id}}</el-button>
|
|
|
- </el-row>
|
|
|
+
|
|
|
+ <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-input v-model="form.style" style="width: 600px;" type="textarea"/>
|
|
|
+ </el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :span="18">
|
|
|
- <Inode :list="info.pages[curPage].nodes"></Inode>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="图片文字" prop="marks">
|
|
|
+ <el-input v-model="form.marks" style="width: 220px;"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="链接" prop="link">
|
|
|
+ <el-input v-model.number="form.link" type="number" style="width: 220px;"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="是否预览" prop="marks">
|
|
|
+ <el-switch :active-value="1" :inactive-value="0" v-model="form.preview"></el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="排序" prop="orderId">
|
|
|
+ <el-input v-model.number="form.orderId" type="number" style="width: 220px;"/>
|
|
|
+ </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>
|
|
|
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
+ </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>
|
|
|
@@ -86,54 +154,34 @@
|
|
|
import BImage from '@/components/upload/BImage.vue'
|
|
|
import Inode from './components/Inode.vue'
|
|
|
import { tow60 } from "@/utils/stringFun";
|
|
|
- import { getPaper, addPaper } from "@/api/paper";
|
|
|
+ import { getPaper, addPaper, addPaperItem } 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:'',
|
|
|
+ image: "", link: 0,marks: "",nodeId: "main",orderId: 0,parentId: 0,poster: ""
|
|
|
+ }
|
|
|
export default {
|
|
|
name: 'application',
|
|
|
data() {
|
|
|
return {
|
|
|
tow60,
|
|
|
loading:false,
|
|
|
- isLike: 0,
|
|
|
id:0,
|
|
|
- recover: false,
|
|
|
- show:7,
|
|
|
- matrixId:0,
|
|
|
- curPage:"3-1",
|
|
|
- info: {
|
|
|
- config:{},
|
|
|
- main:{
|
|
|
- title:'',
|
|
|
- nodes:{
|
|
|
- logo:{
|
|
|
- type:'',
|
|
|
- image:'',
|
|
|
- style:''
|
|
|
- },
|
|
|
- sliders:{
|
|
|
- type: "slider",
|
|
|
- style: "height: 200px;",
|
|
|
- children:[]
|
|
|
- },
|
|
|
- matrix:{
|
|
|
- type: "matrix",
|
|
|
- children:[]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- pages:{
|
|
|
- video:{id:"1", nodes:[]},
|
|
|
- image:{id:"", nodes:[]},
|
|
|
- brief:{id:'', nodes:[]},
|
|
|
- trip:{id:'', nodes:[]}
|
|
|
- }
|
|
|
- },
|
|
|
- matrixList:[],
|
|
|
+ page:1,
|
|
|
+ size:10,
|
|
|
+ getTitle,
|
|
|
+ form: Object.assign({}, gbForm),
|
|
|
+ typeList:['image','video','slider','matrix','title','text','tabs','table-texts','bold-text'],
|
|
|
+ dialogItem: false,
|
|
|
+ nodeId:'main',
|
|
|
+ children: [],
|
|
|
+ nodeList: [],
|
|
|
+ tableData:[],
|
|
|
rules: {
|
|
|
- title:[{required:true, message:'请输入标题'}],
|
|
|
- content:[{required:true, message:'请输入简介'}],
|
|
|
- publishStatus:[{required:true, message:'请输入选择分类'}],
|
|
|
- publishTime:[{required:true, message:'请输入发布时间'}],
|
|
|
- postType:[{required:true, message:'请选择分类'}]
|
|
|
+ type: [{ required: true, message: "请选择类型", trigger: "blur" }],
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -144,45 +192,62 @@
|
|
|
this.loadData( )
|
|
|
}
|
|
|
},
|
|
|
+ watch:{
|
|
|
+ nodeId(){
|
|
|
+ this.filterData()
|
|
|
+ }
|
|
|
+ },
|
|
|
methods:{
|
|
|
- loadData( ){
|
|
|
- let id = this.id;
|
|
|
- getPaper({id}).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.info = JSON.parse( res.data.text );
|
|
|
- console.log("info", this.info);
|
|
|
- this.title = res.data.title;
|
|
|
- console.log("info", this.info);
|
|
|
- }
|
|
|
- })
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- onFinish(url, index){
|
|
|
- console.log("finish", index, url);
|
|
|
- this.info.slider[index] = url;
|
|
|
- },
|
|
|
- selectMatrix(matrix){
|
|
|
- this.show = 3;
|
|
|
-
|
|
|
- },
|
|
|
- saveSubmit(){
|
|
|
- let param = Object.assign( {}, this.info);
|
|
|
- this.onSubmit( param );
|
|
|
- },
|
|
|
- newSubmit(){
|
|
|
- let param = Object.assign( {}, this.info);
|
|
|
- param.postId = 0;
|
|
|
- this.onSubmit( param );
|
|
|
+ filterData(){
|
|
|
+ let nodeId = this.nodeId||'main';
|
|
|
+ this.tableData = this.children.filter( item =>{
|
|
|
+ return item.nodeId == nodeId
|
|
|
+ })
|
|
|
},
|
|
|
- onSubmit( param ){
|
|
|
- this.$refs["elForm"].validate((valid) => {
|
|
|
+ addPaperItem(){
|
|
|
+ let param = Object.assign({}, this.form);
|
|
|
+ param.orderId = +param.orderId;
|
|
|
+ param.link = +param.link;
|
|
|
+ this.$refs["elForm"].validate((valid) => {
|
|
|
if (!valid) return;
|
|
|
- addPaper( param ).then(res=>{
|
|
|
- if( res.code == 200){
|
|
|
- this.$message.successMsg("提交成功", 2);
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
+ addPaperItem( param).then( res=>{
|
|
|
+ if( res.code != 200) return;
|
|
|
+ this.$message.successMsg("添加成功", 2);
|
|
|
+ this.loadData();
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onFinish(url, index){
|
|
|
+ this.info.slider[index] = url;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
