crm_front_v3/src/views/rai_manage/components/particalDialog.vue

<template>
  <div class="container-applydialog">
    <!-- 详情的弹框 -->
    <div v-if="dialogVisiblepartica">
      <el-dialog
        v-dialogDrag
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        center
        top="10vh"
        :visible.sync="dialogVisiblepartica"
        customClass="custom-applydialog"
        :before-close="confirmPerson"
      >
        <div slot="title" style="display: flex; align-items: center">
          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
          <span style="font-size: 16px">{{ particlaDlg.title }}</span>
        </div>
        <div v-if="particlaDlg">
          <el-table :data="tableDataSub" border height="500px" style="width: 100%">
            <el-table-column align="center" prop="RealName" label="姓名"> </el-table-column>
            <el-table-column align="center" prop="CompanyName" label="公司名称"> </el-table-column>
            <el-table-column align="center" v-if="isShowparticulars == '报名详情'" prop="CreateTime" label="报名时间"> </el-table-column>
            <el-table-column align="center" v-if="isShowparticulars == '到会详情'" prop="" label="是否到会">
              <template slot-scope="scope">
                {{ scope.row.IsMeeting == 1 ? (scope.row.IsAirborne == 1 ? "已到会(空降)" : "已到会") : scope.row.IsMeeting == 2 ? "空降" : "未到会" }}
              </template>
            </el-table-column>
            <el-table-column v-if="type === '线下到会'" align="center" prop="SigninTime" label="签到时间"> </el-table-column>
          </el-table>
        </div>
        <div v-if="particlaDlg.title == '到会详情' && type == '线下到会' && listSignin.length > 0" class="meeting-box">
          <div>潜在客户:</div>
          <div>
            <div class="signin-content" v-for="item in listSignin" :key="item.Id">
              <el-image
                v-if="item.BusinessCard"
                style="width: 180px; height: 100px; margin-right: 5px"
                :src="item.BusinessCard"
                :preview-src-list="[item.BusinessCard]"
              >
              </el-image>
              <span v-else>{{ item.RealName }} {{ item.Mobile }}</span>
              <span>{{ item.CreateTime }}</span>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmPerson">知道了</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        v-dialogDrag
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        center
        top="10vh"
        :visible.sync="submitDialog"
        customClass="custom-applydialog"
        :before-close="handleClose"
      >
        <div slot="title" style="display: flex; align-items: center">
          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
          <span style="font-size: 16px">提交到会情况</span>
        </div>
        <div>
          <el-table height="500px" :data="tableDataSub" border style="width: 100%">
            <el-table-column align="center" prop="RealName" label="姓名"> </el-table-column>
            <el-table-column align="center" prop="CompanyName" label="公司名称"> </el-table-column>
            <el-table-column align="center" prop="" label="操作">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.Operation" active-text="已到会" inactive-text="未到会"> </el-switch>
              </template>
            </el-table-column>
            <el-table-column v-if="type === '线下到会'" align="center" prop="SigninTime" label="签到时间"> </el-table-column>
          </el-table>
          <div class="add-box">
            <img @click="addItem" :src="$icons.addblue" alt="" />
            <span @click="addItem">添加空降人员</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>
              <img @click="deleteItem(item, index)" src="~@/assets/img/icons/delete-Item.png" :class="index == 0 ? 'defaultyi' : ''" alt="" />
            </div>
            <p v-if="item.isShow">系统中无此人，请先将其添加到对应公司的联系人列表下</p>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmSubmit">提交</el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { raiInterface, raiSpecial } from "@/api/api.js";
export default {
  name: "",
  components: {},
  props: {
    dialogVisiblepartica: {
      type: Boolean,
      default: false,
    },
    particlaDlg: {
      type: Object,
    },
    submitDialog: {
      type: Boolean,
      default: false,
    },
    offlineId: {
      type: Number,
      default: 0,
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tableData: [],
      isShow: "",
      tableDataSub: [],
      dynamicItem: [],
      companyList: [], //客户名称的数组
      timeout: null, //
      isShowparticulars: "到会详情",
      user: [],
      warningIsShow: false,
      userId: "",
      listSignin: [],
    };
  },
  computed: {},
  watch: {
    "particlaDlg.title"() {
      if (this.particlaDlg.title) {
        this.isShowparticulars = this.particlaDlg.title;
      }
    },
    dialogVisiblepartica: {
      handler(newval) {
        if (newval) {
          if (this.isShowparticulars == "报名详情") {
            this.offlineListDetail();
          } else {
            this.arriveOfflineListDetail();
          }
        }
      },
    },
    submitDialog: {
      handler(newval) {
        if (newval) {
          this.arriveOfflineListDetail();
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    // //报名人数
    async offlineListDetail() {
      const res = await raiInterface.offlineListDetail({
        ActivityId: this.offlineId,
      });
      if (res.Ret == 200) {
        this.tableDataSub = res.Data.List;
      }
    },
    //到会详情
    async arriveOfflineListDetail() {
      const res = this.particlaDlg.isSpecial
        ? await raiSpecial.getSpecialtripmeetDetial({
            ActivityId: this.offlineId,
          })
        : await raiInterface.activityMeetoffline({
            ActivityId: this.offlineId,
          });
      if (res.Ret == 200) {
        this.tableDataSub = res.Data.List;
        this.listSignin = res.Data.ListSignin || [];
      }
    },
    confirmPerson() {
      this.tableDataSub = [];
      this.user = [];
      this.userId = "";
      this.dynamicItem = [];
      this.$emit("update:dialogVisiblepartica", false);
    },
    async confirmSubmit() {
      const is = this.dynamicItem.some((item) => item.isShow == true);
      if (is) return this.$message.error("姓名有误");
      if (this.tableDataSub) {
        this.tableDataSub.forEach((item) => {
          if (item.Operation) {
            this.user.push(item.UserId);
          }
        });
      }
      this.dynamicItem.forEach((item) => this.user.push(item.id));
      this.userId = this.user.join(",");
      const res = this.particlaDlg.isSpecial
        ? await raiSpecial.postSpecialtripMeetingDo({
            ActivityId: this.offlineId,
            UserIds: this.userId,
          })
        : await raiInterface.activityMeetmeetingDo({
            ActivityId: this.offlineId,
            Ids: this.userId,
          });
      if (res.Ret === 200) {
        this.user = [];
        this.userId = "";
        this.dynamicItem = [];
        this.$emit("update:submitDialog", false);
        this.$parent.getsDataList();
        this.$nextTick(() => {
          this.$parent.particulars(this.offlineId, "到会详情");
        });
      }
    },
    addItem() {
      this.dynamicItem.push({
        name: "",
        isShow: 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.dynamicItem = []), (this.$parent.submitDialog = 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, { id: item.UserId, ...val });
        }
      });
    },
  },
};
</script>
<style lang="scss">
.container-applydialog {
  .custom-applydialog {
    width: 800px;
  }
  .add-box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: #5882ef;
    margin-top: 30px;
    margin-bottom: 17px;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
  }
  .inline {
    margin-bottom: 20px;
    width: 440px;
    .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;
    }
  }
  .el-input {
    width: 392px !important;
  }
  .el-switch__label {
    color: #606266;
    font-size: 14px;
    font-weight: 400;
  }
  .is-active {
    color: #409eff !important;
  }
  .el-radio__label {
    font-weight: 400;
  }
  .meeting-box {
    margin-top: 20px;
    display: flex;
    div:first-child {
      flex-shrink: 0;
      margin-right: 10px;
      line-height: 19px;
    }
  }
  .signin-content {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      margin-right: 5px;
      line-height: 19px;
      width: 180px;
    }
    .el-image-viewer__canvas {
      img {
        max-width: 60% !important;
        max-height: 60% !important;
      }
    }
  }
}
</style>