rtliveCompany/pages_task/createTask.vue

<template>
	<view class="container">
		<Step :step="currentStep" :stepsData="currentText" />
		<scroll-view class="content" scroll-y>
			<!-- 驳回意见提示 -->
			<view class="rejection-banner" v-if="rejectionInfo">
				<view class="rejection-icon">✕</view>
				<view class="rejection-text">驳回意见: {{ rejectionInfo }}</view>
			</view>

			<!-- 基本信息 -->
			<view class="form-section">
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>任务归属</text>
					</view>
					<!-- <view class="form-input picker-input" :class="{ placeholder: !formData.institution }"
						@click="showTaskPopup=true">
						{{ formData.institution || '请选择任务归属' }}
						<image class="icon" src="/static/image/icon_more.png"></image>
					</view> -->
					<view class="form-input picker-input" :class="{ placeholder: !formData.institution }"
						@click="showPicker('任务归属',companyData)">
						{{ formData.institution || '请选择任务归属' }}
						<image class="icon" src="/static/image/icon_more.png"></image>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>归属项目</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.belongingProject }"
						@click="showPicker('归属项目',companyList)">
						{{ formData.belongingProject || '请选择归属项目' }}
						<image class="icon" src="/static/image/icon_more.png"></image>
					</view>
					<!-- <view class="form-input picker-input" :class="{ placeholder: !formData.belongingProject }"
						@click="showBelongingPopup = true">
						{{ formData.belongingProject || '请选择归属项目' }}
						<image class="icon" src="/static/image/icon_more.png"></image>
					</view> -->
				</view>
<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>产品代码</text>
					</view>
					<!-- <view class="form-input picker-input" :class="{ placeholder: !formData.institution }"
						@click="showTaskPopup=true">
						{{ formData.institution || '请选择任务归属' }}
						<image class="icon" src="/static/image/icon_more.png"></image>
					</view> -->
					<view class="form-input picker-input" :class="{ placeholder: !formData.productCode }"
						@click="showPicker('产品代码',productList)">
						{{ formData.productCode || '请选择产品代码' }}
						<image class="icon" src="/static/image/icon_more.png"></image>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>费用分摊</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.costAllocation }"
						@click="showPicker('费用分摊',companyData)">
						{{ formData.costAllocation || '请选择费用分摊主体' }}
						<image class="icon" src="/static/image/icon_more.png"></image>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>添加任务备注</text>
					</view>
					<EvanSwitch v-model="formData.addRemark"></EvanSwitch>
				</view>
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>归属类型</text>
					</view>
					<text class="txt">院内</text>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>任务类型</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.taskType }"
						@click="showPicker('任务类型',taskTypeColumns)">
						{{ formData.taskType || '请选择任务类型' }}
						<image class="icon" src="/static/image/icon_more.png"></image>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>计划开始时间</text>
					</view>
					<picker mode="date" :value="formData.planStartTime" fields="day" @change="onPlanStartTimeChange">
						<view class="form-input picker-input" :class="{ placeholder: !formData.planStartTime }">
							{{ formData.planStartTime || '请选择计划开始时间' }}
							<image class="icon" src="/static/image/icon_more.png"></image>
						</view>
					</picker>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>计划结束时间</text>
					</view>
					<picker mode="date" :value="formData.planEndTime" fields="day" @change="onPlanEndTimeChange">
						<view class="form-input picker-input" :class="{ placeholder: !formData.planEndTime }">
							{{ formData.planEndTime || '请选择计划结束时间' }}
							<image class="icon" src="/static/image/icon_more.png"></image>
						</view>
					</picker>
				</view>
			</view>
		</scroll-view>
		<view class="next-button" @click="toNext">下一步</view>
		<u-picker :title='pickerTitle' :show="showPickerVisible" confirmColor='#576B95' ref="uPicker"
			:columns="pickerData" @confirm="confirm" @cancel="cancel">
		</u-picker>

		<u-popup :show="showBelongingPopup" mode="bottom" round="20" @close="closePopup" closeable>
			<view class="popup-content p32">
				<view class="popup-header">
					<text class="title">归属项目</text>
				</view>

				<view class="search-box">
					<image class="icon" src="/static/image/search.png"></image>
					<u-input v-model="searchKeyword" placeholder="请输入归属项目" border="none" clearable />
				</view>

				<scroll-view scroll-y class="project-list">
					<view v-for="(project, index) in filteredProjects" :key="index" class="project-item"
						:class="{ active: selectedIndex === index }" @tap="selectProject(project, index)">
						<text class="project-name">{{ project.name }}</text>
						<image class="icon" src="/static/image/icon_right.png"></image>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<u-popup :show="showTaskPopup" mode="bottom" round="16" @close="showTaskPopup = false" safeAreaInsetBottom>
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">任务归属</text>
					<image class="close-icon" src="/static/image/icon_cross.png" @click="showTaskPopup=false"></image>
				</view>
				<view class="two-level-container">
					<scroll-view class="primary-list" scroll-y>
						<view v-for="(item, index) in primaryOptions" :key="index" class="primary-item"
							:class="{ 'primary-active': activePrimaryIndex === index }"
							@click="handlePrimarySelect(index)">
							<text class="primary-text">{{ item.name }}</text>
						</view>
					</scroll-view>

					<scroll-view class="secondary-list" scroll-y>
						<view v-for="(subItem, subIndex) in currentSecondaryOptions" :key="subIndex"
							class="secondary-item" :class="{ 'secondary-active': selectedSecondaryItem === subItem }"
							@click="handleSecondarySelect(subItem)">
							<text class="secondary-text">{{ subItem }}</text>
							<u-icon v-if="selectedSecondaryItem === subItem" name="checkbox-mark" color="#2979ff"
								size="20" />
						</view>
					</scroll-view>
				</view>

				<view class="popup-footer">
					<button class="confirm-btn" @click="handleConfirm">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { 
		company,
		getAllData,//获取项目所有数据
		queryAllProduct,//获取公司所有产品
		queryAllData//获取任务类型
	} from '@/api/task.js';

	import Step from '@/pages_task/components/step.vue'
	import EvanSwitch from '@/components/evan-switch.vue'
	export default {
		components: {
			Step,
			EvanSwitch
		},
		data() {
			return {
				taskType:[],//任务类型
				companyList:[],//归属项目
				productList:[],//产品列表
				companyData:[],
				userInfo:{},
				showTaskPopup: false,
				primaryOptions: [{
						id: 1,
						name: '中药事业部',
						children: ['中药一部', '中药二部', '中药三部', '中药四部']
					},
					{
						id: 2,
						name: '事业1组',
						children: ['事业1组-项目部', '事业1组-市场部', '事业1组-技术部']
					},
					
				],
				activePrimaryIndex: 0,
				currentSecondaryOptions: [],
				selectedSecondaryItem: '',
				selectedPrimaryItem: null,
				selectedIndex: -1,
				selectedProject: null,
				belongingprojects: [{
						name: '学术交流项目'
					},
					{
						name: '科学调研项目'
					},
					{
						name: '2026年1月医学研究项目'
					},
					{
						name: '2026年2月医学研究项目'
					},
					{
						name: '2026年3月医学研究项目'
					}
				],
				searchKeyword: '',
				showBelongingPopup: false,
				showPickerVisible: false,
				costColumns: [
					['主体1', '主体2', '主体3'],
				],
				taskTypeColumns: [
					['类型1', '类型2', '类型3'],
				],
				currentStep: 1,
				currentText: [{
						id: 1,
						stepNumber: 1,
						title: '填写任务'
					},
					{
						id: 2,
						stepNumber: 2,
						title: '选择客户'
					},
					{
						id: 3,
						stepNumber: 3,
						title: '积分设置'
					}
				],
				rejectionInfo: '',
				formData: {
					costAllocation: '',
					planStartTime: '',
					planEndTime: '',
					institution: '',
					deptId: '',
					belongingProject: '',
					productId: '',
					productCode: '',
					productCodeValue: '',
					taskType: '',
					addRemark: false
				},
				originalCompanyData: null,
				pickerTitle: '默认标题',
				pickerData: [],
				companyId:''
			}
		},
		onLoad(options) {
				this.userInfo=JSON.parse(uni.getStorageSync("userInfo"))||''
			if (options.rejectionInfo) {
				this.rejectionInfo = decodeURIComponent(options.rejectionInfo)
			}
			// 初始化二级选项
			this.currentSecondaryOptions = this.primaryOptions[0]?.children || []
			// 获取用户信息
			const userInfoStr = uni.getStorageSync('userInfo')
			this.userInfo = userInfoStr ? JSON.parse(userInfoStr) : {}
			console.log(this.userInfo);
			// 加载信息
			this.companyId = this.userInfo.companyId || 1

		},
		computed: {
			filteredProjects() {
				if (!this.searchKeyword.trim()) {
					return this.belongingprojects;
				}
				return this.belongingprojects.filter(project =>
					project.name.includes(this.searchKeyword)
				);
			}
		},
		methods: {
			//任务类型
			queryAllData(){
				if(!this.formData.productCodeValue){
					uni.showToast({
						title: '请先选择产品',
						icon: 'none'
					})
					return
				}
				let data={
					companyId:this.userInfo.companyId||'',
					deptId:this.formData.deptId||'',
					productCode:this.formData.productCodeValue||'',

				}
				queryAllData(data).then(res => {
					if (res.code === 200) {
						// 处理任务类型
						this.taskType = res.data || []
						console.log('company接口返回数据:', res)
					}
				}).catch(err => {
					console.error('获取任务类型失败：', err);
				});
			},

			//获取公司所有产品
			async queryAllProduct(){
				return new Promise((resolve, reject) => {
					let data={
						companyId:this.userInfo.companyId||'',
					}
					queryAllProduct(data).then(res => {
						if (res.code === 200) {
							// 处理公司所有产品数据
							this.productList = res.data || []
							console.log('company接口返回数据:', res)
						}
						resolve(res);
					}).catch(err => {
						console.error('获取公司所有产品失败：', err);
						reject(err);
					});
				});
			},
			// 归属项目
			async getAllData(){
				return new Promise((resolve, reject) => {
					let data={
					companyId:this.userInfo.companyId||'',
						deptId:this.userInfo.deptId||'',
						productCode:this.userInfo.productCode||''
					}
					getAllData(data).then(res => {
						if (res.code === 200) {
							// 处理公司项目设置列表数据
							this.companyList = res.data || []

							console.log('company接口返回数据:', res)
						}
						resolve(res);
					}).catch(err => {
						console.error('获取公司项目设置失败：', err);
						reject(err);
					});
				});
			},

			async company() {
				return new Promise((resolve, reject) => {
					try {
						uni.showLoading({
							title: '加载中...'
						})
						// 调用company接口获取公司项目设置列表
						company(this.companyId).then(companyRes => {
							uni.hideLoading()
							if (companyRes.code === 200) {
								// 处理公司项目设置列表数据
								this.companyData = companyRes.data || []

								console.log('company接口返回数据:', companyRes)
								// 这里可以根据接口返回的数据进行页面初始化，比如填充项目列表
							}
							resolve(companyRes);
						}).catch(e => {
							uni.hideLoading()
							console.error('加载信息失败', e)
							uni.showToast({
								title: '网络错误',
								icon: 'none'
							})
							reject(e);
						});
					} catch (e) {
						uni.hideLoading()
						console.error('加载信息失败', e)
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
						reject(e);
					}
				});
			},
			submitInfo() {
					info(this.userInfo.companyId).then(res => {
						if (res.code === 200) {
							console.log('公司项目设置：', res.data);
							// 处理公司项目设置数据
						}
					}).catch(err => {
						console.error('获取公司项目设置失败：', err);
					});
			},
			handlePrimarySelect(index) {
				this.activePrimaryIndex = index;
				this.currentSecondaryOptions = this.primaryOptions[index].children || [];
				this.selectedSecondaryItem = '';
			},
			handleSecondarySelect(item) {
				this.selectedSecondaryItem = item;
				this.selectedPrimaryItem = this.primaryOptions[this.activePrimaryIndex];
			},
			handleConfirm() {
				if (this.selectedSecondaryItem) {
					const displayText = `${this.selectedPrimaryItem.name} > ${this.selectedSecondaryItem}`;
					this.formData.institution = displayText;
					this.showTaskPopup = false;
				} else {
					uni.showToast({
						title: '请选择二级部门',
						icon: 'none'
					});
				}
			},
			closePopup() {
				this.showBelongingPopup = false;
				this.searchKeyword = '';
				this.selectedIndex = -1;
			},
			selectProject(project, index) {
				this.selectedIndex = index;
				this.selectedProject = project;
				this.formData.belongingProject = project.name;
				setTimeout(() => {
					this.showBelongingPopup = false;
					this.searchKeyword = '';
					this.selectedIndex = -1;
				}, 300);
			},
			async showPicker(title, data) {
				// 根据不同的title调用对应的请求方法
				if (title === '任务归属' || title === '费用分摊') {
					// 调用company()获取任务归属和费用分摊数据
					await this.company();
					data = this.companyData;
				} else if (title === '归属项目') {
					// 调用getAllData()获取归属项目数据
					await this.getAllData();
					data = this.companyList;
				} else if (title === '产品代码') {
					// 调用queryAllProduct()获取产品代码数据
					await this.queryAllProduct();
					data = this.productList;
				}else if (title === '任务类型') {
					// queryAllData()获取任务类型数据
					await this.queryAllData();
					data = this.taskType;
				}

				// 处理任务归属和费用分摊数据，将deptStr作为显示文本
				if ((title === '任务归属' || title === '费用分摊') && data && data.length > 0) {
					// 转换为picker需要的格式
					this.pickerData = [data.map(item => item.deptStr)]
					// 保存原始数据，用于后续获取deptId
					this.originalCompanyData = data
				} else if (title === '归属项目' && data && data.length > 0) {
					// 处理归属项目数据，将projectName作为显示文本
					this.pickerData = [data.map(item => item.projectName)]
					// 保存原始数据，用于后续获取productId
					this.originalCompanyData = data
				} else if (title === '产品代码' && data && data.length > 0) {
					// 处理产品代码数据，将productName作为显示文本
					this.pickerData = [data.map(item => item.productName)]
					// 保存原始数据，用于后续获取productCode
					this.originalCompanyData = data
				} else {
					this.pickerData = data
					this.originalCompanyData = null
				}
				this.pickerTitle = title
				this.showPickerVisible = true
			},
			confirm(e) {
				if (e.value && e.value.length > 0) {
					if (this.pickerTitle === '费用分摊') {
						this.formData.costAllocation = e.value[0]
					} else if (this.pickerTitle === '任务类型') {
						this.formData.taskType = e.value[0]
					} else if (this.pickerTitle === '任务归属' && this.originalCompanyData) {
						// 获取选中的索引
						const selectedIndex = e.value[0]
						// 找到对应的原始数据项
						const selectedItem = this.originalCompanyData.find(item => item.deptStr === selectedIndex)
						if (selectedItem) {
							// 显示deptStr
							this.formData.institution = selectedItem.deptStr
							// 保存deptId到表单
							this.formData.deptId = selectedItem.deptId
						}
					} else if (this.pickerTitle === '归属项目' && this.originalCompanyData) {
						// 获取选中的索引
						const selectedIndex = e.value[0]
						// 找到对应的原始数据项
						const selectedItem = this.originalCompanyData.find(item => item.projectName === selectedIndex)
						if (selectedItem) {
							// 显示projectName
							this.formData.belongingProject = selectedItem.projectName
							// 保存productId到表单
							this.formData.productId = selectedItem.productId
						}
					} else if (this.pickerTitle === '产品代码' && this.originalCompanyData) {
						// 获取选中的索引
						const selectedIndex = e.value[0]
						// 找到对应的原始数据项
						const selectedItem = this.originalCompanyData.find(item => item.productName === selectedIndex)
						if (selectedItem) {
							// 显示productName
							this.formData.productCode = selectedItem.productName
							// 保存productCode到表单
							this.formData.productCodeValue = selectedItem.productCode
						}
					}
				}
				this.showPickerVisible = false
			},
			cancel() {
				this.showPickerVisible = false
			},
			toNext() {
				// 保存任务表单数据到本地存储
				uni.setStorageSync('taskFormData', JSON.stringify(this.formData))
				uni.navigateTo({
					url: '/pages_task/selectCustomer'
				})
			},
			onPlanStartTimeChange(e) {
				this.formData.planStartTime = e.detail.value
			},
			onPlanEndTimeChange(e) {
				this.formData.planEndTime = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #F7F8FA;
		display: flex;
		flex-direction: column;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 544rpx;
			background: linear-gradient(180deg, #E4EFFE 0%, rgba(228, 239, 254, 0) 100%);
		}

		.content {
			flex: 1;
			box-sizing: border-box;

			.rejection-banner {
				display: flex;
				align-items: center;
				padding: 24rpx;
				background: #FF5030;
				color: #fff;
				margin: 24rpx;
				border-radius: 8rpx;

				.rejection-icon {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.3);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					margin-right: 16rpx;
				}

				.rejection-text {
					flex: 1;
					font-size: 28rpx;
					line-height: 1.5;
				}
			}

			.form-section {
				background: #fff;
				margin: 20rpx;
				border-radius: 16rpx;
				padding: 32rpx;

				.form-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #EBEDF0;
					padding: 30rpx 0;

					&:last-child {
						border-bottom: 0;
					}

					.form-label {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #333;
						margin-bottom: 16rpx;

						.required {
							color: #CF3546;
							margin-right: 4rpx;
						}
					}

					.txt {
						font-size: 28rpx;
						color: #333333;
					}

					.form-input {
						flex: 1;
						font-size: 28rpx;
						color: #C8C9CC;

						&.placeholder {
							color: #C8C9CC;
						}

						&.picker-input {
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}

						.icon {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}
		}

		.next-button {
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
			height: 88rpx;
			line-height: 88rpx;
			background: #388BFF;
			border-radius: 200rpx;
			margin: 32rpx;
		}
	}

	::v-deep .u-popup__content {
		border-radius: 40rpx 40rpx 0 0 !important;
	}


	.popup-content {
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		height: 70vh;
		background-color: #fff;

		.popup-header {
			padding: 40rpx 30rpx 20rpx;
			text-align: center;

			.close-icon {
				width: 44rpx;
				height: 44rpx;
				position: absolute;
				right: 32rpx;
			}

			flex-shrink: 0;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}

			.popup-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
		}

		.search-box {
			display: flex;
			align-items: center;
			background: #F7F8FA;
			border-radius: 38rpx;
			padding: 16rpx 28rpx;
			margin-bottom: 24rpx;

			.icon {
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
		}

		.project-list {
			height: calc(100% - 200rpx);

			.project-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 28rpx 0;
				font-size: 28rpx;
				border-bottom: 1rpx solid #eee;

				&:active {
					background-color: #f9f9f9;
				}

				&.active {
					.project-name {
						font-weight: 500;
						color: #388BFF;
					}

					.icon {
						opacity: 1;
					}
				}

				.project-name {
					color: #333;
					transition: all 0.2s ease;
				}

				.icon {
					width: 36rpx;
					height: 36rpx;
					opacity: 0;
					transition: opacity 0.2s ease;
				}
			}
		}

		.two-level-container {
			display: flex;
			flex: 1;
			border-top: 1rpx solid #f5f5f5;

			.primary-list {
				width: 40%;
				background-color: #f8f9fa;

				.primary-item {
					padding: 28rpx 20rpx;
					background: #F2F3F5;

					&:active {
						background: #FFFFFF;
					}

					&.primary-active {
						position: relative;
						background-color: #fff;

						&::before {
							content: '';
							position: absolute;
							top: 50%;
							left: 0;
							transform: translateY(-50%);
							width: 8rpx;
							height: 32rpx;
							background: #388BFF;
						}

						.primary-text {
							font-weight: 500;
						}
					}

					.primary-text {
						font-size: 28rpx;
						color: #666;
					}
				}
			}

			.secondary-list {
				width: 60%;
				padding: 0 20rpx;

				.secondary-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 28rpx 10rpx;
					font-size: 28rpx;
					color: #333;

					&.secondary-active {
						font-weight: 500;
						color: #388BFF;
					}
				}
			}
		}

		.popup-footer {
			padding: 20rpx 30rpx 40rpx;
			background-color: #fff;
			border-top: 1rpx solid #f5f5f5;
			flex-shrink: 0;

			.confirm-btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background-color: #2979ff;
				color: #fff;
				font-size: 32rpx;
				border-radius: 200rpx 200rpx 200rpx 200rpx;

				&:active {
					opacity: 0.8;
				}
			}
		}
	}

	@media (prefers-color-scheme: dark) {
		.popup-content {
			background-color: #1e1e1e;

			.popup-header {

				.title,
				.popup-title {
					color: #fff;
				}
			}

			.two-level-container {
				.primary-list {
					background-color: #2d2d2d;
					border-right-color: #3d3d3d;

					.primary-item {
						border-bottom-color: #3d3d3d;

						&:active {
							background-color: #3d3d3d;
						}

						&.primary-active {
							background-color: #3d3d3d;

							.primary-text {
								color: #2979ff;
							}
						}

						.primary-text {
							color: #ccc;
						}
					}
				}

				.secondary-list {
					.secondary-item {
						border-bottom-color: #3d3d3d;

						&:active {
							background-color: #3d3d3d;
						}

						&.secondary-active {
							background-color: #2d2d2d;
						}

						.secondary-text {
							color: #fff;
						}
					}
				}
			}

			.popup-footer {
				background-color: #1e1e1e;
				border-top-color: #3d3d3d;
			}
		}
	}
</style>