qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
tianyongbao
2026-02-08 14:27:39 +08:00
parent 98fd350b9e
commit 74b1dbd0af
12 changed files with 1684 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
src/pages/health/activity/addEdit.vue
View File

@@ -3,62 +3,76 @@
<view class="section"> <view class="section">
<view class="section-title">{{ title}}</view> <view class="section-title">{{ title}}</view>
<view class="form-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="请填写活动名称"
inputAlign="right" border="none"></u--input> inputAlign="left" :customStyle="getInputStyle('name')"></u--input>
</u-form-item> </u-form-item>
<u-form-item label="类型" prop="typeName" required @click="handleType"> <u-form-item label="类型" prop="typeName" required @click="handleType">
<view class="input-with-arrow">
<u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型" <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>
</u-form-item> </view>
<u-form-item label="活动地点" required prop="place" > </u-form-item>
<u--input v-model="form.place" placeholder="请填写活动地点" <u-form-item label="活动地点" required prop="place" >
inputAlign="right" border="none"></u--input> <u--input v-model="form.place" placeholder="请填写活动地点"
</u-form-item> inputAlign="left" :customStyle="getInputStyle('place')"></u--input>
<u-form-item label="成员" required prop="partner" > </u-form-item>
<u--input v-model="form.partner" placeholder="请填写成员" <u-form-item label="成员" required prop="partner" >
inputAlign="right" border="none"></u--input> <u--input v-model="form.partner" placeholder="请填写成员"
</u-form-item> inputAlign="left" :customStyle="getInputStyle('partner')"></u--input>
<u-form-item label="开始时间" prop="startTime" required @click="selectStartTime()"> </u-form-item>
<u--input v-model="form.startTime" disabled disabledColor="#ffffff" placeholder="请选择开始时间" inputAlign="right" border="none"></u--input> <u-form-item label="开始时间" prop="startTime" required @click="selectStartTime()">
<u-icon slot="right" name="arrow-right"></u-icon> <view class="input-with-arrow">
<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>
<u-form-item label="结束时间" prop="endTime" @click="selectEndTime()"> <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>
<!-- <u-form-item label="活动时长" prop="exerciseTime" > <!-- <u-form-item label="活动时长" prop="exerciseTime" >
<u--input v-model="form.exerciseTime" placeholder="请填写活动时长" <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> -->
<u-form-item label="活动量" prop="activityVolumeName" required @click="handleActivityVolume"> <u-form-item label="活动量" prop="activityVolumeName" required @click="handleActivityVolume">
<view class="input-with-arrow">
<u--input v-model="form.activityVolumeName" disabled disabledColor="#ffffff" placeholder="请选择活动量" <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>
</u-form-item> </view>
<u-form-item label="总费用" prop="totalCost" > </u-form-item>
<u--input v-model="form.totalCost" type="number" placeholder="请填写总费用" <u-form-item label="总费用" prop="totalCost" >
inputAlign="right" border="none"> <u--input v-model="form.totalCost" type="number" placeholder="请填写总费用"
<template #suffix> inputAlign="left" :customStyle="getInputStyle('totalCost')">
<up-text <template #suffix>
text="元" <up-text
></up-text> text="元"
</template></u--input> ></up-text>
</u-form-item> </template></u--input>
<u-form-item label="费用明细" prop="costDetail" labelPosition="top"> </u-form-item>
<u--textarea v-model="form.costDetail" placeholder="请填写费用明细" border="none" ></u--textarea> <u-form-item label="费用明细" prop="costDetail" labelPosition="top">
<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>
<u-form-item label="饮食" prop="foods" labelPosition="top"> <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>
<u-form-item label="收获" prop="harvest" labelPosition="top"> <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>
<u-form-item label="备注" prop="remark" labelPosition="top"> <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-item>
</u--form> </u--form>
<view class="form-btn"> <view class="form-btn">
@@ -67,38 +81,69 @@
</view> </view>
</view> </view>
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
<u-picker itemHeight="88" :show="showType" :columns="typeList" keyName="dictLabel" @cancel="handleTypeCancel" <u-picker itemHeight="88" :show="showType" :columns="typeList" keyName="dictLabel" @cancel="handleTypeCancel"
@confirm="handleTypeConfirm"></u-picker> @confirm="handleTypeConfirm"></u-picker>
<u-picker itemHeight="88" :show="showActivityVolume" :columns="activityVolumeList" keyName="dictLabel" @cancel="handleActivityVolumeCancel" <u-picker itemHeight="88" :show="showActivityVolume" :columns="activityVolumeList" keyName="dictLabel" @cancel="handleActivityVolumeCancel"
@confirm="handleActivityVolumeConfirm"></u-picker> @confirm="handleActivityVolumeConfirm"></u-picker>
<u-datetime-picker <u-datetime-picker
:show="startTimeShow" :show="startTimeShow"
mode="datetime" mode="datetime"
ref="startTimeRef" ref="startTimeRef"
@cancel="startTimeShow=false" @cancel="startTimeShow=false"
@confirm="startTimeConfirm" @confirm="startTimeConfirm"
itemHeight="88" itemHeight="88"
></u-datetime-picker> ></u-datetime-picker>
<u-datetime-picker <u-datetime-picker
:show="endTimeShow" :show="endTimeShow"
mode="datetime" mode="datetime"
ref="endTimeRef" ref="endTimeRef"
@cancel="endTimeShow=false" @cancel="endTimeShow=false"
@confirm="endTimeConfirm" @confirm="endTimeConfirm"
itemHeight="88" itemHeight="88"
></u-datetime-picker> ></u-datetime-picker>
</view> </view>
</template> </template>
<script setup> <script setup>
import { getActivity, addActivity, updateActivity } from '@/api/health/activity' import { getActivity, addActivity, updateActivity } from '@/api/health/activity'
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
import { getDicts } from '@/api/system/dict/data.js' import { getDicts } from '@/api/system/dict/data.js'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import {onLoad,onReady} from "@dcloudio/uni-app"; import {onLoad,onReady} from "@dcloudio/uni-app";
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！ // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue"; 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 birthdayShow = ref(false)
const title = ref("活动记录") const title = ref("活动记录")
const startTimeShow = ref(false) const startTimeShow = ref(false)
@@ -251,37 +296,46 @@ function getData() {
function submit() { function submit() {
proxy.$refs['uForm'].validate().then(() => { // 清空错误字段
if (form.value.id != null) { errorFields.value = []
if(flag.value==null){
updateActivity(form.value).then(res => { proxy.$refs['uForm'].validate().then(() => {
proxy.$refs['uToast'].show({ if (form.value.id != null) {
message: '修改成功', complete() { if(flag.value==null){
uni.navigateTo({ url: `/pages/health/activity/list` }) updateActivity(form.value).then(res => {
} proxy.$refs['uToast'].show({
}) message: '修改成功', complete() {
}) uni.navigateTo({ url: `/pages/health/activity/list` })
}else {
form.value.id == null
addActivity(form.value).then(res => {
proxy.$refs['uToast'].show({
message: '新增成功', complete() {
uni.navigateTo({ url: `/pages/health/activity/list` })
}
})
})
} }
}else {
addActivity(form.value).then(res => {
proxy.$refs['uToast'].show({
message: '新增成功', complete() {
uni.navigateTo({ url: `/pages/health/activity/list` })
}
})
}) })
})
}else {
form.value.id == null
addActivity(form.value).then(res => {
proxy.$refs['uToast'].show({
message: '新增成功', complete() {
uni.navigateTo({ url: `/pages/health/activity/list` })
} }
}) })
})
}
}else {
addActivity(form.value).then(res => {
proxy.$refs['uToast'].show({
message: '新增成功', complete() {
uni.navigateTo({ url: `/pages/health/activity/list` })
}
})
})
} }
}).catch(errors => {
// 验证失败，记录错误字段
if (errors && errors.length > 0) {
errorFields.value = errors.map(err => err.field)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -319,6 +373,23 @@ function submit() {
.form-btn { .form-btn {
padding-top: 16rpx; 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> </style>
@@ -337,4 +408,19 @@ function submit() {
font-weight: 500 !important; font-weight: 500 !important;
letter-spacing: 2rpx !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> </style>

134
src/pages/health/doctorRecord/addEdit.vue
View File

@@ -3,47 +3,55 @@
<view class="section"> <view class="section">
<view class="section-title">{{ title}}</view> <view class="section-title">{{ title}}</view>
<view class="form-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"> <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
<view class="input-with-arrow">
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员" <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>
<u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord"> <u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
<view class="input-with-arrow">
<u--input v-model="form.healthRecordName" disabled disabledColor="#ffffff" placeholder="请选择健康档案" <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>
<u-form-item label="医院名称" prop="hospitalName" required > <u-form-item label="医院名称" prop="hospitalName" required >
<u--input v-model="form.hospitalName" placeholder="请填写医院名称" <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>
<u-form-item label="就医类型" prop="typeName" required @click="handleType"> <u-form-item label="就医类型" prop="typeName" required @click="handleType">
<view class="input-with-arrow">
<u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择就医类型" <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>
<u-form-item label="科室" prop="departments" required > <u-form-item label="科室" prop="departments" required >
<u--input v-model="form.departments" placeholder="请填写科室" <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>
<u-form-item label="大夫" prop="doctor" required > <u-form-item label="大夫" prop="doctor" required >
<u--input v-model="form.doctor" placeholder="请填写大夫" <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">
<view class="input-with-arrow">
<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>
<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>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="陪同人" prop="partner" required > <u-form-item label="陪同人" prop="partner" required >
<u--input v-model="form.partner" placeholder="请填写陪同人" <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>
<u-form-item label="总费用" prop="totalCost" required > <u-form-item label="总费用" prop="totalCost" required >
<u--input v-model="form.totalCost" placeholder="请填写总费用" <u--input v-model="form.totalCost" placeholder="请填写总费用"
inputAlign="right" border="none"> inputAlign="left" :customStyle="getInputStyle('totalCost')">
<template #suffix> <template #suffix>
<up-text <up-text
text="元" text="元"
@@ -51,16 +59,16 @@
</template></u--input> </template></u--input>
</u-form-item> </u-form-item>
<u-form-item label="诊断结果" prop="diagnosis" required labelPosition="top"> <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>
<u-form-item label="处理及医嘱" prop="prescribe" required labelPosition="top"> <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>
<u-form-item label="费用明细" prop="costDetail" > <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>
<u-form-item label="备注" prop="remark" labelPosition="top"> <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-item>
</u--form> </u--form>
<view class="form-btn"> <view class="form-btn">
@@ -151,6 +159,52 @@ rules: {
}) })
const { form, queryPersonParams, queryHealthRecordParams, rules} = toRefs(data) 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) => { onLoad((option) => {
form.value.id = option.id 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> </script>
@@ -369,6 +429,23 @@ page {
.form-btn { .form-btn {
padding-top: 16rpx; 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> </style>
@@ -387,4 +464,19 @@ page {
font-weight: 500 !important; font-weight: 500 !important;
letter-spacing: 2rpx !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> </style>

140
src/pages/health/healthRecord/addEdit.vue
View File

@@ -3,48 +3,60 @@
<view class="section"> <view class="section">
<view class="section-title">{{ title}}</view> <view class="section-title">{{ title}}</view>
<view class="form-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"> <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<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="请填写档案名称"
inputAlign="right" border="none"></u--input> inputAlign="left" :customStyle="getInputStyle('name')"></u--input>
</u-form-item> </u-form-item>
<u-form-item label="类型" prop="typeName" required @click="handleType"> <u-form-item label="类型" prop="typeName" required @click="handleType">
<view class="input-with-arrow">
<u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型" <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>
<u-form-item label="档案状态" prop="stateName" required @click="handleState"> <u-form-item label="档案状态" prop="stateName" required @click="handleState">
<u--input v-model="form.stateName" disabled disabledColor="#ffffff" placeholder="请选择档案状态" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.stateName" disabled disabledColor="#ffffff" placeholder="请选择档案状态"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('stateName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="发生时间" prop="occurTime" required @click="selectOccurTime()"> <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>
<u-form-item label="发生原因" prop="etiologyName" required @click="handleEtiology"> <u-form-item label="发生原因" prop="etiologyName" required @click="handleEtiology">
<u--input v-model="form.etiologyName" disabled disabledColor="#ffffff" placeholder="请选择发生原因" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.etiologyName" disabled disabledColor="#ffffff" placeholder="请选择发生原因"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('etiologyName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="康复时间" prop="rehabilitationTime" @click="selectRehabilitationTime()"> <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>
<u-form-item label="初期症状" prop="initialSymptoms" required > <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>
<u-form-item label="中期症状" prop="mediumTermSymptoms" > <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>
<u-form-item label="后期症状" prop="laterStageSymptoms" > <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>
<!-- <u-form-item label="备注" prop="remark" labelPosition="top"> <!-- <u-form-item label="备注" prop="remark" labelPosition="top">
@@ -97,6 +109,53 @@ import dayjs from 'dayjs'
import {onLoad,onReady} from "@dcloudio/uni-app"; import {onLoad,onReady} from "@dcloudio/uni-app";
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！ // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue"; 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 occurTimeShow = ref(false)
const showPerson = ref(false) const showPerson = ref(false)
const title = ref("健康档案") const title = ref("健康档案")
@@ -331,6 +390,7 @@ function rehabilitationTimeConfirm(e) {
} }
function submit() { function submit() {
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => { proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) { if (form.value.id != null) {
updateHealthRecord(form.value).then(res => { 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> </script>
@@ -385,6 +451,23 @@ function submit() {
.form-view { .form-view {
padding: 24rpx; 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 { .form-btn {
padding-top: 16rpx; padding-top: 16rpx;
} }
@@ -406,4 +489,19 @@ function submit() {
font-weight: 500 !important; font-weight: 500 !important;
letter-spacing: 2rpx !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> </style>

102
src/pages/health/heightWeightRecord/addEdit.vue
View File

@@ -3,20 +3,25 @@
<view class="section"> <view class="section">
<view class="section-title">{{ title}}</view> <view class="section-title">{{ title}}</view>
<view class="form-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"> <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="测量时间" prop="measureTime" required @click="selectDate()"> <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>
<u-form-item label="身高" required prop="height" > <u-form-item label="身高" required prop="height" >
<u--input v-model="form.height" type="number" placeholder="请填写身高" <u--input v-model="form.height" type="number" placeholder="请填写身高"
inputAlign="right" border="none"> inputAlign="left" :customStyle="getInputStyle('height')">
<template #suffix> <template #suffix>
<up-text <up-text
text="CM" text="CM"
@@ -26,7 +31,7 @@
</u-form-item> </u-form-item>
<u-form-item label="体重" required prop="weight" > <u-form-item label="体重" required prop="weight" >
<u--input v-model="form.weight" type="number" placeholder="请填写体重过" <u--input v-model="form.weight" type="number" placeholder="请填写体重过"
inputAlign="right" border="none"> inputAlign="left" :customStyle="getInputStyle('weight')">
<template #suffix> <template #suffix>
<up-text <up-text
text="KG" text="KG"
@@ -35,7 +40,8 @@
</u--input> </u--input>
</u-form-item> </u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top"> <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-item>
</u--form> </u--form>
<view class="form-btn"> <view class="form-btn">
@@ -69,6 +75,37 @@ import dayjs from 'dayjs'
import {onLoad,onReady} from "@dcloudio/uni-app"; import {onLoad,onReady} from "@dcloudio/uni-app";
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！ // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue"; 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 datePickShow = ref(false)
const showPerson = ref(false) const showPerson = ref(false)
const title = ref("身高体重记录") const title = ref("身高体重记录")
@@ -94,7 +131,9 @@ queryPersonParams: {
}, },
rules: { rules: {
personName: [{ required: true, message: '人员不能为空', trigger: ['change', 'blur'] }], 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) const { form, queryPersonParams, rules} = toRefs(data)
@@ -161,6 +200,9 @@ function datePickConfirm(e) {
datePickShow.value = false datePickShow.value = false
} }
function submit() { function submit() {
// 清空错误字段
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => { proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) { if (form.value.id != null) {
updateHeightWeightRecord(form.value).then(res => { 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> </script>
@@ -218,6 +266,23 @@ function submit() {
.form-btn { .form-btn {
padding-top: 16rpx; 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> </style>
@@ -236,4 +301,19 @@ function submit() {
font-weight: 500 !important; font-weight: 500 !important;
letter-spacing: 2rpx !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> </style>

203
src/pages/health/marRecord/addEdit.vue
View File

@@ -3,53 +3,71 @@
<view class="section"> <view class="section">
<view class="section-title">{{ title}}</view> <view class="section-title">{{ title}}</view>
<view class="form-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"> <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord"> <u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
<u--input v-model="form.healthRecordName" disabled disabledColor="#ffffff" placeholder="请选择健康档案" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.healthRecordName" disabled disabledColor="#ffffff" placeholder="请选择健康档案"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('healthRecordName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="用药类型" prop="marTypeName" required @click="handleMarType"> <u-form-item label="用药类型" prop="marTypeName" required @click="handleMarType">
<view class="input-with-arrow">
<u--input v-model="form.marTypeName" disabled disabledColor="#ffffff" placeholder="请选择用药类型" <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>
</u-form-item> </view>
<u-form-item label="药品名称" prop="medicalName" required @click="handleMedical">
<u--input v-model="form.medicalName" disabled disabledColor="#ffffff" placeholder="请选择药品名称"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
</u-form-item> </u-form-item>
<u-form-item label="药品来源" prop="resourceName" required @click="handleResource"> <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="left" :customStyle="getInputStyle('medicalName')"></u--input>
<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="请选择药品来源" <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>
</u-form-item> </view>
<u-form-item label="用药地点" prop="placeName" required @click="handlePlace">
<u--input v-model="form.placeName" disabled disabledColor="#ffffff" placeholder="请选择用药地点"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
</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>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item> </u-form-item>
<u-form-item label="用药剂量" prop="dosage" required > <u-form-item label="用药地点" prop="placeName" required @click="handlePlace">
<u--input v-model="form.dosage" placeholder="请填写用药剂量" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.placeName" disabled disabledColor="#ffffff" placeholder="请选择用药地点"
</u-form-item> inputAlign="left" :customStyle="getInputStyle('placeName')"></u--input>
<u-form-item label="用药单位" prop="unitName" required @click="handleUnit"> <text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="用药时间" prop="dosingTime" required @click="selectDate()">
<view class="input-with-arrow">
<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--input v-model="form.dosage" placeholder="请填写用药剂量"
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="请选择用药单位" <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>
</u-form-item> </view>
<u-form-item label="备注" prop="remark" labelPosition="top"> </u-form-item>
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none"></u--textarea> <u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" inputAlign="left"
style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
</u-form-item> </u-form-item>
</u--form> </u--form>
<view class="form-btn"> <view class="form-btn">
@@ -60,28 +78,28 @@
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
<u-picker itemHeight="88" :show="showPerson" :columns="personList" keyName="name" @cancel="handlePersonCancel" <u-picker itemHeight="88" :show="showPerson" :columns="personList" keyName="name" @cancel="handlePersonCancel"
@confirm="handlePersonConfirm"></u-picker> @confirm="handlePersonConfirm"></u-picker>
<u-picker itemHeight="88" :show="showResource" :columns="resourceList" keyName="dictLabel" @cancel="handleResourceCancel" <u-picker itemHeight="88" :show="showResource" :columns="resourceList" keyName="dictLabel" @cancel="handleResourceCancel"
@confirm="handleResourceConfirm"></u-picker> @confirm="handleResourceConfirm"></u-picker>
<u-picker itemHeight="88" :show="showPlace" :columns="placeList" keyName="dictLabel" @cancel="handlePlaceCancel" <u-picker itemHeight="88" :show="showPlace" :columns="placeList" keyName="dictLabel" @cancel="handlePlaceCancel"
@confirm="handlePlaceConfirm"></u-picker> @confirm="handlePlaceConfirm"></u-picker>
<u-picker itemHeight="88" :show="showMarType" :columns="marTypeList" keyName="dictLabel" @cancel="handleMarTypeCancel" <u-picker itemHeight="88" :show="showMarType" :columns="marTypeList" keyName="dictLabel" @cancel="handleMarTypeCancel"
@confirm="handleMarTypeConfirm"></u-picker> @confirm="handleMarTypeConfirm"></u-picker>
<u-picker itemHeight="88" :show="showHealthRecord" :columns="healthRecordList" keyName="name" @cancel="handHealthRecordCancel" <u-picker itemHeight="88" :show="showHealthRecord" :columns="healthRecordList" keyName="name" @cancel="handHealthRecordCancel"
@confirm="handHealthRecordConfirm"></u-picker> @confirm="handHealthRecordConfirm"></u-picker>
<u-picker itemHeight="88" :show="showMedical" :columns="medicalList" keyName="shortNameBrandPackaging" @cancel="handleMedicalCancel" <u-picker itemHeight="88" :show="showMedical" :columns="medicalList" keyName="shortNameBrandPackaging" @cancel="handleMedicalCancel"
@confirm="handleMedicalConfirm"></u-picker> @confirm="handleMedicalConfirm"></u-picker>
<u-picker itemHeight="88" :show="showUnit" :columns="unitList" keyName="dictLabel" @cancel="handleUnitCancel" <u-picker itemHeight="88" :show="showUnit" :columns="unitList" keyName="dictLabel" @cancel="handleUnitCancel"
@confirm="handleUnitConfirm"></u-picker> @confirm="handleUnitConfirm"></u-picker>
<u-datetime-picker <u-datetime-picker
:show="datePickShow" :show="datePickShow"
mode="datetime" mode="datetime"
ref="dosingTimeRef" ref="dosingTimeRef"
@cancel="datePickShow=false" @cancel="datePickShow=false"
@confirm="datePickConfirm" @confirm="datePickConfirm"
itemHeight="88" itemHeight="88"
></u-datetime-picker> ></u-datetime-picker>
</view> </view>
</template> </template>
@@ -91,11 +109,41 @@ import { listPerson, getPerson } from '@/api/health/person'
import { listHealthRecord } from '@/api/health/healthRecord' import { listHealthRecord } from '@/api/health/healthRecord'
import { listMedicineBasic, getMedicineBasic } from '@/api/health/medicineBasic' import { listMedicineBasic, getMedicineBasic } from '@/api/health/medicineBasic'
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
import { getDicts } from '@/api/system/dict/data.js' import { getDicts } from '@/api/system/dict/data.js'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import {onLoad,onReady} from "@dcloudio/uni-app"; import {onLoad,onReady} from "@dcloudio/uni-app";
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue"; 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 datePickShow = ref(false)
const showPerson = ref(false) const showPerson = ref(false)
const flag = ref('add') const flag = ref('add')
@@ -161,8 +209,8 @@ rules: {
marTypeName: [{ required: true, message: '用药类型不能为空', trigger: ['change', 'blur'] }], marTypeName: [{ required: true, message: '用药类型不能为空', trigger: ['change', 'blur'] }],
resource: [{ required: true, message: '药品来源不能为空', trigger: ['change', 'blur'] }], resource: [{ required: true, message: '药品来源不能为空', trigger: ['change', 'blur'] }],
place: [{ 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'] }] dosingTime: [{ required: true, message: '用药时间不能为空', trigger: ['change', 'blur'] }]
} }
}) })
@@ -436,6 +484,9 @@ function datePickConfirm(e) {
datePickShow.value = false datePickShow.value = false
} }
function submit() { function submit() {
// 清空错误字段
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => { proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) { if (form.value.id != null) {
if(flag.value==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> </script>
@@ -505,6 +562,23 @@ function submit() {
.form-btn { .form-btn {
padding-top: 16rpx; 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> </style>
@@ -523,4 +597,19 @@ function submit() {
font-weight: 500 !important; font-weight: 500 !important;
letter-spacing: 2rpx !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> </style>

179
src/pages/health/medicineBasic/addEdit.vue
View File

@@ -3,108 +3,131 @@
<view class="section"> <view class="section">
<view class="section-title">{{ title}}</view> <view class="section-title">{{ title}}</view>
<view class="form-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-form-item label="药品全称" prop="name" required >
<u--input v-model="form.name" placeholder="请填写药品全称" <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>
<u-form-item label="药品简称" prop="shortName" required > <u-form-item label="药品简称" prop="shortName" required >
<u--input v-model="form.shortName" placeholder="请填写药品简称" <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>
<u-form-item label="品牌" prop="brand" required > <u-form-item label="品牌" prop="brand" required >
<u--input v-model="form.brand" placeholder="请填写品牌" <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>
<u-form-item label="药品包装" prop="packaging" required > <u-form-item label="药品包装" prop="packaging" required >
<u--input v-model="form.packaging" placeholder="请填写药品包装" <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>
<u-form-item label="生产厂家" prop="manufacturers" > <u-form-item label="生产厂家" prop="manufacturers" >
<u--input v-model="form.manufacturers" placeholder="请填写生产厂家" <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>
<u-form-item label="药品编码" prop="code" > <u-form-item label="药品编码" prop="code" >
<u--input v-model="form.code" placeholder="请填写药品编码" <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>
<u-form-item label="药品剂型" prop="dosageFormName" @click="handleDosageForm"> <u-form-item label="药品剂型" prop="dosageFormName" @click="handleDosageForm">
<u--input v-model="form.dosageFormName" disabled disabledColor="#ffffff" placeholder="请选择药品剂型" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.dosageFormName" disabled disabledColor="#ffffff" placeholder="请选择药品剂型"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('dosageFormName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="治疗类型" prop="treatmentTypeName" @click="handleTreatmentType"> <u-form-item label="治疗类型" prop="treatmentTypeName" @click="handleTreatmentType">
<u--input v-model="form.treatmentTypeName" disabled disabledColor="#ffffff" placeholder="请选择治疗类型" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.treatmentTypeName" disabled disabledColor="#ffffff" placeholder="请选择治疗类型"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('treatmentTypeName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="药品分类" prop="classificationName" @click="handleClassification"> <u-form-item label="药品分类" prop="classificationName" @click="handleClassification">
<u--input v-model="form.classificationName" disabled disabledColor="#ffffff" placeholder="请选择药品分类" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.classificationName" disabled disabledColor="#ffffff" placeholder="请选择药品分类"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('classificationName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="类别" prop="categoryName" @click="handleCategory"> <u-form-item label="类别" prop="categoryName" @click="handleCategory">
<u--input v-model="form.categoryName" disabled disabledColor="#ffffff" placeholder="请选择类别" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.categoryName" disabled disabledColor="#ffffff" placeholder="请选择类别"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('categoryName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="包装单位" prop="packageUnitName" @click="handlePackageUnit"> <u-form-item label="包装单位" prop="packageUnitName" @click="handlePackageUnit">
<u--input v-model="form.packageUnitName" disabled disabledColor="#ffffff" placeholder="请选择包装单位" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.packageUnitName" disabled disabledColor="#ffffff" placeholder="请选择包装单位"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('packageUnitName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="是否进口" prop="isImportName" @click="handleIsImport"> <u-form-item label="是否进口" prop="isImportName" @click="handleIsImport">
<u--input v-model="form.isImportName" disabled disabledColor="#ffffff" placeholder="请选择是否进口" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.isImportName" disabled disabledColor="#ffffff" placeholder="请选择是否进口"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('isImportName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="规格" prop="specifications" > <u-form-item label="规格" prop="specifications" >
<u--input v-model="form.specifications" placeholder="请填写规格" <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>
<u-form-item label="规格单位" prop="unitName" @click="handleUnit"> <u-form-item label="规格单位" prop="unitName" @click="handleUnit">
<u--input v-model="form.unitName" disabled disabledColor="#ffffff" placeholder="请选择规格单位" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.unitName" disabled disabledColor="#ffffff" placeholder="请选择规格单位"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('unitName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="单个含量" prop="content" > <u-form-item label="单个含量" prop="content" >
<u--input v-model="form.content" placeholder="请填写单个含量" <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>
<u-form-item label="含量单位" prop="contentUnitName" @click="handleContentUnit"> <u-form-item label="含量单位" prop="contentUnitName" @click="handleContentUnit">
<u--input v-model="form.contentUnitName" disabled disabledColor="#ffffff" placeholder="请选择含量单位" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.contentUnitName" disabled disabledColor="#ffffff" placeholder="请选择含量单位"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('contentUnitName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="生产地址" prop="address" > <u-form-item label="生产地址" prop="address" >
<u--input v-model="form.address" placeholder="请填写生产地址" <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>
<u-form-item label="功能主治" prop="indications" labelPosition="top"> <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>
<u-form-item label="贮藏" prop="storage" labelPosition="top"> <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>
<u-form-item label="药品成分" prop="ingredients" labelPosition="top"> <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>
<u-form-item label="用法用量" prop="usage" labelPosition="top"> <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>
<u-form-item label="性状" prop="character" labelPosition="top"> <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>
<u-form-item label="不良反应" prop="adverseReaction" labelPosition="top"> <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>
<u-form-item label="备注" prop="remark" labelPosition="top"> <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-item>
</u--form> </u--form>
<view class="form-btn"> <view class="form-btn">
@@ -142,6 +165,37 @@ import dayjs from 'dayjs'
import {onLoad,onReady} from "@dcloudio/uni-app"; import {onLoad,onReady} from "@dcloudio/uni-app";
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！ // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue"; 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 datePickShow = ref(false)
const title = ref("药品基础信息") const title = ref("药品基础信息")
const flag = ref('add') const flag = ref('add')
@@ -452,6 +506,9 @@ function handleDosageForm() {
showContentUnit.value = false showContentUnit.value = false
} }
function submit() { function submit() {
// 清空错误字段
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => { proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) { if (form.value.id != null) {
if(flag.value==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> </script>
@@ -521,6 +584,23 @@ function submit() {
.form-btn { .form-btn {
padding-top: 16rpx; 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> </style>
@@ -539,4 +619,19 @@ function submit() {
font-weight: 500 !important; font-weight: 500 !important;
letter-spacing: 2rpx !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> </style>

160
src/pages/health/medicineStockIn/addEdit.vue
View File

@@ -3,88 +3,104 @@
<view class="section"> <view class="section">
<view class="section-title">{{ title}}</view> <view class="section-title">{{ title}}</view>
<view class="form-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"> <u-form-item label="治疗类型" prop="marTypeName" @click="handleMarType">
<u--input v-model="form.marTypeName" disabled disabledColor="#ffffff" placeholder="请选择治疗类型" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.marTypeName" disabled disabledColor="#ffffff" placeholder="请选择治疗类型"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('marTypeName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="药品名称" prop="medicineName" required @click="handleMedical"> <u-form-item label="药品名称" prop="medicineName" required @click="handleMedical">
<u--input v-model="form.medicineName" disabled disabledColor="#ffffff" placeholder="请选择药品名称" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.medicineName" disabled disabledColor="#ffffff" placeholder="请选择药品名称"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('medicineName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="入库编号" prop="code" required > <u-form-item label="入库编号" prop="code" required >
<u--input v-model="form.code" placeholder="请填写入库编号" <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>
<u-form-item label="入库数量" prop="quantity" required > <u-form-item label="入库数量" prop="quantity" required >
<u--input v-model="form.quantity" @change="handleQuantityChange" placeholder="请填写入库数量" <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>
<u-form-item label="规格总数" prop="totalCount" required > <u-form-item label="规格总数" prop="totalCount" required >
<u--input v-model="form.totalCount" readonly placeholder="请填写规格总数" <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>
<u-form-item label="使用状态" prop="stateName" required @click="handleState"> <u-form-item label="使用状态" prop="stateName" required @click="handleState">
<u--input v-model="form.stateName" disabled disabledColor="#ffffff" placeholder="请选择使用状态" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.stateName" disabled disabledColor="#ffffff" placeholder="请选择使用状态"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('stateName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="购买时间" prop="purchaseDate" @click="selectDate()"> <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>
<u-form-item label="生产日期" prop="productionDate" @click="selectProductionDate()"> <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>
<u-form-item label="过期日期" prop="expiringDate" @click="selectExpiringDate()"> <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>
<u-form-item label="包装单位" prop="packageUnitName" @click="handlePackageUnit"> <u-form-item label="包装单位" prop="packageUnitName" @click="handlePackageUnit">
<u--input v-model="form.packageUnitName" disabled disabledColor="#ffffff" placeholder="请选择包装单位" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.packageUnitName" disabled disabledColor="#ffffff" placeholder="请选择包装单位"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('packageUnitName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="规格单位" prop="unitName" @click="handleUnit"> <u-form-item label="规格单位" prop="unitName" @click="handleUnit">
<u--input v-model="form.unitName" disabled disabledColor="#ffffff" placeholder="请选择规格单位" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.unitName" disabled disabledColor="#ffffff" placeholder="请选择规格单位"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('unitName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="已使用数量" prop="usedCount" > <u-form-item label="已使用数量" prop="usedCount" >
<u--input v-model="form.usedCount" placeholder="请填写已使用数量" <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>
<u-form-item label="剩余数量" prop="leftCount" > <u-form-item label="剩余数量" prop="leftCount" >
<u--input v-model="form.leftCount" placeholder="请填写剩余数量" <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>
<u-form-item label="年龄体重" prop="ageWeight" > <u-form-item label="年龄体重" prop="ageWeight" >
<u--input v-model="form.ageWeight" placeholder="请填写年龄体重" <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>
<u-form-item label="药品单价" prop="purchasePrice" > <u-form-item label="药品单价" prop="purchasePrice" >
<u--input v-model="form.purchasePrice" placeholder="请填写药品单价" <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>
<u-form-item label="药品总价" prop="totalPrice" > <u-form-item label="药品总价" prop="totalPrice" >
<u--input v-model="form.totalPrice" placeholder="请填写药品总价" <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>
<u-form-item label="购买地址" prop="purchaseAddress" labelPosition="top"> <u-form-item label="购买地址" prop="purchaseAddress" labelPosition="top">
<u--input v-model="form.purchaseAddress" placeholder="请填写购买地址" <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>
<u-form-item label="医嘱" prop="usage" labelPosition="top"> <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>
<u-form-item label="备注" prop="remark" labelPosition="top"> <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-item>
</u--form> </u--form>
@@ -145,6 +161,37 @@ import dayjs from 'dayjs'
import {onLoad,onReady} from "@dcloudio/uni-app"; import {onLoad,onReady} from "@dcloudio/uni-app";
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！ // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue"; 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 datePickShow = ref(false)
const flag = ref('add') const flag = ref('add')
const title = ref("药品入库清单") const title = ref("药品入库清单")
@@ -305,11 +352,11 @@ function getData() {
getDicts('package_unit').then(result => { getDicts('package_unit').then(result => {
form.value.packageUnitName=dictStr(form.value.packageUnit, result.data) form.value.packageUnitName=dictStr(form.value.packageUnit, result.data)
}) })
// 药品来源 // 药品来源
getDicts('medical_unit').then(result => { getDicts('medical_unit').then(result => {
form.value.unitName=dictStr(form.value.unit, result.data) form.value.unitName=dictStr(form.value.unit, result.data)
}) })
// 药品来源 // 药品来源
getDicts('used_state').then(result => { getDicts('used_state').then(result => {
form.value.stateName=dictStr(form.value.state, result.data) form.value.stateName=dictStr(form.value.state, result.data)
}) })
@@ -468,6 +515,9 @@ function datePickConfirm(e) {
datePickShow.value = false datePickShow.value = false
} }
function submit() { function submit() {
// 清空错误字段
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => { proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) { if (form.value.id != null) {
if(flag.value==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> </script>
@@ -536,6 +592,23 @@ function submit() {
.form-btn { .form-btn {
padding-top: 16rpx; 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> </style>
@@ -554,4 +627,19 @@ function submit() {
font-weight: 500 !important; font-weight: 500 !important;
letter-spacing: 2rpx !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> </style>

282
src/pages/health/milkPowderRecord/addEdit.vue
View File

@@ -3,33 +3,39 @@
<view class="section"> <view class="section">
<view class="section-title">{{ title}}</view> <view class="section-title">{{ title}}</view>
<view class="form-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"> <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="吃奶时间" prop="sucklesTime" required @click="selectDate()"> <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>
<u-form-item label="吃奶量" required prop="consumption" > <u-form-item label="吃奶量" required prop="consumption" >
<u--input v-model="form.consumption" type="number" placeholder="请填写吃奶量" <u--input v-model="form.consumption" type="number" placeholder="请填写吃奶量"
inputAlign="right" border="none"> inputAlign="left" :customStyle="getInputStyle('consumption')">
<template #suffix> <template #suffix>
<up-text <up-text
text="毫升" text="毫升"
></up-text> ></up-text>
</template> </template>
</u--input> </u--input>
</u-form-item> </u-form-item>
<u-form-item label="奶粉品牌" prop="milkPowderBrand" > <u-form-item label="奶粉品牌" prop="milkPowderBrand" >
<u--input v-model="form.milkPowderBrand" placeholder="请填写奶粉品牌" <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>
<u-form-item label="备注" prop="remark" labelPosition="top"> <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-item>
</u--form> </u--form>
<view class="form-btn"> <view class="form-btn">
@@ -40,14 +46,14 @@
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
<u-picker itemHeight="88" :show="showPerson" :columns="personList" keyName="name" @cancel="handlePersonCancel" <u-picker itemHeight="88" :show="showPerson" :columns="personList" keyName="name" @cancel="handlePersonCancel"
@confirm="handlePersonConfirm"></u-picker> @confirm="handlePersonConfirm"></u-picker>
<u-datetime-picker <u-datetime-picker
:show="datePickShow" :show="datePickShow"
mode="datetime" mode="datetime"
ref="sucklesTimeRef" ref="sucklesTimeRef"
@cancel="datePickShow=false" @cancel="datePickShow=false"
@confirm="datePickConfirm" @confirm="datePickConfirm"
itemHeight="88" itemHeight="88"
></u-datetime-picker> ></u-datetime-picker>
</view> </view>
</template> </template>
@@ -57,15 +63,45 @@ import { listPerson, } from '@/api/health/person'
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
import dayjs from 'dayjs' import dayjs from 'dayjs'
import {onLoad,onReady} from "@dcloudio/uni-app"; import {onLoad,onReady} from "@dcloudio/uni-app";
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue"; 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 datePickShow = ref(false)
const showPerson = ref(false) const showPerson = ref(false)
const title = ref("吃奶记录") const title = ref("吃奶记录")
const personList = ref([]) const personList = ref([])
const data = reactive({ const data = reactive({
form: { form: {
id: null, id: null,
createBy: null, createBy: null,
createTime: null, createTime: null,
updateBy: null, updateBy: null,
@@ -77,101 +113,109 @@ form: {
personId: null, personId: null,
milkPowderBrand: null, milkPowderBrand: null,
spoonful: null spoonful: null
}, },
queryPersonParams: { queryPersonParams: {
pageNum: 1, pageNum: 1,
status: '1', status: '1',
pageSize: 1000 pageSize: 1000
}, },
rules: { rules: {
personName: [{ required: true, message: '人员不能为空', trigger: ['change', 'blur'] }], 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) const { form, queryPersonParams, rules} = toRefs(data)
onLoad((option) => { onLoad((option) => {
form.value.id = option.id 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() getData()
}) })
onReady(() => { onReady(() => {
form.value.sucklesTime = dayjs(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss") form.value.sucklesTime = dayjs(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss")
}) })
function getData() { function getData() {
listPerson(queryPersonParams.value).then((response) => { listPerson(queryPersonParams.value).then((response) => {
personList.value = [response.rows] personList.value = [response.rows]
if(response.rows.length>0){ if(response.rows.length>0){
form.value.personName= response.rows[0].name form.value.personName= response.rows[0].name
form.value.personId = response.rows[0].id form.value.personId = response.rows[0].id
}
})
if(form.value.id!=null){
getMilkPowderRecord(form.value.id).then(res => {
form.value = res.data
})
} }
})
if(form.value.id!=null){
getMilkPowderRecord(form.value.id).then(res => {
form.value = res.data
})
}
} }
function handlePerson() { function handlePerson() {
if (personList.value[0].length === 0) { if (personList.value[0].length === 0) {
proxy.$refs['uToast'].show({ proxy.$refs['uToast'].show({
message: '人员为空 ', type: 'warning' message: '人员为空 ', type: 'warning'
}) })
} else { } else {
showPerson.value = true showPerson.value = true
} }
} }
function handlePersonConfirm(e) { function handlePersonConfirm(e) {
form.value.personName = e.value[0].name form.value.personName = e.value[0].name
form.value.personId = e.value[0].id form.value.personId = e.value[0].id
form.value.healthRecordName = '' form.value.healthRecordName = ''
form.value.healthRecordId = '' form.value.healthRecordId = ''
queryHealthRecordParams.value.personId=e.value[0].id queryHealthRecordParams.value.personId=e.value[0].id
listHealthRecord(queryHealthRecordParams.value).then((response) => { listHealthRecord(queryHealthRecordParams.value).then((response) => {
healthRecordList.value = [response.rows] healthRecordList.value = [response.rows]
showPerson.value = false showPerson.value = false
}) })
} }
function handlePersonCancel() { function handlePersonCancel() {
showPerson.value = false showPerson.value = false
} }
function selectDate() { function selectDate() {
datePickShow.value = true datePickShow.value = true
proxy.$refs['sucklesTimeRef'].innerValue = new Date().getTime() proxy.$refs['sucklesTimeRef'].innerValue = new Date().getTime()
} }
function datePickConfirm(e) { function datePickConfirm(e) {
form.value.sucklesTime = dayjs(e.value).format("YYYY-MM-DD HH:mm:ss") form.value.sucklesTime = dayjs(e.value).format("YYYY-MM-DD HH:mm:ss")
datePickShow.value = false datePickShow.value = false
} }
function submit() { function submit() {
proxy.$refs['uForm'].validate().then(() => { // 清空错误字段
if (form.value.id != null) { errorFields.value = []
updateMilkPowderRecord(form.value).then(res => {
proxy.$refs['uToast'].show({ proxy.$refs['uForm'].validate().then(() => {
message: '修改成功', complete() { if (form.value.id != null) {
uni.navigateTo({ url: `/pages/health/milkPowderRecord/list` }) updateMilkPowderRecord(form.value).then(res => {
} proxy.$refs['uToast'].show({
}) message: '修改成功', complete() {
uni.navigateTo({ url: `/pages/health/milkPowderRecord/list` })
}
}) })
}else { })
addMilkPowderRecord(form.value).then(res => { } else {
proxy.$refs['uToast'].show({ addMilkPowderRecord(form.value).then(res => {
message: '新增成功', complete() { proxy.$refs['uToast'].show({
uni.navigateTo({ url: `/pages/health/milkPowderRecord/list` }) message: '新增成功', complete() {
} uni.navigateTo({ url: `/pages/health/milkPowderRecord/list` })
}) }
}) })
}
}) })
} }
}).catch(errors => {
// 验证失败，记录错误字段
if (errors && errors.length > 0) {
errorFields.value = errors.map(err => err.field)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -209,6 +253,23 @@ function submit() {
.form-btn { .form-btn {
padding-top: 16rpx; 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> </style>
@@ -227,4 +288,19 @@ function submit() {
font-weight: 500 !important; font-weight: 500 !important;
letter-spacing: 2rpx !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> </style>

417
src/pages/health/person/addEdit.vue
View File

@@ -1,90 +1,94 @@
<template> <template>
<view class="container" style="paddingBottom:1rpx;"> <view class="container" style="paddingBottom:1rpx;">
<view class="section"> <view class="section">
<view class="section-title">{{ title}}</view> <view class="section-title">{{ title }}</view>
<view class="form-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>
<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>
<u-form-item label="类型" prop="typeName" required @click="handleType"> <u-form-item label="类型" prop="typeName" required @click="handleType">
<u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('typeName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="生日" prop="birthday" required @click="selectBirthday()"> <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="请选择生日"
</u-form-item> inputAlign="left" :customStyle="getInputStyle('birthday')"></u--input>
<u-form-item label="性别" prop="sexName" required @click="handleSex"> <text class="arrow-icon">▼</text>
<u--input v-model="form.sexName" disabled disabledColor="#ffffff" placeholder="请选择性别" </view>
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
</u-form-item> </u-form-item>
<u-form-item label="身份证" prop="identityCard" > <u-form-item label="性别" prop="sexName" required @click="handleSex">
<u--input v-model="form.identityCard" placeholder="请填写身份证" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
inputAlign="left" :customStyle="getInputStyle('sexName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="身高" prop="height" > <u-form-item label="身份证" prop="identityCard">
<u--input v-model="form.height" placeholder="请填写身高" <u--input v-model="form.identityCard" placeholder="请填写身份证" maxlength="18"
inputAlign="right" border="none"> inputAlign="left" :customStyle="getInputStyle('identityCard')"></u--input>
</u-form-item>
<u-form-item label="身高" prop="height">
<u--input v-model="form.height" placeholder="请填写身高" type="number"
inputAlign="left" :customStyle="getInputStyle('height')">
<template #suffix> <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>
<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> <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>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u-form-item label="备注" prop="remark" labelPosition="top"> <u--textarea v-model="form.remark" placeholder="请填写备注" inputAlign="left"
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" ></u--textarea> maxlength="500" style="border:2rpx solid #dcdfe6 !important; height:160rpx;"></u--textarea>
</u-form-item> </u-form-item>
</u--form> </u--form>
<view class="form-btn"> <view class="form-btn">
<u-button type="primary" text="提交" @click="submit"></u-button> <u-button type="primary" text="提交" @click="submit"></u-button>
</view>
</view> </view>
</view> </view>
</view>
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
<u-picker itemHeight="88" :show="showType" :columns="typeList" keyName="dictLabel" @cancel="handleTypeCancel" <u-picker itemHeight="88" :show="showType" :columns="typeList" keyName="dictLabel" @cancel="handleTypeCancel"
@confirm="handleTypeConfirm"></u-picker> @confirm="handleTypeConfirm"></u-picker>
<u-picker itemHeight="88" :show="showSex" :columns="sexList" keyName="dictLabel" @cancel="handleSexCancel" <u-picker itemHeight="88" :show="showSex" :columns="sexList" keyName="dictLabel" @cancel="handleSexCancel"
@confirm="handleSexConfirm"></u-picker> @confirm="handleSexConfirm"></u-picker>
<u-datetime-picker <u-datetime-picker
:show="birthdayShow" :show="birthdayShow"
mode="date" mode="date"
:minDate="-2209017600000" :minDate="-2209017600000"
ref="birthdayRef" ref="birthdayRef"
@cancel="birthdayShow=false" @cancel="birthdayShow=false"
@confirm="birthdayConfirm" @confirm="birthdayConfirm"
itemHeight="88" itemHeight="88"
></u-datetime-picker> ></u-datetime-picker>
</view> </view>
</template> </template>
<script setup> <script setup>
import { getPerson,addPerson, updatePerson } from '@/api/health/person' import { getPerson, addPerson, updatePerson } from '@/api/health/person'
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
import { getDicts } from '@/api/system/dict/data.js' import { getDicts } from '@/api/system/dict/data.js'
import dayjs from 'dayjs' 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 birthdayShow = ref(false)
const title = ref("成员管理") const title = ref("成员管理")
@@ -94,10 +98,39 @@ const showType = ref(false)
const sexList = ref([]) const sexList = ref([])
const showSex = ref(false) 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({ const data = reactive({
form: { form: {
id: null, id: null,
id: null,
name: null, name: null,
type: null, type: null,
createBy: null, createBy: null,
@@ -113,131 +146,141 @@ form: {
sex: null, sex: null,
identityCard: null, identityCard: null,
ranking: 0 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'] }], nickName: [{ required: true, message: '昵称不能为空', trigger: ['change', 'blur'] }],
birthday: [{ required: true, message: '生日不能为空', trigger: ['change', 'blur'] }], birthday: [{ required: true, message: '生日不能为空', trigger: ['change', 'blur'] }],
typeName: [{ required: true, message: '类型不能为空', trigger: ['change', 'blur'] }], typeName: [{ required: true, message: '类型不能为空', trigger: ['change', 'blur'] }],
sexName: [{ 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) => { onLoad((option) => {
form.value.id = option.id 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() getData()
})
onReady(() => {
// form.value.birthday = dayjs(new Date().getTime()).format("YYYY-MM-DD")
}) })
function dictStr(val, arr) { function dictStr(val, arr) {
let str = '' let str = ''
arr.map(item => { arr.map(item => {
if (item.dictValue === val) { if (item.dictValue === val) {
str = item.dictLabel str = item.dictLabel
}
})
return str
}
function getData() {
// 类型
getDicts('person_type').then(res => {
typeList.value =[res.data]
})
// 类型
getDicts('sys_user_sex').then(res => {
sexList.value =[res.data]
})
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)
})
// 类型
getDicts('sys_user_sex').then(result => {
form.value.sexName=dictStr(form.value.sex, result.data)
})
})
} }
})
return str
} }
function getData() {
function handleType() { // 类型
if (typeList.value[0].length === 0) { getDicts('person_type').then(res => {
proxy.$refs['uToast'].show({ typeList.value = [res.data]
message: '类型为空 ', type: 'warning' })
}) // 性别
} else { getDicts('sys_user_sex').then(res => {
showType.value = true sexList.value = [res.data]
} })
} if (form.value.id != null) {
function handleTypeConfirm(e) { getPerson(form.value.id).then(res => {
form.value.typeName = e.value[0].dictLabel form.value = res.data
form.value.type = e.value[0].dictValue // 类型
showType.value = false getDicts('person_type').then(result => {
form.value.typeName = dictStr(form.value.type, result.data)
})
// 性别
getDicts('sys_user_sex').then(result => {
form.value.sexName = dictStr(form.value.sex, result.data)
})
})
} }
function handleTypeCancel() { }
showType.value = false
}
function handleSex() { function handleType() {
if (sexList.value[0].length === 0) { if (typeList.value[0].length === 0) {
proxy.$refs['uToast'].show({ proxy.$refs['uToast'].show({
message: '性别为空 ', type: 'warning' message: '类型为空 ', type: 'warning'
}) })
} else { } else {
showSex.value = true showType.value = true
}
}
function handleSexConfirm(e) {
form.value.sexName = e.value[0].dictLabel
form.value.sex = e.value[0].dictValue
showSex.value = false
} }
function handleSexCancel() { }
showSex.value = false
}
function selectBirthday() { function handleTypeConfirm(e) {
birthdayShow.value = true form.value.typeName = e.value[0].dictLabel
proxy.$refs['birthdayRef'].innerValue = new Date().getTime() form.value.type = e.value[0].dictValue
showType.value = false
}
function handleTypeCancel() {
showType.value = false
}
function handleSex() {
if (sexList.value[0].length === 0) {
proxy.$refs['uToast'].show({
message: '性别为空 ', type: 'warning'
})
} else {
showSex.value = true
} }
}
function handleSexConfirm(e) {
form.value.sexName = e.value[0].dictLabel
form.value.sex = e.value[0].dictValue
showSex.value = false
}
function handleSexCancel() {
showSex.value = false
}
function selectBirthday() {
birthdayShow.value = true
proxy.$refs['birthdayRef'].innerValue = new Date().getTime()
}
function birthdayConfirm(e) { function birthdayConfirm(e) {
form.value.birthday = dayjs(e.value).format("YYYY-MM-DD") form.value.birthday = dayjs(e.value).format("YYYY-MM-DD")
birthdayShow.value = false birthdayShow.value = false
} }
function submit() { function submit() {
proxy.$refs['uForm'].validate().then(() => { // 清空错误字段
if (form.value.id != null) { errorFields.value = []
updatePerson(form.value).then(res => {
proxy.$refs['uToast'].show({ proxy.$refs['uForm'].validate().then(() => {
message: '修改成功', complete() { if (form.value.id != null) {
uni.navigateTo({ url: `/pages/health/person/list` }) updatePerson(form.value).then(res => {
} proxy.$refs['uToast'].show({
}) message: '修改成功', complete() {
uni.navigateTo({ url: `/pages/health/person/list` })
}
}) })
}else { })
addPerson(form.value).then(res => { } else {
proxy.$refs['uToast'].show({ addPerson(form.value).then(res => {
message: '新增成功', complete() { proxy.$refs['uToast'].show({
uni.navigateTo({ url: `/pages/health/person/list` }) message: '新增成功', complete() {
} uni.navigateTo({ url: `/pages/health/person/list` })
}) }
}) })
}
}) })
} }
}).catch(errors => {
// 验证失败，记录错误字段
if (errors && errors.length > 0) {
errorFields.value = errors.map(err => err.field)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -275,6 +318,23 @@ function submit() {
.form-btn { .form-btn {
padding-top: 16rpx; 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> </style>
@@ -293,4 +353,19 @@ function submit() {
font-weight: 500 !important; font-weight: 500 !important;
letter-spacing: 2rpx !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> </style>

112
src/pages/health/processRecord/addEdit.vue
View File

@@ -3,27 +3,33 @@
<view class="section"> <view class="section">
<view class="section-title">{{ title}}</view> <view class="section-title">{{ title}}</view>
<view class="form-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"> <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
<view class="input-with-arrow">
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员" <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>
</u-form-item> </view>
</u-form-item>
<u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord"> <u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
<view class="input-with-arrow">
<u--input v-model="form.healthRecordName" disabled disabledColor="#ffffff" placeholder="请选择健康档案" <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>
<u-form-item label="记录时间" prop="recordingTime" required @click="selectDate()"> <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>
<u-form-item label="记录内容" required prop="content" > <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>
<u-form-item label="备注" prop="remark" labelPosition="top"> <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-item>
</u--form> </u--form>
<view class="form-btn"> <view class="form-btn">
@@ -96,6 +102,52 @@ rules: {
}) })
const { form, queryPersonParams, queryHealthRecordParams, rules} = toRefs(data) 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) => { onLoad((option) => {
form.value.id = option.id 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> </script>
@@ -277,6 +335,23 @@ function submit() {
.form-btn { .form-btn {
padding-top: 16rpx; 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> </style>
@@ -295,4 +370,19 @@ function submit() {
font-weight: 500 !important; font-weight: 500 !important;
letter-spacing: 2rpx !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> </style>

96
src/pages/health/temperatureRecord/addEdit.vue
View File

@@ -3,25 +3,31 @@
<view class="section"> <view class="section">
<view class="section-title">{{ title}}</view> <view class="section-title">{{ title}}</view>
<view class="form-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"> <u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord"> <u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
<u--input v-model="form.healthRecordName" disabled disabledColor="#ffffff" placeholder="请选择健康档案" <view class="input-with-arrow">
inputAlign="right" border="none"></u--input> <u--input v-model="form.healthRecordName" disabled disabledColor="#ffffff" placeholder="请选择健康档案"
<u-icon slot="right" name="arrow-down"></u-icon> inputAlign="left" :customStyle="getInputStyle('healthRecordName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="测量时间" prop="measureTime" required @click="selectDate()"> <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>
<u-form-item label="体温" required prop="temperature" > <u-form-item label="体温" required prop="temperature" >
<u--input v-model="form.temperature" type="number" placeholder="请填写体温" <u--input v-model="form.temperature" type="number" placeholder="请填写体温"
inputAlign="right" border="none"> inputAlign="left" :customStyle="getInputStyle('temperature')">
<template #suffix> <template #suffix>
<up-text <up-text
text="℃" text="℃"
@@ -30,7 +36,7 @@
</u--input> </u--input>
</u-form-item> </u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top"> <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-item>
</u--form> </u--form>
<view class="form-btn"> <view class="form-btn">
@@ -102,7 +108,35 @@ rules: {
} }
}) })
const { form, queryPersonParams, queryHealthRecordParams, rules} = toRefs(data) 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) => { onLoad((option) => {
form.value.id = option.id 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> </script>
@@ -281,6 +321,23 @@ function submit() {
.form-btn { .form-btn {
padding-top: 16rpx; 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> </style>
@@ -299,4 +356,19 @@ function submit() {
font-weight: 500 !important; font-weight: 500 !important;
letter-spacing: 2rpx !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> </style>

159
src/static/scss/global.scss
View File

@@ -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;
}
}