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

<template>
  <div class="operation">
    <el-form
      class="operationForm"
      ref="OperationRef"
      :model="form"
      label-width="auto"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="业务员" class="formItem">
            <el-input v-model="form.operation" placeholder="输入姓名、手机号、工号查找"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="归属机构" class="formItem">
            <el-cascader style="width: 100%" v-model="form.organization" :options="options" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型" class="formItem">
            <el-select v-model="form.type">
              <el-option key="1" value="type1"></el-option>
              <el-option key="2" value="type2"></el-option>
              <el-option key="3" value="type3"></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 v-model="form.belong" placeholder="渠道、团队、电销组名称查找"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="人员状态" class="formItem">
            <el-select v-model="form.staffState">
              <el-option key="1" value="type1"></el-option>
              <el-option key="2" value="type2"></el-option>
              <el-option key="3" value="type3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="账号状态" class="formItem">
            <el-select v-model="form.accountState">
              <el-option key="1" value="type1"></el-option>
              <el-option key="2" value="type2"></el-option>
              <el-option key="3" value="type3"></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 v-model="form.person" placeholder="管理人姓名、工号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="search()">查询</el-button>
          <el-button type="primary" plain @click="reset()">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="20" style="margin: 20px 0" flex>
      <el-col :span="3" style="display: flex">
        <el-checkbox @change="selectAll"></el-checkbox>&nbsp;
        <el-select class="select-all" placeholder="全选" v-model="selectType" style="width: 120px">
          <el-option key="all" value="选中所有数据"></el-option>
          <el-option key="cur" value="选中本页数据"></el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" icon="plus" @click="addNumber">添加成员</el-button>
      </el-col>
      <el-col :span="2">
        <el-dropdown trigger="click" placement="bottom" @command="dropdownCommand">
          <el-button>批量管理</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>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      height="460"
    >
      <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="" width="150"></el-table-column>
      <el-table-column label="工号" prop="" width="200"></el-table-column>
      <el-table-column label="类型" prop="" width="100"></el-table-column>
      <el-table-column label="归属" prop="" width="200"></el-table-column>
      <el-table-column label="所属机构" prop="" width="200"></el-table-column>
      <el-table-column label="人员状态" prop="" width="150"></el-table-column>
      <el-table-column label="账号状态" prop="" width="150"></el-table-column>
      <el-table-column label="管理人" prop="" width="150"></el-table-column>
      <el-table-column label="管理人工号" prop="" width="200"></el-table-column>
      <el-table-column label="推荐人" prop="" width="150"></el-table-column>
      <el-table-column label="推荐人工号" prop="" 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: 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="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      v-model="dialogShow"
      :title="title"
      width="1000"
    >
      <addOperation></addOperation>
      <template #footer>
        <div>
          <el-button plain @click="() => { dialogShow = false }">取消</el-button>
          <el-button type="primary">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="bankCardDialogShow"
      title="添加银行卡"
      width="500"
    >
      <addCard></addCard>
      <template #footer>
        <div>
          <el-button plain @click="() => { bankCardDialogShow = false }">取消</el-button>
          <el-button type="primary">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="allocationShow"
      title="分配管理人"
      width="800"
    >
      <allocation></allocation>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } 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 { ElMessageBox, ElMessage } from 'element-plus'
import Allocation from "@/views/operationManagement/modules/allocation.vue";

let muRouter = useRouter()

// 查询条件
let form = ref({
  operation: '',
  organization: [],
  type: '',
  belong: '',
  staffState: '',
  accountState: '',
  person: ''
})
let options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      }
    ]
  }
]
// 获取列表数据
const init = () => {

}
// 搜索
const search = () => {

}
// 重置
const reset = () => {
  form.value = {
    operation: '',
    organization: [],
    type: '',
    belong: '',
    staffState: '',
    accountState: '',
    person: ''
  }
}
// 外部的全选
const selectAll = () => {

}
// 全选的类型
let selectType = ref('')
// 批量管理
const dropdownCommand = (e) => {
  switch (e) {
    case '删除':
      ElMessageBox({
        title: '删除业务员',
        message: '确定要删除该业务员吗？',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(( action ) => {

      }).catch(( action ) => {

      })
      break;
    case '禁用':
      ElMessageBox({
        title: '禁用业务员',
        message: '确定要禁用该业务员吗？',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(( action ) => {

      }).catch(( action ) => {

      })
      break;
    case '启用':
      ElMessage({
        message: '启用成功！',
        type: 'success',
      })
      break;
    case '分配管理人':
      allocationShow.value = true
      break;
  }
}
// 列表数据
let tableData = ref([
  {
    name: 1
  }
])
// 分页数据
// 页码
let currentPage = ref(1)
// 单页数量
let pageSize = ref(10)
// 单页数量变化
const handleSizeChange = (size) => {
  pageSize.value = size
}
// 页码变化
const handleCurrentChange = (page) => {
  currentPage.value = page
}
// 详情
const showDetail = (scope) => {
  muRouter.push({
    path: '/operationDetail'
  })
}

// 添加银行卡弹框
let bankCardDialogShow = ref(false)

// 更多
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 ) => {

      }).catch(( action ) => {

      })
      break;
    case '禁用':
      ElMessageBox({
        title: '禁用业务员',
        message: '确定要禁用该业务员吗？',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(( action ) => {

      }).catch(( action ) => {

      })
      break;
    case '启用':
      ElMessage({
        message: '启用成功！',
        type: 'success',
      })
      break;
    case '添加银行卡':
      bankCardDialogShow.value = true
      break;
    case '分配管理人':
      allocationShow.value = true
      break;
  }
}
// 添加业务员
const addNumber = () => {
  dialogShow.value = true
  title.value = '添加'
}
// 添加/编辑业务员弹框
let dialogShow = ref(false)
// 添加/编辑业务员弹框标题
let title = ref('添加')

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

</script>

<style scoped lang="scss">
.operation{
  margin: 0 20px;
  .operationForm{
    margin: 20px 0;
  }
  .formItem{
    width: 350px;
  }
  :deep(.select-all .el-select__wrapper){
    box-shadow: none;
    background: none;
  }
}
</style>