Commit 24803308 authored by zhengke's avatar zhengke

修改

parent 2185a1c3
......@@ -3,7 +3,7 @@
<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 @click="addFenlei" style="float:right;margin-top: -5px;" size="small" type="primary">
新增分类
</el-button>
</div>
......@@ -16,24 +16,111 @@
@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="getCategory(scope.row.Id)" style="width:32px;height:32px;margin:0 10px"
src="../../assets/img/userman/edit.png" alt="">
<img @click="removeCategory(scope.row.Id)" style="width:32px;height:32px;margin:0 10px"
src="../../assets/img/userman/del.png" alt="">
</template>
</el-table-column>
</el-table>
<div v-loading="loading" flex="dir:left box:mean" class="cat-list" style="margin-top:20px;">
<el-card class="card-item-box" shadow="never">
<div slot="header" class="clearfix">
<span>一级分类</span>
</div>
<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-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">
<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>
</template>
<template v-else>
......@@ -48,9 +135,25 @@
<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>
<template v-if="editState">
<el-radio :disabled="editState" v-model="addMsg.Level" :label="1">一级分类</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>
</div>
......@@ -58,10 +161,55 @@
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform()">保存
</el-button>
</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>
</template>
<script>
import draggable from "vuedraggable"
export default {
components: {
draggable
},
data() {
return {
loading: false,
......@@ -78,7 +226,28 @@
Name: '', //分类名称
Level: 1, //层级
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: {
......@@ -91,11 +260,34 @@
if (res.data.resultCode === 1) {
this.dataList = res.data.data;
console.log("this.dataList", this.dataList);
this.dataFirst=[];
this.dataSecond=[];
this.dataThird=[];
this.setNodes(this.dataList);
}
},
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() {
this.apipost("/api/Share/SetShareCategory", this.addMsg,
......@@ -126,7 +318,7 @@
this.addMsg.Name = tempObj.Name;
this.addMsg.Level = tempObj.Level;
this.addMsg.ParentId = tempObj.ParentId;
this.IsShowCategory=false;
this.IsShowCategory = false;
}
} else {
this.Error(res.data.message);
......@@ -159,6 +351,63 @@
this.addMsg.Level = 1;
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() {
this.getList();
......@@ -219,4 +468,92 @@
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>
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