|
@@ -1,11 +1,360 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div>telemarketing</div>
|
|
|
|
|
|
|
+ <div class="team">
|
|
|
|
|
+ <el-row :gutter="20" style="width: 100%; overflow:hidden;">
|
|
|
|
|
+ <el-col :span="4">
|
|
|
|
|
+ <div class="teamTree">
|
|
|
|
|
+ <el-input class="search-input" v-model="treeValue" placeholder="电销组名称查找" prefix-icon="Search"></el-input>
|
|
|
|
|
+ <div class="custom-tree-node" v-for="item in teamData" :key="item.id">
|
|
|
|
|
+ <span class="custom-tree-node-label">{{ item.name }}</span>
|
|
|
|
|
+ <el-dropdown class="custom-tree-node-more" @command="treeNodeCommend(item, $event)">
|
|
|
|
|
+ <el-icon><MoreFilled /></el-icon>
|
|
|
|
|
+ <template #dropdown>
|
|
|
|
|
+ <el-dropdown-menu>
|
|
|
|
|
+ <el-dropdown-item command="编辑">编辑</el-dropdown-item>
|
|
|
|
|
+ <el-dropdown-item command="删除">删除</el-dropdown-item>
|
|
|
|
|
+ </el-dropdown-menu>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-dropdown>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <el-button class="add-btn" icon="plus" @click="addTeamShow = true">添加电销组</el-button>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="20">
|
|
|
|
|
+ <el-row :gutter="20">
|
|
|
|
|
+ <el-col :span="22" class="info">
|
|
|
|
|
+ <h3>电销组名称</h3>
|
|
|
|
|
+ <p>所属机构: 机构名称</p>
|
|
|
|
|
+ <p>管理人: 管理人姓名-管理人工号</p>
|
|
|
|
|
+ <p>描述:</p>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="2" class="btn">
|
|
|
|
|
+ <el-button plain @click="setPeople">设置负责人</el-button>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ <el-input style="width: 300px; margin: 10px 0" v-model="searchValue" prefix-icon="Search" placeholder="输入姓名,手机号,工号查找" ></el-input>
|
|
|
|
|
+ <el-table
|
|
|
|
|
+ :data="tableData"
|
|
|
|
|
+ ref="operationListRef"
|
|
|
|
|
+ height="530"
|
|
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-table-column type="selection" width="55"></el-table-column>
|
|
|
|
|
+ <el-table-column label="姓名" prop="name" width="80"></el-table-column>
|
|
|
|
|
+ <el-table-column label="手机号" prop="mobile" width="150"></el-table-column>
|
|
|
|
|
+ <el-table-column label="工号" prop="userId" width="200"></el-table-column>
|
|
|
|
|
+ <el-table-column label="类型" prop="typeAttr" width="100"></el-table-column>
|
|
|
|
|
+ <el-table-column label="归属" prop="deptName" width="200"></el-table-column>
|
|
|
|
|
+ <el-table-column label="所属机构" prop="deptName" width="200"></el-table-column>
|
|
|
|
|
+ <el-table-column label="人员状态" prop="status" width="150">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ {{ scope.row.status == '1'?'前线人员':scope.row.status == '2'?'后线人员':scope.row.status == '3'?'合伙人':scope.row.status == '4'?'工作室管理员':scope.row.status == '5'?'团队长':scope.row.status == '6'?'个代':scope.row.status == '7'?'电销':scope.row.status == '8'?'渠道': '--' }}
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="账号状态" prop="isEnable" width="150"></el-table-column>
|
|
|
|
|
+ <el-table-column label="管理人" prop="leaderName" width="150"></el-table-column>
|
|
|
|
|
+ <el-table-column label="管理人工号" prop="leaderId" width="200"></el-table-column>
|
|
|
|
|
+ <el-table-column label="推荐人" prop="referrerName" width="150"></el-table-column>
|
|
|
|
|
+ <el-table-column label="推荐人工号" prop="referrerId" width="200"></el-table-column>
|
|
|
|
|
+ <el-table-column fixed="right" label="操作" width="120">
|
|
|
|
|
+ <template #default="scope">
|
|
|
|
|
+ <div style="display: flex; align-items: center; justify-content: space-between">
|
|
|
|
|
+ <a style="color: #409EFF; cursor: pointer" @click="showDetail(scope)">详情</a>
|
|
|
|
|
+ <el-dropdown placement="bottom" trigger="click" @command="tableDataCommand(scope, $event)">
|
|
|
|
|
+ <a style="color: #409EFF; cursor: pointer">更多</a>
|
|
|
|
|
+ <template #dropdown>
|
|
|
|
|
+ <el-dropdown-menu>
|
|
|
|
|
+ <el-dropdown-item command="编辑">编辑</el-dropdown-item>
|
|
|
|
|
+ <el-dropdown-item command="启用">启用</el-dropdown-item>
|
|
|
|
|
+ <el-dropdown-item command="禁用">禁用</el-dropdown-item>
|
|
|
|
|
+ <el-dropdown-item command="删除">删除</el-dropdown-item>
|
|
|
|
|
+ <el-dropdown-item command="分配管理人">分配管理人</el-dropdown-item>
|
|
|
|
|
+ </el-dropdown-menu>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-dropdown>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+ <div style="display: flex; justify-content: center; margin-top: 15px">
|
|
|
|
|
+ <el-pagination
|
|
|
|
|
+ v-model:current-page="currentPage"
|
|
|
|
|
+ v-model:page-size="pageSize"
|
|
|
|
|
+ :page-sizes="[10, 20, 30, 40]"
|
|
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
+ :total="total"
|
|
|
|
|
+ @size-change="handleSizeChange"
|
|
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ <el-dialog
|
|
|
|
|
+ v-model="dialogShow"
|
|
|
|
|
+ :title="title"
|
|
|
|
|
+ width="1000"
|
|
|
|
|
+ >
|
|
|
|
|
+ <addOperation @closeDialog="closeAddOperation" :options="options"></addOperation>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ <el-dialog
|
|
|
|
|
+ v-model="addTeamShow"
|
|
|
|
|
+ title="添加"
|
|
|
|
|
+ width="800"
|
|
|
|
|
+ >
|
|
|
|
|
+ <addTeam @closeDialog="closeAddTeamDialog" :editData="editItemData"></addTeam>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ <el-dialog
|
|
|
|
|
+ v-model="allocationShow"
|
|
|
|
|
+ title="分配管理人"
|
|
|
|
|
+ width="800"
|
|
|
|
|
+ >
|
|
|
|
|
+ <allocation></allocation>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ </div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
-<script setup>
|
|
|
|
|
|
|
+<script setup lang="ts">
|
|
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
|
|
+import {ElMessageBox, ElMessage, TableInstance} from 'element-plus'
|
|
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
|
|
+import api from "@/api";
|
|
|
|
|
+import addOperation from './modules/addOperation.vue'
|
|
|
|
|
+import allocation from './modules/allocation.vue'
|
|
|
|
|
+import addTeam from './modules/addTeam.vue'
|
|
|
|
|
+import Allocation from "@/views/operationManagement/modules/allocation.vue";
|
|
|
|
|
+import {initial} from "lodash-es";
|
|
|
|
|
+import team from "@/api/modules/team.ts";
|
|
|
|
|
|
|
|
-</script>
|
|
|
|
|
|
|
+let myRouter = useRouter()
|
|
|
|
|
+
|
|
|
|
|
+// 机构数据
|
|
|
|
|
+let options = ref([])
|
|
|
|
|
+// 获取机构数据
|
|
|
|
|
+const institutionList = () => {
|
|
|
|
|
+ api.institutionApi.institutionList({ name: '', system: '' }).then(res => {
|
|
|
|
|
+ if(res?.code == 200) {
|
|
|
|
|
+ options.value = res.data
|
|
|
|
|
+ } else {
|
|
|
|
|
+ ElMessage({
|
|
|
|
|
+ message: res.msg,
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 电销组
|
|
|
|
|
+let treeValue = ref('')
|
|
|
|
|
+let teamData = ref([])
|
|
|
|
|
+let addTeamShow = ref(false)
|
|
|
|
|
+let editItemData = ref(null)
|
|
|
|
|
+const initTeam = () => {
|
|
|
|
|
+ api.teamApi.teamList({}).then(res => {
|
|
|
|
|
+ if(res.code == 200) {
|
|
|
|
|
+ teamData.value = res.data
|
|
|
|
|
+ } else {
|
|
|
|
|
+ ElMessage({
|
|
|
|
|
+ message: res.msg,
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+const treeNodeCommend = (item, e) => {
|
|
|
|
|
+ switch (e) {
|
|
|
|
|
+ case '编辑':
|
|
|
|
|
+ addTeamShow.value = true
|
|
|
|
|
+ editItemData.value = item
|
|
|
|
|
+ break;
|
|
|
|
|
+ case '删除':
|
|
|
|
|
+ ElMessageBox({
|
|
|
|
|
+ title: '删除电销组',
|
|
|
|
|
+ message: '确定要删除该电销组吗?',
|
|
|
|
|
+ type: 'warning',
|
|
|
|
|
+ showCancelButton: true,
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ }).then(( action ) => {
|
|
|
|
|
+ if(action === 'confirm') {
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(( action ) => {
|
|
|
|
|
+
|
|
|
|
|
+ })
|
|
|
|
|
+ break;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+const closeAddTeamDialog = (type) => {
|
|
|
|
|
+ addTeamShow.value = false
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 分页
|
|
|
|
|
+let currentPage = ref(1)
|
|
|
|
|
+let pageSize = ref(10)
|
|
|
|
|
+let total = ref(0)
|
|
|
|
|
+const handleSizeChange = (size) => {
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+const handleCurrentChange = (page) => {
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 搜索字段
|
|
|
|
|
+let searchValue = ref('')
|
|
|
|
|
+// 列表数据
|
|
|
|
|
+let tableData = ref([
|
|
|
|
|
+ {name: 1}
|
|
|
|
|
+])
|
|
|
|
|
+// 编辑弹框
|
|
|
|
|
+let dialogShow = ref(false)
|
|
|
|
|
+// 编辑弹框标题
|
|
|
|
|
+let title = ref('编辑')
|
|
|
|
|
+// 表格组件中的勾选
|
|
|
|
|
+const handleSelectionChange = (row) => {
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+// 详情
|
|
|
|
|
+const showDetail = (scope) => {
|
|
|
|
|
+ myRouter.push({
|
|
|
|
|
+ path: '/operationDetail',
|
|
|
|
|
+ query: {
|
|
|
|
|
+ id: scope.row.id
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
-<style scoped>
|
|
|
|
|
|
|
+// 分配管理人
|
|
|
|
|
+let allocationShow = ref(false)
|
|
|
|
|
+
|
|
|
|
|
+// 设置负责人
|
|
|
|
|
+const setPeople = () => {
|
|
|
|
|
+ allocationShow.value = true
|
|
|
|
|
+}
|
|
|
|
|
+// 更多
|
|
|
|
|
+const tableDataCommand = (scope, e) => {
|
|
|
|
|
+ switch (e) {
|
|
|
|
|
+ case '编辑':
|
|
|
|
|
+ dialogShow.value = true
|
|
|
|
|
+ title.value = '编辑'
|
|
|
|
|
+ break;
|
|
|
|
|
+ case '删除':
|
|
|
|
|
+ ElMessageBox({
|
|
|
|
|
+ title: '删除业务员',
|
|
|
|
|
+ message: '确定要删除该业务员吗?',
|
|
|
|
|
+ type: 'warning',
|
|
|
|
|
+ showCancelButton: true,
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ }).then(( action ) => {
|
|
|
|
|
+ if(action === 'confirm') {
|
|
|
|
|
+ let ids = [scope.row.id]
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(( action ) => {
|
|
|
|
|
+
|
|
|
|
|
+ })
|
|
|
|
|
+ break;
|
|
|
|
|
+ case '禁用':
|
|
|
|
|
+ ElMessageBox({
|
|
|
|
|
+ title: '禁用业务员',
|
|
|
|
|
+ message: '确定要禁用该业务员吗?',
|
|
|
|
|
+ type: 'warning',
|
|
|
|
|
+ showCancelButton: true,
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ }).then(( action ) => {
|
|
|
|
|
+ if(action === 'confirm') {
|
|
|
|
|
+ let data = {
|
|
|
|
|
+ id: [scope.row.id],
|
|
|
|
|
+ isEnable: 0
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(( action ) => {
|
|
|
|
|
+
|
|
|
|
|
+ })
|
|
|
|
|
+ break;
|
|
|
|
|
+ case '启用':
|
|
|
|
|
+ ElMessageBox({
|
|
|
|
|
+ title: '启用业务员',
|
|
|
|
|
+ message: '确定要启用该业务员吗?',
|
|
|
|
|
+ type: 'warning',
|
|
|
|
|
+ showCancelButton: true,
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ }).then(( action ) => {
|
|
|
|
|
+ if(action === 'confirm'){
|
|
|
|
|
+ let data = {
|
|
|
|
|
+ id: [scope.row.id],
|
|
|
|
|
+ isEnable: 1
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(( action ) => {
|
|
|
|
|
+
|
|
|
|
|
+ })
|
|
|
|
|
+ break;
|
|
|
|
|
+ case '分配管理人':
|
|
|
|
|
+ allocationShow.value = true
|
|
|
|
|
+ break;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const closeAddOperation = (type: string) => {
|
|
|
|
|
+ dialogShow.value = false
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ institutionList()
|
|
|
|
|
+ initTeam()
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+</script>
|
|
|
|
|
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
|
+.team{
|
|
|
|
|
+ height: 770px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ .search-input{
|
|
|
|
|
+ padding: 10px 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .teamTree{
|
|
|
|
|
+ height: 700px;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ .custom-tree-node{
|
|
|
|
|
+ width: calc(100% - 40px);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 5px 10px;
|
|
|
|
|
+ margin: 5px auto;
|
|
|
|
|
+ &:hover{
|
|
|
|
|
+ background: rgba(0,0,0,.1);
|
|
|
|
|
+ }
|
|
|
|
|
+ .custom-tree-node-label{
|
|
|
|
|
+ width: 70%;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .add-btn{
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ }
|
|
|
|
|
+ .info{
|
|
|
|
|
+ h3{
|
|
|
|
|
+ margin: 10px 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ p{
|
|
|
|
|
+ margin: 6px 0;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: rgba(0,0,0,.7);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .btn{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+ align-items: flex-end;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|