crm_front_v3/src/views/roadshow_manage/compononts/activityDetailDia.vue

<script setup>
import { ref,watch} from 'vue';
import moment from 'moment';
import { useRouter} from 'vue-router';
import DatePicker from 'vue-datepicker-next';
import { InfoFilled } from '@element-plus/icons-vue'

import { roadshowInterence } from '@/api/api.js';

const props = defineProps({
	title: {
		type: String
	},
	isShow: {
		type: Boolean
	},
	form: {
		type: Object
	},
	fromType: {
		type: String,
		default: 'researcher'
	}
})

const emits=defineEmits(['update:isShow'])

const companyInfo=ref(null)
const tableColumns=ref([])
const tableData=ref([])

watch(()=>props.isShow,(newval)=>{
	if(newval) {
		initState();
		console.log(props.form)
		getStatisticDetail();
	}
})

/* 获取列表 */
const getStatisticDetail=()=>{
	const { startDate,endDate,userid,key } = props.form;
	const typeMapObj = {
		试用路演: 'try_out',
		正式路演: 'formal',
		公开会议: 'meeting',
	}
	roadshowInterence.statisticDetailList({
		DataType: typeMapObj[key] && typeMapObj[key],
		StartDate: startDate,
		EndDate: endDate,
		AdminId: userid,
		AdminType: props.fromType
	}).then(res => {
		const { Ret,Data } = res;

		if(Ret !== 200) return

		tableData.value = Data || [];

	})
}

/* 取消 */
const cancel=()=>{
	emits('update:isShow', false);
}

/* 获取客户信息 */
const getCompanyInfo=async(CompanyId)=>{
	const { Data }  = await roadshowInterence.componyDetail({ CompanyId });
	companyInfo.value = Data;
}

const initState=()=>{
	const dynamic_column = props.fromType === 'researcher' ? {
		label: '发起人',
		key: 'SellerName',
		minwidthsty: '100px'
	} : {
		label: '研究员',
		key: 'ResearcherName',
		minwidthsty: '100px',
	}

	tableColumns.value = props.title === '路演详情'
		? [
				{
					label: '时间',
					key: 'time',
					minwidthsty: '180px',
				},
				{
					label: '客户名称',
					key: 'company',
					minwidthsty: '100px',
				},
				{
					label: '路演形式',
					key: 'RoadshowType',
					minwidthsty: '120px',
				},
				{ ...dynamic_column }
			]
		: [
				{
					label: '时间',
					key: 'time',
					minwidthsty: '180px',
				},
				{
					label: '会议主题',
					key: 'Theme',
					minwidthsty: '100px',
				},
				{
					label: '合作方',
					key: 'CooperationName',
					minwidthsty: '120px',
				},
				{
					label: '会议形式',
					key: 'RoadshowType',
					minwidthsty: '120px',
				},
				{ ...dynamic_column }
		]	
}

</script>

<template>
	<el-dialog
      v-dialogDrag
      :title="props.title"
      :model-value="props.isShow"
      :modal-append-to-body="false"
      @close="cancel"
			width="850px"
			class="statistic-dialog-cont"
    >
		<el-table
			:data="tableData"
			class="table-cont"
			max-height="300"
			border
		>
			<el-table-column
				v-for="item in tableColumns"
				:key="item.label"
				:label="item.label"
				:width="item.widthsty"
				:min-width="item.minwidthsty"
				align="center"
			>
				<template #default="{row}">

					<span v-if="item.key === 'time'">
						{{
							moment(new Date(row.StartDate + " " + row.StartTime)).format(
								"MM.DD(ddd) HH:mm - "
							) + moment(new Date(row.EndDate + " " + row.EndTime)).format("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.CooperationName || row.CompanyName }} <span v-if="props.fromType == 'seller' || props.fromType == 'special'">{{`(${row.CompanyStatus})`}} </span>

						<el-tooltip effect="dark" placement="top-start" v-if="row.CompanyId"  popper-class="company-tip-poper">
							<el-icon :size="14" style="vertical-align: text-top;" @mouseenter.native="getCompanyInfo(row.CompanyId)" ><InfoFilled /></el-icon>
							<template #content v-if="companyInfo">
								<div>
									<p style="margin: 6px 0;">客户状态：{{companyInfo.Status}}</p>
									<p style="margin: 6px 0;">所属行业：{{companyInfo.IndustryName}}</p>
									<p style="margin: 6px 0;text-indent: -70px;margin-left: 70px;">开通品种：{{companyInfo.PermissionName}}</p>
									<p style="margin: 6px 0;">累计报告阅读次数：{{companyInfo.ReportReadTotal}}</p>
								</div>
							</template>
						</el-tooltip>
					</span>

					<span v-else>{{ row[item.key] || '——' }}</span>

				</template>
			</el-table-column>
		</el-table>
	</el-dialog>	
</template>

<style lang="scss" scoped>
.table-cont {
	margin: 10px 0 40px;
}
</style>
<style lang="scss">
.company-tip-poper {
	max-width: 400px;
}
</style>