crm-app-vue3/pages/orderForm/index.vue

<template>
	<view class="oder_form_wrap">
		<u-navbar placeholder :autoBack="true" title="发单表单" @rightClick="handleNavSaveClick">
			<view class="u-nav-slot" slot="right">
				保存
			</view>
		</u-navbar>

		<view class="form_wrap">
			<u--form labelPosition="left" labelWidth="100" :model="form" :rules="rules" ref="form" class="form_wrap"
				:errorType="'toast'">
				<u-form-item label="省市区" borderBottom>
					<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion">
						<view class="region-picker">
							<template v-if="form.province">
								<u--input :value="form.province + '/' + form.city + '/' + form.area" placeholder="点击选择"
									readonly suffixIcon="arrow-right" suffixIconStyle="color : #c0c4cc"></u--input>
							</template>
							<template v-else>
								<u--input placeholder="点击选择" readonly suffixIcon="arrow-right"
									suffixIconStyle="color : #c0c4cc"></u--input>
							</template>
						</view>
					</pick-regions>
				</u-form-item>

				<u-form-item label="详细地址" prop="address" borderBottom>
					<u--textarea v-model="form.address" placeholder="请输入详细地址" count confirmType="done"></u--textarea>
				</u-form-item>

				<u-form-item label="上门时间" prop="visitTime" borderBottom>
					<date-time-picker v-model="form.visitTime" :value-format="'YYYY-MM-DD HH:mm:ss'" :type="'datetime'">
					</date-time-picker>
				</u-form-item>

				<u-form-item label="类型" prop="category" borderBottom>
					<ld-select :list="categoryDict" label-key="dictLabel" value-key="dictValue" placeholder="请选择类型"
						v-model="form.category" :border="false"></ld-select>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="物品品牌" prop="brand" borderBottom>
					<u--input v-model="form.brand" placeholder="请输入物品品牌" border="none"></u--input>
				</u-form-item>

				<u-form-item label="价格范围" prop="priceRange" borderBottom>
					<u--input v-model="form.priceRange" placeholder="请输入价格范围" border="none"></u--input>
				</u-form-item>

				<u-form-item label="战术选择" prop="tactic" borderBottom>
					<ld-select :list="tacticDict" label-key="dictLabel" value-key="dictValue" placeholder="请选择战术"
						v-model="form.tactic" :border="false"></ld-select>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="补充说明" prop="remarks" borderBottom>
					<u--textarea v-model="form.remarks" placeholder="请输入补充说明" count confirmType="done"></u--textarea>
				</u-form-item>

			</u--form>
		</view>

		<!-- 文件上传区域 -->
		<view class="upload_area">
			<!-- 聊天记录附件 -->
			<order-file-upload title="聊天记录附件" orderFileType="1" :file-list="form.chatAttachmentList"
				@update:fileList="updateChatFiles" 
				tip-text="上传聊天截图、录音等文件"></order-file-upload>

			<!-- 报价附件 -->
			<order-file-upload title="报价附件" orderFileType="2" :file-list="form.quoteAttachmentList"
				@update:fileList="updateQuoteFiles" 
				tip-text="上传报价附件"></order-file-upload>

			<!-- 高清图附件 -->
			<order-file-upload title="高清图附件" orderFileType="3" :file-list="form.hdImageAttachmentList"
				@update:fileList="updateHdImageFiles" 
				tip-text="上传物品高清图片"></order-file-upload>

			<!-- 其他附件 -->
			<order-file-upload title="其他附件" orderFileType="4" :file-list="form.otherAttachmentList"
				@update:fileList="updateOtherFiles" 
				tip-text="上传其他相关文件"></order-file-upload>
		</view>

	</view>
</template>

<script>
	import orderFileUpload from '@/components/order-file-upload/order-file-upload.vue'
	import dateTimePicker from "@/components/dateTimePicker/dateTimePicker.vue"
	export default {
		components: {
			orderFileUpload,
			dateTimePicker
		},
		data() {
			return {
				defaultRegion: ['广东省', '广州市', '番禺区'],
				categoryDict: [],
				tacticDict: [],

				form: {
					clueId: '',
					sendDate: '',
					website: '',
					item: '',
					phone: '',
					address: '',
					visitTime: '',
					remarks: '',
					category: '',
					brand: '',
					priceRange: '',
					tactic: '',
					// 地区信息
					province: '',
					city: '',
					area: '',
					// 附件列表
					chatAttachmentList: [], // 聊天记录附件
					quoteAttachmentList: [], // 报价附件
					hdImageAttachmentList: [], // 高清图附件
					otherAttachmentList: [] // 其他附件
				},

				rules: {
					sendDate: {
						type: 'string',
						required: true,
						message: '请输入发单日期',
						trigger: ['blur', 'change']
					},
					website: {
						type: 'url',
						message: '请输入正确的网址格式',
						trigger: ['blur', 'change']
					},
					item: {
						type: 'string',
						required: true,
						message: '请输入物品描述',
						trigger: ['blur', 'change']
					},
					phone: {
						type: 'string',
						required: true,
						message: '请输入联系电话',
						trigger: ['blur', 'change']
					},
					address: {
						type: 'string',
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					},
					visitTime: {
						type: 'string',
						required: true,
						message: '请输入上门时间',
						trigger: ['blur', 'change']
					},
					category: {
						type: 'string',
						required: true,
						message: '请选择类型',
						trigger: ['blur', 'change']
					},
					brand: {
						type: 'string',
						required: true,
						message: '请输入物品品牌',
						trigger: ['blur', 'change']
					},
					tactic: {
						type: 'string',
						required: true,
						message: '请选择战术',
						trigger: ['blur', 'change']
					}
				}
			}
		},

		methods: {
			// 获取地区选择
			handleGetRegion(region) {
				const [provinceData, cityData, areaData] = region;
				this.form.province = provinceData.name;
				this.form.city = cityData.name;
				this.form.area = areaData.name;
				// 只在详细地址为空时自动填充省市区
				if (!this.form.address || this.form.address.trim() === '') {
					this.form.address = this.form.province + this.form.city + this.form.area;
				}
			},

			// 更新各类附件
			updateChatFiles(fileList) {
				this.form.chatAttachmentList = fileList;
			},

			updateQuoteFiles(fileList) {
				this.form.quoteAttachmentList = fileList;
			},

			updateHdImageFiles(fileList) {
				this.form.hdImageAttachmentList = fileList;
			},

			updateOtherFiles(fileList) {
				this.form.otherAttachmentList = fileList;
			},

			// 文件变化处理
			handleFileChange(data) {
				console.log('文件上传变化:', data);
			},
			// 获取字典数据
			async getDicts() {
				try {
					const [categoryRes, tacticRes] = await Promise.all([
						this.$getDicts('crm_form_category'),
						this.$getDicts('crm_form_tactic')
					]);

					this.categoryDict = categoryRes;
					this.tacticDict = tacticRes;
				} catch (error) {
					console.error('获取字典数据失败:', error);
				}
			},

			// 处理保存
			async handleNavSaveClick() {
				try {
					// 表单验证
					await this.$refs.form.validate();

					// 合并所有附件
					const allAttachments = [
						...this.form.chatAttachmentList,
						...this.form.quoteAttachmentList,
						...this.form.hdImageAttachmentList,
						...this.form.otherAttachmentList
					];

					// 准备提交数据
					const submitData = {
						...this.form,
						uploadList: allAttachments
					};

					// 调用保存接口
					await uni.$u.api.saveClueOrderForm(submitData);

					uni.$u.toast('发单记录添加成功');

					// 延迟返回
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);

				} catch (error) {
					console.error('保存失败:', error);
					if (error.message) {
						uni.$u.toast(error.message);
					}
				}
			}
		},

		onLoad(option) {
			const clueId = option.clueId;
			this.form.clueId = clueId;
			this.getDicts();
		}
	}
</script>

<style lang="scss" scoped>
	.oder_form_wrap {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 100rpx;
		padding-top: 10px;
	}

	.form_wrap {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.upload_area {
		padding: 0 20rpx;
		margin: 20rpx 0;
	}

	.bottom_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background: #fff;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.region-picker {
		width: 100%;
	}

	::v-deep .u-form-item__body {
		padding: 20rpx 40rpx;
	}

	::v-deep .u-form-item {
		border-bottom: 1rpx solid #f5f5f5;
	}

	::v-deep .u-form-item:last-child {
		border-bottom: none;
	}
</style>