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

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

@@ -3,62 +3,76 @@
<view class="section">
<view class="section-title">{{ title}}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="140rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
<u-form-item label="活动名称" prop="name" required >
<u--input v-model="form.name" placeholder="请填写活动名称"
inputAlign="right" border="none"></u--input>
</u-form-item>
<u--input v-model="form.name" placeholder="请填写活动名称"
inputAlign="left" :customStyle="getInputStyle('name')"></u--input>
</u-form-item>
<u-form-item label="类型" prop="typeName" required @click="handleType">
<view class="input-with-arrow">
<u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
</u-form-item>
<u-form-item label="活动地点" required prop="place" >
<u--input v-model="form.place" placeholder="请填写活动地点"
inputAlign="right" border="none"></u--input>
</u-form-item>
<u-form-item label="成员" required prop="partner" >
<u--input v-model="form.partner" placeholder="请填写成员"
inputAlign="right" border="none"></u--input>
</u-form-item>
<u-form-item label="开始时间" prop="startTime" required @click="selectStartTime()">
<u--input v-model="form.startTime" disabled disabledColor="#ffffff" placeholder="请选择开始时间" inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
inputAlign="left" :customStyle="getInputStyle('typeName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="活动地点" required prop="place" >
<u--input v-model="form.place" placeholder="请填写活动地点"
inputAlign="left" :customStyle="getInputStyle('place')"></u--input>
</u-form-item>
<u-form-item label="成员" required prop="partner" >
<u--input v-model="form.partner" placeholder="请填写成员"
inputAlign="left" :customStyle="getInputStyle('partner')"></u--input>
</u-form-item>
<u-form-item label="开始时间" prop="startTime" required @click="selectStartTime()">
<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 label="结束时间" prop="endTime" @click="selectEndTime()">
<u--input v-model="form.endTime" disabled disabledColor="#ffffff" placeholder="请选择结束时间" inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
<view class="input-with-arrow">
<u--input v-model="form.endTime" disabled disabledColor="#ffffff" placeholder="请选择结束时间"
inputAlign="left" :customStyle="getInputStyle('endTime')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<!-- <u-form-item label="活动时长" prop="exerciseTime" >
<u--input v-model="form.exerciseTime" placeholder="请填写活动时长"
inputAlign="right" border="none"></u--input>
</u-form-item> -->
<u-form-item label="活动量" prop="activityVolumeName" required @click="handleActivityVolume">
<!-- <u-form-item label="活动时长" prop="exerciseTime" >
<u--input v-model="form.exerciseTime" placeholder="请填写活动时长"
inputAlign="left" :customStyle="getInputStyle('exerciseTime')"></u--input>
</u-form-item> -->
<u-form-item label="活动量" prop="activityVolumeName" required @click="handleActivityVolume">
<view class="input-with-arrow">
<u--input v-model="form.activityVolumeName" disabled disabledColor="#ffffff" placeholder="请选择活动量"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
</u-form-item>
<u-form-item label="总费用" prop="totalCost" >
<u--input v-model="form.totalCost" type="number" placeholder="请填写总费用"
inputAlign="right" border="none">
<template #suffix>
<up-text
text="元"
></up-text>
</template></u--input>
</u-form-item>
<u-form-item label="费用明细" prop="costDetail" labelPosition="top">
<u--textarea v-model="form.costDetail" placeholder="请填写费用明细" border="none" ></u--textarea>
inputAlign="left" :customStyle="getInputStyle('activityVolumeName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="总费用" prop="totalCost" >
<u--input v-model="form.totalCost" type="number" placeholder="请填写总费用"
inputAlign="left" :customStyle="getInputStyle('totalCost')">
<template #suffix>
<up-text
text="元"
></up-text>
</template></u--input>
</u-form-item>
<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 label="饮食" prop="foods" labelPosition="top">
<u--textarea v-model="form.foods" placeholder="请填写饮食" border="none" ></u--textarea>
<u--textarea v-model="form.foods" height="80rpx" placeholder="请填写饮食" inputAlign="left"
style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
</u-form-item>
<u-form-item label="收获" prop="harvest" labelPosition="top">
<u--textarea v-model="form.harvest" placeholder="请填写收获" border="none"></u--textarea>
<u--textarea v-model="form.harvest" height="80rpx" placeholder="请填写收获" inputAlign="left"
style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none"></u--textarea>
<u--textarea v-model="form.remark" height="80rpx" placeholder="请填写备注" inputAlign="left"
style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
@@ -67,38 +81,69 @@
</view>
</view>
<u-toast ref="uToast"></u-toast>
<u-picker itemHeight="88" :show="showType" :columns="typeList" keyName="dictLabel" @cancel="handleTypeCancel"
@confirm="handleTypeConfirm"></u-picker>
<u-picker itemHeight="88" :show="showActivityVolume" :columns="activityVolumeList" keyName="dictLabel" @cancel="handleActivityVolumeCancel"
@confirm="handleActivityVolumeConfirm"></u-picker>
<u-datetime-picker
:show="startTimeShow"
mode="datetime"
<u-picker itemHeight="88" :show="showType" :columns="typeList" keyName="dictLabel" @cancel="handleTypeCancel"
@confirm="handleTypeConfirm"></u-picker>
<u-picker itemHeight="88" :show="showActivityVolume" :columns="activityVolumeList" keyName="dictLabel" @cancel="handleActivityVolumeCancel"
@confirm="handleActivityVolumeConfirm"></u-picker>
<u-datetime-picker
:show="startTimeShow"
mode="datetime"
ref="startTimeRef"
@cancel="startTimeShow=false"
@confirm="startTimeConfirm"
itemHeight="88"
></u-datetime-picker>
@cancel="startTimeShow=false"
@confirm="startTimeConfirm"
itemHeight="88"
></u-datetime-picker>
<u-datetime-picker
:show="endTimeShow"
mode="datetime"
:show="endTimeShow"
mode="datetime"
ref="endTimeRef"
@cancel="endTimeShow=false"
@confirm="endTimeConfirm"
itemHeight="88"
></u-datetime-picker>
@cancel="endTimeShow=false"
@confirm="endTimeConfirm"
itemHeight="88"
></u-datetime-picker>
</view>
</template>
<script setup>
import { getActivity, addActivity, updateActivity } from '@/api/health/activity'
const { proxy } = getCurrentInstance()
import { getDicts } from '@/api/system/dict/data.js'
import { getDicts } from '@/api/system/dict/data.js'
import dayjs from 'dayjs'
import {onLoad,onReady} from "@dcloudio/uni-app";
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
// 错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
const inputErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
const birthdayShow = ref(false)
const title = ref("活动记录")
const startTimeShow = ref(false)
@@ -251,37 +296,46 @@ function getData() {
function submit() {
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
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` })
}
})
})
// 清空错误字段
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
updateActivity(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>
<style lang="scss" scoped>
@@ -319,6 +373,23 @@ function submit() {
.form-btn {
padding-top: 16rpx;
}
// 带箭头的输入框容器
.input-with-arrow {
position: relative;
width: 100%;
.arrow-icon {
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 20rpx;
pointer-events: none;
z-index: 10;
}
}
}
}
</style>
@@ -337,4 +408,19 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
</style>
/* 强制让错误状态的输入框边框变红 */
.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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,90 +1,94 @@
<template>
<view class="container" style="paddingBottom:1rpx;">
<view class="section">
<view class="section-title">{{ title}}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="姓名" prop="name" required >
<u--input v-model="form.name" placeholder="请填写姓名"
inputAlign="right" border="none"></u--input>
<view class="section">
<view class="section-title">{{ title }}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="140rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
<u-form-item label="姓名" prop="name" required>
<u--input v-model="form.name" placeholder="请填写姓名" maxlength="30"
inputAlign="left" :customStyle="getInputStyle('name')"></u--input>
</u-form-item>
<u-form-item label="昵称" prop="nickName" required >
<u--input v-model="form.nickName" placeholder="请填写昵称"
inputAlign="right" border="none"></u--input>
<u-form-item label="昵称" prop="nickName" required>
<u--input v-model="form.nickName" placeholder="请填写昵称" maxlength="30"
inputAlign="left" :customStyle="getInputStyle('nickName')"></u--input>
</u-form-item>
<u-form-item label="类型" prop="typeName" required @click="handleType">
<u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
<u-form-item label="类型" prop="typeName" required @click="handleType">
<view class="input-with-arrow">
<u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
inputAlign="left" :customStyle="getInputStyle('typeName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="生日" prop="birthday" required @click="selectBirthday()">
<u--input v-model="form.birthday" disabled disabledColor="#ffffff" placeholder="请选择生日" inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="性别" prop="sexName" required @click="handleSex">
<u--input v-model="form.sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
<view class="input-with-arrow">
<u--input v-model="form.birthday" disabled disabledColor="#ffffff" placeholder="请选择生日"
inputAlign="left" :customStyle="getInputStyle('birthday')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="身份证" prop="identityCard" >
<u--input v-model="form.identityCard" placeholder="请填写身份证"
inputAlign="right" border="none"></u--input>
<u-form-item label="性别" prop="sexName" required @click="handleSex">
<view class="input-with-arrow">
<u--input v-model="form.sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
inputAlign="left" :customStyle="getInputStyle('sexName')"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="身高" prop="height" >
<u--input v-model="form.height" placeholder="请填写身高"
inputAlign="right" border="none">
<u-form-item label="身份证" prop="identityCard">
<u--input v-model="form.identityCard" placeholder="请填写身份证" maxlength="18"
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>
<up-text
text="CM"
></up-text>
</template></u--input>
<up-text text="CM"></up-text>
</template>
</u--input>
</u-form-item>
<u-form-item label="体重" prop="weight" >
<u--input v-model="form.weight" placeholder="请填写体重"
inputAlign="right" border="none">
<u-form-item label="体重" prop="weight">
<u--input v-model="form.weight" placeholder="请填写体重" type="number"
inputAlign="left" :customStyle="getInputStyle('weight')">
<template #suffix>
<up-text
text="KG"
></up-text>
</template></u--input>
<up-text text="KG"></up-text>
</template>
</u--input>
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" ></u--textarea>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" inputAlign="left"
maxlength="500" style="border:2rpx solid #dcdfe6 !important; height:160rpx;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
<u-button type="primary" text="提交" @click="submit"></u-button>
</u--form>
<view class="form-btn">
<u-button type="primary" text="提交" @click="submit"></u-button>
</view>
</view>
</view>
</view>
<u-toast ref="uToast"></u-toast>
<u-picker itemHeight="88" :show="showType" :columns="typeList" keyName="dictLabel" @cancel="handleTypeCancel"
@confirm="handleTypeConfirm"></u-picker>
<u-picker itemHeight="88" :show="showSex" :columns="sexList" keyName="dictLabel" @cancel="handleSexCancel"
@confirm="handleSexConfirm"></u-picker>
<u-datetime-picker
:show="birthdayShow"
mode="date"
<u-picker itemHeight="88" :show="showType" :columns="typeList" keyName="dictLabel" @cancel="handleTypeCancel"
@confirm="handleTypeConfirm"></u-picker>
<u-picker itemHeight="88" :show="showSex" :columns="sexList" keyName="dictLabel" @cancel="handleSexCancel"
@confirm="handleSexConfirm"></u-picker>
<u-datetime-picker
:show="birthdayShow"
mode="date"
:minDate="-2209017600000"
ref="birthdayRef"
@cancel="birthdayShow=false"
@confirm="birthdayConfirm"
itemHeight="88"
></u-datetime-picker>
ref="birthdayRef"
@cancel="birthdayShow=false"
@confirm="birthdayConfirm"
itemHeight="88"
></u-datetime-picker>
</view>
</template>
<script setup>
import { getPerson,addPerson, updatePerson } from '@/api/health/person'
import { getPerson, addPerson, updatePerson } from '@/api/health/person'
const { proxy } = getCurrentInstance()
import { getDicts } from '@/api/system/dict/data.js'
import { getDicts } from '@/api/system/dict/data.js'
import dayjs from 'dayjs'
import {onLoad,onReady} from "@dcloudio/uni-app";
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed ,getCurrentInstance }from "vue";
import { onLoad, onReady } from "@dcloudio/uni-app";
import { reactive, toRefs, ref, getCurrentInstance } from "vue";
const birthdayShow = ref(false)
const title = ref("成员管理")
@@ -94,10 +98,39 @@ const showType = ref(false)
const sexList = ref([])
const showSex = ref(false)
// 错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
const inputErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
const data = reactive({
form: {
id: null,
id: null,
form: {
id: null,
name: null,
type: null,
createBy: null,
@@ -113,131 +146,141 @@ form: {
sex: null,
identityCard: null,
ranking: 0
},
rules: {
name: [{ required: true, message: '姓名不能为空', trigger:['change', 'blur'] }],
nickName: [{ required: true, message: '昵称不能为空', trigger: ['change', 'blur'] }],
birthday: [{ required: true, message: '生日不能为空', trigger: ['change', 'blur'] }],
typeName: [{ required: true, message: '类型不能为空', trigger: ['change', 'blur'] }],
sexName: [{ required: true, message: '性别不能为空', trigger: ['change', 'blur'] }],
}
},
rules: {
name: [{ required: true, message: '姓名不能为空', trigger: ['change', 'blur'] }],
nickName: [{ required: true, message: '昵称不能为空', trigger: ['change', 'blur'] }],
birthday: [{ required: true, message: '生日不能为空', trigger: ['change', 'blur'] }],
typeName: [{ required: true, message: '类型不能为空', trigger: ['change', 'blur'] }],
sexName: [{ required: true, message: '性别不能为空', trigger: ['change', 'blur'] }],
}
})
const { form, rules} = toRefs(data)
const { form, rules } = toRefs(data)
onLoad((option) => {
form.value.id = option.id
if(form.value.id!=null){
title.value="成员管理-修改"
}else{
title.value="成员管理-新增"
}
getData()
})
onReady(() => {
// form.value.birthday = dayjs(new Date().getTime()).format("YYYY-MM-DD")
form.value.id = option.id
if (form.value.id != null) {
title.value = "成员管理-修改"
} else {
title.value = "成员管理-新增"
}
getData()
})
function dictStr(val, arr) {
let str = ''
arr.map(item => {
if (item.dictValue === val) {
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)
})
})
let str = ''
arr.map(item => {
if (item.dictValue === val) {
str = item.dictLabel
}
})
return str
}
function handleType() {
if (typeList.value[0].length === 0) {
proxy.$refs['uToast'].show({
message: '类型为空 ', type: 'warning'
})
} else {
showType.value = true
}
}
function handleTypeConfirm(e) {
form.value.typeName = e.value[0].dictLabel
form.value.type = e.value[0].dictValue
showType.value = false
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)
})
})
}
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 handleType() {
if (typeList.value[0].length === 0) {
proxy.$refs['uToast'].show({
message: '类型为空 ', type: 'warning'
})
} else {
showType.value = true
}
function handleSexCancel() {
showSex.value = false
}
}
function selectBirthday() {
birthdayShow.value = true
proxy.$refs['birthdayRef'].innerValue = new Date().getTime()
function handleTypeConfirm(e) {
form.value.typeName = e.value[0].dictLabel
form.value.type = e.value[0].dictValue
showType.value = false
}
function handleTypeCancel() {
showType.value = false
}
function handleSex() {
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) {
form.value.birthday = dayjs(e.value).format("YYYY-MM-DD")
birthdayShow.value = false
}
form.value.birthday = dayjs(e.value).format("YYYY-MM-DD")
birthdayShow.value = false
}
function submit() {
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
updatePerson(form.value).then(res => {
proxy.$refs['uToast'].show({
message: '修改成功', complete() {
uni.navigateTo({ url: `/pages/health/person/list` })
}
})
// 清空错误字段
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
updatePerson(form.value).then(res => {
proxy.$refs['uToast'].show({
message: '修改成功', complete() {
uni.navigateTo({ url: `/pages/health/person/list` })
}
})
}else {
addPerson(form.value).then(res => {
proxy.$refs['uToast'].show({
message: '新增成功', complete() {
uni.navigateTo({ url: `/pages/health/person/list` })
}
})
})
} else {
addPerson(form.value).then(res => {
proxy.$refs['uToast'].show({
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>
<style lang="scss" scoped>
@@ -258,7 +301,7 @@ function submit() {
font-weight: 600;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
@@ -275,6 +318,23 @@ function submit() {
.form-btn {
padding-top: 16rpx;
}
// 带箭头的输入框容器
.input-with-arrow {
position: relative;
width: 100%;
.arrow-icon {
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 20rpx;
pointer-events: none;
z-index: 10;
}
}
}
}
</style>
@@ -293,4 +353,19 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
</style>
/* 强制让错误状态的输入框边框变红 */
.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>

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

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

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

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

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