ygoa_miniapp/pages/process/detail/index.vue

<template>
	<page-meta root-font-size="system" />
	<view class="process_detail_container">
		<uni-card>
			<view class="main_container">
				<uni-section titleFontSize="1.3rem" title="申请内容" type="line"></uni-section>
				<uni-forms ref="$mainForm" :rules="$mainFormRules" :modelValue="mainFormValue" label-position="left"
					:label-width="125" :border="true">
					<view v-for="(elem, index) in formElements" :key="index">
						<uni-forms-item
							v-if="!(elem.elementName.endsWith('审批') && '' == elem.defaultValue && ['0', undefined].includes(elem.canEdit))"
							:label="elem.elementName" :name="elem.elementId">
							<view class="element_value_container">
								<view v-if="'1' == elem.canEdit && '8' != elem.type" 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>
									<!-- 下拉框 -->
									<picker class="picker_container" v-else-if="'2' == elem.type"
										@change="bindPickerChange($event, elem)" :value="elem.defaultValue"
										:range="formatDict(elem.typeDetail.enum)">
										<view class="uni-input input_text">
											<!-- 设置默认值为第一个选项 -->
											{{ elem.defaultValue ? elem.defaultValue : elem.defaultValue =
												elem.typeDetail.enum[0].enumVname }}
										</view>
									</picker>
									<!-- 年月日 时分秒 -->
									<uni-datetime-picker v-else-if="'9' == elem.type" v-model="elem.defaultValue"
										type="datetime" />
									<!-- 年月日 -->
									<uni-datetime-picker v-else-if="'3' == elem.type" v-model="elem.defaultValue"
										type="date" />
									<!-- 审批签字板 -->
									<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="config.baseUrlPre + elem.sealImgPath"
												:alt="elem.elementName + '签名'" />
										</view>
									</view>
								</view>
								<!-- TODO 修改后端 我的 在办 办结 接口签名图片地址返回参数为sealImgPath -->
								<view v-else-if="typeof elem.defaultValue === 'string' && elem.defaultValue.startsWith('/shares')" class="signature_img">
									<img style="width: 100%;" mode="widthFix"
										:src="config.baseUrlPre + elem.defaultValue" />
								</view>
								<view v-else-if="typeof elem.sealImgPath === 'string' && elem.sealImgPath.startsWith('/shares')" class="signature_img">
									<img style="width: 100%;" mode="widthFix"
										:src="config.baseUrlPre + elem.sealImgPath" />
								</view>
								<text class="element_value" v-else>{{ elem.defaultValue }}</text>
							</view>
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
		</uni-card>
		<view class="repeating_table">
			<!-- 重复表 -->
			<uni-card v-if="flowInfo.seModel == '0' && repeatingFormNotEmpty" spacing="0" padding="0">
				<button @click="handlerepeatingForm" type="primary">查看明细</button>
			</uni-card>
			<uni-card v-else v-for="(table, tableIndex) in repeatingForm.elements" spacing="0" :key="tableIndex">
				<uni-forms label-position="left" :label-width="125" :border="true">
					<uni-forms-item :name="elem.tableField" v-for="(elem, itemIndex) in table"
						:label="repeatingForm.elementItem[itemIndex].elementName.slice(3)" :key="itemIndex">
						<uni-easyinput placeholder="请输入内容" v-model="elem.defaultValue"
							:type="fieldTypeDict[repeatingForm.elementItem[itemIndex].fieldType.value] || 'text'"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
				<!-- <view class="repeating_table_button_container">
					<uni-row>
						<uni-col :span="10" :offset="1">
							<button @click="addrepeatingFormItem(tableIndex)" type="primary">新增</button>
						</uni-col>
						<uni-col :span="10" :offset="2">
							<button @click="delrepeatingFormItem(tableIndex)"
								:disabled="repeatingForm.elements.length <= 1" type="warn">删除</button>
						</uni-col>
					</uni-row>
				</view> -->
			</uni-card>
			<uni-popup v-if="flowInfo.seModel == '0' && 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="(table, tableIndex) in repeatingForm.elements" :key="tableIndex">
								<uni-td align="center" v-for="(elem, itemIndex) in table" :key="itemIndex">
									{{ elem.defaultValue }}
								</uni-td>
							</uni-tr>
							<!-- (列数 - 1) * 总行数 + 当前行数 -->
							<!-- <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">
									{{ 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 @clickDelete="deleteFile" :canEdit="flowInfo.seModel == '1'" :attachments="item.files"></attachment-list>
			</uni-card>
		</view>
		<!-- 上传附件 -->
		<view v-if="processInfo.tinsId || flowInfo.seModel == '1'" class="file_picker_container">
			<uni-card title="上传附件" :extra="`${subFileList.length}/15`" spacing="0">
				<uni-file-picker ref="filePicker" v-model="subFileList" :auto-upload="true" mode="list" limit="10"
					file-mediatype="all" @select="handleFileSelect" @progress="handleFileProgress"
					@success="handleFileSuccess" @fail="handleFileFail" @delete="handleFileDelete" />
			</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')">
					{{ flowInfo.seModel == '0' ? '通过' : '提交' }}
				</button>
			</uni-card>
		</view>
	</view>
	<view v-if="processInfo.tinsId && flowInfo.seModel == '0'">
		<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="{ 'signature_container_landscape': isLandscape }">
			<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 { computed, 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, uploadFile } from '@/api/process.js'
import { useUserStore } from '@/store/user.js'
const fieldTypeDict = {
	'0': 'text',
	'1': 'number'
}
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)
			})
		}
	})
}
// 新增重复表表单
function addrepeatingFormItem(index) {
	// parseCalculation(repeatingForm.value.elementItem)
	const table = repeatingForm.value.elementItem.map(({ tableField, bddzText }) => {
		const item = {
			name: tableField,
			defaultValue: ""
		}
		if (bddzText != '') {
			const mulItem = bddzText.split('*')
			// 保存关联数据索引
			item['bddzText'] = mulItem.map(item => {
				// item['operation '].operands = mulItem.map(item => {
				return repeatingForm.value.elementItem.findIndex(({ elementName }) => item == elementName)
			})
		}
		return item
	})
	repeatingForm.value.elements.splice(index + 1, 0, table)
}
// 删除重复表表单
function delrepeatingFormItem(index) {
	console.log("delrepeatingFormItem: " + index);
	$modal.confirm('', '确认删除该重复表数据')
		.then(() => {
			repeatingForm.value.elements.splice(index, 1)
			// $repeatingForms.value.splice(index, 1)
		}).catch(() => { })
}
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
			getMainFormRule()
			repeatingFormHasValue()
			remark.value = flowInfo.value.seModel == '0' ? '同意' : '重新提交'
		})
	} 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({
	seModel: '0'
})
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 }
				]
			})
		}
	})
}

// 下拉框
function bindPickerChange(e, item) {
	const index = e.detail.value;
	item.defaultValue = item.typeDetail.enum[index].enumVname
}
function formatDict(dict) {
	return dict.map(({ enumVname }) => enumVname)
}

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) {
	// console.log('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
					}
					// 判断上传文件是否是base64
					if (res.tempFilePath.substring(0, 'data:image/png;base64,'.length) == 'data:image/png;base64,') {
						const _fileData = res.tempFilePath
						uploadSignatureBoardImg(userStore.user.useId, _fileData, formElements.value[signatureItemIndex.value].tableField)
							.then(({ returnParams }) => {
								formElements.value[signatureItemIndex.value].defaultValue = returnParams.sealInsID
								formElements.value[signatureItemIndex.value].sealImgPath = returnParams.path
								signatureItemIndex.value = -1
								signaturePopupShow.value = false
								signaturePopup.value.close()
							})
					} else {
						// 转 base64
						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)
									.then(({ returnParams }) => {
										formElements.value[signatureItemIndex.value].defaultValue = returnParams.sealInsID
										formElements.value[signatureItemIndex.value].sealImgPath = returnParams.path
										signatureItemIndex.value = -1
										signaturePopupShow.value = false
										signaturePopup.value.close()
									})
							}
						})
					}
				}
			} 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()
}
// 附件管理
function deleteFile(file) {
	// console.log('deleteFile: ',file);
	fileList.value[0].files = fileList.value[0].files.filter(({fileId}) => !(fileId == file.fileId))
}
// 上传附件
const subFileList = ref([]) // 文件列表
const subFileSeqs = ref([])
async function handleFileSelect(files) { // 新增文件
	// console.log('handleFileSelect', files.tempFiles)
	files.tempFiles.forEach(file => {
		const data = {
			name: file.name,
			filePath: file.path,
		}
		uploadFile(data)
			.then(res => {
				file.seq = res.returnParams
				subFileSeqs.value.push({ 'seq': res.returnParams, 'path': file.path })
				subFileList.value.push(file)
			})
			.catch(err => {
				$modal.msgError('文件' + data.name + '上传失败,请删除重新上传')
				switch (err) {
					case -201:
						console.log('文件上传失败 未找到该文件');
						break;
					case -20201:
						console.log('文件上传失败 返回值不是JSON字符串');
						break;
				}
			})
	})
	// console.log('UploadFiles', files.tempFiles);

}
function handleFileProgress(file, progress) {
	// console.log('handleFileProgress', file, progress);
}
function handleFileSuccess(file, res) {
	// console.log('handleFileSuccess', file, res);
}
function handleFileFail(file, err) {
	// console.log('handleFileFail', file, err);
}
function handleFileDelete(file) { // 移除文件
	// console.log('handleDelete', file)
	subFileSeqs.value.splice(subFileSeqs.value.findIndex(({ path }) => path == file.tempFilePath))
}

const $mainForm = ref(null)
const $mainFormRules = ref({})
const mainFormValue = ref({})
const formatTypeDict = {
	'0': 'string',
	'1': 'number'
}
function validateMainForm() {

}
function getMainFormRule() {
	$mainFormRules.value = computed(() => {
		const obj = {};
		formElements.value.forEach(elem => {
			if (!('0' != elem.canEdit && '8' != elem.type)) return
			let labelName = elem.elementName
			let errorMessage = ''
			if ('13' == elem.type) errorMessage = '请完成签名'
			obj[elem.elementId] = {
				rules: [
					{
						required: '1' == elem.noNull,
						errorMessage,
					},
					{
						format: formatTypeDict[elem.fieldType] || 'string',
					}
				],
				label: labelName
			};
		});
		return obj;
	}).value
}
const button_state = ref(true)
const remark = ref('')
function handleSubmitProcess(result) {
	let content = '确认退回'
	if (result == "1") {
		content = '确认通过'
	}
	$modal.confirm(content).then(() => {
		button_state.value = false
		if (result == "1") {
			mainFormValue.value = computed(() => {
				const obj = {};
				formElements.value.forEach(elem => {
					if (!('0' != elem.canEdit && '8' != elem.type)) return
					obj[elem.elementId] = elem.defaultValue;
				});
				return obj;
			}).value
			$mainForm.value.validate().then(res => {
				submitProcess(result)
			})
				.catch(err => {
					button_state.value = true
					$modal.msgError('表单填写错误')
				})
		} else {
			submitProcess(result)
		}
	}).catch(() => { })
}
function submitProcess(result) {
	formInfo.value.formElements = formElements.value
		// 过滤不可编辑的表单项
		.filter(({canEdit}) => canEdit == '1')
		.map(({ tableField, defaultValue }) => {
			return {
				name: tableField,
				value: defaultValue
			}
		})
	repeatingForm.value.elements.forEach((table, index) => {
		const newItem = table.map((item) => {
			item['value'] = item.defaultValue
			return item
		})
		formInfo.value.formElements.push(...newItem)
	})
	let flow = Object.assign({}, flowInfo.value)
	flow['staffId'] = userStore.user.useId
	flow['gxId'] = userStore.user.gxId
	flow['groupId'] = flowInfo.value.groupid
	flow['fileIds'] = subFileSeqs.value.map(({ seq }) => seq)
	console.log('subFileSeqs.value.map(({ seq }) => seq): ',subFileSeqs.value.map(({ seq }) => seq));
	// result: 1通过 2退回发起人 0退回上一级
	flow['result'] = result
	flow['remark'] = remark.value
	flow['nextTmodelId'] = 'undefined'
	// TODO 启动流程 提交时 保存删除后的文件列表
	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" scoped>
::v-deep .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;

	.repeating_table {
		::v-deep .uni-forms {
			.uni-forms-item__label {
				font-size: calc(1rem + 0px) !important;
				line-height: calc(1rem + 0px) !important;
				font-weight: 600;
			}

			.uni-forms-item__content {
				font-size: calc(14px + .5*(1rem - 16px)) !important;

				.uni-easyinput__content-input {
					font-size: calc(14px + .5*(1rem - 16px)) !important;
				}
			}
		}

		::v-deep .uni-forms-item--border {
			padding: 5px 0 !important;
		}

		.repeating_table_button_container {
			margin-top: 5px;

			button {
				height: 36px;
				line-height: 36px;
				color: #fff;
			}

			.add {
				background-color: #1ca035;
			}

			.del {
				background-color: #e64340;
			}
		}
	}

	.main_container {
		min-height: 60vh;

		::v-deep .uni-forms {
			.uni-forms-item__label {
				font-size: calc(1rem + 0px) !important;
				line-height: calc(1rem + 0px) !important;
				font-weight: 600;
			}

			.uni-forms-item__content {
				font-size: calc(14px + .5*(1rem - 16px)) !important;

				.uni-easyinput__content-input {
					font-size: calc(14px + .5*(1rem - 16px)) !important;
				}
			}
		}

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

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

	::v-deep .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;
				}
			}
		}
	}

	::v-deep .flow_step_container {
		min-height: 200px;

		.u-steps {
			.u-steps-item {
				padding-bottom: 11px;

				.u-text__value--tips {
					font-size: calc(12px + .5*(1rem - 16px)) !important;
				}

				.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: calc(16px + .5*(1rem - 16px)) !important;
				}

				.u-text__value--main {
					font-size: calc(16px + .5*(1rem - 16px)) !important;
					font-weight: 500;
				}
			}
		}
	}

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

::v-deep button {
	font-size: calc(18px + .5*(1rem - 16px));
}

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

.remark_container {
	.remark_content {
		margin-bottom: 10px;

		::v-deep .uni-easyinput {
			.uni-easyinput__content-textarea {
				font-size: calc(14px + .5*(1rem - 16px)) !important;
			}
		}
	}
}
</style>