crm-app-vue3/components/distribution-modal/distribution-modal.vue

<template>
	<view>
		<u-modal :show="showModal" @confirm="confirm" ref="uModal" :asyncClose="true" showCancelButton
			@cancel="showModal = false" cancelColor="#409eff" :confirmText="'确定'" confirmColor="#2880dd">
			<view class="modal_box">
				原所属人: {{clueDetail.clueOwnerName}}分配给
				<text style="color: #108cff;" @click="handleShowclueOwner">
					{{clueOwnerName}}(点击选择)
				</text>
			</view>
		</u-modal>

		<ba-tree-picker :selectParent="false" v-if="listData.length > 0" ref="clueOwner" :multiple="false" border
			title="运营人" :localdata="listData" valueKey="id" textKey="label" childrenKey="children"
			:selectedValues="clueOwnerId" @select-change="clueOwnerSeletchang" />
	</view>
</template>

<script>
	import {
		cloneDeep
	} from 'lodash';
	import {
		filterCustomerManager
	} from '@/utils/util';
	export default {
		props: {
			clueDetail: {
				type: Object,
				required: true
			},
		},
		data() {
			return {
				showModal: false,
				clueOwnerName: this.clueDetail.clueOwnerName,
				clueOwnerId: this.clueDetail.clueOwnerId,

				listData: [], // 人员列表
			}
		},
		methods: {
			async confirm(){
				const {  cfId , id } = this.clueDetail;
				await uni.$u.api.updateClueFixedFieldsClueOwner({ id : cfId , clueOwnerId : this.clueOwnerId , clueId : id  });
				this.showModal = false;
				this.$emit("handleSuccess");
			},
			show() {
				this.showModal = true;
				// 获取人员
				uni.$u.api.getDeptOwner({ excludeDeptIds : [100,369,378,356] }).then(res => {
					this.listData = filterCustomerManager(res.data);
				});
			},
			handleShowclueOwner(){
				this.showModal = false;
				this.$refs.clueOwner._show();
			},
			clueOwnerSeletchang(ids,names) {
				this.showModal = true;
				const clueOwnerId = ids[0];
				const clueOwnerName = names[0];
				this.clueOwnerId = clueOwnerId;
				this.clueOwnerName = clueOwnerName;
			},
		}
	}
</script>

<style>
</style>