diff --git a/src/pages/common/template/addEdit.vue b/src/pages/common/template/addEdit.vue
new file mode 100644
index 0000000..78ce421
--- /dev/null
+++ b/src/pages/common/template/addEdit.vue
@@ -0,0 +1,746 @@
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ▼
+
+
+
+
+
+
+ ▼
+
+
+
+
+
+
+ ▼
+
+
+
+
+
+ 已选择的岗位:
+
+
+ {{ name }}
+
+
+
+
+
+
+
+ ▼
+
+
+
+
+
+ 已选择的角色:
+
+
+ {{ name }}
+
+
+
+
+
+
+
+ ▼
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/health/activity/addEdit.vue b/src/pages/health/activity/addEdit.vue
index b0df681..2c8067e 100644
--- a/src/pages/health/activity/addEdit.vue
+++ b/src/pages/health/activity/addEdit.vue
@@ -9,45 +9,37 @@
{{ title}}
-
+ inputAlign="left" :customStyle="getInputStyle('name')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('typeName')">
+ inputAlign="left" :customStyle="getInputStyle('place')">
+ inputAlign="left" :customStyle="getInputStyle('partner')">
-
-
-
+
+
-
-
-
+
+
-
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('activityVolumeName')">
+ inputAlign="left" :customStyle="getInputStyle('totalCost')">
-
+
-
+
-
+
-
+
@@ -120,6 +112,36 @@ const flag = ref('add')
const activityVolumeList = ref([])
const showActivityVolume = 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: {
id: null,
@@ -147,7 +169,6 @@ rules: {
place: [{ required: true, message: '活动地点不能为空', trigger: ['change', 'blur'] }],
partner: [{ required: true, message: '成员不能为空', trigger: ['change', 'blur'] }],
startTime: [{ required: true, message: '开始时间不能为空', trigger: ['change', 'blur'] }],
- // endTime: [{ required: true, message: '结束时间不能为空', trigger: ['change', 'blur'] }],
activityVolumeName: [{ required: true, message: '活动量不能为空', trigger: ['change', 'blur'] }],
typeName: [{ required: true, message: '类型不能为空', trigger: ['change', 'blur'] }],
}
@@ -261,6 +282,7 @@ function getData() {
function submit() {
+ errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
@@ -290,7 +312,13 @@ function submit() {
})
})
}
- })
+ }).catch((errors) => {
+ // 记录验证失败的字段
+ if (errors && Array.isArray(errors)) {
+ errorFields.value = errors.map(err => err.field || err.prop)
+ }
+ proxy.$modal.msgError('请填写完整信息')
+ })
}
@@ -347,4 +375,4 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
-
\ No newline at end of file
+
diff --git a/src/pages/health/doctorRecord/addEdit.vue b/src/pages/health/doctorRecord/addEdit.vue
index 1b6a8aa..ac5f112 100644
--- a/src/pages/health/doctorRecord/addEdit.vue
+++ b/src/pages/health/doctorRecord/addEdit.vue
@@ -9,47 +9,43 @@
{{ title}}
-
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('personName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('healthRecordName')">
+ inputAlign="left" :customStyle="getInputStyle('hospitalName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('typeName')">
+ inputAlign="left" :customStyle="getInputStyle('departments')">
+ inputAlign="left" :customStyle="getInputStyle('doctor')">
-
-
-
+
+
+ inputAlign="left" :customStyle="getInputStyle('partner')">
+ inputAlign="left" :customStyle="getInputStyle('totalCost')">
-
+
-
+
-
-
+
+
-
+
@@ -115,6 +111,55 @@ const personList = ref([])
const typeList = ref([])
const showType = ref(false)
const flag = ref('add')
+
+// 表单验证错误字段
+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 textAreaBaseStyle = {
+ background: '#ffffff',
+ border: '2rpx solid #dcdfe6',
+}
+
+// 输入框错误样式
+const textAreaErrorStyle = {
+ background: '#fef0f0',
+ border: '2rpx solid #f56c6c',
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+ return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+
+// 根据字段名获取输入框样式
+const getTextAreaStyle = (field) => {
+ return errorFields.value.includes(field) ? textAreaErrorStyle : textAreaBaseStyle
+}
+
+
const data = reactive({
form: {
id: null,
@@ -307,6 +352,7 @@ function datePickConfirm(e) {
datePickShow.value = false
}
function submit() {
+ errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
@@ -336,15 +382,17 @@ function submit() {
})
})
}
- })
+ }).catch((errors) => {
+ // 记录验证失败的字段
+ if (errors && Array.isArray(errors)) {
+ errorFields.value = errors.map(err => err.field || err.prop)
+ }
+ proxy.$modal.msgError('请填写完整信息')
+ })
}
\ No newline at end of file
+
diff --git a/src/pages/health/healthRecord/addEdit.vue b/src/pages/health/healthRecord/addEdit.vue
index a69d71d..799d2c5 100644
--- a/src/pages/health/healthRecord/addEdit.vue
+++ b/src/pages/health/healthRecord/addEdit.vue
@@ -6,66 +6,55 @@
title="健康档案"
>
-
- {{ title}}
-
-
-
-
-
-
-
-
+
+ {{ title}}
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
+
-
+ inputAlign="left" :customStyle="getInputStyle('stateName')">
-
-
-
+
+
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('etiologyName')">
-
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
-
-
-
+
+
+
+
-
@@ -122,6 +111,53 @@ const showEtiology = ref(false)
const rehabilitationTimeShow = 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 textAreaBaseStyle = {
+ background: '#ffffff',
+ border: '2rpx solid #dcdfe6',
+}
+
+// 输入框错误样式
+const textAreaErrorStyle = {
+ background: '#fef0f0',
+ border: '2rpx solid #f56c6c',
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+ return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+
+// 根据字段名获取输入框样式
+const getTextAreaStyle = (field) => {
+ return errorFields.value.includes(field) ? textAreaErrorStyle : textAreaBaseStyle
+}
+
const data = reactive({
form: {
id: null,
@@ -340,6 +376,7 @@ function rehabilitationTimeConfirm(e) {
}
function submit() {
+ errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
updateHealthRecord(form.value).then(res => {
@@ -358,7 +395,13 @@ function submit() {
})
})
}
- })
+ }).catch((errors) => {
+ // 记录验证失败的字段
+ if (errors && Array.isArray(errors)) {
+ errorFields.value = errors.map(err => err.field || err.prop)
+ }
+ proxy.$modal.msgError('请填写完整信息')
+ })
}
@@ -415,4 +458,4 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
-
\ No newline at end of file
+
diff --git a/src/pages/health/heightWeightRecord/addEdit.vue b/src/pages/health/heightWeightRecord/addEdit.vue
index 72aee1d..2768f73 100644
--- a/src/pages/health/heightWeightRecord/addEdit.vue
+++ b/src/pages/health/heightWeightRecord/addEdit.vue
@@ -9,20 +9,18 @@
{{ title}}
-
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('personName')">
-
-
-
+
+
+ inputAlign="left" :customStyle="getInputStyle('height')">
-
+
-
+
@@ -80,6 +78,37 @@ const datePickShow = ref(false)
const showPerson = ref(false)
const title = ref("身高体重记录")
const personList = ref([])
+
+// 表单验证错误字段
+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: {
id: null,
@@ -101,7 +130,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)
@@ -147,14 +178,7 @@ function handlePerson() {
function handlePersonConfirm(e) {
form.value.personName = e.value[0].name
form.value.personId = e.value[0].id
- form.value.healthRecordName = ''
- form.value.healthRecordId = ''
- queryHealthRecordParams.value.personId=e.value[0].id
- listHealthRecord(queryHealthRecordParams.value).then((response) => {
- healthRecordList.value = [response.rows]
- showPerson.value = false
-})
-
+ showPerson.value = false
}
function handlePersonCancel() {
showPerson.value = false
@@ -168,6 +192,7 @@ 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 => {
@@ -186,7 +211,13 @@ function submit() {
})
})
}
- })
+ }).catch((errors) => {
+ // 记录验证失败的字段
+ if (errors && Array.isArray(errors)) {
+ errorFields.value = errors.map(err => err.field || err.prop)
+ }
+ proxy.$modal.msgError('请填写完整信息')
+ })
}
@@ -243,4 +274,4 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
-
\ No newline at end of file
+
diff --git a/src/pages/health/marRecord/addEdit.vue b/src/pages/health/marRecord/addEdit.vue
index 737311c..39de214 100644
--- a/src/pages/health/marRecord/addEdit.vue
+++ b/src/pages/health/marRecord/addEdit.vue
@@ -9,54 +9,46 @@
{{ title}}
-
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('personName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('healthRecordName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('marTypeName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('medicalName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('resourceName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('placeName')">
-
-
-
+
+
+ inputAlign="left" :customStyle="getInputStyle('dosage')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('unitName')">
-
+
@@ -126,6 +118,36 @@ const showPlace = ref(false)
const unitList = ref([])
const showUnit = 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: {
id: null,
@@ -143,7 +165,8 @@ form: {
personId: null,
resource: '1',
place: '1',
- resourceName: '医院开药',
+ unitName: null,
+ resourceName: '医院开药',
placeName: '家中'
},
queryPersonParams: {
@@ -166,10 +189,10 @@ rules: {
personName: [{ required: true, message: '人员不能为空', trigger: ['change', 'blur'] }],
medicalName: [{ required: true, message: '药品名称不能为空', trigger: ['change', 'blur'] }],
marTypeName: [{ required: true, message: '用药类型不能为空', trigger: ['change', 'blur'] }],
- resource: [{ required: true, message: '药品来源不能为空', trigger: ['change', 'blur'] }],
- place: [{ required: true, message: '用药地点不能为空', trigger: ['change', 'blur'] }],
+ resourceName: [{ required: true, message: '药品来源不能为空', trigger: ['change', 'blur'] }],
+ placeName: [{ required: true, message: '用药地点不能为空', trigger: ['change', 'blur'] }],
+ unitName: [{ required: true, message: '用药单位不能为空', trigger: ['change', 'blur'] }],
dosage: [{ type: 'number', required: true, message: '用药剂量不能为空', trigger: ['change', 'blur'] }],
-
dosingTime: [{ required: true, message: '用药时间不能为空', trigger: ['change', 'blur'] }]
}
})
@@ -443,6 +466,7 @@ function datePickConfirm(e) {
datePickShow.value = false
}
function submit() {
+ errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
@@ -473,7 +497,13 @@ function submit() {
})
})
}
- })
+ }).catch((errors) => {
+ // 记录验证失败的字段
+ if (errors && Array.isArray(errors)) {
+ errorFields.value = errors.map(err => err.field || err.prop)
+ }
+ proxy.$modal.msgError('请填写完整信息')
+ })
}
@@ -530,4 +560,4 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
-
\ No newline at end of file
+
diff --git a/src/pages/health/medicineBasic/addEdit.vue b/src/pages/health/medicineBasic/addEdit.vue
index e3fe404..41db134 100644
--- a/src/pages/health/medicineBasic/addEdit.vue
+++ b/src/pages/health/medicineBasic/addEdit.vue
@@ -9,115 +9,106 @@
{{ title}}
-
+ inputAlign="left" :customStyle="getInputStyle('name')">
+ inputAlign="left" :customStyle="getInputStyle('shortName')">
+ inputAlign="left" :customStyle="getInputStyle('brand')">
+ inputAlign="left" :customStyle="getInputStyle('packaging')">
+ inputAlign="left" :customStyle="getInputStyle('manufacturers')">
+ inputAlign="left" :customStyle="getInputStyle('code')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('dosageFormName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('treatmentTypeName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('classificationName')">
-
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('categoryName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('packageUnitName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('isImportName')">
+ inputAlign="left" :customStyle="getInputStyle('specifications')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('unitName')">
+ inputAlign="left" :customStyle="getInputStyle('content')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('contentUnitName')">
+ inputAlign="left" :customStyle="getInputStyle('address')">
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -183,6 +174,29 @@ const showUnit = ref(false)
const contentUnitList = ref([])
const showContentUnit = ref(false)
+// 错误字段
+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: {
@@ -465,7 +479,10 @@ function handleDosageForm() {
showContentUnit.value = false
}
function submit() {
- proxy.$refs['uForm'].validate().then(() => {
+ // 清空错误字段
+ errorFields.value = []
+
+ proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
updateMedicineBasic(form.value).then(res => {
@@ -495,6 +512,12 @@ function submit() {
})
})
}
+ }).catch(errors => {
+ // 验证失败,记录错误字段
+ if (errors && errors.length > 0) {
+ errorFields.value = errors.map(err => err.field)
+ }
+ proxy.$modal.msgError('请填写完整信息')
})
}
diff --git a/src/pages/health/medicineStockIn/addEdit.vue b/src/pages/health/medicineStockIn/addEdit.vue
index 10212f9..86ef478 100644
--- a/src/pages/health/medicineStockIn/addEdit.vue
+++ b/src/pages/health/medicineStockIn/addEdit.vue
@@ -9,90 +9,82 @@
{{ title}}
-
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('marTypeName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('medicineName')">
+ inputAlign="left" :customStyle="getInputStyle('code')">
+ inputAlign="left" :customStyle="getInputStyle('quantity')">
+ inputAlign="left" :customStyle="getInputStyle('totalCount')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('stateName')">
-
-
-
+
+
-
-
-
+
+
-
-
-
+
+
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('packageUnitName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('unitName')">
+ inputAlign="left" :customStyle="getInputStyle('usedCount')">
+ inputAlign="left" :customStyle="getInputStyle('leftCount')">
+ inputAlign="left" :customStyle="getInputStyle('ageWeight')">
+ inputAlign="left" :customStyle="getInputStyle('purchasePrice')">
+ inputAlign="left" :customStyle="getInputStyle('totalPrice')">
+ inputAlign="left" :customStyle="getInputStyle('purchaseAddress')">
-
+
-
+
@@ -174,6 +166,30 @@ const showPackageUnit = ref(false)
const unitList = ref([])
const showUnit = ref(false)
+// 错误字段
+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,
@@ -476,7 +492,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) {
if(flag.value==null){
updateMedicineStockIn(form.value).then(res => {
@@ -505,6 +524,12 @@ function submit() {
})
})
}
+ }).catch(errors => {
+ // 验证失败,记录错误字段
+ if (errors && errors.length > 0) {
+ errorFields.value = errors.map(err => err.field)
+ }
+ proxy.$modal.msgError('请填写完整信息')
})
}
diff --git a/src/pages/health/milkPowderRecord/addEdit.vue b/src/pages/health/milkPowderRecord/addEdit.vue
index a2d1634..87a9ebd 100644
--- a/src/pages/health/milkPowderRecord/addEdit.vue
+++ b/src/pages/health/milkPowderRecord/addEdit.vue
@@ -9,20 +9,18 @@
{{ title}}
-
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('personName')">
-
-
-
+
+
+ inputAlign="left" :customStyle="getInputStyle('consumption')">
+ inputAlign="left" :customStyle="getInputStyle('milkPowderBrand')">
-
+
@@ -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('请填写完整信息')
})
}
diff --git a/src/pages/health/person/addEdit.vue b/src/pages/health/person/addEdit.vue
index 60b7d54..c53d020 100644
--- a/src/pages/health/person/addEdit.vue
+++ b/src/pages/health/person/addEdit.vue
@@ -9,38 +9,35 @@
{{ title}}
-
+ inputAlign="left" :customStyle="getInputStyle('name')" >
+ inputAlign="left" :customStyle="getInputStyle('nickName')">
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('typeName')">
-
-
-
+
+
-
+
-
+ inputAlign="left" :customStyle="getInputStyle('sexName')">
+ inputAlign="left">
+ inputAlign="left" >
+ inputAlign="left">
-
-
+
+
@@ -121,6 +118,7 @@ form: {
identityCard: null,
ranking: 0
},
+
rules: {
name: [{ required: true, message: '姓名不能为空', trigger:['change', 'blur'] }],
nickName: [{ required: true, message: '昵称不能为空', trigger: ['change', 'blur'] }],
@@ -129,6 +127,35 @@ rules: {
sexName: [{ required: true, message: '性别不能为空', trigger: ['change', 'blur'] }],
}
})
+// 表单验证错误字段
+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 { form, rules} = toRefs(data)
@@ -225,6 +252,7 @@ function birthdayConfirm(e) {
function submit() {
+ errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
updatePerson(form.value).then(res => {
@@ -243,8 +271,15 @@ function submit() {
})
})
}
- })
+ }).catch((errors) => {
+ // 记录验证失败的字段
+ if (errors && Array.isArray(errors)) {
+ errorFields.value = errors.map(err => err.field || err.prop)
}
+ proxy.$modal.msgError('请填写完整信息')
+ })
+ }
+