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="workNumber" width="200"></el-table-column>
          <el-table-column label="类型" prop="typeAttr" width="100">
            <template #default="scope">
              {{ typeAttrMap(scope.row.typeAttr) }}
            </template>
          </el-table-column>
          <el-table-column label="归属" prop="organizationName" 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">
              {{ statusMap(scope.row.status) }}
            </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-row :gutter="20">
        <el-col :span="12">
          <el-tree ref="treeRef" :data="options" :props="cascaderProps" @node-click="handleNodeClick" />
        </el-col>
        <el-col :span="12">
          <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="暂无数据" />
        </el-col>
      </el-row>
      <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 { 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 { 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)

// 机构数据
const cascaderProps = {
  value: 'id',
  label: 'name',
  children: 'children'
}
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'
      })
    }
  })
}
const handleNodeClick = (data) => {
  initList(teamData.value[0])
}
const statusMap = (value: any) => {
  const map = {
    "0": '未认证',
    "1": '认证中',
    "2": '认证失败',
    "3": '待入职',
    "4": '入司审核中',
    "5": '入司审核失败',
    "6": '已入职',
    "7": '离职待审核',
    "8": '离职',
  }
  return map[value]
}
const typeAttrMap=(value)=>{
  const map = {
    "1": '前线人员',
    "2": '后线人员',
    "3": '合伙人',
    "4": '工作是管理员',
    "5": '团队',
    "6": '个代',
    "7": '渠道',
    "8": '电销',
  }
  return map[value]
}
// 团队
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, scope.row.id)
      })
      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.userId]
          }).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 = {
            ids: [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 = {
            ids: [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, null, [scope.row.id], scope.row.leaderId)
      })
      break;
  }
}

const closeAddOperation = (type: string) => {
  dialogShow.value = false;
  initList(teamInfo.value)
}

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>