fix: 添加页面统一修改。

src/pages/health/milkPowderRecord/addEdit.vue

@@ -9,20 +9,18 @@
     <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' }">
-          <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
+          <u-form-item label="人员姓名" prop="personName" required class="with-arrow" @click="handlePerson">
             <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
-              inputAlign="right" border="none"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
           </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>
-          <u-icon slot="right" name="arrow-right"></u-icon>
+          <u-form-item label="吃奶时间" prop="sucklesTime" required class="with-arrow" @click="selectDate()">
+            <u--input v-model="form.sucklesTime" disabled disabledColor="#ffffff" placeholder="请选择吃奶时间" inputAlign="left" :customStyle="getInputStyle('sucklesTime')"></u--input>
           </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="毫升"
@@ -32,11 +30,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" autoHeight inputAlign="right" count
-              maxlength="2000" style="padding:18rpx 0;"></u--textarea>
+            <u--textarea v-model="form.remark" placeholder="请填写备注" autoHeight inputAlign="left" count
+              maxlength="2000" height="120" style="border: 2rpx solid #dcdfe6 !important; min-height: 120rpx;"></u--textarea>
           </u-form-item>
         </u--form>
         <view class="form-btn">
@@ -70,6 +68,31 @@ const datePickShow = ref(false)
 const showPerson = ref(false)
 const title = ref("吃奶记录")
 const personList = ref([])
+
+// 错误字段
+const errorFields = ref([])
+
+// 输入框基础样式
+const inputBaseStyle = {
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '16rpx 20rpx',
+  backgroundColor: '#ffffff'
+}
+
+// 输入框错误样式
+const inputErrorStyle = {
+  border: '2rpx solid #ff4d4f',
+  borderRadius: '8rpx',
+  padding: '16rpx 20rpx',
+  backgroundColor: '#fff2f0'
+}
+
+// 获取输入框样式
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+
 const data = reactive({
 form: {
   id: null,
@@ -92,7 +115,8 @@ queryPersonParams: {
 },
 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)
@@ -159,7 +183,10 @@ function datePickConfirm(e) {
       datePickShow.value = false
   }
 function submit() {
-      proxy.$refs['uForm'].validate().then(() => {
+  // 清空错误字段
+  errorFields.value = []
+  
+  proxy.$refs['uForm'].validate().then(() => {
         if (form.value.id != null) {
           updateMilkPowderRecord(form.value).then(res => {
             proxy.$refs['uToast'].show({
@@ -177,6 +204,12 @@ function submit() {
           })
         })
         }
+      }).catch(errors => {
+        // 验证失败，记录错误字段
+        if (errors && errors.length > 0) {
+          errorFields.value = errors.map(err => err.field)
+        }
+        proxy.$modal.msgError('请填写完整信息')
       })
     }
 </script>