Skip to content

H
haoban-4
Commit 91cb6775 by 无尘
Options

feat: 增加应用组件

parent f235d933
Showing with 778 additions and 88 deletions
src/api/my-customer-app.js 0 → 100644
/*
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-08-27 09:29:13
* @LastEditors: 无尘
* @LastEditTime: 2020-08-27 10:19:09
*/
import getFetch from './get-fetch.js';
let api = {
getGroupList: '/department-list', // 获取 gic 分组列表
getStoreList: '/store-list', // 获取 gic 门店
getAssignStatus: '/app-distribute-status', // 获取分配状态
getNavChain: '/get-chain', // 获取面包屑
getMemberList: {
url: '/app-get-member-info-list', // 获取会员列表
method: 'post',
useFormData: true,
},
getClerkList: '/clerk-list', // 获取导购列表
};
api = getFetch(api, '/hb-manage-web');
export default api;
src/components/app/my-customer/org-tree.vue 0 → 100644
<!--
* @Descripttion: 门店分组
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-08-14 16:51:07
* @LastEditors: 无尘
* @LastEditTime: 2020-08-27 09:32:24
-->
<!--
<org-tree v-if="item.children.length" :itemData="item.children" @getSelectData="getSelectData"></org-tree>
import orgTree from '@/components/app/my-customer/org-tree.vue';
getSelectData(obj) {
const that = this;
that.departObj = obj;
that.selectRadio = 0;
that.showMember = false;
that.storeObj = {};
// 判断是不是门店
that.currentPage = 1;
that.tableData = [];
that.clerkOptions = [];
that.clerkId = '0'; // 导购
that.searchInput = '';
that.multipleSelection = [];
},
-->
<template>
<ul :class="['gic-tree-body']">
<li v-for="(item, index) in itemData" :key="index + 'gic'">
<div :class="['li-cell cursor-pointer', departObj.storeGroupId == item.storeGroupId ? 'li-cell-active' : '']">
<div :style="{ 'margin-left': (item.groupLevel + 1) * 20 + 'px' }" :class="['li-cell-inner border-box cursor-pointer']" @click="toggleExpand(item)">
<span :class="['font-12 color-606266', item.isStore == 1 || !item.hasSonNode ? 'color-fff' : '', item.expand ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"></span><span v-if="item.loading" class="el-tree-node__loading-icon el-icon-loading"></span><span class="font-14 color-606266 p-l-10">{{ item.label }}</span>
</div>
</div>
<li-row v-show="!!item.children.length && item.expand" :departObj="departObj" :itemObj="item" :itemData="item.children" @getSelectData="getSelectData"></li-row>
</li>
</ul>
</template>
<script>
export default {
name: 'li-row',
props: {
brandId: {
type: String,
default() {
return '';
}
},
itemData: {
type: [ Object, Array ],
default() {
return [];
}
},
itemObj: {
type: [ Object, Array ],
default() {
return [];
}
},
// 选中节点
departObj: {
type: Object,
default() {
return {
departmentId: '',
departmentName: '',
wxDepartmentId: '',
parentId: '',
isStore: '',
staffCount: '',
bindFlag: '',
loading: false
};
}
}
},
data() {
return {
};
},
beforeDestroy() {
this.tempArr = [];
},
methods: {
/**
* 获取选中部门/门店数据
* @param {Object} obj
*/
getSelectData(obj) {
const that = this;
that.selectData = obj;
that.$emit('getSelectData', obj);
},
/**
* 展开或者关闭下级
* @param {Object} item
*/
async toggleExpand(item) {
const that = this;
item.expand = item.expand ? false : true;
that.$emit('getSelectData', item);
}
}
};
</script>
<style lang="less" scoped>
.m-l-20 {
margin-left: 20px;
}
.li-cell {
position: relative;
line-height: 32px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.color-fff {
color: #fff;
}
&.li-cell-active {
background: rgba(47, 84, 235, 0.05);
span {
color: #2f54eb;
}
.color-fff {
color: rgba(47, 84, 235, 0.05);
}
}
}
.li-cell-inner {
line-height: 32px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.w-110 {
width: 110px;
}
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
.child-row {
padding-left: 10px;
}
</style>
src/components/app/my-customer/store-list.vue 0 → 100644
<!--
* @Descripttion : 当前组件信息
* @Author : 无尘
* @Date : 2020-08-13 14:02:22
* @LastEditors: 无尘
* @LastEditTime: 2020-08-27 09:48:39
* @FilePath : haoban-4\src\components\app\my-customer\store-list.vue
-->
<!--
<store-list :brandId="brandId" :departObj="departObj" @getStore="getStore"></store-list>
import storeList from '@/components/app/my-customer/store-list.vue';
-->
<template>
<div class="depart-list-body">
<div class="depart-name-wrap m-b-20">
<div class="font-14 color-303133">门店 {{ total }} 家</div>
<div class="flex flex-space-between m-t-20">
<div>
<el-input placeholder="请输入门店名称/代码" maxlength="50" prefix-icon="el-icon-search" v-model="searchInput" class="w-274" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearInput"></el-input>
</div>
<div class="to-log flex m-t-20"></div>
</div>
</div>
<div class="depart-children-list border-box m-t-18">
<div class="m-t-20">
<el-table class="select-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%'}">
<el-table-column class="cursor-pointer" label="门店名称" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.storeName || '--' }}</template>
</el-table-column>
<el-table-column class="cursor-pointer" prop="" label="门店类型" show-overflow-tooltip>
<template slot-scope="scope">{{ storeType[scope.row.storeType] || '--' }}</template>
</el-table-column>
<el-table-column class="cursor-pointer" prop="" label="门店分组" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.storeGroupName || '--' }}
</template>
</el-table-column>
<el-table-column prop="" label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button type="text" @click="showMember(scope.row)">查看会员</el-button>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import { _debounce } from '@/common/js/public';
import fetch from '@/api/my-customer-app.js';
const { getStoreList } = fetch;
import errMsg from '@/common/js/error';
// import showMsg from '@/common/js/showmsg';
export default {
name: 'StoreList',
components: {},
props: {
brandId: {
type: String,
default() {
return '';
}
},
departObj: {
type: Object,
default() {
return {
departmentId: '',
departmentName: '',
wxDepartmentId: '',
parentId: '',
isStore: '',
staffCount: '',
bindFlag: ''
};
}
}
},
data() {
return {
nameVisible: false,
departmentName: this.departObj.departmentName || '',
searchInput: '',
storeType: {
'0': '自营',
'1': '联营',
'2': '代理(加盟)',
'3': '代销',
'4': '托管'
},
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0,
tableData: []
};
},
mounted() {
const that = this;
if (Object.keys(that.departObj)) {
that.currentPage = 1;
that.getTableList();
}
},
methods: {
/**
* 查看会员
* @param {Object} item
*/
showMember(item) {
const that = this;
that.$emit('getStore', item);
},
/**
* 输入
*/
toInput: _debounce(function() {
const that = this;
that.currentPage = 1;
that.getTableList();
}, 500),
// 搜索清除
clearInput() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
/**
* 分页---页码变化
* @param {Number} val
*/
handleSizeChange(val) {
const that = this;
that.currentPage = 1;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
* @param {Number} val
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList() {
const that = this;
let para = {
departmentId: that.departObj.storeGroupId,
enterpriseId: that.brandId,
searchName: that.searchInput || '', // 搜索字段
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize // 一页显示个数
};
getStoreList( para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
departObj(newData, oldData) {
const that = this;
if (Object.keys(newData)) {
that.currentPage = 1;
that.getTableList();
}
},
brandId(newData) {
const that = this;
if (newData) {
that.searchInput = '';
}
}
}
};
</script>
<style lang="less" scoped>
.m-b-20 {
margin-bottom: 20px;
}
.w-274 {
width: 274px;
}
</style>
src/components/nav/nav-app.vue
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2018-10-10 14:44:45 * @Date: 2018-10-10 14:44:45
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-08-18 18:22:13 * @LastEditTime: 2020-08-27 09:27:35
--> -->
<template> <template>
<div class="navwrap border-box flex flex-space-between"> <div class="nav-wrap border-box flex flex-space-between">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<template v-for="(item, index) in navpath"> <template v-for="(item, index) in navpath">
<template v-if="!!item.path"> <template v-if="!!item.path">
...@@ -45,18 +45,6 @@ export default { ...@@ -45,18 +45,6 @@ export default {
return []; return [];
} }
}, },
slotFlag: {
type: Boolean,
default: false
},
navtip: {
type: Boolean,
default: false
},
subNavText: {
type: String,
default: ''
}
}, },
data() { data() {
return { return {
...@@ -130,7 +118,7 @@ export default { ...@@ -130,7 +118,7 @@ export default {
</script> </script>
<style type="text/less" lang="less" scoped> <style type="text/less" lang="less" scoped>
.navwrap { .nav-wrap {
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
padding: 0 20px; padding: 0 20px;
...@@ -139,35 +127,7 @@ export default { ...@@ -139,35 +127,7 @@ export default {
line-height: 48px; line-height: 48px;
} }
} }
.boxbttom {
border-bottom: 1px solid #e4e7ed;
}
.boxshow {
border-bottom: 1px solid #e4e7ed;
box-shadow: 5px -1px 5px #dfdfdf;
}
.navtitle {
margin: 24px 0 0 0;
font-size: 20px;
color: #303133;
font-weight: 500;
}
.navtip {
width: 100%;
height: 38px;
line-height: 38px;
font-size: 13px;
border-radius: 2px;
color: #606266;
background-color: #f4f4f5;
}
.navmTop {
margin-top: 25px;
}
.navtipcolor {
margin: 0 12px;
color: #2f54eb;
}
.el-breadcrumb__inner.is-link:hover, .el-breadcrumb__inner.is-link:hover,
.el-breadcrumb__inner a:hover { .el-breadcrumb__inner a:hover {
color: #2f54eb; color: #2f54eb;
......
src/components/nav/nav.vue
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2018-10-10 14:44:45 * @Date: 2018-10-10 14:44:45
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-08-17 09:34:12 * @LastEditTime: 2020-08-27 09:27:00
--> -->
<template> <template>
<div class="navwrap border-box"> <div class="nav-wrap border-box">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<template v-for="(item, index) in navpath"> <template v-for="(item, index) in navpath">
<template v-if="!!item.path"> <template v-if="!!item.path">
...@@ -34,18 +34,6 @@ export default { ...@@ -34,18 +34,6 @@ export default {
default: function() { default: function() {
return []; return [];
} }
},
slotFlag: {
type: Boolean,
default: false
},
navtip: {
type: Boolean,
default: false
},
subNavText: {
type: String,
default: ''
} }
}, },
data() { data() {
...@@ -79,38 +67,10 @@ export default { ...@@ -79,38 +67,10 @@ export default {
</script> </script>
<style scoped> <style scoped>
.navwrap { .nav-wrap {
padding: 12px 20px; padding: 12px 20px;
} }
.boxbttom {
border-bottom: 1px solid #e4e7ed;
}
.boxshow {
border-bottom: 1px solid #e4e7ed;
box-shadow: 5px -1px 5px #dfdfdf;
}
.navtitle {
margin: 24px 0 0 0;
font-size: 20px;
color: #303133;
font-weight: 500;
}
.navtip {
width: 100%;
height: 38px;
line-height: 38px;
font-size: 13px;
border-radius: 2px;
color: #606266;
background-color: #f4f4f5;
}
.navmTop {
margin-top: 25px;
}
.navtipcolor {
margin: 0 12px;
color: #2f54eb;
}
.el-breadcrumb__inner.is-link:hover, .el-breadcrumb__inner a:hover { .el-breadcrumb__inner.is-link:hover, .el-breadcrumb__inner a:hover {
color: #2f54eb; color: #2f54eb;
} }
......
src/views/apps/customer-app/index.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2020-08-27 09:47:35
-->
<template>
<div class="my-customer-wrap common-set-wrap">
<nav-crumb :navpath="navpath" @selectBrandId="selectBrandId"> </nav-crumb>
<div class="right-content">
<div class="right-box" style="min-height: calc(100vh - 112px);">
<div class="apps-content flex" style="min-height: calc(100vh - 112px);">
<div class="apps-content-left w-157" style="min-height: calc(100vh - 112px);">
<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" :activeGroupId="activeGroup" :tabType="activeTab" @showTab="showTab"> </router-view>
</transition>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav-app.vue';
import commonDetailLeft from '@/components/app/app-detail-left.vue';
// import errMsg from '@/common/js/error';
// import showMsg from '@/common/js/showmsg';
export default {
name: 'reviewed',
components: {
navCrumb,
commonDetailLeft
},
data() {
return {
bgHeight: window.screen.availHeight - 380 + 'px',
activeSelTab: '1',
activeTab: '1',
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index'
},
{
name: '我的顾客',
path: ''
}
],
tabListData: [
{
tabId: '1',
tabName: '会员基础设置',
icon: 'iconjichushezhi',
onlyIconActive: false,
children: [
{
tabId: '11',
tabName: '会员展示设置',
icon: ''
},
{
tabId: '12',
tabName: '会员分组设置',
icon: ''
},
{
tabId: '13',
tabName: '会员搜索设置',
icon: ''
},
{
tabId: '14',
tabName: '会员详情设置',
icon: ''
}
]
},
{
tabId: '2',
tabName: '我的顾客列表',
icon: 'icongukeguanliicon'
}
],
activeBrand: '', // 商户(品牌) id
activeGroup: '', // 商户(品牌) groupId
};
},
mounted() {
document.documentElement.style.backgroundColor = '#f0f2f5';
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
methods: {
/**
* 路由跳转
* @param {String} path
*/
changeRoute(path) {
this.$router.push(path);
},
/**
* 选择后返回menuUrl，做各路由判断
* @param {Object} item
*/
setSelectTab(item) {
const that = this;
that.activeTab = item.menuUrl;
if (item.target == 1) {
if (item.menuUrl.indexOf('http') != -1) {
window.open(item.menuUrl);
}else {
window.open(`/haoban-4/#${item.menuUrl}`);
}
}else {
that.$router.push(item.menuUrl);
}
},
/**
* 各路由返回 menuUrl
* @param {String} menuUrl
*/
showTab(menuUrl) {
const that = this;
that.activeTab = menuUrl;
that.activeSelTab = menuUrl;
that.tabListData.forEach(ele => {
if (ele.menuUrl == menuUrl) {
ele.onlyIconActive = false;
}
if (!!ele.children) {
ele.children.forEach(el => {
if (el.menuUrl == menuUrl) {
ele.onlyIconActive = true;
}
if (!!el.children) {
el.children.forEach(item => {
if (item.menuUrl == menuUrl) {
ele.onlyIconActive = true;
}
});
}
});
}
});
}
},
watch: {
activeBrand: function(newData, oldData) {
const that = this;
that.activeBrand = newData;
},
activeGroup: function(newData, oldData) {
const that = this;
that.activeGroup = newData;
}
}
};
</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;
}
.my-customer-wrap {
height: 100%;
}
.right-content {
/*width: 100%;*/
padding: 0 20px 20px 20px;
min-height: calc(100% - 160px);
.right-box {
background: #fff;
min-height: 500px;
padding: 0px;
.apps-content {
.apps-content-left {
min-width: 157px;
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: #2f54eb;
}
}
&.active-tab {
background: rgba(24, 144, 255, 0.06);
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #2f54eb;
z-index: 1;
}
i {
color: #2f54eb;
}
}
.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: #2f54eb;
}
}
&.active-tab {
background: rgba(24, 144, 255, 0.06);
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #2f54eb;
z-index: 1;
}
i {
color: #2f54eb;
}
}
}
}
}
}
.apps-content-right {
width: calc(100% - 120px);
padding-left: 10px;
background: #f0f2f5;
.daily-set-wrap {
height: 100%;
background: #fff;
}
.app-detail-wrap {
height: 100%;
background: #fff;
}
.common-set-wrap {
height: 100%;
background: #fff;
}
}
}
}
}
</style>
src/views/apps/index.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-10-10 14:44:45
* @LastEditors: 无尘
* @LastEditTime: 2020-08-27 09:46:47
-->
<template>
<div class="enterprise-wrap">
<!-- 公共头部菜单插件 -->
<vue-office-header :projectName="projectName" @collapseTag="collapseTag" @toRouterView="toRouterView"> </vue-office-header>
<div class="enterprise-wrap__body">
<div id="content" class="content">
<div class="content-body" :style="{ height: contentHeight }">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</div>
</div>
</div>
</div>
</template>
<script>
import vueOfficeHeader from '@/components/vue-office-header.vue';
export default {
name: 'AppIndexPage',
components: {
vueOfficeHeader
},
data() {
return {
projectName: 'haoban-manage-web', // 当前项目名
collapseFlag: false, // 折叠参数
contentHeight: window.screen.availHeight - 5 + 'px'
};
},
mounted() {
const that = this;
that.contentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 64 + 'px';
},
methods: {
/**
* 路由跳转
* @param {Object} val
*/
toRouterView(val) {
let that = this;
// 模拟检查数据
// //有两个参数
// {
// name:,
// path:
// }
that.$router.push({
path: val.path
});
},
/**
* 折叠事件
* @param {Boolean} val
*/
collapseTag(val) {
let that = this;
that.collapseFlag = val;
}
},
computed: {}
};
</script>
<style lang="less" scoped>
.enterprise-wrap {
background: #f0f2f5;
.enterprise-wrap__body {
.content {
padding-top: 46px;
min-width: 1400px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
}
</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