|
|
@@ -0,0 +1,104 @@
|
|
|
+<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-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="primary" @click="submitProcess">提交</button>
|
|
|
+ </uni-card>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ import { onMounted, reactive, ref } from 'vue'
|
|
|
+ import { onLoad } from '@dcloudio/uni-app'
|
|
|
+ onLoad((options) => {
|
|
|
+ // 获取传入的标题参数
|
|
|
+ const title = options.title || '流程申请';
|
|
|
+ // 设置导航栏标题
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: title
|
|
|
+ });
|
|
|
+ })
|
|
|
+ let formElements = reactive([{ elementName: 'EU单号', canEdit: '0', defaultValue: 'YGTX-WXJS027', type: '0', }, { elementName: '发起人', canEdit: '0', defaultValue: '账号1', type: '0', }, { elementName: '外协类别', canEdit: '1', defaultValue: '', type: '0', }, { elementName: '外协人姓名', canEdit: '1', defaultValue: '', type: '0', }, { elementName: '开始时间', canEdit: '1', defaultValue: '', type: '9', }, { elementName: '结束时间', canEdit: '1', defaultValue: '', type: '9', }, { elementName: '多少小时', canEdit: '1', defaultValue: '', type: '0', }, { elementName: '开户行', canEdit: '0', defaultValue: '', type: '0', }, { elementName: '开户号', canEdit: '0', defaultValue: '', type: '0', }, { elementName: '综合管理部审批', canEdit: '0', defaultValue: '', type: '13', }, { elementName: '财务审批', canEdit: '0', defaultValue: '', type: '13', }, { elementName: '总经理审批', canEdit: '0', defaultValue: '', type: '13', }])
|
|
|
+ const startTime = ref('') // 开始时间
|
|
|
+ const endTime = ref('') // 结束时间
|
|
|
+ const diffHours = ref(' ') // 时间差
|
|
|
+ const timeFlag = ref(false) // 是否计算时间差
|
|
|
+ const disableEndTime = ref(false) // 禁用 结束时间选择器
|
|
|
+ onMounted(() => {
|
|
|
+ const startEle = formElements.find((item) => '开始时间' == item.elementName)
|
|
|
+ const endEle = formElements.find((item) => '结束时间' == item.elementName)
|
|
|
+ if (startEle && endEle) { // 判断是否需要计算时间差
|
|
|
+ timeFlag.value = true
|
|
|
+ disableEndTime.value = true // 计算时间差时默认禁用结束时间选择器
|
|
|
+ }
|
|
|
+ })
|
|
|
+ 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 = reactive([]) // 文件列表
|
|
|
+ function handleSelect(e) { // 新增文件
|
|
|
+ console.log('handleSelect', e)
|
|
|
+ for (const file of e.tempFiles) {
|
|
|
+ fileList.push(file)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function handleProgress(e) { // 文件上传
|
|
|
+ console.log('handleProgress', e)
|
|
|
+ }
|
|
|
+ function handleDelete(e) { // 移除文件
|
|
|
+ console.log('handleDelete', e)
|
|
|
+ fileList.splice(fileList.indexOf(e.tempFiles), 1)
|
|
|
+ }
|
|
|
+
|
|
|
+ function submitProcess() { // 提交表单
|
|
|
+ console.log('submitProcess')
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+</style>
|
wangpx