crm_front_v3/src/views/rai_manage/components/apply/applyDialog.vue

<template>
  <div class="container-applydialog">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      center
      :visible.sync="addDialogVisible"
      :customClass="[isType && addDialogType !== '新增预约纪要' ? 'container-applydial' : 'container-custom']"
      :before-close="handleClose"
    >
      <div slot="title" style="display: flex; align-items: center">
        <img :src="$icons.add" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
        <span style="font-size: 16px">{{ addDialogType }}</span>
      </div>
      <div class="inline" v-for="(item, index) in dynamicItem" :key="index">
        <div class="inline-content">
          <el-autocomplete
            class="inline-input"
            v-model="item.name"
            :fetch-suggestions="callbackHandle"
            placeholder="请输入姓名"
            @input="getCompany(item.name)"
            @select="selectCompany(item, index)"
            @blur="focusCompany(item.name)"
            :trigger-on-focus="false"
            clearable
          ></el-autocomplete>
          <template v-if="selectionArr && selectionArr.length && selectionArr[0].ActivityTypeName == '公司调研电话会'">
            <div class="radio-content" v-if="selectionArr[0].IsResearchPoints != 1">
              <el-radio v-model="item.radio" label="1">预约外呼</el-radio>
              <el-radio v-model="item.radio" label="2" v-if="selectionArr[0].LimitPeopleNum > 0">自主拨入</el-radio>
            </div>
            <div style="margin: 0 20px" v-if="selectionArr[0].IsCanAppointmentMinutes > 0">
              <el-checkbox v-model="item.checked">同时预约纪要</el-checkbox>
            </div>
          </template>
          <template v-else>
            <div v-if="isType && addDialogType !== '新增预约纪要'" class="radio-content">
              <el-radio v-model="item.radio" label="1">预约外呼</el-radio>
              <el-radio v-model="item.radio" label="2">自主拨入</el-radio>
            </div>
            <div style="margin: 0 20px" v-if="isShowSummary && signUpAdd !== '易董' && signUpAdd !== '专项'">
              <el-checkbox v-model="item.checked">同时预约纪要</el-checkbox>
            </div>
          </template>
          <div style="width: 20px"><img @click="deleteItem(item, index)" src="~@/assets/img/icons/delete-Item.png" :class="index == 0 ? 'defaultyi' : ''" alt="" /></div>
        </div>
        <p v-if="item.isShow">系统中无此人，请先将其添加到对应公司的联系人列表下</p>
      </div>
      <div class="add-box">
        <img @click="addItem" :src="$icons.addblue" alt="" />
        <span @click="addItem">添加</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmPerson">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface, raiSpecial } from "@/api/api.js";
export default {
  name: "",
  components: {},
  props: {
    addDialogVisible: {
      type: Boolean,
      default: false,
    },
    dialogVisibleId: {
      type: Number,
    },
    selectList: {
      type: String,
    },
    signUpAdd: {
      type: String,
    },
    minimumSummation: {
      type: Number,
    },
    tabsPitchonType: {
      type: Number,
    },
    selectionArr: {
      type: Array,
      required: true,
      default: [],
    },
    addDialogType: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      dynamicItem: [{ name: "", isShow: false, radio: "1", checked: false }],
      companyList: [], //客户名称的数组
      timeout: null, //
      isShow: "",
      warningIsShow: false,
      userId: "",
      userTyepa: [],
    };
  },
  computed: {
    isType() {
      if (this.selectionArr.length > 0) {
        return this.selectionArr.some(
          (item) => item.ActivityTypeName == "公司调研电话会" || item.ActivityTypeName == "专家电话会" || item.ActivityTypeName == "分析师电话会" || item.IsYidongConduct == 1
        );
      }
    },
    isShowSummary() {
      return (this.addDialogType == "新增外呼人员" || this.addDialogType == "新增报名") && !this.selectionArr.some((item) => item.ActivityTypeName == "公司调研电话会" && item.LimitPeopleNum !== 0);
    },
  },
  created() {},
  mounted() {},
  methods: {
    async confirmPerson() {
      let addSignuUser = this.addSignuUser();
      this.measurement();
      const is = this.dynamicItem.some((item) => item.isShow == true);
      if (is) return this.$message.error("姓名有误");
      if (!this.userId) return this.$message.error("请输入姓名！");
      const res =
        (this.isType && this.addDialogType != "新增预约纪要") || this.signUpAdd == "报名" || this.signUpAdd == "易董" || this.signUpAdd == "c类"
          ? await raiInterface.activitySignupAddSignuUser({
              ActivityIds: this.selectList,
              List: addSignuUser,
            })
          : this.signUpAdd == "专项"
          ? await raiSpecial.addUserSpecial({
              ActivityIds: this.selectList,
              List: addSignuUser,
            })
          : this.addDialogType == "新增预约纪要"
          ? await raiInterface.activityAddSummaryUser({
              ActivityIds: this.selectList,
              UserIds: this.userId,
            })
          : await raiInterface.activitySignupAddUser({
              ActivityIds: this.selectList,
              List: addSignuUser,
            });

      if (res.Ret === 200) {
        this.$message.success("添加成功");
        this.$parent.getsDataList();
      }
      this.userId = "";
      this.userTyep = [];
      (this.dynamicItem = [{ name: "", isShow: false, radio: "1", checked: false }]), this.$emit("update:addDialogVisible", false);
    },
    addSignuUser() {
      let arr = [];
      this.dynamicItem.forEach((item) => {
        if (item.name) {
          arr.push({
            IsAppointment: item.checked ? 1 : 0,
            UserId: item.id,
            SignupType: this.isType ? +item.radio : 0,
          });
        }
      });
      return arr;
    },
    // 添加数组
    addItem() {
      if (this.signUpAdd == "报名" && this.minimumSummation == this.dynamicItem.length) return this.$message.warning(`所选活动最多还能添加${this.minimumSummation}人`);
      this.dynamicItem.push({
        name: "",
        isShow: false,
        radio: "1",
        checked: false,
      });
    },
    // 删除数组的某一项
    deleteItem(item, index) {
      this.dynamicItem.splice(index, 1);
    },
    /* 获取客户名称 */
    getCompany(query) {
      if (query.includes(",")) return;
      if (query) {
        raiInterface
          .activitySignupUserList({
            KeyWord: query,
          })
          .then((res) => {
            if (res.Ret === 200) {
              let arr = [];
              res.Data.List &&
                res.Data.List.forEach((item) => {
                  let obj = {
                    ...item,
                    value: item.RealName + " , " + item.Mobile + " , " + item.CompanyName,
                  };
                  arr.push(obj);
                });
              this.companyList = arr;
            }
          });
      } else {
        this.companyList = [];
      }
    },
    callbackHandle(data, cb) {
      let results = data
        ? this.companyList.filter((item) => {
            return item.value.includes(data);
          })
        : this.companyList;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 300);
      if (results.length == 0) {
        this.warningIsShow = true;
      } else {
        this.warningIsShow = false;
      }
    },
    //退出弹框
    handleClose() {
      this.userId = "";
      this.userTyep = [];
      this.dynamicItem = [{ name: "", isShow: false, radio: "1", checked: false }];
      this.$parent.addDialogVisible = false;
    },
    //失去焦点
    focusCompany(name) {
      if ((name.length && this.companyList.length == 0) || this.warningIsShow) {
        this.dynamicItem.forEach((item) => {
          if (item.name == name) {
            item.isShow = true;
          }
        });
      } else {
        this.dynamicItem.forEach((item) => {
          if (item.name == name) {
            item.isShow = false;
          }
        });
      }
    },
    //联想选择后

    selectCompany(val, index) {
      this.companyList.forEach((item) => {
        if (item.value == val.name) {
          this.dynamicItem.splice(index, 1, { name: val.name, isShow: false, radio: val.radio, id: item.UserId, checked: this.dynamicItem[index].checked });
        }
      });
    },
    //最后的确定 遍历
    measurement() {
      const arr = [];
      const userIds = [];
      this.dynamicItem.forEach((item) => {
        if (item.name) {
          let obj = {
            Uid: item.id,
            Type: item.radio,
          };
          userIds.push(item.id);
          arr.push(obj);
        }
      });
      this.userId = userIds.length ? userIds.join(",") : "";
      this.userTyep = JSON.stringify(arr);
    },
  },
};
</script>
<style lang="scss">
.container-applydialog {
  .container-custom {
    width: 700px;
  }
  .container-applydial {
    width: 900px;
  }
  .inline {
    margin-bottom: 20px;
    width: 100%;
    .inline-input {
      width: 392px !important;
    }
    p {
      padding-top: 5px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #ef5858;
      opacity: 1;
    }
  }
  .inline-content {
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 14px;
      height: 14px;
    }
  }
  .defaultyi {
    display: none !important;
  }
  .el-input {
    width: 392px !important;
  }
  .add-box {
    display: flex;
    align-items: center;
    color: #5882ef;
    img {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
  }
  .radio-content {
    display: flex;
    justify-content: space-between;
    margin: 0 30px;
  }
}
</style>