ygoa_miniapp/pages/work/edit/index.vue

<template>
	<view>
		<uni-card margin="10px" spacing="0">
			<uni-forms label-position="left" :label-width="110" :border="true">
				<uni-forms-item v-for="(item, index) in formElements" :label="item.elementName" :key="index">
					<uni-easyinput v-if="'多少小时' == item.elementName" :disabled="true" placeholder="请输入内容"
						:value="diffHours"></uni-easyinput>
					<!-- 输入框 -->
					<uni-easyinput v-else-if="'0' == item.type" :disabled="'0' == item.canEdit" placeholder="请输入内容"
						:value="item.defaultValue"></uni-easyinput>
					<!-- 下拉框 -->
					<!-- <uni-data-select v-else-if="'2'==item.type" :disabled="'0'==item.canEdit" placeholder="请选择内容" :value="item.defaultValue || 0" :localdata="item.typeDetail.enum"></uni-data-select> -->
					<!-- <button @click="openPopup">打开弹窗</button> -->
					<!-- <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup> -->
					<!-- 开始时间选择器 -->
					<uni-datetime-picker :end="endTime" @change="setTimeRange(item)"
						v-else-if="timeFlag && '9' == item.type && '开始时间' == item.elementName" v-model="item.defaultValue"
						:clear-icon="false" type="datetime" />
					<!-- 结束时间选择器 -->
					<uni-datetime-picker :start="startTime" @change="setTimeRange(item)" :disabled="disableEndTime"
						:placeholder="disableEndTime ? '请先确认开始时间' : '确认结束时间'"
						v-else-if="timeFlag && '9' == item.type && '结束时间' == item.elementName" v-model="item.defaultValue"
						:clear-icon="false" type="datetime" />
					<!-- 其他时间选择器 -->
					<uni-datetime-picker v-else-if="'9' == item.type" v-model="item.defaultValue" type="datetime" />
				</uni-forms-item>
			</uni-forms>
		</uni-card>
		<uni-card margin="10px" spacing="0">
			<uni-list-item>
				<template v-slot:header>
					上传附件
				</template>
			</uni-list-item>
			<uni-list-item>
				<template v-slot:body>
					<uni-file-picker v-model="fileList" :autoUpload="false" mode="list" limit="5" file-mediatype="all"
						title="选择文件" @select="handleSelect" @progress="handleProgress"
						@delete="handleDelete"></uni-file-picker>
				</template>
			</uni-list-item>
			<button type="default" style="background-color: #007aff;color: #ffffff;" @click="submitProcess">提交</button>
		</uni-card>
	</view>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user.js'
import { getProcessInfo, getProcessForm } from '@/api/work.js'

let processInfo = reactive({
	modelName: '流程申请',
	control: '',
	formId: '',
	modelId: '',
	tmodelId: '',
	isMoreIns: '',
	pathJudgeType: ''
})
onLoad((options) => {
	const { modelName, modelId, control } = options
	processInfo.modelName = modelName
	processInfo.modelId = modelId
	processInfo.control = control
	// 设置导航栏标题
	uni.setNavigationBarTitle({
		title: processInfo.modelName
	});
})
onMounted(() => {
	initProcessInfo().then(() => {
		initProcessForm()
	})
})
const userStore = useUserStore()
function initProcessInfo() {
	return new Promise<void>((resolve, reject) => {
		getProcessInfo(processInfo)
			.then(({ returnParams }) => {
				const { formId, tmodelId, isMoreIns, pathJudgeType } = returnParams.flow[0]
				processInfo.formId = formId
				processInfo.tmodelId = tmodelId
				processInfo.isMoreIns = isMoreIns
				processInfo.pathJudgeType = pathJudgeType
				resolve()
			})
	})
}
const formElements = ref([])
const startEleIndex = ref(0) // 开始时间
const endEleIndex = ref(0) // 结束时间
function initProcessForm() {
	getProcessForm(userStore.user, processInfo).then(({ returnParams }) => {
		formElements.value = returnParams.formElements

		startEleIndex.value = formElements.value.findIndex((item) => '开始时间' == item.elementName)
		endEleIndex.value = formElements.value.findIndex((item) => '结束时间' == item.elementName)
		// console.log('startEle', startEleIndex.value);
		// console.log('endEle', endEleIndex.value);
		if (startEleIndex.value != -1 && endEleIndex.value != -1) { // 判断是否需要计算时间差
			// console.log('if (startEleIndex && endEleIndex)');
			timeFlag.value = true
			disableEndTime.value = true // 计算时间差时默认禁用结束时间选择器
			formElements.value[startEleIndex.value].defaultValue = new Date()
		}
	})
}

const startTime = ref(0) // 开始时间
const endTime = ref(0) // 结束时间
const diffHours = ref(' ') // 时间差
const timeFlag = ref(false) // 是否计算时间差
const disableEndTime = ref(false) // 禁用 结束时间选择器

function setTimeRange(e) {
	if (timeFlag.value && '开始时间' == e.elementName) {
		startTime.value = e.defaultValue // 设置 开始时间
		disableEndTime.value = false // 解除 结束时间选择器 禁用
	}
	if (timeFlag.value && '结束时间' == e.elementName) {
		endTime.value = e.defaultValue // 设置 结束时间
	}
	if (timeFlag.value && startTime.value && endTime.value) {
		const start = new Date(startTime.value).getTime() // 获取  开始时间 时间戳
		const end = new Date(endTime.value).getTime() // 获取  结束时间 时间戳
		const diffSec = Math.abs(end - start) // 获取 时间戳 差值
		diffHours.value = (diffSec / 1000 / 60 / 60).toFixed(2) // 计算 时间差值 并格式化 为只有2位小数
	}
}

let fileList = ref([]) // 文件列表
function handleSelect(e) { // 新增文件
	console.log('handleSelect', e)
	for (const file of e.tempFiles) {
		fileList.value.push(file)
	}
}
function handleProgress(e) { // 文件上传
	console.log('handleProgress', e)
}
function handleDelete(e) { // 移除文件
	console.log('handleDelete', e)
	fileList.value.splice(fileList.value.indexOf(e.tempFiles), 1)
}

function submitProcess() { // 提交表单
		console.log('submitProcess')
	}
</script>

<style lang="scss"></style>