tenant-Platform/src/views/operationManagement/team.vue

<template>
  <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" @keyup.enter="initTeam"></el-input>
          <div class="custom-tree-node" v-for="item in teamData" :key="item.id" @click.stop="initList(item)">
            <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="addTeamDraw">添加团队</el-button>
      </el-col>
      <el-col :span="20">
        <el-row :gutter="20">
          <el-col :span="22" class="info">
            <h3>{{ teamInfo.name }}</h3>
            <p>所属机构： {{ teamInfo?.deptName }}</p>
            <p>管理人： {{ teamInfo?.managerName?`${teamInfo?.managerName}-`:'' }}{{ teamInfo?.managerId }}</p>
            <p>描述：{{ teamInfo?.describeInformation }}</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="输入姓名，手机号，工号查找" clearable @keyup.enter="initList(teamInfo)"></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">
            <template #default="scope">
              <div class="nameInfo">{{ scope.row.name }}<span v-show="scope.row.manager === '1'">负责人</span></div>
            </template>
          </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">
            <template #default="scope">
              {{ scope.row.typeAttr == '0'?'个代':scope.row.typeAttr == '1'?'渠道':scope.row.typeAttr == '2'?'团队':scope.row.typeAttr == '3'?'电销组': '' }}
            </template>
          </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 == '0'?'待认证':scope.row.status == '1'?'已认证':scope.row.status == '2'?'待提交资料':scope.row.status == '3'?'已入职':'' }}
            </template>
          </el-table-column>
          <el-table-column label="账号状态" prop="isEnable" width="150">
            <template #default="scope">
              {{ scope.row.isEnable == '1'?'禁用':scope.row.isEnable == '0'?'启用': '--' }}
            </template>
          </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>&nbsp;
                <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 ref="AddOperationRef" @closeDialog="closeAddOperation"></addOperation>
    </el-dialog>
    <el-dialog
      v-model="addTeamShow"
      title="添加"
      width="800"
    >
      <addTeam ref="AddTeamRef" @closeDialog="closeAddTeamDialog"></addTeam>
    </el-dialog>
    <el-dialog
      v-model="allocationShow"
      title="分配管理人"
      width="800"
    >
      <allocation ref="AllocationRef" @closeDialog="closeAllocation"></allocation>
    </el-dialog>
    <el-dialog
      v-model="peopleShow"
      title="设置负责人"
      width="800"
    >
      <el-radio-group v-if="tableData?.length>0" v-model="radioValue" class="allocation-radio">
        <el-radio v-for="item in tableData" :value="item.id" size="large">
          <template #default>
            <div>{{ item.name }}</div>
            <div>{{ item.id }}</div>
          </template>
        </el-radio>
      </el-radio-group>
      <el-empty v-else description="暂无数据" />
      <template #footer>
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<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";

let myRouter = useRouter()
const AddTeamRef = ref(null)
const AddOperationRef = ref(null)
const AllocationRef = ref(null)

// 机构数据
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)
const initTeam = () => {
  api.teamApi.teamList({
    param: treeValue.value,
    attribute: 1
  }).then(res => {
    if(res.code == 200) {
      teamData.value = res.data
      if(teamData.value) {
        initList(teamData.value[0])
      }
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 分页
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
const handleSizeChange = (size) => {
  pageSize.value = size
  initTeam()
}
const handleCurrentChange = (page) => {
  currentPage.value = page
  initTeam()
}
// 初始化列表
let teamInfo = ref({
  name: '',
  deptName: '',
  managerName: '',
  managerId: '',
  describeInformation: ''
})
const initList = (item) => {
  teamInfo.value = item
  api.teamApi.getTeamUser({
    id: item.id,
    name: searchValue.value,
    pages: currentPage.value,
    size: pageSize.value
  }).then(res => {
    if(res.code == 200) {
      tableData.value = res.data.records
      total.value = res.data.total
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
const treeNodeCommend = (item, e) => {
  switch (e) {
    case '编辑':
      addTeamShow.value = true
      nextTick(() => {
        AddTeamRef.value.initEdit(item, true, 1)
      })
      break;
    case '删除':
      ElMessageBox({
        title: '删除团队',
        message: '确定要删除该团队吗？',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(( action ) => {
        if(action === 'confirm') {
          api.teamApi.deleteById(item.id).then(res => {
            if(res.code == 200) {
              ElMessage({
                message: res.msg,
                type: 'success'
              })
              initTeam()
            } else {
              ElMessage({
                message: res.msg,
                type: 'warning'
              })
            }
          })
        }
      }).catch(( action ) => {

      })
      break;
  }
}
const addTeamDraw = () => {
  addTeamShow.value = true
  nextTick(() => {
    AddTeamRef.value.teamForm.attribute = 1
  })
}
const closeAddTeamDialog = (type) => {
  addTeamShow.value = false
  initTeam()
}

// 搜索字段
let searchValue = ref('')
// 列表数据
let tableData = ref([])
// 编辑弹框
let dialogShow = ref(false)
// 编辑弹框标题
let title = ref('编辑')
// 表格组件中的勾选
const handleSelectionChange = (row) => {

}
// 详情
const showDetail = (scope) => {
  myRouter.push({
    path: '/operationDetail',
    query: {
      id: scope.row.userId
    }
  })
}

// 分配管理人
let allocationShow = ref(false)

// 设置负责人
let peopleShow = ref(false)
let radioValue = ref('')
const setPeople = () => {
  peopleShow.value = true
  // pageSize.value = 99999
  initList(teamInfo.value)
}
const onCancel = () => {
  peopleShow.value = false
  radioValue.value = ''
}
const onConfirm = () => {
  if(!radioValue.value) {
    ElMessage({
      message: '请选择负责人',
      type: 'warning'
    })
    return
  }
  api.teamApi.setResponsiblePerson({
    id: teamInfo.value.id,
    managerId: radioValue.value
  }).then(res => {
    if(res.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      initList(teamInfo.value)
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
    peopleShow.value = false
  })
}
// 关闭设置负责人
const closeAllocation = (type: boolean) => {
  allocationShow.value = type
}
// 更多
const tableDataCommand = (scope, e) => {
  switch (e) {
    case '编辑':
      dialogShow.value = true
      nextTick(() => {
        AddOperationRef.value.initEditData(scope.row.userId)
      })
      title.value = '编辑'
      break;
    case '删除':
      ElMessageBox({
        title: '删除业务员',
        message: '确定要删除该业务员吗？',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(( action ) => {
        if(action === 'confirm') {
          api.teamApi.deleteAssociatedUsers({
            id: teamInfo.value.id,
            userIds: [scope.row.id]
          }).then(res => {
            if(res?.code == 200) {
              ElMessage({
                message: res.msg,
                type: 'success'
              })
              initList(teamInfo.value)
            } else {
              ElMessage({
                message: res.msg,
                type: 'warning'
              })
            }
          })
        }
      }).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,
            getAll: 0
          }
          api.operationApi.operationIsEnable(data).then(res => {
            if(res?.code == 200) {
              ElMessage({
                message: res.msg,
                type: 'success'
              })
              initList(teamInfo.value)
            } else {
              ElMessage({
                message: res.msg,
                type: 'warning'
              })
            }
          })
        }
      }).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,
            getAll: 0
          }
          api.operationApi.operationIsEnable(data).then(res => {
            if(res?.code == 200) {
              ElMessage({
                message: res.msg,
                type: 'success'
              })
              initList(teamInfo.value)
            } else {
              ElMessage({
                message: res.msg,
                type: 'warning'
              })
            }
          })
        }
      }).catch(( action ) => {

      })
      break;
    case '分配管理人':
      allocationShow.value = true
      nextTick(() => {
        AllocationRef.value.initCheckedKeys(scope.row.deptId, selectType.value, [scope.row.id])
      })
      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;
      cursor: pointer;
      &: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;
  }
  .nameInfo{
    display: flex;
    justify-content: center;
    align-content: center;
    span{
      background: #f0f0f0;
      padding: 2px 4px;
      border-radius: 2px;
    }
  }
}
</style>