crm_front_v3/src/views/ficc_manage/signUp/components/addSignUpDialog.vue

<script setup>
import { ficcManageInterface } from "@/api/api.js";
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
const props = defineProps({
    // 活动Id
    ActivityId: {
      type: [Number, String],
      required: true,
    },
    // 弹窗是否显示
    isShow: {
      type: Boolean,
      required: true,
    },
    getSignUpList:{
        type:Function,
        default:()=>{}
    }
})
let dynamicItem = ref([{ name: "", isShow: false }]) // 新增列表
let companyList = ref([]) // 联想用户列表
// 新增报名窗口关闭
const emit = defineEmits(["closeDia"]);
function addDialogClose() {
    dynamicItem.value = [{ name: "", isShow: false }];
    companyList=[];
    emit("closeDia")
}
// 获取客户名称
async function getCompany(Keyword) {
    if (Keyword.includes(",")) return;
    if (!Keyword) return (companyList.value = []);
    try {
    const res = await ficcManageInterface.activitySignupUserList({ Keyword });
    if (res.Ret === 200) {
        companyList.value = res.Data
        ? res.Data.map((item) => {
            return {
                ...item,
                value: `${item.RealName},${item.Mobile},${item.CompanyName}`,
            };
            })
        : [];
    }
    } catch (err) {
        console.dir(err);
    }
}
async function callbackHandle(data, cb) {
    if(!data) return
    await getCompany(data);
    cb(companyList.value);
}
//联想选择后
function selectCompany(val, index) {
    companyList.value.forEach((item) => {
    if (item.value == val.name) {
        dynamicItem.value.splice(index, 1, {
            name: val.name,
            isShow: false,
            id: item.UserId,
        });
    }
    });
}
//失去焦点
function focusCompany(name) {
    if (name.length && companyList.value.length == 0) {
        dynamicItem.value.find((item) => item.name == name).isShow = true;
    } else {
        dynamicItem.value.find((item) => item.name == name).isShow = false;
    }
}
// 添加用户
function addItem() {
    dynamicItem.value.push({
        name: "",
        isShow: false,
    });
}
// 删除用户
function deleteItem(index) {
    dynamicItem.value.splice(index, 1);
}
// 确定提交报名
async function confirmPerson() {
    if (dynamicItem.value.some((item) => item.isShow))
    return ElMessage.error("姓名有误");
    // 对数组进行处理(去空去重,取出id)
    const UserIdList = dynamicItem.value
    .map((item) => item.id)
    .filter((item,index,arr) => {
        return item && arr.indexOf(item, 0) === index;
    })
    // 数组为空提示
    if (!UserIdList.length) return ElMessage.error("请至少选择一个");
    try {
    const res = await ficcManageInterface.activitySignupAddUser({
        ActivityId: props.ActivityId,
        UserIdList,
    });
    if (res.Ret === 200) {
        ElMessage.success("添加成功");
        props.getSignUpList()
        addDialogClose();
    }
    } catch (err) {
        console.dir(err);
    }
}

</script>
<template>
  <el-dialog
    :modal-append-to-body="false"
    :center="true"
    close-on-press-escape
    :close-on-click-modal="false"
    :model-value="isShow"
    @close="addDialogClose"
    title="新增线下报名"
    width="500px"
    class="add-signup-dialog"
  >
    <div class="inline" v-for="(item, index) in dynamicItem" :key="index">
      <div class="inline-content">
        <el-autocomplete
          class="inline-input"
          v-model.trim="item.name"
          :fetch-suggestions="callbackHandle"
          placeholder="请输入姓名"
          @select="selectCompany(item, index)"
          @blur="focusCompany(item.name)"
          :trigger-on-focus="false"
          clearable
        ></el-autocomplete>
        <img
          @click="deleteItem(index)"
          src="~@/assets/img/icons/delete-Item.png"
          :class="index == 0 ? 'defaultyi' : ''"
          alt=""
        />
      </div>
      <p v-if="item.isShow">
        系统中无此人，请先将其添加到对应公司的联系人列表下
      </p>
    </div>
    <div @click="addItem" class="add-box">
      <img :src="$icons.addblue" alt="" />
      <span>添加</span>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirmPerson">确定</el-button>
      <el-button @click="addDialogClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<style lang="scss">
.add-signup-dialog{
  .inline {
    margin-bottom: 20px;
    .inline-content{
      padding-right: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .inline-input{
        width: 392px;
        .el-input {
            width: 100%;
        }
      }
      img {
        width: 14px;
        height: 14px;
        cursor: pointer;
      }
      .defaultyi {
        display: none;
      }
    }
    p {
      padding-top: 5px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #ef5858;
      opacity: 1;
    }
  }
  .add-box {
    width: 80px;
    display: flex;
    align-items: center;
    color: #5882ef;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
  }
}
</style>