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

<template>
  <div class="operation pad-24">
    <el-form class="operationForm" ref="OperationRef" :model="form" label-width="70">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="业务员" class="formItem">
            <el-input v-model="form.salesman" placeholder="输入姓名、手机号、工号查找" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="归属机构" class="formItem">
            <el-cascader clearable v-model="form.deptId" style="width: 100%" :options="options" :props="cascaderProps"
              @change="organizationChange" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型" class="formItem">
            <el-select clearable v-model="form.typeAttr">
              <el-option key="1" value="6" label="个代"></el-option>
              <el-option key="2" value="7" label="渠道"></el-option>
              <el-option key="3" value="5" label="团队"></el-option>
              <el-option key="4" value="8" label="电销组"></el-option>
              <!--              <el-option key="1" value="1" label="前线人员"></el-option>
              <el-option key="2" value="2" label="后线人员"></el-option>
              <el-option key="3" value="3" label="合伙人"></el-option>
              <el-option key="4" value="4" label="工作室管理员"></el-option>
              <el-option key="5" value="5" label="团队"></el-option>
              <el-option key="6" value="6" label="个代"></el-option>
              <el-option key="7" value="7" label="电销"></el-option>
              <el-option key="8" value="8" label="渠道"></el-option>-->
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="所属" class="formItem">
            <el-input clearable v-model="form.deptName" placeholder="渠道、团队、电销组名称查找"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="人员状态" class="formItem">
            <el-select clearable v-model="form.status">
              <el-option key="0" value="0" label="未认证"></el-option>
              <el-option key="1" value="1" label="实名待认证"></el-option>
              <el-option key="2" value="2" label="实名认证失败"></el-option>
              <el-option key="3" value="3" label="待入职"></el-option>
              <el-option key="4" value="4" label="入司待审核"></el-option>
              <el-option key="5" value="5" label="入司审核失败"></el-option>
              <el-option key="6" value="6" label="已入职"></el-option>
              <el-option key="7" value="7" label="离职待审核"></el-option>
              <el-option key="8" value="8" label="离职"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="账号状态" class="formItem">
            <el-select clearable v-model="form.isEnable">
              <el-option key="0" value="0" label="启用"></el-option>
              <el-option key="1" value="1" label="禁用"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="管理人" class="formItem">
            <el-input clearable v-model="form.leaderId" placeholder="管理人姓名、工号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16" class="span-justify">
          <el-button class="radius-2px" type="primary" @click="search()">查询</el-button>
          <el-button class="radius-2px" plain @click="reset()">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="8" style="margin: 20px 0" flex>
      <span class="flex col-210 m-r-8 bg-F9">
        <el-checkbox class="p-w-12" @change="selectAll" v-model="selectAllValue"></el-checkbox>&nbsp;
        <el-select class="select-all width-100" placeholder="全选" v-model="selectType" @change="selectTypeChange">
          <el-option key="all" value="all" :label="`选中所有数据${total}条`"></el-option>
          <el-option key="cur" value="cur" label="选中本页数据"></el-option>
        </el-select>
      </span>
      <div class="col-108 m-r-8">
        <el-button class="radius-2px width-100" type="primary" icon="plus" @click="addNumber">添加成员</el-button>
      </div>
      <span class="col-108 m-r-8">
        <el-dropdown class="width-100" trigger="click" placement="bottom" @command="dropdownCommand">
          <el-button class="radius-2px width-100">
            批量管理&nbsp;&nbsp;<el-icon>
              <ArrowDown />
            </el-icon>
          </el-button>
          <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-menu>
          </template>
        </el-dropdown>
      </span>
    </el-row>
    <el-table :data="tableData" ref="operationListRef" height="536" @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="workNumber" width="200"></el-table-column>
      <el-table-column label="类型" prop="typeAttr" width="100">
        <template #default="scope">
          <span>{{ typeMatch(scope.row.typeAttr) }}</span>
        </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">
          {{ scope.row.status == '0' ? '未认证' : 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">
        <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-item command="添加银行卡">添加银行卡</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; justify-content: flex-end; 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-dialog v-model="dialogShow" :title="title" width="1000">
      <addOperation ref="AddOperationRef" @closeDialog="closeAddOperation"></addOperation>
    </el-dialog>
    <el-dialog v-model="bankCardDialogShow" title="添加银行卡" width="500">
      <addCard @closeDialog="closeAddBankCard" :userInfo="addName"></addCard>
    </el-dialog>
    <el-dialog v-model="allocationShow" title="分配管理人" width="800">
      <allocation ref="AllocationRef" @closeDialog="closeAllocation"></allocation>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import addOperation from './modules/addOperation.vue'
import addCard from './modules/addCard.vue'
import allocation from './modules/allocation.vue'
import setDept from "@/components/DialogSetDeptLeader/index.vue"
import type { OperationSearch, OperationIsEnable } from '@/api/modules/operation.ts'
import api from "@/api";
import { ElMessageBox, ElMessage, TableInstance } from 'element-plus'
import type { TabBarInstance } from 'element-plus'
import Allocation from "@/views/operationManagement/modules/allocation.vue";

let myRouter = useRouter()

const operationListRef = ref<TableInstance>()
const AddOperationRef = ref(null)
const AllocationRef = ref(null)

interface TableDataProps {
  name: string,
  mobile: string,
  id: string,
  typeAttr: string,
  deptName: string,
  userId: string,
  status: number,
  isEnable: number,
  leaderName: string,
  leaderId: string,
  referrerName: string,
  referrerId: string
}

const organizationChange = (e) => {
  form.value.deptId = e[e.length - 1]
}
// 人员类型匹配
const typeMatch = (typeAttr: string) => {
  const map: any = {
    '6': '个代',
    '7': '渠道',
    '5': '团队',
    '8': '电销组',
    '3': '合伙人',
  }
  return typeAttr?.split(',')
    .map((typeId: any) => map[typeId] || typeId)
    .join(',') || '未知'
}
// 查询条件
let form = ref<OperationSearch>({
  salesman: '',
  deptId: '',
  typeAttr: '',
  deptName: '',
  status: '',
  isEnable: '',
  leaderId: ''
})
let options = ref([])
const cascaderProps = {
  value: 'id',
  label: 'name',
  children: 'children',
  checkStrictly: true,
}
// 获取机构数据
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 init = () => {
  api.operationApi.operationList({
    pages: currentPage.value,
    size: pageSize.value,
    isMember: 2,
    ...form.value
  }).then(res => {
    if (res?.code == 200) {
      tableData.value = res.data.records
      total.value = res.data.total
    } else {
      ElMessage({
        message: res?.msg,
        type: 'error'
      })
    }
  })
}
// 删除
const operationDel = (id: string[]) => {
  api.operationApi.operationDelete({
    ids: id,
    getAll: selectType.value == 'all' ? 1 : 0
  }).then(res => {
    if (res?.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      init()
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
const operationDelList = (id: string[]) => {
  api.operationApi.operationDelete({
    ids: id,
    getAll: 0
  }).then(res => {
    if (res?.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      init()
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
// 启用/禁用
const operationIsEnable = (data: OperationIsEnable) => {
  api.operationApi.operationIsEnable(data).then(res => {
    if (res?.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      init()
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
// 搜索
const search = () => {
  init();
}
// 重置
const reset = () => {
  form.value = {
    salesman: '',
    deptId: '',
    typeAttr: '',
    deptName: '',
    status: '',
    isEnable: '',
    leaderId: ''
  }
  currentPage.value = 1
  pageSize.value = 10
  init()
}
// 选中的数据
let selectedList = ref<TableDataProps[]>([])
// 全选的类型
let selectType = ref('')
// 外部全选是否勾选
let selectAllValue = ref(false)
// 外部的全选
const selectAll = (type: boolean) => {
  if (type) {
    if (selectType.value) {
      tableData.value.forEach((item: TableDataProps) => {
        operationListRef.value!.toggleRowSelection(item, true)
      })
      if (selectType.value == 'cur') {
        selectedList.value = tableData.value
      } else {
        selectedList.value = []
      }
    }
  } else {
    tableData.value.forEach((item: TableDataProps) => {
      operationListRef.value!.toggleRowSelection(item, false)
    })
    selectType.value = ''
    selectedList.value = []
  }
}
// 表格组件中的勾选
const handleSelectionChange = (row: any) => {
  selectedList.value = row
}
// 全选类型改变
const selectTypeChange = (type) => {
  selectAllValue.value = true
  tableData.value.forEach((item: TableDataProps) => {
    operationListRef.value!.toggleRowSelection(item, true)
  })
  if (type == 'cur') {
    selectedList.value = tableData.value
  } else {
    selectedList.value = []
  }
}
// 批量管理
const dropdownCommand = (e) => {
  switch (e) {
    case '删除':
      ElMessageBox({
        title: '删除业务员',
        message: '确定要删除该业务员吗？',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then((action) => {
        if (action === 'confirm') {
          let ids = []
          if (tableData.value.length > 0) {
            tableData.value.forEach(item => {
              ids.push(item.id)
            })
          } else {
            if (selectType == 'cur') {
              ElMessage({
                message: '请选择需要操作的数据',
                type: 'warning'
              })
              return
            }
          }
          operationDelList(ids)
        }
      }).catch((action) => {

      })
      break;
    case '禁用':
      ElMessageBox({
        title: '禁用业务员',
        message: '确定要禁用该业务员吗？',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then((action) => {
        if (action === 'confirm') {
          let ids = []
          if (selectedList.value.length > 0) {
            selectedList.value.forEach(item => {
              ids.push(item.id)
            })
          } else {
            if (selectType == 'cur') {
              ElMessage({
                message: '请选择需要操作的数据',
                type: 'warning'
              })
              return
            }
          }
          let data = {
            ids: ids,
            isEnable: 1,
            getAll: selectType.value == 'all' ? 1 : 0
          }
          operationIsEnable(data)
        }
      }).catch((action) => {

      })
      break;
    case '启用':
      ElMessageBox({
        title: '启用业务员',
        message: '确定要启用该业务员吗？',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then((action) => {
        if (action === 'confirm') {
          let ids = []
          if (selectedList.value.length > 0) {
            selectedList.value.forEach(item => {
              ids.push(item.id)
            })
          } else {
            if (selectType == 'cur') {
              ElMessage({
                message: '请选择需要操作的数据',
                type: 'warning'
              })
              return
            }
          }
          let data = {
            ids: ids,
            isEnable: 0,
            getAll: selectType.value == 'all' ? 1 : 0
          }
          operationIsEnable(data)
        }
      }).catch((action) => {

      })
      break;
    // case '分配管理人':
    //   allocationShow.value = true
    //
    //   break;
  }
}
// 列表数据
let tableData = ref<TableDataProps[]>([])

// 分页数据
// 页码
let currentPage = ref(1)
// 单页数量
let pageSize = ref(10)
// 总数
let total = ref(0)
// 单页数量变化
const handleSizeChange = (size) => {
  pageSize.value = size
  init()
}
// 页码变化
const handleCurrentChange = (page) => {
  currentPage.value = page
  init()
}

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

// 添加银行卡弹框
let addName = ref({
  userJzgInfoId: '',
  name: '',
})
let bankCardDialogShow = ref(false)

// 更多
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') {
          let ids = [scope.row.id]
          operationDel(ids)
        }
      }).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: selectType.value == 'all' ? 1 : 0
          }
          operationIsEnable(data)
        }
      }).catch((action) => {

      })
      // if(scope.row.isEnable == '0') {
      //
      // } else {
      //   ElMessage({
      //     message: '该业务员已是禁用状态！',
      //     type: 'warning'
      //   })
      // }
      break;
    case '启用':
      // if(scope.row.isEnable == '1') {
      //
      // } else {
      //   ElMessage({
      //     message: '该业务员已是启用状态！',
      //     type: 'warning'
      //   })
      // }
      ElMessageBox({
        title: '启用业务员',
        message: '确定要启用该业务员吗？',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then((action) => {
        if (action === 'confirm') {
          let data = {
            ids: [scope.row.id],
            isEnable: 0,
            getAll: selectType.value == 'all' ? 1 : 0
          }
          operationIsEnable(data)
        }
      }).catch((action) => {

      })
      break;
    case '添加银行卡':
      addName.value = {
        userJzgInfoId: scope.row.id,
        name: scope.row.name,
      }
      bankCardDialogShow.value = true
      break;
    case '分配管理人':
      allocationShow.value = true
      nextTick(() => {
        AllocationRef.value.initCheckedKeys(scope.row.deptId, selectType.value, [scope.row.id], scope.row.leaderId)
      })
      break;
  }
}
// 添加业务员
const addNumber = () => {
  dialogShow.value = true
  title.value = '添加'
  nextTick(() => {
    AddOperationRef.value.initAddData()
  })
}
// 添加/编辑业务员弹框
let dialogShow = ref(false)
// 关闭新增弹框
const closeAddOperation = (text: string) => {
  if (text == '确定') {
    init()
  }
  dialogShow.value = false
}
// 关闭添加银行卡弹框
const closeAddBankCard = (type: string) => {
  bankCardDialogShow.value = false
}
// 添加/编辑业务员弹框标题
let title = ref('添加')

// 分配管理人
let allocationShow = ref(false)
const closeAllocation = (type: boolean) => {
  allocationShow.value = type
}

onMounted(() => {
  init()
  institutionList()
})

</script>

<style scoped lang="scss">
@use "@/assets/styles/common/style.scss";

.operation {
  margin: 0 20px;
  background: white;

  .operationForm {
    margin: 20px 0;

    .span-justify {
      display: flex;
      justify-content: flex-end;
    }
  }

  :deep(.select-all .el-select__wrapper) {
    box-shadow: none;
    background: none;
  }
}
</style>