hz_crm_web/src/views/rai_manage/activityManage/components/addComopnents/ResearchDeduct.vue

<template>
  <div style="margin-top: 20px" class="add-activity-deduct-page">
    <el-checkbox v-model="isCanAppointmentMinutes">
      可预约纪要
      <el-tooltip placement="top-start" content="会后提供纪要的活动，请勾选此选项，小程序内会显示【预约纪要】按钮">
        <i class="el-icon-info" />
      </el-tooltip>
    </el-checkbox>
    <el-checkbox v-if="isResearch && [1, 3, 5, 8].includes(cactivityType)" v-model="isShowHz"> 同时在弘则活动页展示 </el-checkbox>
    <el-checkbox v-if="cactivityType == 3" v-model="isExternalLabel"> 外部资源 </el-checkbox>
    <el-checkbox v-if="cactivityType == 3" v-model="isZoom"> zoom办会（请用zoom模板建会） </el-checkbox>
    <template v-if="cactivityType == 7 || cactivityType == 2">
      <el-checkbox v-model="isYidongConduct">
        易董办会
        <el-tooltip placement="top-start" content="在易董举办的活动，请勾选此选项">
          <i class="el-icon-info" />
        </el-tooltip>
      </el-checkbox>
      <el-checkbox v-if="isYidongConduct" v-model="isCanOutboundCall">
        可提供外呼
        <el-tooltip placement="top-start" content="用户可在小程序中选择预约外呼参会">
          <i class="el-icon-info" />
        </el-tooltip>
      </el-checkbox>
      <el-checkbox v-if="isYidongConduct && cactivityType == 2" v-model="isBClass"> B类非公开会议 </el-checkbox>
    </template>
    <template v-if="optionFormregion.includes('研选')">
      <el-checkbox v-model="isDeduct" style="margin-right: 20px"> 研选扣点 </el-checkbox>
      <el-select clearable @change="ObjectChangeHandler" v-model="PointsSet.PointsObject" placeholder="请选择扣点对象" v-if="isDeduct" style="width: 160px">
        <el-option v-for="item in deductUser" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <template v-if="isDeduct && PointsSet.PointsObject">
        <el-select clearable v-model="PointsSet.CompanyPointsNum" placeholder="办会人扣点点数" v-if="PointsSet.PointsObject == 3" style="width: 160px">
          <el-option v-for="item in dataPointsSet" :key="item.PointsNum" :label="item.PointsNum" :value="item.PointsNum"> </el-option>
        </el-select>
        <el-select clearable v-model="PointsSet.UserPointsNum" placeholder="请选择扣点点数" style="width: 160px" v-if="PointsSet.PointsObject == 1">
          <el-option v-for="item in dataPointsSet" :key="item.PointsNum" :label="item.PointsNum" :value="item.PointsNum"> </el-option>
        </el-select>
        <el-select clearable v-model="PointsSet.CompanyPointsNum" placeholder="请选择扣点点数" style="width: 160px" v-if="PointsSet.PointsObject == 2">
          <el-option v-for="item in dataPointsSet" :key="item.PointsNum" :label="item.PointsNum" :value="item.PointsNum"> </el-option>
        </el-select>
        <el-autocomplete
          :fetch-suggestions="querySearchAsync"
          clearable
          v-model="institutionName"
          placeholder=" 请输入办会机构名称"
          v-if="PointsSet.PointsObject != 1"
          style="width: 300px"
          @select="companyChangeHandler"
          @clear="companyClearHandler"
        ></el-autocomplete>
        <el-select clearable v-model="PointsSet.UserPointsNum" placeholder="参会人扣点点数" v-if="PointsSet.PointsObject == 3" style="width: 160px; margin-left: 20px">
          <el-option v-for="item in dataPointsSet" :key="item.PointsNum" :label="item.PointsNum" :value="item.PointsNum"> </el-option>
        </el-select>
        <el-select clearable v-model="PointsSet.PointsType" placeholder="请选择扣点形式" v-if="PointsSet.PointsObject != 2" style="width: 160px">
          <el-option v-for="item in pointsTypeList" :key="item.val" :label="item.label" :value="item.val"> </el-option>
        </el-select>
      </template>
      <span style="margin: 0 20px" v-if="isDeduct">
        报名截止时间：
        <el-date-picker clearable v-model="SiginupDeadline" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
      </span>
      <span style="margin: 0 20px 0 0" v-if="PointsSet.PointsType == 1">
        取消报名截止时间：
        <el-select clearable v-model="PointsSet.CancelDeadlineType" placeholder="请选择截止时间" style="width: 200px">
          <el-option v-for="item in dataDeadlineSet" :key="item.Id" :label="item.Name" :value="item.Id"> </el-option>
        </el-select>
      </span>
      <el-checkbox v-model="provideEmail"> 需提供邮箱 </el-checkbox>
    </template>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
import { DeductUser, DeductForm } from "./addOfEditData";
export default {
  name: "",
  components: {},
  props: {
    cactivityType: {
      required: true,
      default: "",
    },
    optionFormregion: {
      required: true,
      type: String,
      default: "",
    },
    isResearch: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isCanAppointmentMinutes: false, // 可预约纪要
      isYidongConduct: false, // 易懂办会
      isCanOutboundCall: false, // 可提供外呼
      isExternalLabel: false, //外部资源
      isZoom:false, //是否是Zoom模版
      institutionName: "", //机构名称
      isDeduct: false, // 研选扣点
      isBClass: false, // B类非公开
      provideEmail: "", //提供邮箱
      SiginupDeadline: "", //
      nameCompany: [],
      dataPointsSet: [],
      PointsSet: {
        PointsObject: "", //扣点对象
        CompanyId: 0, //公司ID
        CompanyName: "", //公司名称
        UserPointsNum: "", //参会人扣点数量
        PointsType: "", //扣点形式，1:报名即扣点，2:到会即扣点
        CompanyPointsNum: "", //办会人扣点数量
        CancelDeadlineType: "", //截至报名时间
      },
      dataDeadlineSet: [],
      isShowHz: false,
    };
  },
  computed: {
    deductUser() {
      return DeductUser;
    },
    pointsTypeList() {
      return DeductForm;
    },
  },
  watch: {
    cactivityType: {
      handler(newval) {
        if (this.$route.query.id) return;
        if (newval == 1) {
          this.isCanAppointmentMinutes = true;
        } else {
          this.isCanAppointmentMinutes = false;
        }
      },
    },
  },
  created() {
    let time = new Date().toISOString().substr(0, 10);
    this.SiginupDeadline = time + " 15:30:00";
  },
  mounted() {
    this.getActivityPointsSet();
    this.getActivityDeadlineSet();
  },
  methods: {
    // 获取扣点点数的
    async getActivityPointsSet() {
      const res = await raiInterface.activityPointsSet();
      if (res.Ret === 200) {
        this.dataPointsSet = res.Data.List;
      }
    },
    // 获取截取时间的
    async getActivityDeadlineSet() {
      const res = await raiInterface.activityDeadlineSet();
      if (res.Ret === 200) {
        this.dataDeadlineSet = res.Data;
      }
    },
    // 远程搜索公司
    async querySearchAsync(query, cb) {
      cb([]);
      if (query) {
        const res = await raiInterface.activityCompanySearch({
          KeyWord: query,
        });
        if (res.Ret === 200) {
          let arr = res.Data.List.map((_) => {
            return {
              ..._,
              value: `${_.CompanyName}  --  ${_.RealName}`,
            };
          });
          this.nameCompany = arr;
          cb(arr);
        }
      } else {
        cb([]);
      }
    },
    // 选择后的事件
    companyChangeHandler() {
      let itemData = this.nameCompany.find((item) => this.institutionName === item.value);
      this.PointsSet.CompanyId = itemData.CompanyId;
      this.PointsSet.CompanyName = itemData.value;
    },
    // 点击清楚
    companyClearHandler() {
      this.PointsSet.CompanyId = 0;
      this.PointsSet.CompanyName = "";
    },
    // 数据的初始
    ObjectChangeHandler() {
      this.PointsSet.CompanyId = 0; //公司ID
      this.PointsSet.CompanyName = ""; //公司名称
      this.PointsSet.UserPointsNum = ""; //参会人扣点数量
      this.PointsSet.PointsType = ""; //扣点形式，1=报名即扣点，2=到会即扣点
      this.PointsSet.CompanyPointsNum = ""; //办会人扣点数量
      this.PointsSet.CancelDeadlineType = ""; //办会人扣点数量
      this.institutionName = ""; //
    },
  },
};
</script>
<style scoped lang="scss">
.add-activity-deduct-page {
  .el-select,
  .el-input {
    margin-right: 25px;
    margin-bottom: 20px;
  }
}
</style>