Commit 3bd1f838 authored by hanfeng's avatar hanfeng

修改seo管理

parent 39ad812d
...@@ -4,10 +4,11 @@ import fetch from 'utils/fetch'; ...@@ -4,10 +4,11 @@ import fetch from 'utils/fetch';
* 获取列表 * 获取列表
* @param query * @param query
*/ */
export function list() { export function list(query) {
return fetch({ return fetch({
url: '/api/uccn/seo/list', url: '/api/uccn/seo/list',
method: 'get' method: 'post',
data:query
}); });
} }
......
<template>
<div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
<el-table
:data="list"
:row-key="getRowKeys" :expand-row-keys="expands"
style="width: 100%;">
<el-table-column type="expand">
<template scope="scope">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="子模块名称" style="margin-right: 100px;">
<span v-for="item,index in scope.row.list" style="margin-right: 30px;"
:key="item.id">{{index+1}}{{item.name}}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
type="index"
align="center" label="序号" width="65">
</el-table-column>
<el-table-column width="250" align="center" label="板块">
<template scope="scope">
<span>{{scope.row.parent.name}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="子板块">
<template scope="scope">
<span>{{scope.row.childStr}}</span>
<el-button size="mini" type="text" @click="showMore(scope.row)">查看更多</el-button>
</template>
</el-table-column>
<el-table-column align="center" width="100" label="操作" fixed="right">
<template scope="scope">
<el-button size="small" class="el-button el-button--text el-button--small" v-if="scope.row.parent.level!=1" @click="handleUpdate(scope.row)">
{{'编辑'}}
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 编辑、创建 modal弹窗 -->
<el-dialog :title="modalTitle" :visible.sync="dialogVisible">
<el-form :model="form" :rules="formRules" ref="form" label-width="90px">
<el-row>
<el-col :span="8">
<el-form-item label="模块">
<el-input v-model="form.parent.name" disabled placeholder="模块"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item>
<el-button size="small" class="el-button el-button--primary" type="button" icon="plus" @click="addTag(form.parent)">
添加子模块
</el-button>
</el-form-item>
</el-row>
<el-row v-for="item in form.list"
:key="item.id" v-if="item.isDel == 0">
<el-col :span="8">
<el-form-item label="子模块">
<el-input v-model="item.name" placeholder="请输入子模块名称"></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="8">-->
<!-- <el-form-item label="排序" prop="rank">-->
<!-- <el-input v-model="item.rank" placeholder="请输入排序值"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="4">
<el-button type="danger" size="small" style="margin-left: 10px;" @click="deleteItem(item)">删除</el-button>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelHandel">取 消</el-button>
<el-button type="primary" @click="update('form')">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<style>
.el-upload-list {
display: flex;
width: 100px;
}
.el-upload-list li {
margin-left: 10px;
}
</style>
<script>
import 'static/css/uploadImg.css';// 引入图片上传组件对话框
import {
list,
save,
} from 'src/api/officialWebsite/seoList';
import rsCode from '../../utils/rsCode';
import {mapGetters} from 'vuex';
import Element1 from "../admin/menu/components/element";
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";
import ElIcon from "../../../node_modules/element-ui/packages/icon/src/icon.vue";
export default {
name: 'tourManage',
components: {
ElIcon,
ElCol,
ElRow,
Element1
},
data() {
return {
modalTitle: "创建",
dialogVisible: false,//添加、编辑弹框
showLoadingBody: false,
expands: [],
labelForm: {
name: "",
rank: 0
},//待编辑的排序
form: {
parent: {
id: undefined,
level: 1,
name: "",
parentId: 0,
rank: 0,
isDel: 0
},
list: [{
id: undefined,
level: 2,
name: "",
parentId: undefined,
rank: 0,
isDel: 0
}]
},
formRules: {},
list:[]
}
},
created() {
this.getList();
},
computed: {
...mapGetters([
'elements',
'belong2Type'
])
},
methods: {
/**
* 添加二级标签
* */
addTag(parent) {
let t = {
id: undefined,
level: parent.level+1,
name: "",
parentId:parent.id,
rank: 0,
isDel: 0
};
this.form.list.push(t);
},
/**
* 删除
* */
deleteItem(obj) {
obj.isDel = 1;
this.form.list.some((item, i)=>{
if (item==obj){
if (!this.$utils.isInteger(item.id)){
this.form.list.splice(i,1);
return true;
}
}
})
},
/**
* 查看更多
* */
showMore(row) {
let expands = [];
expands.push(row.parent.id);
this.expands = expands;
},
getRowKeys(row) {
return row.parent.id
},
/**
* 添加
* */
handleCreate() {
this.cleanForm();
this.modalTitle = '创建';
this.dialogVisible = true;
},
/**
* 操作-编辑
* */
handleUpdate(row) {
this.modalTitle = '编辑';
this.cleanForm();
this.form = row;
console.log(JSON.stringify(this.form));
this.dialogVisible = true;
},
/**
* 弹框-取消
* */
cancelHandel() {
this.rankDialogVisible = false;
this.dialogVisible = false;
this.cleanForm();
},
/**
* 清空表单
* */
cleanForm() {
this.form = {
parent: {
id: undefined,
level: 1,
name: "",
parentId: 0,
rank: 0,
isDel: 0
},
list: [{
id: undefined,
level: 2,
name: "",
parentId: undefined,
rank: 0,
isDel: 0
}]
};
},
/**
* 获取列表数据
* */
getList() {
list().then(response => {
let listRs = undefined;
if (!this.$utils.isEmpty(response.data)) {
listRs = response.data;
response.data.map(function (item) {
// item.parent.visible2 = false;
let childStr = [];
item.list.map(function (citem, index) {
if (index < 10) {
childStr.push(citem.name);
}
});
item.childStr = childStr.join("|");
});
}
this.listLoading = false;
this.list = listRs;
});
},
/**
* 编辑-更新
* */
update(formName) {
const set = this.$refs;
this.form.childStr = undefined;
console.log(JSON.stringify(this.form));
const parameter={parentId:this.form.parent.id,list:this.form.list}
set[formName].validate(valid => {
if (valid) {
save(parameter)
.then(response => {
if (response.status === 200) {
this.dialogVisible = false;
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000
});
this.getList();
} else {
this.$notify({
title: '失败',
message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败!',
type: 'error',
duration: 2000
});
}
});
} else {
return false;
}
});
},
}
}
</script>
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
import ElCol from "element-ui/packages/col/src/col"; import ElCol from "element-ui/packages/col/src/col";
export default { export default {
name: 'tourManage', name: 'newsList',
components: { components: {
ElCol, ElCol,
ElRow, ElRow,
...@@ -189,7 +189,6 @@ ...@@ -189,7 +189,6 @@
computed: { computed: {
...mapGetters([ ...mapGetters([
'elements', 'elements',
'belong2Type'
]) ])
}, },
methods: { methods: {
......
...@@ -4,75 +4,77 @@ ...@@ -4,75 +4,77 @@
:data="list" :data="list"
:row-key="getRowKeys" :expand-row-keys="expands" :row-key="getRowKeys" :expand-row-keys="expands"
style="width: 100%;"> style="width: 100%;">
<el-table-column type="expand">
<template scope="scope">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="子模块名称" style="margin-right: 100px;">
<span v-for="item,index in scope.row.list" style="margin-right: 30px;"
:key="item.id">{{index+1}}{{item.name}}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column <el-table-column
type="index" type="index"
align="center" label="序号" width="65"> align="center" label="序号" width="65">
</el-table-column> </el-table-column>
<el-table-column width="250" align="center" label="板块"> <el-table-column width="250" align="center" label="板块">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.parent.name}}</span> <span>{{scope.row.modelName}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="子板块"> <el-table-column align="center" label="标题">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.childStr}}</span> <span>{{scope.row.title}}</span>
<el-button size="mini" type="text" @click="showMore(scope.row)">查看更多</el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" width="100" label="操作" fixed="right"> <el-table-column align="center" width="100" label="操作" fixed="right">
<template scope="scope"> <template scope="scope">
<el-button size="small" class="el-button el-button--text el-button--small" v-if="scope.row.parent.level!=1" @click="handleUpdate(scope.row)"> <el-button size="small" class="el-button el-button--text el-button--small"
@click="handleUpdate(scope.row)">
{{'编辑'}} {{'编辑'}}
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div v-show="!listLoading" class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</div>
<!-- 编辑、创建 modal弹窗 --> <!-- 编辑、创建 modal弹窗 -->
<el-dialog :title="modalTitle" :visible.sync="dialogVisible"> <el-dialog :title="modalTitle" :visible.sync="dialogVisible">
<el-form :model="form" :rules="formRules" ref="form" label-width="90px"> <el-form :model="form" :rules="formRules" ref="form" label-width="90px">
<el-row> <el-row>
<el-col :span="8"> <el-col :span="15">
<el-form-item label="模块"> <el-form-item label="模块" prop="modelName">
<el-input v-model="form.parent.name" disabled placeholder="模块"></el-input> <el-input v-model="form.modelName" disabled placeholder="模块"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-form-item> <el-col :span="15">
<el-button size="small" class="el-button el-button--primary" type="button" icon="plus" @click="addTag(form.parent)"> <el-form-item label="标题" prop="header">
添加子模块 <el-input v-model="form.header" placeholder="标题"></el-input>
</el-button> </el-form-item>
</el-form-item> </el-col>
</el-row>
<el-row>
<el-col :span="15">
<el-form-item label="title" prop="title">
<el-input v-model="form.title" placeholder="title"></el-input>
</el-form-item>
</el-col>
</el-row> </el-row>
<el-row v-for="item in form.list" <el-row>
:key="item.id" v-if="item.isDel == 0"> <el-col :span="15">
<el-col :span="8"> <el-form-item label="keywords" prop="keywords">
<el-form-item label="子模块"> <el-input v-model="form.keywords" placeholder="keywords"></el-input>
<el-input v-model="item.name" placeholder="请输入子模块名称"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <el-col :span="8">--> </el-row>
<!-- <el-form-item label="排序" prop="rank">--> <el-row>
<!-- <el-input v-model="item.rank" placeholder="请输入排序值"></el-input>--> <el-col :span="15">
<!-- </el-form-item>--> <el-form-item label="description" prop="description">
<!-- </el-col>--> <el-input v-model="form.description" placeholder="description"></el-input>
<el-col :span="4"> </el-form-item>
<el-button type="danger" size="small" style="margin-left: 10px;" @click="deleteItem(item)">删除</el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="cancelHandel">取 消</el-button> <el-button @click="cancelHandel">取 消</el-button>
<el-button type="primary" @click="update('form')">确 定</el-button> <el-button type="primary" @click="update('form')">确 定</el-button>
...@@ -107,7 +109,7 @@ ...@@ -107,7 +109,7 @@
import ElIcon from "../../../node_modules/element-ui/packages/icon/src/icon.vue"; import ElIcon from "../../../node_modules/element-ui/packages/icon/src/icon.vue";
export default { export default {
name: 'tourManage', name: 'seoList',
components: { components: {
ElIcon, ElIcon,
ElCol, ElCol,
...@@ -120,30 +122,30 @@ ...@@ -120,30 +122,30 @@
dialogVisible: false,//添加、编辑弹框 dialogVisible: false,//添加、编辑弹框
showLoadingBody: false, showLoadingBody: false,
expands: [], expands: [],
labelForm: { listQuery: {
name: "", page: 1,
rank: 0 limit: 10
},//待编辑的排序 },
total: 0,
form: { form: {
parent: { id: undefined,
id: undefined, modelId: undefined,
level: 1, modelName: undefined,
name: "", title: '',
parentId: 0, keywords: '',
rank: 0, description: '',
isDel: 0 header: ''
},
formRules: {
header: {
type: 'string',
required: true,
message: '请输入标题',
trigger: 'blur'
}, },
list: [{
id: undefined,
level: 2,
name: "",
parentId: undefined,
rank: 0,
isDel: 0
}]
}, },
formRules: {}, list: [],
list:[] listLoading: true,
} }
}, },
created() { created() {
...@@ -152,58 +154,13 @@ ...@@ -152,58 +154,13 @@
computed: { computed: {
...mapGetters([ ...mapGetters([
'elements', 'elements',
'belong2Type'
]) ])
}, },
methods: { methods: {
/**
* 添加二级标签
* */
addTag(parent) {
let t = {
id: undefined,
level: parent.level+1,
name: "",
parentId:parent.id,
rank: 0,
isDel: 0
};
this.form.list.push(t);
},
/**
* 删除
* */
deleteItem(obj) {
obj.isDel = 1;
this.form.list.some((item, i)=>{
if (item==obj){
if (!this.$utils.isInteger(item.id)){
this.form.list.splice(i,1);
return true;
}
}
})
},
/**
* 查看更多
* */
showMore(row) {
let expands = [];
expands.push(row.parent.id);
this.expands = expands;
},
getRowKeys(row) { getRowKeys(row) {
return row.parent.id return row.id
}, },
/**
* 添加
* */
handleCreate() {
this.cleanForm();
this.modalTitle = '创建';
this.dialogVisible = true;
},
/** /**
* 操作-编辑 * 操作-编辑
* */ * */
...@@ -211,14 +168,12 @@ ...@@ -211,14 +168,12 @@
this.modalTitle = '编辑'; this.modalTitle = '编辑';
this.cleanForm(); this.cleanForm();
this.form = row; this.form = row;
console.log(JSON.stringify(this.form));
this.dialogVisible = true; this.dialogVisible = true;
}, },
/** /**
* 弹框-取消 * 弹框-取消
* */ * */
cancelHandel() { cancelHandel() {
this.rankDialogVisible = false;
this.dialogVisible = false; this.dialogVisible = false;
this.cleanForm(); this.cleanForm();
...@@ -228,45 +183,30 @@ ...@@ -228,45 +183,30 @@
* */ * */
cleanForm() { cleanForm() {
this.form = { this.form = {
parent: { id: undefined,
id: undefined, modelId: undefined,
level: 1, modelName:'',
name: "", title: '',
parentId: 0, keywords: '',
rank: 0, description: '',
isDel: 0 header: ''
},
list: [{
id: undefined,
level: 2,
name: "",
parentId: undefined,
rank: 0,
isDel: 0
}]
}; };
}, },
/** /**
* 获取列表数据 * 获取列表数据
* */ * */
getList() { getList() {
list().then(response => { list(this.listQuery).then(response => {
let listRs = undefined; let listRs = undefined;
let total = undefined;
if (!this.$utils.isEmpty(response.data)) { if (!this.$utils.isEmpty(response.data)) {
listRs = response.data; listRs = response.data.list;
response.data.map(function (item) { total = response.data.total
// item.parent.visible2 = false;
let childStr = [];
item.list.map(function (citem, index) {
if (index < 10) {
childStr.push(citem.name);
}
});
item.childStr = childStr.join("|");
});
} }
console.log(JSON.stringify(listRs))
this.listLoading = false; this.listLoading = false;
this.list = listRs; this.list = listRs;
this.total = total;
}); });
}, },
/** /**
...@@ -274,37 +214,41 @@ ...@@ -274,37 +214,41 @@
* */ * */
update(formName) { update(formName) {
const set = this.$refs; const set = this.$refs;
let form = this.form
this.form.childStr = undefined;
console.log(JSON.stringify(this.form));
const parameter={parentId:this.form.parent.id,list:this.form.list}
set[formName].validate(valid => { set[formName].validate(valid => {
if (valid) { if (valid) {
save(parameter) save(form).then(response => {
.then(response => { if (response.status === 200) {
if (response.status === 200) { this.dialogVisible = false;
this.dialogVisible = false; this.$notify({
this.$notify({ title: '成功',
title: '成功', message: '创建成功',
message: '创建成功', type: 'success',
type: 'success', duration: 2000
duration: 2000 });
}); this.getList();
this.getList(); } else {
} else { this.$notify({
this.$notify({ title: '失败',
title: '失败', message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败!',
message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败!', type: 'error',
type: 'error', duration: 2000
duration: 2000 });
}); }
} });
});
} else { } else {
return false; return false;
} }
}); });
}, },
handleSizeChange(val) {
this.listQuery.limit = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getList();
}
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment