tenant-Platform/src/views/additionalOrder/additional/modules/salesmanSelect.vue

<template>
  <div class="salesmanSelect">
    <div class="search">
      <el-input v-model="searchValue" prefix-icon="Search" placeholder="请输入负责人姓名，手机号查找" clearable @clear="initData" >
          <template #append>
              <el-button class="btn" link type="primary" @click="handleSearch">搜索</el-button>
          </template>
      </el-input>
    </div>
    <div class="salesman" v-loading="loading">
      <div class="salesman-item" :class="{'active': item.checked}" v-for="(item, index) in newList" @click="handleSelect(item, index)">
        <div class="content">
          <div class="name">
            <span class="">{{ item.name }}</span>
            <span>{{ item.mobile }}</span>
          </div>
          <div class="depart">
            {{ item.deptName }}
          </div>
        </div>
        <el-icon v-show="item.checked"><Check /></el-icon>
      </div>
    </div>
    <el-divider style="width: 100%"></el-divider>
    <div class="footer">
      <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import {ElMessage} from "element-plus";
import api from "@/api";

const emits = defineEmits(['close'])
const props = defineProps(['fromPage'])
const loading = ref(true)
let searchValue = ref('')
let list = ref([])
let newList = ref([])
const handleSearch = () => {
    initData()
}

// 选择
let checkedItem = ref(null)
const handleSelect = (item, index) => {
  let list = newList.value.filter(a => a.name != item.name)
  list.forEach(a => a.checked = false)
  item.checked = !item.checked
  checkedItem.value = item
}

// 取消
const handleCancel = () => {
  emits('close', checkedItem.value)
}
// 确定
const handleConfirm = () => {
  if(checkedItem.value) {
    emits('close', checkedItem.value)
  } else {
    ElMessage({
      message: '请选择业务员！',
      type: 'warning'
    })
  }
}

// 初始化
const initData = () => {
  loading.value = true
  api.operationApi.getBaojiaUserInfoList({
    isMember: 2,
    isEnable: 0,
    salesman:searchValue.value,
    fromPage:props.fromPage,
  }).then((res: any) => {
    if(res.code == 200) {
      if(res.data.records) {
      loading.value = false

        res.data.records.forEach(item => {
          item.checked = false
        })
      }
      list.value = res.data.records
      newList.value = list.value
    } else {
      ElMessage({
        message: res.msg,
        type: 'error'
      })
    }
  })
}

// 编辑回显
const initEditData = (data) => {

}

defineExpose({
  initEditData
})

onMounted(() => {
  initData()
})
</script>

<style scoped lang="scss">
.salesmanSelect{
  .search{
    width: 100%;
    .btn{
      padding: 0 20px;
    }
  }
  .salesman{
    max-height: 400px;
    overflow-y: auto;
    margin: 8px 0;
    .salesman-item{
      height: 64px;
      padding: 8px 12px;
      font-size: 14px;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 8px;
        span:nth-child(1) {
          font-size: 16px;
          color: black;
          width: 130px;
        }
      }
      &:hover{
        background: #F4FAFF;
        border-radius: 4px;
      }
    }
    .active{
      background: #F4FAFF;
      border-radius: 4px;
    }
  }
  .footer{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>