ygoa_miniapp/pages/process/detail/index.vue

<template>
	<view class="process_detail_container">
		<uni-card>
			<view class="main_container">
				<uni-section titleFontSize="1.3rem" title="申请内容" type="line"></uni-section>
				<uni-forms label-position="left" :label-width="125" :border="true">
					<view v-for="(elem, index) in formElements" :key="index">
						<uni-forms-item
							v-if="!('0' == elem.canEdit && elem.elementName.slice(-2) == '审批' && '' == elem.defaultValue) && !(undefined == elem.canEdit && elem.elementName.slice(-2) == '审批' && '' == elem.defaultValue)"
							:label="elem.elementName">
							<view class="element_value_container">
								<view v-if="'1' == elem.canEdit" class="element_value">
									<!-- 富文本框 -->
									<uni-easyinput v-if="'1' == elem.type" placeholder="请输入内容"
										v-model="elem.defaultValue" type="textarea"></uni-easyinput>
									<!-- 文本框 -->
									<uni-easyinput v-else-if="'0' == elem.type" placeholder="请输入内容"
										v-model="elem.defaultValue" type="text"></uni-easyinput>
									<!-- 审批签字板 -->
									<view v-else-if="'13' == elem.type">
										<button v-if="elem.defaultValue == ''" type="primary"
											@click="handleSignature(index)">签名</button>
										<view v-else class="signature_img">
											<img style="width: 100%;" mode="widthFix" @click="handleSignature(index)" :src="elem.defaultValueImg" :alt="elem.elementName + '签名'" />
										</view>
									</view>
								</view>
								<view v-else-if="typeof elem.defaultValue === 'string' && elem.defaultValue.substring(0, 7) == '/shares'" class="signature_img">
									<img style="width: 100%;" mode="widthFix" :src="config.baseUrlPre + elem.defaultValue" />
								</view>
								<text class="element_value" v-else>{{ elem.defaultValue }}</text>
							</view>
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
		</uni-card>
		<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>
			<uni-card>
				<view class="flow_step_container">
					<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 :contentClass="'redcontent'" v-if="step.state == 3" :title="step.title + ' 退回'" :desc="step.desc"
								:key="index" error></up-steps-item>
							<up-steps-item :contentClass="'redcontent'" v-else-if="step.state == 0" :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>
				</view>
			</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 :disabled="!button_state" :loading="!button_state" type="primary" @click="handleSubmitProcess('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 :disabled="!button_state" :loading="!button_state" type="warn" @click="handleSubmitProcess('0')">退回上一级</button>
					</uni-col>
					<uni-col :span="11" :offset="2">
						<button :disabled="!button_state" :loading="!button_state" type="warn" @click="handleSubmitProcess('2')">退回发起人</button>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
	</view>
	<view v-else-if="isCancel">
		<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 class="cancel_button_container">
			<uni-card spacing="0" padding="0">
				<button :disabled="!button_state" :loading="!button_state" type="warn" @click="handleCancelProcess">撤销</button>
			</uni-card>
		</view>
	</view>
	<view style="height: 5px; margin-top: 20px;"></view>
	<uni-popup ref="signaturePopup" @maskClick="closeSignaturePopup">
		<view class="signature_container" :class="isLandscape ? ' signature_container_landscape' : ''">
			<view class="signature_content">
				<l-signature ref="signatureRef" v-if="signaturePopupShow" :landscape="isLandscape" :penSize="8" :minLineWidth="4" :maxLineWidth="12" :openSmooth="true" :preferToDataURL="true"
					backgroundColor="#ffffff" penColor="black"></l-signature>
			</view>
			<view class="signature_button_container">
				<uni-row :gutter="10">
					<uni-col :span="6">
						<button @click="onclickSignatureButton('undo')">撤销</button>
					</uni-col>
					<uni-col :span="6">
						<button @click="onclickSignatureButton('clear')">清空</button>
					</uni-col>
					<uni-col :span="6">
						<button @click="onclickSignatureButton('save')">保存</button>
					</uni-col>
					<uni-col :span="6">
						<button @click="onclickSignatureButton('landscape')">全屏</button>
					</uni-col>
				</uni-row>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { LSignatureToTempFilePathOptions, LSignatureToFileSuccess } from '@/uni_modules/lime-signature'
import attachmentList from '@/components/ygoa/attachmentList.vue'
import config from '@/config.js'
import $tab from '@/plugins/tab.js'
import $modal from '@/plugins/modal.js'
import { getProcessFlowInfo, getProcessFormInfo, getProcessFormInfoInFlow, getProcessFlow, submitProcessFlow, cancelProcessFlow, uploadSignatureImg, uploadSignatureBoardImg } from '@/api/process.js'
import { useUserStore } from '@/store/user.js'
const userStore = useUserStore()
const processInfo = reactive({
	insId: '',
	insName: '',
	control: 1,
	username: '',
	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([])
const isCancel = ref(false)
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
			repeatingFormHasValue()
		})
	} else {
		getProcessFormInfo(userStore.user.useId, processInfo.insId).then(({ returnParams }) => {
			formElements.value = returnParams.formElements
			repeatingForm.value = returnParams.repeatingForm
			fileList.value = returnParams.fileList
			if (returnParams.isCancel == 1) {
				isCancel.value = true
			}
			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 signaturePopup = ref(null)
const signatureRef = ref(null)
const signaturePopupShow = ref(false)
const isLandscape = ref(false)
const signatureItemIndex = ref(-1)
function handleSignature(index) {
	signatureItemIndex.value = index
	signaturePopup.value.open()
	initSignature()
}
function initSignature() {
	signaturePopupShow.value = false
	setTimeout(() => {
		signaturePopupShow.value = true
	}, 100)
}
function onclickSignatureButton(event) {
	switch (event) {
		case 'undo':
			signatureRef.value.undo()
			break;
		case 'clear':
			signatureRef.value.clear()
			break;
		case 'save':
			signatureRef.value.canvasToTempFilePath({
				success: (res: LSignatureToFileSuccess) => {
					console.log('res: ', res);
					if (res.isEmpty) {
						$modal.msgError('签名不能为空!')
						return
					}
					wx.getFileSystemManager().readFile({
						filePath: res.tempFilePath,
						encoding: 'base64',
						success: fileData => {
							const _fileData = 'data:image/png;base64,' + fileData.data
							uploadSignatureBoardImg(userStore.user.useId, _fileData, formElements.value[signatureItemIndex.value].tableField)
							// uploadSignatureImg(res.tempFilePath)
							.then(({returnParams}) => {
								formElements.value[signatureItemIndex.value].defaultValue = returnParams.sealInsID
								signatureItemIndex.value = -1
								signaturePopupShow.value = false
								signaturePopup.value.close()
								// formElements.value[signatureItemIndex.value].defaultValueImg = returnParams.path
							})
						}
					})
					console.log('formElements', formElements.value[signatureItemIndex.value]);
					formElements.value[signatureItemIndex.value].defaultValueImg = res.tempFilePath
				}
			} as LSignatureToTempFilePathOptions)
			break;
		case 'landscape':
			isLandscape.value = !isLandscape.value
			initSignature()
			break;

	}
}
function closeSignaturePopup() {
	signatureItemIndex.value = -1
	signaturePopupShow.value = false
}

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

const button_state = ref(true)
const remark = ref('')
function handleSubmitProcess(result) {
	let content = '确认退回'
	if (result == "1") {
		content = '确认通过'
	}
	$modal.confirm(content).then(() => {
		submitProcess(result)
	}).catch(() => { })
}
function submitProcess(result) {
	button_state.value = false
	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');
			setTimeout(() => {
				$tab.navigateBack();
			}, 1000)
		}
	})
}

function handleCancelProcess() {
	if (remark.value.trim() == '') {
		$modal.msgError('备注不能为空！')
		return
	}
	$modal.confirm('确认撤销').then(() => {
		cancelProcess()
	}).catch(() => { })
}
function cancelProcess() {
	cancelProcessFlow(userStore.user.useId, remark.value, processInfo).then(({ returnMsg }) => {
		if (returnMsg.includes('success')) {
			$modal.msgSuccess('撤销成功')
			// 通知列表刷新数据
			uni.$emit('ReloadProcessData');
			setTimeout(() => {
				$tab.navigateBack();
			}, 1000)
		} else {
			// 启用按钮
			button_state.value = true
			$modal.msgError(returnMsg)
		}
	})
}
</script>

<style lang="scss">
.uni-section {
	margin-left: -15px;
	margin-bottom: 10px;
}

.signature_container {
	background-color: #f5f5f5;
	height: 40vh;
	width: 90vw;

	.signature_content {
		height: 80%;
		width: 100%;
	}

	.signature_button_container {
		height: 20%;
		width: 100%;

		button {
			height: 100%;
		}
	}
}

.signature_container_landscape {
	height: 100vh;
	width: 100vw;

	.signature_content {
		height: 85%;
		width: 100%;
	}

	.signature_button_container {
		margin-top: 10%;
		height: 15%;
		width: 100%;

		button {
			height: 100%;
			width: 100%;
			transform: rotate(90deg);
		}
	}
}

.process_detail_container {
	position: relative;

	.main_container {
		min-height: 60vh;

		.uni-forms-item__label {
			font-size: 1rem;
			font-weight: 600;
		}

		.element_value_container {
			.signature_img {
				width: 180px;
			}

			.element_value {
				line-height: 36px;
			}
		}
	}

	.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 {
		min-height: 200px;
		
		.u-steps {
			.u-steps-item {
				padding-bottom: 11px;
				.redcontent {
					.u-text__value--content {
						color: #ff4500;
					}
				}
				.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;
				}
			}
		}
	}

	.approve_button {
		position: sticky;
		z-index: 10;
		width: 100%;
		bottom: 10px;
	}
}

.reject_button {
	.uni-card {
		background-color: #f5f5f5;
	}
}

.remark_container {
	.remark_content {
		margin-bottom: 10px;
	}
}
</style>