接口联调

src/api/ssbg/api.js

@@ -17,6 +17,13 @@ export const researchEvents = params => {
 	return get('/roadshow/researcher/calendar/detail', params)
 }
 
+/**
+ * 销售员日历日程 StartDate  EndDate SellerId
+ */
+ export const sellerEvents = params => {
+	return get('/roadshow/seller/calendar/detail', params)
+}
+
 /**
  * 我的日历日程 StartDate  EndDate
  */

src/views/ssbg/components/calendar.vue

@@ -41,6 +41,7 @@ const handleDateClick = ({date}) => {
   emits('cellClick',date)
 };
 
+let popContentArr = ref([])
 /* 点击日程 */
 const handleEventClick = (_) => {
   let id = _.event.id; // 获取当前点击日程的ID
@@ -51,8 +52,100 @@ const handleEventClick = (_) => {
   let title = setDynamicTitle(event_item);
 
   selectEventInfo.value = {...event_item,title};
+  getPopoverContent()
   isShowPopup.value = true;
 };
+function getPopoverContent(){
+    const {StartDate,StartTime,StartWeek,EndDate,EndTime,EndWeek} = selectEventInfo.value
+    //前两项默认是开始时间和结束时间
+    const popContent = [{
+        key:'StartDate',
+        label:'开始时间：',
+        content:`${StartDate} ${StartTime} （${StartWeek}）`,
+    },{
+        key:'EndDate',
+        label:'结束时间：',
+        content:`${EndDate} ${EndTime} （${EndWeek}）`,
+    }]
+    //根据ActivityType判断是什么类型,根据RoadshowType展示对应信息
+    const {ActivityType,RoadshowType} = selectEventInfo.value
+    const {Province,City} = selectEventInfo.value
+    //ActivityType为路演时，需要显示的内容
+    const {RoadshowPlatform,CompanyName} = selectEventInfo.value
+    const RoadshowContent = [{
+        key:'RoadshowPlatform',
+        label:'路演平台：',
+        content:`${RoadshowPlatform}`,
+        RoadshowType:'线上'
+    },{
+        key:'RoadshowCity',
+        label:'路演城市：',
+        content:`${Province}${City}`,
+        RoadshowType:'线下'
+    },{
+        key:'CompanyName',
+        label:'客户名称：',
+        content:`${CompanyName}`,
+        RoadshowType:RoadshowType,
+    }].filter(item=>item.RoadshowType===RoadshowType)
+    //ActivityType为公开会议时，需要显示的内容
+    const {Theme,CooperationName} = selectEventInfo.value
+    const MeetingContent = [
+        {
+            key:'RoadshowPlatform',
+            label:'会议平台：',
+            content:`${RoadshowPlatform}`,
+            RoadshowType:'线上'
+        },{
+            key:'RoadshowCity',
+            label:'会议城市：',
+            content:`${Province}${City}`,
+            RoadshowType:'线下'
+        },{
+            key:'Theme',
+            label:'会议主题：',
+            content:`${Theme}`,
+            RoadshowType:RoadshowType
+        },{
+            key:'CooperationName',
+            label:'合作方名称：',
+            content:`${CooperationName}`,
+            RoadshowType:RoadshowType
+        }].filter(item=>item.RoadshowType===RoadshowType)
+    ////ActivityType不为空时，需要显示的内容
+    const {ResearcherName,SysUserRealName} = selectEventInfo.value
+    const SuppleContent=[{
+        key:'ResearcherName',
+        label:'研究员：',
+        content:`${ResearcherName}`,
+    },{
+        key:'SysUserRealName',
+        label:'发起人：',
+        content:`${SysUserRealName}`,
+    }]
+    //ActivityType为空时，需要显示的内容
+    const {MatterContent,EditReason,ModifyTime} = selectEventInfo.value
+    const MattersContent=[{
+        key:'MatterContent',
+        label:'事项内容：',
+        content:`${MatterContent}`,
+    },{
+        key:'EditReason',
+        label:'最近修改记录：',
+        content:`${EditReason}`,
+        otherContent:`${moment(ModifyTime).format('YYYY-MM-DD HH:mm:ss')}`
+    }].filter(item=>{return item.content.length})
+
+    const contentMap = {
+        '路演':RoadshowContent,
+        '公开会议':MeetingContent,
+    }
+    if(ActivityType){
+        popContentArr.value = [...popContent,...contentMap[ActivityType]||[],...SuppleContent]
+    }else{
+        popContentArr.value = [...popContent,...MattersContent]
+    }
+}
 
 let calendarOptions = ref({
   height: 'auto',
@@ -235,37 +328,14 @@ defineExpose({ toogeCurrentWeek,calendarApi });
             <p>{{selectEventInfo.ActivityType?`${selectEventInfo.RoadshowType}${selectEventInfo.ActivityType}`:'事项'}}</p>
         </div>
         <div class="popover-body">
-            <p>开始时间：{{`${selectEventInfo.StartDate} ${selectEventInfo.StartTime}（${selectEventInfo.StartWeek}）`}}</p>
-            <p>结束时间：{{`${selectEventInfo.EndDate} ${selectEventInfo.EndTime}（${selectEventInfo.EndWeek}）`}}</p>
-            <template v-if="selectEventInfo.ActivityType==='路演'">
-                <p v-if="selectEventInfo.RoadshowType==='线上'">
-                    路演平台：{{selectEventInfo.RoadshowPlatform}}
-                </p>
-                <p v-else>
-                    路演城市：{{selectEventInfo.Province}}{{selectEventInfo.City}}
-                </p>
-                <p>客户名称：{{selectEventInfo.CompanyName}}</p>
-            </template>
-            <template v-if="selectEventInfo.ActivityType==='公开会议'">
-                <p v-if="selectEventInfo.RoadshowType==='线上'">
-                    会议平台：{{selectEventInfo.RoadshowPlatform}}
-                </p>
-                <p v-else>
-                    会议城市：{{selectEventInfo.Province}}{{selectEventInfo.City}}
-                </p>
-                <p>会议主题：{{selectEventInfo.Theme}}</p>
-                <p>合作方名称：{{selectEventInfo.CooperationName}}</p>
-            </template>
-            <template v-if="selectEventInfo.ActivityType">
-                <p>研究员：{{selectEventInfo.ResearcherName}}</p>
-                <p>发起人：{{selectEventInfo.SysUserRealName}}</p>
-            </template>
-            <template v-else>
-                <p>事项内容：{{selectEventInfo.MatterContent}}</p>
-                <p v-if="selectEventInfo.modifyReason">
-                    最近变更记录：{{}}（<span>{{}}</span>）
-                </p>
-            </template>
+            <!-- 换行的内容需要对齐,所以dom结构设置成了下面这样 -->
+            <div class="content-item" v-for="item in popContentArr" :key="item.key">
+                <span class="label">{{item.label}}</span>
+                <div class="content">
+                    <p>{{item.content}}</p>
+                    <p v-if="item.otherContent" class="other-text">{{item.otherContent}}</p>
+                </div>
+            </div>
         </div>
     </div>
   </Popup>
@@ -314,7 +384,9 @@ defineExpose({ toogeCurrentWeek,calendarApi });
   }
   ::v-deep(.fc-timegrid-event ) {
     border-left: 8px solid #3385FF !important;
-
+  }
+  ::v-deep(.fc-timegrid-col-events){
+      margin:0 !important;
   }
 }
 
@@ -326,7 +398,7 @@ defineExpose({ toogeCurrentWeek,calendarApi });
   }
 }
 .pop-dialog-wrap{
-    padding:60px;
+    padding: 40px 20px;
     .pop-header{
         text-align: center;
         font-size: 32px;
@@ -334,9 +406,20 @@ defineExpose({ toogeCurrentWeek,calendarApi });
         margin-bottom: 20px;
     }
     .popover-body{
-        p{
-            font-size: 30px;
-            margin-top: 10px;
+        font-size: 30px;
+        .content-item{
+            display: flex;
+            margin-top: 20px;
+            .label{
+                display: inline-block;
+                width:220px;
+                text-align: right;
+            }
+            .content{
+                .other-text{
+                    color: #999;
+                }
+            }
         }
     }
 }

src/views/ssbg/components/swiperCalendar.vue

@@ -2,7 +2,7 @@
 import { reactive, toRefs, ref, watch, onMounted } from 'vue';
 import { DatetimePicker , Popup } from 'vant';
 import { useRoute } from 'vue-router';
-import { myEvents,researchEvents} from '@/api/ssbg/api';
+import { myEvents,researchEvents,sellerEvents} from '@/api/ssbg/api';
 import moment from 'moment';
 import 'moment/dist/locale/zh-cn';
 moment.locale('zh-cn');
@@ -176,6 +176,7 @@ function onSelectCalendarConfirm(e){
 async function getEventList (){
   //日期:weekDateList[0][0],weekDateList[length-1][6]
   const length = state.weekDateList.length
+  let planData = {}
   //如果是研究员/销售员日历,那等选择研究员/销售员后再获取
   if(route.path==='/ssbg/roadshow/mine'){
     if(localStorage.getItem('ssbg-role') === 'admin') return;
@@ -184,7 +185,7 @@ async function getEventList (){
         EndDate: moment(state.weekDateList[length-1][6]).format('YYYY-MM-DD')
     })
     if(code!==200) return 
-    getPlanDates(data)
+    planData = data
   }else if(route.path==='/ssbg/roadshow/researcher'){
     if(!props.selectUserValue) return 
     const { code,data } = await researchEvents({
@@ -192,12 +193,20 @@ async function getEventList (){
         EndDate: moment(state.weekDateList[length-1][6]).format('YYYY-MM-DD'),
         ResearcherId: props.selectUserValue
     })
-
     if(code !== 200) return
-    getPlanDates(data)
+    planData = data
   }else if(route.path==='/ssbg/roadshow/seller'){
     //销售员日历
+    if(!props.selectUserValue) return 
+    const { code,data } = await sellerEvents({
+        StartDate: moment(state.weekDateList[0][0]).format('YYYY-MM-DD'),
+        EndDate: moment(state.weekDateList[length-1][6]).format('YYYY-MM-DD'),
+        SellerId: props.selectUserValue
+    })
+    if(code !== 200) return
+    planData = data
   }
+  getPlanDates(planData)
 }
 
 let planDates = ref([])

src/views/ssbg/roadshow/sellerCalendar.vue

@@ -6,7 +6,7 @@ import moment from 'moment';
 import 'moment/dist/locale/zh-cn';
 moment.locale('zh-cn');
 
-import { researchEvents,apiSystemUsers} from '@/api/ssbg/api';
+import { sellerEvents,apiSystemUsers} from '@/api/ssbg/api';
 import Calendar from '../components/calendar.vue';
 
 
@@ -39,10 +39,10 @@ const getEventList = async () => {
 
   const { currentStart } = calendarRef.value.calendarApi.view;
 
-  const { code,data } = await researchEvents({
+  const { code,data } = await sellerEvents({
     StartDate: moment(currentStart).format('YYYY-MM-DD'),
     EndDate: moment(currentStart).format('YYYY-MM-DD'),
-    ResearcherId: Number(selectUserValue.value)
+    SellerId: Number(selectUserValue.value)
   })
 
   if(code !== 200) return