Commit dfe92a88 authored by 黄奎's avatar 黄奎

页面修改

parent 8c234a12
<template>
<div>123</div>
<div class="shareCategory">
<template v-if="IsShowCategory">
<div class="head-title">
发圈素材分类
<el-button @click="IsShowCategory=false" style="float:right;margin-top: -5px;" size="small" type="primary">
新增分类
</el-button>
</div>
<div class="content">
<div class="searchInput">
<el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入分类名称" v-model="msg.Name"
size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()" @clear="msg.pageIndex=1,getList()">
</el-input>
<span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"
@click="msg.pageIndex=1,getList()"> </span>
</div>
<br>
<el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0" row-key="Id"
default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="Id" label="ID" width="100">
</el-table-column>
<el-table-column prop="Name" label="分类名称">
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<img @click="EditCustom(scope.row)" style="width:32px;height:32px;margin:0 10px"
src="../../assets/img/userman/edit.png" alt="">
<img @click="RemoveCustom(scope.row,6)" style="width:32px;height:32px;margin:0 10px"
src="../../assets/img/userman/del.png" alt="">
</template>
</el-table-column>
</el-table>
</div>
</template>
<template v-else>
<div class="head-title">
<span @click="IsShowCategory=true" style="color:rgb(64, 158, 255);cursor:pointer;">发圈素材分类</span><span
style="margin:0 9px;color:#C0C4CC">/</span><span>编辑</span>
</div>
<div class="content">
<div class="conten_indder">
<el-form label-width="150px">
<el-form-item label="分类名称">
<el-input type="text" size="small" v-model="addMsg.Name"></el-input>
</el-form-item>
<el-form-item label="选择分类级别">
<el-radio v-model="addMsg.Level" :label="1">一级分类</el-radio>
<el-radio v-model="addMsg.Level" :label="2">二级分类</el-radio>
<el-radio v-model="addMsg.Level" :label="3">三级分类</el-radio>
</el-form-item>
</el-form>
</div>
</div>
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform()">保存
</el-button>
</template>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
//是否显示新增分类
IsShowCategory: true,
dataList: [],
msg: {
Name: "", //页面名称
pageIndex: 1,
pageSize: 10,
},
addMsg: {
Id: 0,
Name: '', //分类名称
Level: 1, //层级
ParentId: 0, //父节点编号
},
};
},
methods: {
//获取分类列表
getList() {
this.loading = true;
this.apipost("/api/Share/GetShareCategoryList", this.msg,
res => {
this.loading = false;
if (res.data.resultCode === 1) {
this.dataList = res.data.data;
console.log("this.dataList", this.dataList);
}
},
null
);
},
//新增修改分类
submitform() {
this.apipost("/api/Share/SetShareCategory", this.addMsg,
res => {
this.loading = false;
if (res.data.resultCode === 1) {
this.getList();
this.Success(res.data.message);
this.IsShowCategory = true;
this.clearMsg();
} else {
this.Error(res.data.message);
}
},
null
);
},
//获取分类
getCategory(Id) {
this.apipost("/api/Share/GetShareCategory", {
Id: Id
},
res => {
if (res.data.resultCode === 1) {
var tempObj = res.data.data;
if (tempObj) {
this.addMsg.Id = tempObj.Id;
this.addMsg.Name = tempObj.Name;
this.addMsg.Level = tempObj.Level;
this.addMsg.ParentId = tempObj.ParentId;
}
} else {
this.Error(res.data.message);
}
},
null
);
},
//删除分类
removeCategory(Id) {
let that = this;
that.Confirm("确定要删除分类吗?", function () {
that.apipost("/api/Share/RemoveShareCategory", {
Id: Id
},
res => {
if (res.data.resultCode === 1) {
that.getList();
} else {
that.Error(res.data.message);
}
},
null
);
});
},
clearMsg() {
this.addMsg.Id = 0;
this.addMsg.Name = "";
this.addMsg.Level = 1;
this.addMsg.ParentId = 0;
},
},
mounted() {
this.getList();
}
};
</script>
<style>
.shareCategory .templat-list {
border: 1px solid #EBEEF5;
}
.shareCategory .templat-item {
line-height: 40px;
height: 40px;
display: flex;
font-size: 13px;
}
.templat-item:nth-child(odd) {
background-color: #f7f7f7;
}
.templat-item:nth-child(even) {
background-color: #fff;
}
.shareCategory .templat-item div {
width: 50%;
padding-left: 20px;
}
.shareCategory .Custom_item {
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
-webkit-transition: .3s;
transition: .3s;
margin-bottom: 10px;
}
.shareCategory .Custom_item>div {
padding: 20px;
}
.shareCategory .content {
background: #fff;
margin-top: 10px;
padding: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.shareCategory .conten_indder {
padding: 20px;
background-color: #fff;
padding-right: 50%;
min-width: 1100px;
}
</style>
<template>
<div>
456
<div class="shareCategory">
<template v-if="IsShowCategory">
<div class="head-title">
发圈素材管理
<el-button @click="IsShowCategory=false" style="float:right;margin-top: -5px;" size="small" type="primary">
新增
</el-button>
</div>
<div class="content">
<div class="searchInput">
<el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入分类名称" v-model="msg.Name"
size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()" @clear="msg.pageIndex=1,getList()">
</el-input>
<span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"
@click="msg.pageIndex=1,getList()"> </span>
</div>
<br>
<el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0" row-key="Id"
default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="Id" label="ID" width="100">
</el-table-column>
<el-table-column prop="Name" label="分类名称">
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<img @click="EditCustom(scope.row)" style="width:32px;height:32px;margin:0 10px"
src="../../assets/img/userman/edit.png" alt="">
<img @click="RemoveCustom(scope.row,6)" style="width:32px;height:32px;margin:0 10px"
src="../../assets/img/userman/del.png" alt="">
</template>
</el-table-column>
</el-table>
</div>
</template>
<template v-else>
<div class="head-title">
<span @click="IsShowCategory=true" style="color:rgb(64, 158, 255);cursor:pointer;">发圈素材分类</span><span
style="margin:0 9px;color:#C0C4CC">/</span><span>编辑</span>
</div>
<div class="content">
<div class="conten_indder">
<el-form label-width="150px">
<el-form-item label="分类名称">
<el-input type="text" size="small" v-model="addMsg.Name"></el-input>
</el-form-item>
<el-form-item label="选择分类级别">
<el-radio v-model="addMsg.Level" :label="1">一级分类</el-radio>
<el-radio v-model="addMsg.Level" :label="2">二级分类</el-radio>
<el-radio v-model="addMsg.Level" :label="3">三级分类</el-radio>
</el-form-item>
</el-form>
</div>
</div>
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform()">保存
</el-button>
</template>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
//是否显示新增分类
IsShowCategory: true,
dataList: [],
msg: {
Name: "", //页面名称
pageIndex: 1,
pageSize: 10,
},
addMsg: {
Id: 0,
Name: '', //分类名称
Level: 1, //层级
ParentId: 0, //父节点编号
},
};
},
methods: {
//获取分类列表
getList() {
this.loading = true;
this.apipost("/api/Share/GetShareCategoryList", this.msg,
res => {
this.loading = false;
if (res.data.resultCode === 1) {
this.dataList = res.data.data;
console.log("this.dataList", this.dataList);
}
},
null
);
},
//新增修改分类
submitform() {
this.apipost("/api/Share/SetShareCategory", this.addMsg,
res => {
this.loading = false;
if (res.data.resultCode === 1) {
this.getList();
this.Success(res.data.message);
this.IsShowCategory = true;
this.clearMsg();
} else {
this.Error(res.data.message);
}
},
null
);
},
//获取分类
getCategory(Id) {
this.apipost("/api/Share/GetShareCategory", {
Id: Id
},
res => {
if (res.data.resultCode === 1) {
var tempObj = res.data.data;
if (tempObj) {
this.addMsg.Id = tempObj.Id;
this.addMsg.Name = tempObj.Name;
this.addMsg.Level = tempObj.Level;
this.addMsg.ParentId = tempObj.ParentId;
}
} else {
this.Error(res.data.message);
}
},
null
);
},
//删除分类
removeCategory(Id) {
let that = this;
that.Confirm("确定要删除分类吗?", function () {
that.apipost("/api/Share/RemoveShareCategory", {
Id: Id
},
res => {
if (res.data.resultCode === 1) {
that.getList();
} else {
that.Error(res.data.message);
}
},
null
);
});
},
clearMsg() {
this.addMsg.Id = 0;
this.addMsg.Name = "";
this.addMsg.Level = 1;
this.addMsg.ParentId = 0;
},
},
mounted() {
this.getList();
}
};
</script>
<style>
.shareCategory .templat-list {
border: 1px solid #EBEEF5;
}
.shareCategory .templat-item {
line-height: 40px;
height: 40px;
display: flex;
font-size: 13px;
}
.templat-item:nth-child(odd) {
background-color: #f7f7f7;
}
.templat-item:nth-child(even) {
background-color: #fff;
}
.shareCategory .templat-item div {
width: 50%;
padding-left: 20px;
}
.shareCategory .Custom_item {
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
-webkit-transition: .3s;
transition: .3s;
margin-bottom: 10px;
}
.shareCategory .Custom_item>div {
padding: 20px;
}
.shareCategory .content {
background: #fff;
margin-top: 10px;
padding: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.shareCategory .conten_indder {
padding: 20px;
background-color: #fff;
padding-right: 50%;
min-width: 1100px;
}
</style>
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