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

<template>
  <div class="salesmanSelect">
    <div class="search">
      <el-input v-model="searchValue" prefix-icon="Search" @change="handleSearch" 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 flex items-center">
            {{ item.deptName }}
            <el-tag type="primary" size="small" class="ml-10px">{{ typeAttrList[item.typeAttr] }}</el-tag>
          </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 typeAttrList = ref({
  '5': '团队',
  '6': '个代',
  '7': '渠道',
  '8': '电销',
})

// 取消
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>