parent
44f7315fcf
commit
72b92258bc
@ -0,0 +1,226 @@
|
|||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-header class="cate_mana_header">
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入栏目名称"
|
||||||
|
v-model="cateName" style="width: 200px;">
|
||||||
|
</el-input>
|
||||||
|
<el-button type="primary" size="medium" style="margin-left: 10px" @click="addNewCate">新增栏目</el-button>
|
||||||
|
</el-header>
|
||||||
|
<el-main class="cate_mana_main">
|
||||||
|
<el-table
|
||||||
|
ref="multipleTable"
|
||||||
|
:data="categories"
|
||||||
|
tooltip-effect="dark"
|
||||||
|
style="width: 100%"
|
||||||
|
@selection-change="handleSelectionChange" v-loading="loading">
|
||||||
|
<el-table-column
|
||||||
|
type="selection"
|
||||||
|
width="55" align="left">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="编号"
|
||||||
|
prop="id"
|
||||||
|
width="120" align="left">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="栏目名称"
|
||||||
|
prop="cateName"
|
||||||
|
width="120" align="left">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="date"
|
||||||
|
label="启用时间" align="left">
|
||||||
|
<template slot-scope="scope">{{ scope.row.date | formatDate}}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="left">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
@click="handleEdit(scope.$index, scope.row)">编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
@click="handleDelete(scope.$index, scope.row)">删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-button type="danger" :disabled="this.selItems.length==0" style="margin-top: 10px;width: 100px;"
|
||||||
|
@click="deleteAll" v-if="this.categories.length>0">批量删除
|
||||||
|
</el-button>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {postRequest} from '../utils/api'
|
||||||
|
import {putRequest} from '../utils/api'
|
||||||
|
import {deleteRequest} from '../utils/api'
|
||||||
|
import {getRequest} from '../utils/api'
|
||||||
|
export default{
|
||||||
|
methods: {
|
||||||
|
addNewCate(){
|
||||||
|
this.loading = true;
|
||||||
|
var _this = this;
|
||||||
|
postRequest('/admin/category/', {cateName: this.cateName}).then(resp=> {
|
||||||
|
if (resp.status == 200) {
|
||||||
|
var json = resp.data;
|
||||||
|
_this.$message({type: json.status, message: json.msg});
|
||||||
|
_this.cateName = '';
|
||||||
|
_this.refresh();
|
||||||
|
}
|
||||||
|
_this.loading = false;
|
||||||
|
}, resp=> {
|
||||||
|
if (resp.response.status == 403) {
|
||||||
|
_this.$message({
|
||||||
|
type: 'error',
|
||||||
|
message: resp.response.data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
_this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deleteAll(){
|
||||||
|
var _this = this;
|
||||||
|
this.$confirm('确认删除这 ' + this.selItems.length + ' 条数据?', '提示', {
|
||||||
|
type: 'warning',
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消'
|
||||||
|
}).then(()=> {
|
||||||
|
var selItems = _this.selItems;
|
||||||
|
var ids = '';
|
||||||
|
for (var i = 0; i < selItems.length; i++) {
|
||||||
|
ids += selItems[i].id + ",";
|
||||||
|
}
|
||||||
|
_this.deleteCate(ids.substring(0, ids.length - 1));
|
||||||
|
}).catch(() => {
|
||||||
|
//取消
|
||||||
|
_this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleSelectionChange(val) {
|
||||||
|
this.selItems = val;
|
||||||
|
},
|
||||||
|
handleEdit(index, row){
|
||||||
|
var _this = this;
|
||||||
|
this.$prompt('请输入新名称', '编辑', {
|
||||||
|
confirmButtonText: '更新',
|
||||||
|
inputValue: row.cateName,
|
||||||
|
cancelButtonText: '取消'
|
||||||
|
}).then(({value}) => {
|
||||||
|
//value就是输入值
|
||||||
|
if (value == null || value.length == 0) {
|
||||||
|
_this.$message({
|
||||||
|
type: 'info',
|
||||||
|
message: '数据不能为空!'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
_this.loading = true;
|
||||||
|
putRequest("/admin/category/", {id: row.id, cateName: value}).then(resp=> {
|
||||||
|
var json = resp.data;
|
||||||
|
_this.$message({
|
||||||
|
type: json.status,
|
||||||
|
message: json.msg
|
||||||
|
});
|
||||||
|
_this.refresh();
|
||||||
|
}, resp=> {
|
||||||
|
if (resp.response.status == 403) {
|
||||||
|
_this.$message({
|
||||||
|
type: 'error',
|
||||||
|
message: resp.response.data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
_this.loading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleDelete(index, row){
|
||||||
|
let _this = this;
|
||||||
|
this.$confirm('确认删除 ' + row.cateName + ' ?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
_this.deleteCate(row.id);
|
||||||
|
}).catch(() => {
|
||||||
|
//取消
|
||||||
|
_this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deleteCate(ids){
|
||||||
|
var _this = this;
|
||||||
|
this.loading = true;
|
||||||
|
//删除
|
||||||
|
deleteRequest("/admin/category/" + ids).then(resp=> {
|
||||||
|
var json = resp.data;
|
||||||
|
_this.$message({
|
||||||
|
type: json.status,
|
||||||
|
message: json.msg
|
||||||
|
});
|
||||||
|
_this.refresh();
|
||||||
|
}, resp=> {
|
||||||
|
_this.loading = false;
|
||||||
|
if (resp.response.status == 403) {
|
||||||
|
_this.$message({
|
||||||
|
type: 'error',
|
||||||
|
message: resp.response.data
|
||||||
|
});
|
||||||
|
} else if (resp.response.status == 500) {
|
||||||
|
_this.$message({
|
||||||
|
type: 'error',
|
||||||
|
message: '该栏目下尚有文章，删除失败!'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
refresh(){
|
||||||
|
let _this = this;
|
||||||
|
getRequest("/admin/category/all").then(resp=> {
|
||||||
|
_this.categories = resp.data;
|
||||||
|
_this.loading = false;
|
||||||
|
}, resp=> {
|
||||||
|
if (resp.response.status == 403) {
|
||||||
|
_this.$message({
|
||||||
|
type: 'error',
|
||||||
|
message: resp.response.data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
_this.loading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.loading = true;
|
||||||
|
this.refresh();
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
cateName: '',
|
||||||
|
selItems: [],
|
||||||
|
categories: [],
|
||||||
|
loading: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.cate_mana_header {
|
||||||
|
background-color: #ececec;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-left: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cate_mana_main {
|
||||||
|
/*justify-content: flex-start;*/
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-left: 5px;
|
||||||
|
background-color: #ececec;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue