ygoa_miniapp/pages/work/purchase/start.vue

<template>
	<view class="purchase-container">
		<!-- 基本信息 -->
		<uni-card title="基本信息" spacing="0" >
			<uni-forms ref="baseFormRef" :modelValue="baseForm" :rules="baseFormRules" label-position="left" :label-width="100" :border="true">
				<uni-forms-item name="contractPurchaseNumber" label="采购单号">
					<uni-easyinput v-model="baseForm.contractPurchaseNumber" disabled placeholder="自动生成"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="contractPurchaseName" label="采购单名称" required>
					<uni-easyinput v-model="baseForm.contractPurchaseName" placeholder="请输入采购单名称"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="applyDate" label="申请日期">
					<uni-easyinput v-model="baseForm.applyDate" type="date" disabled />
				</uni-forms-item>
				<uni-forms-item name="department" label="申请部门">
					<uni-easyinput v-model="baseForm.department" disabled></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
		</uni-card>

		<!-- 物料明细 -->
		<uni-card title="物品信息" spacing="0">
			<view class="material-actions">
				<button type="primary" size="mini" @click="openMaterialSelector" plain>添加物料</button>
			</view>
			
			<!-- 物料列表 - 卡片式展示 -->
			<view v-if="materialList.length > 0" class="material-list">
				<view v-for="(item, index) in materialList" :key="index" class="material-card">
					<view class="material-header" @click="toggleExpand(index)">
						<view class="material-main-info">
							<text class="material-name">{{ item.materialName }}</text>
							<text class="material-code">{{ item.materialCode }}</text>
						</view>
						<view class="material-expand">
							<uni-icons :type="item.expanded ? 'up' : 'down'" size="16" color="#999"></uni-icons>
						</view>
					</view>
					
					<!-- 展开的详细信息 -->
					<view v-show="item.expanded" class="material-detail">
						<view class="detail-row">
							<text class="detail-label">规格型号：</text>
							<text class="detail-value">{{ item.materialModel }}</text>
							<text class="detail-label" style="margin-left: 15px;">单位：</text>
							<text class="detail-value">{{ item.measureName }}</text>
						</view>
						<view class="detail-row delete-row">
							<text class="detail-label">数量：</text>
							<uni-easyinput 
								v-model="item.qty" 
								type="digit" 
								placeholder="请输入数量"
								style="width: 100px; display: inline-block; margin-right: 15px;"
							/>
							<button type="warn" size="mini" @click="removeMaterial(index)">删除</button>
						</view>
					</view>
				</view>
			</view>
			
			<view v-else class="empty-materials">
				<text>暂无物料，请点击上方按钮添加</text>
			</view>
		</uni-card>

		<!-- 上传附件 -->
		<uni-card title="上传附件" :extra="`${fileList.length}/50`" spacing="0">
			<uni-file-picker 
				ref="filePicker" 
				v-model="fileList" 
				:auto-upload="true" 
				mode="list" 
				:limit="50"
				:limit-length="50" 
				file-mediatype="all"
				@select="handleFileSelect" 
				@progress="handleFileProgress" 
				@success="handleFileSuccess" 
				@fail="handleFileFail" 
				@delete="handleFileDelete" 
			/>
		</uni-card>

		<!-- 提交按钮 -->
		<view class="submit-btn-wrapper">
			<button type="primary" :loading="isSubmitting" :disabled="isSubmitting" @click="submitForm">提 交</button>
		</view>

		<!-- 选择器弹出层 -->
		<uni-popup ref="selectorPopup" type="center">
			<view class="selector-popup">
				<view class="popup-header">
					<text class="popup-title">{{ popupTitle }}</text>
					<uni-icons type="closeempty" size="20" @click="closePopup"></uni-icons>
				</view>
				
				<!-- 搜索框 -->
				<view v-if="selectorType === 'material'" class="search-bar">
					<uni-easyinput 
						v-model="searchKeyword" 
						placeholder="输入物料名称搜索"
						clearable
						@confirm="handleSearch"
					/>
					<button type="primary" size="mini" @click="handleSearch">搜索</button>
				</view>
				
				<scroll-view 
					scroll-y 
					class="popup-content"
					refresher-enabled
					:refresher-triggered="isRefreshing"
					@refresherrefresh="onRefresh"
					@scrolltolower="loadMore"
				>
					<view v-for="(item, index) in selectorList" :key="index" 
					      class="selector-item" 
					      @click="selectItem(item)">
						<view class="selector-item-content">
							<view class="item-info">
								<text class="item-name">{{ item.materialName || item.itemName }}</text>
								<text class="item-code">{{ item.materialCode || item.itemCode }}</text>
								<text class="item-spec">{{ item.materialModel || item.specification || '' }}</text>
								<text class="item-unit">{{ item.measureName || item.unit || '' }}</text>
								<text v-if="item.itemTypeName" class="item-type">{{ item.itemTypeName }}</text>
							</view>
							<text v-if="isSelected(item)" class="selected-tag">已选择</text>
						</view>
					</view>
					
					<!-- 加载状态 -->
					<view v-if="isLoading && selectorList.length > 0" class="loading-text">
						<uni-load-more status="loading" />
					</view>
					
					<!-- 没有更多数据 -->
					<view v-else-if="!hasMore && selectorList.length > 0" class="no-more-text">
						<text>没有更多了</text>
					</view>
					
					<!-- 空数据提示 -->
					<view v-if="selectorList.length === 0 && !isLoading" class="empty-data">
						<text>{{ searchKeyword ? '暂无相关数据' : '暂无数据' }}</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user.js'
import $modal from '@/plugins/modal.js'
import $tab from '@/plugins/tab.js'
import { getPurchaseInitData, startPurchaseProcess, getMaterialList } from '@/api/purchase.js'
import { uploadFile, getProcessInfo } from '@/api/work.js'
import config from '@/config.js'

const userStore = useUserStore()

// 流程信息（参考通用流程）
let processInfo = reactive({
	modelName: '采购申请',
	reqOffice: 0,
	control: '',
	formId: '',
	modelId: '',
	tmodelId: '',
	isMoreIns: '',
	pathJudgeType: '',
	form: []
})

// 接收页面参数
onLoad((options) => {
	const { modelName, modelId, control } = options
	if (modelName) processInfo.modelName = modelName
	if (modelId) processInfo.modelId = modelId
	if (control) processInfo.control = control
})

// 初始化流程信息（获取 formId, tmodelId 等）
onMounted(() => {
	initProcessInfo().then(() => {
		// 初始化基本信息（流水号、部门等）
		initBaseForm()
	})
})

function initProcessInfo() {
	return new Promise<void>((resolve, reject) => {
		// 如果没有传入 modelId，使用默认值或提示错误
		if (!processInfo.modelId) {
			$modal.msgError('缺少流程模型')
			reject(new Error('缺少流程模型 ID'))
			return
		}
		
		getProcessInfo(processInfo)
			.then(({ returnParams }) => {
				const { formId, tmodelId, isMoreIns, pathJudgeType, reqOffice } = returnParams.flow[0]
				processInfo.formId = formId
				processInfo.tmodelId = tmodelId
				processInfo.isMoreIns = isMoreIns
				processInfo.pathJudgeType = pathJudgeType
				processInfo.reqOffice = reqOffice || 0 // 是否需要附件（0-不需要，1-需要）
				resolve()
			})
			.catch(err => {
				console.error('获取流程信息失败:', err)
				reject(err)
			})
	})
}

function initBaseForm() {
	// 获取初始化数据（流水号、部门信息等）
	getPurchaseInitData(userStore.user.useId).then(res => {
		if (res.returnCode === '1') {
			const params = res.returnParams
			baseForm.contractPurchaseNumber = params.contractPurchaseNumber || ''
			baseForm.initiator = params.initiator || userStore.user.name
			baseForm.department = params.department || ''
			baseForm.depid = params.depid || null
		}
	}).catch(err => {
		console.error('获取初始化数据失败:', err)
	})
}
const baseForm = reactive({
	contractPurchaseNumber: '',
	contractPurchaseName: '',
	// iOS 兼容的日期格式：使用 "/" 而不是 "-"
	applyDate: '',
	initiator: '',
	department: '',
  depid: null
})

const materialList = ref<any[]>([])
const isSubmitting = ref(false)

// 文件上传相关
const fileList = ref<any[]>([])
const fileSeqs = ref<any[]>([])

// 表单校验规则（参考通用流程）
const baseFormRef = ref(null)
const baseFormRules = computed(() => {
	return {
		contractPurchaseName: {
			rules: [{ required: true, message: '请输入采购单名称' }],
			label: '采购单名称'
		}
	}
})

// 选择器相关
const selectorPopup = ref(null)
const selectorList = ref<any[]>([])
const selectorType = ref('') // 'material'

// 分页和搜索相关
const currentPage = ref(1)
const pageSize = 20
const hasMore = ref(true)
const isLoading = ref(false)
const isRefreshing = ref(false)
const searchKeyword = ref('')

const popupTitle = computed(() => {
	return selectorType.value === 'material' ? '选择物料' : '选择'
})

// 切换展开/收起状态
function toggleExpand(index: number) {
	if (materialList.value[index]) {
		materialList.value[index].expanded = !materialList.value[index].expanded
	}
}

onLoad(() => {
	initData()
})

async function initData() {
	try {
		const res = await getPurchaseInitData(userStore.user.useId)
		if (res.returnCode === '1') {
			const data = res.returnParams
			baseForm.contractPurchaseNumber = data.contractPurchaseNumber
			baseForm.initiator = data.initiator
			baseForm.department = data.department
			baseForm.applyDate = data.applyDate
      baseForm.depid = data.depid
		}
	} catch (error) {
		console.error('初始化数据失败', error)
		$modal.msgError('加载数据失败')
	}
}

// 打开物料选择器
async function openMaterialSelector() {
	selectorType.value = 'material'
	currentPage.value = 1
	hasMore.value = true
	selectorList.value = []
	await loadMaterials(1, false)
	openPopup()
}

// 加载物料列表（分页）
async function loadMaterials(page: number, append: boolean = false) {
	if (isLoading.value) return
	
	isLoading.value = true
	if (page === 1) {
		isRefreshing.value = true
	}
	
	try {
		const res = await getMaterialList(
			userStore.user.useId,
			page,
			pageSize,
			searchKeyword.value
		)
		
		if (res.returnCode === '1') {
			const result = res.returnParams
			const newList = result.list || []
			
			if (append) {
				// 追加模式（加载更多）
				selectorList.value = [...selectorList.value, ...newList]
			} else {
				// 覆盖模式（刷新/搜索）
				selectorList.value = newList
			}
			
			// 判断是否还有更多数据
			hasMore.value = selectorList.value.length < result.total
		} else {
			$modal.msgError('加载物料失败')
		}
	} catch (error) {
		console.error('加载物料失败', error)
		$modal.msgError('加载失败')
	} finally {
		isLoading.value = false
		isRefreshing.value = false
	}
}

// 加载更多
function loadMore() {
	if (!hasMore.value || isLoading.value) return
	currentPage.value++
	loadMaterials(currentPage.value, true)
}

// 下拉刷新
function onRefresh() {
	currentPage.value = 1
	loadMaterials(1, false)
}

// 搜索
function handleSearch() {
	currentPage.value = 1
	loadMaterials(1, false)
}

// 判断物料是否已选中
function isSelected(item: any): boolean {
	const code = item.materialCode || item.itemCode
	return materialList.value.some(m => 
		(m.materialCode || '') === code
	)
}

function openPopup() {
	;(selectorPopup.value as any).open()
}

function closePopup() {
	;(selectorPopup.value as any).close()
}

function selectItem(item: any) {
	// 只处理物料选择
	addMaterial(item)
	closePopup()
}

function addMaterial(item: any) {
	// 检查是否已存在
	const exists = materialList.value.some(m => m.materialCode === item.materialCode || m.materialCode === item.itemCode)
	if (exists) {
		$modal.msgWarn('该物料已存在')
		return
	}
	
	materialList.value.push({
		materialCode: item.materialCode || item.itemCode,
		materialName: item.materialName || item.itemName,
		materialModel: item.materialModel || item.specification,
		measureName: item.measureName || item.unit,
		itemTypeName: item.itemTypeName || '', // 物料类别
		qty: item.qty || 0,
		expanded: true // 默认展开
	})
}
async function handleFileSelect(files: any) {
	files.tempFiles.forEach(async (file: any) => {
		const data = {
			name: file.name,
			filePath: file.path,
		}
		try {
			const res = await uploadFile(data)
			file.seq = res.returnParams
			fileSeqs.value.push({ 'seq': res.returnParams, 'path': file.path })
			fileList.value.push(file)
			$modal.msgSuccess('文件' + data.name + '上传成功')
		} catch (err) {
			$modal.msgError('文件' + data.name + '上传失败，请删除重新上传')
			console.error('文件上传失败:', err)
		}
	})
}

function handleFileProgress(file: any, progress: any) {
	//console.log('handleFileProgress', file, progress)
}

function handleFileSuccess(file: any, res: any) {
	//console.log('handleFileSuccess', file, res)
}

function handleFileFail(file: any, err: any) {
	//console.log('handleFileFail', file, err)
}

function handleFileDelete(file: any) {
	const index = fileSeqs.value.findIndex(({ path }) => path === file.tempFilePath)
	if (index !== -1) {
		fileSeqs.value.splice(index, 1)
	}
}

function removeMaterial(index: number) {
	$modal.confirm('', '确认删除该物料？')
		.then(() => {
			materialList.value.splice(index, 1)
		})
		.catch(() => {})
}

async function submitForm() {
	// 先进行表单校验（使用 uni-forms 的 validate 方法）
	if (!baseFormRef.value) {
		$modal.msgError('表单未初始化')
		return
	}
	
	try {
		await baseFormRef.value.validate()
	} catch (error) {
		console.error('表单校验失败', error)
		$modal.msgError('请填写必填项')
		return
	}
			
	// 验证采购单名称长度
	if (baseForm.contractPurchaseName && baseForm.contractPurchaseName.length > 100) {
		$modal.msgError('采购单名称长度不能超过 100 个字符')
		return
	}
	
	// 校验物料列表和数量
	if (materialList.value.length === 0) {
		$modal.msgError('请添加物料')
		return
	}
	
		// 检查每个物料的数量是否填写且为大于 0 的数字
		for (let i = 0; i < materialList.value.length; i++) {
			const item = materialList.value[i]
			if (!item.qty || Number(item.qty) <= 0) {
				$modal.msgError(`请填写第${i + 1}个物料的数量，且必须大于 0`)
				return
			}
		}

	isSubmitting.value = true
	
	try {
		// 构建表单数据（包含流程信息）
		const formData = {
			...baseForm,
			detailList: materialList.value.map(item => ({
				materialCode: item.materialCode,
				materialName: item.materialName,
				materialModel: item.materialModel,
				measureName: item.measureName,
				qty: item.qty,
				price: item.price,
				cess: item.cess
			}))
		}

		// 准备提交流程参数（参考通用流程 bpm_20150325001FlowStart）
		const processInfoData = {
			staffId: userStore.user.useId,
			staffName: userStore.user.name,
			gxId: userStore.user.gxId,
			groupId: userStore.user.groupid,
			insName: userStore.user.name + '的'+ processInfo.modelName,
			modelId: processInfo.modelId, // 从页面参数或初始化获取
			tmodelId: processInfo.tmodelId, // 从 getProcessInfo 获取
			formId: processInfo.formId, // 从 getProcessInfo 获取
			// 附件 ID：参考 work.js，为空时设置为空字符串
			fileIds: fileSeqs.value.length === 0 ? '' : fileSeqs.value.map(f => f.seq)
		}

		// 检查是否需要附件
		if (processInfo.reqOffice == 1 && fileSeqs.value.length === 0) {
			$modal.msgError('该流程需要上传附件')
			isSubmitting.value = false
			return
		}

		// 一次性提交表单和流程数据（包含附件）
		const res = await startPurchaseProcess(userStore.user.useId, formData, processInfoData)
		
		if (res.returnCode !== '1') {
			$modal.msgError(res.returnMsg || '提交失败')
			isSubmitting.value = false
			return
		}

		$modal.msgSuccess('提交成功')
		setTimeout(() => {
			$tab.navigateBack()
		}, 1000)
	} catch (error) {
		console.error('提交失败', error)
		$modal.msgError('提交失败，请重试')
	} finally {
		isSubmitting.value = false
	}
}
</script>

<style lang="scss" scoped>
.purchase-container {
	padding-bottom: 80px;
}

.material-actions {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
	
	button {
		flex: 1;
	}
}

// 基本信息中的禁用字段样式优化（参考 edit/index.vue）
::v-deep .uni-forms {
	.uni-forms-item__content {
		.uni-easyinput__content-input {
			font-size: calc(14px + 1.2*(1rem - 16px)) !important;
			font-weight: 500;
			color: #333;
		}
		
		.uni-date {
			.uni-icons {
				font-size: calc(22px + 1.2*(1rem - 16px)) !important;
				font-weight: 500;
			}
			
			.uni-date__x-input {
				height: auto;
				font-size: calc(14px + 1.2*(1rem - 16px)) !important;
				font-weight: 500;
				color: #333;
			}
		}
	}
}

// 物料列表 - 卡片式展示
.material-list {
	.display: flex;
	flex-direction: column;
	gap: 10px;
}

.material-card {
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	overflow: hidden;
	background-color: #fff;
	margin-bottom: 8px;
		
	.material-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 12px;
		background-color: #f8f9fa;
		cursor: pointer;
			
		.material-main-info {
			display: flex;
			align-items: center;
			gap: 8px;
			flex: 1;
				
			.material-name {
				font-size: 14px;
				font-weight: bold;
				color: #333;
			}
				
			.material-code {
				font-size: 12px;
				color: #999;
				white-space: nowrap;
			}
		}
			
		.material-expand {
			display: flex;
			align-items: center;
			margin-left: 10px;
		}
	}
		
	.material-detail {
		padding: 10px 12px;
		border-top: 1px solid #e5e5e5;
			
		.detail-row {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 8px;
				
			.detail-label {
				font-size: 13px;
				color: #666;
				flex-shrink: 0;
			}
				
			.detail-value {
				flex: 0 0 auto;
				font-size: 13px;
				color: #333;
			}
		}
			
		.delete-row {
			margin-top: 10px;
			text-align: center;
			padding-top: 8px;
			border-top: 1px dashed #e5e5e5;
		}
	}
}

.empty-materials {
	text-align: center;
	padding: 30px;
	color: #909399;
	font-size: 14px;
}

.submit-btn-wrapper {
  position: sticky;
  width: 100%;
  bottom: 10px;
  padding: 10px 15px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 10;
  box-sizing: border-box;

  button {
    background-color: #007aff !important;
    color: #fff !important;
  }
}

.selector-popup {
	width: 90%;
	max-width: 500px;
	max-height: 70vh;
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	
	/* 确保弹窗居中 */
	position: relative;
	margin: 0 auto;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #e5e5e5;
		
		.popup-title {
			font-size: 16px;
			font-weight: bold;
		}
	}
	
	.search-bar {
		display: flex;
		gap: 10px;
		padding: 10px 15px;
		align-items: center;
	}
	
	.popup-content {
		max-height: 50vh;
		
		.selector-item {
			padding: 10px 12px;
			border-bottom: 1px solid #f0f0f0;
			
			&:active {
				background-color: #f5f5f5;
			}
			
			.selector-item-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 8px;
				
				.item-info {
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					gap: 4px;
					
					.item-name {
						font-size: 15px;
						font-weight: bold;
						color: #333;
						flex-basis: 100%;
						margin-bottom: 4px;
					}
					
					.item-code,
					.item-spec,
					.item-unit,
					.item-type {
						font-size: 13px;
						color: #666;
						white-space: nowrap;
						font-weight: 500;
					}
					
					.item-code::after,
					.item-spec::after,
					.item-unit::after {
						content: ' | ';
						margin: 0 4px;
						color: #ddd;
					}
					
					.item-type:last-child::after,
					.item-unit:last-child::after {
						content: '';
					}
				}
				
				.selected-tag {
					color: #409eff;
					font-size: 12px;
					flex-shrink: 0;
					white-space: nowrap;
				}
			}
		}
		
		.loading-text {
			text-align: center;
			padding: 12px;
			color: #909399;
			font-size: 13px;
		}
		
		.no-more-text {
			text-align: center;
			padding: 12px;
			color: #909399;
			font-size: 13px;
		}
		
		.empty-data {
			text-align: center;
			padding: 30px;
			color: #909399;
		}
	}
}
</style>