ygoa_miniapp/pages/process/detail/index.vue

<template>
	<view>
		<uni-card>
			<uni-list>
				<uni-list-item v-for="(elem, index) in formElements" :key="index">
					<template v-slot:header>
						<text class="element_name">{{ elem.elementName }}</text>
					</template>
					<template v-slot:footer>
						<text class="element_value">{{ elem.defaultValue }}</text>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>
		<uni-card v-if="repeatingTable.elementItem.length > 0">
			<button @click="handleRepeatingTable" type="primary">查看重复表</button>
		</uni-card >
		<uni-card v-if="fileList.length > 0" v-for="(item, index) in fileList" :key="index">
			<view>
				<attachment-list :attachments="item.files" ></attachment-list>
			</view>
		</uni-card>
		<uni-popup ref="repeatingTablePopup">
			<uni-card margin="0px" spacing="0px" padding="0px">
				<view class="repeating_table_container">
					<uni-table :border="true" stripe>
						<uni-tr>
							<uni-th align="center" v-for="(item, index) in repeatingTable.elementItem" :key="index">{{ item.elementName.slice(3, 5) }}</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in (repeatingTable.elements.length / repeatingTable.elementItem.length)" :key="index">
							<uni-td align="center" v-for="col in repeatingTable.elementItem.length" :key="col">
							<!-- (列数 - 1) * 总行数 + 当前行数 -->
							{{repeatingTable.elements[(col-1)*(repeatingTable.elements.length / repeatingTable.elementItem.length) + index]!.defaultValue}}
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</uni-card>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import attachmentList from '@/components/ygoa/attachmentList.vue'
	import { getProcessInfo } from '@/api/process.js'
	import { useUserStore } from '@/store/user.js'
	const userStore = useUserStore()
	const processInfo = reactive({
		insId: '',
		insName: ''
	})
	onLoad(({insId, insName}) => {
		// 获取传入的标题参数
		const title = insName || '流程信息';
		processInfo.insId = insId
		processInfo.insName = insName
		// 设置导航栏标题
		uni.setNavigationBarTitle({
			title: title
		});
	})
	
	onMounted(() => {
		initProcessInfo()
	})
	
	const formElements = ref([])
	const repeatingTable = ref({
		elements: [],
		elementItem: [],
	})
	const fileList = ref([])
	function initProcessInfo() {
		getProcessInfo(userStore.user.useId, processInfo.insId).then(({ returnParams }) => {
			formElements.value = returnParams.formElements
			repeatingTable.value = returnParams.repeatingTable
			fileList.value = returnParams.fileList
			console.log('fileList', fileList.value);
		})
	}
	const repeatingTablePopup = ref(null)
	function handleRepeatingTable() {
		console.log('handleRepeatingTable', repeatingTable);
		repeatingTablePopup.value.open()
	}
</script>

<style lang="scss">
.element_name {
	width: 10rem;
}
.element_value {
	width: 100%;
}
.repeating_table_container {
	width: 98vw;
	.uni-table-scroll {
		max-height: 80vh;
		.uni-table {
			min-width: 100% !important;
			.uni-table-th {
				min-width: 50px;
				background-color: #2979ff;
				font-weight: bold;
				color: #fcfcfc;
			}
		}
	}
}
</style>