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></el-input>
      <el-button class="btn" link type="primary" @click="handleSearch">搜索</el-button>
    </div>
    <div class="salesman">
      <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>{{ 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 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'])

let searchValue = ref('')
let list = ref([])
let newList = ref([])
const handleSearch = () => {
  newList.value = list.value.filter(a => a.name.includes(searchValue.value))
}

// 选择
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 = () => {
  api.operationApi.operationList({
    isMember: 2,
  }).then((res: any) => {
    if(res.code == 200) {
      if(res.data.records) {
        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%;
    position: relative;
    .btn{
      position: absolute;
      top: 6px;
      right: 10px;
    }
  }
  .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: 60px;
        }
      }
      &:hover{
        background: #F4FAFF;
        border-radius: 4px;
      }
    }
    .active{
      background: #F4FAFF;
      border-radius: 4px;
    }
  }
  .footer{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>