研究员日历

src/views/roadshow_manage/compononts/addActivityBtnDia.vue

@@ -0,0 +1,833 @@
+<script setup>
+import { ref,computed,reactive,watch } from "vue";
+import {ElMessage} from "element-plus"
+import moment from "moment"
+import DatePicker from 'vue-datepicker-next';
+import _ from 'lodash'
+import { Calendar,Clock,CirclePlus,Remove } from '@element-plus/icons-vue'
+
+import { roadshowInterence } from '@/api/api.js';
+import { activityBtnDiaConfig, confirmDiaLink } from '../roleConfig';
+import {researcherActivityHook} from '../roleConfig/hook.js';
+
+import searchDistPicker from '@/components/searchDistPicker.vue';
+// 定义初始表单数据
+const initFormData = {
+  activityType:
+    activityBtnDiaConfig[localStorage.getItem('Role')].defaultActivityType, // 活动名称
+  activityClass: '', // 活动类别
+  roadshowType: '', // 路演形式
+  roadshowPlatform: '', // 路演平台
+  roadshowCity: '', // 路演城市
+  companyId: 0, // 客户id
+  companyName: '', // 客户名称
+  meetingType: '', // 会议形式
+  meetingPlatform: '', // 会议平台
+  meetingCity: '', // 会议城市
+  meetingTheme: '', // 会议主题
+  partnersName: '', // 合作方名称
+  selectResearchers: [
+    // 研究员
+    {
+      researcherId: '',
+      startDate: activityBtnDiaConfig.defaultStartTime(),
+      startTime: activityBtnDiaConfig.defaultStartTime(),
+      endDate: activityBtnDiaConfig.defaultEndTime(),
+      endTime: activityBtnDiaConfig.defaultEndTime(),
+    },
+  ], // 选择的研究员
+};
+
+const props = defineProps({
+  isShow: {
+    type: Boolean,
+    require: true,
+  },
+  initData: {
+    // 初始数据
+    type: Object,
+    default: null,
+  },
+  edit_id: {
+    type: Number,
+    default: 0,
+  },
+  edit_rs_id: {
+    type: Number,
+    default: 0,
+  },
+  start_date:{
+    type: Date,
+    default:new Date() ,
+  }
+})
+
+const emits=defineEmits(['update:isShow','ensureCallback'])
+
+const form=reactive({formData:{
+  ...initFormData,
+  activityType:
+    activityBtnDiaConfig[localStorage.getItem('Role')]
+      .defaultActivityType,
+  selectResearchers: [
+    {
+      researcherId: '',
+      startDate: activityBtnDiaConfig.defaultStartTime(props.start_date),
+      startTime: activityBtnDiaConfig.defaultStartTime(props.start_date),
+      endDate: activityBtnDiaConfig.defaultEndTime(props.start_date),
+      endTime: activityBtnDiaConfig.defaultEndTime(props.start_date),
+    },
+  ], // 选择的研究员
+}}) // 表单数据
+const researcherList=ref([]) // 研究员列表
+const telTypeList=ref([]) //电话会所有类别
+const cascaderIdx=ref(0) // 解决报错
+const permission=ref(null) // 当前角色权限
+const companyInfo=ref(null)
+
+// 除去第一个研究员的其他研究员索引
+const addResearchersIdx=computed(()=>{
+  return form.formData.selectResearchers
+  .map((item, index) => index)
+  .slice(1);
+})
+watch(()=>props.isShow,(newval)=>{
+  newval && getResearcherList();
+  newval && getTypeList();
+})
+watch(()=>props.start_date,(value)=>{
+  form.formData.selectResearchers[0].startDate = activityBtnDiaConfig.defaultStartTime(value)
+  form.formData.selectResearchers[0].startTime = activityBtnDiaConfig.defaultStartTime(value)
+  form.formData.selectResearchers[0].endDate = activityBtnDiaConfig.defaultEndTime(value)
+  form.formData.selectResearchers[0].endTime = activityBtnDiaConfig.defaultEndTime(value)
+})
+watch(()=>props.initData,(val)=>{
+  form.formData={...form.formData,...val}
+})
+
+const formRef=ref(null)
+
+//获取电话会所有类别
+const getTypeList=async()=>{
+  const res = await roadshowInterence.getTelList();
+  if (res.Ret !== 200) return;
+  telTypeList.value = res.Data;
+}
+
+// 取消按钮
+const cancel=()=>{
+  // 清空表单
+  form.formData = { 
+    ...initFormData,
+    activityType: activityBtnDiaConfig[localStorage.getItem('Role')].defaultActivityType
+  };
+  form.formData.selectResearchers = [{
+    researcherId: '',
+    startDate: activityBtnDiaConfig.defaultStartTime(props.start_date),
+    startTime: activityBtnDiaConfig.defaultStartTime(props.start_date),
+    endDate: activityBtnDiaConfig.defaultEndTime(props.start_date),
+    endTime: activityBtnDiaConfig.defaultEndTime(props.start_date),
+  }]
+  
+  formRef.value.resetFields();
+  researcherList.value = [];
+  emits('update:isShow', false);
+  ++cascaderIdx.value;
+}
+
+const findName=(id)=>{
+  console.log(researcherList.value,'researcherList.value');
+  const flat_arr = _.cloneDeep(researcherList.value)
+    .map((item) => item.ResearcherList || [])
+    .flat(Infinity);
+  console.log(flat_arr,'flat_arr');
+  return flat_arr.find((user) => user.AdminId === id)
+    ? flat_arr.find((user) => user.AdminId === id).RealName
+    : '';
+}
+
+// 确认按钮
+const confirm=async()=>{
+  await formRef.value.validate();
+
+  if(form.formData.companyName && !form.formData.companyId) return ElMessage.warning('请选择客户');
+  
+  let parmas;
+
+  const param_research = ['公开会议', '路演'].includes(
+    form.formData.activityType
+  )
+    ? form.formData.selectResearchers.map((item) => ({
+        ResearcherId: Number(item.researcherId),
+        ResearcherName: findResearcherName(item.researcherId),
+        StartDate: moment(item.startDate).format('YYYY-MM-DD'),
+        EndDate: moment(item.endDate).format('YYYY-MM-DD'),
+        StartTime: moment(item.startTime).format('HH:mm:ss'),
+        EndTime: moment(item.endTime).format('HH:mm:ss'),
+        StartWeek: moment(item.startDate).format('ddd'),
+        EndWeek: moment(item.endDate).format('ddd'),
+      }))
+    : form.formData.selectResearchers[0].researcherId.map((item) => ({
+        ResearcherId: Number(item),
+        ResearcherName: item === 99 ? 'ficc全体' : findResearcherName(item),
+        StartDate: moment(
+          form.formData.selectResearchers[0].startDate
+        ).format('YYYY-MM-DD'),
+        EndDate: moment(
+          form.formData.selectResearchers[0].endDate
+        ).format('YYYY-MM-DD'),
+        StartTime: moment(
+          form.formData.selectResearchers[0].startTime
+        ).format('HH:mm:ss'),
+        EndTime: moment(
+          form.formData.selectResearchers[0].endTime
+        ).format('HH:mm:ss'),
+        StartWeek: moment(
+          form.formData.selectResearchers[0].startDate
+        ).format('ddd'),
+        EndWeek: moment(
+          form.formData.selectResearchers[0].endDate
+        ).format('ddd'),
+      }));
+
+  const dynaic_city_param = {
+    公开会议: form.formData.meetingCity,
+    路演: form.formData.roadshowCity,
+  };
+
+  parmas = {
+    ActivityType: form.formData.activityType,
+    ActivityCategory: form.formData.activityClass[form.formData.activityClass.length-1],
+    City: ['公开会议', '路演'].includes(form.formData.activityType)
+      ? dynaic_city_param[form.formData.activityType][1]
+      : '',
+    Province: ['公开会议', '路演'].includes(form.formData.activityType)
+      ? dynaic_city_param[form.formData.activityType][0]
+      : '',
+    CooperationName: form.formData.partnersName,
+    Theme: form.formData.meetingTheme,
+    RoadshowType: form.formData.activityType === '路演' ?
+      form.formData.roadshowType : form.formData.meetingType,
+    RoadshowPlatform: form.formData.activityType === '路演' ?
+      form.formData.roadshowPlatform : form.formData.meetingPlatform,
+    CompanyId: form.formData.companyId || 0,
+    CompanyName: form.formData.companyName || '',
+    ResearcherList: param_research,
+    EnglishCompany:form.formData.englishCompany
+  };
+
+  const res =  props.edit_id
+  ? await roadshowInterence.editRoadshow({
+      ...parmas,
+      RsCalendarId: props.edit_id,
+      RsCalendarResearcherId: props.edit_rs_id,
+      EditType: ['公开会议', '路演'].includes(form.formData.activityType) ? 2 : 1
+    }) : await roadshowInterence.addRoadshow(parmas);
+
+  if (res.Ret !== 200) return;
+
+  const { text, content, query } = setDynamicLink(
+    form.formData.activityType
+  );
+  props.edit_id ? ElMessage.warning('提交成功') : confirmDiaLink(text, content, query);
+
+  emits('ensureCallback');
+  cancel();
+
+}
+// 获取研究员列表
+const getResearcherList=async()=>{
+  const res = await roadshowInterence.getResearcherList();
+  if (res.Ret === 200) {
+    // researcherList.value = formatResearcherList(res.Data);
+    const ficcList = formatResearcherList(res.Data.find(i=>i.GroupName==='ficc').ResearcherList||[]);
+    const raiList = formatResearcherList(res.Data.find(i=>i.GroupName==='权益').ResearcherList||[]);
+
+    researcherList.value = [{
+      label:'ficc',
+      ResearcherList:ficcList
+    },{
+      label:'权益',
+      ResearcherList:raiList
+    }]
+  }
+}
+// 对获取到的研究员列表做处理
+const formatResearcherList=(list)=>{
+  list.forEach((group) => {
+    // 对组做处理
+    group.label = group.GroupName;
+    // 如果有列表
+    if (group.ResearcherList) {
+      group.ResearcherList.forEach((item) => {
+        // 对研究员做处理
+        item.label = item.RealName;
+        item.value = item.AdminId;
+      });
+    } else {
+      // 没有列表
+      group.value = group.GroupId;
+    }
+  });
+  return list;
+}
+// 选择的研究员发生改变
+const removeResearchersChange=(val)=>{
+  form.formData.selectResearchers[0].researcherId = form.formData.selectResearchers[0].researcherId.filter(item => item !== val)
+  cascaderIdx.value++;
+}
+// 活动类型改变
+const activityTypeChange=()=>{
+  console.log(form.formData.activityType,'form.formData.activityTyp');
+  ++cascaderIdx.value;
+  // 清空部分表单内容
+  form.formData.roadshowType = '';
+  form.formData.roadshowPlatform = '';
+  form.formData.roadshowCity = '';
+  form.formData.companyId = 0;
+  form.formData.companyName = '';
+  form.formData.meetingType = '';
+  form.formData.meetingPlatform = '';
+  form.formData.meetingCity = '';
+  form.formData.meetingTheme = '';
+  form.formData.partnersName = '';
+  form.formData.activityClass = '';
+  companyInfo.value = '';
+  form.formData.selectResearchers = [
+    {
+      researcherId: '',
+      startDate: form.formData.selectResearchers[0].startDate,
+      startTime: form.formData.selectResearchers[0].startTime,
+      endDate: form.formData.selectResearchers[0].endDate,
+      endTime: form.formData.selectResearchers[0].endTime,
+    },
+  ];
+  formRef.value.clearValidate();
+}
+// 开始时间发生变化
+const startTimeChange=(type,value,row)=>{
+  if(type=='date'){
+    row.endDate = value
+    // 为了确保 修改startTime时，endDate正常显示
+    row.startTime=new Date(moment(value).format('YYYY-MM-DD')+' '+moment(row.startTime).format('HH:mm:ss'))
+  }else{
+    row.endTime=new Date(moment(value).add(1,'hours'))
+    // 当选择23点30分时，间隔一个小时，日期到了第二天，由于字段不同，需要赋值给 endDate
+    row.endDate=new Date(moment(value).add(1,'hours'))
+  }
+}
+// 客户名称搜索
+const companySearch=async(query, cb)=>{
+  cb([]);
+  if (!query) return;
+  const res = await roadshowInterence.searchRoadshowCompany({
+    KeyWord: query,
+  });
+  if (res.Ret === 200) {
+    let arr = res.Data || [];
+    console.log(arr);
+    if (!arr.length) {
+      cb([{ nodata: true }]);
+    } else {
+      cb(arr);
+    }
+  }
+}
+
+// 选择客户
+const companySelect=async(e)=>{
+  if (e.nodata) return;
+  form.formData.companyId = e.CompanyId;
+  form.formData.companyName = e.CompanyName;
+  form.formData.englishCompany = e.EnglishCompany
+
+  const { Data } = await roadshowInterence.componyDetail({
+    CompanyId: form.formData.companyId,
+    EnglishCompany:e.EnglishCompany
+  });
+  companyInfo.value = Data;
+}
+
+// 添加研究员点击
+const addResearcher=()=>{
+  const { startDate, startTime, endDate, endTime } =
+    form.formData.selectResearchers[0]; //默认添加时间同步
+
+  form.formData.selectResearchers.push({
+    researcherId: null,
+    startDate,
+    startTime,
+    endDate,
+    endTime,
+  });
+}
+
+// 删除研究员
+const delResearcher=(index)=>{
+  form.formData.selectResearchers.splice(index, 1);
+}
+
+const HOOK = researcherActivityHook({form,companyInfo,formRef,researcherList})
+const {rules,activityClassProps,setDynamicLink,addUserCheckHandler,onChangeCity,findResearcherName}=HOOK
+
+permission.value = activityBtnDiaConfig[localStorage.getItem('Role')];
+
+</script>
+
+<template>
+  <div class="activity-btn-dia">
+    <el-dialog
+      v-dialogDrag
+      :title="props.edit_id ? '修改活动' : '添加活动'"
+      :model-value="props.isShow"
+      :modal-append-to-body="false"
+      @close="cancel"
+      width="500px"
+    >
+      <el-form
+        ref="formRef"
+        :model="form.formData"
+        :rules="rules"
+        label-width="100px"
+        label-position="left"
+      >
+        <el-form-item label="活动类型" prop="activityType">
+          <el-select
+            v-model="form.formData.activityType"
+            placeholder="请选择活动类型"
+            @change="activityTypeChange"
+            :disabled="!!props.edit_id"
+          >
+            <el-option
+              v-for="(type, index) in permission.activityTypeList"
+              :key="index"
+              :label="type"
+              :value="type"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="活动类别"
+          v-if="form.formData.activityType === '报告电话会'"
+          prop="activityClass"
+        >
+            <el-cascader
+                :props="activityClassProps"
+                v-model="form.formData.activityClass"
+                :options="telTypeList">
+            </el-cascader>
+        </el-form-item>
+        <el-form-item
+          label="路演形式"
+          v-if="form.formData.activityType === '路演'"
+          prop="roadshowType"
+        >
+          <el-select
+            v-model="form.formData.roadshowType"
+            placeholder="请先选择路演形式"
+          >
+            <el-option value="线上"></el-option>
+            <el-option value="线下"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="路演平台"
+          v-if="form.formData.roadshowType === '线上' && form.formData.activityType === '路演'"
+          prop="roadshowPlatform"
+        >
+          <el-input
+            v-model="form.formData.roadshowPlatform"
+            placeholder="请输入路演平台(eg：进门财经、腾讯会议)"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          label="路演城市"
+          v-if="form.formData.roadshowType === '线下' && form.formData.activityType === '路演'"
+          prop="roadshowCity"
+        >
+          <search-dist-picker 
+            :provinceInfo="form.formData.roadshowCity[0]"
+            :cityInfo="form.formData.roadshowCity[1]"
+            @selected="onChangeCity($event,'roadshow')"/>
+        </el-form-item>
+        <el-form-item
+          label="客户名称"
+          v-if="form.formData.activityType === '路演'"
+          prop="companyName"
+        >
+          <el-autocomplete
+            v-model="form.formData.companyName"
+            popper-class="company-autocomplete"
+            :fetch-suggestions="companySearch"
+            placeholder="请输入客户名称"
+            @select="companySelect"
+            clearable
+          >
+            <template #default="{ item }">
+              <div v-if="item.nodata" style="text-align: center">暂无数据</div>
+              <div class="name" v-else>{{ item.CompanyName }}</div>
+            </template>
+          </el-autocomplete>
+        </el-form-item>
+        <!-- 客户信息 -->
+        <div
+          class="company-info"
+          v-if="
+            form.formData.activityType === '路演' &&
+            form.formData.companyId &&
+            companyInfo
+          "
+        >
+          <template v-if="companyInfo.EnglishCompany===1">
+            <p>所属国家：{{companyInfo.EnglishCountry}}</p>
+            <p>累计点击量：{{companyInfo.EnglishViewTotal}}</p>
+          </template>
+          <template v-else>
+            <p>客户状态：{{ companyInfo.Status }}</p>
+            <p>所属行业：{{ companyInfo.IndustryName }}</p>
+            <p>开通品种：{{ companyInfo.PermissionName }}</p>
+            <p>累计报告阅读次数：{{ companyInfo.ReportReadTotal }}</p> 
+          </template>
+        </div>
+        <el-form-item
+          label="会议形式"
+          v-if="form.formData.activityType === '公开会议'"
+          prop="meetingType"
+        >
+          <el-select
+            v-model="form.formData.meetingType"
+            placeholder="请先选择会议形式"
+          >
+            <el-option value="线上"></el-option>
+            <el-option value="线下"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="会议平台"
+          v-if="form.formData.meetingType === '线上' && form.formData.activityType==='公开会议'"
+          prop="meetingPlatform"
+        >
+          <el-input
+            v-model="form.formData.meetingPlatform"
+            placeholder="请输入会议平台(eg：进门财经、腾讯会议)"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          label="会议城市"
+          v-if="form.formData.meetingType === '线下' && form.formData.activityType==='公开会议'"
+          prop="meetingCity"
+        >
+          <v-distpicker
+            ref="meetingCity"
+            :province="form.formData.meetingCity[0]"
+            :city="form.formData.meetingCity[1]"
+            @selected="onChangeCity($event, 'meeting')"
+            hide-area
+          ></v-distpicker>
+        </el-form-item>
+        <el-form-item
+          label="会议主题"
+          v-if="form.formData.activityType === '公开会议'"
+          prop="meetingTheme"
+        >
+          <el-input
+            v-model="form.formData.meetingTheme"
+            placeholder="请输入会议主题"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          label="合作方名称"
+          v-if="form.formData.activityType === '公开会议'"
+          prop="partnersName"
+        >
+          <el-input
+            v-model="form.formData.partnersName"
+            placeholder='请输入合作方名称（多个合作方用","隔开）'
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          label="研究员"
+          prop="selectResearchers[0].researcherId"
+          :rules="[
+            { required: true, message: '请选择研究员', trigger: 'change' },
+          ]"
+        >
+          <el-cascader
+            v-model="form.formData.selectResearchers[0].researcherId"
+            :options="researcherList"
+            :show-all-levels="false"
+            :props="{
+              children: 'ResearcherList',
+              expandTrigger: 'hover',
+              multiple: ['内部会议', '报告电话会'].includes(
+                form.formData.activityType
+              ),
+              emitPath: false,
+            }"
+            clearable
+            placeholder="请选择研究员"
+            :key="cascaderIdx"
+            @remove-tag="removeResearchersChange"
+          />
+        </el-form-item>
+        <el-form-item
+          label="开始时间"
+          prop="selectResearchers[0].startTime"
+          :rules="[
+            { required: true, message: '请选择开始时间', trigger: 'blur' },
+          ]"
+        >
+          <el-col :span="12">
+            <date-picker
+              format="MM.DD(ddd)"
+              v-model:value="form.formData.selectResearchers[0].startDate"
+              style="width: 100% !important"
+              :clearable="false"
+              :editable="false"
+              @change="(value)=>startTimeChange('date',value,form.formData.selectResearchers[0])"
+            >
+              <template #icon-calendar>
+                <el-icon><Calendar /></el-icon>
+              </template>
+            </date-picker>
+          </el-col>
+          <el-col :span="12">
+            <date-picker
+              format="HH:mm"
+              type="time"
+              :show-second="false"
+              v-model:value="form.formData.selectResearchers[0].startTime"
+              style="width: 100% !important"
+              :clearable="false"
+              :editable="false"
+              @change="(value)=>startTimeChange('time',value,form.formData.selectResearchers[0])"
+            >
+              <template #icon-calendar>
+                <el-icon><Clock /></el-icon>
+              </template>
+            </date-picker>
+          </el-col>
+        </el-form-item>
+        <el-form-item
+          label="结束时间"
+          prop="selectResearchers[0].endTime"
+          :rules="[
+            { required: true, message: '请选择结束时间', trigger: 'blur' },
+          ]"
+        >
+          <el-col :span="12">
+            <date-picker
+              format="MM.DD(ddd)"
+              v-model:value="form.formData.selectResearchers[0].endDate"
+              style="width: 100% !important"
+              :clearable="false"
+              :editable="false"
+            >
+              <template #icon-calendar>
+                <el-icon><Calendar /></el-icon>
+              </template>
+            </date-picker>
+          </el-col>
+          <el-col :span="12">
+            <date-picker
+              format="HH:mm"
+              type="time"
+              :show-second="false"
+              v-model:value="form.formData.selectResearchers[0].endTime"
+              style="width: 100% !important"
+              :clearable="false"
+              :editable="false"
+            >
+              <template #icon-calendar>
+                <el-icon><Clock /></el-icon>
+              </template>
+            </date-picker>
+          </el-col>
+        </el-form-item>
+
+        <!-- 新增的研究员 -->
+        <div
+          v-for="researcherIdx in addResearchersIdx"
+          :key="researcherIdx"
+          class="add-researcher-box"
+        >
+          <el-form-item
+            label="研究员"
+            :prop="`selectResearchers[${researcherIdx}].researcherId`"
+            :rules="[
+              { required: true, message: '请选择研究员', trigger: 'change' },
+            ]"
+          >
+            <el-cascader
+              style="max-width: 340px;"
+              v-model="form.formData.selectResearchers[researcherIdx].researcherId"
+              :options="researcherList"
+              :show-all-levels="false"
+              :props="{
+                expandTrigger: 'hover',
+                children: 'ResearcherList',
+                emitPath: false,
+              }"
+              clearable
+              placeholder="请选择研究员"
+              :key="cascaderIdx"
+              @change="addUserCheckHandler"
+            />
+            <el-icon class="remove-outline" @click="delResearcher(researcherIdx)"><Remove /></el-icon>
+          </el-form-item>
+          <el-form-item label="开始时间"
+          :prop="`selectResearchers[${researcherIdx}].startTime`"
+          :rules="[
+            { required: true, message: '请选择开始时间', trigger: 'change' },
+          ]">
+            <el-col :span="12">
+              <date-picker
+                format="MM.DD(ddd)"
+                v-model:value="form.formData.selectResearchers[researcherIdx].startDate"
+                :clearable="false"
+                :editable="false"
+                style="width: 100% !important"
+                @change="(value)=>startTimeChange('date',value,form.formData.selectResearchers[researcherIdx])"
+              >
+                <template #icon-calendar>
+                  <el-icon><Calendar /></el-icon>
+                </template>
+              </date-picker>
+            </el-col>
+            <el-col :span="12">
+              <date-picker
+                format="HH:mm"
+                type="time"
+                :show-second="false"
+                v-model:value="form.formData.selectResearchers[researcherIdx].startTime"
+                :clearable="false"
+                :editable="false"
+                style="width: 100% !important"
+                @change="(value)=>startTimeChange('time',value,form.formData.selectResearchers[researcherIdx])"
+              >
+                <template #icon-calendar>
+                  <el-icon><Clock /></el-icon>
+                </template>
+              </date-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="结束时间"
+          :prop="`selectResearchers[${researcherIdx}].endTime`"
+          :rules="[
+            { required: true, message: '请选择结束时间', trigger: 'change' },
+          ]">
+            <el-col :span="12">
+              <date-picker
+                format="MM.DD(ddd)"
+                v-model:value="form.formData.selectResearchers[researcherIdx].endDate"
+                style="width: 100% !important"
+                :clearable="false"
+                :editable="false"
+              >
+                <template #icon-calendar>
+                  <el-icon><Calendar /></el-icon>
+                </template>
+              </date-picker>
+            </el-col>
+            <el-col :span="12">
+              <date-picker
+                format="HH:mm"
+                type="time"
+                :show-second="false"
+                v-model:value="form.formData.selectResearchers[researcherIdx].endTime"
+                style="width: 100% !important"
+                :clearable="false"
+                :editable="false"
+              >
+                <template #icon-calendar>
+                  <el-icon><Clock /></el-icon>
+                </template>
+              </date-picker>
+            </el-col>
+          </el-form-item>
+        </div>
+        <!-- 添加研究员按钮 -->
+        <div
+          @click="addResearcher"
+          class="add-box"
+          v-if="['路演', '公开会议'].includes(form.formData.activityType) && !props.edit_id"
+        >
+          <el-icon style="font-size: 18px; margin-right: 5px"><CirclePlus /></el-icon>
+          <span>添加研究员</span>
+        </div>
+      </el-form>
+      <div class="btn-group">
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="confirm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss">
+.activity-btn-dia {
+  .el-form {
+    .el-cascader,
+    .el-select,
+    .el-autocomplete,
+    .el-input {
+      width: 100%;
+    }
+    .distpicker-address-wrapper {
+      display: flex;
+      label:nth-child(-n + 2) {
+        padding: 0 5px;
+        flex: 50%;
+        select {
+          width: 100%;
+        }
+      }
+    }
+    .el-col {
+      padding: 0 5px;
+    }
+    .company-info {
+      margin-bottom: 20px;
+      border: 1px solid #b3d8ff;
+      background: #ecf5ff;
+      padding: 10px;
+      p {
+        margin: 6px 0;
+        text-indent: -70px;
+        margin-left: 70px;
+      }
+    }
+    .add-researcher-box .el-form-item .el-form-item__content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .el-cascader {
+        padding-right: 20px;
+      }
+      .remove-outline {
+        font-size: 20px;
+        cursor: pointer;
+        color: #f00;
+      }
+    }
+  }
+  .add-box {
+    width: 100px;
+    display: flex;
+    align-items: center;
+    color: #5882ef;
+    cursor: pointer;
+  }
+  .btn-group {
+    margin: 20px 0;
+    text-align: center;
+    .el-button {
+      width: 140px;
+    }
+  }
+}
+</style>

src/views/roadshow_manage/compononts/addActivityCellDia.vue

@@ -0,0 +1,751 @@
+<script setup>
+import { ref,computed,reactive,watch } from "vue";
+import {ElMessage} from "element-plus"
+import moment from "moment"
+import DatePicker from 'vue-datepicker-next';
+import _ from 'lodash'
+import { Calendar,Clock,CirclePlus,Remove } from '@element-plus/icons-vue'
+
+import { activityCellDiaConfig,confirmDiaLink } from "../roleConfig";
+import { roadshowInterence } from "@/api/api.js";
+import searchDistPicker from '@/components/searchDistPicker.vue';
+import {researcherActivityHook} from '../roleConfig/hook.js';
+
+// 定义初始表单数据
+const initFormData = {
+  // 表单数据
+  activityType: activityCellDiaConfig[localStorage.getItem("Role")].defaultActivityType, // 活动类型
+  roadshowType: "", // 路演形式
+  roadshowPlatform: "", // 路演平台
+  roadshowCity: "", // 路演城市
+  companyId: '', // 客户id
+  companyName: "", // 客户名称
+  meetingType: "", // 会议形式
+  meetingPlatform: "", // 会议平台
+  meetingCity: "", // 会议城市
+  meetingTheme: "", // 会议主题
+  partnersName: "", // 合作方名称
+  activityClass: "", // 活动类别
+  selectResearchers: [
+    // 选择的研究员
+    {
+      researcherId: '',
+      startDate: '',
+      startTime: '',
+      endDate: '',
+      endTime: '',
+    },
+  ],
+};
+
+const props = defineProps({
+  isShow: {
+    type: Boolean,
+    require: true,
+  },
+  initData:{
+    type: Object,
+    default: null,
+  },
+  edit_id: {
+    type: Number,
+    default: 0,
+  },
+  edit_rs_id: {
+    type: Number,
+    default: 0,
+  }
+})
+
+const emits=defineEmits(['update:isShow','ensureCallback'])
+
+const form=reactive({formData: { 
+  ...initFormData,
+  activityType: activityCellDiaConfig[localStorage.getItem("Role")].defaultActivityType,
+  selectResearchers: [
+    // 选择的研究员
+    {
+      researcherId: '',
+      startDate: '',
+      startTime: '',
+      endDate: '',
+      endTime: '',
+    },
+  ],
+}})
+const researcherList=ref([]) // 研究员列表
+const telTypeList=ref([])//电话会所有类别
+const cascaderIdx=ref(0) // 解决报错
+const permission=ref(null) // 当前角色权限
+const companyInfo=ref(null)//选择的客户详情
+
+// 除去第一个研究员的其他研究员索引
+const addResearchersIdx=computed(()=>{
+  return form.formData.selectResearchers
+  .map((item, index) => index)
+  .slice(1);
+})
+// 将研究员列表中的研究员提取出来组成新数组
+const allResearcher=computed(()=>{
+  return [].concat.apply([], researcherList.value.map(item=>item.ResearcherList))
+})
+
+watch(()=>props.isShow,(newval)=>{
+  newval && getResearcherList();
+  newval && getTypeList();
+})
+// 解决研究员列表,直接赋值时报错(原因:组件没有重新渲染)
+watch(()=>form.formData.selectResearchers,(newval)=>{
+  cascaderIdx.value++
+})
+// 默认数据改变时,重新赋值
+watch(()=>props.initData,(newval)=>{
+  console.log(newval,'newval');
+  form.formData={...form.formData,...newval}
+  console.log(form.formData,'form.formData');
+})
+
+
+const formRef=ref(null)
+
+// 获取研究员列表
+const getResearcherList=async()=>{
+  // 发送请求
+  const res = await roadshowInterence.getResearcherList();
+  if (res.Ret === 200) {
+
+    const ficcList = formatResearcherList(res.Data.find(i=>i.GroupName==='ficc').ResearcherList||[]);
+    const raiList = formatResearcherList(res.Data.find(i=>i.GroupName==='权益').ResearcherList||[]);
+
+    researcherList.value = [{
+      label:'ficc',
+      ResearcherList:ficcList
+    },{
+      label:'权益',
+      ResearcherList:raiList
+    }]
+  }
+}
+// 对获取到的研究员列表做处理
+const formatResearcherList=(list)=>{
+  list.forEach((group) => {
+    // 对组做处理
+    group.label = group.GroupName;
+    // 如果有列表
+    if (group.ResearcherList) {
+      group.ResearcherList.forEach((item) => {
+        // 对研究员做处理
+        item.label = item.RealName;
+        item.value = item.AdminId;
+      });
+    } else {
+      // 没有列表
+      group.value = group.GroupId;
+    }
+  });
+  return list;
+}
+// 取消按钮
+const cancel=()=>{
+  form.formData = { 
+    ...initFormData,
+    activityType: activityCellDiaConfig[localStorage.getItem("Role")].defaultActivityType
+  };
+  researcherList.value = [];
+  cascaderIdx.value++;
+  formRef.value.resetFields();
+  emits("update:isShow", false);
+}
+// 确认按钮
+const confirm=async()=>{
+  // 校验表单
+  await formRef.value.validate();
+
+  if(form.formData.companyName && !form.formData.companyId) return ElMessage.warning('请选择客户');
+  // 设置参数
+  let parmas = null;
+
+  const param_research = form.formData.selectResearchers.map(item=>({
+    ResearcherId: item.researcherId,
+    ResearcherName: findResearcherName(item.researcherId),
+    StartDate:moment(item.startDate).format('YYYY-MM-DD'),
+    EndDate: moment(item.endDate).format('YYYY-MM-DD'),
+    StartTime: moment(item.startTime).format('HH:mm:ss'),
+    EndTime: moment(item.endTime).format('HH:mm:ss'),
+    StartWeek: moment(item.startDate).format('ddd'),
+    EndWeek: moment(item.endDate).format('ddd'),
+  }));
+
+  const dynaic_city_param = {
+    '公开会议': form.formData.meetingCity,
+    '路演': form.formData.roadshowCity,
+  }
+
+  parmas = {
+    ActivityType: form.formData.activityType,
+    ActivityCategory: form.formData.activityClass[form.formData.activityClass.length-1],
+    City: ['公开会议','路演'].includes(form.formData.activityType) ? dynaic_city_param[form.formData.activityType][1] : '',
+    Province: ['公开会议','路演'].includes(form.formData.activityType) ? dynaic_city_param[form.formData.activityType][0] : '',
+    CooperationName: form.formData.partnersName,
+    Theme: form.formData.meetingTheme,
+    RoadshowType: form.formData.activityType === '路演' ? form.formData.roadshowType : form.formData.meetingType,
+    RoadshowPlatform: form.formData.activityType === '路演' ? form.formData.roadshowPlatform : form.formData.meetingPlatform,
+    CompanyId: form.formData.companyId || 0,
+    CompanyName: form.formData.companyName || '',
+    ResearcherList: param_research,
+    EnglishCompany:form.formData.englishCompany
+  };
+  
+  // 发送请求
+  const res =  props.edit_id
+  ? await roadshowInterence.editRoadshow({
+      ...parmas,
+      RsCalendarId: props.edit_id,
+      RsCalendarResearcherId: props.edit_rs_id,
+      EditType: ['公开会议', '路演'].includes(form.formData.activityType) ? 2 : 1
+    }) : await roadshowInterence.addRoadshow(parmas);
+
+  if (res.Ret !== 200) return
+  const { text,content,query } = setDynamicLink(form.formData.activityType);
+
+  props.edit_id ? ElMessage.warning('提交成功') : confirmDiaLink(text, content, query);
+
+  emits('ensureCallback');
+  cancel();
+
+}
+
+// 添加研究员点击
+const addResearcher=()=>{
+
+  const { startDate,startTime,endDate,endTime } = form.formData.selectResearchers[0];//默认添加时间同步
+
+  form.formData.selectResearchers.push({
+    researcherId: null,
+    startDate,
+    startTime,
+    endDate,
+    endTime,
+  });
+}
+// 删除研究员点击
+const delResearcher=(index)=>{
+  form.formData.selectResearchers.splice(index, 1);
+}
+// 活动类型改变
+const activityTypeChange=()=>{
+  // 清空部分表单内容
+  form.formData.roadshowType = "";
+  form.formData.roadshowPlatform = "";
+  form.formData.roadshowCity = "";
+  form.formData.companyId = '';
+  form.formData.companyName = "";
+  form.formData.meetingType = "";
+  form.formData.meetingPlatform = "";
+  form.formData.meetingCity = "";
+  form.formData.meetingTheme = "";
+  form.formData.partnersName = "";
+  form.formData.activityClass = "";
+  form.formData.selectResearchers = form.formData.selectResearchers.splice(0,1);
+
+  formRef.value.clearValidate();
+}
+
+//获取电话会所有类别
+const getTypeList=async()=>{
+  const res = await roadshowInterence.getTelList();
+  if (res.Ret !== 200) return
+  telTypeList.value=res.Data;
+}
+
+// 客户名称搜索
+const companySearch=async(query, cb)=>{
+  cb([]);
+  if (!query) return;
+    const res = await roadshowInterence.searchRoadshowCompany({
+      KeyWord: query,
+    });
+    if (res.Ret === 200) {
+      let arr = res.Data || [];
+      console.log(arr);
+      if (!arr.length) {
+        cb([{ nodata: true }]);
+      } else {
+        cb(arr);
+      }
+    }
+}
+
+// 选择客户
+const companySelect=async(e)=>{
+  if (e.nodata) return;
+  form.formData.companyId = e.CompanyId;
+  form.formData.companyName = e.CompanyName;
+  form.formData.englishCompany = e.EnglishCompany
+
+  const { Data }  = await roadshowInterence.componyDetail({ 
+    CompanyId: form.formData.companyId,
+    EnglishCompany:e.EnglishCompany
+  });
+  companyInfo.value = Data;
+
+}
+// 研究员id查找研究员名
+const findResearcherById=(id)=>{
+  return allResearcher.value.find(researcher => researcher.AdminId===id).RealName
+}
+
+permission.value = activityCellDiaConfig[localStorage.getItem("Role")];
+
+const HOOK = researcherActivityHook({form,companyInfo,formRef,researcherList})
+const {rules,activityClassProps,setDynamicLink,addUserCheckHandler,onChangeCity,findResearcherName}=HOOK
+
+</script>
+
+<template>
+  <div class="activity-cell-dia">
+    <el-dialog
+      v-dialogDrag
+      :title="props.edit_id ? '修改活动' : '添加活动'"
+      :model-value="props.isShow"
+      :modal-append-to-body="false"
+      @close="cancel"
+      width="500px"
+    >
+      <el-form
+        ref="formRef"
+        :model="form.formData"
+        :rules="rules"
+        label-width="100px"
+        label-position="left"
+      >
+        <!-- 第一个研究员 -->
+        <el-form-item
+          label="研究员"
+          prop="selectResearchers[0].researcherId"
+          v-if="form.formData.selectResearchers[0].researcherId"
+          :rules="[
+            { required: true, message: '请选择研究员', trigger: 'change' },
+          ]"
+          
+        >
+          <el-cascader
+            v-model="form.formData.selectResearchers[0].researcherId"
+            :options="researcherList"
+            :show-all-levels="false"
+            disabled
+            :props="{
+              expandTrigger: 'hover',
+              children: 'ResearcherList',
+              emitPath: false,
+            }"
+            clearable
+            placeholder="请选择研究员"
+            :key="cascaderIdx"
+          />
+        </el-form-item>
+        <el-form-item
+          label="开始时间"
+          prop="selectResearchers[0].startTime"
+          :rules="[
+            { required: true, message: '请选择开始时间', trigger: 'blur' },
+          ]"
+        >
+          <el-col :span="12">
+            <date-picker
+              format="MM.DD(ddd)"
+              v-model:value="form.formData.selectResearchers[0].startDate"
+              style="width: 100% !important"
+              :clearable="false"
+              :editable="false"
+            >
+              <template #icon-calendar>
+                <el-icon><Calendar /></el-icon>
+              </template>
+            </date-picker>
+          </el-col>
+          <el-col :span="12">
+            <date-picker
+              format="HH:mm"
+              type="time"
+              :show-second="false"
+              v-model:value="form.formData.selectResearchers[0].startTime"
+              style="width: 100% !important"
+              :clearable="false"
+              :editable="false"
+            >
+              <template #icon-calendar>
+                <el-icon><Clock /></el-icon>
+              </template>
+            </date-picker>
+          </el-col>
+        </el-form-item>
+        <el-form-item
+          label="结束时间"
+          prop="selectResearchers[0].endTime"
+          :rules="[
+            { required: true, message: '请选择结束时间', trigger: 'blur' },
+          ]"
+        >
+          <el-col :span="12">
+            <date-picker
+              format="MM.DD(ddd)"
+              v-model:value="form.formData.selectResearchers[0].endDate"
+              style="width: 100% !important"
+              :clearable="false"
+              :editable="false"
+            >
+              <template #icon-calendar>
+                <el-icon><Calendar /></el-icon>
+              </template>
+            </date-picker>
+          </el-col>
+          <el-col :span="12">
+            <date-picker
+              format="HH:mm"
+              type="time"
+              :show-second="false"
+              v-model:value="form.formData.selectResearchers[0].endTime"
+              style="width: 100% !important"
+              :clearable="false"
+              :editable="false"
+            >
+              <template #icon-calendar>
+                <el-icon><Clock /></el-icon>
+              </template>
+            </date-picker>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="活动类型" prop="activityType">
+          <el-select
+            v-model="form.formData.activityType"
+            placeholder="请选择活动类型"
+            @change="activityTypeChange"
+            :disabled="!!props.edit_id"
+          >
+            <el-option
+              v-for="(type, index) in permission.activityTypeList"
+              :key="index"
+              :label="type"
+              :value="type"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="路演形式"
+          v-if="form.formData.activityType === '路演'"
+          prop="roadshowType"
+        >
+          <el-select
+            v-model="form.formData.roadshowType"
+            placeholder="请先选择路演形式"
+          >
+            <el-option value="线上"></el-option>
+            <el-option value="线下"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="路演平台"
+          v-if="form.formData.roadshowType === '线上' && form.formData.activityType === '路演'"
+          prop="roadshowPlatform"
+        >
+          <el-input
+            v-model="form.formData.roadshowPlatform"
+            placeholder="请输入路演平台(eg：进门财经、腾讯会议)"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          label="路演城市"
+          v-if="form.formData.roadshowType === '线下' && form.formData.activityType === '路演'"
+          prop="roadshowCity"
+        >
+          <search-dist-picker 
+            @selected="onChangeCity($event,'roadshow')"/>
+        </el-form-item>
+        <el-form-item
+          label="客户名称"
+          v-if="form.formData.activityType === '路演'"
+          prop="companyName"
+        >
+          <el-autocomplete
+            v-model="form.formData.companyName"
+            popper-class="company-autocomplete"
+            :fetch-suggestions="companySearch"
+            :trigger-on-focus="false"
+            placeholder="请输入客户名称"
+            @select="companySelect"
+            clearable
+          >
+            <template #default="{ item }">
+              <div v-if="item.nodata" style="text-align: center">暂无数据</div>
+              <div v-else>
+                <div>{{ item.CompanyName }}</div>
+              </div>
+            </template>
+          </el-autocomplete>
+        </el-form-item>
+        <!-- 客户信息 -->
+        <div class="company-info" v-if="form.formData.activityType === '路演' && form.formData.companyId && companyInfo">
+          <template v-if="companyInfo.EnglishCompany===1">
+            <p>所属国家：{{companyInfo.EnglishCountry}}</p>
+            <p>累计点击量：{{companyInfo.EnglishViewTotal}}</p>
+          </template>
+          <template v-else>
+            <p>客户状态：{{ companyInfo.Status }}</p>
+            <p>所属行业：{{ companyInfo.IndustryName }}</p>
+            <p>开通品种：{{ companyInfo.PermissionName }}</p>
+            <p>累计报告阅读次数：{{ companyInfo.ReportReadTotal }}</p> 
+          </template>
+        </div>
+        <el-form-item
+          label="会议形式"
+          v-if="form.formData.activityType === '公开会议'"
+          prop="meetingType"
+        >
+          <el-select
+            v-model="form.formData.meetingType"
+            placeholder="请先选择会议形式"
+          >
+            <el-option value="线上"></el-option>
+            <el-option value="线下"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="会议平台"
+          v-if="form.formData.meetingType === '线上' && form.formData.activityType === '公开会议'"
+          prop="meetingPlatform"
+        >
+          <el-input
+            v-model="form.formData.meetingPlatform"
+            placeholder="请输入会议平台(eg：进门财经、腾讯会议)"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          label="会议城市"
+          v-if="form.formData.meetingType === '线下' && form.formData.activityType === '公开会议'"
+          prop="meetingCity"
+        >
+          <v-distpicker 
+            ref="meetingCity"
+            @selected="onChangeCity($event, 'meeting')"
+            hide-area
+          ></v-distpicker>
+        </el-form-item>
+        <el-form-item
+          label="会议主题"
+          v-if="form.formData.activityType === '公开会议'"
+          prop="meetingTheme"
+        >
+          <el-input
+            v-model="form.formData.meetingTheme"
+            placeholder="请输入会议主题"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          label="合作方名称"
+          v-if="form.formData.activityType === '公开会议'"
+          prop="partnersName"
+        >
+          <el-input
+            v-model="form.formData.partnersName"
+            placeholder='请输入合作方名称（多个合作方用","隔开）'
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          label="活动类别"
+          v-if="form.formData.activityType === '报告电话会'"
+          prop="activityClass"
+        >
+          <el-cascader
+                :props="activityClassProps"
+                v-model="form.formData.activityClass"
+                :options="telTypeList">
+            </el-cascader>
+        </el-form-item>
+        <!-- 新增的研究员 -->
+        <div
+          v-for="researcherIdx in addResearchersIdx"
+          :key="researcherIdx"
+          class="add-researcher-box"
+        >
+          <el-form-item
+            label="研究员"
+            :prop="`selectResearchers[${researcherIdx}].researcherId`"
+            :rules="[
+              { required: true, message: '请选择研究员', trigger: 'change' },
+            ]"
+          >
+            <el-cascader
+              style="max-width: 340px;"
+              v-model="
+                form.formData.selectResearchers[researcherIdx].researcherId
+              "
+              :options="researcherList"
+              :show-all-levels="false"
+              :props="{
+                expandTrigger: 'hover',
+                children: 'ResearcherList',
+                emitPath: false,
+              }"
+              clearable
+              placeholder="请选择研究员"
+              :key="cascaderIdx"
+              @change="addUserCheckHandler"
+            />
+            <el-icon class="remove-outline" @click="delResearcher(researcherIdx)"><Remove /></el-icon>
+          </el-form-item>
+          <el-form-item label="开始时间"
+          :prop="`selectResearchers[${researcherIdx}].startTime`"
+          :rules="[
+            { required: true, message: '请选择开始时间', trigger: 'change' },
+          ]">
+            <el-col :span="12">
+              <date-picker
+                format="MM.DD(ddd)"
+                v-model:value="form.formData.selectResearchers[researcherIdx].startDate"
+                style="width: 100% !important"
+                :clearable="false"
+                :editable="false"
+              >
+                <template #icon-calendar>
+                  <el-icon><Calendar /></el-icon>
+                </template>
+              </date-picker>
+            </el-col>
+            <el-col :span="12">
+              <date-picker
+                format="HH:mm"
+                type="time"
+                :show-second="false"
+                v-model:value="form.formData.selectResearchers[researcherIdx].startTime"
+                style="width: 100% !important"
+                :clearable="false"
+                :editable="false"
+              >
+                <template #icon-calendar>
+                  <el-icon><Clock /></el-icon>
+                </template>
+              </date-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="结束时间"
+          :prop="`selectResearchers[${researcherIdx}].endTime`"
+          :rules="[
+            { required: true, message: '请选择结束时间', trigger: 'change' },
+          ]">
+            <el-col :span="12">
+              <date-picker
+                format="MM.DD(ddd)"
+                v-model:value="form.formData.selectResearchers[researcherIdx].endDate"
+                style="width: 100% !important"
+                :clearable="false"
+                :editable="false"
+              >
+                <template #icon-calendar>
+                  <el-icon><Calendar /></el-icon>
+                </template>
+              </date-picker>
+            </el-col>
+            <el-col :span="12">
+              <date-picker
+                format="HH:mm"
+                type="time"
+                :show-second="false"
+                v-model:value="form.formData.selectResearchers[researcherIdx].endTime"
+                style="width: 100% !important"
+                :clearable="false"
+                :editable="false"
+              >
+                <template #icon-calendar>
+                  <el-icon><Clock /></el-icon>
+                </template>
+              </date-picker>
+            </el-col>
+          </el-form-item>
+        </div>
+        <!-- 添加研究员按钮 -->
+        <div @click="addResearcher" class="add-box" v-if="['路演','公开会议'].includes(form.formData.activityType) && !props.edit_id ">
+          <el-icon style="font-size: 18px; margin-right: 5px"><CirclePlus /></el-icon>
+          <span>添加研究员</span>
+        </div>
+      </el-form>
+      <div class="btn-group">
+        <el-button type="primary" plain @click="cancel">取消</el-button>
+        <el-button type="primary" @click="confirm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss">
+.activity-cell-dia {
+  .el-form {
+    .el-cascader,
+    .el-select,
+    .el-autocomplete,
+    .el-input {
+      width: 100%;
+    }
+    .company-info {
+      border: 1px solid #b3d8ff;
+      background: #ecf5ff;
+      padding: 10px;
+      margin-bottom: 20px;
+      p {
+        margin: 6px 0;
+        text-indent: -70px;
+        margin-left: 70px;
+      }
+    }
+    .distpicker-address-wrapper {
+      display: flex;
+      label:nth-child(-n + 2) {
+        padding: 0 5px;
+        flex: 50%;
+        select {
+          width: 100%;
+        }
+      }
+    }
+    .add-researcher-box .el-form-item .el-form-item__content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .el-cascader {
+        padding-right: 20px;
+      }
+      .remove-outline {
+        font-size: 20px;
+        cursor: pointer;
+        color: #f00;
+      }
+    }
+    .el-col {
+      padding: 0 5px;
+    }
+  }
+  .add-box {
+    width: 100px;
+    display: flex;
+    align-items: center;
+    color: #5882ef;
+    cursor: pointer;
+    img {
+      width: 16px;
+      height: 16px;
+      margin-right: 10px;
+    }
+  }
+  .btn-group {
+    margin: 20px 0;
+    text-align: center;
+    .el-button {
+      width: 140px;
+    }
+  }
+}
+</style>

src/views/roadshow_manage/compononts/addMatterDia.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="add-matter-dia">
+    <el-dialog
+      v-dialogDrag
+      :title="edit_matter_id ? '修改事项' : '添加事项'"
+      :visible.sync="isShow"
+      :modal-append-to-body="false"
+      @close="cancel"
+      width="500px"
+    >
+      <el-form ref="form" :model="formData" label-width="80px" :rules="formRules">
+        <el-form-item label="开始时间" prop="startDate">
+          <el-col :span="12">
+            <date-picker
+              format="MM.DD(ddd)"
+              v-model="formData.startDate"
+              style="width: 100% !important"
+              :clearable="false"
+              @change="(value)=>startTimeChange('date',value)"
+            >
+              <template #icon-calendar>
+                <i class="el-icon-date"></i>
+              </template>
+            </date-picker>
+          </el-col>
+          <el-col :span="12">
+            <date-picker
+              format="HH:mm"
+              type="time"
+              :show-second="false"
+              v-model="formData.startTime"
+              style="width: 100% !important"
+              :clearable="false"
+              @change="(value)=>startTimeChange('time',value)"
+            >
+              <template #icon-calendar>
+                <i class="el-icon-time"></i>
+              </template>
+            </date-picker>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endDate">
+          <el-col :span="12">
+            <date-picker
+              format="MM.DD(ddd)"
+              v-model="formData.endDate"
+              style="width: 100% !important"
+              :clearable="false"
+            >
+              <template #icon-calendar>
+                <i class="el-icon-date"></i>
+              </template>
+            </date-picker>
+          </el-col>
+          <el-col :span="12">
+            <date-picker
+              format="HH:mm"
+              type="time"
+              :show-second="false"
+              v-model="formData.endTime"
+              style="width: 100% !important"
+              :clearable="false"
+            >
+              <template #icon-calendar>
+                <i class="el-icon-time"></i>
+              </template>
+            </date-picker>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="事项内容" prop="matterContent">
+          <el-input v-model.trim="formData.matterContent" clearable placeholder="请输入事项内容"></el-input>
+        </el-form-item>
+        <el-form-item label="修改原因" prop="EditReason" v-if="edit_matter_id">
+          <el-input v-model.trim="formData.EditReason" clearable placeholder="请输入修改原因"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="btn-group">
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="confirm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { roadshowInterence } from "@/api/api.js";
+import { activityBtnDiaConfig } from '../roleConfig';
+export default {
+  props: {
+    isShow: {
+      type: Boolean,
+      required: true,
+    },
+    edit_matter_id: {
+      type: Number
+    },
+    matter_form: {
+      type: {}
+    },
+    matter_date:{
+      type: Date,
+      default: new Date(),
+    }
+  },
+  watch: {
+    isShow(val) {
+      if(val) {
+        const { startDate,startTime,endDate,endTime,matterContent } = this.matter_form;
+        this.formData = {
+          startDate: startDate || activityBtnDiaConfig.defaultStartTime(this.matter_date),
+          startTime: startTime || activityBtnDiaConfig.defaultStartTime(this.matter_date),
+          endDate: endDate || activityBtnDiaConfig.defaultEndTime(this.matter_date),
+          endTime: endTime || activityBtnDiaConfig.defaultEndTime(this.matter_date),
+          matterContent: matterContent || '',
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formData: {
+        startDate: null,
+        startTime: null,
+        endDate: null,
+        endTime: null,
+        matterContent: "",
+      },
+      formRules: {
+        startDate: [
+					{ required: true, message: "请选择开始时间", trigger: "change" },
+				],
+        endDate: [
+					{ required: true, message: "请选择结束时间", trigger: "change" },
+				],
+        matterContent: [
+					{ required: true, message: "请输入事项内容", trigger: "blur" },
+				],
+        EditReason:[
+            {
+                required: true, message: "请输入修改原因", trigger: "blur"
+            }
+        ]
+      }
+    };
+  },
+  methods: {
+    // 取消按钮
+    cancel() {
+      this.formData = {
+        startDate: null,
+        startTime: null,
+        endDate: null,
+        endTime: null,
+        matterContent: "",
+      };
+      this.$refs.form.resetFields();
+      this.$emit("update:isShow", false);
+    },
+    // 确认按钮
+    async confirm() {
+      // 校验
+      await this.$refs.form.validate();
+
+      let params = {
+        MatterContent: this.formData.matterContent,
+        StartDate: this.$moment(this.formData.startDate).format('YYYY-MM-DD'),
+        EndDate: this.$moment(this.formData.endDate).format('YYYY-MM-DD'),
+        StartTime: this.$moment(this.formData.startTime).format('HH:mm:ss'),
+        EndTime: this.$moment(this.formData.endTime).format('HH:mm:ss'),
+        StartWeek: this.$moment(this.formData.startDate).format('ddd'),
+        EndWeek: this.$moment(this.formData.endDate).format('ddd'),
+        EditReason:this.formData.EditReason
+      }
+
+      // 发送请求
+      const { Ret } = this.edit_matter_id ? await roadshowInterence.editMatters({
+        RsMattersId: this.edit_matter_id,
+        ...params
+      }) :  await roadshowInterence.addRoadshowMatters(params);
+
+      if(Ret !== 200) return;
+      this.$message.success(this.edit_matter_id ? '提交成功' : '添加成功');
+
+      this.cancel();
+      this.$emit('ensureCallback')
+    },
+    // 开始时间发生变化
+    startTimeChange(type,value){
+      if(type=='date'){
+        this.formData.endDate = value
+        // 为了确保 修改startTime时，endDate正常显示
+        this.formData.startTime=new Date(this.$moment(value).format('YYYY-MM-DD')+' '+this.$moment(this.formData.startTime).format('HH:mm:ss'))
+      }else{
+        this.formData.endTime=new Date(this.$moment(value).add(1,'hours'))
+        // 当选择23点30分时，间隔一个小时，日期到了第二天，由于字段不同，需要赋值给 endDate
+        this.formData.endDate=new Date(this.$moment(value).add(1,'hours'))
+      }
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+.add-matter-dia {
+  .el-form {
+    .el-col {
+      padding: 0 5px;
+    }
+    .el-input {
+      width: 100%;
+    }
+  }
+  .btn-group {
+    margin: 20px 0;
+    text-align: center;
+    .el-button {
+      width: 140px;
+    }
+  }
+}
+</style>

src/views/roadshow_manage/researcherCalendar.vue

@@ -1,138 +1,138 @@
 <script setup>
-// import { ref,reactive,computed,watch } from "vue";
-// import {ElMessage,ElMessageBox} from "element-plus"
-// import { useRouter} from 'vue-router';
-// import _ from 'lodash'
-// import { InfoFilled } from '@element-plus/icons-vue'
-// import moment from "moment"
+import { ref,computed } from "vue";
+import {ElMessage} from "element-plus"
+import moment from "moment"
 
-// import { roadshowInterence } from "@/api/api.js";
-// import calendar from "@/components/calendar.vue";
-// import addActivityBtnDia from "./compononts/addActivityBtnDia.vue";
-// import addActivityCellDia from "./compononts/addActivityCellDia.vue";
-// import addMatterDia from "./compononts/addMatterDia.vue";
-// import { researcherCalendarConfig } from "./roleConfig";
+import { roadshowInterence } from "@/api/api.js";
+import calendar from "@/components/calendar.vue";
+import addActivityBtnDia from "./compononts/addActivityBtnDia.vue";
+import addActivityCellDia from "./compononts/addActivityCellDia.vue";
+import { researcherCalendarConfig } from "./roleConfig";
 
-// // 活动列表
-// const eventList=ref([])
-// // 研究员列表
-// const researcherList=ref([])
-// // 选择的研究员
-// const selectResearcher=ref("")
-// // 按钮添加活动弹窗是否显示
-// const isActivityBtnDiaShow=ref(false)
-// const activityStartDate=ref(new Date())
-// // 日历添加活动弹窗是否显示
-// const isActivityCellDiaShow=ref(false)
-// // 点击单元格对应日期时间
-// const cellDate=ref(null)
-// // 子组件默认数据
-// const sonData=ref(null)
-// const edit_id=ref(0)
-// const edit_rs_id=ref(0)
+// 活动列表
+const eventList=ref([])
+// 研究员列表
+const researcherList=ref([])
+// 选择的研究员
+const selectResearcher=ref("")
+// 按钮添加活动弹窗是否显示
+const isActivityBtnDiaShow=ref(false)
+const activityStartDate=ref(new Date())
+// 日历添加活动弹窗是否显示
+const isActivityCellDiaShow=ref(false)
+// 子组件默认数据
+const sonData=ref(null)
+const edit_id=ref(0)
+const edit_rs_id=ref(0)
 
-// // 删除弹窗显示
-// const isDeleteDiaShow=ref(false)
-// // 删除原因
-// const deleteReason=ref("")
-// const rowInfo=ref('')
+// 删除弹窗显示
+const isDeleteDiaShow=ref(false)
+// 删除原因
+const deleteReason=ref("")
+const rowInfo=ref('')
 
-// const edit_matter_id=ref(0)
+const edit_matter_id=ref(0)
 // const isAddMatterDiaShow=ref(false)
-// const matter_form=ref({})
+const matter_form=ref({})
 
-// // 是否显示添加按钮
-// const isShowAddActivityBtn=computed(()=>{
-//   const role = localStorage.getItem("Role");
-//   return researcherCalendarConfig.showAddActivityBtnList.includes(role);
-// })
+// 是否显示添加按钮
+const isShowAddActivityBtn=computed(()=>{
+  const role = localStorage.getItem("Role");
+  return researcherCalendarConfig.showAddActivityBtnList.includes(role);
+})
 
-// const calendarRef=ref(null)
+const calendarRef=ref(null)
 
-// // 获取研究员列表
-// const getResearcherList=async()=>{
-//   // 发送请求
-//   const res = await roadshowInterence.getResearcherList();
-//   if (res.Ret === 200) {
-//     researcherList.value = formatResearcherList(res.Data);
-//   }
-// }
+// 获取研究员列表
+const getResearcherList=async()=>{
+  // 发送请求
+  const res = await roadshowInterence.getResearcherList();
+  if (res.Ret === 200) {
+    // researcherList.value = formatResearcherList(res.Data);
+    const ficcList = formatResearcherList(res.Data.find(i=>i.GroupName==='ficc').ResearcherList||[]);
+    const raiList = formatResearcherList(res.Data.find(i=>i.GroupName==='权益').ResearcherList||[]);
 
-// // 获取活动列表
-// const getEventList=async()=>{
+    researcherList.value = [{
+      label:'ficc',
+      ResearcherList:ficcList
+    },{
+      label:'权益',
+      ResearcherList:raiList
+    }]
+  }
+}
 
-//   //当前的起始日期
-//   const { currentStart,currentEnd } = calendarRef.value.calendarApi.view
+// 获取活动列表
+const getEventList=async()=>{
 
-//   const { formateDate } = calendarRef.value
+  //当前的起始日期
+  const { currentStart,currentEnd } = calendarRef.value.calendarApi.view
 
-//   // 获取本周日程
-//   const res = await roadshowInterence.getCalendarDetail({
-//     StartDate: formateDate(currentStart),
-//     EndDate: formateDate(new Date(currentEnd.getTime()- 24*60*60*1000)),
-//     ResearcherId: selectResearcher.value || -1
-//   });
+  const { formateDate } = calendarRef.value
 
-//   eventList.value = [
-//     ...(res.Data.CalendarList || []),
-//     ...(res.Data.RsMattersList || []),
-//   ].map((item, index) => {
-//     return { ...item, id: index };
-//   });
-// }
+  // 获取本周日程
+  const res = await roadshowInterence.getCalendarDetail({
+    StartDate: formateDate(currentStart),
+    EndDate: formateDate(new Date(currentEnd.getTime()- 24*60*60*1000)),
+    ResearcherId: selectResearcher.value || -1
+  });
 
-// // 对获取到的研究员列表做处理
-// const formatResearcherList=(list)=>{
-//   list.forEach((group) => {
-//     // 对组做处理
-//     group.label = group.GroupName;
-//     // 如果有列表
-//     group.ResearcherList && group.ResearcherList.forEach((item) => {
-//       // 对研究员做处理
-//       item.label = item.RealName;
-//       item.value = item.AdminId
-//       // {
-//       //   ResearcherId: item.AdminId,
-//       //   ResearcherName: item.RealName,
-//       // };
-//     });
-//   });
-//   // 去掉ficc全体选项
-//   return list.filter((group) => group.GroupName !== "ficc全体");
-// }
+  eventList.value = [
+    ...(res.Data.CalendarList || []),
+    ...(res.Data.RsMattersList || []),
+  ].map((item, index) => {
+    return { ...item, id: index };
+  });
+}
 
-// // 添加说明弹窗
-// const addActivityBtn=()=>{
-//   //当前的起始日期
-//   const { currentStart } = calendarRef.value.calendarApi.view;
-//   edit_id.value = 0;
-//   edit_rs_id.value = 0;
-//   activityStartDate.value = currentStart
-//   isActivityBtnDiaShow.value = true;
-// }
+// 对获取到的研究员列表做处理
+const formatResearcherList=(list)=>{
+  list.forEach((group) => {
+    // 对组做处理
+    group.label = group.GroupName;
+    // 如果有列表
+    group.ResearcherList && group.ResearcherList.forEach((item) => {
+      // 对研究员做处理
+      item.label = item.RealName;
+      item.value = item.AdminId
+    });
+  });
+  // 去掉ficc全体选项
+  return list.filter((group) => group.GroupName !== "ficc全体");
+}
 
-// // 单元格添加说明事件
-// const cellClick=(startDate)=>{
-//   if (!selectResearcher.value)
-//     return ElMessage.warning("请先选择研究员");
-//   const endDate = new Date(startDate.getTime() + 1000 * 60 * 60);
-//   sonData.value = {
-//     selectResearchers: [
-//       {
-//         researcherId: selectResearcher.value,
-//         startDate: startDate,
-//         startTime: startDate,
-//         endDate: endDate,
-//         endTime: endDate,
-//       },
-//     ],
-//   };
-//   edit_id.value = 0;
-//   edit_rs_id.value = 0;
-//   isActivityCellDiaShow.value = true;
-// }
+// 添加说明弹窗
+const addActivityBtn=()=>{
+  //当前的起始日期
+  const { currentStart } = calendarRef.value.calendarApi.view;
+  edit_id.value = 0;
+  edit_rs_id.value = 0;
+  activityStartDate.value = currentStart
+  isActivityBtnDiaShow.value = true;
+}
 
-// /* 编辑事项时 回显内容 */
+// 单元格添加说明事件
+const cellClick=(startDate)=>{
+  if (!selectResearcher.value)
+    return ElMessage.warning("请先选择研究员");
+  const endDate = new Date(startDate.getTime() + 1000 * 60 * 60);
+  sonData.value = {
+    selectResearchers: [
+      {
+        researcherId: selectResearcher.value,
+        startDate: startDate,
+        startTime: startDate,
+        endDate: endDate,
+        endTime: endDate,
+      },
+    ],
+  };
+  edit_id.value = 0;
+  edit_rs_id.value = 0;
+  isActivityCellDiaShow.value = true;
+}
+
+/* 编辑事项时 回显内容 */
 // const editCallback=({ ActivityType,RoadshowType,RoadshowPlatform,City,Province,CompanyId,CompanyName,ResearcherId,RsCalendarResearcherId,
 //   Theme,CooperationName,ActivityCategory,StartDate,EndDate,RsCalendarId,RsMattersId,StartTime,EndTime,MatterContent })=>{
 //   if(RsCalendarId) { // 编辑活动
@@ -176,78 +176,76 @@
 //   }
 // }
 
-// // 添加活动后刷新
-// const addCallback=()=>{
-//   getEventList();
-// }
+// 添加活动后刷新
+const addCallback=()=>{
+  getEventList();
+}
 
 
-//   // 审核删除
-// const deleteRoadshow=(row)=>{
-//   if(['内部会议'].includes(row.ActivityType)) return delNormalHandle(row);
+  // 审核删除
+const deleteRoadshow=(row)=>{
+  if(['内部会议'].includes(row.ActivityType)) return delNormalHandle(row);
 
-//   rowInfo.value = row;
-//   isDeleteDiaShow.value = true;
+  rowInfo.value = row;
+  isDeleteDiaShow.value = true;
   
-// }
+}
 
-// // 删除弹窗取消操作
-// const deleteDiaCancel=()=>{
-//   deleteReason.value = "";
-//   rowInfo.value = null;
-//   isDeleteDiaShow.value = false;
-// }
+// 删除弹窗取消操作
+const deleteDiaCancel=()=>{
+  deleteReason.value = "";
+  rowInfo.value = null;
+  isDeleteDiaShow.value = false;
+}
 
-// // 删除弹窗确定操作
-// const deleteDiaConfirm=async()=>{
-//   if (!deleteReason.value) return ElMessage.warning("删除原因不能为空");
+// 删除弹窗确定操作
+const deleteDiaConfirm=async()=>{
+  if (!deleteReason.value) return ElMessage.warning("删除原因不能为空");
 
-//   const { Ret } = await roadshowInterence.deleteRoadshow({
-//     RsCalendarId: rowInfo.value.RsCalendarId,
-//     RsCalendarResearcherId: rowInfo.value.RsCalendarResearcherId,
-//     DeleteReason: deleteReason.value,
-//   });
+  const { Ret } = await roadshowInterence.deleteRoadshow({
+    RsCalendarId: rowInfo.value.RsCalendarId,
+    RsCalendarResearcherId: rowInfo.value.RsCalendarResearcherId,
+    DeleteReason: deleteReason.value,
+  });
   
-//   if( Ret !== 200) return;
-//   ElMessage.success('删除成功');
+  if( Ret !== 200) return;
+  ElMessage.success('删除成功');
 
-//   deleteDiaCancel();
-//   getEventList();
-// }
-// // 处理从出差日历过来的参数
-// const dealwithFromBusiness=()=>{
-//   if(sessionStorage.getItem('businessToResearcherParams')){
-//     let fromBusinessParams=JSON.parse(sessionStorage.getItem('businessToResearcherParams'))
-//     let nowDate = moment(new Date()).startOf('week').diff(moment(new Date(fromBusinessParams.date)),'weeks')
-//     selectResearcher.value=fromBusinessParams.researcherId
-//     if(nowDate>0){
-//       // 前一周
-//       calendarRef.value.toogelDate('prev')
-//     }else if(nowDate<0){
-//       // 后一周
-//       calendarRef.value.toogelDate('next')
-//     }else{
-//       //为零，没有改变
-//       getEventList()
-//     }
-//     // 用完即弃
-//     sessionStorage.removeItem('businessToResearcherParams')
-//   }
-// }
+  deleteDiaCancel();
+  getEventList();
+}
+// 处理从出差日历过来的参数
+const dealwithFromBusiness=()=>{
+  if(sessionStorage.getItem('businessToResearcherParams')){
+    let fromBusinessParams=JSON.parse(sessionStorage.getItem('businessToResearcherParams'))
+    let nowDate = moment(new Date()).startOf('week').diff(moment(new Date(fromBusinessParams.date)),'weeks')
+    selectResearcher.value=fromBusinessParams.researcherId
+    if(nowDate>0){
+      // 前一周
+      calendarRef.value.toogelDate('prev')
+    }else if(nowDate<0){
+      // 后一周
+      calendarRef.value.toogelDate('next')
+    }else{
+      //为零，没有改变
+      getEventList()
+    }
+    // 用完即弃
+    sessionStorage.removeItem('businessToResearcherParams')
+  }
+}
 
-// getResearcherList()
-// dealwithFromBusiness()
+getResearcherList()
+dealwithFromBusiness()
 </script>
 
 <template>
   <div class="researcher-calendar">
-    研究员日历
-    <!-- <el-card class="researcher-calendar-context"> -->
+    <el-card class="researcher-calendar-context">
       <!-- 日程组件 -->
-      <!-- <calendar
+      <calendar
         ref="calendarRef"
         :eventList="eventList"
-        @eventClick="eventClick"
         @cellClick="cellClick"
         @weekChange="getEventList"
         @editCallback="editCallback"
@@ -278,34 +276,24 @@
           >
         </template>
       </calendar>
-    </el-card> -->
+    </el-card>
     <!-- 按钮活动弹窗 -->
-    <!-- <addActivityBtnDia
-      :isShow.sync="isActivityBtnDiaShow"
+    <addActivityBtnDia
+      v-model:isShow="isActivityBtnDiaShow"
       :start_date="activityStartDate"
-      ref="addActivityBtnDia"
       @ensureCallback="addCallback"
-    ></addActivityBtnDia> -->
+    ></addActivityBtnDia>
     <!-- 日历活动弹窗 -->
-    <!-- <addActivityCellDia
-      :isShow.sync="isActivityCellDiaShow"
+    <addActivityCellDia
+      v-model:isShow="isActivityCellDiaShow"
       :initData="sonData"
       :edit_id="edit_id"
       :edit_rs_id="edit_rs_id"
-      ref="addActivityCellDia"
-      @ensureCallback="addCallback"
-    ></addActivityCellDia> -->
-
-    <!-- 事项弹窗  -->
-    <!-- <addMatterDia 
-      :isShow.sync="isAddMatterDiaShow" 
-      :edit_matter_id="edit_matter_id" 
-      :matter_form="matter_form"
       @ensureCallback="addCallback"
-    /> -->
+    ></addActivityCellDia>
 
     <!-- 删除确认弹窗 -->
-    <!-- <el-dialog
+    <el-dialog
       title="删除"
       :visible.sync="isDeleteDiaShow"
       :modal-append-to-body="false"
@@ -323,7 +311,7 @@
         <el-button @click="deleteDiaCancel">取消</el-button>
         <el-button type="primary" @click="deleteDiaConfirm">确定</el-button>
       </span>
-    </el-dialog> -->
+    </el-dialog>
   </div>
 </template>
 

src/views/roadshow_manage/roleConfig/activityBtnDiaConfig.js

@@ -0,0 +1,47 @@
+//销售
+const seller_obj = {
+    defaultActivityType: '内部会议',
+    activityTypeList:['路演','内部会议','公开会议'],
+}
+
+//研究员 ficc管理员
+const researcher_obj = {
+    defaultActivityType: '内部会议',
+    activityTypeList:['内部会议'],
+}
+//管理员
+const admin_obj = {
+    defaultActivityType: '报告电话会',
+    activityTypeList:['报告电话会','内部会议'],
+}
+
+
+// 按钮添加活动弹窗权限
+export default {
+    // ficc销售权限
+    ficc_seller: seller_obj,
+    // 权益销售权限
+    rai_seller: seller_obj,
+    // ficc组长权限
+    ficc_group: seller_obj,
+    // 权益组长权限
+    rai_group: seller_obj,
+    // ficc管理员权限
+    ficc_admin: researcher_obj,
+    // 权益管理员权限
+    rai_admin: researcher_obj,
+    // ficc研究员权限
+    ficc_researcher: researcher_obj,
+    // ficc研究员(最早定义)权限
+    researcher: researcher_obj,
+    // admin,中级管理者,普通管理者权限
+    admin: admin_obj,
+    // 默认的开始时间为 日历开始日期 的15.30 时间间隔一小时
+    defaultStartTime: (date=new Date()) => {
+        return new Date(date.toLocaleDateString() + " 15:30");
+    },
+    // 默认结束时间为当前第二天的16.00
+    defaultEndTime: (date=new Date()) => {
+        return new Date(date.toLocaleDateString() + " 16:30");
+    },
+}

src/views/roadshow_manage/roleConfig/activityCellDiaConfig.js

@@ -0,0 +1,39 @@
+//销售
+const seller_obj = {
+    defaultActivityType: '路演',
+    activityTypeList:['路演','内部会议','公开会议'],
+}
+
+//研究员 ficc管理员
+const researcher_obj = {
+    defaultActivityType: '内部会议',
+    activityTypeList:['内部会议'],
+}
+//管理员
+const admin_obj = {
+    defaultActivityType: '报告电话会',
+    activityTypeList:['报告电话会','内部会议'],
+}
+
+
+// 单元格添加活动弹窗权限
+export default {
+    // ficc销售权限
+    ficc_seller: seller_obj,
+    // 权益销售权限
+    rai_seller: seller_obj,
+    // ficc组长权限
+    ficc_group: seller_obj,
+    // 权益组长权限
+    rai_group: seller_obj,
+    // ficc管理员权限
+    ficc_admin: researcher_obj,
+    // 权益管理员权限
+    rai_admin: researcher_obj,
+    // ficc研究员权限
+    ficc_researcher: researcher_obj,
+    // ficc研究员(最早定义)权限
+    researcher: researcher_obj,
+    // admin,中级管理者,普通管理者权限
+    admin: admin_obj
+}

src/views/roadshow_manage/roleConfig/hook.js

@@ -0,0 +1,150 @@
+import { watch,computed } from "vue";
+import { ElMessage } from "element-plus";
+export const researcherActivityHook=({form,companyInfo,formRef,researcherList})=>{
+	console.log({form,companyInfo,formRef});
+	const rules={
+		// 表单校验规则
+		activityType: [
+			{ required: true, message: "请选择活动类型", trigger: "change" },
+		],
+		roadshowType: [
+			{ required: true, message: "请选择路演形式", trigger: "change" },
+		],
+		roadshowPlatform: [
+			{ required: true, message: "请选择路演平台", trigger: "blur" },
+		],
+		roadshowCity: [
+			{ required: true, message: "请选择路演城市", trigger: "blur" },
+		],
+		companyName: [
+			{ required: true, message: "请选择客户", trigger: "blur" },
+		],
+		meetingType: [
+			{ required: true, message: "请选择会议形式", trigger: "blur" },
+		],
+		meetingPlatform: [
+			{ required: true, message: "请选择会议平台", trigger: "blur" },
+		],
+		meetingCity: [
+			{ required: true, message: "请选择会议城市", trigger: "blur" },
+		],
+		meetingTheme: [
+			{ required: true, message: "请输入会议主题", trigger: "blur" },
+		],
+		partnersName: [
+			{ required: true, message: "请输入合作方名称", trigger: "blur" },
+		],
+		activityClass: [
+			{ required: true, message: "请选择活动类别", trigger: "blur" },
+		],
+	}
+	const activityClassProps={
+		value:"ActivityTypeName",
+		label:"ActivityTypeName",
+		children:"ChildList"
+	}
+	//ficc研究员列表
+	const ficcReasearcherList=computed(()=>{
+		return (researcherList.value.find(i=>i.label==='ficc')||{}).ResearcherList||[]
+	})
+	//rai研究员列表
+	const raiReasercherList=computed(()=>{
+		return (researcherList.value.find(i=>i.label==='权益')||{}).ResearcherList||[]
+	})
+	/* 添加完成后 拼接动态内容 */
+	const setDynamicLink=(type)=>{
+		switch (type) {
+			case '内部会议' : return {
+				text: '添加成功，已加入研究员日历',
+				content: `可前往【我的日历】-【${type}】查看`,
+				query: {
+					act_tab: 3
+				},
+			}
+			case '报告电话会' : return {
+				text: '添加成功，已加入研究员日历',
+				content: `可前往【我的日历】-【${type}】查看`,
+				query: {
+					act_tab: 4
+				},
+			}
+			case '路演' : return {
+				text: '活动申请已提交，请等待研究员处理',
+				content: `可前往【我的日历】-【待处理申请】查看`,
+				query: {
+					act_tab: 1
+				},
+			}
+			case '公开会议' : return {
+				text: '活动申请已提交，请等待研究员处理',
+				content: `可前往【我的日历】-【待处理申请】查看`,
+				query: {
+					act_tab: 1
+				},
+			}
+		}
+	}
+
+	// 清除客户信息
+	const companyClear=()=>{
+		form.formData.companyId = '';
+		form.formData.companyName = "";
+		companyInfo.value = null;
+	}
+
+	//添加多个研究员选择时 校验是否重复
+	const addUserCheckHandler=(val)=>{
+		let arr = form.formData.selectResearchers.filter(item => item.researcherId === val);
+		if(arr.length > 1) return ElMessage.warning('研究员已重复添加');
+	}
+
+	// 改变路演城市 重置城市校验
+	const onChangeCity=(val, type)=>{
+		console.log(val)
+		if (type === "roadshow") {
+			form.formData.roadshowCity = [val.province.value,val.city.value];
+			formRef.value.clearValidate(['roadshowCity'])
+		} else if (type === "meeting") {
+			form.formData.meetingCity = [val.province.value, val.city.value];
+			formRef.value.clearValidate(['meetingCity'])
+		}
+	}
+
+	 	
+	const findResearcherById=(id,type='ficc')=>{
+		const list = type==='ficc'?ficcReasearcherList.value:raiReasercherList.value
+		const flatList = list.map(item=>item.ResearcherList||[]).flat(Infinity)
+		return flatList.find(user=>user.AdminId===id)
+	}
+	
+	const findResearcherName=(id)=>{
+		const isFicc = findResearcherById(id,'ficc')
+		const isRai = findResearcherById(id,'rai')
+		return isFicc?isFicc.RealName:isRai?isRai.RealName:''
+	}
+
+	watch(()=>form.formData.companyName,(val)=>{
+		if(!val) {
+			companyClear();
+		}
+	})
+	watch(()=>form.formData.roadshowType,(val)=>{
+		if(!val) {
+			formRef.value && formRef.value.clearValidate(['roadshowPlatform','roadshowCity'])
+		}
+	})
+	watch(()=>form.formData.meetingType,(val)=>{
+		if(!val) {
+			formRef.value && formRef.value.clearValidate(['meetingPlatform','meetingCity'])
+		}
+	})
+	return {
+		rules,
+		activityClassProps,
+		setDynamicLink,
+		companyClear,
+		addUserCheckHandler,
+		onChangeCity,
+		findResearcherName
+	}
+}

src/views/roadshow_manage/roleConfig/index.js

@@ -0,0 +1,30 @@
+// import bus from '@/api/bus';
+import {router} from '@/router/index'
+import { ElMessageBox } from 'element-plus';
+
+// 按钮添加活动弹窗权限
+import activityBtnDiaConfig from "./activityBtnDiaConfig"
+// 单元格添加活动弹窗权限
+import activityCellDiaConfig from "./activityCellDiaConfig"
+// 我的日历页面权限
+import * as myCalendarConfig from "./myCalendarConfig"
+// 研究员日历页面权限
+import researcherCalendarConfig from "./researcherCalendarConfig"
+
+export {activityBtnDiaConfig,activityCellDiaConfig,myCalendarConfig,researcherCalendarConfig}
+
+
+/* 点击完确认跳转弹窗 */
+export const confirmDiaLink = (sub_msg,message,query) => {
+	ElMessageBox.confirm(
+		`<span>${sub_msg}</span><p>${message}</p>`,
+		'添加活动成功',
+		{
+		dangerouslyUseHTMLString:true,
+		showCancelButton: true,
+		confirmButtonText: '前去查看',
+		cancelButtonText: '关闭',
+	}).then(action => {
+		router.push({path:'/myCalendar',query})
+	}).catch(()=>{})
+}

src/views/roadshow_manage/roleConfig/myCalendarConfig.js

@@ -0,0 +1,246 @@
+// 研究员
+export const ENUM_RESEARCHLIST = ['ficc_researcher', 'researcher', 'rai_researcher','ficc_admin', 'rai_admin',];
+
+// 销售/组长
+export const sellerList = ['ficc_seller', 'rai_seller', 'ficc_group', 'rai_group'];
+
+// admin
+const adminList = [ 'admin'];
+
+//顶部tabs
+export const getTabs = (role) => {
+	return ENUM_RESEARCHLIST.includes(role) 
+		? [
+			{
+				label: '待处理申请',
+				key:1
+			},
+			{
+				label: '已处理申请',
+				key:2
+			},
+			{
+				label: '内部会议',
+				key:3
+			},
+			{
+				label: '事项',
+				key:5
+			},
+		] : sellerList.includes(role)
+		? [
+			{
+				label: '待处理申请',
+				key:1
+			},
+			{
+				label: '已处理申请',
+				key:2
+			},
+			{
+				label: '内部会议',
+				key:3
+			}, //研报后台5.9 销售也增加事项
+			{
+				label: '事项',
+				key:5
+			},
+		] : adminList.includes(role)
+		? [
+			{
+				label: '内部会议',
+				key:3
+			},
+			{
+				label: '报告电话会',
+				key:4
+			},
+		] : [];
+}
+
+//表格列
+export const tableColums = (type) => {
+	const role = localStorage.getItem('Role');
+
+	return type === 1 ? [
+		{
+			label: '活动时间',
+			key: 'time',
+			widthsty: '200px'
+		},
+		{
+			label: '研究员',
+			key: 'ResearcherName',
+			hidden: !sellerList.includes(role),
+			// minwidthsty: '115px',
+		},
+		{
+			label: '活动类型',
+			key: 'ActivityType',
+			// minwidthsty: '115px',
+		},
+		{
+			label: '活动形式',
+			key: 'RoadshowType',
+		},
+		{
+			label: '会议主题',
+			key: 'Theme',
+			// widthsty: '100px',
+		},
+		{
+			label: '客户(合作方)名称',
+			key: 'company',
+			// widthsty: '100px',
+		},
+		{
+			label: '状态',
+			key: 'Status',
+			hidden: !sellerList.includes(role),
+			// widthsty: '100px',
+		},
+		{
+			label: '销售',
+			key: 'SysUserRealName',
+			hidden: !ENUM_RESEARCHLIST.includes(role),
+			// widthsty: '100px',
+		},
+		{
+			label: '提交时间',
+			key: 'CreateTime',
+			// widthsty: '100px',
+		}
+	] : type === 2 ? [
+		{
+			label: '活动时间',
+			key: 'time',
+			widthsty: '200px'
+		},
+		{
+			label: '研究员',
+			key: 'ResearcherName',
+			hidden: !sellerList.includes(role),
+			// minwidthsty: '115px',
+		},
+		{
+			label: '活动类型',
+			key: 'ActivityType',
+			// minwidthsty: '115px',
+		},
+		{
+			label: '活动形式',
+			key: 'RoadshowType',
+		},
+		{
+			label: '会议主题',
+			key: 'Theme',
+			// widthsty: '100px',
+		},
+		{
+			label: '客户(合作方)名称',
+			key: 'company',
+			// widthsty: '100px',
+		},
+		{
+			label: '状态',
+			key: 'Status',
+			hidden: !sellerList.includes(role),
+			// widthsty: '100px',
+		},
+		{
+			label: '销售',
+			key: 'SysUserRealName',
+			hidden: !ENUM_RESEARCHLIST.includes(role),
+			// widthsty: '100px',
+		},
+		{
+			label: '提交时间',
+			key: 'CreateTime',
+			// widthsty: '100px',
+		},
+		{
+			label: '状态',
+			key: 'Status',
+			hidden: !ENUM_RESEARCHLIST.includes(role),
+			// widthsty: '100px',
+		},
+	] : type === 3 ? [
+		{
+			label: '活动时间',
+			key: 'time',
+			widthsty: '200px'
+		},
+		{
+			label: '活动类型',
+			key: 'ActivityType',
+			// minwidthsty: '115px',
+		},
+		{
+			label: '参会研究员',
+			key: 'ResearcherName',
+			minwidthsty: '200px'
+		},
+		{
+			label: '添加时间',
+			key: 'CreateTime',
+			// widthsty: '100px',
+		}
+	] : type === 4 ? [
+		{
+			label: '活动时间',
+			key: 'time',
+			widthsty: '200px'
+		},
+		{
+			label: '活动类型',
+			key: 'ActivityType',
+			// minwidthsty: '115px',
+		},
+		{
+			label: '活动类别',
+			key: 'ActivityCategory',
+			// widthsty: '100px',
+		},
+		{
+			label: '参会研究员',
+			key: 'ResearcherName',
+			minwidthsty: '200px',
+		},
+		{
+			label: '添加时间',
+			key: 'CreateTime',
+			// widthsty: '100px',
+		}
+	] : [
+		{
+			label: '活动时间',
+			key: 'time',
+			widthsty: '200px'
+		},
+		{
+			label: '活动类型',
+			key: 'ActivityType',
+			// minwidthsty: '115px',
+		},
+		{
+			label: '活动内容',
+			key: 'MatterContent',
+			// widthsty: '100px',
+		},
+		{
+			label: '添加时间',
+			key: 'CreateTime',
+			// widthsty: '100px',
+		}
+	]
+}
+
+//操作
+export const handleArr = (type) => {
+	if(type === 1 && sellerList.includes(localStorage.getItem('Role'))) return ['撤回']
+	if(type === 1 && ENUM_RESEARCHLIST.includes(localStorage.getItem('Role'))) return ['接受','拒绝']
+	if(type === 2 && sellerList.includes(localStorage.getItem('Role'))) return ['拒绝理由','修改重提','删除']
+	if([3,4,5].includes(type)) return ['修改','删除']
+
+	return []
+}

src/views/roadshow_manage/roleConfig/researcherCalendarConfig.js

@@ -0,0 +1,4 @@
+// 研究员日历权限
+export default {
+    showAddActivityBtnList: ['ficc_seller', 'rai_seller', 'ficc_group', 'rai_group', 'ficc_admin', 'rai_admin', 'ficc_researcher', 'researcher', 'admin']
+}