Merge branch 'yb_back5.9'

src/api/ssbg/api.js

@@ -10,6 +10,13 @@ export const researcherList = params=>{
 	return get('/roadshow/researcher/list',params)
 }
 
+/**
+ * 路演销售员列表
+ */
+export const sellerList = params=>{
+	return get('/custom/seller/roadshow_ficc/list',params)
+}
+
 /**
  * 研究员日历日程 StartDate  EndDate ResearcherId
  */
@@ -17,6 +24,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/router/ssbg/index.js

@@ -15,6 +15,11 @@ export const ssbgRoutes = [
 				path: 'researcher',
 				name: 'researcherCalendar',
 				component: () => import("@/views/ssbg/roadshow/rsCalendar.vue")
+			},
+			{
+				path: 'seller',
+				name: 'sellerCalendar',
+				component: () => import("@/views/ssbg/roadshow/sellerCalendar.vue")
 			}
 		]
 	},

src/views/ssbg/components/calendar.vue

@@ -18,6 +18,10 @@ const props = defineProps({
   eventList: {
     type: Array,
     required: true
+  },
+  selectUserValue:{
+      type:Number,
+      default:0
   }
 })
 
@@ -37,6 +41,7 @@ const handleDateClick = ({date}) => {
   emits('cellClick',date)
 };
 
+let popContentArr = ref([])
 /* 点击日程 */
 const handleEventClick = (_) => {
   let id = _.event.id; // 获取当前点击日程的ID
@@ -47,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',
@@ -172,7 +269,7 @@ defineExpose({ toogeCurrentWeek,calendarApi });
 <template>
   <Sticky>
     <div class="header">
-      <swiperCalendar @dateChange="datechangeHandle" ref="swiperCalendarRef"/>
+      <swiperCalendar @dateChange="datechangeHandle" ref="swiperCalendarRef" :selectUserValue="selectUserValue"/>
     </div>
   </Sticky>
   <FullCalendar :options="calendarOptions" ref="FullCalendarRef">
@@ -184,8 +281,8 @@ defineExpose({ toogeCurrentWeek,calendarApi });
     </template>
   </FullCalendar>
 
-<!-- 弹窗层 -->
-  <Popup
+<!-- 弹窗层 旧版-->
+<!--   <Popup
     v-model:show="isShowPopup"
     closeable
   >
@@ -219,6 +316,28 @@ defineExpose({ toogeCurrentWeek,calendarApi });
         <p v-if="selectEventInfo.CooperationName">{{ selectEventInfo.CooperationName }}</p>
         <p v-if="['公开会议','内部会议','路演'].includes(selectEventInfo.ActivityType)">发起人:{{selectEventInfo.SysUserRealName}}</p>
     </div>
+  </Popup> -->
+  <!-- 新版 -->
+  <Popup
+    v-model:show="isShowPopup"
+    round closeable
+    style="width:90%;"
+  >
+    <div class="pop-dialog-wrap">
+        <div class="pop-header">
+            <p>{{selectEventInfo.ActivityType?`${selectEventInfo.RoadshowType}${selectEventInfo.ActivityType}`:'事项'}}</p>
+        </div>
+        <div class="popover-body">
+            <!-- 换行的内容需要对齐,所以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>
 </template>
 
@@ -226,7 +345,7 @@ defineExpose({ toogeCurrentWeek,calendarApi });
 
 .header {
   background: #fff;
-  padding-bottom: 20px;
+  /* padding-bottom: 20px; */
   box-shadow: 0px 3px 6px rgba(172, 172, 172, 0.16);
   .tab-cont {
 		padding: 30px;
@@ -265,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;
   }
 }
 
@@ -276,4 +397,30 @@ defineExpose({ toogeCurrentWeek,calendarApi });
     color: #333;
   }
 }
+.pop-dialog-wrap{
+    padding: 40px 20px;
+    .pop-header{
+        text-align: center;
+        font-size: 32px;
+        font-weight: bold;
+        margin-bottom: 20px;
+    }
+    .popover-body{
+        font-size: 30px;
+        .content-item{
+            display: flex;
+            margin-top: 20px;
+            .label{
+                display: inline-block;
+                width:220px;
+                text-align: right;
+            }
+            .content{
+                .other-text{
+                    color: #999;
+                }
+            }
+        }
+    }
+}
 </style>

src/views/ssbg/components/swiperCalendar.vue

@@ -1,15 +1,22 @@
 <script setup>
 import { reactive, toRefs, ref, watch, onMounted } from 'vue';
 import { DatetimePicker , Popup } from 'vant';
+import { useRoute } from 'vue-router';
+import { myEvents,researchEvents,sellerEvents} from '@/api/ssbg/api';
 import moment from 'moment';
 import 'moment/dist/locale/zh-cn';
 moment.locale('zh-cn');
 import _ from 'lodash';
 
+const route = useRoute();
 const emit = defineEmits(['dateChange']);
-
 const calendarRef = ref(null);
-
+const props = defineProps({
+  selectUserValue:{
+      type:Number,
+      default:0
+  }
+})
 const weekDays = ref([
   {
     label: '一',
@@ -78,9 +85,13 @@ const getRecentWeek = (day) => {
 
   state.weekDateList = weekeList;
   state.weekFirstDay = currenWeekStart;
+  
+  //获取日历日程
+  getEventList()
 };
 getRecentWeek(current.value.currentDate);
 
+
 /* 设置周日历选中的位置 */
 const setWeekIndex = (selectDate) => {
   const currentWeekDateList = state.weekDateList[1];
@@ -161,6 +172,57 @@ function onSelectCalendarConfirm(e){
   showCalendar.value=false
 }
 
+//获取日历日程
+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;
+    const { code,data } = await myEvents({
+        StartDate: moment(state.weekDateList[0][0]).format('YYYY-MM-DD'),
+        EndDate: moment(state.weekDateList[length-1][6]).format('YYYY-MM-DD')
+    })
+    if(code!==200) return 
+    planData = data
+  }else if(route.path==='/ssbg/roadshow/researcher'){
+    if(!props.selectUserValue) return 
+    const { code,data } = await researchEvents({
+        StartDate: moment(state.weekDateList[0][0]).format('YYYY-MM-DD'),
+        EndDate: moment(state.weekDateList[length-1][6]).format('YYYY-MM-DD'),
+        ResearcherId: props.selectUserValue
+    })
+    if(code !== 200) return
+    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([])
+//获取有日程的日期
+function getPlanDates({CalendarList,RsMattersList}){
+    const calendarDay = CalendarList.map(item=>{
+        return [item.StartDate,item.EndDate]
+    })
+    const MatterDay = RsMattersList.map(item=>{
+        return [item.StartDate,item.EndDate]
+    })
+    planDates.value = [...calendarDay.flat(),...MatterDay.flat()]
+    planDates.value = Array.from(new Set(planDates.value))
+    console.log('arr',planDates.value)
+}
+
 /* 选中日期 更新日历 */
 watch(
   () => state.selectDate,
@@ -172,6 +234,10 @@ watch(
   }
 );
 
+watch(()=>props.selectUserValue,()=>{
+    getEventList()
+})
+
 defineExpose({
   getRecentWeek,
   selectDateHandle
@@ -216,14 +282,17 @@ const { weekDateList, selectDate, moveIndex, touch } = toRefs(state);
           :class="{
             act: selectDate === day,
             today: moment().format('YYYY-MM-DD') === day,
+            dot:planDates.includes(day)
           }"
           @touchstart.stop="selectDateHandle(day, day_index)"
         >
-          {{
-            moment().format('YYYY-MM-DD') === day
-              ? '今'
-              : moment(day).format('DD')
-          }}
+          <span class="text">
+                {{
+                    moment().format('YYYY-MM-DD') === day
+                    ? '今'
+                    : moment(day).format('DD')
+                }}
+          </span>
         </li>
       </ul>
     </div>
@@ -281,23 +350,49 @@ const { weekDateList, selectDate, moveIndex, touch } = toRefs(state);
       z-index: 11;
       li {
         color: #333;
-        height: 40px;
-        line-height: 40px;
+        height: 50px;
         width: calc(100% / 7);
         text-align: center;
         padding: 10px 0;
         margin: 0 24px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .text{
+            display: inline-block;
+            width:38px;
+            height: 38px;
+            border-radius: 50%;
+            margin-top: -20px;
+            text-align: center;
+            line-height: 40px;
+        }
         &.today {
-          background: #b4cef5;
-          border-radius: 50%;
+          .text{
+            background: #b4cef5;
+          }
           color: #fff;
         }
         &.act {
-          background: #39a9ed;
-          /* border-radius: 4px; */
-          border-radius: 50%;
+          .text{
+            background: #39a9ed;
+          }
           color: #fff;
         }
+        &.dot{
+            &::after{
+                content: '';
+                position: absolute;
+                bottom:20px;
+                left: 50%;
+                transform: translateX(-50%);
+                width:10px;
+                height:10px;
+                border-radius: 50%;
+                background-color: #D9D9D9;
+            }
+        }
       }
     }
   }

src/views/ssbg/roadshow/common-calendar.js

@@ -42,6 +42,10 @@ export const getTabsByRole = (role) => {
 				label: '内部会议',
 				key:3
 			},
+			{
+				label: '事项',
+				key:5
+			},
 		] : ADMINLIST.includes(role)
 		? [
 			{

src/views/ssbg/roadshow/myCalendar.vue

@@ -17,6 +17,7 @@ localStorage.setItem('ssbg-token',route.query.token ||  '5e532bc5fa7281aebaa6d89
 localStorage.setItem('ssbg-role',route.query.role ||  'researcher');
 
 const calendarRef = ref(null);//日历ref
+const showArr = ['ficc_seller', 'rai_seller', 'ficc_group', 'rai_group','seller',]
 const actionsList = ref([
   {
     label: '今天',
@@ -27,7 +28,7 @@ const actionsList = ref([
     label: '添加事项',
     key: 'add_matter',
 		icon: 'add-o',
-    show:  ['ficc_researcher', 'researcher', 'rai_researcher','ficc_admin', 'rai_admin'].includes(localStorage.getItem('ssbg-role'))
+    show:  [...['ficc_researcher', 'researcher', 'rai_researcher','ficc_admin', 'rai_admin'],...showArr].includes(localStorage.getItem('ssbg-role'))
   },
 ]);//底部固定数据
 const eventList = ref([]);//日程信息

src/views/ssbg/roadshow/rsCalendar.vue

@@ -168,6 +168,7 @@ document.title = '研究员日历';
     <Calendar 
       ref="calendarRef"
       :eventList="eventList"
+      :selectUserValue="Number(state.selectResearcher)"
       @dateChange="getEventList" 
       @cellClick="cellClickHandle" 
     />

src/views/ssbg/roadshow/sellerCalendar.vue

@@ -0,0 +1,244 @@
+<script setup>
+import { ref, reactive,toRefs,onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { Icon, Toast,TreeSelect,Popup,Cascader } from 'vant';
+import moment from 'moment';
+import 'moment/dist/locale/zh-cn';
+moment.locale('zh-cn');
+
+import { sellerEvents,sellerList} from '@/api/ssbg/api';
+import Calendar from '../components/calendar.vue';
+
+
+const route = useRoute();
+localStorage.setItem('ssbg-token',route.query.token ||  '5e532bc5fa7281aebaa6d89960b54c4ab22f1ab18e969258c634a7940fdb0922');
+
+const actionsList = ref([
+  {
+    label: '今天',
+    key: 'weeknow',
+    img: import("@/assets/ssbg/calendar_ico.png"),
+  },
+  {
+    label: '选择销售员',
+    key: 'choose',
+    img: import("@/assets/ssbg/choose_ico.png"),
+  },
+]);
+
+const calendarRef = ref(null);
+
+const state = reactive({
+  selectResearcher: '', // 选中的研究员
+  eventList: [],//日程信息
+});
+
+/* 获取日历日程列表 */
+const getEventList = async () => {
+  if(!selectUserValue.value) return
+
+  const { currentStart } = calendarRef.value.calendarApi.view;
+
+  const { code,data } = await sellerEvents({
+    StartDate: moment(currentStart).format('YYYY-MM-DD'),
+    EndDate: moment(currentStart).format('YYYY-MM-DD'),
+    SellerId: Number(selectUserValue.value)
+  })
+
+  if(code !== 200) return
+
+  state.eventList = [
+    ...(data.CalendarList || []),
+    ...(data.RsMattersList || []),
+  ].map((item, index) => ( { ...item, id: index }));
+};
+
+/* 点击日历表格添加活动 */
+const cellClickHandle = (date) => {
+    //啥也不干
+};
+
+/* 底部操作 */
+const dealActionHandler = (type) => {
+  const deal_methods_handles = {
+    add: addActivityHandleByBtn,
+    weeknow: toogeCurrentWeek,
+    choose: selectSellerHandle,
+  };
+  deal_methods_handles[type]();
+};
+
+/* 点击按钮添加活动 */
+const addActivityHandleByBtn = () => {
+  wx.miniProgram.navigateTo({
+    url: '/pages-roadshow/addActivity/index',
+  });
+};
+
+/* 切换为今天 */
+const toogeCurrentWeek = () => {
+  calendarRef.value.toogeCurrentWeek();
+};
+
+// 选择用户
+const userFieldNames=ref({
+    text: 'AdminName',
+    value: 'AdminId',
+    children: 'Child',
+})
+let selectUserValue=ref('')
+let isSellerPicker=ref(false)
+let userOpts=ref([])
+// 获取系统中所有用户’
+const getSellerList = ()=>{
+    sellerList().then(res=>{
+        if(res.code==200){
+            userOpts.value=res.data.List||[]
+            userOpts.value = userOpts.value.map(i=>{
+                if(!i.AdminName){
+                    i.AdminName = i.GroupName
+                }
+                if(!i.AdminId){
+                    i.AdminId = i.GroupId
+                }
+                return i
+                })
+        }
+    })
+}
+const selectSellerHandle = ()=>{
+    isSellerPicker.value = true
+}
+
+const onFinish = (e)=>{
+    getEventList()
+    isSellerPicker.value=false
+}
+onMounted(() => {
+    getSellerList()
+})
+
+const { eventList } = toRefs(state);
+
+document.title = '销售员日历';
+</script>
+
+<!--  -->
+<template>
+  <div class="rs-container">
+    <Calendar 
+      ref="calendarRef"
+      :eventList="eventList"
+      :selectUserValue="Number(selectUserValue)"
+      @dateChange="getEventList" 
+      @cellClick="cellClickHandle" 
+    />
+    <!-- v-if="isWxprogram()" -->
+    <div class="fix-action" >
+      <ul class="action-ul">
+        <li
+          v-for="item in actionsList"
+          key="item.key"
+          @click="dealActionHandler(item.key)"
+        >
+          <Icon :name="item.icon" class="item-icon" v-if="item.icon" />
+          <img
+            class="item-img"
+            src="@/assets/ssbg/calendar_ico.png"
+            alt=""
+            v-else-if="item.key === 'weeknow'"
+          />
+          <img
+            class="item-img"
+            src="@/assets/ssbg/choose_ico.png"
+            alt=""
+            v-else-if="item.key === 'choose'"
+          />
+          {{ item.label }}
+        </li>
+      </ul>
+    </div>
+    <!-- 选择销售员 -->
+    <Popup v-model:show="isSellerPicker" position="bottom">
+        <Cascader
+            v-model="selectUserValue"
+            title="请选择用户"
+            :options="userOpts"
+            :field-names="userFieldNames"
+            active-color="#3385FF"
+            @close="isSellerPicker = false"
+            @finish="onFinish"
+        />
+    </Popup>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.rs-container {
+  .fix-action {
+    height: 160px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+    background-color: #fff;
+    box-shadow: 0px -3px 6px rgba(172, 172, 172, 0.16);
+    padding-top: 20px;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+    .action-ul {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      color: #3385ff;
+      li:hover {
+        opacity: 0.8;
+      }
+      .item-icon {
+        font-size: 52px;
+        display: block;
+        text-align: center;
+        margin: 0 auto 10px;
+      }
+      .item-img {
+        display: block;
+        width: 46px;
+        height: 46px;
+        margin: 0 auto 10px;
+      }
+    }
+  }
+
+  .select-rs-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 30px 20px;
+
+    .cancel {
+      color: #969799;
+    }
+
+    .ensure {
+      color: #576b95;
+    }
+  }
+
+  .van-tree-select {
+		::v-deep(.van-sidebar-item--select:before) {
+			background-color: #1989fa;
+		}
+
+		::v-deep(.van-tree-select__item--active) {
+			color: #1989fa;
+		}
+
+    ::v-deep(.van-tree-select__selected) {
+      position: absolute !important;
+    }
+
+	}
+}
+</style>