crm_front_v3/src/views/rai_manage/activityManage/specialResearch/particularsAll.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 :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
        <span style="font-size: 16px">报名人数</span>
      </div>
      <div class="content-box">
        <div class="top-text" style="margin-bottom: 20px">
          <template v-if="memberType == 'Admin'"> 共有{{ total }}人报名</template>
          <template v-else-if="memberType == 'Sale'"> 共有{{ total }}人报名，其中本人名下客户{{ myTotal }}人 </template>
          <template v-else> 共有{{ total }}人报名，其中本组名下客户{{ myTotal }}人 </template>
        </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="dialogVisibleList.SpecialType == 1" min-width="115" align="center" prop="Mobile" key="mobile" label="手机号"></el-table-column>
            <el-table-column v-if="dialogVisibleList.SpecialType == 1" 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 min-width="160" align="center" prop="CreateTime" key="seller" label="报名时间"></el-table-column>
            <el-table-column min-width="135" align="center" prop="" key="cz1" label="操作">
              <template slot-scope="scope">
                <span class="editsty" @click="cancelApply(scope.row)">取消报名</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <div style="margin: 10px 0">
          <span style="margin-left: 30px">
            <a :href="exportUser" download>
              <el-button type="primary">下载名单</el-button>
            </a>
          </span>
          <el-button style="margin-left: 30px" type="primary" plain @click="okBtn">知道了</el-button>
        </div>
      </div>
    </el-dialog>
    <edit-mobile :editMobileDialogVisible.sync="editMobileDialogVisible" :editMobileId="editMobileId" :outboundMobile="outboundMobile" isType="专项" />
  </div>
</template>

<script>
import { raiInterface, raiSpecial } from "@/api/api.js";
import EditMobile from "../../components/editMobile.vue";
export default {
  name: "",
  components: { EditMobile },
  props: {
    particularsDialogVisible: {
      type: Boolean,
      default: false,
    },
    subscribe: {
      type: String,
      default: "报名详情",
    },
    dialogVisibleList: {
      type: Object,
    },
  },
  data() {
    return {
      dataList: [], //表格
      total: "",
      myTotal: "",
      memberType: "",
      editMobileDialogVisible: false, //
      editMobileId: "", //
      outboundMobile: "",
      isFullNum: false, //报名人数是否已满
    };
  },
  computed: {
    exportUser() {
      let param_token = localStorage.getItem("auth") || "";
      return import.meta.env.VITE_APP_API_ROOT + "/cygx/special/tripList?ActivityId=" + this.dialogVisibleList.ActivityId + "&IsExport=" + true + "&" + param_token;
    },
  },
  watch: {
    particularsDialogVisible: {
      handler(newval) {
        if (newval) {
          this.getsDataList();
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    okBtn() {
      this.$parent.particularsDialogVisible = false;
    },
    //列表表格
    getsDataList() {
      raiSpecial
        .getSpecialtripList({
          ActivityId: this.dialogVisibleList.ActivityId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$nextTick(() => {
            this.dataList = res.Data.List;
            this.total = res.Data.Total;
            this.memberType = res.Data.MemberType;
            this.myTotal = res.Data.MyTotal;
          });
        });
    },

    modification(id, value) {
      this.editMobileDialogVisible = true;
      this.editMobileId = id;
      this.outboundMobile = value;
    },
    //取消报名
    cancelApply(item) {
      this.$confirm(`确定要取消该用户的报名吗？`, `取消报名`, {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(async () => {
          const res = await raiSpecial.cancelSpecialtripList({
            UserId: item.UserId,
            ActivityId: item.ActivityId,
          });
          if (res.Ret !== 200) return;
          this.$message({
            type: "success",
            message: `取消报名成功!`,
          });
          this.getsDataList();
          this.$parent.getsDataList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
  },
};
</script>
<style lang="scss">
.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>