feat(process/detail): 流程审批时审批意见输入框

pages/process/detail/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="process_detail_container">
-		<view class="main_container">
-			<uni-card>
+		<uni-card>
+			<view class="main_container">
 				<uni-section titleFontSize="1.3rem" title="申请内容" type="line"></uni-section>
 				<uni-list>
 					<uni-list-item v-for="(elem, index) in formElements" :key="index">
@@ -9,14 +9,20 @@
 							<text class="element_name">{{ elem.elementName }}</text>
 						</template>
 						<template v-slot:footer>
-							<text class="element_value">{{ elem.defaultValue }}</text>
+							<view class="element_value">
+								<view v-if="elem.canEdit == '1'" class="element_value">
+									<uni-easyinput v-if="'1' == elem.type" placeholder="请输入内容"
+										v-model="elem.defaultValue" type="textarea"></uni-easyinput>
+								</view>
+								<text v-else>{{ elem.defaultValue }}</text>
+							</view>
 						</template>
 					</uni-list-item>
 				</uni-list>
-			</uni-card>
-		</view>
+			</view>
+		</uni-card>
 		<view>
-		<!-- 重复表 -->
+			<!-- 重复表 -->
 			<uni-card v-if="repeatingFormNotEmpty" spacing="0" padding="0">
 				<button @click="handlerepeatingForm" type="primary">查看重复表</button>
 			</uni-card>
@@ -35,7 +41,7 @@
 								<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}}
+										repeatingForm.elementItem.length) + index]!.defaultValue }}
 								</uni-td>
 							</uni-tr>
 						</uni-table>
@@ -57,7 +63,8 @@
 					<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">
+						<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>
@@ -163,37 +170,37 @@ const formInfo = ref({
 })
 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()
-			})
-		}
+	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}) => {
+	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)
+			const title = tmodelName + (name == '' ? '' : ' ( ' + name + ' )')
+			const desc = '创建时间: ' + createdate
+				+ (finishdate == '' ? '\n' : '\n办理时间: ' + finishdate)
+				+ (remark == '' ? '\n' : '\n环节意见: ' + remark)
 			return {
 				title,
 				desc,
@@ -203,11 +210,11 @@ function initProcessFlow() {
 		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})
+			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}
+					{ files: returnParams.flow[0].files }
 				]
 			})
 		}
@@ -222,8 +229,8 @@ function handlerepeatingForm() {
 const button_state = ref(true)
 const remark = ref('')
 function submitProcess(result) {
-	console.log('formElements: ',formElements);
-	formInfo.value.formElements = formElements.value.map(({tableField, defaultValue}) => {
+	console.log('formElements: ', formElements);
+	formInfo.value.formElements = formElements.value.map(({ tableField, defaultValue }) => {
 		return {
 			name: tableField,
 			value: defaultValue
@@ -238,7 +245,7 @@ function submitProcess(result) {
 	flow['result'] = result
 	flow['remark'] = remark.value
 	flow['nextTmodelId'] = 'undefined'
-	submitProcessFlow(flow, formInfo.value, processInfo.control).then(({returnMsg}) => {
+	submitProcessFlow(flow, formInfo.value, processInfo.control).then(({ returnMsg }) => {
 		if (returnMsg.includes('提交失败')) {
 			// 启用提交按钮
 			button_state.value = true
@@ -247,10 +254,10 @@ function submitProcess(result) {
 			$modal.msgSuccess(returnMsg)
 			// 通知列表刷新数据
 			uni.$emit('ReloadProcessData', '测试$emit');
-			setTimeout(()=> {
+			setTimeout(() => {
 				$tab.navigateBack();
 			}, 1000)
-			}
+		}
 	})
 }
 </script>
@@ -262,27 +269,30 @@ function submitProcess(result) {
 }
 
 .element_value {
-	width: 100%;
+	width: 60%;
 }
 
 .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;
@@ -292,10 +302,12 @@ function submitProcess(result) {
 			}
 		}
 	}
+
 	.flow_step_container {
 		.u-steps {
 			.u-steps-item {
 				padding-bottom: 11px;
+
 				.active_step_circle {
 					width: 20px;
 					height: 20px;
@@ -311,6 +323,7 @@ function submitProcess(result) {
 					align-items: center;
 					justify-content: center;
 					transition: background-color .3s;
+
 					.active_step_text {
 						color: #fff;
 						font-size: 11px;
@@ -323,29 +336,35 @@ function submitProcess(result) {
 					}
 				}
 			}
+
 			.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{
+		.remark_content {
 			margin-bottom: 10px;
 		}
 	}
+
 	.approve_button {
 		position: sticky;
 		z-index: 999;
 		width: 100%;
 		bottom: 10px;
 	}
-	.reject_button  {
+
+	.reject_button {
 		.uni-card {
 			background-color: transparent;
 		}