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-03-20 15:25:46 +08:00
parent e896a63a4f
commit d832e58da7
4 changed files with 350 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/marketing.js
View File

@ -768,6 +768,14 @@ export function getEditInfo(data) {
export function agentList(data) {
return request.get(`marketing/agent/list`,data)
}
// 代理中心 - 代理列表 - 新
export function newAgentList(data) {
return request.get(`marketing/agent/new_list`,data)
}
// 代理中心 - 下级列表
export function childrenList(data) {
return request.get(`marketing/agent/children_list`,data)
}
// 代理中心 - 申请列表
export function agentApplyList(data) {
return request.get(`marketing/agent/apply_list`,data)

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

@ -532,6 +532,15 @@ const marketingRouter =
},
component: () => import('@/views/marketing/agent/agent/index')
},
{
path: 'new_list',
name: `newAgentList`,
meta: {
title: '代理管理',
noCache: true
},
component: () => import('@/views/marketing/agent/agent/new_index')
},
{
path: 'apply',
name: `agentApply`,

326
src/views/marketing/agent/agent/new_index.vue Normal file
View File

@ -0,0 +1,326 @@
<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" clearable>-->
<!-- <el-option label="总部发起人" :value="1"></el-option>-->
<!-- <el-option label="总部外勤" :value="9"></el-option>-->
<!-- <el-option label="总部内勤" :value="10"></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-option label="烟酒店代销商" :value="11"></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-radio-group v-model="tableFrom.group_key" style="margin-bottom: 15px;">
<el-radio-button label="1">总部</el-radio-button>
<el-radio-button label="2">省公司运营中心</el-radio-button>
<el-radio-button label="3">区县运营中心</el-radio-button>
<el-radio-button label="4">烟酒馆运营中心</el-radio-button>
<el-radio-button label="5">联盟商家</el-radio-button>
</el-radio-group>
<!--表格信息-->
<el-table
v-loading="userListLoading"
:data="tableData.data"
style="width: 100%"
size="mini"
row-key="id"
lazy
:load="load"
highlight-current-row
:tree-props="{children: 'children', hasChildren: 'children_count'}"
show-header
>
<el-table-column label="ID" prop="id" min-width="80" align="center"/>
<el-table-column label="用户信息" min-width="230" align="center">
<template slot-scope="scope">
<div class="user-content" v-if="scope.row.user">
<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 type="info" effect="dark" size="small">{{ scope.row.agent_type_text || '' }}</el-tag>
<!--餐厅关联商户-->
<template v-if="Number(scope.row.agent_type) == 7">
<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 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>
<!--公司名称-->
<el-tag v-if="(scope.row.agent_type == 2 || scope.row.agent_type == 5) && scope.row.corporate_name" type="warning" effect="dark" size="small">
{{ scope.row.corporate_name || '' }}
</el-tag>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="归属" min-width="230" 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 type="info" effect="dark" size="small">{{ scope.row.parent.agent_type_text || '' }}</el-tag>
<!--公司名称-->
<el-tag v-if="(scope.row.parent.agent_type == 2 || scope.row.parent.agent_type == 5) && scope.row.parent.corporate_name" type="warning" effect="dark" size="small">
{{ scope.row.parent.corporate_name || '' }}
</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 {newAgentList, childrenList} 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: '',
group_key: '1',// 1=总部、2=省公司运营中心、3=区县运营中心、4=烟酒馆运营中心、5=联盟商家
},
tableData: {
data: [],
total: 0,
},
};
},
watch: {
'tableFrom.group_key' : {
handler (nVal, oVal) {
this.getAgentList(1);
},
deep: true
}
},
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;
newAgentList(_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('');
},
// 获取下级
load(tree, treeNode, resolve) {
let _this = this;
_this.userListLoading = true;
childrenList({ pid: tree.id }).then((res) => {
_this.userListLoading = false;
let data = res.data ? Object.assign({}, res.data) : {};
data = Object.values(data);
// 循环处理 凡是类型为：9,10,3,4,6,11,7,8 全部强制无下级信息
data.forEach(function (item) {
if([9,10,3,4,6,11,7,8].includes(Number(item.agent_type))) item.children_count = 0;
return item;
});
resolve(data)
}).catch((res) => {
_this.userListLoading = false;
_this.$message.error(res.message);
});
},
},
};
</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: flex-start;
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: 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-id{
width: 100%;
text-align: left;
font-size: 13px;
line-height: calc(var(--user-content-height- * 35%));
}
}
}
</style>

10
src/views/marketing/agent/agent/template/edit.vue
View File

@ -276,7 +276,7 @@
</el-drawer>
<!------ 公共内容 ----------------------------------------------------->
<!--用户选择-->
<el-dialog title="负责人选择" :visible.sync="userSelectVisible" width="80%" :before-close="closeStaff" :append-to-body="true">
<el-dialog :title="userSelectTitle" :visible.sync="userSelectVisible" width="80%" :before-close="closeStaff" :append-to-body="true">
<el-card class="box-card">
<!--顶部搜索栏-->
<div slot="header" class="clearfix">
@ -435,6 +435,7 @@ export default {
children_list: {},
children_uid_list: {},
// 用户选择弹框
userSelectTitle: '用户选择',
userSelectVisible: false,
userListLoading: true,
userTableFrom: {
@ -508,6 +509,9 @@ export default {
case 10:
this.page_title = '总部内勤信息编辑';
break;
case 11:
this.page_title = '烟酒馆信息编辑';
break;
}
},
immediate: true
@ -603,8 +607,8 @@ export default {
pid: this.info.id || 0,
agent_type: this.create_role_type,
agent_stock: 0,
contact_name: '',
contact_phone: '',
contact_name: item.real_name || item.nickname,
contact_phone: item.phone || '',
province_id: 0,
city_id: 0,
area_id: 0,