hz_crm_web/src/views/rai_manage/components/apply/particularsDialog.vue

<template>
  <div class="container-particulars">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      center
      :append-to-body="true"
      :visible.sync="particularsDialogVisible"
      :before-close="okBtn"
      :width="subscribe == '报名失败详情' ? '1000px' : '1100px'"
    >
      <div slot="title" style="display: flex; align-items: center">
        <img v-if="subscribe == '预约外呼详情'" :src="$icons.delay" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
        <img v-else :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
        <span style="font-size: 16px">{{ subscribe }}</span>
      </div>
      <div class="content-box">
        <div class="top-text" style="margin-bottom: 20px">
          <span v-if="subscribe == '报名失败详情'">
            <template v-if="memberType == 'Admin'"> 共有{{ total }}人名失败 </template>
            <template v-else-if="memberType == 'Sale'"> 共有{{ total }}名失败，其中本人名下客户{{ myTotal }}人 </template>
            <template v-else> 共有{{ total }}名失败，其中本组名下客户{{ myTotal }}人 </template>
          </span>
          <span v-else-if="subscribe == '预约外呼详情' || subscribe == '报名详情' || Teleconference">
            <template v-if="memberType == 'Admin'"> 共有{{ total }}人{{ AppointmentCall ? "预约外呼" : "报名" }} </template>
            <template v-else-if="memberType == 'Sale'"> 共有{{ total }}人{{ AppointmentCall ? "预约外呼" : "报名" }}，其中本人名下客户{{ myTotal }}人 </template>
            <template v-else> 共有{{ total }}人{{ AppointmentCall ? "预约外呼" : "报名" }}，其中本组名下客户{{ myTotal }}人 </template>
          </span>
        </div>
        <div class="table-box">
          <el-table height="400px" :data="dataList" border style="width: 100%">
            <el-table-column min-width="80" align="center" prop="RealName" key="name" label="姓名"></el-table-column>
            <el-table-column v-if="isMobileShow" min-width="115" align="center" prop="Mobile" key="mobile" label="手机号"></el-table-column>
            <el-table-column v-if="isOutboundMobileShow" min-width="140" align="center" key="outboundMobile" label="外呼号码">
              <template slot-scope="scope">
                <span>{{ scope.row.OutboundMobile }}</span>
                <img @click="modification(scope.row.Id, scope.row.OutboundMobile)" :src="$icons.amend" style="color: #fff; width: 12px; height: 12px; margin-left: 5px; vertical-align: middle" />
              </template>
            </el-table-column>

            <el-table-column min-width="135" align="center" prop="CompanyName" key="company" label="公司名称"></el-table-column>
            <el-table-column min-width="110" align="center" prop="SellerName" key="seller" label="所属销售"></el-table-column>
            <el-table-column v-if="isSignupTypeShow" min-width="110" key="meeting" align="center" label="参会方式">
              <template slot-scope="{ row }">
                <span>
                  {{ row.SignupType == 1 ? "预约外呼" : row.SignupType == 2 ? "自主拨入" : row.SignupType == 4 ? "自主入会" : "--" }}
                </span>
              </template>
            </el-table-column>

            <!-- <el-table-column v-if="subscribe !== '报名失败详情' && Teleconference && isLimitPeople == 0" align="center" prop="CreateTime" key="create" min-width="160" label="预约时间"></el-table-column> -->
            <el-table-column prop="CreateTime" key="createTime" align="center" min-width="160" label="报名时间"></el-table-column>
            <el-table-column v-if="subscribe == '报名失败详情'" align="center" prop="" key="fail" label="失败原因">
              <template slot-scope="scope">
                <span>{{ scope.row.FailType == 1 ? "总人数已满" : scope.row.FailType == 2 ? "单机构超限制" : scope.row.FailType == 3 ? "爽约次数超限" : "" }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="subscribe == '报名失败详情' && Teleconference && isLimitPeople == 1" key="callopen" min-width="330" align="center" prop="" label="操作">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.CallOperation">
                  <el-radio :disabled="isFullNum" v-for="item in radioArr" :key="item.id" :label="item.id" @change="redioChange(item.id, scope.row.Id, scope.row)">{{ item.name }}</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column v-if="excelType == 'YiDong'" align="center" prop="" key="YiDong" label="操作">
              <template slot-scope="{ row }">
                <span :style="yidongStyle(row)">{{ yidongStatus(row) }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="isCancelApply" min-width="135" align="center" prop="" key="cz1" label="操作">
              <template slot-scope="scope">
                <span class="editsty" @click="cancelApply(scope.row, 0)">取消报名</span>
              </template>
            </el-table-column>
            <el-table-column
              min-width="215"
              key="salonopen"
              v-if="subscribe == '报名失败详情' && ((Teleconference && isLimitPeople == 0) || AppointmentCall || excelType == 'ExpertSalon' || excelType == 'OfflineResearch')"
              align="center"
              prop=""
              label="操作"
            >
              <template slot-scope="scope">
                <el-switch :disabled="isFullNum" @change="switchChange(scope.row)" v-model="scope.row.SalonOperation" active-text="加入报名" inactive-text="限制报名"> </el-switch>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <div style="margin: 10px 0" v-if="subscribe !== '报名失败详情' && subscribe !== '预约外呼详情'">
          <span style="margin-left: 30px">
            <el-button type="primary" v-if="AppointmentCall || this.excelType == 'CClass'|| this.excelType == 'Teleconference'" @click="appointmentCallDownloadHandler">下载名单</el-button>
            <a :href="exportUser" download v-else>
              <el-button type="primary">下载名单</el-button>
            </a>
          </span>
          <el-button style="margin-left: 30px" v-if="subscribe == '预约外呼详情' || (Teleconference && subscribe !== '报名失败详情')" type="primary" plain @click="okBtn">取消</el-button>
          <el-button v-else style="margin-left: 30px" type="primary" plain @click="okBtn">知道了</el-button>
        </div>
        <div v-if="subscribe == '报名失败详情'">
          <el-button style="margin: 10px 0" type="primary" @click="okBtn">知道了</el-button>
        </div>
      </div>
    </el-dialog>
    <edit-mobile :editMobileDialogVisible.sync="editMobileDialogVisible" :editMobileId="editMobileId" :outboundMobile="outboundMobile" />
    <el-dialog v-dialogDrag width="390px" title="下载名单" :append-to-body="true" :visible.sync="isNameListDownloadShow" :modal-append-to-body="false" @close="isNameListDownloadShow = false">
      <div>
        <el-select style="width: 100%" v-model="downloadTypeName" placeholder="请选择">
          <el-option v-for="item in nameListDownload" :key="item.value" :label="item.type" :value="item.value"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; justify-content: center; margin: 30px 0 20px">
        <el-button type="primary" @click="handleConfirmDownload">确定</el-button>
        <el-button type="primary" plain @click="isNameListDownloadShow = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
import EditMobile from "../editMobile.vue";
import { NameListDownload } from "./applyTableColums";
export default {
  name: "",
  components: { EditMobile },
  props: {
    particularsDialogVisible: {
      type: Boolean,
      default: false,
    },
    subscribe: {
      type: String,
      default: "报名详情",
    },
    dialogVisibleId: {
      type: Number,
    },
  },
  data() {
    return {
      page_no: 1,
      PageSize: 10,
      dataList: [], //表格
      value1: true,
      radioArr: [
        {
          name: "限制报名",
          id: 3,
        },
        {
          name: "预约外呼",
          id: 1,
        },
        {
          name: "自主拨入",
          id: 2,
        },
      ],
      excelType: "", //下载类型
      excelId: "", //下载的id
      total: "", //条数
      myTotal: "", //条数
      isLimitPeople: "", //条数
      memberType: "", //
      editMobileDialogVisible: false, //
      editMobileId: "", //
      outboundMobile: "",
      isFullNum: false, //报名人数是否已满
      isNameListDownloadShow: false, //下载名单弹框
      downloadTypeName: 0,
      isYidongConduct: false, // 是否是易懂
    };
  },
  computed: {
    // 下载
    exportUser() {
      if (this.Teleconference || this.subscribe == "预约外呼详情") {
        return process.env.API_ROOT + "/cygx/activitySignup/callExport?ActivityId=" + this.excelId + "&" + localStorage.getItem("auth") || "";
      } else {
        return process.env.API_ROOT + "/cygx/activitySignup/signupFailExport?ActivityId=" + this.excelId + "&" + localStorage.getItem("auth") || "";
      }
    },
    // 手机号是否展示
    isMobileShow() {
      return this.AppointmentCall || this.Teleconference || this.excelType == "YiDong" || this.isYidongConduct || this.excelType == "OfflineResearch";
    },
    // 预约外呼是否展示
    isOutboundMobileShow() {
      return (this.AppointmentCall || this.Teleconference || this.isYidongConduct || this.excelType == "OfflineResearch") && this.isCancelApply;
    },
    // 是否展示参会方式
    isSignupTypeShow() {
      return (this.Teleconference || this.AppointmentCall || this.isYidongConduct || this.excelType == "OfflineResearch") && this.subscribe == "报名详情";
    },
    isCancelApply() {
      return this.subscribe !== "报名失败详情";
    },
    nameListDownload() {
      return NameListDownload;
    },
    Teleconference() {
      return this.excelType == "Teleconference";
    },
    AppointmentCall() {
      return this.excelType == "AppointmentCall";
    },
  },
  watch: {
    particularsDialogVisible() {
      if (this.particularsDialogVisible) {
        if (this.subscribe == "报名失败详情") {
          this.dataList = [];
          this.salonFailSignupList();
        } else {
          this.dataList = [];
          this.getsDataList();
        }
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 关闭弹框
    okBtn() {
      this.$parent.particularsDialogVisible = false;
    },
    //列表表格
    getsDataList() {
      raiInterface
        .appointmentList({
          ActivityId: this.dialogVisibleId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.excelType = res.Data.ExcelType;
          this.excelId = res.Data.ActivityId;
          this.total = res.Data.Total;
          this.myTotal = res.Data.MyTotal;
          this.isLimitPeople = res.Data.IsLimitPeople;
          this.memberType = res.Data.MemberType;
          this.isFullNum = res.Data.IsFull;
          this.isYidongConduct = res.Data.IsYidongConduct == 1 ? true : false;
          this.$nextTick(() => {
            this.dataList = res.Data.List;
          });
        });
    },
    // 报名失败的列表
    salonFailSignupList() {
      raiInterface
        .salonFailSignupList({
          ActivityId: this.dialogVisibleId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.excelType = res.Data.ExcelType;
          this.excelId = res.Data.ActivityId;
          this.total = res.Data.Total;
          this.myTotal = res.Data.MyTotal;
          this.isLimitPeople = res.Data.IsLimitPeople;
          this.memberType = res.Data.MemberType;
          this.isFullNum = res.Data.IsFull;
          this.isYidongConduct = res.Data.IsYidongConduct == 1 ? true : false;
          this.$nextTick(() => {
            this.dataList = res.Data.List;
          });
        });
    },
    // 报名方式的选择
    redioChange(name, id, row) {
      raiInterface
        .callSignupEdit({
          Id: id,
          OperationStatus: name,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success("操作成功");
        });
    },
    switchChange(item) {
      raiInterface
        .salonSignupEdit({
          Id: item.Id,
        })
        .then((res) => {
          if (res.Ret === 200) {
            this.$message.success("操作成功");
            this.$parent.getsDataList();
          } else {
            item.SalonOperation = !item.SalonOperation;
          }
        });
    },
    // 点击了修改预约外呼
    modification(id, value) {
      this.editMobileDialogVisible = true;
      this.editMobileId = id;
      this.outboundMobile = value;
    },
    //取消报名
    cancelApply(item, num) {
      if (num == 1) {
        const str = item.ActivityTime.replace(/-/g, "/");
        const date = new Date(str);
        const times = date.getTime();
        const num = new Date().getTime();
        if (times - num <= 3600000) return this.$message.error("外呼名单已发送专家组，请联系专家组取消");
      }
      let str = num == 1 ? "外呼" : "报名";
      this.$confirm(`确定要取消该用户的${str}吗？`, `取消${str}`, {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(async () => {
          const res = await raiInterface.activitySignupApply({
            SignupId: item.Id,
            CancelClass: num,
          });
          console.log(res);
          if (res.Ret !== 200) return;
          this.$message({
            type: "success",
            message: `取消${str}成功!`,
          });
          this.getsDataList();
          this.$parent.getsDataList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    //文字显示
    yidongStatus(row) {
      let str = row.YidongExamineStatus == 0 ? "待审核" : row.YidongExamineStatus == 1 ? "审核通过" : "未通过";
      return str;
    },
    yidongStyle(row) {
      const style = row.YidongExamineStatus == 0 ? "color: #3385FF" : row.YidongExamineStatus == 1 ? "color: #07C635" : "color: #D7584F";
      return style;
    },
    // 专家/分析师电话会 下载名单 弹框
    appointmentCallDownloadHandler() {
      this.downloadTypeName = 0;
      this.isNameListDownloadShow = true;
    },
    // 专家/分析师电话会 下载名单 确定事件
    handleConfirmDownload() {
      let url = process.env.API_ROOT + "/cygx/activitySignup/signupFailExport?ActivityId=" + this.excelId + "&ExcelType=" + this.downloadTypeName + "&" + localStorage.getItem("auth") || "";
      let a = document.createElement("a"); // 创建a标签
      a.href = url; // 设置下载地址
      a.download = ""; // 设置下载文件名
      a.click();
      this.isNameListDownloadShow = false;
      this.downloadTypeName = 0;
    },
  },
};
</script>
<style lang="less">
.container-particulars {
  .table-box {
    margin: 20px auto;
  }
  .top-text {
    display: flex;
    align-items: center;
    div {
      margin-left: 20px;
    }
  }
  .el-radio {
    margin-right: 15px !important;
  }
  .el-switch__label {
    color: #606266;
    font-size: 14px;
    font-weight: 400;
  }
  .is-active {
    color: #409eff !important;
  }
  .el-radio__label {
    font-weight: 400;
  }
}
</style>