ygoa_miniapp/pages/process/detail/index.vue

<template>
	<view class="process_detail_container">
		<view class="main_container">
			<uni-card>
				<uni-section titleFontSize="1.3rem" title="申请内容" type="line"></uni-section>
				<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>
		</view>
		<view>
		<!-- 重复表 -->
			<uni-card v-if="repeatingFormNotEmpty" spacing="0" padding="0">
				<button @click="handlerepeatingForm" type="primary">查看重复表</button>
			</uni-card>
			<uni-popup v-if="repeatingFormNotEmpty" ref="repeatingFormPopup">
				<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 repeatingForm.elementItem" :key="index">
									{{ item.elementName.slice(3, 5) }}
								</uni-th>
							</uni-tr>
							<uni-tr
								v-for="(item, index) in (repeatingForm.elements.length / repeatingForm.elementItem.length)"
								:key="index">
								<uni-td align="center" v-for="col in repeatingForm.elementItem.length" :key="col">
									<!-- (列数 - 1) * 总行数 + 当前行数 -->
									{{ repeatingForm.elements[(col - 1) * (repeatingForm.elements.length /
										repeatingForm.elementItem.length) + index]!.defaultValue}}
								</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</uni-card>
			</uni-popup>
		</view>
		<!-- 附件 -->
		<view v-for="(item, index) in fileList" :key="index">
			<uni-card v-if="item.files.length != undefined && item.files.length > 0">
				<uni-section titleFontSize="1.3rem" title="附件" type="line"></uni-section>
				<attachment-list :attachments="item.files"></attachment-list>
			</uni-card>
		</view>
		<view class="flow_step_container">
			<uni-card>
				<uni-section titleFontSize="1.3rem" title="流转过程" type="line"></uni-section>
				<up-steps :current="stepActive" activeColor="#18bc37" inactiveColor="#2979ff" direction="column">
					<view v-for="(step, index) in options">
						<up-steps-item v-if="step.state == 3" :title="step.title" :desc="step.desc" :key="index" error>
						</up-steps-item>
						<up-steps-item v-else-if="index == stepActive" :title="step.title" :desc="step.desc" :key="index">
							<template #icon>
								<view class="active_step_circle">
									<text class="active_step_text">{{ index + 1 }}</text>
								</view>
							</template>
						</up-steps-item>
						<up-steps-item v-else :title="step.title" :desc="step.desc" :key="index"></up-steps-item>
					</view>
				</up-steps>
			</uni-card>
		</view>
		<view v-if="processInfo.tinsId">
			<view class="remark_container">
				<uni-card>
					<uni-section titleFontSize="1.3rem" title="备注" type="line"></uni-section>
					<view class="remark_content">
						<uni-easyinput type="textarea" autoHeight v-model="remark" placeholder="请输入"></uni-easyinput>
					</view>
				</uni-card>
			</view>
		</view>
		<view v-if="processInfo.tinsId" class="approve_button">
			<uni-card spacing="0" padding="0">
				<button :loading="!button_state" type="primary" @click="submitProcess('1')">通过</button>
			</uni-card>
		</view>
	</view>
	<view v-if="processInfo.tinsId">
		<view class="reject_button">
			<uni-card spacing="0" padding="0" :is-shadow="false" :border="false">
				<uni-row>
					<uni-col :span="11">
						<button :loading="!button_state" type="warn" @click="submitProcess('0')">退回上一级</button>
					</uni-col>
					<uni-col :span="11" :offset="2">
						<button :loading="!button_state" type="warn" @click="submitProcess('2')">退回发起人</button>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
	</view>
	<view style="height: 5px; margin-top: 10px;"></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 $tab from '@/plugins/tab.js'
import $modal from '@/plugins/modal.js'
import { getProcessFlowInfo, getProcessFormInfo, getProcessFormInfoInFlow, getProcessFlow, submitProcessFlow } from '@/api/process.js'
import { useUserStore } from '@/store/user.js'
const userStore = useUserStore()
const processInfo = reactive({
	insId: '',
	insName: '',
	control: 1,
	tinsId: undefined
})
onLoad(({ insId, tinsId, insName, control }) => {
	// 获取传入的标题参数
	const title = insName || '流程信息';
	processInfo.insId = insId
	processInfo.insName = insName
	processInfo.control = control
	if (tinsId) {
		processInfo['tinsId'] = tinsId
	}
	// 设置导航栏标题
	uni.setNavigationBarTitle({
		title: title
	});
})

onMounted(() => {
	initProcessInfo()
	initProcessFlow()
})

const repeatingForm = ref({
	elements: [],
	elementItem: [],
})
const repeatingFormNotEmpty = ref(false)
function repeatingFormHasValue() {
	if (repeatingForm.value === undefined) return
	if (repeatingForm.value.elementItem.length <= 0) return
	repeatingForm.value.elements.forEach(({ defaultValue }) => {
		if (defaultValue != "") {
			repeatingFormNotEmpty.value = true
			return new Promise((resolve, reject) => {
				resolve(repeatingFormNotEmpty)
			})
		}
	})

}
const formElements = ref([])
const formInfo = ref({
	formElements: [],
	formId: '',
	formInsId: ''
})
const fileList = ref([])
function initProcessInfo() {
		if (processInfo.tinsId) {
			getProcessFormInfoInFlow(userStore.user.useId, processInfo).then(({ returnParams }) => {
				formElements.value = returnParams.formElements
				formInfo.value = returnParams.formInfo[0]
				repeatingForm.value = returnParams.repeatingForm
				// fileList.value = returnParams.fileList
				repeatingFormHasValue()
			})
		} else {
			getProcessFormInfo(userStore.user.useId, processInfo.insId).then(({ returnParams }) => {
				formElements.value = returnParams.formElements
				repeatingForm.value = returnParams.repeatingForm
				fileList.value = returnParams.fileList
				repeatingFormHasValue()
			})
		}
}
const options = ref([])
const stepActive = ref(-1)
const flowInfo = ref({})
function initProcessFlow() {
	getProcessFlow(userStore.user.useId, processInfo).then(({returnParams}) => {
		options.value = returnParams.list.map((item, index) => {
			const { tmodelName, name, createdate, finishdate, remark, state } = item
			if (state == 1) {
				stepActive.value = index
			}
			const title = tmodelName + (name==''?'':' ( ' + name  + ' )')
			const desc = '创建时间: ' + createdate 
			+ (finishdate==''?'\n':'\n办理时间: ' + finishdate)
			+ (remark=='\n'?'':'\n环节意见: ' + remark)
			return {
				title,
				desc,
				state
			}
		})
		if (stepActive.value === -1) stepActive.value = returnParams.list.length
		// 获取未完成过程
		if (processInfo.tinsId) {
			getProcessFlowInfo(userStore.user.useId, processInfo).then(({returnParams}) => {
				options.value.push({title: returnParams.nextTmodels[0].nextTmodelName})
				flowInfo.value = returnParams.flow[0]
				fileList.value = [
					{files: returnParams.flow[0].files}
				]
			})
		}
	})
}

const repeatingFormPopup = ref(null)
function handlerepeatingForm() {
	repeatingFormPopup.value.open()
}

const button_state = ref(true)
const remark = ref('')
function submitProcess(result) {
	console.log('formElements: ',formElements);
	formInfo.value.formElements = formElements.value.map(({tableField, defaultValue}) => {
		return {
			name: tableField,
			value: defaultValue
		}
	})
	let flow = Object.assign({}, flowInfo.value)
	flow['staffId'] = userStore.user.useId
	flow['gxId'] = userStore.user.gxId
	flow['groupId'] = flowInfo.value.groupid
	flow['fileIds'] = ''
	// result: 1通过 2退回发起人 0退回上一级
	flow['result'] = result
	flow['remark'] = remark.value
	flow['nextTmodelId'] = 'undefined'
	submitProcessFlow(flow, formInfo.value, processInfo.control).then(({returnMsg}) => {
		if (returnMsg.includes('提交失败')) {
			// 启用提交按钮
			button_state.value = true
			$modal.msgError(returnMsg)
		} else {
			$modal.msgSuccess(returnMsg)
			// 通知列表刷新数据
			uni.$emit('ReloadProcessData', '测试$emit');
			setTimeout(()=> {
				$tab.navigateBack();
			}, 1000)
			}
	})
}
</script>

<style lang="scss">
.element_name {
	width: 10rem;
	font-weight: 600;
}

.element_value {
	width: 100%;
}

.uni-section {
	margin-left: -15px;
	margin-bottom: 10px;
}
.process_detail_container {
	position: relative;
	.main_container {
		min-height: 70vh;
	}
	.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;
				}
			}
		}
	}
	.flow_step_container {
		.u-steps {
			.u-steps-item {
				padding-bottom: 11px;
				.active_step_circle {
					width: 20px;
					height: 20px;
					box-sizing: border-box;
					flex-shrink: 0;
					border-radius: 100px;
					border-width: 1px;
					border-color: #A78BFA;
					background-color: #A78BFA;
					border-style: solid;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					transition: background-color .3s;
					.active_step_text {
						color: #fff;
						font-size: 11px;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						text-align: center;
						line-height: 11px;
					}
				}
			}
			.u-steps-item view:last-of-type {
				margin-top: 0 !important;
				.u-text__value--content {
					font-size: 16px !important;
				}
				.u-text__value--main {
					font-size: 16px !important;
				}
			}
		}
	}
	.remark_container {
		.remark_content{
			margin-bottom: 10px;
		}
	}
	.approve_button {
		position: sticky;
		z-index: 999;
		width: 100%;
		bottom: 10px;
	}
	.reject_button  {
		.uni-card {
			background-color: transparent;
		}
	}
}
</style>