路演管理-路演反馈；研究员出差表

src/router/modules/roadShowRoutes.js

@@ -43,11 +43,14 @@ export default [
 					title:'研究员路演统计'
 				}
 			},
-			// {
-			// 	path: "roadshowFeedback",
-			// 	name: "路演反馈",
-			// 	component: () => import('@/views/roadshow_manage/feedbackList.vue')
-			// },
+			{
+				path: "roadshowFeedback",
+				name: "roadshowFeedback",
+				component: () => import('@/views/roadshow_manage/feedbackList.vue'),
+				meta:{
+					title:'路演反馈'
+				}
+			},
 			{
 				path: "researcherBusinessTrip",
 				name: "researcherBusinessTrip",

src/views/roadshow_manage/feedbackList.vue

@@ -0,0 +1,349 @@
+<script setup>
+import { ref } from 'vue';
+import moment from 'moment';
+import {ElMessage} from 'element-plus'
+import _ from 'lodash'
+import $ from 'jquery'
+
+import { roadshowInterence } from '@/api/api.js';
+import mPage from '@/components/mPage.vue';
+
+const isShowSend=ref(false)
+const cascaderIdx=ref(0)
+const select_researchers=ref([])//选中的研究员
+const select_checks=ref([])
+const researcherList=ref([])//研究员列表
+const tableData=ref([])
+
+const tableColums=[
+	{
+		label: '活动时间',
+		key: 'time',
+		widthsty: '200px',
+	},
+	{
+		label: '活动类型',
+		key: 'ActivityType'
+	},
+	{
+		label: '活动形式',
+		key: 'RoadshowType'
+	},
+	{
+		label: '客户名称',
+		key: 'company'
+	},
+	{
+		label: '研究员',
+		key: 'ResearcherName',
+		widthsty: '100px',
+	},
+	{
+		label: '销售',
+		key: 'SysUserRealName',
+		widthsty: '100px',
+	},
+	{
+		label: '反馈状态',
+		key: 'status',
+	},
+	{
+		label: '反馈详情',
+		key: 'feedbackDetail',
+	},
+]
+
+const page_no=ref(1)
+const pageSize=ref(10)
+const total=ref(0)
+const statusMap=new Map([
+	[1,'未请求'],
+	[2,'待反馈'],
+	[3,'已反馈'],
+])
+
+const feedbackDetailDia=ref(false)
+const feedDetailObj=ref({})
+
+
+// 获取研究员列表
+const getResearcherList=()=>{
+	roadshowInterence.getResearcherList().then(res=> {
+		if (res.Ret !== 200) return
+		//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;
+		// 如果有列表
+		group.ResearcherList && group.ResearcherList.forEach((item) => {
+			// 对研究员做处理
+			item.label = item.RealName;
+			item.value = item.AdminId;
+		});
+	});
+	// 去掉ficc全体选项
+	return list.filter((group) => group.GroupName !== "ficc全体");
+}
+
+/* 获取表格数据 */
+const getTableData=()=>{
+	roadshowInterence.feedbackList({
+		PageSize: pageSize.value,
+		CurrentIndex: page_no.value,
+		FeedbackType: isShowSend.value ? 1 : 0,
+		ResearcherId: select_researchers.value.join(',')
+	}).then(res => {
+		if(res.Ret !== 200) return
+
+		const { Data } = res;
+
+		tableData.value = Data.List || [];
+		total.value = Data.Paging.Totals;
+	})
+}
+
+/* 查看反馈详情 */
+const lookDetail=({ FeedbackRequestTime,FeedbackTime,FeedbackContent })=>{
+
+	feedbackDetailDia.value = true;
+	feedDetailObj.value = {
+		FeedbackRequestTime,
+		FeedbackTime,
+		FeedbackContent
+	}
+}
+
+const switchTypeHandle=(val)=>{
+	page_no.value=1; 
+	getTableData();
+	if(val) {
+		$('.has-gutter .el-table-column--selection').find('.el-checkbox__input').addClass('is-disabled');
+		$('.has-gutter .el-table-column--selection').find('.el-checkbox').css({
+			pointerEvents: 'none',
+		});
+		
+	} else {
+		$('.has-gutter .el-table-column--selection').find('.el-checkbox__input').removeClass('is-disabled');
+		$('.has-gutter .el-table-column--selection').find('.el-checkbox').css({
+			pointerEvents: 'auto',
+		});
+	}
+}
+
+/* 页码改变 */
+const handleCurrentChange=(page, index)=>{
+	page_no.value = page;
+	getTableData();
+}
+
+/* 研究员变化 */
+const researcherChange=()=>{
+	getTableData();
+}
+
+/* 移除研究员 */
+const removeResearcher=(val)=>{
+	select_researchers.value = select_researchers.value.filter(item => item !== val);
+	cascaderIdx.value++;
+}
+
+/* 选中行 */
+const selectChangeHandle=(val)=>{
+	select_checks.value = val.length ? val.map(item => ({
+		RsCalendarResearcherId: item.RsCalendarResearcherId
+	})) : [];
+
+	console.log(select_checks.value)
+
+}
+
+/* 发送反馈请求 */
+const sendFeedbackHandle=_.debounce(function() {
+	if(!select_checks.value.length) return ElMessage.warning('请选择需要反馈的路演')
+
+	roadshowInterence.sendFeedback({
+		List: select_checks.value
+	}).then(res => {
+		if(res.Ret !== 200) return;
+
+		ElMessage.success('发送成功')
+		
+		getTableData();
+
+	})
+},500)
+
+getTableData();
+getResearcherList();
+
+</script>
+
+<template>
+	<div class="feedback-container">
+		<div class="cont-top">
+			<div style="display: flex;align-items: center">
+				<el-checkbox v-model="isShowSend" @change="switchTypeHandle">显示已发送反馈请求的路演</el-checkbox>
+				<el-cascader
+					v-model="select_researchers"
+					style="margin-left: 30px;"
+					:options="researcherList"
+					:show-all-levels="false"
+					:props="{
+						multiple: true,
+						children: 'ResearcherList',
+						value: 'AdminId',
+						emitPath: false,
+					}"
+					:key="cascaderIdx"
+					clearable
+					collapse-tags
+					placeholder="请选择研究员"
+					@change="researcherChange"
+					@remove-tag="removeResearcher"
+				/>
+			</div>
+			<el-button type="primary" @click="sendFeedbackHandle">发送反馈请求</el-button>
+		</div>
+
+		<el-table
+			:data="tableData"
+			@selection-change="selectChangeHandle"
+			element-loading-text="数据加载中..."
+			class="table"
+			border
+		>
+			<el-table-column
+				type="selection"
+				:selectable="row=> row.FeedbackStatus === 1"
+				width="55">
+			</el-table-column>
+			<el-table-column
+				v-for="item in tableColums"
+				:key="item.label"
+				:label="item.label"
+				:width="item.widthsty"
+				:min-width="item.minwidthsty"
+				align="center"
+			>
+				<template #default="{row}">
+					<span v-if="item.key === 'time'">
+						{{
+							row.StartDate === row.EndDate
+							? (moment(new Date(row.StartDate + " " + row.StartTime)).format(
+								"MM.DD(ddd) HH:mm") + '~' +  moment(new Date(row.EndDate + " " + row.EndTime)).format("HH:mm"))
+							: (
+								moment(new Date(row.StartDate + " " + row.StartTime)).format(
+								"MM.DD(ddd) HH:mm") + '~' + moment(new Date(row.EndDate + " " + row.EndTime)).format("MM.DD(ddd) HH:mm")
+							)
+						}}
+					</span>
+
+					<!-- 活动形式 -->
+					<span v-else-if="item.key === 'RoadshowType'">
+						{{row.RoadshowType}} {{ row.RoadshowType === '线上' ? `(${row.RoadshowPlatform}  )` : `(${row.Province}${row.City})`}}
+					</span>
+
+					<!-- 客户拼接 -->
+					<span v-else-if="item.key === 'company'">
+						{{ row.CompanyName + (row.CompanyStatus ? `(${row.CompanyStatus})` : '') }}
+					</span>
+
+					<span 
+						v-else-if="item.key === 'status'" 
+						:class="[{deletesty: row.FeedbackStatus === 2},
+						{successty: row.FeedbackStatus === 3}
+						]"
+					>
+						{{ statusMap.get(row.FeedbackStatus) }}
+					</span>
+
+					<span 
+						v-else-if="item.key === 'feedbackDetail'" 
+					>
+						<span class="editsty" v-if="row.FeedbackStatus !== 1" @click="lookDetail(row)">查看详情</span>
+					</span>
+
+					<span v-else>{{ row[item.key] }}</span>
+				</template>
+			</el-table-column>
+			<template #empty>
+				<div style="line-height:44px;margin:60px 0;color:#999;">
+					<img src="~@/assets/img/cus_m/nodata.png" alt="" style="display:block;width:160px;height:128px;margin: auto;">
+					<span>暂无数据</span>
+				</div>
+			</template>
+
+		</el-table>
+		<div class="bottom">
+			<m-page
+				:total="total"
+				:page_no="page_no"
+				@handleCurrentChange="handleCurrentChange"
+			/>
+		</div>
+
+		<el-dialog 
+			v-model="feedbackDetailDia"
+      width="500px"
+      title="反馈详情"
+			top="25vh"
+      @close="feedbackDetailDia = false"
+		>
+			<div class="content" style="padding-bottom: 30px;">
+				<p style="margin: 10px 0;">请求时间：{{feedDetailObj.FeedbackRequestTime}}</p>
+				<p style="margin: 10px 0;">反馈时间：{{feedDetailObj.FeedbackTime}}</p>
+				<p style="margin: 10px 0;text-indent: -70px;margin-left: 70px;">反馈内容：{{feedDetailObj.FeedbackContent}}</p>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<style lang='scss' scoped>
+*{ box-sizing: border-box;}
+.feedback-container {
+	min-height: calc(100vh - 120px);
+	background-color: #fff;
+	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
+	border-radius: 4px;
+	padding: 20px 30px;
+	.cont-top {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.table {
+		box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);
+		margin:20px 0;
+	}
+	.bottom {
+		height: 40px;
+	}
+}
+</style>
+<style lang="scss">
+.tip-poper {
+	max-width: 300px;
+}
+.feedback-dia {
+	.el-message-box__header {
+		background: #409EFF;
+		.el-message-box__title {
+			color: #fff;
+		}
+	}
+}
+</style>

src/views/roadshow_manage/researcherBusinessTrip.vue

@@ -1,110 +1,117 @@
 
 <script setup>
-// import { ref,reactive,nextTick } from "vue";
-// import moment from "moment";
-// import $ from "jquery"
-// import { ArrowLeft,ArrowRight } from '@element-plus/icons-vue'
+import { ref,reactive,nextTick } from "vue";
+import moment from "moment";
+import $ from "jquery"
+import { ArrowLeft,ArrowRight } from '@element-plus/icons-vue'
 
-// import { roadshowInterence } from "@/api/api.js";
-// import {bussinessTripH} from '@/views/business_trip_manage/hooks/bussinessTripH.js'
+import { roadshowInterence } from "@/api/api.js";
+import {bussinessTripH} from '@/views/business_trip_manage/hooks/bussinessTripH.js'
 
-// const bussinessTripCom = bussinessTripH()
+const bussinessTripCom = bussinessTripH()
 
-// const daysArr=['周一','周二','周三','周四','周五','周六','周日']
+const daysArr=['周一','周二','周三','周四','周五','周六','周日']
 
-// const researcherList=ref([]) // 研究员列表
-// const defaultSalesProps=reactive({
-//   children: "ResearcherList",
-//   value: "AdminId",
-//   emitPath: false,
-// }) //研究员级联配置
-// const tableDayColumns=ref([])
-// const researcher=ref('')
-// const datalist=ref([])
-// const weekQuery=ref(0)
+const researcherList=ref([]) // 研究员列表
+const defaultSalesProps=reactive({
+  children: "ResearcherList",
+  value: "AdminId",
+  emitPath: false,
+}) //研究员级联配置
+const tableDayColumns=ref([])
+const researcher=ref('')
+const datalist=ref([])
 
-// // 获取研究员列表
-// const getResearcherList=async()=>{
-//   // 发送请求
-//   const res = await roadshowInterence.getResearcherList();
-//   if (res.Ret === 200) {
-//     researcherList.value = formatResearcherList(res.Data);
-//   }
-// }
-// // 对获取到的研究员列表做处理
-// const formatResearcherList=(list)=>{
-//   list.forEach((group) => {
-//     // 对组做处理
-//     group.label = group.GroupName;
-//     // 如果有列表
-//     group.ResearcherList &&
-//       group.ResearcherList.forEach((item) => {
-//         // 对研究员做处理
-//         item.label = item.RealName;
-//       });
-//   });
-//   // 去掉ficc全体选项
-//   return list.filter((group) => group.GroupName !== "ficc全体");
-// }
-// const getWeekDays=(weeknum,dateList)=>{
-//   // dateList 日期数组  weeknum 周数
-//   let arrList=[]
+// 获取研究员列表
+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;
+    // 如果有列表
+    group.ResearcherList &&
+      group.ResearcherList.forEach((item) => {
+        // 对研究员做处理
+        item.label = item.RealName;
+      });
+  });
+  // 去掉ficc全体选项
+  return list.filter((group) => group.GroupName !== "ficc全体");
+}
+const getWeekDays=(weeknum,dateList)=>{
+  // dateList 日期数组  weeknum 周数
+  let arrList=[]
 
-//   for (let i = 0; i < weeknum; i++) {
-//     arrList[i]=[]
-//     if(dateList && dateList.length>0){
-//       // 有数据返回 能拿到后端返回的日期数组
-//       for (let j = 0; j < 7; j++) {
-//         let momentItem=moment(dateList[(i*7+j)])
-//         arrList[i].push(momentItem.format('MM/DD')+daysArr[momentItem.weekday()])
-//       }
-//     }
-//   }
-//   return arrList;
-// }
-// /* 获取表格数据 */
-// const getTableData=()=>{
-//   let param={
-//     AdminId:researcher.value||0,
-//     WeekQuery:weekQuery.value,
-//     BaseQueryDate:bussinessTripCom.BaseDate.value
-//   }
-//   roadshowInterence.getResearcherBusinessTrip(param).then((res) => {
-//     if (res.Ret !== 200) return;
-//     bussinessTripCom.BaseDate.value = res.Data.BaseDate
-//     const Data = res.Data.GroupList || []
+  for (let i = 0; i < weeknum; i++) {
+    arrList[i]=[]
+    if(dateList && dateList.length>0){
+      // 有数据返回 能拿到后端返回的日期数组
+      for (let j = 0; j < 7; j++) {
+        let momentItem=moment(dateList[(i*7+j)])
+        arrList[i].push(momentItem.format('MM/DD')+daysArr[momentItem.weekday()])
+      }
+    }
+  }
+  return arrList;
+}
+/* 获取表格数据 */
+const getTableData=()=>{
+  let param={
+    AdminId:researcher.value||0,
+    WeekQuery:bussinessTripCom.weekQuery.value,
+    BaseQueryDate:bussinessTripCom.BaseDate.value
+  }
+  roadshowInterence.getResearcherBusinessTrip(param).then((res) => {
+    if (res.Ret !== 200) return;
+    bussinessTripCom.BaseDate.value = res.Data.BaseDate
+    const Data = res.Data.GroupList || []
 
-//     //处理数据结构
-//     let tempData=Data.filter(it => it.ResearcherList && it.ResearcherList.length > 0)
-//     tempData.forEach((item)=>{
-//       item.showDetail=true
-//     })
-//     // 取出出差表所有的日期
-//     let weekDateList =  tempData[0]?tempData[0].ResearcherList[0].BusinessTripList.map(item => item.WeekDate):[]
-//     // 获取表格头文本
-//     tableDayColumns.value= getWeekDays(2,weekDateList)
+    //处理数据结构
+    let tempData=Data.filter(it => it.ResearcherList && it.ResearcherList.length > 0)
+    tempData.forEach((item)=>{
+      item.showDetail=true
+    })
+    // 取出出差表所有的日期
+    let weekDateList =  tempData[0]?tempData[0].ResearcherList[0].BusinessTripList.map(item => item.WeekDate):[]
+    // 获取表格头文本
+    tableDayColumns.value= getWeekDays(2,weekDateList)
 
-//     datalist.value = tempData;
-//     nextTick(()=>{
-//       $("table")
-//         .find("td")
-//         .css({ width: '5.556%' });
-//       $("table")
-//         .find(".thead-rs")
-//         .css({ width: '11.111%' });
-//     })
-//   });
-// }
+    datalist.value = tempData;
+    nextTick(()=>{
+      $("table")
+        .find("td")
+        .css({ width: '5.556%' });
+      $("table")
+        .find(".thead-rs")
+        .css({ width: '11.111%' });
+    })
+  });
+}
 
-// getResearcherList()
-// getTableData()
+getResearcherList()
+getTableData()
 
 </script>
 
 <template>
   <div class="statistic-container">
-    研究员出差表
-    <!-- <div class="statistic-select">
+    <div class="statistic-select">
       <el-cascader
         v-model="researcher"
         placeholder="请选择研究员"
@@ -120,10 +127,10 @@
       >
       </el-cascader>
       <div class="center">
-          <el-button type="primary" @click="bussinessTripCom.toogelDate(1)" style="width: 140px;" 
+          <el-button type="primary" @click="bussinessTripCom.toogelDate(1,getTableData)" style="width: 140px;" 
           size="large" ><el-icon :size="14" style="margin-right: 4px;"><ArrowLeft /></el-icon> 上两周</el-button>
-          <el-button type="primary" @click="bussinessTripCom.toogelDate(0)" style="width: 140px;" size="large">本期</el-button>
-          <el-button type="primary" @click="bussinessTripCom.toogelDate(2)" style="width: 140px;"
+          <el-button type="primary" @click="bussinessTripCom.toogelDate(0,getTableData)" style="width: 140px;" size="large">本期</el-button>
+          <el-button type="primary" @click="bussinessTripCom.toogelDate(2,getTableData)" style="width: 140px;"
           size="large" >下两周 <el-icon :size="14" style="margin-left: 4px;"><ArrowRight /></el-icon></el-button>
       </div>
       <div style="width: 230px;"></div>
@@ -175,7 +182,7 @@
             </div>
           </template>
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>