crm-app-vue3/pages/clueDetail/tabs/clueInfo/index.vue

<template>
	<view class="caseInfo_wrap">
		<template v-if="clueDetail.id">
			<view class="caseInfo_content_wrap">
				<view class="caseInfo_title">
					<image src="/static/clueDetail/icon-caseInfo.png" mode=""></image>
					<text class="info_text">线索基础信息</text>
				</view>
				<view class="caseInfo_main_wrap">
					<template v-if="params.type === '1'">
						<view class="Info_item" v-for="(item, index) in caseInfoColumn" :key="item.prop">
							<text class="label">{{ item.label }}</text>
							<show-real-text :real="clueDetail.telephone" :type='params.type'
								v-if="item.prop === 'telephone' && !hasEditPermission"></show-real-text>
							<view class="phone_display value"
								v-else-if="item.prop === 'telephone' && hasEditPermission && !phoneEditing"
								@click="phoneEditing = true">{{ clueDetail.dsPhone || '点击编辑' }}</view>
							<view class="input_wrap"
								v-else-if="item.prop === 'telephone' && hasEditPermission && phoneEditing">
								<input v-model="clueDetail.telephone" :focus="phoneEditing"
									style="text-align: right; padding-right: 10px;" @blur="onPhoneBlur" />
							</view>
							<view class="input_wrap" v-else-if="item.type === 'date'">
								<picker mode="date"
									:value="clueDetail[item.prop] ? clueDetail[item.prop].slice(0, 10) : ''"
									:disabled="!hasEditPermission" @change="onDateChange">
									<view class="picker_value">{{ clueDetail[item.prop] ? clueDetail[item.prop].slice(0,
										10) : '请选择日期' }}</view>
								</picker>
							</view>
							<view class="input_wrap corporate_select" v-else-if="item.prop === 'genderTypeCode'">
								<view class="corporate_select_inner">
									<ld-select v-if="hasEditPermission" :list="sysUserSexDict" label-key="dictLabel"
										value-key="dictValue" placeholder="请选择" v-model="clueDetail.genderTypeCode"
										:border="false" @change="updateClueMainInfo" />
									<text v-else class="value">{{ genderTypeCodeLabel }}</text>
								</view>
							</view>
							<view class="input_wrap corporate_select" v-else-if="item.prop === 'corporateStatus'">
								<view class="corporate_select_inner">
									<ld-select v-if="hasEditPermission" :list="crmCorporateStatusDict"
										label-key="dictLabel" value-key="dictValue" placeholder="请选择"
										v-model="clueDetail.corporateStatus" :border="false"
										@change="updateClueMainInfo" />
									<text v-else class="value">{{ corporateStatusLabel }}</text>
								</view>
							</view>
							<view class="input_wrap" v-else-if="item.input">
								<input v-model="clueDetail[item.prop]" :disabled="!hasEditPermission"
									style="text-align: right; padding-right: 10px;" @blur="updateClueMainInfo" />
							</view>
							<text v-else-if="item.color" class="value highlight" :style="handleStyle(item.color)">
								{{ clueDetail[item.prop] }}
							</text>
							<text v-else class="value">{{ clueDetail[item.prop] }}</text>
						</view>
					</template>
					<template v-if="params.type === '2'">
						<view class="Info_item" v-for="(item, index) in caseInfoColumn" :key="item.prop">
							<text class="label">{{ item.label }}</text>
							<view class="phone_display value"
								v-if="item.prop === 'telephone' && hasEditPermission && !phoneEditing"
								@click="phoneEditing = true">{{ clueDetail.dsPhone || '点击编辑' }}</view>
							<view class="input_wrap"
								v-else-if="item.prop === 'telephone' && hasEditPermission && phoneEditing">
								<input v-model="clueDetail.telephone" :focus="phoneEditing"
									style="text-align: right; padding-right: 10px;" @blur="onPhoneBlur" />
							</view>
							<text v-else-if="item.prop === 'telephone'" class="value">{{ clueDetail.dsPhone ||
								clueDetail.telephone }}</text>
							<view class="input_wrap" v-else-if="item.type === 'date'">
								<picker mode="date"
									:value="clueDetail[item.prop] ? clueDetail[item.prop].slice(0, 10) : ''"
									:disabled="!hasEditPermission" @change="onDateChange">
									<view class="picker_value">{{ clueDetail[item.prop] ? clueDetail[item.prop].slice(0,
										10) : '请选择日期' }}</view>
								</picker>
							</view>
							<view class="input_wrap corporate_select" v-else-if="item.prop === 'genderTypeCode'">
								<view class="corporate_select_inner">
									<ld-select v-if="hasEditPermission" :list="sysUserSexDict" label-key="dictLabel"
										value-key="dictValue" placeholder="请选择" v-model="clueDetail.genderTypeCode"
										:border="false" @change="updateClueMainInfo" />
									<text v-else class="value">{{ genderTypeCodeLabel }}</text>
								</view>
							</view>
							<view class="input_wrap corporate_select" v-else-if="item.prop === 'corporateStatus'">
								<view class="corporate_select_inner">
									<ld-select v-if="hasEditPermission" :list="crmCorporateStatusDict"
										label-key="dictLabel" value-key="dictValue" placeholder="请选择"
										v-model="clueDetail.corporateStatus" :border="false"
										@change="updateClueMainInfo" />
									<text v-else class="value">{{ corporateStatusLabel }}</text>
								</view>
							</view>
							<view class="input_wrap" v-else-if="item.input">
								<input v-model="clueDetail[item.prop]" :disabled="!hasEditPermission"
									style="text-align: right; padding-right: 10px;" @blur="updateClueMainInfo" />
							</view>
							<text v-else-if="item.color" class="value highlight" :style="handleStyle(item.color)">
								{{ clueDetail[item.prop] }}
							</text>
							<text v-else class="value">{{ clueDetail[item.prop] }}</text>
						</view>
					</template>
					<template v-if="parsedRemarkDict && Object.keys(parsedRemarkDict).length > 0">
						<view class="Info_item" v-for="(value, key) in parsedRemarkDict" :key="key">
							<text class="label">{{ key }}</text>
							<text class="value">{{ value }}</text>
						</view>
					</template>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import {
	cloneDeep,
	isEqual
} from 'lodash';
import { checkPermi } from '@/utils/permission';
import ldSelect from '@/components/ld-select/ld-select.vue';

const caseInfoColumn = [{
	prop: 'name',
	label: '姓名',
	input: true
},
{
	prop: 'telephone',
	label: '电话',
	input: true
},
{
	prop: 'genderTypeCode',
	label: '性别',
	type: 'select',
	dictType: 'sys_user_sex'
},
{
	prop: 'age',
	label: '年龄',
	input: true
},
{
	prop: 'weixin',
	label: '微信',
	input: true
},
{
	prop: 'corporateStatus',
	label: '企业号状态',
	type: 'select',
	dictType: 'crm_corporate_status'
},
{
	prop: 'userDouyinId',
	label: '抖音号',
},
{
	prop: 'autoAddress',
	label: '自动定位城市',
},
{
	prop: 'telAddr',
	label: '手机号归属地',
},
{
	prop: 'createTime',
	label: '线索创建时间',
},
{
	prop: 'updateTime',
	label: '最新修改时间',
},
{
	prop: 'address',
	label: '详细地址',
	input: true
},
{
	prop: 'remark',
	label: '备注',
	input: true
},
{
	prop: 'qq',
	label: 'QQ号',
	input: true
},
{
	prop: 'email',
	label: '邮箱',
	input: true
},
{
	prop: 'date',
	label: '日期',
	type: 'date'
},
{
	prop: 'manualAddressCode',
	label: '手动填写地域',
	input: true
}
]
export default {
	components: { ldSelect },
	props: {
		clueId: {
			required: true
		},
		params: {
			type: Object,
			required: true
		},
		clueDetailVo: {
			type: Object,
			required: true
		},
	},
	computed: {
		parsedRemarkDict() {
			try {
				const remarkDict = this.clueDetailVo.remarkDict
				if (!remarkDict) {
					return null
				}
				if (typeof remarkDict === 'string') {
					const parsed = JSON.parse(remarkDict)
					return typeof parsed === 'object' && parsed !== null ? parsed : null
				}
				return typeof remarkDict === 'object' && remarkDict !== null ? remarkDict : null
			} catch (error) {
				console.error('解析remarkDict失败:', error)
				return null
			}
		},
		corporateStatusLabel() {
			if (!this.clueDetail.corporateStatus || !this.crmCorporateStatusDict.length) return this.clueDetail.corporateStatus || ''
			const item = this.crmCorporateStatusDict.find(d => d.dictValue === this.clueDetail.corporateStatus)
			return item ? item.dictLabel : this.clueDetail.corporateStatus
		},
		genderTypeCodeLabel() {
			if (!this.clueDetail.genderTypeCode || !this.sysUserSexDict.length) return this.clueDetail.genderTypeCode || ''
			const item = this.sysUserSexDict.find(d => d.dictValue === this.clueDetail.genderTypeCode)
			return item ? item.dictLabel : this.clueDetail.genderTypeCode
		},
		hasEditPermission() {
			if (this.params?.type === '2') return true;
			if (this.params?.type === '1') return checkPermi(['crm:PublicClue:detail:edit']);
			return false;
		}
	},
	methods: {
		onDateChange(e) {
			const val = e.detail && e.detail.value;
			if (val) {
				this.$set(this.clueDetail, 'date', val);
				this.updateClueMainInfo();
			}
		},
		async updateClueMainInfo() {
			if (!this.clueDetail.name) {
				uni.$u.toast("姓名不能为空");
				return;
			}
			if (!isEqual(this.cloneClueDetail, this.clueDetail)) {
				await uni.$u.api.updateClueMainInfo(this.clueDetail);
				uni.$u.toast("修改成功");
				this.getData();
			}
		},
		async getData() {
			const {
				data
			} = await uni.$u.api.getClueMainInfoById({
				id: this.clueId
			});
			if (data.telephone && data.telephone.length >= 7) {
				const phone = data.telephone.substring(3, data.telephone.length - 4);
				data.dsPhone = data.telephone.replace(phone, '****');
			} else {
				data.dsPhone = data.telephone || '';
			}
			this.phoneEditing = false;
			this.clueDetail = data;
			this.cloneClueDetail = cloneDeep(data);
		},
		onPhoneBlur() {
			this.phoneEditing = false;
			this.updateClueMainInfo();
		}
	},
	data() {
		return {
			cloneClueDetail: {},
			clueDetail: {},
			phoneEditing: false,
			crmCorporateStatusDict: [],
			sysUserSexDict: [],
			caseInfoColumn,
		}
	},
	created() {
		this.getData();
		this.$getDicts('crm_corporate_status').then(res => {
			this.crmCorporateStatusDict = res || [];
		});
		this.$getDicts('sys_user_sex').then(res => {
			this.sysUserSexDict = res || [];
		});
	}
}
</script>

<style lang="scss" scoped>
.caseInfo_wrap {
	min-height: 400px;

	.caseInfo_title {
		display: flex;
		align-items: center;
		height: 80rpx;
		background: #f4f4f6;
		padding-left: 40rpx;

		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}

		.info_text {
			font-size: 24rpx;
			color: #202020;
		}

		.tabs_wrap {
			display: flex;

			.tab_item {
				margin-left: 30rpx;
			}
		}
	}

	.caseInfo_main_wrap {
		.caseCards_list_wrap {
			background: #ebf6ff;
			margin-bottom: 10rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}

		.Info_item {
			padding: 18rpx 40rpx;
			display: flex;
			justify-content: space-between;

			.label {
				color: #999999;
				font-size: 26rpx;
			}

			.input_wrap {
				border-bottom: 1px solid #ddd;
			}

			.picker_value {
				text-align: right;
				padding-right: 10px;
				font-size: 26rpx;
				color: #202020;
			}

			.phone_display {
				text-align: right;
				font-size: 26rpx;
				color: #202020;
			}

			.corporate_select {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				min-width: 0;
				border-bottom: none;
			}

			.corporate_select_inner {
				display: inline-block;
				border-bottom: 1px solid #ddd;
				min-width: 120rpx;
			}

			.corporate_select .value {
				text-align: right;
			}

			::v-deep .corporate_select .main,
			::v-deep .corporate_select .ldSelectInput {
				justify-content: flex-end;
				text-align: right;
			}

			::v-deep .corporate_select input {
				text-align: right !important;
			}

			.value {
				font-size: 26rpx;
				color: #202020;
				border-radius: 100rpx;
			}

			.highlight {
				font-size: 22rpx;
				font-weight: 900;
				padding: 6rpx 20rpx;
			}
		}
	}

}
</style>