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" :swipeThreshold="10" v-model="activeIndex" :lineWidth="'120rpx'" :isLazyRender="false"
			color="#108cff" titleActiveColor="#108cff" :swipeable="false">
			<template #clueInfo>
				<clueInfo :clueId="clueDetail.id" v-if="clueDetail.id" :params="params" ref="clueInfoRef"></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"></followRecord>
			</template>
			<template #callRecord>
				<callRecord :clueId="clueDetail.id" :clueDetail="clueDetail" v-if="clueDetail.id" ref="callRecordRef">
				</callRecord>
			</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-clue.png"
				@click="handleDistribution"></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>

		<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'
					}
				],
				activeIndex: 0,
			}
		},
		methods: {
			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
						})
					}
				});
			},
			// 添加催记
			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>