Skip to content

O
office-web
Commit 630f90c8 by 无尘
Options

feat: 增加云日报页面结构

parent db30aec5
Showing with 1170 additions and 296 deletions
package.json
{ {
"name": "gicfront", "name": "gicfront",
"version": "1.0.10", "version": "1.0.11",
"description": "A Vue.js project", "description": "A Vue.js project",
"author": "haoban", "author": "haoban",
"private": true, "private": true,
......
src/components/app/app-detail-left.vue
...@@ -2,20 +2,24 @@ ...@@ -2,20 +2,24 @@
应用公共左侧菜单： 应用公共左侧菜单：
<common-detail-left <common-detail-left
:tabListData="tabListData" :tabListData="tabListData"
:activeSelTab="activeSelTab"
@setSelectTab="setSelectTab"> @setSelectTab="setSelectTab">
</common-detail-left> </common-detail-left>
// activeSelTab: 刷新时候传入的选中 tabId
// tabListData: 列表数据
// @setSelectTab: 选择后把选择的 tabId 返给父级
--> -->
<template> <template>
<div> <div>
<ul class="tab-left-list"> <ul class="tab-left-list">
<template v-for="(item, index) in tabListData"> <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)"><i :class="['p-r-10 color-303133 iconfont', item.icon]"></i>{{ item.tabName }}</li> <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 ? 'iconActive' : '']"></i>{{ item.tabName }}</li>
<ul class="child-tab-left-list" :key="'childitem' + index"> <ul class="child-tab-left-list" :key="'childitem' + index">
<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', childitem.tabId == activeTab ? 'active-tab' : '']" :key="childIndex" @click="selectTab(childitem)">{{ 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">
<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', thirditem.tabId == activeTab ? 'active-tab' : '']" :key="thirdIndex" @click="selectTab(thirditem)">{{ 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>
</ul> </ul>
</template> </template>
...@@ -34,6 +38,14 @@ export default { ...@@ -34,6 +38,14 @@ export default {
return ''; return '';
} }
}, },
// 刷新时候传入的选中 tabId
activeSelTab: {
type: [String, Number],
default() {
return '1';
}
},
// 传入的 tabListData
tabListData: { tabListData: {
type: [Array, Object], type: [Array, Object],
default() { default() {
...@@ -44,23 +56,56 @@ export default { ...@@ -44,23 +56,56 @@ export default {
data() { data() {
return { return {
projectName: '', // 当前项目名 projectName: '', // 当前项目名
activeTab: '1' activeTab: '1',
tabData: this.tabListData
}; };
}, },
methods: { methods: {
/** /**
* 返回 * 路由跳转
*/ */
returnBack() { returnBack() {
let that = this; let that = this;
that.$router.push('appcenter'); that.$router.push('appcenter');
}, },
selectTab(item) { /**
* 选择后触发方法，返回 tabId
*/
selectTab(item, flag, index) {
let that = this; let that = this;
if (!!flag) {
that.tabData[index].onlyIconActive = true;
} else {
that.tabData.forEach(ele => {
ele.onlyIconActive = false;
});
}
// 判断已选 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;
}
that.activeTab = item.children[0].tabId;
that.$emit('setSelectTab', item);
return false;
}
that.activeTab = item.tabId; that.activeTab = item.tabId;
that.$emit('setSelectTab', item); 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;
}
} }
}; };
</script> </script>
...@@ -75,7 +120,9 @@ export default { ...@@ -75,7 +120,9 @@ export default {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
.iconActive {
color: #1890ff;
}
&:hover { &:hover {
background: rgba(24, 144, 255, 0.06); background: rgba(24, 144, 255, 0.06);
i { i {
......
src/components/app/visiable-dialog.vue
...@@ -63,8 +63,8 @@ ...@@ -63,8 +63,8 @@
<el-button type="primary" @click="customConfirm">确 定</el-button> <el-button type="primary" @click="customConfirm">确 定</el-button>
</div> </div>
</el-dialog> </el-dialog>
<vue-select-employee :defaultSelection="defaultSelection" :onlyPerson="onlyPerson" :treeSet="treeSet" :changed="changed" @handleSelectedList="handleSelectedList"> </vue-select-employee> <vue-select-employee :appScene="appScene" :defaultSelection="defaultSelection" :onlyPerson="onlyPerson" :treeSet="treeSet" :changed="changed" @handleSelectedList="handleSelectedList"> </vue-select-employee>
<vue-select-store ref="storeSelector" :treeSet="storeTreeSet" :selectType="'all'" :defaultList="defaultStoreList" @handleSelectedList="handleSelectedList"> </vue-select-store> <vue-select-store ref="storeSelector" :appScene="appScene" :treeSet="storeTreeSet" :selectType="'all'" :defaultList="defaultStoreList" @handleSelectedList="handleSelectedList"> </vue-select-store>
</div> </div>
</template> </template>
<script> <script>
...@@ -104,6 +104,7 @@ export default { ...@@ -104,6 +104,7 @@ export default {
departList: [], departList: [],
storeList: [] storeList: []
}, },
appScene: 2,
treeSet: { treeSet: {
isSelectPerson: false, // 控制只能选部门(false) isSelectPerson: false, // 控制只能选部门(false)
dialogVisible: false, // 控制显示/隐藏 dialogVisible: false, // 控制显示/隐藏
......
src/components/common/vueSelectEmployee.vue
...@@ -88,6 +88,11 @@ export default { ...@@ -88,6 +88,11 @@ export default {
//同一页面多个场景使用组建，切换场景时要传一个changed字符串告诉组建场景已切换，进行重组数据 //同一页面多个场景使用组建，切换场景时要传一个changed字符串告诉组建场景已切换，进行重组数据
type: [String, Number], type: [String, Number],
default: '' default: ''
},
appScene: {
// 使用场景
type: [String, Number],
default: ''
} }
}, },
data() { data() {
...@@ -111,7 +116,8 @@ export default { ...@@ -111,7 +116,8 @@ export default {
getGroupData() { getGroupData() {
let that = this; let that = this;
let params = { let params = {
isStoreGroup: 0 isStoreGroup: 0,
appScene: that.appScene
}; };
getRequest('/haoban-manage-web/dept/deptListForCompany', params) getRequest('/haoban-manage-web/dept/deptListForCompany', params)
.then(res => { .then(res => {
......
src/components/common/vueSelectStore.vue
...@@ -87,6 +87,11 @@ export default { ...@@ -87,6 +87,11 @@ export default {
default() { default() {
return []; return [];
} }
},
appScene: {
// 使用场景
type: [String, Number],
default: ''
} }
}, },
data() { data() {
...@@ -114,7 +119,8 @@ export default { ...@@ -114,7 +119,8 @@ export default {
getGroupData() { getGroupData() {
let that = this; let that = this;
let params = { let params = {
isStoreGroup: 1 isStoreGroup: 1,
appScene: that.appScene
}; };
getRequest('/haoban-manage-web/dept/deptList', params) getRequest('/haoban-manage-web/dept/deptList', params)
.then(res => { .then(res => {
......
src/router/index.js
...@@ -157,25 +157,34 @@ export const constantRouterMap = [ ...@@ -157,25 +157,34 @@ export const constantRouterMap = [
component: _import('enterpriseApp', 'mycustomer') component: _import('enterpriseApp', 'mycustomer')
}, },
{ {
path: '/dailyRecorde', path: '/cloudDaily',
name: '云日报记录', name: '云日报',
component: _import('enterpriseApp/cloudDaily', 'dailyRecorde') redirect: '/dailyRecord',
}, component: _import('enterpriseApp/cloudDaily', 'index'),
children: [
{ {
path: '/dailyRecord',
name: '云日报记录',
component: _import('enterpriseApp/cloudDaily', 'dailyRecord')
}, {
path: '/dailyDetail', path: '/dailyDetail',
name: '日报详情', name: '日报详情',
component: _import('enterpriseApp/cloudDaily', 'dailyDetail') component: _import('enterpriseApp/cloudDaily', 'dailyDetail')
}, }, {
{
path: '/taskAssign', path: '/taskAssign',
name: '任务下发设置', name: '任务下发设置',
component: _import('enterpriseApp/cloudDaily', 'taskAssign') component: _import('enterpriseApp/cloudDaily', 'taskAssign')
}, }, {
{
path: '/systemReport', path: '/systemReport',
name: '系统报表', name: '系统报表',
component: _import('enterpriseApp/cloudDaily', 'systemReport') component: _import('enterpriseApp/cloudDaily', 'systemReport')
}, }, {
path: '/customReport',
name: '自定义报表',
component: _import('enterpriseApp/cloudDaily', 'customReport')
}
]
}
] ]
}, },
{ {
......
src/views/enterpriseApp/cloudDaily/customReport.vue
<template>
<div>
<app-detail :brandId="activeBrand" :tabType="activeTab"></app-detail>
</div>
</template>
<script>
// import navCrumb from '@/components/nav/nav.vue';
import appDetail from '@/components/app/app-detail.vue';
export default {
name: 'reviewed',
props: {
brandId: {
type: String,
default() {
return '';
}
}
},
data() {
return {
tableH: window.screen.availHeight - 464 - 126 + 'px',
activeTab: '1',
activeBrand: '1' // 商户(品牌) id
};
},
computed: {},
methods: {
/**
* 返回 的 brandId
*/
selectBrandId(id) {
let that = this;
that.activeBrand = id;
},
setSelectTab(item) {
let that = this;
that.activeTab = item.tabId;
}
},
watch: {
activeBrand: function(newData, oldData) {
const that = this;
that.activeBrand = newData;
}
},
mounted() {
document.documentElement.style.backgroundColor = '#f0f2f5';
this.$emit('showTab', '212');
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
components: {
appDetail
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.bg-82C5FF {
background: #82c5ff;
}
.color-508CEE {
color: #508cee;
}
.color-FF585C {
color: #ff585c;
}
.line-h-18 {
line-height: 18px;
}
.tooltip-text {
width: 100%;
white-space: pre-wrap;
word-break: break-all;
}
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.my-customer-top {
position: relative;
height: 43px;
line-height: 43px;
.my-customer-return {
position: absolute;
left: 0px;
bottom: 10px;
width: 78px;
height: 32px;
border-radius: 18px;
}
.my-customer-brand {
position: absolute;
right: 0;
bottom: 18px;
width: 93px;
height: 32px;
}
.my-customer-name {
width: 200px;
margin: 0 auto;
i {
font-size: 14px;
color: #fff;
}
span {
font-size: 16px;
color: #000;
}
.app-icon {
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 4px;
background: -webkit-linear-gradient(left, #7ab6fb, #508bfe);
background: -moz-linear-gradient(left, #7ab6fb, #508bfe);
background: linear-gradient(left, #7ab6fb, #508bfe);
}
}
}
.right-box {
// background: #fff;
min-height: 500px;
padding: 0px;
.apps-content {
.apps-content-left {
height: 100%;
background: #fff;
overflow-x: hidden;
overflow-y: auto;
.apps-content-left__title {
height: 55px;
line-height: 55px;
padding: 0 0 0 18px;
}
.tab-left-list-cell {
position: relative;
text-align: left;
margin-top: 15px;
height: 30px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover {
background: rgba(24, 144, 255, 0.06);
i {
color: #1890ff;
}
}
&.active-tab {
background: rgba(24, 144, 255, 0.06);
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #1890ff;
z-index: 1;
}
i {
color: #1890ff;
}
}
.child-tab-left-list {
li {
position: relative;
text-align: left;
height: 30px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover {
background: rgba(24, 144, 255, 0.06);
i {
color: #1890ff;
}
}
&.active-tab {
background: rgba(24, 144, 255, 0.06);
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #1890ff;
z-index: 1;
}
i {
color: #1890ff;
}
}
}
}
}
}
.apps-content-right {
width: calc(100% - 10px);
margin-left: 10px;
background: #fff;
}
}
}
}
</style>
src/views/enterpriseApp/cloudDaily/dailyDetail.vue
<template>
<div class="my-customer-wrap common-set-wrap">
<app-detail :brandId="activeBrand" :tabType="activeTab"></app-detail>
</div>
</template>
<script>
import appDetail from '@/components/app/app-detail.vue';
export default {
name: 'reviewed',
data() {
return {
tableH: window.screen.availHeight - 464 - 126 + 'px',
activeTab: '1',
tabListData: [
{
tabId: '1',
tabName: '云日报记录',
icon: 'icon-ribao'
},
{
tabId: '2',
tabName: '云日报设置',
icon: 'icon-ribaoshezhi',
children: [
{
tabId: '21',
tabName: '模板配置',
icon: '',
children: [
{
tabId: '211',
tabName: '系统报表',
icon: ''
},
{
tabId: '212',
tabName: '自定义报表',
icon: ''
}
]
},
{
tabId: '22',
tabName: '任务下发设置',
icon: ''
}
]
}
],
activeBrand: '1' // 商户(品牌) id
};
},
computed: {},
methods: {
/**
* 返回 的 brandId
*/
selectBrandId(id) {
let that = this;
that.activeBrand = id;
},
setSelectTab(item) {
let that = this;
that.activeTab = item.tabId;
}
},
watch: {
activeBrand: function(newData, oldData) {
const that = this;
that.activeBrand = newData;
}
},
mounted() {
document.documentElement.style.backgroundColor = '#f0f2f5';
this.$emit('showTab', '1');
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
components: {
appDetail
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.bg-82C5FF {
background: #82c5ff;
}
.color-508CEE {
color: #508cee;
}
.color-FF585C {
color: #ff585c;
}
.line-h-18 {
line-height: 18px;
}
.tooltip-text {
width: 100%;
white-space: pre-wrap;
word-break: break-all;
}
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.my-customer-top {
position: relative;
height: 43px;
line-height: 43px;
.my-customer-return {
position: absolute;
left: 0px;
bottom: 10px;
width: 78px;
height: 32px;
border-radius: 18px;
}
.my-customer-brand {
position: absolute;
right: 0;
bottom: 18px;
width: 93px;
height: 32px;
}
.my-customer-name {
width: 200px;
margin: 0 auto;
i {
font-size: 14px;
color: #fff;
}
span {
font-size: 16px;
color: #000;
}
.app-icon {
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 4px;
background: -webkit-linear-gradient(left, #7ab6fb, #508bfe);
background: -moz-linear-gradient(left, #7ab6fb, #508bfe);
background: linear-gradient(left, #7ab6fb, #508bfe);
}
}
}
.right-box {
// background: #fff;
min-height: 500px;
padding: 0px;
.apps-content {
.apps-content-left {
height: 100%;
background: #fff;
overflow-x: hidden;
overflow-y: auto;
.apps-content-left__title {
height: 55px;
line-height: 55px;
padding: 0 0 0 18px;
}
.tab-left-list-cell {
position: relative;
text-align: left;
margin-top: 15px;
height: 30px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover {
background: rgba(24, 144, 255, 0.06);
i {
color: #1890ff;
}
}
&.active-tab {
background: rgba(24, 144, 255, 0.06);
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #1890ff;
z-index: 1;
}
i {
color: #1890ff;
}
}
.child-tab-left-list {
li {
position: relative;
text-align: left;
height: 30px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover {
background: rgba(24, 144, 255, 0.06);
i {
color: #1890ff;
}
}
&.active-tab {
background: rgba(24, 144, 255, 0.06);
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #1890ff;
z-index: 1;
}
i {
color: #1890ff;
}
}
}
}
}
}
.apps-content-right {
width: calc(100% - 10px);
margin-left: 10px;
background: #fff;
}
}
}
}
</style>
src/views/enterpriseApp/cloudDaily/dailyRecord.vue
<template>
<div class="daily-set-wrap ">
<common-detail-top :topMenuData="topMenuData" :activeId="activeId"></common-detail-top>
<div class="daily-set-content boder-box"></div>
</div>
</template>
<script>
// import navCrumb from '@/components/nav/nav.vue';
import appDetail from '@/components/app/app-detail.vue';
import commonDetailTop from '@/components/app/common-detail-top.vue';
export default {
name: 'reviewed',
props: {
brandId: {
type: String,
default() {
return '';
}
}
},
data() {
return {
activeTab: '1',
activeBrand: this.brandId, // 商户(品牌) id
topMenuData: [
{
id: '1',
name: '云日报记录'
}
],
activeId: '1'
};
},
computed: {},
methods: {
/**
* 返回 的 brandId
*/
selectBrandId(id) {
let that = this;
that.activeBrand = id;
},
setSelectTab(item) {
let that = this;
that.activeTab = item.tabId;
}
},
watch: {
activeBrand: function(newData, oldData) {
const that = this;
that.activeBrand = newData;
}
},
mounted() {
document.documentElement.style.backgroundColor = '#f0f2f5';
console.log(this.brandId);
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
components: {
appDetail,
commonDetailTop
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.daily-set-wrap {
.daily-set-content {
padding: 16px;
}
}
</style>
src/views/enterpriseApp/cloudDaily/index.vue 0 → 100644
<template>
<div class="my-customer-wrap common-set-wrap">
<!-- <nav-crumb :navpath="navpath"> </nav-crumb> -->
<div class="right-content">
<common-app-top :appName="appName" :appIcon="appIcon" @selectBrandId="selectBrandId"> </common-app-top>
<div class="right-box" :style="{ 'min-height': $store.state.bgHeight }">
<div class="apps-content flex" :style="{ height: $store.state.bgHeight }">
<div class="apps-content-left w-157">
<common-detail-left :tabListData="tabListData" :activeSelTab="activeSelTab" @setSelectTab="setSelectTab"></common-detail-left>
</div>
<div class="apps-content-right">
<transition name="fade" mode="out-in">
<router-view :brandId="activeBrand" :tabType="activeTab" @showTab="showTab"></router-view>
</transition>
</div>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
<!-- 公共组件 -->
</div>
</template>
<script>
// import navCrumb from '@/components/nav/nav.vue';
import appDetail from '@/components/app/app-detail.vue';
import commonAppTop from '@/components/app/common-app-top.vue';
import commonDetailLeft from '@/components/app/app-detail-left.vue';
export default {
name: 'reviewed',
data() {
return {
tableH: window.screen.availHeight - 464 - 126 + 'px',
// 面包屑参数
/* navpath: [
{
name: '首页',
path: '/index'
},
{
name: '企业应用',
path: ''
}
], */
appName: '云日报',
appIcon: 'icon-ribao',
activeSelTab: '1',
activeTab: '1',
tabListData: [
{
tabId: '1',
tabName: '云日报记录',
icon: 'icon-ribao1',
onlyIconActive: false
},
{
tabId: '2',
tabName: '云日报设置',
icon: 'icon-ribaoshezhi',
onlyIconActive: false,
children: [
{
tabId: '21',
tabName: '模板配置',
icon: '',
children: [
{
tabId: '211',
tabName: '系统报表',
icon: ''
},
{
tabId: '212',
tabName: '自定义报表',
icon: ''
}
]
},
{
tabId: '22',
tabName: '任务下发设置',
icon: ''
}
]
}
],
activeBrand: '1' // 商户(品牌) id
};
},
computed: {},
methods: {
/**
* 路由跳转
*/
changeRoute(path) {
this.$router.push(path);
},
/**
* 返回 的 brandId
*/
selectBrandId(id) {
let that = this;
that.activeBrand = id;
},
/**
* 选择后返回tabId，做各路由判断
*/
setSelectTab(item) {
let that = this;
that.activeTab = item.tabId;
switch (item.tabId) {
case '1':
that.changeRoute('dailyRecord');
break;
case '211':
that.changeRoute('systemReport');
break;
case '212':
that.changeRoute('customReport');
break;
case '22':
that.changeRoute('taskAssign');
break;
}
},
/**
* 各路由返回 tabId
*/
showTab(id) {
let that = this;
that.activeTab = id;
that.activeSelTab = id;
that.tabListData.forEach(ele => {
if (ele.tabId == id) {
ele.onlyIconActive = false;
}
if (!!ele.children) {
ele.children.forEach(el => {
if (el.tabId == id) {
ele.onlyIconActive = true;
}
if (!!el.children) {
el.children.forEach(item => {
if (item.tabId == id) {
ele.onlyIconActive = true;
}
});
}
});
}
});
}
},
watch: {
activeBrand: function(newData, oldData) {
const that = this;
that.activeBrand = newData;
}
},
mounted() {
document.documentElement.style.backgroundColor = '#f0f2f5';
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
components: {
// navCrumb,
appDetail,
commonAppTop,
commonDetailLeft
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.bg-82C5FF {
background: #82c5ff;
}
.color-508CEE {
color: #508cee;
}
.color-FF585C {
color: #ff585c;
}
.line-h-18 {
line-height: 18px;
}
.tooltip-text {
width: 100%;
white-space: pre-wrap;
word-break: break-all;
}
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.my-customer-top {
position: relative;
height: 43px;
line-height: 43px;
.my-customer-return {
position: absolute;
left: 0px;
bottom: 10px;
width: 78px;
height: 32px;
border-radius: 18px;
}
.my-customer-brand {
position: absolute;
right: 0;
bottom: 18px;
width: 93px;
height: 32px;
}
.my-customer-name {
width: 200px;
margin: 0 auto;
i {
font-size: 14px;
color: #fff;
}
span {
font-size: 16px;
color: #000;
}
.app-icon {
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 4px;
background: -webkit-linear-gradient(left, #7ab6fb, #508bfe);
background: -moz-linear-gradient(left, #7ab6fb, #508bfe);
background: linear-gradient(left, #7ab6fb, #508bfe);
}
}
}
.right-box {
// background: #fff;
min-height: 500px;
padding: 0px;
.apps-content {
.apps-content-left {
height: 100%;
background: #fff;
overflow-x: hidden;
overflow-y: auto;
.apps-content-left__title {
height: 55px;
line-height: 55px;
padding: 0 0 0 18px;
}
.tab-left-list-cell {
position: relative;
text-align: left;
margin-top: 15px;
height: 30px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover {
background: rgba(24, 144, 255, 0.06);
i {
color: #1890ff;
}
}
&.active-tab {
background: rgba(24, 144, 255, 0.06);
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #1890ff;
z-index: 1;
}
i {
color: #1890ff;
}
}
.child-tab-left-list {
li {
position: relative;
text-align: left;
height: 30px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover {
background: rgba(24, 144, 255, 0.06);
i {
color: #1890ff;
}
}
&.active-tab {
background: rgba(24, 144, 255, 0.06);
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #1890ff;
z-index: 1;
}
i {
color: #1890ff;
}
}
}
}
}
}
.apps-content-right {
width: calc(100% - 10px);
margin-left: 10px;
background: #fff;
}
}
}
}
</style>
src/views/enterpriseApp/cloudDaily/systemReport.vue
<template>
<div class="system-set-wrap">
<common-detail-top :topMenuData="topMenuData" :activeId="activeId"></common-detail-top>
<div class="system-set-content boder-box">
<div class="system-set-cell">
<div class="font-14 color-606266">云日报系统报表：提供系统能够智能识别的指标（例如：销售额、达成率等），配置成报表融入云日报上报模板中</div>
<div class="m-t-30"><el-button type="primary" @click="toEdit">编辑模板</el-button></div>
</div>
</div>
</div>
</template>
<script>
import appDetail from '@/components/app/app-detail.vue';
import commonDetailTop from '@/components/app/common-detail-top.vue';
export default {
name: 'reviewed',
brandId: {
type: String,
default() {
return '';
}
},
data() {
return {
activeBrand: this.brandId, // 商户(品牌) id
topMenuData: [
{
id: '1',
name: '系统报表'
}
],
activeId: '1'
};
},
computed: {},
methods: {
/**
* 跳转系统模板编辑
*/
toEdit() {
let that = this;
that.$router.push(`/systemReportSet?brandId=${that.activeBrand}`);
}
},
watch: {
brandId: function(newData, oldData) {
const that = this;
that.activeBrand = newData;
}
},
mounted() {
document.documentElement.style.backgroundColor = '#f0f2f5';
this.$emit('showTab', '211');
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
components: {
appDetail,
commonDetailTop
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.system-set-wrap {
.system-set-content {
padding: 30px 50px 50px 50px;
}
}
</style>
src/views/enterpriseApp/cloudDaily/taskAssign.vue
<template> <template>
<div class="my-customer-wrap common-set-wrap"> <div class="app-detail-wrap">
<!-- <nav-crumb :navpath="navpath"> </nav-crumb> --> <common-detail-top :topMenuData="topMenuData" :activeId="activeId"></common-detail-top>
<div class="right-content"> <div class="task-set-content boder-box">
<common-app-top :appName="appName" :appIcon="appIcon" @selectBrandId="selectBrandId"> </common-app-top> <div class="task-set-cell">
<div class="right-box" :style="{ 'min-height': $store.state.bgHeight }"> <div class="font-16 color-606266 m-b-10 font-w-500">日报开关设置</div>
<div class="apps-content flex" :style="{ height: $store.state.bgHeight }"> <div class="font-14 color-606266 m-b-16">开启后，日报将定时发送</div>
<div class="apps-content-left w-157"> <div class="">
<common-detail-left :tabListData="tabListData" @setSelectTab="setSelectTab"></common-detail-left> <el-switch v-model="setData.switch" active-text=" " inactive-text=" "> </el-switch>
</div> </div>
<div class="apps-content-right">
<app-detail :brandId="activeBrand" :tabType="activeTab"></app-detail>
</div> </div>
<div class="task-set-cell">
<div class="font-16 color-606266 m-b-10 font-w-500">日报每日下发时间设置</div>
<div class="font-14 color-606266 m-b-16">该事件设置将在次日生效，为避免影响当日日报的发送，请在日报发送后设置</div>
<div>
<el-time-select
class="w-118"
:editable="false"
:clearable="false"
v-model="setData.setTime"
:picker-options="{
start: '00:00',
step: '00:15',
end: '23:45'
}"
placeholder="选择时间"
>
</el-time-select>
</div> </div>
</div> </div>
<div class="task-set-save m-t-30">
<el-button type="primary" @click="saveSet">保 存</el-button>
</div>
</div> </div>
<vue-gic-footer></vue-gic-footer>
<!-- 公共组件 -->
</div> </div>
</template> </template>
<script> <script>
// import navCrumb from '@/components/nav/nav.vue';
import appDetail from '@/components/app/app-detail.vue'; import appDetail from '@/components/app/app-detail.vue';
import commonAppTop from '@/components/app/common-app-top.vue'; import commonDetailTop from '@/components/app/common-detail-top.vue';
import commonDetailLeft from '@/components/app/app-detail-left.vue'; import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
export default { export default {
name: 'reviewed', name: 'reviewed',
data() { props: {
return { brandId: {
tableH: window.screen.availHeight - 464 - 126 + 'px', type: String,
// 面包屑参数 default() {
/* navpath: [ return '';
{
name: '首页',
path: '/index'
},
{
name: '企业应用',
path: ''
} }
], */
appName: '云日报',
appIcon: 'icon-ribao',
activeTab: '1',
tabListData: [
{
tabId: '1',
tabName: '云日报记录',
icon: 'icon-ribao'
},
{
tabId: '2',
tabName: '云日报设置',
icon: 'icon-ribaoshezhi',
children: [
{
tabId: '21',
tabName: '模板配置',
icon: '',
children: [
{
tabId: '211',
tabName: '系统报表',
icon: ''
},
{
tabId: '212',
tabName: '自定义报表',
icon: ''
} }
]
}, },
data() {
return {
activeTab: '1',
activeBrand: this.brandId, // 商户(品牌) id
topMenuData: [
{ {
tabId: '22', id: '1',
tabName: '任务下发设置', name: '任务下发设置'
icon: ''
}
]
} }
], ],
activeBrand: '1' // 商户(品牌) id activeId: '1',
setData: {
switch: false,
setTime: '12:00'
}
}; };
}, },
computed: {}, computed: {},
methods: { methods: {
/** /**
* 返回 的 brandId * 保存
*/ */
selectBrandId(id) { saveSet: _debounce(function() {
let that = this; let that = this;
that.activeBrand = id; that.postSave();
}, }, 500),
postSave() {
setSelectTab(item) {
let that = this; let that = this;
that.activeTab = item.tabId; let para = {};
postRequest('/haoban-manage-web/save', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('保存成功', 'success');
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
} }
}, },
watch: { watch: {
activeBrand: function(newData, oldData) { brandId: function(newData, oldData) {
const that = this; const that = this;
that.activeBrand = newData; that.activeBrand = newData;
} }
}, },
mounted() { mounted() {
document.documentElement.style.backgroundColor = '#f0f2f5'; document.documentElement.style.backgroundColor = '#f0f2f5';
this.$emit('showTab', '22');
}, },
destroyed() { destroyed() {
document.documentElement.style.backgroundColor = '#fff'; document.documentElement.style.backgroundColor = '#fff';
}, },
components: { components: {
// navCrumb,
appDetail, appDetail,
commonAppTop, commonDetailTop
commonDetailLeft
} }
}; };
</script> </script>
<style type="text/scss" lang="scss" scoped> <style type="text/scss" lang="scss" scoped>
.bg-82C5FF { .task-set-content {
background: #82c5ff; padding: 0 40px 40px 40px;
} .task-set-cell {
padding: 30px 0;
.color-508CEE { border-bottom: 1px solid #e4e7ed;
color: #508cee;
} .el-date-editor.el-input {
width: 118px;
.color-FF585C {
color: #ff585c;
}
.line-h-18 {
line-height: 18px;
}
.tooltip-text {
width: 100%;
white-space: pre-wrap;
word-break: break-all;
}
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.my-customer-top {
position: relative;
height: 43px;
line-height: 43px;
.my-customer-return {
position: absolute;
left: 0px;
bottom: 10px;
width: 78px;
height: 32px;
border-radius: 18px;
}
.my-customer-brand {
position: absolute;
right: 0;
bottom: 18px;
width: 93px;
height: 32px;
}
.my-customer-name {
width: 200px;
margin: 0 auto;
i {
font-size: 14px;
color: #fff;
}
span {
font-size: 16px;
color: #000;
}
.app-icon {
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 4px;
background: -webkit-linear-gradient(left, #7ab6fb, #508bfe);
background: -moz-linear-gradient(left, #7ab6fb, #508bfe);
background: linear-gradient(left, #7ab6fb, #508bfe);
}
}
}
.right-box {
// background: #fff;
min-height: 500px;
padding: 0px;
.apps-content {
.apps-content-left {
height: 100%;
background: #fff;
overflow-x: hidden;
overflow-y: auto;
.apps-content-left__title {
height: 55px;
line-height: 55px;
padding: 0 0 0 18px;
}
.tab-left-list-cell {
position: relative;
text-align: left;
margin-top: 15px;
height: 30px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover {
background: rgba(24, 144, 255, 0.06);
i {
color: #1890ff;
}
}
&.active-tab {
background: rgba(24, 144, 255, 0.06);
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #1890ff;
z-index: 1;
}
i {
color: #1890ff;
}
}
.child-tab-left-list {
li {
position: relative;
text-align: left;
height: 30px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover {
background: rgba(24, 144, 255, 0.06);
i {
color: #1890ff;
}
}
&.active-tab {
background: rgba(24, 144, 255, 0.06);
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #1890ff;
z-index: 1;
}
i {
color: #1890ff;
}
}
}
}
}
}
.apps-content-right {
width: calc(100% - 10px);
margin-left: 10px;
background: #fff;
}
} }
} }
} }
......
src/views/enterpriseApp/mycustomer.vue
...@@ -6,22 +6,6 @@ ...@@ -6,22 +6,6 @@
<div class="right-box" :style="{ 'min-height': $store.state.bgHeight }"> <div class="right-box" :style="{ 'min-height': $store.state.bgHeight }">
<div class="apps-content flex" :style="{ height: $store.state.bgHeight }"> <div class="apps-content flex" :style="{ height: $store.state.bgHeight }">
<div class="apps-content-left w-157"> <div class="apps-content-left w-157">
<!-- <div class="apps-content-left__title border-box color-606266 font-14"></div> -->
<!-- <ul class="tab-left-list">
<template v-for="(item, index) in tabListData">
<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)"><i :class="['p-r-10 color-303133 iconfont', item.icon]"></i>{{ item.tabName }}</li>
<ul class="child-tab-left-list" :key="'childitem' + index">
<template v-for="(childitem, childIndex) in item.children">
<li :class="['tab-left-list-cell color-303133 font-14 border-box', childitem.tabId == activeTab ? 'active-tab' : '']" :key="childIndex" @click="selectTab(childitem)">{{ childitem.tabName }}</li>
<ul class="third-tab-left-list" :key="'thirditem' + childIndex">
<template v-for="(thirditem, thirdIndex) in childitem.children">
<li :class="['tab-left-list-cell color-303133 font-14 border-box', thirditem.tabId == activeTab ? 'active-tab' : '']" :key="thirdIndex" @click="selectTab(thirditem)">{{ thirditem.tabName }}</li>
</template>
</ul>
</template>
</ul>
</template>
</ul> -->
<common-detail-left :tabListData="tabListData" @setSelectTab="setSelectTab"></common-detail-left> <common-detail-left :tabListData="tabListData" @setSelectTab="setSelectTab"></common-detail-left>
</div> </div>
<div class="apps-content-right"> <div class="apps-content-right">
...@@ -44,20 +28,8 @@ export default { ...@@ -44,20 +28,8 @@ export default {
data() { data() {
return { return {
tableH: window.screen.availHeight - 464 - 126 + 'px', tableH: window.screen.availHeight - 464 - 126 + 'px',
// 面包屑参数
/* navpath: [
{
name: '首页',
path: '/index'
},
{
name: '企业应用',
path: ''
}
], */
appName: '我的顾客', appName: '我的顾客',
appIcon: 'icon-gukedown', appIcon: 'icon-gukedown',
activeTab: '1', activeTab: '1',
tabListData: [ tabListData: [
{ {
......
src/views/login/index.vue
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
<script> <script>
import 'swiper/dist/css/swiper.css'; import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper'; import { swiper, swiperSlide } from 'vue-awesome-swiper';
import { _debounce } from '@/common/js/public';
import QRCode from 'qrcodejs2'; import QRCode from 'qrcodejs2';
import errMsg from '@/common/js/error'; import errMsg from '@/common/js/error';
import { postRequest } from '@/api/api'; import { postRequest } from '@/api/api';
...@@ -164,21 +164,23 @@ export default { ...@@ -164,21 +164,23 @@ export default {
/** /**
* 刷新二维码 * 刷新二维码
*/ */
refreshCode() { refreshCode: _debounce(function() {
const that = this; const that = this;
if (!!that.qrcodeCase) {
document.getElementById('qrcode').innerHTML = ''; document.getElementById('qrcode').innerHTML = '';
that.qrcodeCase.clear(); // 先清除原有的 that.qrcodeCase.clear(); // 先清除原有的
}
that.getQrcode(); that.getQrcode();
that.expiredFlag = false; //隐藏过期遮罩层 that.expiredFlag = false; //隐藏过期遮罩层
}, }, 500),
/** /**
* 登录 * 登录
*/ */
toIndex() { toIndex: _debounce(function() {
const that = this; const that = this;
that.toLogin(); that.toLogin();
}, }, 500),
/** /**
* 登录 --- api * 登录 --- api
......
static/css/public.css
...@@ -392,6 +392,14 @@ input:focus { ...@@ -392,6 +392,14 @@ input:focus {
padding-left: 14px; padding-left: 14px;
} }
.p-l-40 {
padding-left: 40px;
}
.p-l-60 {
padding-left: 60px;
}
.p-lr-11 { .p-lr-11 {
padding: 0 11px; padding: 0 11px;
} }
...@@ -460,6 +468,10 @@ input:focus { ...@@ -460,6 +468,10 @@ input:focus {
margin-bottom: 10px; margin-bottom: 10px;
} }
.m-b-16 {
margin-bottom: 16px;
}
.m-b-48 { .m-b-48 {
margin-bottom: 48px; margin-bottom: 48px;
} }
...@@ -516,6 +528,10 @@ input:focus { ...@@ -516,6 +528,10 @@ input:focus {
width: 80px; width: 80px;
} }
.w-118 {
width: 118px;
}
.w-130 { .w-130 {
width: 130px; width: 130px;
} }
......
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