Skip to content

E
ElectricitySheep
Commit 24803308 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 2185a1c3
Show whitespace changes
Inline Side-by-side
Showing with 360 additions and 23 deletions
src/components/Share/shareCategory.vue
View file @ 24803308
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<template v-if="IsShowCategory"> <template v-if="IsShowCategory">
<div class="head-title"> <div class="head-title">
发圈素材分类 发圈素材分类
<el-button @click="IsShowCategory=false" style="float:right;margin-top: -5px;" size="small" type="primary"> <el-button @click="addFenlei" style="float:right;margin-top: -5px;" size="small" type="primary">
新增分类 新增分类
</el-button> </el-button>
</div> </div>
...@@ -16,24 +16,111 @@ ...@@ -16,24 +16,111 @@
@click="msg.pageIndex=1,getList()"> </span> @click="msg.pageIndex=1,getList()"> </span>
</div> </div>
<br> <br>
<el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0" row-key="Id" <div v-loading="loading" flex="dir:left box:mean" class="cat-list" style="margin-top:20px;">
default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> <el-card class="card-item-box" shadow="never">
<el-table-column prop="Id" label="ID" width="100"> <div slot="header" class="clearfix">
</el-table-column> <span>一级分类</span>
<el-table-column prop="Name" label="分类名称"> </div>
</el-table-column> <draggable flex v-model="dataFirst">
<div @click="getChild(item,index)" v-for="(item,index) in dataFirst"
:class="{'itemActive':activeIndex==index}" class="ShareList" :key="index">
<el-table-column label="操作" width="180"> <el-row style="padding:7px 0;height:50px;box-sizing:border-box">
<template slot-scope="scope"> <el-col :span="4" style="padding-top:7px">
<img @click="getCategory(scope.row.Id)" style="width:32px;height:32px;margin:0 10px" <el-tooltip class="item" effect="dark" :content="item.Id+''" placement="top">
src="../../assets/img/userman/edit.png" alt=""> <div class="cat-id">{{item.Id}}</div>
<img @click="removeCategory(scope.row.Id)" style="width:32px;height:32px;margin:0 10px" </el-tooltip>
src="../../assets/img/userman/del.png" alt=""> </el-col>
</template> <el-col :span="11" flex="cross:center" style="padding-top:7px">
</el-table-column> <div class="cat-name-info">
</el-table> <el-tooltip class="item" effect="dark" :content="item.Name" placement="top">
<span>{{item.Name}}</span>
</el-tooltip>
</div>
</el-col>
<el-col :span="7">
<el-tooltip class="item" effect="dark" content="编辑" placement="top">
<img @click="getCategory(item.Id)" style="margin-right:9px" src="../../assets/img/userman/edit.png"
alt="">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top">
<img @click="removeCategory(item.Id)" src="../../assets/img/userman/del.png" alt="">
</el-tooltip>
</el-col>
</el-row>
</div>
</draggable>
</el-card>
<el-card class="card-item-box" shadow="never">
<div slot="header" class="clearfix">
<span>二级分类</span>
</div>
<draggable flex v-model="dataSecond">
<div @click="getSecond(item,index)" v-for="(item,index) in dataSecond"
:class="{'itemActive':activeIndex2==index}" class="ShareList" :key="index">
<el-row style="padding:7px 0;height:50px;box-sizing:border-box">
<el-col :span="4" style="padding-top:7px">
<el-tooltip class="item" effect="dark" :content="item.Id+''" placement="top">
<div class="cat-id">{{item.Id}}</div>
</el-tooltip>
</el-col>
<el-col :span="11" flex="cross:center" style="padding-top:7px">
<div class="cat-name-info">
<el-tooltip class="item" effect="dark" :content="item.Name" placement="top">
<span>{{item.Name}}</span>
</el-tooltip>
</div>
</el-col>
<el-col :span="7">
<!-- <template v-if="!dragState"> -->
<el-tooltip class="item" effect="dark" content="编辑" placement="top">
<img @click="getCategory(item.Id)" style="margin-right:9px" src="../../assets/img/userman/edit.png"
alt="">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top">
<img @click="removeCategory(item.Id)" src="../../assets/img/userman/del.png" alt="">
</el-tooltip>
<!-- </template> -->
</el-col>
</el-row>
</div>
</draggable>
</el-card>
<el-card class="card-item-box" shadow="never">
<div slot="header" class="clearfix">
<span>三级分类</span>
</div>
<draggable flex v-model="dataThird">
<div @click="getThird(index)" v-for="(item,index) in dataThird"
:class="{'itemActive':activeIndex3==index}" class="ShareList" :key="index">
<el-row style="padding:7px 0;height:50px;box-sizing:border-box">
<el-col :span="4" style="padding-top:7px">
<el-tooltip class="item" effect="dark" :content="item.Id+''" placement="top">
<div class="cat-id">{{item.Id}}</div>
</el-tooltip>
</el-col>
<el-col :span="11" flex="cross:center" style="padding-top:7px">
<div class="cat-name-info">
<el-tooltip class="item" effect="dark" :content="item.Name" placement="top">
<span>{{item.Name}}</span>
</el-tooltip>
</div>
</el-col>
<el-col :span="7">
<!-- <template v-if="!dragState"> -->
<el-tooltip class="item" effect="dark" content="编辑" placement="top">
<img @click="getCategory(item.Id)" style="margin-right:9px" src="../../assets/img/userman/edit.png"
alt="">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top">
<img @click="removeCategory(item.Id)" src="../../assets/img/userman/del.png" alt="">
</el-tooltip>
<!-- </template> -->
</el-col>
</el-row>
</div>
</draggable>
</el-card>
</div>
</div> </div>
</template> </template>
<template v-else> <template v-else>
...@@ -48,9 +135,25 @@ ...@@ -48,9 +135,25 @@
<el-input type="text" size="small" v-model="addMsg.Name"></el-input> <el-input type="text" size="small" v-model="addMsg.Name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="选择分类级别"> <el-form-item label="选择分类级别">
<el-radio v-model="addMsg.Level" :label="1">一级分类</el-radio> <template v-if="editState">
<el-radio v-model="addMsg.Level" :label="2">二级分类</el-radio> <el-radio :disabled="editState" v-model="addMsg.Level" :label="1">一级分类</el-radio>
<el-radio v-model="addMsg.Level" :label="3">三级分类</el-radio> <el-radio :disabled="editState" v-model="addMsg.Level" :label="2">二级分类</el-radio>
<el-radio :disabled="editState" v-model="addMsg.Level" :label="3">三级分类</el-radio>
</template>
<template v-else>
<div @click="SelectTier(1)" style="display:inline-block;margin-right:18px">
<el-radio :disabled="editState" v-model="addMsg.Level" :label="1">一级分类</el-radio>
</div>
<div @click="SelectTier(2)" style="display:inline-block;margin-right:18px">
<el-radio :disabled="editState" v-model="addMsg.Level" :label="2">二级分类</el-radio>
</div>
<div @click="SelectTier(3)" style="display:inline-block">
<el-radio :disabled="editState" v-model="addMsg.Level" :label="3">三级分类</el-radio>
</div>
</template>
</el-form-item>
<el-form-item label="排序">
<el-input type="text" size="small" v-model="addMsg.SortNum"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -58,10 +161,55 @@ ...@@ -58,10 +161,55 @@
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform()">保存 <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform()">保存
</el-button> </el-button>
</template> </template>
<!-- 分类弹窗 -->
<el-dialog :destroy-on-close="true" :title="titleDig" :visible.sync="tierDig" :width="tierWidth">
<div>
<div style="margin-bottom:20px">
<div class="searchInput" style="width:250px">
<el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入搜索内容" v-model="msg.Name"
size="small" clearable>
</el-input>
<span @click="getList" class="el-icon-search"
style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
</div>
</div>
<ul class="tierUl">
<li @click="SelectTier1(item,index,2)" :class="active1==index ? 'SelectLi' :''"
v-for="(item,index) in dataList" :key="index">
<span>{{item.Name}}</span>
<span v-if="addMsg.Level==3 && item.children.length>0" style="float:right">
<i class="el-icon-arrow-right"></i>
</span>
</li>
<div v-show="dataList.length==0" class="empty-text">
暂无数据
</div>
</ul>
<ul v-if="addMsg.Level==3" class="tierUl" style="margin-left:10px">
<li @click="SelectTier2(item,index,3)" :class="active2==index ? 'SelectLi' :''"
v-show="tableData2 && tableData2.children" v-for="(item,index) in tableData2.children" :key="index">
<span>{{item.Name}}</span>
</li>
<div v-show="tableData2.children && tableData2.children.length==0" class="empty-text">
暂无数据
</div>
</ul>
<div style="text-align:right;margin-top:20px" slot="footer" class="dialog-footer">
<el-button size="small" @click="tierDig=false">取消</el-button>
<el-button type="primary" size="small" @click="tierDig=false">确定</el-button>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import draggable from "vuedraggable"
export default { export default {
components: {
draggable
},
data() { data() {
return { return {
loading: false, loading: false,
...@@ -78,7 +226,28 @@ ...@@ -78,7 +226,28 @@
Name: '', //分类名称 Name: '', //分类名称
Level: 1, //层级 Level: 1, //层级
ParentId: 0, //父节点编号 ParentId: 0, //父节点编号
SortNum: 0, //排序
}, },
//第一层数据
dataFirst: [],
//第二层
dataSecond: [],
//第三层
dataThird: [],
activeIndex: 0,
activeIndex2: -1,
activeIndex3: -1,
titleDig: '选择归属的一级分类',
tierWidth: '31%',
editState: false,
tierDig: false,
tableData: [], //弹窗选分类数据
tableData2: [],
active1: -1,
active2: -1,
commonMSG:{}
}; };
}, },
methods: { methods: {
...@@ -91,11 +260,34 @@ ...@@ -91,11 +260,34 @@
if (res.data.resultCode === 1) { if (res.data.resultCode === 1) {
this.dataList = res.data.data; this.dataList = res.data.data;
console.log("this.dataList", this.dataList); console.log("this.dataList", this.dataList);
this.dataFirst=[];
this.dataSecond=[];
this.dataThird=[];
this.setNodes(this.dataList);
} }
}, },
null null
); );
}, },
//递归遍历数据
setNodes(datas) { //遍历树 获取id数组
for (var i in datas) {
if (datas[i].Level == 1) {
this.dataFirst.push(datas[i]);
}
if (datas[i].Level == 2) {
this.dataSecond.push(datas[i]);
}
if (datas[i].Level == 3) {
this.dataThird.push(datas[i]);
}
if (datas[i].children) {
this.setNodes(datas[i].children);
}
}
},
//新增修改分类 //新增修改分类
submitform() { submitform() {
this.apipost("/api/Share/SetShareCategory", this.addMsg, this.apipost("/api/Share/SetShareCategory", this.addMsg,
...@@ -126,7 +318,7 @@ ...@@ -126,7 +318,7 @@
this.addMsg.Name = tempObj.Name; this.addMsg.Name = tempObj.Name;
this.addMsg.Level = tempObj.Level; this.addMsg.Level = tempObj.Level;
this.addMsg.ParentId = tempObj.ParentId; this.addMsg.ParentId = tempObj.ParentId;
this.IsShowCategory=false; this.IsShowCategory = false;
} }
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
...@@ -159,6 +351,63 @@ ...@@ -159,6 +351,63 @@
this.addMsg.Level = 1; this.addMsg.Level = 1;
this.addMsg.ParentId = 0; this.addMsg.ParentId = 0;
}, },
//点击一级分类
getChild(item, index) {
this.activeIndex = index;
this.activeIndex2 = -1;
this.activeIndex3 = -1;
this.dataSecond = item.children;
this.dataThird = [];
},
//点击第二季分类
getSecond(item, index) {
this.activeIndex2 = index;
this.activeIndex3 = -1;
this.dataThird = item.children;
},
//点击三级
getThird(index) {
this.activeIndex3 = index;
},
//点击新增分类
addFenlei() {
this.IsShowCategory = false;
this.editState = false;
},
//跳转只修改
goEdit(item) {
this.editState = true;
},
//点击切换1 2 3级分类
SelectTier(num) {
if (num == 1) {
this.active1 = -1;
this.active2 = -1;
}
if (num == 2) {
this.tierDig = true;
this.titleDig = '选择归属的一级分类';
this.tierWidth = '20%'
}
if (num == 3) {
this.tierDig = true;
this.titleDig = '选择归属的二级分类';
this.tierWidth = '600px'
}
},
//点击弹窗选择一级分类
SelectTier1(item, index, num) {
this.tableData2 = this.dataList[index];
this.addMsg.ParentId = item.Id;
this.active1 = index;
this.active2 = -1;
},
//点击弹窗选择二级分类
SelectTier2(item, index, num) {
this.active2 = index;
this.addMsg.ParentId = item.Id;
},
}, },
mounted() { mounted() {
this.getList(); this.getList();
...@@ -219,4 +468,92 @@ ...@@ -219,4 +468,92 @@
min-width: 1100px; min-width: 1100px;
} }
.shareCategory .cat-list .card-item-box {
margin-right: 5px;
}
.shareCategory .itemActive {
background-color: #F5F5F5;
}
.shareCategory .ShareList {
cursor: pointer;
padding: 0 10px;
}
.shareCategory .el-card__body {
padding: 0 !important;
height: 500px;
overflow: auto;
}
.shareCategory .tierUl .empty-text {
line-height: 60px;
color: #909399;
text-align: center;
border-bottom: 1px solid #EBEEF5;
}
.shareCategory .tierUl .SelectLi {
background-color: #ecf5ff !important;
}
.shareCategory .tierUl li:hover {
background-color: #F5F7FA;
}
.shareCategory .tierUl {
border: 1px solid #E3E3E3;
height: 250px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 260px;
overflow-y: auto;
display: inline-block;
}
.shareCategory .tierUl li {
border-bottom: 1px solid #EBEEF5;
padding: 8px;
box-sizing: border-box;
}
li {
list-style: none;
}
.shareCategory .app-gallery-item .el-button {
position: absolute;
right: -8px;
top: -8px;
padding: 4px 4px !important;
}
.shareCategory .app-gallery-item {
width: 80px;
height: 80px;
border: 1px solid #e3e3e3;
border-radius: 2px;
margin-right: 10px;
margin-top: 10px;
position: relative;
}
.shareCategory .setTable .el-table__body .cell {
display: flex;
align-items: center;
}
.shareCategory .discount .el-form-item__label {
padding-right: 30px;
}
.shareCategory .el-form-item .elzk {
position: absolute;
left: -25px;
top: 12px;
}
</style> </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