fix: 添加页面统一修改样式。

src/pages/health/activity/addEdit.vue

@@ -3,45 +3,55 @@
     <view class="section">
       <view class="section-title">{{ title}}</view>
       <view class="form-view">
-        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="140rpx"
-          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
           <u-form-item label="活动名称" prop="name" required >
             <u--input v-model="form.name"  placeholder="请填写活动名称"
-                inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('name')"></u--input>
           </u-form-item>
           <u-form-item label="类型" prop="typeName" required @click="handleType">
+            <view class="input-with-arrow">
               <u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('typeName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="活动地点" required prop="place" >
             <u--input v-model="form.place"  placeholder="请填写活动地点"
-                inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('place')"></u--input>
           </u-form-item>
           <u-form-item label="成员" required prop="partner" >
             <u--input v-model="form.partner" placeholder="请填写成员"
-                inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('partner')"></u--input>
           </u-form-item>
           <u-form-item label="开始时间" prop="startTime" required @click="selectStartTime()">
-            <u--input v-model="form.startTime" disabled disabledColor="#ffffff" placeholder="请选择开始时间" inputAlign="right" border="none"></u--input>
+            <view class="input-with-arrow">
-          <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.startTime" disabled disabledColor="#ffffff" placeholder="请选择开始时间"
+                inputAlign="left" :customStyle="getInputStyle('startTime')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="结束时间" prop="endTime"  @click="selectEndTime()">
-            <u--input v-model="form.endTime" disabled disabledColor="#ffffff" placeholder="请选择结束时间" inputAlign="right" border="none"></u--input>
+            <view class="input-with-arrow">
-          <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.endTime" disabled disabledColor="#ffffff" placeholder="请选择结束时间"
+                inputAlign="left" :customStyle="getInputStyle('endTime')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <!-- <u-form-item label="活动时长" prop="exerciseTime" >
             <u--input v-model="form.exerciseTime" placeholder="请填写活动时长"
-                inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('exerciseTime')"></u--input>
           </u-form-item> -->
           <u-form-item label="活动量" prop="activityVolumeName" required @click="handleActivityVolume">
+            <view class="input-with-arrow">
               <u--input v-model="form.activityVolumeName" disabled disabledColor="#ffffff" placeholder="请选择活动量"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('activityVolumeName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="总费用" prop="totalCost" >
             <u--input v-model="form.totalCost" type="number"  placeholder="请填写总费用"
-                inputAlign="right" border="none">
+              inputAlign="left" :customStyle="getInputStyle('totalCost')">
               <template #suffix>
                 <up-text
                   text="元"
@@ -49,16 +59,20 @@
               </template></u--input>
           </u-form-item>
           <u-form-item label="费用明细" prop="costDetail"  labelPosition="top">
-            <u--textarea v-model="form.costDetail" placeholder="请填写费用明细" border="none" ></u--textarea>
+            <u--textarea v-model="form.costDetail" height="80rpx" placeholder="请填写费用明细" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
           <u-form-item label="饮食" prop="foods"  labelPosition="top">
-            <u--textarea v-model="form.foods" placeholder="请填写饮食" border="none" ></u--textarea>
+            <u--textarea v-model="form.foods"  height="80rpx" placeholder="请填写饮食" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
           <u-form-item label="收获" prop="harvest"  labelPosition="top">
-            <u--textarea v-model="form.harvest" placeholder="请填写收获" border="none"></u--textarea>
+            <u--textarea v-model="form.harvest"  height="80rpx" placeholder="请填写收获" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
           <u-form-item label="备注" prop="remark"  labelPosition="top">
-            <u--textarea v-model="form.remark" placeholder="请填写备注" border="none"></u--textarea>
+            <u--textarea v-model="form.remark"  height="80rpx" placeholder="请填写备注" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
         </u--form>
         <view class="form-btn">
@@ -94,11 +108,42 @@
 <script setup>
 import { getActivity, addActivity, updateActivity } from '@/api/health/activity'
 const { proxy } = getCurrentInstance()
-  import { getDicts } from '@/api/system/dict/data.js'
+import { getDicts } from '@/api/system/dict/data.js'
 import dayjs from 'dayjs'
 import {onLoad,onReady} from "@dcloudio/uni-app";
-  // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
+// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
 import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
+
+// 错误字段
+const errorFields = ref([])
+
+// 输入框基础样式
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 输入框错误样式
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+
 const birthdayShow = ref(false)
 const title = ref("活动记录")
 const startTimeShow = ref(false)
@@ -251,6 +296,9 @@ function  getData() {
 
 
 function submit() {
+  // 清空错误字段
+  errorFields.value = []
+  
   proxy.$refs['uForm'].validate().then(() => {
     if (form.value.id != null) {
       if(flag.value==null){
@@ -280,8 +328,14 @@ function submit() {
       })
     })
     }
-      })
+  }).catch(errors => {
+    // 验证失败，记录错误字段
+    if (errors && errors.length > 0) {
+      errorFields.value = errors.map(err => err.field)
     }
+    proxy.$modal.msgError('请填写完整信息')
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -319,6 +373,23 @@ function submit() {
     .form-btn {
       padding-top: 16rpx;
     }
+
+    // 带箭头的输入框容器
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
   }
 }
 </style>
@@ -337,4 +408,19 @@ function submit() {
   font-weight: 500 !important;
   letter-spacing: 2rpx !important;
 }
+
+/* 强制让错误状态的输入框边框变红 */
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
 </style>

src/pages/health/doctorRecord/addEdit.vue

@@ -3,47 +3,55 @@
     <view class="section">
       <view class="section-title">{{ title}}</view>
       <view class="form-view">
-        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
-          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
           <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
+            <view class="input-with-arrow">
             <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
-              inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
+            <view class="input-with-arrow">
             <u--input v-model="form.healthRecordName" disabled disabledColor="#ffffff" placeholder="请选择健康档案"
-              inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('healthRecordName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="医院名称" prop="hospitalName" required >
               <u--input v-model="form.hospitalName"  placeholder="请填写医院名称"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('hospitalName')"></u--input>
             </u-form-item>
             <u-form-item label="就医类型" prop="typeName" required @click="handleType">
+              <view class="input-with-arrow">
               <u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择就医类型"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('typeName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                  <text class="arrow-icon">▼</text>
+            </view>
             </u-form-item>
             <u-form-item label="科室" prop="departments" required >
               <u--input v-model="form.departments"  placeholder="请填写科室"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('departments')"></u--input>
             </u-form-item>
             <u-form-item label="大夫" prop="doctor" required >
               <u--input v-model="form.doctor"  placeholder="请填写大夫"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('doctor')"></u--input>
             </u-form-item>
-            <u-form-item label="就诊时间" prop="visitingTime" required @click="selectDate()">
+            <u-form-item label="就诊时间" prop="visitingTime" required @click="selectDate">
-            <u--input v-model="form.visitingTime" disabled disabledColor="#ffffff" placeholder="请选择就诊时间" inputAlign="right" border="none"></u--input>
+              <view class="input-with-arrow">
-          <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.visitingTime" disabled disabledColor="#ffffff" placeholder="请选择就诊时间" inputAlign="left" :customStyle="getInputStyle('visitingTime')"></u--input>
+    <text class="arrow-icon">▼</text>
+            </view>
             </u-form-item>
             <u-form-item label="陪同人" prop="partner" required >
               <u--input v-model="form.partner"  placeholder="请填写陪同人"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('partner')"></u--input>
             </u-form-item>
 
           <u-form-item label="总费用" prop="totalCost" required >
               <u--input v-model="form.totalCost"  placeholder="请填写总费用"
-                inputAlign="right" border="none">
+                inputAlign="left" :customStyle="getInputStyle('totalCost')">
                 <template #suffix>
 					<up-text
 						text="元"
@@ -51,16 +59,16 @@
 				</template></u--input>
             </u-form-item>
           <u-form-item label="诊断结果" prop="diagnosis"  required labelPosition="top">
-            <u--textarea v-model="form.diagnosis" placeholder="请填写诊断结果" border="none"></u--textarea>
+            <u--textarea v-model="form.diagnosis" height="60rpx" placeholder="请填写诊断结果" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"  :customStyle="getTextareaStyle('diagnosis')" ></u--textarea>
           </u-form-item>
           <u-form-item label="处理及医嘱" prop="prescribe"  required labelPosition="top">
-            <u--textarea v-model="form.prescribe" placeholder="请填写处理及医嘱" border="none"></u--textarea>
+            <u--textarea v-model="form.prescribe" height="60rpx" placeholder="请填写处理及医嘱" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"  :customStyle="getTextareaStyle('prescribe')"></u--textarea>
           </u-form-item>
             <u-form-item label="费用明细" prop="costDetail" >
-              <u--textarea v-model="form.costDetail" placeholder="请填写费用明细" border="none"></u--textarea>
+              <u--textarea v-model="form.costDetail" height="50rpx" placeholder="请填写费用明细" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;" :customStyle="getTextareaStyle('costDetail')"></u--textarea>
             </u-form-item>
           <u-form-item label="备注" prop="remark"  labelPosition="top">
-            <u--textarea v-model="form.remark" placeholder="请填写备注" border="none"></u--textarea>
+            <u--textarea v-model="form.remark" height="40rpx" placeholder="请填写备注" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;" :customStyle="getTextareaStyle('remark')"></u--textarea>
           </u-form-item>
         </u--form>
         <view class="form-btn">
@@ -151,6 +159,52 @@ rules: {
 })
 const { form, queryPersonParams, queryHealthRecordParams, rules} = toRefs(data)
 
+// 错误字段
+const errorFields = ref([])
+
+// 输入框基础样式
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 输入框错误样式
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+// 输入框基础样式
+const textareaBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+}
+
+// 输入框错误样式
+const textareaErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c'
+}
+
+// 根据字段名获取输入框样式
+const getTextareaStyle = (field) => {
+  return errorFields.value.includes(field) ? textareaErrorStyle : textareaBaseStyle
+}
+
 
 onLoad((option) => {
     form.value.id = option.id
@@ -326,6 +380,12 @@ function submit() {
           })
         })
         }
+      }).catch(errors => {
+        // 验证失败，记录错误字段
+        if (errors && errors.length > 0) {
+          errorFields.value = errors.map(err => err.field)
+        }
+        proxy.$modal.msgError('请填写完整信息')
       })
     }
 </script>
@@ -369,6 +429,23 @@ page {
     .form-btn {
       padding-top: 16rpx;
     }
+
+    // 带箭头的输入框容器
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
   }
 }
 </style>
@@ -387,4 +464,19 @@ page {
   font-weight: 500 !important;
   letter-spacing: 2rpx !important;
 }
+
+/* 强制让错误状态的输入框边框变红 */
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
 </style>

src/pages/health/healthRecord/addEdit.vue

@@ -3,48 +3,60 @@
   <view class="section">
     <view class="section-title">{{ title}}</view>
     <view class="form-view">
-      <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+      <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="140rpx"
-        :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+        :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
         <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
+          <view class="input-with-arrow">
             <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
-            inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
-          <u-icon slot="right" name="arrow-down"></u-icon>
+            <text class="arrow-icon">▼</text>
+          </view>
         </u-form-item>
         <u-form-item label="档案名称" prop="name" required >
             <u--input v-model="form.name"  placeholder="请填写档案名称"
-              inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('name')"></u--input>
           </u-form-item>
         <u-form-item label="类型" prop="typeName" required @click="handleType">
+          <view class="input-with-arrow">
             <u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
-              inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('typeName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+            <text class="arrow-icon">▼</text>
+          </view>
           </u-form-item>
           <u-form-item label="档案状态" prop="stateName" required @click="handleState">
+            <view class="input-with-arrow">
               <u--input v-model="form.stateName" disabled disabledColor="#ffffff" placeholder="请选择档案状态"
-              inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('stateName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="发生时间" prop="occurTime" required @click="selectOccurTime()">
-          <u--input v-model="form.occurTime" disabled disabledColor="#ffffff" placeholder="请选择发生时间" inputAlign="right" border="none"></u--input>
+            <view class="input-with-arrow">
-        <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.occurTime" disabled disabledColor="#ffffff" placeholder="请选择发生时间" inputAlign="left" :customStyle="getInputStyle('occurTime')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
         </u-form-item>
           <u-form-item label="发生原因"  prop="etiologyName" required @click="handleEtiology">
+            <view class="input-with-arrow">
               <u--input v-model="form.etiologyName" disabled disabledColor="#ffffff" placeholder="请选择发生原因"
-              inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('etiologyName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="康复时间" prop="rehabilitationTime"  @click="selectRehabilitationTime()">
-          <u--input v-model="form.rehabilitationTime" disabled disabledColor="#ffffff" placeholder="请选择康复时间" inputAlign="right" border="none"></u--input>
+            <view class="input-with-arrow">
-        <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.rehabilitationTime" disabled disabledColor="#ffffff" placeholder="请选择康复时间" inputAlign="left" :customStyle="getInputStyle('rehabilitationTime')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
         </u-form-item>
           <u-form-item label="初期症状" prop="initialSymptoms" required >
-              <u--textarea v-model="form.initialSymptoms" placeholder="请填写初期症状" border="none" ></u--textarea>
+              <u--textarea v-model="form.initialSymptoms" placeholder="请填写初期症状" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;" :customStyle="getTextareaStyle('initialSymptoms')"></u--textarea>
           </u-form-item>
           <u-form-item label="中期症状" prop="mediumTermSymptoms"  >
-              <u--textarea v-model="form.mediumTermSymptoms" placeholder="请填写中期症状" border="none"></u--textarea>
+              <u--textarea v-model="form.mediumTermSymptoms" placeholder="请填写中期症状" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;" :customStyle="getTextareaStyle('mediumTermSymptoms')"></u--textarea>
           </u-form-item>
           <u-form-item label="后期症状" prop="laterStageSymptoms"  >
-              <u--textarea v-model="form.laterStageSymptoms" placeholder="请填写后期症状" border="none"></u--textarea>
+              <u--textarea v-model="form.laterStageSymptoms" placeholder="请填写后期症状" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;" :customStyle="getTextareaStyle('laterStageSymptoms')"></u--textarea>
           </u-form-item>
          
         <!-- <u-form-item label="备注" prop="remark"  labelPosition="top">
@@ -97,6 +109,53 @@ import dayjs from 'dayjs'
 import {onLoad,onReady} from "@dcloudio/uni-app";
   // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
 import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
+
+// 错误字段
+const errorFields = ref([])
+
+// 输入框基础样式
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 输入框错误样式
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+// 输入框基础样式
+const textareaBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+}
+
+// 输入框错误样式
+const textareaErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c'
+}
+
+// 根据字段名获取输入框样式
+const getTextareaStyle = (field) => {
+  return errorFields.value.includes(field) ? textareaErrorStyle : textareaBaseStyle
+}
+
 const occurTimeShow = ref(false)
 const showPerson = ref(false)
 const title = ref("健康档案")
@@ -331,6 +390,7 @@ function rehabilitationTimeConfirm(e) {
   }
 
 function submit() {
+      errorFields.value = []
       proxy.$refs['uForm'].validate().then(() => {
         if (form.value.id != null) {
           updateHealthRecord(form.value).then(res => {
@@ -349,6 +409,12 @@ function submit() {
           })
         })
         }
+      }).catch(errors => {
+        // 验证失败，记录错误字段
+        if (errors && errors.length > 0) {
+          errorFields.value = errors.map(err => err.field)
+        }
+        proxy.$modal.msgError('请填写完整信息')
       })
     }
 </script>
@@ -385,6 +451,23 @@ function submit() {
   .form-view {
     padding: 24rpx;
 
+    // 带箭头的输入框容器
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
+
     .form-btn {
       padding-top: 16rpx;
     }
@@ -406,4 +489,19 @@ function submit() {
   font-weight: 500 !important;
   letter-spacing: 2rpx !important;
 }
+
+/* 强制让错误状态的输入框边框变红 */
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
 </style>

src/pages/health/heightWeightRecord/addEdit.vue

@@ -3,20 +3,25 @@
     <view class="section">
       <view class="section-title">{{ title}}</view>
       <view class="form-view">
-        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="140rpx"
-          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
           <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
+            <view class="input-with-arrow">
               <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
-              inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="测量时间" prop="measureTime" required @click="selectDate()">
-            <u--input v-model="form.measureTime" disabled disabledColor="#ffffff" placeholder="请选择测量时间" inputAlign="right" border="none"></u--input>
+            <view class="input-with-arrow">
-          <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.measureTime" disabled disabledColor="#ffffff" placeholder="请选择测量时间"
+                inputAlign="left" :customStyle="getInputStyle('measureTime')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="身高" required prop="height" >
             <u--input v-model="form.height"  type="number" placeholder="请填写身高"
-              inputAlign="right" border="none">
+              inputAlign="left" :customStyle="getInputStyle('height')">
               <template #suffix>
         <up-text
           text="CM"
@@ -26,7 +31,7 @@
           </u-form-item>
           <u-form-item label="体重" required prop="weight" >
             <u--input v-model="form.weight"  type="number" placeholder="请填写体重过"
-              inputAlign="right" border="none">
+              inputAlign="left" :customStyle="getInputStyle('weight')">
               <template #suffix>
         <up-text
           text="KG"
@@ -35,7 +40,8 @@
             </u--input>
           </u-form-item>
           <u-form-item label="备注" prop="remark"  labelPosition="top">
-            <u--textarea v-model="form.remark" placeholder="请填写备注" border="none"></u--textarea>
+            <u--textarea v-model="form.remark" placeholder="请填写备注" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
         </u--form>
         <view class="form-btn">
@@ -69,6 +75,37 @@ import dayjs from 'dayjs'
 import {onLoad,onReady} from "@dcloudio/uni-app";
   // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
 import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
+
+// 错误字段
+const errorFields = ref([])
+
+// 输入框基础样式
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 输入框错误样式
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+
 const datePickShow = ref(false)
 const showPerson = ref(false)
 const title = ref("身高体重记录")
@@ -94,7 +131,9 @@ queryPersonParams: {
 },
 rules: {
   personName: [{ required: true, message: '人员不能为空', trigger: ['change', 'blur'] }],
-  measureTime: [{ required: true, message: '测量时间不能为空', trigger: ['change', 'blur'] }]
+  measureTime: [{ required: true, message: '测量时间不能为空', trigger: ['change', 'blur'] }],
+  weight: [{ required: true, message: '体重不能为空', trigger: ['change', 'blur'] }],
+  height: [{ required: true, message: '身高不能为空', trigger: ['change', 'blur'] }]
 }
 })
 const { form, queryPersonParams, rules} = toRefs(data)
@@ -161,6 +200,9 @@ function datePickConfirm(e) {
       datePickShow.value = false
   }
 function submit() {
+      // 清空错误字段
+      errorFields.value = []
+      
       proxy.$refs['uForm'].validate().then(() => {
         if (form.value.id != null) {
           updateHeightWeightRecord(form.value).then(res => {
@@ -179,6 +221,12 @@ function submit() {
           })
         })
         }
+      }).catch(errors => {
+        // 验证失败，记录错误字段
+        if (errors && errors.length > 0) {
+          errorFields.value = errors.map(err => err.field)
+        }
+        proxy.$modal.msgError('请填写完整信息')
       })
     }
 </script>
@@ -218,6 +266,23 @@ function submit() {
     .form-btn {
       padding-top: 16rpx;
     }
+
+    // 带箭头的输入框容器
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
   }
 }
 </style>
@@ -236,4 +301,19 @@ function submit() {
   font-weight: 500 !important;
   letter-spacing: 2rpx !important;
 }
+
+/* 强制让错误状态的输入框边框变红 */
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
 </style>

src/pages/health/marRecord/addEdit.vue

@@ -3,53 +3,71 @@
     <view class="section">
       <view class="section-title">{{ title}}</view>
       <view class="form-view">
-        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="140rpx"
-          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
           <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
+            <view class="input-with-arrow">
               <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
-              inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
+            <view class="input-with-arrow">
               <u--input v-model="form.healthRecordName" disabled disabledColor="#ffffff" placeholder="请选择健康档案"
-              inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('healthRecordName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="用药类型" prop="marTypeName" required @click="handleMarType">
+            <view class="input-with-arrow">
               <u--input v-model="form.marTypeName" disabled disabledColor="#ffffff" placeholder="请选择用药类型"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('marTypeName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="药品名称" prop="medicalName" required @click="handleMedical">
+            <view class="input-with-arrow">
               <u--input v-model="form.medicalName" disabled disabledColor="#ffffff" placeholder="请选择药品名称"
-              inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('medicalName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="药品来源" prop="resourceName" required @click="handleResource">
+            <view class="input-with-arrow">
               <u--input v-model="form.resourceName" disabled disabledColor="#ffffff" placeholder="请选择药品来源"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('resourceName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="用药地点" prop="placeName" required @click="handlePlace">
+            <view class="input-with-arrow">
               <u--input v-model="form.placeName" disabled disabledColor="#ffffff" placeholder="请选择用药地点"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('placeName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="用药时间" prop="dosingTime" required @click="selectDate()">
-            <u--input v-model="form.dosingTime" disabled disabledColor="#ffffff" placeholder="请选择用药时间" inputAlign="right" border="none"></u--input>
+            <view class="input-with-arrow">
-          <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.dosingTime" disabled disabledColor="#ffffff" placeholder="请选择用药时间"
+                inputAlign="left" :customStyle="getInputStyle('dosingTime')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
-            <u-form-item label="用药剂量" prop="dosage" required >
+          <u-form-item label="用药剂量" prop="dosage" required>
             <u--input v-model="form.dosage" placeholder="请填写用药剂量"
-                inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('dosage')"></u--input>
           </u-form-item>
           <u-form-item label="用药单位" prop="unitName" required @click="handleUnit">
+            <view class="input-with-arrow">
               <u--input v-model="form.unitName" disabled disabledColor="#ffffff" placeholder="请选择用药单位"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('unitName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="备注" prop="remark" labelPosition="top">
-            <u--textarea v-model="form.remark" placeholder="请填写备注" border="none"></u--textarea>
+            <u--textarea v-model="form.remark" placeholder="请填写备注" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
         </u--form>
         <view class="form-btn">
@@ -91,11 +109,41 @@ import { listPerson, getPerson } from '@/api/health/person'
 import { listHealthRecord } from '@/api/health/healthRecord'
 import { listMedicineBasic, getMedicineBasic } from '@/api/health/medicineBasic'
 const { proxy } = getCurrentInstance()
-  import { getDicts } from '@/api/system/dict/data.js'
+import { getDicts } from '@/api/system/dict/data.js'
 import dayjs from 'dayjs'
 import {onLoad,onReady} from "@dcloudio/uni-app";
-  // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
 import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
+
+// 错误字段
+const errorFields = ref([])
+
+// 输入框基础样式
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 输入框错误样式
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+
 const datePickShow = ref(false)
 const showPerson = ref(false)
 const flag = ref('add')
@@ -161,8 +209,8 @@ rules: {
   marTypeName: [{ required: true, message: '用药类型不能为空', trigger: ['change', 'blur'] }],
   resource: [{ required: true, message: '药品来源不能为空', trigger: ['change', 'blur'] }],
   place: [{ required: true, message: '用药地点不能为空', trigger: ['change', 'blur'] }],
-  dosage: [{ type: 'number', required: true, message: '用药剂量不能为空', trigger: ['change', 'blur'] }],
+  dosage: [{ required: true, message: '用药剂量不能为空', trigger: ['change', 'blur'] }],
-
+  unitName: [{required: true, message: '用药单位不能为空', trigger: ['change', 'blur'] }],
   dosingTime: [{ required: true, message: '用药时间不能为空', trigger: ['change', 'blur'] }]
 }
 })
@@ -436,6 +484,9 @@ function datePickConfirm(e) {
       datePickShow.value = false
   }
 function submit() {
+      // 清空错误字段
+      errorFields.value = []
+      
       proxy.$refs['uForm'].validate().then(() => {
         if (form.value.id != null) {
           if(flag.value==null){
@@ -466,6 +517,12 @@ function submit() {
           })
         })
         }
+      }).catch(errors => {
+        // 验证失败，记录错误字段
+        if (errors && errors.length > 0) {
+          errorFields.value = errors.map(err => err.field)
+        }
+        proxy.$modal.msgError('请填写完整信息')
       })
     }
 </script>
@@ -505,6 +562,23 @@ function submit() {
     .form-btn {
       padding-top: 16rpx;
     }
+
+    // 带箭头的输入框容器
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
   }
 }
 </style>
@@ -523,4 +597,19 @@ function submit() {
   font-weight: 500 !important;
   letter-spacing: 2rpx !important;
 }
+
+/* 强制让错误状态的输入框边框变红 */
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
 </style>

src/pages/health/medicineBasic/addEdit.vue

@@ -3,108 +3,131 @@
     <view class="section">
       <view class="section-title">{{ title}}</view>
       <view class="form-view">
-        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
-          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
           <u-form-item label="药品全称" prop="name" required >
               <u--input v-model="form.name"  placeholder="请填写药品全称"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('name')"></u--input>
             </u-form-item>
             <u-form-item label="药品简称" prop="shortName" required >
               <u--input v-model="form.shortName"  placeholder="请填写药品简称"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('shortName')"></u--input>
             </u-form-item>
             <u-form-item label="品牌" prop="brand" required >
               <u--input v-model="form.brand"  placeholder="请填写品牌"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('brand')"></u--input>
             </u-form-item>
             <u-form-item label="药品包装" prop="packaging" required >
               <u--input v-model="form.packaging"  placeholder="请填写药品包装"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('packaging')"></u--input>
             </u-form-item>
             <u-form-item label="生产厂家" prop="manufacturers"  >
               <u--input v-model="form.manufacturers"  placeholder="请填写生产厂家"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('manufacturers')"></u--input>
             </u-form-item>
         
             <u-form-item label="药品编码" prop="code"  >
               <u--input v-model="form.code"  placeholder="请填写药品编码"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('code')"></u--input>
             </u-form-item>
 
           <u-form-item label="药品剂型" prop="dosageFormName"  @click="handleDosageForm">
+              <view class="input-with-arrow">
                 <u--input v-model="form.dosageFormName" disabled disabledColor="#ffffff" placeholder="请选择药品剂型"
-                inputAlign="right" border="none"></u--input>
+                  inputAlign="left" :customStyle="getInputStyle('dosageFormName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+              </view>
             </u-form-item>
             <u-form-item label="治疗类型" prop="treatmentTypeName"  @click="handleTreatmentType">
+              <view class="input-with-arrow">
                 <u--input v-model="form.treatmentTypeName" disabled disabledColor="#ffffff" placeholder="请选择治疗类型"
-                inputAlign="right" border="none"></u--input>
+                  inputAlign="left" :customStyle="getInputStyle('treatmentTypeName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+              </view>
             </u-form-item>
             <u-form-item label="药品分类"  prop="classificationName"  @click="handleClassification">
+              <view class="input-with-arrow">
                 <u--input v-model="form.classificationName" disabled disabledColor="#ffffff" placeholder="请选择药品分类"
-                inputAlign="right" border="none"></u--input>
+                  inputAlign="left" :customStyle="getInputStyle('classificationName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+              </view>
             </u-form-item>
 
             <u-form-item label="类别" prop="categoryName"  @click="handleCategory">
+              <view class="input-with-arrow">
                 <u--input v-model="form.categoryName" disabled disabledColor="#ffffff" placeholder="请选择类别"
-                inputAlign="right" border="none"></u--input>
+                  inputAlign="left" :customStyle="getInputStyle('categoryName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+              </view>
             </u-form-item>
             <u-form-item label="包装单位" prop="packageUnitName"  @click="handlePackageUnit">
+              <view class="input-with-arrow">
                 <u--input v-model="form.packageUnitName" disabled disabledColor="#ffffff" placeholder="请选择包装单位"
-                inputAlign="right" border="none"></u--input>
+                  inputAlign="left" :customStyle="getInputStyle('packageUnitName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+              </view>
             </u-form-item>
         
             <u-form-item label="是否进口" prop="isImportName"  @click="handleIsImport">
+              <view class="input-with-arrow">
                 <u--input v-model="form.isImportName" disabled disabledColor="#ffffff" placeholder="请选择是否进口"
-                inputAlign="right" border="none"></u--input>
+                  inputAlign="left" :customStyle="getInputStyle('isImportName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+              </view>
             </u-form-item>
             <u-form-item label="规格" prop="specifications" >
               <u--input v-model="form.specifications"  placeholder="请填写规格"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('specifications')"></u--input>
             </u-form-item>
             <u-form-item label="规格单位" prop="unitName"  @click="handleUnit">
+              <view class="input-with-arrow">
                 <u--input v-model="form.unitName" disabled disabledColor="#ffffff" placeholder="请选择规格单位"
-                inputAlign="right" border="none"></u--input>
+                  inputAlign="left" :customStyle="getInputStyle('unitName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+              </view>
             </u-form-item>
             <u-form-item label="单个含量" prop="content"  >
               <u--input v-model="form.content"  placeholder="请填写单个含量"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('content')"></u--input>
             </u-form-item>
             <u-form-item label="含量单位" prop="contentUnitName"  @click="handleContentUnit">
+              <view class="input-with-arrow">
                 <u--input v-model="form.contentUnitName" disabled disabledColor="#ffffff" placeholder="请选择含量单位"
-                inputAlign="right" border="none"></u--input>
+                  inputAlign="left" :customStyle="getInputStyle('contentUnitName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+              </view>
             </u-form-item>
             <u-form-item label="生产地址" prop="address"  >
               <u--input v-model="form.address"  placeholder="请填写生产地址"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('address')"></u--input>
             </u-form-item>
             <u-form-item label="功能主治" prop="indications"  labelPosition="top">
-            <u--textarea v-model="form.indications" placeholder="请填写功能主治" border="none"></u--textarea>
+            <u--textarea v-model="form.indications" placeholder="请填写功能主治" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
           <u-form-item label="贮藏" prop="storage"  labelPosition="top">
-            <u--textarea v-model="form.storage" placeholder="请填写贮藏" border="none"></u--textarea>
+            <u--textarea v-model="form.storage" placeholder="请填写贮藏" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
           <u-form-item label="药品成分" prop="ingredients"  labelPosition="top">
-            <u--textarea v-model="form.ingredients" placeholder="请填写药品成分" border="none"></u--textarea>
+            <u--textarea v-model="form.ingredients" placeholder="请填写药品成分" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
           <u-form-item label="用法用量" prop="usage"  labelPosition="top">
-            <u--textarea v-model="form.usage" placeholder="请填写用法用量" border="none"></u--textarea>
+            <u--textarea v-model="form.usage" placeholder="请填写用法用量" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
           <u-form-item label="性状" prop="character"  labelPosition="top">
-            <u--textarea v-model="form.character" placeholder="请填写性状" border="none"></u--textarea>
+            <u--textarea v-model="form.character" placeholder="请填写性状" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
           <u-form-item label="不良反应" prop="adverseReaction"  labelPosition="top">
-            <u--textarea v-model="form.adverseReaction" placeholder="请填写不良反应" border="none"></u--textarea>
+            <u--textarea v-model="form.adverseReaction" placeholder="请填写不良反应" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
           <u-form-item label="备注" prop="remark"  labelPosition="top">
-            <u--textarea v-model="form.remark" placeholder="请填写备注" border="none"></u--textarea>
+            <u--textarea v-model="form.remark" placeholder="请填写备注" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
         </u--form>
         <view class="form-btn">
@@ -142,6 +165,37 @@ import dayjs from 'dayjs'
 import {onLoad,onReady} from "@dcloudio/uni-app";
   // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
 import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
+
+// 错误字段
+const errorFields = ref([])
+
+// 输入框基础样式
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 输入框错误样式
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+
 const datePickShow = ref(false)
 const title = ref("药品基础信息")
 const flag = ref('add')
@@ -452,6 +506,9 @@ function handleDosageForm() {
   showContentUnit.value = false
       }
 function submit() {
+      // 清空错误字段
+      errorFields.value = []
+
       proxy.$refs['uForm'].validate().then(() => {
         if (form.value.id != null) {
         if(flag.value==null){
@@ -482,6 +539,12 @@ function submit() {
           })
         })
         }
+      }).catch(errors => {
+        // 验证失败，记录错误字段
+        if (errors && errors.length > 0) {
+          errorFields.value = errors.map(err => err.field)
+        }
+        proxy.$modal.msgError('请填写完整信息')
       })
     }
 </script>
@@ -521,6 +584,23 @@ function submit() {
     .form-btn {
       padding-top: 16rpx;
     }
+
+    // 带箭头的输入框容器
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
   }
 }
 </style>
@@ -539,4 +619,19 @@ function submit() {
   font-weight: 500 !important;
   letter-spacing: 2rpx !important;
 }
+
+/* 强制让错误状态的输入框边框变红 */
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
 </style>

src/pages/health/medicineStockIn/addEdit.vue

@@ -3,88 +3,104 @@
     <view class="section">
       <view class="section-title">{{ title}}</view>
       <view class="form-view">
-        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
-          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
           <u-form-item label="治疗类型" prop="marTypeName"  @click="handleMarType">
+              <view class="input-with-arrow">
                 <u--input v-model="form.marTypeName" disabled disabledColor="#ffffff" placeholder="请选择治疗类型"
-                inputAlign="right" border="none"></u--input>
+                  inputAlign="left" :customStyle="getInputStyle('marTypeName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+              </view>
             </u-form-item>
             <u-form-item label="药品名称" prop="medicineName" required @click="handleMedical">
+            <view class="input-with-arrow">
               <u--input v-model="form.medicineName" disabled disabledColor="#ffffff" placeholder="请选择药品名称"
-              inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('medicineName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="入库编号" prop="code" required >
               <u--input v-model="form.code"  placeholder="请填写入库编号"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('code')"></u--input>
             </u-form-item>
             <u-form-item label="入库数量" prop="quantity" required >
               <u--input v-model="form.quantity"   @change="handleQuantityChange" placeholder="请填写入库数量"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('quantity')"></u--input>
             </u-form-item>
             <u-form-item label="规格总数" prop="totalCount" required >
               <u--input v-model="form.totalCount"  readonly placeholder="请填写规格总数"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('totalCount')"></u--input>
             </u-form-item>
             <u-form-item label="使用状态" prop="stateName" required  @click="handleState">
+              <view class="input-with-arrow">
                 <u--input v-model="form.stateName" disabled disabledColor="#ffffff" placeholder="请选择使用状态"
-                inputAlign="right" border="none"></u--input>
+                  inputAlign="left" :customStyle="getInputStyle('stateName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+              </view>
             </u-form-item>
             <u-form-item label="购买时间" prop="purchaseDate"  @click="selectDate()">
-            <u--input v-model="form.purchaseDate" disabled disabledColor="#ffffff" placeholder="请选择购买时间" inputAlign="right" border="none"></u--input>
+            <view class="input-with-arrow">
-          <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.purchaseDate" disabled disabledColor="#ffffff" placeholder="请选择购买时间" inputAlign="left" :customStyle="getInputStyle('purchaseDate')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
    
             <u-form-item label="生产日期" prop="productionDate"  @click="selectProductionDate()">
-            <u--input v-model="form.productionDate" disabled disabledColor="#ffffff" placeholder="请选择生产日期" inputAlign="right" border="none"></u--input>
+            <view class="input-with-arrow">
-          <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.productionDate" disabled disabledColor="#ffffff" placeholder="请选择生产日期" inputAlign="left" :customStyle="getInputStyle('productionDate')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="过期日期" prop="expiringDate"   @click="selectExpiringDate()">
-            <u--input v-model="form.expiringDate" disabled disabledColor="#ffffff" placeholder="请选择过期日期" inputAlign="right" border="none"></u--input>
+            <view class="input-with-arrow">
-          <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.expiringDate" disabled disabledColor="#ffffff" placeholder="请选择过期日期" inputAlign="left" :customStyle="getInputStyle('expiringDate')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
             <u-form-item label="包装单位" prop="packageUnitName"  @click="handlePackageUnit">
+              <view class="input-with-arrow">
                 <u--input v-model="form.packageUnitName" disabled disabledColor="#ffffff" placeholder="请选择包装单位"
-                inputAlign="right" border="none"></u--input>
+                  inputAlign="left" :customStyle="getInputStyle('packageUnitName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+              </view>
             </u-form-item>
   
             <u-form-item label="规格单位" prop="unitName"  @click="handleUnit">
+              <view class="input-with-arrow">
                 <u--input v-model="form.unitName" disabled disabledColor="#ffffff" placeholder="请选择规格单位"
-                inputAlign="right" border="none"></u--input>
+                  inputAlign="left" :customStyle="getInputStyle('unitName')"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                <text class="arrow-icon">▼</text>
+              </view>
             </u-form-item>
             <u-form-item label="已使用数量" prop="usedCount"  >
               <u--input v-model="form.usedCount"  placeholder="请填写已使用数量"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('usedCount')"></u--input>
             </u-form-item>
             <u-form-item label="剩余数量" prop="leftCount"  >
               <u--input v-model="form.leftCount"  placeholder="请填写剩余数量"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('leftCount')"></u--input>
             </u-form-item>
             <u-form-item label="年龄体重" prop="ageWeight"  >
               <u--input v-model="form.ageWeight"  placeholder="请填写年龄体重"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('ageWeight')"></u--input>
             </u-form-item>
             <u-form-item label="药品单价" prop="purchasePrice"  >
               <u--input v-model="form.purchasePrice"  placeholder="请填写药品单价"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('purchasePrice')"></u--input>
             </u-form-item>
             <u-form-item label="药品总价" prop="totalPrice"  >
               <u--input v-model="form.totalPrice"  placeholder="请填写药品总价"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('totalPrice')"></u--input>
             </u-form-item>
             <u-form-item label="购买地址" prop="purchaseAddress"  labelPosition="top">
               <u--input v-model="form.purchaseAddress"  placeholder="请填写购买地址"
-              inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('purchaseAddress')"></u--input>
           </u-form-item>
             <u-form-item label="医嘱" prop="usage"  labelPosition="top">
-            <u--textarea v-model="form.usage" placeholder="请填写医嘱" border="none"></u--textarea>
+            <u--textarea v-model="form.usage" placeholder="请填写医嘱" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
           <u-form-item label="备注" prop="remark"  labelPosition="top">
-            <u--textarea v-model="form.remark" placeholder="请填写备注" border="none"></u--textarea>
+            <u--textarea v-model="form.remark" placeholder="请填写备注" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
          
         </u--form>
@@ -145,6 +161,37 @@ import dayjs from 'dayjs'
 import {onLoad,onReady} from "@dcloudio/uni-app";
   // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
 import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
+
+// 错误字段
+const errorFields = ref([])
+
+// 输入框基础样式
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 输入框错误样式
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+
 const datePickShow = ref(false)
 const flag = ref('add')
 const title = ref("药品入库清单")
@@ -468,6 +515,9 @@ function datePickConfirm(e) {
       datePickShow.value = false
   }
 function submit() {
+      // 清空错误字段
+      errorFields.value = []
+
       proxy.$refs['uForm'].validate().then(() => {
         if (form.value.id != null) {
         if(flag.value==null){
@@ -497,6 +547,12 @@ function submit() {
           })
         })
         }
+      }).catch(errors => {
+        // 验证失败，记录错误字段
+        if (errors && errors.length > 0) {
+          errorFields.value = errors.map(err => err.field)
+        }
+        proxy.$modal.msgError('请填写完整信息')
       })
     }
 </script>
@@ -536,6 +592,23 @@ function submit() {
     .form-btn {
       padding-top: 16rpx;
     }
+
+    // 带箭头的输入框容器
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
   }
 }
 </style>
@@ -554,4 +627,19 @@ function submit() {
   font-weight: 500 !important;
   letter-spacing: 2rpx !important;
 }
+
+/* 强制让错误状态的输入框边框变红 */
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
 </style>

src/pages/health/milkPowderRecord/addEdit.vue

@@ -3,20 +3,25 @@
     <view class="section">
       <view class="section-title">{{ title}}</view>
       <view class="form-view">
-        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="140rpx"
-          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
           <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
+            <view class="input-with-arrow">
               <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
-              inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="吃奶时间" prop="sucklesTime" required @click="selectDate()">
-            <u--input v-model="form.sucklesTime" disabled disabledColor="#ffffff" placeholder="请选择吃奶时间" inputAlign="right" border="none"></u--input>
+            <view class="input-with-arrow">
-          <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.sucklesTime" disabled disabledColor="#ffffff" placeholder="请选择吃奶时间"
+                inputAlign="left" :customStyle="getInputStyle('sucklesTime')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="吃奶量" required prop="consumption" >
             <u--input v-model="form.consumption" type="number" placeholder="请填写吃奶量"
-              inputAlign="right" border="none">
+              inputAlign="left" :customStyle="getInputStyle('consumption')">
               <template #suffix>
                 <up-text
                   text="毫升"
@@ -26,10 +31,11 @@
           </u-form-item>
           <u-form-item label="奶粉品牌" prop="milkPowderBrand"  >
             <u--input v-model="form.milkPowderBrand" placeholder="请填写奶粉品牌"
-                inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('milkPowderBrand')"></u--input>
           </u-form-item>
           <u-form-item label="备注" prop="remark" labelPosition="top">
-            <u--textarea v-model="form.remark" placeholder="请填写备注" border="none"></u--textarea>
+            <u--textarea v-model="form.remark" placeholder="请填写备注" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
         </u--form>
         <view class="form-btn">
@@ -57,14 +63,44 @@ import { listPerson, } from '@/api/health/person'
 const { proxy } = getCurrentInstance()
 import dayjs from 'dayjs'
 import {onLoad,onReady} from "@dcloudio/uni-app";
-  // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
 import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
+
+// 错误字段
+const errorFields = ref([])
+
+// 输入框基础样式
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 输入框错误样式
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+
 const datePickShow = ref(false)
 const showPerson = ref(false)
 const title = ref("吃奶记录")
 const personList = ref([])
 const data = reactive({
-form: {
+  form: {
     id: null,
     createBy: null,
     createTime: null,
@@ -77,20 +113,20 @@ form: {
     personId: null,
     milkPowderBrand: null,
     spoonful: null
-},
+  },
-queryPersonParams: {
+  queryPersonParams: {
     pageNum: 1,
     status: '1',
     pageSize: 1000
-},
+  },
-rules: {
+  rules: {
     personName: [{ required: true, message: '人员不能为空', trigger: ['change', 'blur'] }],
-  sucklesTime: [{ required: true, message: '吃奶时间不能为空', trigger: ['change', 'blur'] }]
+    sucklesTime: [{ required: true, message: '吃奶时间不能为空', trigger: ['change', 'blur'] }],
-}
+    consumption: [{ required: true, message: '吃奶量不能为空', trigger: ['change', 'blur'] }]
+  }
 })
 const { form, queryPersonParams, rules} = toRefs(data)
 
-
 onLoad((option) => {
   form.value.id = option.id
   if(form.value.id!=null){
@@ -127,7 +163,7 @@ function handlePerson() {
   } else {
     showPerson.value = true
   }
-   }
+}
 function handlePersonConfirm(e) {
   form.value.personName = e.value[0].name
   form.value.personId = e.value[0].id
@@ -137,21 +173,23 @@ function   handlePersonConfirm(e) {
   listHealthRecord(queryHealthRecordParams.value).then((response) => {  
     healthRecordList.value = [response.rows] 
     showPerson.value = false
-})
+  })
-      
 }
 function handlePersonCancel() {
   showPerson.value = false
-  }
+}
 function selectDate() {
   datePickShow.value = true
   proxy.$refs['sucklesTimeRef'].innerValue = new Date().getTime()
-  }
+}
 function datePickConfirm(e) {
   form.value.sucklesTime = dayjs(e.value).format("YYYY-MM-DD HH:mm:ss")
   datePickShow.value = false
-  }
+}
 function submit() {
+  // 清空错误字段
+  errorFields.value = []
+
   proxy.$refs['uForm'].validate().then(() => {
     if (form.value.id != null) {
       updateMilkPowderRecord(form.value).then(res => {
@@ -161,7 +199,7 @@ function submit() {
           }
         })
       })
-        }else {
+    } else {
       addMilkPowderRecord(form.value).then(res => {
         proxy.$refs['uToast'].show({
           message: '新增成功', complete() {
@@ -170,8 +208,14 @@ function submit() {
         })
       })
     }
-      })
+  }).catch(errors => {
+    // 验证失败，记录错误字段
+    if (errors && errors.length > 0) {
+      errorFields.value = errors.map(err => err.field)
     }
+    proxy.$modal.msgError('请填写完整信息')
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -209,6 +253,23 @@ function submit() {
     .form-btn {
       padding-top: 16rpx;
     }
+
+    // 带箭头的输入框容器
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
   }
 }
 </style>
@@ -227,4 +288,19 @@ function submit() {
   font-weight: 500 !important;
   letter-spacing: 2rpx !important;
 }
+
+/* 强制让错误状态的输入框边框变红 */
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
 </style>

src/pages/health/person/addEdit.vue

@@ -1,58 +1,62 @@
 <template>
   <view class="container" style="paddingBottom:1rpx;">
     <view class="section">
-    <view class="section-title">{{ title}}</view>
+      <view class="section-title">{{ title }}</view>
       <view class="form-view">
-      <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="140rpx"
-        :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
-        <u-form-item label="姓名" prop="name" required >
+          <u-form-item label="姓名" prop="name" required>
-            <u--input v-model="form.name"  placeholder="请填写姓名"
+            <u--input v-model="form.name" placeholder="请填写姓名" maxlength="30"
-              inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('name')"></u--input>
           </u-form-item>
-          <u-form-item label="昵称" prop="nickName" required >
+          <u-form-item label="昵称" prop="nickName" required>
-            <u--input v-model="form.nickName"  placeholder="请填写昵称"
+            <u--input v-model="form.nickName" placeholder="请填写昵称" maxlength="30"
-              inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('nickName')"></u--input>
           </u-form-item>
           <u-form-item label="类型" prop="typeName" required @click="handleType">
+            <view class="input-with-arrow">
               <u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
-              inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('typeName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
-        
           <u-form-item label="生日" prop="birthday" required @click="selectBirthday()">
-          <u--input v-model="form.birthday" disabled disabledColor="#ffffff" placeholder="请选择生日" inputAlign="right" border="none"></u--input>
+            <view class="input-with-arrow">
-        <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.birthday" disabled disabledColor="#ffffff" placeholder="请选择生日"
+                inputAlign="left" :customStyle="getInputStyle('birthday')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="性别" prop="sexName" required @click="handleSex">
+            <view class="input-with-arrow">
               <u--input v-model="form.sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
-              inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('sexName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
-          <u-form-item label="身份证" prop="identityCard" >
+          <u-form-item label="身份证" prop="identityCard">
-            <u--input v-model="form.identityCard"  placeholder="请填写身份证"
+            <u--input v-model="form.identityCard" placeholder="请填写身份证" maxlength="18"
-              inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('identityCard')"></u--input>
           </u-form-item>
-        <u-form-item label="身高" prop="height" >
+          <u-form-item label="身高" prop="height">
-            <u--input v-model="form.height"  placeholder="请填写身高"
+            <u--input v-model="form.height" placeholder="请填写身高" type="number"
-              inputAlign="right" border="none">
+              inputAlign="left" :customStyle="getInputStyle('height')">
               <template #suffix>
-					<up-text
+                <up-text text="CM"></up-text>
-						text="CM"
+              </template>
-					></up-text>
+            </u--input>
-				</template></u--input>
           </u-form-item>
-          <u-form-item label="体重" prop="weight" >
+          <u-form-item label="体重" prop="weight">
-            <u--input v-model="form.weight"  placeholder="请填写体重"
+            <u--input v-model="form.weight" placeholder="请填写体重" type="number"
-              inputAlign="right" border="none">
+              inputAlign="left" :customStyle="getInputStyle('weight')">
               <template #suffix>
-					<up-text
+                <up-text text="KG"></up-text>
-						text="KG"
+              </template>
-					></up-text>
+            </u--input>
-				</template></u--input>
           </u-form-item>
-         
           <u-form-item label="备注" prop="remark" labelPosition="top">
-            <u--textarea v-model="form.remark" placeholder="请填写备注"  border="none" ></u--textarea>
+            <u--textarea v-model="form.remark" placeholder="请填写备注" inputAlign="left"
+              maxlength="500" style="border:2rpx solid #dcdfe6 !important; height:160rpx;"></u--textarea>
           </u-form-item>
         </u--form>
         <view class="form-btn">
@@ -78,13 +82,13 @@
 </template>
 
 <script setup>
-import { getPerson,addPerson, updatePerson } from '@/api/health/person'
+import { getPerson, addPerson, updatePerson } from '@/api/health/person'
 const { proxy } = getCurrentInstance()
-  import { getDicts } from '@/api/system/dict/data.js'
+import { getDicts } from '@/api/system/dict/data.js'
 import dayjs from 'dayjs'
-import {onLoad,onReady} from "@dcloudio/uni-app";
+import { onLoad, onReady } from "@dcloudio/uni-app";
-  // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
+import { reactive, toRefs, ref, getCurrentInstance } from "vue";
-import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
+
 const birthdayShow = ref(false)
 const title = ref("成员管理")
 
@@ -94,9 +98,38 @@ const showType = ref(false)
 const sexList = ref([])
 const showSex = ref(false)
 
+// 错误字段
+const errorFields = ref([])
+
+// 输入框基础样式
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 输入框错误样式
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+
 const data = reactive({
-form: {
+  form: {
-  id: null,
     id: null,
     name: null,
     type: null,
@@ -113,30 +146,27 @@ form: {
     sex: null,
     identityCard: null,
     ranking: 0
-},
+  },
-rules: {
+  rules: {
-  name: [{ required: true, message: '姓名不能为空', trigger:['change', 'blur'] }],
+    name: [{ required: true, message: '姓名不能为空', trigger: ['change', 'blur'] }],
     nickName: [{ required: true, message: '昵称不能为空', trigger: ['change', 'blur'] }],
     birthday: [{ required: true, message: '生日不能为空', trigger: ['change', 'blur'] }],
     typeName: [{ required: true, message: '类型不能为空', trigger: ['change', 'blur'] }],
     sexName: [{ required: true, message: '性别不能为空', trigger: ['change', 'blur'] }],
-}
+  }
 })
-const { form, rules} = toRefs(data)
+const { form, rules } = toRefs(data)
-
 
 onLoad((option) => {
   form.value.id = option.id
-     if(form.value.id!=null){
+  if (form.value.id != null) {
-      title.value="成员管理-修改"
+    title.value = "成员管理-修改"
-     }else{
+  } else {
-      title.value="成员管理-新增"
+    title.value = "成员管理-新增"
   }
   getData()
 })
-onReady(() => {
+
-    //  form.value.birthday = dayjs(new Date().getTime()).format("YYYY-MM-DD")
-})
 function dictStr(val, arr) {
   let str = ''
   arr.map(item => {
@@ -145,33 +175,33 @@ function dictStr(val, arr) {
     }
   })
   return str
- }
+}
+
 function getData() {
   // 类型
   getDicts('person_type').then(res => {
-        typeList.value =[res.data] 
+    typeList.value = [res.data]
   })
-           // 类型
+  // 性别
   getDicts('sys_user_sex').then(res => {
-        sexList.value =[res.data] 
+    sexList.value = [res.data]
   })
-    if(form.value.id!=null){
+  if (form.value.id != null) {
     getPerson(form.value.id).then(res => {
       form.value = res.data
       // 类型
       getDicts('person_type').then(result => {
-          form.value.typeName=dictStr(form.value.type, result.data)
+        form.value.typeName = dictStr(form.value.type, result.data)
       })
-                  // 类型
+      // 性别
       getDicts('sys_user_sex').then(result => {
-          form.value.sexName=dictStr(form.value.sex, result.data)
+        form.value.sexName = dictStr(form.value.sex, result.data)
       })
     })
   }
 }
 
-
+function handleType() {
-  function handleType() {
   if (typeList.value[0].length === 0) {
     proxy.$refs['uToast'].show({
       message: '类型为空  ', type: 'warning'
@@ -179,17 +209,19 @@ function  getData() {
   } else {
     showType.value = true
   }
-     }
+}
-  function   handleTypeConfirm(e) {
+
+function handleTypeConfirm(e) {
   form.value.typeName = e.value[0].dictLabel
   form.value.type = e.value[0].dictValue
   showType.value = false
-  }
+}
- function handleTypeCancel() {
-       showType.value = false
-      }
 
-      function handleSex() {
+function handleTypeCancel() {
+  showType.value = false
+}
+
+function handleSex() {
   if (sexList.value[0].length === 0) {
     proxy.$refs['uToast'].show({
       message: '性别为空  ', type: 'warning'
@@ -197,27 +229,32 @@ function  getData() {
   } else {
     showSex.value = true
   }
-     }
+}
-  function   handleSexConfirm(e) {
+
+function handleSexConfirm(e) {
   form.value.sexName = e.value[0].dictLabel
   form.value.sex = e.value[0].dictValue
   showSex.value = false
-  }
+}
- function handleSexCancel() {
+
+function handleSexCancel() {
   showSex.value = false
-      }
+}
 
 function selectBirthday() {
   birthdayShow.value = true
   proxy.$refs['birthdayRef'].innerValue = new Date().getTime()
-  }
+}
+
 function birthdayConfirm(e) {
   form.value.birthday = dayjs(e.value).format("YYYY-MM-DD")
   birthdayShow.value = false
-  }
+}
-
 
 function submit() {
+  // 清空错误字段
+  errorFields.value = []
+
   proxy.$refs['uForm'].validate().then(() => {
     if (form.value.id != null) {
       updatePerson(form.value).then(res => {
@@ -227,7 +264,7 @@ function submit() {
           }
         })
       })
-        }else {
+    } else {
       addPerson(form.value).then(res => {
         proxy.$refs['uToast'].show({
           message: '新增成功', complete() {
@@ -236,8 +273,14 @@ function submit() {
         })
       })
     }
-      })
+  }).catch(errors => {
+    // 验证失败，记录错误字段
+    if (errors && errors.length > 0) {
+      errorFields.value = errors.map(err => err.field)
     }
+    proxy.$modal.msgError('请填写完整信息')
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -275,6 +318,23 @@ function submit() {
     .form-btn {
       padding-top: 16rpx;
     }
+
+    // 带箭头的输入框容器
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
   }
 }
 </style>
@@ -293,4 +353,19 @@ function submit() {
   font-weight: 500 !important;
   letter-spacing: 2rpx !important;
 }
+
+/* 强制让错误状态的输入框边框变红 */
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
 </style>

src/pages/health/processRecord/addEdit.vue

@@ -3,27 +3,33 @@
     <view class="section">
       <view class="section-title">{{ title}}</view>
       <view class="form-view">
-        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="140rpx"
-          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
           <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
+          <view class="input-with-arrow">
             <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
-              inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+            <text class="arrow-icon">▼</text>
+          </view>
         </u-form-item>
           <u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
+             <view class="input-with-arrow">
             <u--input v-model="form.healthRecordName" disabled disabledColor="#ffffff" placeholder="请选择健康档案"
-              inputAlign="right" border="none"></u--input>
+              inputAlign="left" :customStyle="getInputStyle('healthRecordName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+                  <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="记录时间" prop="recordingTime" required @click="selectDate()">
-            <u--input v-model="form.recordingTime" disabled disabledColor="#ffffff" placeholder="请选择记录时间" inputAlign="right" border="none"></u--input>
+            <view class="input-with-arrow">
-          <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.recordingTime" disabled disabledColor="#ffffff" placeholder="请选择记录时间" inputAlign="left"  :customStyle="getInputStyle('recordingTime')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="记录内容" required prop="content" >
-            <u--textarea v-model="form.content" placeholder="请填写记录内容" border="none" ></u--textarea>
+            <u--textarea v-model="form.content" placeholder="请填写记录内容" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"  :customStyle="getTextareaStyle('content')"></u--textarea>
           </u-form-item>
           <u-form-item label="备注" prop="remark"  labelPosition="top">
-            <u--textarea v-model="form.remark" placeholder="请填写备注" border="none"></u--textarea>
+            <u--textarea v-model="form.remark" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"  placeholder="请填写备注" :customStyle="getTextareaStyle('remark')"></u--textarea>
           </u-form-item>
         </u--form>
         <view class="form-btn">
@@ -96,6 +102,52 @@ rules: {
 })
 const { form, queryPersonParams, queryHealthRecordParams, rules} = toRefs(data)
 
+// 错误字段
+const errorFields = ref([])
+
+// 输入框基础样式
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 输入框错误样式
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+// 输入框基础样式
+const textareaBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+}
+
+// 输入框错误样式
+const textareaErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c'
+}
+
+// 根据字段名获取输入框样式
+const getTextareaStyle = (field) => {
+  return errorFields.value.includes(field) ? textareaErrorStyle : textareaBaseStyle
+}
+
 
 onLoad((option) => {
   form.value.id = option.id
@@ -238,6 +290,12 @@ function submit() {
           })
         })
         }
+      }).catch(errors => {
+        // 验证失败，记录错误字段
+        if (errors && errors.length > 0) {
+          errorFields.value = errors.map(err => err.field)
+        }
+        proxy.$modal.msgError('请填写完整信息')
       })
     }
 </script>
@@ -277,6 +335,23 @@ function submit() {
     .form-btn {
       padding-top: 16rpx;
     }
+
+    // 带箭头的输入框容器
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
   }
 }
 </style>
@@ -295,4 +370,19 @@ function submit() {
   font-weight: 500 !important;
   letter-spacing: 2rpx !important;
 }
+
+/* 强制让错误状态的输入框边框变红 */
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
 </style>

src/pages/health/temperatureRecord/addEdit.vue

@@ -3,25 +3,31 @@
     <view class="section">
       <view class="section-title">{{ title}}</view>
       <view class="form-view">
-        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
+        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="140rpx"
-          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
           <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
+            <view class="input-with-arrow">
               <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
-              inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
+            <view class="input-with-arrow">
               <u--input v-model="form.healthRecordName" disabled disabledColor="#ffffff" placeholder="请选择健康档案"
-              inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('healthRecordName')"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="测量时间" prop="measureTime" required @click="selectDate()">
-            <u--input v-model="form.measureTime" disabled disabledColor="#ffffff" placeholder="请选择测量时间" inputAlign="right" border="none"></u--input>
+            <view class="input-with-arrow">
-          <u-icon slot="right" name="arrow-right"></u-icon>
+              <u--input v-model="form.measureTime" disabled disabledColor="#ffffff" placeholder="请选择测量时间" inputAlign="left" :customStyle="getInputStyle('measureTime')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="体温" required prop="temperature" >
             <u--input v-model="form.temperature"  type="number" placeholder="请填写体温"
-              inputAlign="right" border="none">
+              inputAlign="left" :customStyle="getInputStyle('temperature')">
               <template #suffix>
         <up-text
           text="℃"
@@ -30,7 +36,7 @@
             </u--input>
           </u-form-item>
           <u-form-item label="备注" prop="remark"  labelPosition="top">
-            <u--textarea v-model="form.remark" placeholder="请填写备注" border="none"></u--textarea>
+            <u--textarea v-model="form.remark" placeholder="请填写备注" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
           </u-form-item>
         </u--form>
         <view class="form-btn">
@@ -102,7 +108,35 @@ rules: {
 }
 })
 const { form, queryPersonParams, queryHealthRecordParams, rules} = toRefs(data)
+// 错误字段
+const errorFields = ref([])
 
+// 输入框基础样式
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 输入框错误样式
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
 
 onLoad((option) => {
   form.value.id = option.id
@@ -242,6 +276,12 @@ function submit() {
           })
         })
         }
+      }).catch(errors => {
+        // 验证失败，记录错误字段
+        if (errors && errors.length > 0) {
+          errorFields.value = errors.map(err => err.field)
+        }
+        proxy.$modal.msgError('请填写完整信息')
       })
     }
 </script>
@@ -281,6 +321,23 @@ function submit() {
     .form-btn {
       padding-top: 16rpx;
     }
+
+    // 带箭头的输入框容器
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
   }
 }
 </style>
@@ -299,4 +356,19 @@ function submit() {
   font-weight: 500 !important;
   letter-spacing: 2rpx !important;
 }
+
+/* 强制让错误状态的输入框边框变红 */
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
 </style>

src/static/scss/global.scss

@@ -88,3 +88,162 @@
       }
     }
   }
+
+  // ==================== 表单样式（参考PC端Element UI）====================
+  
+  // 表单容器样式
+  .form-view {
+    // 表单项间距
+    :deep(.u-form-item) {
+      margin-bottom: -20rpx;
+      position: relative;
+    }
+    
+    // 优化必填标识
+    :deep(.u-form-item__body__left__content__required) {
+      color: #f56c6c !important;
+      font-size: 32rpx !important;
+      margin-right: 8rpx !important;
+      font-weight: 500 !important;
+    }
+    
+    // label文字完整显示
+    :deep(.u-form-item__body__left__content__label) {
+      min-width: 160rpx !important;
+      flex-shrink: 0 !important;
+    }
+    
+    // 错误提示文字隐藏，只通过边框变红提示
+    :deep(.u-form-item__body__right__message) {
+      display: none !important;
+    }
+    
+    // 统一输入框样式（参考PC端）
+    :deep(.u--input) {
+      background: #ffffff !important;
+      border: 2rpx solid #dcdfe6 !important;
+      border-radius: 8rpx !important;
+      transition: all 0.3s ease !important;
+    }
+    
+    :deep(.form-input) {
+      background: #ffffff !important;
+      border: 2rpx solid #dcdfe6 !important;
+      border-radius: 8rpx !important;
+      padding: 0 24rpx !important;
+      padding-right: 80rpx !important;
+      height: 68rpx !important;
+      transition: all 0.3s ease !important;
+    }
+    
+    // 错误状态输入框边框变红 - 使用多种可能的类名
+    :deep(.u-form-item--error),
+    :deep(.is-error),
+    :deep([aria-invalid="true"]) {
+      .form-input,
+      .u--input,
+      .u-input,
+      .u-input__content__field-wrapper {
+        border: 2rpx solid #f56c6c !important;
+        background: #fef0f0 !important;
+      }
+    }
+    
+    // 通过属性选择器强制设置
+    :deep(.u--input[class*="form-input"]) {
+      border: 2rpx solid #dcdfe6 !important;
+    }
+    
+    :deep(.u-form-item--error .u--input[class*="form-input"]),
+    :deep(.is-error .u--input[class*="form-input"]) {
+      border: 2rpx solid #f56c6c !important;
+      background: #fef0f0 !important;
+    }
+    
+    // 统一备注框样式（参考PC端）
+    :deep(.form-textarea) {
+      background: #ffffff !important;
+      border: 2rpx solid #dcdfe6 !important;
+      border-radius: 8rpx !important;
+      padding: 20rpx !important;
+      min-height: 160rpx !important;
+      transition: all 0.3s ease !important;
+      
+      &:focus {
+        border-color: #409eff !important;
+      }
+    }
+    
+    // 错误状态备注框变红
+    :deep(.u-form-item--error .form-textarea) {
+      border-color: #f56c6c !important;
+    }
+    
+    // 下拉箭头放到输入框内部右侧（仅在有图标时生效）
+    :deep(.u-form-item__body__right:has(.u-icon)) {
+      position: absolute !important;
+      right: 24rpx !important;
+      top: 50% !important;
+      transform: translateY(-50%) !important;
+      z-index: 10 !important;
+      pointer-events: none !important;
+    }
+    
+    // 下拉箭头在输入框右侧内部
+    :deep(.u-form-item__body__right .u-icon) {
+      color: #c0c4cc !important;
+      font-size: 28rpx !important;
+    }
+    
+    // 带箭头的下拉选择框（使用 class="with-arrow"）
+    :deep(.with-arrow) {
+      position: relative;
+      cursor: pointer;
+      
+      // 增加点击区域提示
+      .u-form-item__body {
+        cursor: pointer;
+      }
+      
+      // disabled 输入框允许点击穿透
+      .u--input {
+        pointer-events: none !important;
+      }
+      
+      .u-input {
+        pointer-events: none !important;
+      }
+      
+      .u-input__content {
+        pointer-events: none !important;
+      }
+      
+      .u-input__content__field-wrapper {
+        pointer-events: none !important;
+      }
+      
+      .u-input__content__field-wrapper__field {
+        pointer-events: none !important;
+      }
+      
+      // 用伪元素添加箭头，不影响布局宽度
+      &::after {
+        content: '▼';
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
+    
+    // 统一图标颜色
+    :deep(.u-icon) {
+      color: #909399 !important;
+    }
+  }
+
+