Commit 90f657c4 by 陈羽

update: 更改左侧菜单样式

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