wanma-benteng
/
new-admin-view
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加：管理后台 - 代理中心 - 代理用户管理相关功能

This commit is contained in:
wuhui_zzw 2024-01-25 19:11:45 +08:00
parent f6a764987d
commit 5610e9dd6e
8 changed files with 1430 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/api/marketing.js
View File

@ -756,4 +756,34 @@ export function pickupPointInfo(id) {
return request.get(`user/exchange_quota/pickup_point_info/${id}`)
}
// 代理中心 - 提交编辑
export function submitEditInfo(data) {
return request.post(`marketing/agent/edit_info`,data)
}
// 代理中心 - 获取需要编辑的信息
export function getEditInfo(data) {
return request.get(`marketing/agent/get_edit_info`,data)
}
// 代理中心 - 代理列表
export function agentList(data) {
return request.get(`marketing/agent/list`,data)
}

2
src/libs/notice.js
View File

@ -38,7 +38,7 @@ function notice(token) {
if (data.status === 200) {
vm.$emit(data.data.status, data.data.result)
}
console.log(res)
// console.log(res)
if (data.type === 'notice') {
const h = vm.$createElement
ElementUI.Notification({

23
src/router/modules/marketing.js
View File

@ -484,7 +484,27 @@ const marketingRouter =
},
component: () => import('@/views/marketing/exchange/pickupPoint/index')
},
]
},
{
path: 'agent',
name: 'Agent',
meta: {
title: '代理中心',
noCache: true
},
redirect: 'noRedirect',
component: () => import('@/views/marketing/agent/index'),
children: [
{
path: 'list',
name: `agentList`,
meta: {
title: '代理管理',
noCache: true
},
component: () => import('@/views/marketing/agent/agent/index')
},
@ -493,7 +513,6 @@ const marketingRouter =
],
}

280
src/views/marketing/agent/agent/index.vue Normal file
View File

@ -0,0 +1,280 @@
<template>
<div class="divBox">
<!--主要内容-->
<el-card class="box-card">
<!--顶部搜索栏-->
<div slot="header" class="clearfix">
<div class="container">
<el-form inline size="small" label-width="80px">
<el-form-item label="">
<el-input v-model="tableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable />
<el-input v-model="tableFrom.contact_name" placeholder="请输入联系人姓名" class="selWidth" clearable />
<el-input v-model="tableFrom.contact_phone" placeholder="请输入联系人电话" class="selWidth" clearable />
<el-select v-model="tableFrom.agent_type" class="selWidth" >
<el-option label="发起人" :value="1"></el-option>
<el-option label="省公司" :value="2"></el-option>
<el-option label="省合伙人(外勤)" :value="3"></el-option>
<el-option label="省合伙人(内勤)" :value="4"></el-option>
<el-option label="区县运营商" :value="5"></el-option>
<el-option label="区县合伙人" :value="6"></el-option>
<el-option label="餐厅" :value="7"></el-option>
<el-option label="配送商" :value="8"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-button size="small" type="primary" @click="getAgentList(1)">搜索</el-button>
<el-button size="small" type="success" @click="showEditInfoPopup(0)">发起人管理</el-button>
</div>
</div>
<!--表格信息-->
<el-table v-loading="userListLoading" :data="tableData.data" style="width: 100%" size="mini">
<el-table-column label="用户信息" min-width="280" align="center">
<template slot-scope="scope">
<div class="user-content">
<div class="user-avatar">
<img :src="scope.row.user.avatar || moren" />
</div>
<div class="user-info">
<div class="nickname">
{{ scope.row.user.nickname }}
<div class="user-id">{{ scope.row.user.uid }}</div>
</div>
<div class="agent-type-text">
<!--角色信息-->
<el-tag v-if="Number(scope.row.agent_type) == 1" type="info" effect="dark" size="small">发起人</el-tag>
<el-tag v-if="Number(scope.row.agent_type) == 2" type="info" effect="dark" size="small">省公司</el-tag>
<el-tag v-if="Number(scope.row.agent_type) == 3" type="info" effect="dark" size="small">省合伙人(外勤)</el-tag>
<el-tag v-if="Number(scope.row.agent_type) == 4" type="info" effect="dark" size="small">省合伙人(内勤)</el-tag>
<el-tag v-if="Number(scope.row.agent_type) == 5" type="info" effect="dark" size="small">区县运营商</el-tag>
<el-tag v-if="Number(scope.row.agent_type) == 6" type="info" effect="dark" size="small">区县合伙人</el-tag>
<template v-if="Number(scope.row.agent_type) == 7">
<el-tag type="info" effect="dark" size="small">餐厅</el-tag>
<el-tag v-if="scope.row.mer" type="success" effect="dark" size="small">{{ scope.row.mer.mer_name }}</el-tag>
</template>
<template v-if="Number(scope.row.agent_type) == 8">
<el-tag type="info" effect="dark" size="small">配送商</el-tag>
<el-tag v-if="Object.values(scope.row.merList).length > 0" type="success" effect="dark" size="small">
{{ scope.row.merList[0].mer_name }}
{{ Object.values(scope.row.merList).length > 1 ? '+'+Object.values(scope.row.merList).length : '' }}
</el-tag>
</template>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="归属" min-width="280" align="center">
<template slot-scope="scope">
<div class="user-content" v-if="scope.row.pid > 0">
<div class="user-avatar">
<img :src="scope.row.parent.avatar || moren" />
</div>
<div class="user-info">
<div class="nickname">
{{ scope.row.parent.nickname }}
<div class="user-id">{{ scope.row.parent.uid }}</div>
</div>
<div class="agent-type-text">
<el-tag v-if="Number(scope.row.parent.agent_type) == 1" type="info" effect="dark" size="small">发起人</el-tag>
<el-tag v-if="Number(scope.row.parent.agent_type) == 2" type="info" effect="dark" size="small">省公司</el-tag>
<el-tag v-if="Number(scope.row.parent.agent_type) == 3" type="info" effect="dark" size="small">省合伙人(外勤)</el-tag>
<el-tag v-if="Number(scope.row.parent.agent_type) == 4" type="info" effect="dark" size="small">省合伙人(内勤)</el-tag>
<el-tag v-if="Number(scope.row.parent.agent_type) == 5" type="info" effect="dark" size="small">区县运营商</el-tag>
<el-tag v-if="Number(scope.row.parent.agent_type) == 6" type="info" effect="dark" size="small">区县合伙人</el-tag>
<el-tag v-if="Number(scope.row.parent.agent_type) == 7" type="info" effect="dark" size="small">餐厅</el-tag>
<el-tag v-if="Number(scope.row.parent.agent_type) == 8" type="info" effect="dark" size="small">配送商</el-tag>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="联系人" min-width="100" align="center">
<template slot-scope="scope">
{{ scope.row.contact_name }}<br />
{{ scope.row.contact_phone }}
</template>
</el-table-column>
<el-table-column label="地址" min-width="200" align="center">
<template slot-scope="scope">
{{ scope.row.province_name }}{{ scope.row.city_name }}{{ scope.row.area_name }}{{ scope.row.street_name }}<br />
{{ scope.row.address }}
</template>
</el-table-column>
<el-table-column label="添加时间" prop="create_time" min-width="130" align="center"/>
<el-table-column label="操作" min-width="120" align="center">
<template slot-scope="scope">
<el-button type="primary" size="small" effect="dark" @click="showEditInfoPopup(scope.row.agent_type,scope.row.id)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div class="block">
<el-pagination
:page-sizes="[20, 40, 60, 80]"
:page-size="tableFrom.limit"
:current-page="tableFrom.page"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleUserSizeChange"
@current-change="pageUserChange"
/>
</div>
</el-card>
<!--编辑弹框-->
<edit-info ref="editInfo" :agent_type="agent_type" :agent_id="agent_id" :drawer_show="drawer_show" @closeEdit="closeEditInfoPopup"></edit-info>
</div>
</template>
<script>
import editInfo from './template/edit';
import {agentList} from "@/api/marketing";
export default {
name: "preSaleProductList",
components: {
editInfo
},
data() {
return {
moren: require("@/assets/images/f.png"),
// 编辑弹框
drawer_show: false,
agent_type: 0,
agent_id: 0,
// 列表
userListLoading: false,
tableFrom: {
page: 1,
limit: 20,
uid: '',
contact_name: '',
contact_phone: '',
agent_type: '',
},
tableData: {
data: [],
total: 0,
},
};
},
watch: {},
mounted() {
this.getAgentList();
},
methods: {
// 代理编辑 - 弹出弹框
showEditInfoPopup(agent_type,agent_id = 0){
// 类型：1=发起人,2=省公司,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅,8=配送商
this.agent_type = agent_type || 0;
this.agent_id = agent_id || 0;
this.drawer_show = true;
},
// 代理编辑 - 关闭弹框
closeEditInfoPopup() {
this.drawer_show = false;
this.getAgentList('');
},
// 代理列表
getAgentList(num){
let _this = this;
_this.userListLoading = true;
_this.tableFrom.page = num ? num : _this.tableFrom.page;
agentList(_this.tableFrom)
.then((res) => {
_this.tableData.data = res.data.list;
_this.tableData.total = res.data.count;
_this.userListLoading = false;
})
.catch((res) => {
_this.userListLoading = false;
_this.$message.error(res.message);
});
},
pageUserChange(page) {
this.tableFrom.page = page;
this.getUserList('');
},
handleUserSizeChange(val) {
this.tableFrom.limit = val;
this.getUserList('');
},
},
};
</script>
<style scoped lang="scss">
/deep/ .el-table .cell{
padding: 0!important;
}
.selWidth{
margin-bottom: 10px!important;
}
.user-content{
--user-content-height-: 80px;
height: var(--user-content-height-);
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
.user-avatar{
height: var(--user-content-height-);
width: var(--user-content-height-);
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
img{
height: 80%!important;
width: 80%!important;
border-radius: 50% !important;
}
}
.user-info{
max-width: calc(100% - var(--user-content-height-));
height: var(--user-content-height-);
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
.nickname{
width: 100%;
height: 25px;
line-height: 25px;
text-align: left;
font-size: 15px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
.user-id{
color: #fff;
background-color: #409eff;
border-color: #409eff;
height: 18px;
line-height: 20px;
font-size: 13px;
padding: 0 5px;
border-radius: 5px;
margin-left: 10px;
width: max-content!important;
}
}
.user-id{
width: 100%;
text-align: left;
font-size: 13px;
line-height: calc(var(--user-content-height- * 35%));
}
}
}
</style>

71
src/views/marketing/agent/agent/template/area.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<div class="mainContent">
<el-select @change="changeCity" :value="Number(area_id) > 0 ? area_id : ''" placeholder="请选择">
<el-option v-for="(item,index) in list" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</div>
</template>
<script>
import {cityDataLst} from "@/api/system";
export default {
props: {
pid:{
type: String|Number,
default: 0
},
area_id: {
type: String|Number,
default: 0
},
},
data() {
return {
list: {},
};
},
watch: {
pid: {
handler: function () {
// 信息初始化
this.getCityAreaList(this.pid);
},
deep: true,
immediate: true
},
},
mounted() {},
methods: {
// 地区选择器 - 获取地区列表
getCityAreaList(id) {
let _this = this;
cityDataLst(id).then((res) => {
if(res.status == 200){
_this.list = res.data || {};
}
}).catch((res) => {
this.$message.error(res.message);
});
},
// 地区选择器 - 地区选中
changeCity(event){
// 获取选择的内容
let list = Object.assign({},this.list);
let info = {};
Object.values(list).some((item) => {
if(item.id == event){
info = item;
return true;
}
});
this.$emit('change', info);
}
},
};
</script>
<style lang="scss" scoped>
</style>

924
src/views/marketing/agent/agent/template/edit.vue Normal file
View File

@ -0,0 +1,924 @@
<template>
<div class="mainContent">
<el-drawer :with-header="false" :size="1000" :visible.sync="drawer_show" direction="rtl" :before-close="closeEditInfo">
<!-- 顶部标题 -->
<div class="title">{{ page_title }}</div>
<!-- 当前用户信息 -->
<div class="current-user-info" v-if="info.uid > 0">
<div class="top-user">
<div class="user-content">
<div class="user-avatar">
<img :src="info.user.avatar || moren" />
</div>
<div class="user-info">
<div class="nickname">
{{ info.user.nickname }}
<div class="user-id">{{info.uid}}</div>
</div>
<div class="user-address">
<!--{{ info.province_name }}{{ info.city_name }}{{ info.area_name }}{{ info.street_name }}{{ info.address }}-->
</div>
</div>
</div>
<el-button size="small" type="warning" round @click="addChildren(1, true)">切换用户</el-button>
</div>
<div class="info-list">
<el-form ref="editInfoField" size="small" :model="info" label-width="130px" @submit.native.prevent>
<el-row>
<!--公共内容-->
<el-col :span="12">
<el-form-item label="联系人姓名：" prop="contact_name">
<el-input v-model="info.contact_name" placeholder="请填写联系人姓名" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系人电话：" prop="contact_phone">
<el-input v-model="info.contact_phone" placeholder="请填写联系人电话" />
</el-form-item>
</el-col>
<!--仅发起人-->
<el-col :span="12" v-if="info.agent_type == 1">
<el-form-item label="股份：">
<el-tooltip class="item" effect="dark" content="请在发起人管理中编辑股份信息！" placement="right">
<el-input :value="info.agent_stock" type="text" readonly />
</el-tooltip>
</el-form-item>
</el-col>
<!-- 地区选择，仅需要的显示 类型：1=发起人,2=省公司,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅,8=配送商 -->
<el-col :span="24" v-if="['2','3','4','5','6','7'].includes(String(info.agent_type))">
<el-form-item label="地区：">
<div class="selected-city">
<!--省选择-->
<area-info :area_id="info.province_id" class="selected-city-item" @change="changeAreaInfo($event,-1)"></area-info>
<!--市选择-->
<area-info
:area_id="info.city_id"
:pid="info.province_id"
class="selected-city-item"
v-if="['5','6','7'].includes(String(info.agent_type)) && Number(info.province_id) > 0"
@change="changeAreaInfo($event,-1)"
></area-info>
<!--区/县选择-->
<area-info
:area_id="info.area_id"
:pid="info.city_id"
class="selected-city-item"
v-if="['5','6','7'].includes(String(info.agent_type)) && Number(info.city_id) > 0"
@change="changeAreaInfo($event,-1)"
></area-info>
<!--镇/街道-->
<area-info
:area_id="info.street_id"
:pid="info.area_id"
class="selected-city-item"
v-if="['7'].includes(String(info.agent_type)) && Number(info.area_id) > 0"
@change="changeAreaInfo($event,-1)"
></area-info>
</div>
</el-form-item>
</el-col>
<!-- 仅餐厅 显示详细地址、定位、商户关联（单个） -->
<template v-if="info.agent_type == 7">
<el-col :span="24">
<el-form-item label="经纬度：" prop="lat">
<el-input :value="(info.lat || '') + ',' + (info.lng || '')" readonly enter-button="查找位置" style="width: 100%;" placeholder="请点击查找位置选择位置">
<el-button slot="append" type="primary" @click="searchPosition(-1)">查找位置</el-button>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="详细地址：">
<el-input v-model="info.address" placeholder="请填写详细地址" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="关联商户：">
<search-mer :mer_id="info.mer_id" @change="changeMer($event,-1)"></search-mer>
</el-form-item>
</el-col>
</template>
<!-- 仅配送商 显示商户关联（多个）-->
<el-col :span="24" v-if="info.agent_type == 8">
<el-form-item label="关联商户：">
<search-mer :mer_id="info.mer_id_list" @change="changeMer($event,-1)" :is_multiple="true"></search-mer>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
<!-- 下级信息/发起人信息 -->
<div class="sub-list">
<!-- 操作按钮 -->
<el-button v-if="Number(agent_type) === 0" size="small" type="primary" @click="addChildren(1)">添加发起人</el-button>
<el-button v-if="Number(agent_type) === 1" size="small" type="primary" @click="addChildren(2)">添加省公司</el-button>
<el-button v-if="Number(agent_type) === 2" size="small" type="primary" @click="addChildren(3)">添加省合伙人(外勤)</el-button>
<el-button v-if="Number(agent_type) === 2" size="small" type="primary" @click="addChildren(4)">添加省合伙人(内勤)</el-button>
<el-button v-if="Number(agent_type) === 3" size="small" type="primary" @click="addChildren(5)">添加区县运营商</el-button>
<el-button v-if="Number(agent_type) === 5" size="small" type="primary" @click="addChildren(6)">添加区县合伙人</el-button>
<el-button v-if="Number(agent_type) === 6" size="small" type="primary" @click="addChildren(7)">添加餐厅</el-button>
<el-button v-if="![0,4,7,8].includes(Number(agent_type))" size="small" type="warning" @click="addChildren(8)">添加配送商</el-button>
<el-button size="small" type="success" @click="submitEditInfo">提交编辑</el-button>
<el-button size="small" @click="closeEditInfo">取消编辑</el-button>
<!-- 角色列表 -->
<div class="role-list">
<div class="role-block" v-for="(item,index) in children_list" :key="index">
<div class="top-user-content">
<div class="user-content">
<div class="user-avatar">
<img :src="item.user.avatar || moren" />
</div>
<div class="user-info">
<div class="nickname">
{{ item.user.nickname }}
<div class="user-id">{{ item.user.uid }}</div>
</div>
<div class="agent-type-text">
<el-tag v-if="Number(item.agent_type) == 1" type="info" effect="dark" size="small">发起人</el-tag>
<el-tag v-if="Number(item.agent_type) == 2" type="info" effect="dark" size="small">省公司</el-tag>
<el-tag v-if="Number(item.agent_type) == 3" type="info" effect="dark" size="small">省合伙人(外勤)</el-tag>
<el-tag v-if="Number(item.agent_type) == 4" type="info" effect="dark" size="small">省合伙人(内勤)</el-tag>
<el-tag v-if="Number(item.agent_type) == 5" type="info" effect="dark" size="small">区县运营商</el-tag>
<el-tag v-if="Number(item.agent_type) == 6" type="info" effect="dark" size="small">区县合伙人</el-tag>
<el-tag v-if="Number(item.agent_type) == 7" type="info" effect="dark" size="small">餐厅</el-tag>
<el-tag v-if="Number(item.agent_type) == 8" type="info" effect="dark" size="small">配送商</el-tag>
</div>
</div>
</div>
<div class="user-del-btn">
<el-button type="danger" icon="el-icon-delete" circle @click="closeStaffConfirm(item.uid, item.agent_type)"></el-button>
</div>
</div>
<div class="bottom-form-content">
<el-form ref="editInfoField" size="small" :model="children_list" label-width="130px" @submit.native.prevent>
<el-row>
<!-- 公共表单内容 -->
<el-col :span="12">
<el-form-item label="联系人姓名：" prop="contact_name">
<el-input v-model="children_list[index].contact_name" placeholder="请填写联系人姓名" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系人电话：" prop="contact_phone">
<el-input v-model="children_list[index].contact_phone" placeholder="请填写联系人电话" />
</el-form-item>
</el-col>
<!-- 仅发起人显示 -->
<el-col :span="12" v-if="children_list[index].agent_type == 1">
<el-form-item label="股份：" prop="agent_stock">
<el-input v-model.number="children_list[index].agent_stock" type="number" step="0.01" placeholder="请填写该发起人股份" />
</el-form-item>
</el-col>
<!-- 地区选择，仅需要的显示 类型：1=发起人,2=省公司,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅,8=配送商 -->
<el-col :span="24" v-if="['2','3','4','5','6','7'].includes(String(children_list[index].agent_type))">
<el-form-item label="地区：">
<div class="selected-city">
<!--省选择-->
<area-info
:area_id="children_list[index].province_id"
class="selected-city-item"
@change="changeAreaInfo($event,index)"
></area-info>
<!--市选择-->
<area-info
:area_id="children_list[index].city_id"
:pid="children_list[index].province_id"
class="selected-city-item"
v-if="['5','6','7'].includes(String(children_list[index].agent_type)) && Number(children_list[index].province_id) > 0"
@change="changeAreaInfo($event,index)"
></area-info>
<!--区/县选择-->
<area-info
:area_id="children_list[index].area_id"
:pid="children_list[index].city_id"
class="selected-city-item"
v-if="['5','6','7'].includes(String(children_list[index].agent_type)) && Number(children_list[index].city_id) > 0"
@change="changeAreaInfo($event,index)"
></area-info>
<!--镇/街道-->
<area-info
:area_id="children_list[index].street_id"
:pid="children_list[index].area_id"
class="selected-city-item"
v-if="['7'].includes(String(children_list[index].agent_type)) && Number(children_list[index].area_id) > 0"
@change="changeAreaInfo($event,index)"
></area-info>
</div>
</el-form-item>
</el-col>
<!-- 仅餐厅 显示详细地址、定位、商户关联（单个） -->
<template v-if="children_list[index].agent_type == 7">
<el-col :span="24">
<el-form-item label="经纬度：" prop="lat">
<el-input :value="(children_list[index].lat || '') + ',' + (children_list[index].lng || '')" readonly enter-button="查找位置" style="width: 100%;" placeholder="请点击查找位置选择位置">
<el-button slot="append" type="primary" @click="searchPosition(index)">查找位置</el-button>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="详细地址：">
<el-input v-model="children_list[index].address" placeholder="请填写详细地址" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="关联商户：">
<search-mer :mer_id="children_list[index].mer_id" @change="changeMer($event,index)"></search-mer>
</el-form-item>
</el-col>
</template>
<!-- 仅配送商 显示商户关联（多个）-->
<el-col :span="24" v-if="children_list[index].agent_type == 8">
<el-form-item label="关联商户：">
<search-mer :mer_id="children_list[index].mer_id_list" @change="changeMer($event,index)" :is_multiple="true"></search-mer>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</div>
</el-drawer>
<!------ 公共内容 ----------------------------------------------------->
<!--用户选择-->
<el-dialog title="负责人选择" :visible.sync="userSelectVisible" width="80%" :before-close="closeStaff" :append-to-body="true">
<el-card class="box-card">
<!--顶部搜索栏-->
<div slot="header" class="clearfix">
<div class="container">
<el-form inline size="small" label-width="80px">
<el-form-item label="">
<el-input v-model="userTableFrom.nickname" placeholder="请输入用户昵称" class="selWidth" clearable />
<el-input v-model="userTableFrom.phone" placeholder="请输入用户手机号" class="selWidth" clearable />
<el-input v-model="userTableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable>
<el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getUserList(1)" />
</el-input>
</el-form-item>
</el-form>
</div>
</div>
<!--表格信息-->
<el-table v-loading="userListLoading" :data="userTableData.data" :key="Object.values(children_uid_list).toString()" style="width: 100%" size="mini">
<el-table-column label="用户信息" prop="nickname" min-width="300" align="center">
<template slot-scope="scope">
<div class="user-content">
<div class="user-avatar">
<img :src="scope.row.avatar || moren" />
</div>
<div class="user-info">
<div class="nickname">{{ scope.row.nickname }}</div>
<div class="user-id">ID：{{ scope.row.uid }}</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="联系电话" prop="phone" min-width="150" align="center"/>
<!--根据添加编辑类型 显示不同的内容-->
<el-table-column v-if="Number(create_role_type) === 1" label="是否已成为发起人" min-width="200" align="center">
<template slot-scope="scope">
<el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
<el-tag type="info" v-else effect="dark">不是</el-tag>
</template>
</el-table-column>
<el-table-column v-if="Number(create_role_type) === 2" label="是否已成为省公司" min-width="200" align="center">
<template slot-scope="scope">
<el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
<el-tag type="info" v-else effect="dark">不是</el-tag>
</template>
</el-table-column>
<el-table-column v-if="Number(create_role_type) === 3" label="是否已成为省合伙人(外勤)" min-width="200" align="center">
<template slot-scope="scope">
<el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
<el-tag type="info" v-else effect="dark">不是</el-tag>
</template>
</el-table-column>
<el-table-column v-if="Number(create_role_type) === 4" label="是否已成为省合伙人(内勤)" min-width="200" align="center">
<template slot-scope="scope">
<el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
<el-tag type="info" v-else effect="dark">不是</el-tag>
</template>
</el-table-column>
<el-table-column v-if="Number(create_role_type) === 5" label="是否已成为区县运营商" min-width="200" align="center">
<template slot-scope="scope">
<el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
<el-tag type="info" v-else effect="dark">不是</el-tag>
</template>
</el-table-column>
<el-table-column v-if="Number(create_role_type) === 6" label="是否已成为区县合伙人" min-width="200" align="center">
<template slot-scope="scope">
<el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
<el-tag type="info" v-else effect="dark">不是</el-tag>
</template>
</el-table-column>
<el-table-column v-if="Number(create_role_type) === 7" label="是否已成为餐厅" min-width="200" align="center">
<template slot-scope="scope">
<el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
<el-tag type="info" v-else effect="dark">不是</el-tag>
</template>
</el-table-column>
<el-table-column v-if="Number(create_role_type) === 8" label="是否已成为配送商" min-width="200" align="center">
<template slot-scope="scope">
<el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
<el-tag type="info" v-else effect="dark">不是</el-tag>
</template>
</el-table-column>
<!--操作按钮-->
<el-table-column label="操作" min-width="150" align="center">
<template slot-scope="scope">
<el-button type="danger" effect="dark" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" @click="closeStaffConfirm(scope.row.uid, create_role_type)">取消</el-button>
<el-button type="success" effect="dark" v-else @click="addStaffConfirm(scope.row)">添加</el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div class="block">
<el-pagination
:page-sizes="[20, 40, 60, 80]"
:page-size="userTableFrom.limit"
:current-page="userTableFrom.page"
layout="total, sizes, prev, pager, next, jumper"
:total="userTableData.total"
@size-change="handleUserSizeChange"
@current-change="pageUserChange"
/>
</div>
</el-card>
<span slot="footer" class="dialog-footer">
<el-button @click="userSelectVisible = false">关 闭</el-button>
</span>
</el-dialog>
<!--地图定位-->
<el-dialog
v-if="modalMap"
v-model="modalMap"
:visible.sync="modalMap"
title="选择位置"
close-on-click-modal
class="mapBox"
custom-class="dialog-scustom"
:append-to-body='true'
width="80%"
top="20px"
>
<iframe id="mapPage" width="100%" height="700px" frameborder="0" :src="keyUrl" />
</el-dialog>
</div>
</template>
<script>
import areaInfo from './area';
import searchMer from './mer';
import {userLstApi} from "@/api/user";
import {getEditInfo, submitEditInfo} from "@/api/marketing";
import {configApi} from "@/api/system";
export default {
props: {
agent_type: {
type: Number,
default: 0
},
drawer_show: {
type: Boolean,
default: false
},
agent_id: {
type: Number,
default: 0
},
},
components: {
areaInfo,
searchMer
},
data() {
return {
moren: require("@/assets/images/f.png"),
page_title: '编辑信息',
// 信息管理相关
info: {},
children_list: {},
children_uid_list: {},
// 用户选择弹框
userSelectVisible: false,
userListLoading: true,
userTableFrom: {
page: 1,
limit: 20,
nickname: '',
phone: '',
uid: ''
},
userTableData: {
data: [],
total: 0,
},
create_role_type: 0,
is_change_user: false,
// 定位相关
modalMap: false,
mapKey: '',
keyUrl: '',
delivery_type: '',
current_handle_index: '',
// 商户选择
mer_loading: false,
mer_list: {},
};
},
watch: {
drawer_show: {
handler: function () {
// 信息初始化
this.info = {};
this.children_list = {};
this.children_uid_list = {};
if(this.drawer_show) this.getAgentEditInfo();
},
},
agent_type: {
handler: function () {
// 类型：1=发起人,2=省公司,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅,8=配送商
switch (Number(this.agent_type)) {
case 0:
this.page_title = '发起人管理';
break;
case 1:
this.page_title = '发起人信息编辑';
break;
case 2:
this.page_title = '省公司信息编辑';
break;
case 3:
this.page_title = '省合伙人(外勤)信息编辑';
break;
case 4:
this.page_title = '省合伙人(内勤)信息编辑';
break;
case 5:
this.page_title = '区县运营商信息编辑';
break;
case 6:
this.page_title = '区县合伙人信息编辑';
break;
case 7:
this.page_title = '餐厅信息编辑';
break;
case 8:
this.page_title = '配送商信息编辑';
break;
}
},
immediate: true
},
children_list: {
handler: function () {
this.children_uid_list = Object.values(this.children_list).map((item) => {
return String(item.uid) + '_' + String(item.agent_type);
});
},
deep: true,
immediate: true
}
},
mounted() {
window.addEventListener(
'message',
function(event) {
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
var loc = event.data
if (loc && loc.module === 'locationPicker') {
// 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
window.parent.selectAddress(loc)
}
},
false
)
window.selectAddress = this.selectAddress
this.getMapKey();
},
methods: {
// 初始化 - 获取当前需要修改的信息
getAgentEditInfo(){
let _this = this;
let params = {
agent_id: _this.agent_id,
};
getEditInfo(params).then((res) => {
if(res.status == 200){
_this.info = Object.assign({},res.data.info || {});
_this.children_list = Object.assign({},res.data.children_list || {});
}
}).catch((res) => {
_this.$message.error(res.message)
})
},
// 用户选择器 - 弹框显示
addChildren(create_role_type,is_change_user = false){
this.getUserList(1);
this.userSelectVisible = true;
this.is_change_user = is_change_user;
// 添加角色类型
this.create_role_type = create_role_type || 0;
},
// 用户选择器 - 弹框关闭
closeStaff() {
this.userSelectVisible = false;
},
// 用户选择器 - 获取用户列表及分页相关
getUserList(num) {
let _this = this;
this.userListLoading = true;
this.userTableFrom.page = num ? num : this.userTableFrom.page;
userLstApi(this.userTableFrom)
.then((res) => {
this.userTableData.data = res.data.list;
this.userTableData.total = res.data.count;
this.userListLoading = false;
})
.catch((res) => {
this.userListLoading = false;
this.$message.error(res.message);
});
},
pageUserChange(page) {
this.userTableFrom.page = page;
this.getUserList('');
},
handleUserSizeChange(val) {
this.userTableFrom.limit = val;
this.getUserList('');
},
// 用户选择器 - 选中用户
addStaffConfirm(item){
if(this.is_change_user){
this.info.uid = item.uid;
this.info.user = item;
this.closeStaff();
}else{
let key = String(item.uid) + '_' + String(this.create_role_type);
this.children_list[key] = {
uid: item.uid,
pid: this.info.id || 0,
agent_type: this.create_role_type,
agent_stock: 0,
contact_name: '',
contact_phone: '',
province_id: 0,
city_id: 0,
area_id: 0,
street_id: 0,
address: '',
lat: '',
lng: '',
mer_id: '',
mer_id_list: [],
user: item,
};
this.children_list = Object.assign({}, this.children_list);
}
this.$forceUpdate();
},
// 用户选择器 - 删除用户
closeStaffConfirm(uid, agent_type){
let key = String(uid) + '_' + String(agent_type);
// 判断：是否允许删除
let childrenCount = this.children_list[key].children_count || 0;
if(Number(childrenCount) > 0){
this.$message.error("存在下级信息，禁止删除！");
return false;
}
// 删除操作
delete this.children_list[key];
this.children_list = Object.assign({}, this.children_list);
this.$forceUpdate();
},
// 操作 - 取消编辑
closeEditInfo(){
this.$emit('closeEdit')
},
// 操作 - 提交编辑
submitEditInfo(){
let _this = this;
let editInfo = Object.assign({},_this.info);
editInfo.children_list = Object.assign({}, _this.children_list);
let editInfoId = Number(editInfo.id || 0);
let childrenListLen = Object.values(editInfo.children_list).length || 0;
// 判断：如果 agent_type == 0 且children_list为空 则不允许提交，因为这时没有信息需要编辑
if(Number(_this.agent_type) === 0 && childrenListLen <= 0){
_this.$message.error("请至少添加一个发起人！")
return false;
}
// 判断：editInfo不为空 且isSubmit=true 可以提交
if((editInfoId > 0) || (editInfoId <= 0 && childrenListLen > 0)){
submitEditInfo(editInfo).then((res) => {
if(res.status == 200){
_this.$message.success('操作成功');
_this.closeEditInfo();
_this.$forceUpdate();
}
}).catch((res) => {
_this.$message.error(res.message)
})
}
},
// 地区选择器 - 切换地区
changeAreaInfo(event,index){
let _this = this;
switch (event.type){
case 'province':
if(index == -1){
_this.info.province_id = event.id;
_this.info.city_id = 0;
_this.info.area_id = 0;
_this.info.street_id = 0;
}else{
_this.children_list[index].province_id = event.id;
_this.children_list[index].city_id = 0;
_this.children_list[index].area_id = 0;
_this.children_list[index].street_id = 0;
}
break;
case 'city':
if(index == -1){
_this.info.city_id = event.id;
_this.info.area_id = 0;
_this.info.street_id = 0;
}else {
_this.children_list[index].city_id = event.id;
_this.children_list[index].area_id = 0;
_this.children_list[index].street_id = 0;
}
break;
case 'area':
if(index == -1){
_this.info.area_id = event.id;
_this.info.street_id = 0;
}else {
_this.children_list[index].area_id = event.id;
_this.children_list[index].street_id = 0;
}
break;
case 'street':
if(index == -1){
_this.info.street_id = event.id;
}else {
_this.children_list[index].street_id = event.id;
}
break;
}
_this.$forceUpdate();
},
// 定位处理 - 获取地图key
getMapKey() {
configApi().then(res => {
this.mapKey = res.data.tx_map_key
const keys = res.data.tx_map_key
this.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`
this.delivery_type = res.data.delivery_type
}).catch(res => {
this.$message.error(res.message)
})
},
// 定位处理 - 定位处理
searchPosition(index) {
this.current_handle_index = index;
if (!this.mapKey || this.mapKey == '') this.$message.error('平台未配置腾讯地图KEY')
else this.modalMap = true
},
// 定位处理 - 选择经纬度
selectAddress(data) {
let index = this.current_handle_index;
if(index == -1){
this.info.lat = data.latlng.lat
this.info.lng = data.latlng.lng
this.info.address = data.poiaddress || ''
}else{
this.children_list[index].lat = data.latlng.lat
this.children_list[index].lng = data.latlng.lng
this.children_list[index].address = data.poiaddress || ''
}
this.modalMap = false
this.$forceUpdate();
},
// 选择商户 - 商户改变
changeMer(event,index){
let _this = this;
if(index == -1){
let agent_type = _this.info.agent_type;
if(agent_type == 7) _this.info.mer_id = event.mer_id;
else if(agent_type == 8) _this.info.mer_id_list = event.event || [];
}else{
let agent_type = _this.children_list[index].agent_type;
if(agent_type == 7) _this.children_list[index].mer_id = event.mer_id;
else if(agent_type == 8) _this.children_list[index].mer_id_list = event.event || [];
}
_this.$forceUpdate();
}
},
};
</script>
<style lang="scss" scoped>
.mainContent{
// 顶部标题
.title{
padding: 20px 20px 10px;
font-weight: 700;
background-color: #f5f7fa;
border-bottom: 1px solid #dfe4ed;
}
// 当前用户信息
.current-user-info{
padding: 20px;
border-bottom: 1px solid #dfe4ed;
.top-user{
display: inline-flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.user-content{
margin-right: 30px;
.nickname{
height: 25px;
line-height: 25px;
font-size: 16px;
color: #282828;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
.user-id{
color: #fff;
background-color: #409eff;
border-color: #409eff;
height: 18px;
line-height: 20px;
font-size: 13px;
padding: 0 5px;
border-radius: 5px;
margin-left: 10px;
width: max-content!important;
}
}
.user-address{
height: 25px;
line-height: 25px;
width: 100%;
font-size: 13px;
color: #606266;
}
}
}
}
// 下级信息/发起人信息
.sub-list{
padding: 20px;
.role-list{
width: 100%;
padding: 15px 0;
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: center;
.role-block{
border: 1px solid #dfe4ed;
width: 100%;
border-radius: 5px;
padding: 10px;
.top-user-content{
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
.user-content{
width: 300px;
height: 80px!important;
.user-info{
height: 80px;
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: space-evenly;
.nickname{
height: 25px;
line-height: 25px;
font-size: 16px;
color: #282828;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
.user-id{
color: #fff;
background-color: #409eff;
border-color: #409eff;
height: 18px;
line-height: 20px;
font-size: 13px;
padding: 0 5px;
border-radius: 5px;
margin-left: 10px;
width: max-content!important;
}
}
}
}
.user-del-btn{}
}
.bottom-form-content{
margin-top: 10px;
width: 100%;
}
}
.role-block:not(:last-child){
margin-bottom: 15px;
}
}
}
}
.selected-city{
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
width: 100%;
.selected-city-item{
width: calc((100% - 20px) / 3);
}
.selected-city-item:not(:last-child){
margin-right: 10px;
}
}
.user-content{
--user-content-height-: 80px;
height: var(--user-content-height-);
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
.user-avatar{
height: var(--user-content-height-);
width: var(--user-content-height-);
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
img{
height: 80%!important;
width: 80%!important;
border-radius: 50% !important;
}
}
.user-info{
width: calc(100% - var(--user-content-height-));
height: var(--user-content-height-);
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
.nickname{
width: 100%;
height: 25px;
line-height: 25px;
text-align: left;
font-size: 15px;
font-weight: bold;
line-height: calc(var(--user-content-height- * 65%));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-id{
width: 100%;
text-align: left;
font-size: 13px;
line-height: calc(var(--user-content-height- * 35%));
}
}
}
</style>

100
src/views/marketing/agent/agent/template/mer.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<div class="mainContent">
<el-select @change="changeMer" :value="mer_id ? mer_id : '' " :multiple="is_multiple" filterable remote reserve-keyword placeholder="请输入关键词搜索商户" :remote-method="searchMer" :loading="loading">
<el-option v-for="(item,index) in list" :key="index" :label="item.mer_name" :value="item.mer_id"></el-option>
</el-select>
</div>
</template>
<script>
import {merchantListApi} from "@/api/merchant";
export default {
props: {
mer_id:{
type: String|Number|Object|Array,
default: 0
},
is_multiple: {
type: Boolean,
default: false
},
},
data() {
return {
loading: false,
list: {},
};
},
watch: {
mer_id: {
handler: function () {
if(Object.values(this.list).length <= 0){
this.getMer(this.mer_id);
}
},
immediate: true
},
},
mounted() {},
methods: {
// 搜索商户
searchMer(event) {
let _this = this;
this.loading = true;
let params = {
keyword: event,
};
merchantListApi(params).then((res) => {
if(res.status == 200){
this.list = res.data.list;
}
this.loading = false;
}).catch((res) => {
this.loading = false;
this.$message.error(res.message);
});
},
// 获取商户
getMer(mer_id) {
let _this = this;
this.loading = true;
let type = typeof mer_id;
let params = {};
if(type === 'object'){
params.mer_id_list = mer_id;
}else{
params.mer_id = mer_id;
}
merchantListApi(params).then((res) => {
if(res.status == 200){
_this.list = res.data.list;
}
_this.loading = false;
}).catch((res) => {
_this.loading = false;
_this.$message.error(res.message);
});
},
// 商户选中
changeMer(event){
// 获取选择的内容
let list = Object.assign({},this.list);
let info = {};
Object.values(list).some((item) => {
if(item.mer_id == event){
info = item;
return true;
}
});
info.event = event;
this.$emit('change', info);
}
},
};
</script>
<style lang="scss" scoped>
</style>

3
src/views/marketing/agent/index.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<router-view />
</template>