crm-xcx/pages-roadshow/addActivity/activityEdit.vue

<template>
  <view class="addactiyity-container">
    <van-form>
      <van-field
        :value="formatRsLable(formData.selectResearchers[0].researcherId)"
        is-link
        readonly
        clickable
        name="picker"
        label="研究员"
        type="textarea"
        rows="1"
        autosize
        placeholder="选择研究员"
        @click.native="clickRsChoose(0,'raiEdit')"
      />


      <van-field
        :value="formatterLabelTime(formData.selectResearchers[0].startTime)"
        is-link
        readonly
        clickable
        name="datetimePicker"
        label="开始时间"
        placeholder="选择开始时间"
        @click.native="clickTimeChoose(0, 'start')"
      />

      <van-field
        :value="formatterLabelTime(formData.selectResearchers[0].endTime)"
        is-link
        readonly
        clickable
        name="datetimePicker"
        label="结束时间"
        placeholder="选择结束时间"
        @click.native="clickTimeChoose(0, 'end')"
      />
            <van-field
        :value="formData.activityType"
        is-link
        readonly
        clickable
        name="picker"
        label="活动类型"
        placeholder="选择活动类型"
        disabled
       
      />
      <van-field
        :value="formData.roadshowType"
        v-if="['路演', '公开会议', '沙龙'].includes(formData.activityType)"
        is-link
        readonly
        clickable
        name="picker"
        :label="`${dynamic_prefix}形式`"
        :placeholder="`选择${dynamic_prefix}形式`"
        @click.native="isRoadshowTypePicker = true"
      />
      <van-field
        :value="formData.roadshowPlatform"
        v-if="['路演', '公开会议', '沙龙'].includes(formData.activityType) && formData.roadshowType === '线上'"
        clickable
        :label="`${dynamic_prefix}平台`"
        :placeholder="`输入${dynamic_prefix}平台(eg：进门财经、腾讯会议)`"
        @change="bindInputHandle('roadshowPlatform', $event)"
      />

      <van-field
        :value="formData.roadshowCity"
        v-if="['路演', '公开会议', '沙龙'].includes(formData.activityType) && formData.roadshowType === '线下'"
        is-link
        readonly
        clickable
        :label="`${dynamic_prefix}城市`"
        :placeholder="`选择${dynamic_prefix}城市`"
        @click.native="clickAreaChoose"
      />

      <van-field :value="formData.companyName" v-if="['路演'].includes(formData.activityType)" is-link readonly clickable label="客户名称" placeholder="客户名称" @click.native="goSearchCompany" />

      <view class="company-info" v-if="formData.activityType === '路演' && formData.companyId && companyInfo">
        <!-- 权益角色看权益信息 -->
        <template>
          <p>客户状态：{{ companyInfo.Status }}</p>
          <p>所属行业：{{ companyInfo.IndustryName }}</p>
          <p>行业权限：{{ companyInfo.PermissionName }}</p>
          <p>累计互动次数：{{ companyInfo.ReportReadTotal }}</p>
        </template>
      </view>

      <van-field
        :value="formData.meetingTheme"
        v-if="['公开会议', '沙龙'].includes(formData.activityType)"
        clickable
        label="会议主题"
        type="textarea"
        rows="1"
        autosize
        placeholder="请输入会议主题"
        @change="bindInputHandle('meetingTheme', $event)"
      />

      <van-field
        :value="formData.partnersName"
        v-if="['公开会议'].includes(formData.activityType)"
        clickable
        label="合作方名称"
        type="textarea"
        rows="1"
        autosize
        placeholder="请输入合作方名称（多个合作方用','隔开）"
        @change="bindInputHandle('partnersName', $event)"
      />

      <van-field
        :value="formData.activityClass"
        v-if="['报告电话会'].includes(formData.activityType)"
        is-link
        readonly
        clickable
        label="活动类别"
        placeholder="请选择活动类别"
        @click.native="isActivityClassPicker = true"
      />

      <!-- 追加后的研究员 -->
      <view class="add-user-list" v-for="addindex in addResearchersIdx" :key="addindex" v-if="addResearchersIdx.length">
        <view class="del-cont" @click="delResearcherHandle(addindex)">
          <van-icon name="close" />
        </view>
        <van-field
          :value="formatRsLable(formData.selectResearchers[addindex].researcherId)"
          is-link
          readonly
          clickable
          name="picker"
          label="研究员"
          placeholder="选择研究员"
          @click.native="clickRsChoose(addindex)"
          :disabled="edit_id"
        />
        <van-field
          :value="formatterLabelTime(formData.selectResearchers[addindex].startTime)"
          is-link
          readonly
          clickable
          name="datetimePicker"
          label="开始时间"
          placeholder="选择开始时间"
          :formatter="formatterLabelTime"
          @click.native="clickTimeChoose(addindex, 'start')"
        />

        <van-field
          :value="formatterLabelTime(formData.selectResearchers[addindex].endTime)"
          is-link
          readonly
          clickable
          name="datetimePicker"
          label="结束时间"
          placeholder="选择结束时间"
          :formatter="formatterLabelTime"
          @click.native="clickTimeChoose(addindex, 'end')"
        />
      </view>

      <view class="add-user-btn" @click="addResearcherHandle" v-if="['路演'].includes(formData.activityType)"> <van-icon name="add-o" />添加研究员 </view>
    </van-form>

    <div class="submit-bot">
      <van-button type="primary" plain color="#3385FF" class="btn" size="small" block round @click="cancelHandle">取消</van-button>
      <van-button type="primary" color="#3385FF" class="btn" size="small" block round @click="submitHandle">确定</van-button>
    </div>

    <!-- 选择活动类型 -->
    <van-popup :show="isActivityPicker" position="bottom">
      <van-picker show-toolbar :columns="activiytyTypes" :default-index="activiytyTypes.indexOf(formData.activityType)" @confirm="confirmActivityType" @cancel="isActivityPicker = false" />
    </van-popup>

    <!-- 选择活动类别 -->
    <van-popup :show="isActivityClassPicker" position="bottom">
      <van-picker show-toolbar :columns="telTypeList" :default-index="telTypeList.indexOf(formData.activityClass)" @confirm="confirmActivityClass" @cancel="isActivityClassPicker = false" />
    </van-popup>

    <!-- 选择路演形式 -->
    <van-popup :show="isRoadshowTypePicker" position="bottom">
      <van-picker show-toolbar :columns="['线上', '线下']" :default-index="['线上', '线下'].indexOf(formData.roadshowType)" @confirm="confirmRoadshowType" @cancel="isRoadshowTypePicker = false" />
    </van-popup>

    <!-- 选择研究员 -->
    <van-popup :show="isResearcherPicker" position="bottom">
      <!-- 内部会议可多选研究员,且只有ficc会有内部会议 -->
      <template v-if="!['路演', '沙龙','公开会议'].includes(formData.activityType)">
        <view class="select-rs-header">
          <text class="cancel" @click="cancelResearcher">取消</text>
          <text class="ensure" @click="confirmResearcher">确认</text>
        </view>
        <van-tree-select :items="ficcReasearcherList" :main-active-index="rs_picker.firstindex" :active-id="rs_picker.id" @click-nav="clickFirstHandle" @click-item="clickItemHandle" />
      </template>
      <template v-else>
        <van-cascader
          v-if="isResearcherPicker"
          v-model="this.formData.selectResearchers[this.selectRsIndex].researcherId"
          title="请选择研究员"
          active-color="#3385FF"
          :options="researcherList"
          @close="isResearcherPicker = false"
          @finish="chooseResearcher"
        />
      </template>
    </van-popup>

    <!-- 选择时间 -->
    <van-popup :show="isTimePicker" position="bottom">
      <van-datetime-picker
        :value="pickerForm.time"
        type="datetime"
        :formatter="formatterPickerTime"
        @confirm="confirmTime"
        @cancel="
          () => {
            isTimePicker = false;
            pickerForm.time = '';
          }
        "
      />
    </van-popup>

    <!-- 选择地区 -->
    <van-popup :show="isAreaPicker" position="bottom">
      <van-area :value="pickerForm.area" :area-list="areaList" :columns-num="isRaiRole ? 3 : 2" @confirm="confirmArea" @cancel="isAreaPicker = false" />
    </van-popup>
  </view>
</template>

<script>
import { addActivity, editActivity } from "@/api/roadshow/index.js";
import { getDefaultOption } from "./common.js";
import mixin from "./mixin.js";

const moment = require("../utils/_moment.js");
moment.locale("zh-cn");
export default {
  mixins: [mixin],
  data() {
    return {};
  },
  methods: {
    /* 设置默认状态 */
    initSetState(options) {
      const { RoleTypeCode } = JSON.parse(uni.getStorageSync("userInfo")) || null;
      const { defaultActivityType, activityTypeList, startTime, endTime } = getDefaultOption(RoleTypeCode, 2);

      this.activiytyTypes = activityTypeList;
      this.formData.activityType = defaultActivityType;
      this.formData.selectResearchers = [
        {
          researcherId: "",
          startTime: startTime,
          endTime: endTime,
        },
      ];
      if (this.isRaiRole) {
        this.formData.activityType = "路演";
      } /* else{
					delete this.areaList.county_list
				} */

      /* 编辑时回显表单 */
      if (options.edit_id) {
        const { form, edit_id, edit_rs_id } = options;
        this.formData = { ...this.formData, ...JSON.parse(form) };
        this.edit_id = Number(edit_id);
        this.edit_rs_id = Number(edit_rs_id);
      }
      console.log(this.formData);

      uni.setNavigationBarTitle({
        title: this.edit_id ? "修改活动" : "添加活动",
      });
    },
  },

  onLoad(options) {
    this.initSetState(options);

    this.getOpenerEventChannel().on("emitBackData", (data) => {
      this.initSetState(data);
    });
  },

  onShow() {
    this.getResearcherList();
    this.getTelType();

    if (uni.getStorageSync("roadshow_compantyId")) {
      this.formData.companyId = Number(uni.getStorageSync("roadshow_compantyId"));
      this.formData.englishCompany = Number(uni.getStorageSync("roadshow_isEnglishCompany"));
      this.getCompanyInfo();
      uni.removeStorageSync("roadshow_compantyId");
      uni.removeStorageSync("roadshow_isEnglishCompany");
    }
  },
};
</script>

<style lang="scss" scoped>
.addactiyity-container {
  padding-bottom: 200rpx;

  .add-user-btn {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 20rpx 0;
    color: #3385ff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .del-cont {
    font-size: 50rpx;
    color: #f00;
    display: flex;
    justify-content: flex-end;
    padding: 10rpx 30rpx;
  }

  .submit-bot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    height: 140rpx;
    padding: 0 150rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0px -2px 6px rgba(110, 119, 141, 0.07);

    .btn {
      // width: 100%;
      width: 260rpx;
      height: 60rpx;
      margin-right: 30rpx;
    }
  }

  .select-rs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 20rpx;

    .cancel {
      color: #969799;
    }

    .ensure {
      color: #576b95;
    }
  }
}
</style>
<style lang="scss">
.addactiyity-container {
  .van-tree-select {
    .van-tree-select__item--active {
      color: #1989fa !important;
    }

    .van-sidebar-item--selected {
      border-color: #1989fa !important;
    }
  }
  .van-tree-select__item {
    font-weight: normal;
  }

  .company-info {
    background: #d5e6ff;
    padding: 10rpx 30rpx;
    margin-bottom: 20rpx;
    view {
      margin: 12rpx 0;
      color: #666;
      text-indent: -140rpx;
      margin-left: 140rpx;
    }
  }
}
</style>