css(work/edit): 修改主表格样式

pages/work/edit/index.vue

@@ -1,47 +1,48 @@
 <template>
 	<view class="process_container">
-		<uni-card margin="10px" spacing="0">
-			<uni-forms label-position="left" :label-width="125" :border="true">
-				<uni-forms-item v-for="(item, index) in formElements" :label="item.elementName" :key="index">
-					<uni-easyinput v-if="'多少小时' == item.elementName" :disabled="true" placeholder=""
-						v-model="diffHours"></uni-easyinput>
-					<!-- 输入框 -->
-					<uni-easyinput v-else-if="'0' == item.type" :disabled="'0' == item.canEdit"
-						:placeholder="'0' == item.canEdit ? '' : '请输入内容'" v-model="item.defaultValue"></uni-easyinput>
-					<!-- 富文本输入框 -->
-					<uni-easyinput v-else-if="'1' == item.type" :disabled="'0' == item.canEdit"
-						:placeholder="'0' == item.canEdit ? '' : '请输入内容'" v-model="item.defaultValue"
-						type="textarea"></uni-easyinput>
-					<!-- 下拉框 -->
-					<picker class="picker_container" v-else-if="'2' == item.type"
-						@change="bindPickerChange($event, item)" :value="item.defaultValue"
-						:range="formatDict(item.typeDetail.enum)">
-						<view class="uni-input input_text">
-							<!-- 设置默认值为第一个选项 -->
-							{{ item.defaultValue ? item.defaultValue : item.defaultValue =
-								item.typeDetail.enum[0].enumVname }}
-						</view>
-					</picker>
-					<!-- 开始时间选择器 -->
-					<uni-datetime-picker :end="endTime" @change="setTimeRange(item)"
-						v-else-if="timeFlag && '9' == item.type && '开始时间' == item.elementName"
-						v-model="item.defaultValue" :clear-icon="false" type="datetime" />
-					<!-- 结束时间选择器 -->
-					<uni-datetime-picker :start="startTime" @change="setTimeRange(item)" :disabled="disableEndTime"
-						:placeholder="disableEndTime ? '请先确认开始时间' : '确认结束时间'"
-						v-else-if="timeFlag && '9' == item.type && '结束时间' == item.elementName"
-						v-model="item.defaultValue" :clear-icon="false" type="datetime" />
-					<!-- 其他时间选择器 -->
-					<!-- 年月日 时分秒 -->
-					<uni-datetime-picker v-else-if="'9' == item.type" v-model="item.defaultValue" type="datetime" />
-					<!-- 年月日 -->
-					<uni-datetime-picker v-else-if="'3' == item.type" v-model="item.defaultValue" type="date" />
-				</uni-forms-item>
-			</uni-forms>
-		</uni-card>
-
+		<view class="main_container">
+			<uni-card spacing="0">
+				<uni-forms label-position="left" :label-width="125" :border="true">
+					<uni-forms-item v-for="(item, index) in formElements" :label="item.elementName" :key="index">
+						<uni-easyinput v-if="'多少小时' == item.elementName" :disabled="true" placeholder=""
+							v-model="diffHours"></uni-easyinput>
+						<!-- 输入框 -->
+						<uni-easyinput v-else-if="'0' == item.type" :disabled="'0' == item.canEdit"
+							:placeholder="'0' == item.canEdit ? '' : '请输入内容'" v-model="item.defaultValue"></uni-easyinput>
+						<!-- 富文本输入框 -->
+						<uni-easyinput v-else-if="'1' == item.type" :disabled="'0' == item.canEdit"
+							:placeholder="'0' == item.canEdit ? '' : '请输入内容'" v-model="item.defaultValue"
+							type="textarea"></uni-easyinput>
+						<!-- 下拉框 -->
+						<picker class="picker_container" v-else-if="'2' == item.type"
+							@change="bindPickerChange($event, item)" :value="item.defaultValue"
+							:range="formatDict(item.typeDetail.enum)">
+							<view class="uni-input input_text">
+								<!-- 设置默认值为第一个选项 -->
+								{{ item.defaultValue ? item.defaultValue : item.defaultValue =
+									item.typeDetail.enum[0].enumVname }}
+							</view>
+						</picker>
+						<!-- 开始时间选择器 -->
+						<uni-datetime-picker :end="endTime" @change="setTimeRange(item)"
+							v-else-if="timeFlag && '9' == item.type && '开始时间' == item.elementName"
+							v-model="item.defaultValue" :clear-icon="false" type="datetime" />
+						<!-- 结束时间选择器 -->
+						<uni-datetime-picker :start="startTime" @change="setTimeRange(item)" :disabled="disableEndTime"
+							:placeholder="disableEndTime ? '请先确认开始时间' : '确认结束时间'"
+							v-else-if="timeFlag && '9' == item.type && '结束时间' == item.elementName"
+							v-model="item.defaultValue" :clear-icon="false" type="datetime" />
+						<!-- 其他时间选择器 -->
+						<!-- 年月日 时分秒 -->
+						<uni-datetime-picker v-else-if="'9' == item.type" v-model="item.defaultValue" type="datetime" />
+						<!-- 年月日 -->
+						<uni-datetime-picker v-else-if="'3' == item.type" v-model="item.defaultValue" type="date" />
+					</uni-forms-item>
+				</uni-forms>
+			</uni-card>
+		</view>
 		<view v-if="repeatingForm.elementItem.length > 0" class="repeating_table">
-			<uni-card v-for="(table, tableIndex) in repeatingForm.elements" margin="10px" spacing="0"
+			<uni-card v-for="(table, tableIndex) in repeatingForm.elements" spacing="0"
 				:key="tableIndex">
 				<uni-forms label-position="left" :label-width="125" :border="true">
 					<uni-forms-item v-for="(item, itemIndex) in table"
@@ -65,12 +66,15 @@
 			</uni-card>
 		</view>
 
-		<uni-card title="上传附件" :extra="`${fileList.length}/15`" margin="10px" spacing="0">
+		<uni-card title="上传附件" :extra="`${fileList.length}/15`" spacing="0">
 			<uni-file-picker ref="filePicker" v-model="fileList" :auto-upload="true" mode="list" limit="10"
 				file-mediatype="all" @select="handleFileSelect" @progress="handleFileProgress"
 				@success="handleFileSuccess" @fail="handleFileFail" @delete="handleFileDelete" />
-			<button :loading="!button_state" type="default" class="submit_button" @click="submitProcess">提交</button>
 		</uni-card>
+		<uni-card spacing="0" padding="0">
+			<button :loading="!button_state" type="primary" class="submit_button" @click="submitProcess">提交</button>
+		</uni-card>
+		<view style="height: 5px; margin-top: 10px;"></view>
 	</view>
 </template>
 
@@ -305,8 +309,10 @@ function submitProcess() { // 提交表单
 			$modal.msgError(res.returnMsg)
 		} else {
 			$modal.msgSuccess(res.returnMsg)
-			// 返回上一页
-			// $tab.navigateBack();
+			setTimeout(()=> {
+				// 返回上一页
+				$tab.navigateBack();
+			}, 1000)
 		}
 	})
 }
@@ -314,6 +320,9 @@ function submitProcess() { // 提交表单
 
 <style lang="scss">
 .process_container {
+	.main_container {
+		min-height: 70vh;
+	}
 	.picker_container {
 		border: 1px solid #e5e5e5;
 		background-color: #fff;
@@ -338,8 +347,8 @@ function submitProcess() { // 提交表单
 			margin-top: 5px;
 
 			button {
-				height: 30px;
-				line-height: 30px;
+				height: 36px;
+				line-height: 36px;
 				color: #fff;
 			}
 
@@ -361,5 +370,41 @@ function submitProcess() { // 提交表单
 		background-color: #007aff !important;
 		color: #fff !important;
 	}
+	.submit_button::after {
+		border: 1px solid rgba(0,0,0,.2);
+		border-radius: 10px;
+		box-sizing: border-box;
+		content: " ";
+		height: 200%;
+		left: 0;
+		position: absolute;
+		top: 0;
+		-webkit-transform: scale(.5);
+		transform: scale(.5);
+		-webkit-transform-origin: 0 0;
+		transform-origin: 0 0;
+		width: 200%;
+		border-top-width: 1px;
+		border-right-width: 1px;
+		border-bottom-width: 1px;
+		border-left-width: 1px;
+		border-top-style: solid;
+		border-right-style: solid;
+		border-bottom-style: solid;
+		border-left-style: solid;
+		border-top-color: rgba(0, 0, 0, 0.2);
+		border-right-color: rgba(0, 0, 0, 0.2);
+		border-bottom-color: rgba(0, 0, 0, 0.2);
+		border-left-color: rgba(0, 0, 0, 0.2);
+		border-image-source: initial;
+		border-image-slice: initial;
+		border-image-width: initial;
+		border-image-outset: initial;
+		border-image-repeat: initial;
+		border-top-left-radius: 10px;
+		border-top-right-radius: 10px;
+		border-bottom-right-radius: 10px;
+		border-bottom-left-radius: 10px;
+	}
 }
 </style>

pages/work/index.vue

@@ -12,42 +12,6 @@
 							<text class="text">{{ item.modelName }}</text>
 						</view>
 					</uni-grid-item>
-					<!-- <uni-grid-item :index="1">
-							<text class="ygoa-icon icon-outsourcing"></text>
-							<text class="text">外协结算申请</text>
-					</uni-grid-item>
-					<uni-grid-item :index="2">
-							<text class="ygoa-icon icon-apply-car"></text>
-							<text class="text">用车申请</text>
-					</uni-grid-item>
-					<uni-grid-item :index="3">
-							<text class="ygoa-icon icon-apply-business"></text>
-							<text class="text">出差申请</text>
-					</uni-grid-item>
-					<uni-grid-item :index="4">
-							<text class="ygoa-icon icon-apply-out"></text>
-							<text class="text">外出申请</text>
-					</uni-grid-item>
-					<uni-grid-item :index="5">
-							<text class="ygoa-icon icon-apply-expense"></text>
-							<text class="text">费用报销</text>
-					</uni-grid-item>
-					<uni-grid-item :index="6">
-							<text class="ygoa-icon icon-apply-overtime"></text>
-							<text class="text">加班申请</text>
-					</uni-grid-item>
-					<uni-grid-item :index="7">
-							<text class="ygoa-icon icon-apply-leave"></text>
-							<text class="text">请假申请</text>
-					</uni-grid-item>
-					<uni-grid-item :index="8">
-							<text class="ygoa-icon icon-apply-purchase"></text>
-							<text class="text">采购申请</text>
-					</uni-grid-item>
-					<uni-grid-item :index="9">
-							<text class="ygoa-icon icon-apply-sign-contract"></text>
-							<text class="text">合同会签</text>
-					</uni-grid-item> -->
 				</uni-grid>
 			</view>
 		</view>
@@ -77,12 +41,12 @@
 						<text class="text">日报</text>
 					</view>
 				</uni-grid-item>
-				<uni-grid-item :index="2">
+				<!-- <uni-grid-item :index="2">
 					<view class="grid-item-box">
 						<text class="ygoa-icon icon-diary"></text>
 						<text class="text">日报</text>
 					</view>
-				</uni-grid-item>
+				</uni-grid-item> -->
 			</uni-grid>
 		</view>