ys-app/src/pages/business/CRM/marketInformation/keyModelTasks.vue

<template>
	<view class="con-body">
		<view class="con-bg">
			<!-- 头部 -->
			<customHeader ref="customHeaderRef" :title="'重点型号任务信息添加'" :leftFlag="true" :rightFlag="true">
				<template #right>
					<view class="head-right" @click="submitForm">
						<uni-icons custom-prefix="iconfont" type="icon-phonebaocun" size="22"
							color="#B7D2FF"></uni-icons>保存
					</view>
				</template>
			</customHeader>

			<!-- 高度来避免头部遮挡 -->
			<view class="top-height"></view>

			<!-- 正文内容 -->
			<view class="white-bg">
				<view class="form-con">
					<uni-forms ref="formRef" :model="formData" :rules="rules" label-width="100px">
						<uni-forms-item label="客户名称" name="cusName" class="f-c-right">
							<view @click="chooseCustomer" class="form-item-container">
								<text class="name">{{ formData.cusName || '点击选择客户' }}</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="重点型号" name="keyModels" required
							class="uni-forms-item is-direction-top is-top">
							<uni-easyinput type="textarea" autoHeight v-model="formData.keyModels"
								placeholder="请输入重点型号" class="form-texarea" />
						</uni-forms-item>
						<uni-forms-item label="目前状态" name="currentStatus" required
							class="uni-forms-item is-direction-top is-top">
							<uni-easyinput type="textarea" autoHeight v-model="formData.currentStatus"
								placeholder="请输入目前状态" class="form-texarea" />
						</uni-forms-item>
						<uni-forms-item label="批产计划" name="batchProductionPlan" required
							class="uni-forms-item is-direction-top is-top">
							<uni-easyinput type="textarea" autoHeight v-model="formData.batchProductionPlan"
								placeholder="请输入批产计划" class="form-texarea" />
						</uni-forms-item>
                        <uni-forms-item label="外协、外包、上级单位情况" name="situationOfSuperiorUnits" required
                        	class="uni-forms-item is-direction-top is-top">
                        	<uni-easyinput type="textarea" autoHeight v-model="formData.situationOfSuperiorUnits"
                        		placeholder="请输入外协、外包、上级单位情况" class="form-texarea" />
                        </uni-forms-item>
						<uni-forms-item label="下级配套单位" name="lowerLevelSupportingUnits" required
							class="uni-forms-item is-direction-top is-top">
							<uni-easyinput type="textarea" autoHeight v-model="formData.lowerLevelSupportingUnits"
								placeholder="请输入下级配套单位" class="form-texarea" />
						</uni-forms-item>
						<uni-forms-item label="备注" name="remark" class="uni-forms-item is-direction-top is-top">
							<uni-easyinput type="textarea" autoHeight v-model="formData.remark" placeholder="请输入备注"
								class="form-texarea" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		onUnmounted,
		computed
	} from 'vue'
	import customHeader from '@/components/customHeader.vue'
	import {
		getGuestList
	} from '@/api/business.js'
	import {
		isEmpty
	} from '@/utils/validate.js'
	import {
		crmMarketInformationAdd
	} from '@/api/crm/api_ys.js'


	let customerUser = reactive({})
	// 客户相关
	const guestList = ref([])
	const guestArr = ref([])
	const guestIndex = ref(0)

	// 表单数据
	const formData = ref({
					cusId: null,
					cusName: null,
					keyModels: null,//重点型号
					currentStatus: null,//目前状态
					batchProductionPlan: null,//批产计划
					situationOfSuperiorUnits: null,//外协、外包、上级单位情况
					lowerLevelSupportingUnits: null,//下级配套单位
					remark: "", //、备注
					informationType:"重点型号任务信息" //信息类型
				})

	// 表单验证规则
	const rules = {
		cusName: {
			rules: [{
				required: true,
				errorMessage: '请选择客户'
			}]
		},
		keyModels: {
			rules: [{
				required: true,
				errorMessage: '请输入重点型号'
			}]
		},
		currentStatus: {
			rules: [{
				required: true,
				errorMessage: '请输入目前状态'
			}]
		},
		batchProductionPlan: {
			rules: [{
				required: true,
				errorMessage: '请输入批产计划'
			}]
		},
		situationOfSuperiorUnits: {
			rules: [{
				required: true,
				errorMessage: '请输入外协、外包、上级单位情况'
			}]
		},
		lowerLevelSupportingUnits: {
			rules: [{
				required: true,
				errorMessage: '请输入下级配套单位'
			}]
		},
	}
	const imgList = ref([])

	// picker 相关
	const index = ref(0)
	// 表单引用 & 客户选择器引用
	const formRef = ref(null)
	const customHeaderRef = ref(null)
	// 选择客户页面跳转
	function chooseCustomer() {
		uni.navigateTo({
			url: '/pages/business/CRM/chooseCus'
		})
	}
	//定义数据接收的值
	let selectedCustomer = reactive(null)

	//监听时间
	onMounted(() => {
		uni.$on('onCustomerSelected', handleCustomerSelected)
	})
	//取消监听
	onUnmounted(() => {
		uni.$off('onCustomerSelected', handleCustomerSelected)
	})

	//处理 接收数据
	const handleCustomerSelected = (data) => {
		formData.value.cusName = data.cusName
		formData.value.cusId = data.cusId
	}
	// 提交表单
	const submitForm = async () => {
		try {
			// 表单校验
			await formRef.value.validate()
			const res = await crmMarketInformationAdd(formData.value);
			console.log(res)
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			})
			console.log('表单数据:', formData.value)
		} catch (err) {
			console.log('表单验证失败:', err)
		}
	}
</script>

<style scoped>
	.white-bg {
		width: 750rpx;
		padding: 30rpx 0 0;
		margin-bottom: 0;
		border-radius: 8px 8px 0 0;
	}

	.form-con {
		/* #ifdef APP-PLUS */
		height: calc(120vh - 100px)
			/* #endif */
			/* #ifndef APP-PLUS */
			height:calc(120vh - 80px)
			/* #endif */
	}

	:deep(.uni-date-x) {
		display: block;
	}

	:deep(.uni-date-x .icon-calendar) {
		float: right;
		margin-top: 15rpx;
		margin-right: 20rpx;
		background: url('../../../static/images/business/icon-date.png') no-repeat;
		background-size: 32rpx 35rpx;
		width: 32rpx;
		height: 35rpx;
	}

	:deep(.uni-date-x .icon-calendar::before) {
		display: none;
	}

	:deep(.uni-date-x .uni-date__x-input) {
		padding-left: 20rpx;
		color: #919191;
	}
</style>