Commit 90f657c4 by 陈羽

update: 更改左侧菜单样式

parent 8e9815f3
......@@ -21,15 +21,12 @@
<div class="p-t-12">
<ul class="tab-left-list">
<template v-for="(item, index) in tabData">
<li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-14', item.tabId == activeTab ? 'active-tab' : '']" :key="index" @click="selectTab(item, false, index)">
<i :class="['p-r-10 color-303133 iconfont', item.icon, !!item.onlyIconActive ? '' : '']"></i>{{ item.tabName }}
<!-- iconActive <i v-if="!!item.children && !!item.children.length" :class="[!!collapsFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i> -->
</li>
<ul class="child-tab-left-list" :key="'childitem' + index">
<li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-14', item.tabId == activeTab ? 'active-tab' : '']" :key="index" @click="selectTab(item, false, index)"><i :class="['p-r-10 color-303133 iconfont', item.icon]"></i>{{ item.tabName }}<i v-if="!!item.children && !!item.children.length" :class="[!!item.collapsFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></li>
<ul class="child-tab-left-list" :key="'childitem' + index" :style="{ height: !!item.collapsFlag && item.children ? item.children.length * 40 + 'px' : 0 }">
<!-- v-if="!!item.collapsFlag"-->
<template v-for="(childitem, childIndex) in item.children">
<li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-40', childitem.tabId == activeTab ? 'active-tab' : '']" :key="childIndex" @click="selectTab(childitem, 'child', index)">{{ childitem.tabName }}</li>
<ul class="third-tab-left-list" :key="'thirditem' + childIndex">
<ul class="third-tab-left-list" :key="'thirditem' + childIndex" v-if="childitem.children">
<template v-for="(thirditem, thirdIndex) in childitem.children">
<li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-60', thirditem.tabId == activeTab ? 'active-tab' : '']" :key="thirdIndex" @click="selectTab(thirditem, 'child', index)">{{ thirditem.tabName }}</li>
</template>
......@@ -68,12 +65,27 @@ export default {
data() {
return {
projectName: '', // 当前项目名
activeTab: '1',
tabData: this.tabListData,
collapsFlag: true
activeTab: '0',
tabData: []
};
},
mounted() {
this.activeTab = this.activeSelTab;
this.tabListData.map(item => {
item.collapsFlag = false;
if (item.hasOwnProperty('children') && item.children.length) {
if (this.activeSelTab == item.tabId) {
item.collapsFlag = true;
this.activeTab = item.children[0].tabId;
} else {
item.children.map(child => {
if (this.activeSelTab == child.tabId) item.collapsFlag = true;
});
}
}
});
this.tabData = [].concat(this.tabListData);
},
methods: {
/**
* 路由跳转
......@@ -86,45 +98,19 @@ export default {
* 选择后触发方法,返回 tabId
*/
selectTab(item, flag, index) {
let that = this;
if (!!flag) {
that.tabData[index].onlyIconActive = true;
} else {
that.tabData.forEach(ele => {
ele.onlyIconActive = false;
});
if (item.hasOwnProperty('children') && !!item.children.length) {
that.collapsFlag = !!that.collapsFlag && item.hasOwnProperty('children') && !!item.children.length ? false : true;
}
}
// 判断已选 item, 判断只让 icon 变色
if (item.hasOwnProperty('children')) {
that.tabData[index].onlyIconActive = true;
if (item.children[0].hasOwnProperty('children')) {
that.activeTab = item.children[0].children[0].tabId;
that.$emit('setSelectTab', item);
return false;
if (!flag && !!item.children.length) {
item.collapsFlag = !item.collapsFlag;
this.tabData = JSON.parse(JSON.stringify(this.tabData));
} else {
this.activeTab = item.tabId;
this.$emit('setSelectTab', item);
}
that.activeTab = item.children[0].tabId;
that.$emit('setSelectTab', item);
return false;
} else {
this.activeTab = item.tabId;
this.$emit('setSelectTab', item);
}
that.activeTab = item.tabId;
that.$emit('setSelectTab', item);
}
},
watch: {
tabListData: function(newData, oldData) {
let that = this;
that.tabData = newData;
},
activeSelTab: function(newData, oldData) {
let that = this;
that.activeTab = newData;
}
},
mounted() {
this.activeTab = this.activeSelTab;
}
};
</script>
......@@ -141,6 +127,13 @@ export default {
.iconActive {
color: #2f54eb;
}
.el-icon-arrow-up,
.el-icon-arrow-down {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
}
&:hover {
color: #2f54eb;
background: rgba(47, 84, 235, 0.05);
......@@ -157,10 +150,11 @@ export default {
}
}
.child-tab-left-list {
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
overflow: hidden;
li {
position: relative;
text-align: left;
......
......@@ -126,6 +126,7 @@ export default {
that.selectBrand = item;
this.$store.commit('changeWxEntertype', item.wxEnterpriseType);
that.$emit('selectBrandId', item.enterpriseId);
sessionStorage.setItem('userInfoBrandId', item.enterpriseId);
that.brandVisible = false;
},
......@@ -149,6 +150,14 @@ export default {
}
});
return false;
} else if (sessionStorage.getItem('userInfoBrandId')) {
that.activeBrand = sessionStorage.getItem('userInfoBrandId');
that.brandListData.forEach(ele => {
if (ele.enterpriseId == that.activeBrand) {
that.selectBrand = ele;
}
});
return;
}
that.selectBrand = that.brandListData[0];
that.activeBrand = that.brandListData[0].enterpriseId;
......
......@@ -85,7 +85,7 @@ export default {
images_upload_credentials: true, //是否应传递cookie等跨域的凭据
// images_upload_handler提供三个参数:blobInfo, success, failure
images_upload_handler: (blobInfo, success, failure)=>{
console.log(blobInfo)
// console.log(blobInfo)
this.handleImgUpload(blobInfo, success, failure)
},
// 添加插件
......@@ -96,7 +96,7 @@ export default {
setup: function(editor) {
// 点击编辑框回调
editor.on('click', function(e) {
console.log('Editor was clicked');
// console.log('Editor was clicked');
});
},
fontsize_formats: "8px 10px 12px 14px 18px 24px 36px",
......@@ -112,11 +112,11 @@ export default {
let formdata = new FormData()
formdata.set('upload_file', blobInfo.blob())
formdata.set("requestProject",that.repProjectName);
console.log(formdata)
// console.log(formdata)
postForm('/api-plug/upload-img', formdata).then(res => {
success(res.data.result[0].qcloudImageUrl)
}).catch(res => {
console.log(res)
// console.log(res)
failure('error')
})
},
......
......@@ -176,7 +176,7 @@ export default {
*/
handleDownload() {
const that = this;
console.log(that.currentExcelTagItemId);
// console.log(that.currentExcelTagItemId);
const para = {
tagItemId: that.tagItemId
......@@ -205,7 +205,7 @@ export default {
errMsg.errorMsg(resData);
})
.catch(function(error) {
console.log(error);
// console.log(error);
that.$message.error({
duration: 1000,
......@@ -225,7 +225,7 @@ export default {
const tHeader = header; // ['phoneNum']
const filterVal = header; //['phoneNum']
const list = currentExcelData;
console.log(list);
// console.log(list);
if (!list.length) {
that.$message.error({
duration: 1000,
......@@ -234,7 +234,7 @@ export default {
return false;
}
const data = that.formatJson(filterVal, list);
console.log(data);
// console.log(data);
export_json_to_excel(tHeader, data, '导出列表');
});
},
......@@ -245,7 +245,7 @@ export default {
},
watch: {
currentIndex: function(newdata, oldData) {
console.log('watch:', newdata);
// console.log('watch:', newdata);
this.useIndex = newdata;
},
// failData: function(newdata,oldData){
......@@ -253,17 +253,17 @@ export default {
// this.failedData = newdata
// },
currentExcelTagItemId: function(newdata, oldData) {
console.log('watch:', newdata);
// console.log('watch:', newdata);
this.tagItemId = newdata;
},
status: function(newdata, oldData) {
console.log('watch:', newdata);
// console.log('watch:', newdata);
this.tagItemStatus = newdata;
}
},
mounted() {
console.log(this.currentIndex);
// console.log(this.currentIndex);
this.useIndex = this.currentIndex;
// this.failedData = this.failData
this.tagItemId = this.currentExcelTagItemId;
......
......@@ -80,12 +80,12 @@ export default {
tabId: '14',
tabName: '会员详情设置',
icon: ''
},
{
tabId: '15',
tabName: '会员标签设置',
icon: ''
}
// {
// tabId: '15',
// tabName: '会员标签设置',
// icon: ''
// }
]
},
{
......
......@@ -43,7 +43,7 @@ export default {
data() {
return {
bgHeight: window.screen.availHeight - 288 + 'px',
activeSelTab: '1',
activeSelTab: '0',
activeTab: '1',
activeBrand: '',
navpath: [
......
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