crm-app-vue3/pages/clueDetail/page/clueDetail.vue

<template>
	<view class="clueDetail_wrap">
		<view class="telPhone">
			<view class="left">
				<view class="phone">电话:
					<show-real-text :real="clueDetail.telephone" :type='params.type'
						v-if="clueDetail.telephone"></show-real-text>
					<template v-if="clueDetail.telAddr">
						({{clueDetail.telAddr}})
					</template>
				</view>
				<view class="copy_btn" v-if="params.type != '1'" @click="handleCopy(clueDetail)">复制</view>
			</view>
			<view class="right">
				运营人 : {{ clueDetail.clueOperationName }}
			</view>
		</view>
		<view class="clueDetail_top_info">
			<view class="top_info_item">
				<view class="top">
					{{defaultText(clueDetail.clueOwnerName)}}
				</view>
				<view class="bottom">
					线索所属人
				</view>
			</view>
			<view class="top_info_item">
				<view class="top">
					{{defaultText(clueDetail.appName)}}
				</view>
				<view class="bottom">
					流量来源
				</view>
			</view>
			<view class="top_info_item">
				<view class="top">
					{{defaultText(clueDetail.clueType)}}
				</view>
				<view class="bottom">
					线索类型
				</view>
			</view>
			<view class="top_info_item">
				<view class="top">
					{{defaultText(clueDetail.createTime)}}
				</view>
				<view class="bottom">
					线索创建时间
				</view>
			</view>
			<view class="top_info_item">
				<view class="top">
					{{defaultText(clueDetail.clueDataSource)}}
				</view>
				<view class="bottom">
					线索渠道
				</view>
			</view>
			<view class="top_info_item">
				<view class="top">
					{{crmFollowStatusFormat(clueDetail.handleState)}}
				</view>
				<view class="bottom">
					跟进状态
				</view>
			</view>
		</view>


		<view class="clue_state_wrap">
			<view class="clue_state_top_wrap">
				<view class="top_left">线索阶段</view>
				<view class="top_right" @click="handleIsInvalid">
					<template v-if="clueDetail.clueState === '6'">已标记无效</template>
					<template v-else>标记无效</template>
				</view>
			</view>
			<view class="steps_wrap">
				<u-steps :current="currentSteps" dot>
					<u-steps-item :title="item.dictLabel" @click.native="handleClickStepsItem(item)"
						v-for="(item,index) in crmCluePhaseDict" :key="index"></u-steps-item>
				</u-steps>
			</view>
		</view>

		<view class="clue_tag_wrap">
			<view class="clue_tag_add_btn" @click="handleAddClueTag">
				+ 添加标签
			</view>
			<u-tag :text="tag.name" plain plainFill :closable="true" @close="hanldeTagClose(tag)" borderColor="#fff"
				v-for="(tag) in clueDetail.clueTags" :key="tag.id" style="margin-left: 10px;margin-bottom: 10px;"
				:bgColor="tag.color" color="#fff"></u-tag>
		</view>


		<yui-tabs :tabs="tabs" v-model="activeIndex" :lineWidth="'120rpx'" :isLazyRender="false" color="#108cff"
			titleActiveColor="#108cff" :swipeable="true" :swiper="false" :ellipsis="false" :scroll-threshold="3">
			<template #clueInfo>
				<clueInfo :clueId="clueDetail.id" v-if="clueDetail.id" :clueDetailVo="clueDetail" :params="params" ref="clueInfoRef" type="1">
				</clueInfo>
			</template>
			<template #advertising>
				<advertising :clueId="clueDetail.id" v-if="clueDetail.id" ref="advertisingRef"></advertising>
			</template>
			<template #followRecord>
				<followRecord :clueId="clueDetail.id" v-if="clueDetail.id" ref="followRecordRef" type="1">
				</followRecord>
			</template>
			<template #callRecord>
				<callRecord :clueId="clueDetail.id" :clueDetail="clueDetail" v-if="clueDetail.id" ref="callRecordRef">
				</callRecord>
			</template>
			<template #orderFollow>
				<followRecord :clueId="clueDetail.id" v-if="clueDetail.id" ref="followRecordRef" type="3">
				</followRecord>
			</template>
		</yui-tabs>
		<u-tabbar class="clueDetail_tabber" :fixed="true" inactiveColor="#ffffff" :placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="拨打电话" icon="../../static/clueDetail/icon-phone.png"
				@click="handleCallPhone"></u-tabbar-item>
				<u-tabbar-item text="发单" icon="../../static/clueDetail/icon-order.png"
				@click="handleClueSend"></u-tabbar-item>
				<u-tabbar-item text="写新跟进" icon="../../static/caseDetail/icon-follow.png"
				@click="handleAddFollow"></u-tabbar-item>
				<u-tabbar-item text="上传录音" icon="../../static/caseDetail/icon-record.png"
				@click="handleUploadRecord"></u-tabbar-item>
				<u-tabbar-item text="分配" icon="../../static/clueDetail/icon-clue.png" v-if="isShowDistribution()"
				@click="handleDistribution"></u-tabbar-item>
		</u-tabbar>

		<distribution-modal :clueDetail="clueDetail" ref="distribution"
			@handleSuccess="distributionSuccess"></distribution-modal>

		<group-select class="clueTagsSelect" :list="clueTagGroupVoList" scrollHeight="720rpx" groupName="groupName"
			groupChild="clueTagDataList" label-key="name" value-key="id" placeholder="请选择线索标签" v-model="checkTags"
			multiple clearable ref="clueTag" @confirm="handleClueTagConfirm"></group-select>
	</view>
</template>

<script>
	import {
		cloneDeep
	} from "lodash";
	import {
		selectDictLabel
	} from "@/utils/util";
	import clueInfo from "../tabs/clueInfo/index";
	import advertising from "../tabs/advertising/index";
	import followRecord from "../tabs/followRecord/index";
	import callRecord from "../tabs/callRecord/index";
	export default {
		components: {
			clueInfo,
			advertising,
			followRecord,
			callRecord,
		},
		props: {
			clueId: {
				type: String,
				required: true
			},
			params: {
				type: Object,
				required: true
			},
		},
		computed: {
			currentSteps() {
				const index = this.crmCluePhaseDict.findIndex(v => v.dictValue === this.clueDetail.clueState);
				return index;
			},
		},
		data() {
			return {

				showModal: false,

				clueDetail: {},

				checkTags: [],

				clueTagGroupVoList: [],

				crmHandelStatusDict: [],
				crmCluePhaseDict: [],

				tabs: [{
						label: '基础信息',
						slot: 'clueInfo'
					}, {
						label: '广告信息',
						slot: 'advertising'
					}, {
						label: '跟进记录',
						slot: 'followRecord'
					},
					{
						label: '通话记录',
						slot: 'callRecord'
					},
					{
						label: '后端跟进',
						slot: 'orderFollow'
					}
				],
				activeIndex: 0,
			}
		},
		methods: {
			isShowDistribution() {
				return this.$store.state.user.userInfo.roles.filter(i=>i.roleKey == 'ZHUGUANG-CRM').length > 0
			},
			distributionSuccess() {
				this.handleInit();
			},
			async hanldeTagClose(tag) {
				const {
					cfId: id,
					clueTags
				} = this.clueDetail;
				const copyClueTags = cloneDeep(clueTags);
				if (id == null) {
					this.$message.error("修改异常");
					return;
				}
				const index = copyClueTags.findIndex(v => v.id === tag.id);
				if (index !== -1) {
					copyClueTags.splice(index, 1);
					const allTags = copyClueTags.map(v => v.id).join(",");
					await uni.$u.api.updateClueFixedFieldsAllTags({
						id,
						allTags
					});
					this.clueDetail.clueTags = copyClueTags;
					this.checkTags = this.clueDetail.clueTags.map(v => v.id);
				}
			},
			handleDistribution() {
				this.$refs.distribution.show();
			},
			confirm() {

			},
			async handleClueTagConfirm() {
				const allTags = this.checkTags.join(",");
				await uni.$u.api.updateClueFixedFieldsAllTags({
					id: this.clueDetail.cfId,
					allTags
				});
				this.getDetail();
			},
			handleAddClueTag() {
				this.$refs.clueTag.showModal();
			},
			handleIsInvalid() {
				const invalidDict = {
					dictValue: '6'
				};
				this.handleClickStepsItem(invalidDict);
			},
			async handleClickStepsItem(item) {
				const {
					cfId: id,
					clueState
				} = this.clueDetail;
				if (clueState === '6') {
					if (clueState === item.dictValue) {
						item.dictValue = '1';
					} else {
						uni.$u.toast("当前标记无效,请先取消");
						return;
					}
				}
				if (clueState === item.dictValue) {
					return;
				}
				if (id == null) {
					this.$message.error("修改异常");
					return;
				}
				uni.$u.api.updateClueFixedFieldsClueState({
					id,
					clueState: item.dictValue
				}).then(() => {
					this.$set(this.clueDetail, "clueState", item.dictValue);
				});
			},
			defaultText(text) {
				return text ? text : "-";
			},
			crmFollowStatusFormat(v) {
				return selectDictLabel(this.crmHandelStatusDict, v);
			},
			handleCopy(item) {
				uni.setClipboardData({
					data: item.telephone,
					success: function() {
						uni.$u.toast("复制成功");
					}
				});
			},
			// 添加联系人
			handleCallPhone() {
				uni.makePhoneCall({
					phoneNumber: this.clueDetail.telephone,
					success: () => {
						this.$store.commit("call/SET_FORM", {
							clueId: this.clueId,
							type: '3',
							callee: this.clueDetail.telephone
						})
					}
				});
			},
			// 发单
			async handleClueSend() {
				const {
					data: count
				} = await uni.$u.api.getClueSendFormCountByClueId({
					clueId: this.clueId
				});
				if (count > 0) {
					uni.showModal({
						title: '该线索已发单是否再次发单？',
						success: (res)=> {
							if (res.confirm) {
								this.toOrderForm()
							}
						}
					});
				} else {
					this.toOrderForm()
				}
			},
			toOrderForm() {
				const {
					id,
					ownLatestDynamicTime,
					createTime,
					clueOwnerId
				} = this.clueDetail;
				if (this.$store.state.user.userInfo.userId === clueOwnerId) {
					uni.navigateTo({
						url: `/pages/orderForm/index?clueId=${this.clueId}`
					})
				} else {
					// 确定用于判断的目标时间（ownLatestDynamicTime，为null则用createTime）
					const date = ownLatestDynamicTime || createTime

					const twoDaysLater = new Date(date)
					twoDaysLater.setDate(twoDaysLater.getDate() + 2) // 日期加2天

					// 是否大于当前时间 小于可以发单
					let isOrderForm = false
					if (twoDaysLater) {
						isOrderForm = twoDaysLater.getTime() <= new Date().getTime()
					}
					if (isOrderForm) {
						uni.navigateTo({
							url: `/pages/orderForm/index?clueId=${this.clueId}`
						})
					} else {
						uni.$u.toast('非所属人需两天内无跟进记录才可发单')
					}
				}
			},
			// 添加跟进记录
			handleAddFollow() {
				uni.navigateTo({
					url: `/pages/addFollow/index?clueId=${this.clueId}`
				})
			},
			handleUploadRecord() {
				uni.navigateTo({
					url: `/pages/uploadRecord/index?clueId=${this.clueId}`
				})
			},
			// 初始化详情页
			async handleInit() {
				this.$getDicts('crm_follow_status').then((res => {
					this.crmHandelStatusDict = res;
				}))
				this.$getDicts('crm_clue_phase').then((res => {
					this.crmCluePhaseDict = res.filter(v => v.dictValue !== '6');
				}))
				uni.$u.api.getClueTagGroupVoList({
					tagGroupApplication: '1'
				}).then(({
					data
				}) => {
					this.clueTagGroupVoList = data;
				});
				this.getDetail();
			},
			getDetail() {
				uni.$u.api.getClueMainInfoVoById({
					id: this.clueId
				}).then(res => {
					this.clueDetail = res.data;
					this.checkTags = this.clueDetail.clueTags.map(v => v.id);
				});
			},
			// 标签点击事件
			tabClick(index, item) {
				// // 根据索引调用对应组件的getData方法
				// const componentRefs = [
				// 	this.$refs.clueInfoRef,
				// 	this.$refs.advertisingRef,
				// 	this.$refs.followRecordRef,
				// 	this.$refs.callRecordRef
				// ];

				// const currentComponent = componentRefs[index];
				// if (currentComponent && typeof currentComponent.getData === 'function') {
				// 	currentComponent.getData();
				// }
			},
			// 标签切换事件
			tabChange(index, item) {
				// console.log("tabChange", index, item);
			},
		},
		created() {
			this.handleInit();
		},
	}
</script>

<style lang="scss" scoped>
	.clueTagsSelect {
		height: 0;
		overflow: hidden;
	}

	.clue_tag_wrap {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 0 10px;
		margin: 20px 0;
		flex-wrap: wrap;
		min-height: 50px;

		.clue_tag_add_btn {
			font-size: 14px;
			color: #108cff;
		}
	}

	.clue_state_wrap {
		background-color: #fff;
		padding: 10px;
		margin-bottom: 20px;

		.clue_state_top_wrap {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;

			.top_left {
				font-size: 16px;
			}

			.top_right {
				font-size: 14px;
				color: #4fa5fe;
			}
		}

		.steps_wrap {}
	}

	.clueDetail_tabber {
		::v-deep .u-tabbar__content {
			background: #108cff;
			border-top-right-radius: 10px;
			border-top-left-radius: 10px;
		}
	}

	.clueDetail_wrap {
		.telPhone {
			display: flex;
			background: #fff;
			padding: 20px;
			justify-content: space-between;

			.left {
				display: flex;
			}

			.copy_btn {
				color: #4fa5fe;
				margin-left: 10px;
			}
		}

		.clueDetail_top_info {
			display: flex;
			flex-wrap: wrap;
			background-color: #ffffff;
			padding-top: 20px;
			margin: 18px 0;

			.top_info_item {
				width: 33.33%;
				text-align: center;
				margin-bottom: 20px;

				.top {
					font-size: 15px;
					color: #202020;
					margin-bottom: 5px;
					font-weight: bold;
				}

				.bottom {
					font-size: 15px;
					color: #c0c0c7;
				}
			}
		}
	}
</style>