Commit 39ae939f authored by libin's avatar libin

友情链接

parent 09c6db38
import fetch from 'utils/fetch';
/**
* 分页查询
* @param query
*/
export function page(query) {
return fetch({
url: '/api/uccn/admin/friend_link/page',
method: 'post',
data: query
});
}
export function findById(id) {
return fetch({
url: '/api/uccn/admin/friend_link/' + id,
method: 'get'
});
}
/**
* 删除
* @param query
*/
export function deleteById(id) {
return fetch({
url: '/api/uccn/admin/friend_link/' + id,
method: 'delete'
});
}
/**
* 上下架
* @param query
*/
export function updateOnstateById(id, onState) {
return fetch({
url: '/api/uccn/admin/friend_link/on_state/' + id + '/' + onState,
method: 'put'
});
}
/**
* 编辑或保存
* @param query
*/
export function save(query) {
return fetch({
url: '/api/uccn/admin/friend_link/save',
method: 'post',
data: query
});
}
<template>
<div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
<div v-if="!friendLinkDialogVisible">
<div class="filter-container" ref="filter-container">
<el-form :inline="inline" ref="queryForm" :model="listQuery" label-width="100px">
</el-form>
<!-- <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>-->
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate"
type="primary" icon="edit">添加
</el-button>
</div>
<el-table :key='tableKey' :data="list" border fit highlight-current-row
style="width: 100%">
<el-table-column
type="index"
align="center" label="序号" width="65">
</el-table-column>
<el-table-column width="100" align="center" label="排序">
<template scope="scope">
<span>{{scope.row.rank}}</span>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="状态">
<template scope="scope">
<span>{{scope.row.onState===true?'上架':'下架'}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="前台显示文字">
<template scope="scope">
<span>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="链接">
<template scope="scope">
<span>{{scope.row.linkUrl}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="发布时间">
<template scope="scope">
<span>{{scope.row.publishTime}}</span>
</template>
</el-table-column>
<el-table-column align="center" width="200" label="操作" fixed="right">
<template scope="scope">
<el-button size="small" class="el-button el-button--text el-button--small" @click="handleUpdate(scope.row)">
{{'编辑'}}
</el-button>
<el-button size="small" class="el-button el-button--text el-button--small" style="color: #6ce26c;"
v-if="scope.row.onState==false" @click="upStatus(scope.row,true)">上架
</el-button>
<el-button size="small" class="el-button el-button--text el-button--small" style="color: #1d90e6"
v-if="scope.row.onState==true" @click="upStatus(scope.row,false)">下架
</el-button>
<el-button class="el-button el-button--text el-button--small" style="color:red;" size="small"
@click="deleteHandler(scope.row)">删除
</el-button>
</template>
</el-table-column>
</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>
</div>
<!-- 友情连接 -->
<FriendLink v-if="friendLinkDialogVisible" :oneRow="oneRow" :title="modalTitle"
v-on:friendLinkDialogEvent="friendLinkDialogEvent"></friendLink>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
import {
deleteById,
page,
updateOnstateById
} from '../../api/officialWebsit/friendLink';
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 {timestamp2Date} from "../../utils/dateUtils";
import FriendLink from "./modal/friendLinkModel";
export default {
name: 'friendLinkManager',
components: {
FriendLink,
ElCol,
ElRow,
Element1
},
data() {
return {
modalTitle: "创建",
BASE_API: process.env.BASE_API,
friendLinkDialogVisible: false,//添加、编辑弹框
showLoadingBody: false,
form: {
name: undefined,//名称
linkUrl: undefined, //连接地址
brief: undefined, //简要说明
rank: 0, //排序
onState: false// 上下架状态
},
publishTime: undefined,
list: null,
total: null,
status: {
0: '下架',
1: '上架'
},
listLoading: true,
listQuery: {
page: 1,
limit: 10,
onState: undefined
},
inline: true,
textMap: {
update: '编辑',
create: '创建'
},
labelForm: {},
tableKey: 0
}
},
created() {
this.page()
},
methods: {
/**
* 添加
* */
handleCreate() {
this.modalTitle = '创建';
this.oneRow = {};
this.friendLinkDialogVisible = true;
},
/**
* 上下架
*/
upStatus(row, onState) {
updateOnstateById(row.id, onState).then(response => {
if (response.status === 200) {
this.$notify({
title: '成功',
message: '成功',
type: 'success',
duration: 2000
});
this.page();
} else {
this.$notify({
title: '失败',
message: '操作失败!',
type: 'error',
duration: 2000
});
}
});
},
/**
* 删除
* */
deleteHandler(row) {
this.$confirm('确定删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteById(row.id).then(response => {
if (response.status === 200) {
this.$notify({
title: '成功',
message: '删除成功',
type: 'success',
duration: 2000
});
this.page();
} else {
this.$notify({
title: '删除失败',
message: '操作失败!',
type: 'error',
duration: 2000
});
}
});
})
},
/**
* 编辑
* */
handleUpdate(row) {
this.modalTitle = '编辑';
this.oneRow = row;
this.friendLinkDialogVisible = true;
},
/**
* modal传递回来的数据
* */
friendLinkDialogEvent(e) {
this.friendLinkDialogVisible = false;
if (e) {
//编辑成功-重新加载列表
this.page();
}
},
/**
* 获取
* */
page() {
this.listLoading = true;
page(this.listQuery).then(response => {
let totalCountRs = undefined;
let listRs = undefined;
if (!this.$utils.isEmpty(response.data.data) && this.$utils.isInteger(response.data.totalCount)) {
listRs = response.data.data;
totalCountRs = response.data.totalCount;
listRs.map(function (item) {
if (item.publishTime != null) {
item.publishTime = timestamp2Date(item.publishTime);
}
});
}
this.listLoading = false;
this.list = listRs;
this.total = totalCountRs;
})
},
handleFilter() {
this.listQuery.page = 1;
this.$refs.queryForm.validate(valid => {
if (valid) {
this.getList();
} else {
return false;
}
});
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.page();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.page();
}
}
}
</script>
<template>
<!-- 友情:创建、编辑 -->
<div class = "friendLink">
<h4>{{title}}</h4>
<el-form :model="form" :rules="rules" ref="form" label-width="90px">
<el-row>
<el-col :span="8">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="上架" prop="onState">
<el-checkbox v-model="form.onState"></el-checkbox>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="排序" prop="rank">
<el-input v-model="form.rank" placeholder="请输入排序" type="number"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="链接地址" prop="linkUrl">
<el-input v-model="form.linkUrl" type="text" placeholder="请输入链接地址"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="简要说明" prop="brief">
<el-input v-model="form.brief" placeholder="请输入简要说明" type="text"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" v-if="title=='创建'" @click="createFriendLink('form')">确 定</el-button>
<el-button type="primary" v-if="title=='编辑'" @click="updateFriendLink('form')">确 定</el-button>
</div>
</div>
</template>
<style>
textarea{
display: none;
}
.el-upload-list li{
margin-left: 10px;
}
</style>
<script>
import {
getToken
} from '../../../utils/auth';
import {findById, save} from "../../../api/officialWebsit/friendLink";
export default {
props: ["oneRow", "title","friendLinkDialogEvent"],
name: 'friendLink',
data() {
return {
BASE_API: process.env.BASE_API,
config: {
initialFrameWidth: null,
initialFrameHeight: 350
},
form: {
name:undefined, //名称
onState:undefined, //上下架状态
rank:undefined, //排序
linkUrl: undefined, //链接地址
brief: undefined //简要说明
},
rules: {
name:{
type: 'string',
required: true,
message: '请输入名称',
trigger: 'blur'
},
linkUrl:{
type: 'string',
required: true,
message: '请输入链接地址',
trigger: 'blur'
}
}
}
},
mounted() {
this.cleanForm();
if(this.title === "编辑"){
let row = this.oneRow;
this.getOne(row.id);
}
},
computed: {
getHeaderWithToken() {
return {Authorization: getToken()};
},
},
methods: {
/**
* 创建
* */
createFriendLink(formName){
const set = this.$refs;
set[formName].validate(valid => {
if (valid) {
let params = {
name:this.form.name,
onState: this.form.onState,
rank:this.form.rank,
linkUrl: this.form.linkUrl,
brief: this.form.brief
};
this.toCreate(params);
} else {
return;
}
});
},
/**
* 编辑
* */
updateFriendLink(formName){
const set = this.$refs;
set[formName].validate(valid => {
if (valid) {
let params = {
id:this.oneRow.id,
name:this.form.name,
onState: this.form.onState,
rank:this.form.rank,
linkUrl: this.form.linkUrl,
brief: this.form.brief
};
this.toUpdate(params);
} else {
return;
}
});
},
/**
* 更新
* */
toUpdate(params){
save(params).then(response => {
if (response.status === 200) {
this.$notify({
title: '成功',
message: '编辑成功',
type: 'success',
duration: 2000
});
this.$emit("friendLinkDialogEvent", true);
} else {
this.$notify({
title: '编辑失败',
message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败!',
type: 'error',
duration: 2000
});
}
});
},
/**
* 创建
* */
toCreate(params){
save(params).then(response => {
if (response.status === 200) {
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000
});
this.$emit("friendLinkDialogEvent", true);
} else {
this.$notify({
title: '创建失败',
message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败!',
type: 'error',
duration: 2000
});
}
});
},
/**
* 获取一条营地
* */
getOne(id){
findById(id).then(response => {
this.form = response.data;
})
},
/**
* 旅游-弹框-取消
* */
cancel() {
this.cleanForm();
this.$emit("friendLinkDialogEvent", false);
},
/**
* 清空弹框数据
*/
cleanForm() {
this.form = {
name:undefined,
onState:undefined,
rank:undefined,
linkUrl: undefined,
brief: undefined
};
}
}
}
</script>
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