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 12:04:50 +08:00
parent d8deec1c74
commit f4b5a3907c
13 changed files with 1596 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

746
src/pages/common/template/addEdit.vue Normal file
View File

@@ -0,0 +1,746 @@
<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" labelWidth="120rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<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="userName" required v-if="!form.userId">
<u--input v-model="form.userName" placeholder="请输入用户名称" maxlength="30"
inputAlign="left" :customStyle="getInputStyle('userName')"></u--input>
</u-form-item>
<u-form-item label="用户密码" prop="password" required v-if="!form.userId">
<u--input v-model="form.password" type="password" placeholder="请输入用户密码" maxlength="20"
inputAlign="left" :customStyle="getInputStyle('password')"></u--input>
</u-form-item>
<u-form-item label="手机号码" prop="phonenumber" required>
<u--input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11"
inputAlign="left" :customStyle="getInputStyle('phonenumber')"></u--input>
</u-form-item>
<u-form-item label="邮箱" prop="email">
<u--input v-model="form.email" placeholder="请输入邮箱" maxlength="50"
inputAlign="left" :customStyle="getInputStyle('email')"></u--input>
</u-form-item>
<u-form-item label="用户性别" prop="sexName" @click="showSexPicker = true">
<view class="input-with-arrow">
<u--input v-model="sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="归属部门" prop="deptName" @click="showDeptPicker = true">
<view class="input-with-arrow">
<u--input v-model="deptName" disabled disabledColor="#ffffff" placeholder="请选择归属部门"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="岗位" prop="postNames" @click="openPostPicker">
<view class="input-with-arrow">
<u--input :value="postNamesText" disabled disabledColor="#ffffff" placeholder="请选择岗位"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<!-- 已选岗位标签展示 -->
<view v-if="postNames.length > 0" class="selected-tags">
<view class="selected-title">已选择的岗位：</view>
<view class="tag-list">
<view v-for="name in postNames" :key="name" class="tag-item">
{{ name }}
</view>
</view>
</view>
<u-form-item label="角色" prop="roleNames" @click="openRolePicker">
<view class="input-with-arrow">
<u--input :value="roleNamesText" disabled disabledColor="#ffffff" placeholder="请选择角色"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<!-- 已选角色标签展示 -->
<view v-if="roleNames.length > 0" class="selected-tags">
<view class="selected-title">已选择的角色：</view>
<view class="tag-list">
<view v-for="name in roleNames" :key="name" class="tag-item">
{{ name }}
</view>
</view>
</view>
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
<view class="input-with-arrow">
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<text class="arrow-icon">▼</text>
</view>
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--input v-model="form.remark" placeholder="请输入备注" maxlength="300"
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
</u-form-item>
</u--form>
<view class="form-btn">
<u-button type="primary" text="提交" @click="submit"></u-button>
</view>
</view>
</view>
<u-picker itemHeight="88" :show="showSexPicker" :columns="sexList" keyName="dictLabel" @cancel="showSexPicker = false"
@confirm="handleSexConfirm"></u-picker>
<u-picker itemHeight="88" :show="showStatusPicker" :columns="statusList" keyName="dictLabel" @cancel="showStatusPicker = false"
@confirm="handleStatusConfirm"></u-picker>
<u-picker itemHeight="88" :show="showDeptPicker" :columns="deptList" keyName="deptName" @cancel="showDeptPicker = false"
@confirm="handleDeptConfirm"></u-picker>
<!-- 岗位多选弹窗 -->
<u-popup :show="showPostPicker" mode="bottom" :round="20" @close="showPostPicker = false">
<view class="select-popup">
<view class="popup-header">
<text class="header-title">选择岗位</text>
<text class="header-count">已选择 {{ tempPostIds.length }} 项</text>
</view>
<scroll-view class="popup-content" scroll-y>
<u-checkbox-group v-model="tempPostIds">
<view v-for="item in postList[0]" :key="item.postId" class="checkbox-item">
<u-checkbox :name="item.postId" :label="item.postName" shape="square"
activeColor="#667eea" labelSize="30rpx" iconSize="36rpx"></u-checkbox>
</view>
</u-checkbox-group>
</scroll-view>
<view class="popup-footer">
<view class="footer-btn cancel-btn" @click="cancelPostSelect">取消</view>
<view class="footer-btn confirm-btn" @click="confirmPostSelect">确定</view>
</view>
</view>
</u-popup>
<!-- 角色多选弹窗 -->
<u-popup :show="showRolePicker" mode="bottom" :round="20" @close="showRolePicker = false">
<view class="select-popup">
<view class="popup-header">
<text class="header-title">选择角色</text>
<text class="header-count">已选择 {{ tempRoleIds.length }} 项</text>
</view>
<scroll-view class="popup-content" scroll-y>
<u-checkbox-group v-model="tempRoleIds">
<view v-for="item in roleList[0]" :key="item.roleId" class="checkbox-item">
<u-checkbox :name="item.roleId" :label="item.roleName" shape="square"
activeColor="#667eea" labelSize="30rpx" iconSize="36rpx"></u-checkbox>
</view>
</u-checkbox-group>
</scroll-view>
<view class="popup-footer">
<view class="footer-btn cancel-btn" @click="cancelRoleSelect">取消</view>
<view class="footer-btn confirm-btn" @click="confirmRoleSelect">确定</view>
</view>
</view>
</u-popup>
</view>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, computed } from 'vue'
import { getUser, addUser, updateUser } from '@/api/system/user'
import { listDept } from '@/api/system/dept'
import { listPost } from '@/api/system/post'
import { listRole } from '@/api/system/role'
import { getDicts } from "@/api/system/dict/data"
import { onLoad } from "@dcloudio/uni-app"
const { proxy } = getCurrentInstance()
const statusList = ref([])
const sexList = ref([])
const deptList = ref([])
const postList = ref([])
const roleList = ref([])
const title = ref('添加用户')
const showStatusPicker = ref(false)
const showSexPicker = ref(false)
const showDeptPicker = ref(false)
const showPostPicker = ref(false)
const showRolePicker = ref(false)
const statusName = ref('')
const sexName = ref('')
const deptName = ref('')
const postNames = ref([])
const roleNames = ref([])
const tempPostIds = ref([])
const tempRoleIds = ref([])
const form = reactive({
userId: undefined,
deptId: undefined,
nickName: undefined,
userName: undefined,
password: undefined,
phonenumber: undefined,
email: undefined,
sex: '0',
status: '0',
postIds: [],
roleIds: [],
remark: undefined
})
const postNamesText = computed(() => {
return postNames.value.join('、') || ''
})
const roleNamesText = computed(() => {
return roleNames.value.join('、') || ''
})
// 表单验证错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
const inputErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '60rpx',
lineHeight: '60rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
const rules = {
nickName: [
{ required: true, message: '用户昵称不能为空', trigger: ['blur', 'change'] }
],
userName: [
{ required: true, message: '用户名称不能为空', trigger: ['blur', 'change'] }
],
password: [
{ required: true, message: '用户密码不能为空', trigger: ['blur', 'change'] }
],
phonenumber: [
{ required: true, message: '手机号码不能为空', trigger: ['blur', 'change'] },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] }
],
email: [
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]
}
onLoad((option) => {
getDicts('sys_normal_disable').then(res => {
statusList.value = [res.data]
})
getDicts('sys_user_sex').then(res => {
sexList.value = [res.data]
})
// 加载部门列表
loadDeptList()
if (option.id) {
title.value = '修改用户'
getDetail(option.id)
} else {
title.value = '添加用户'
// 新增时直接获取完整的岗位和角色列表
loadPostList()
loadRoleList()
setTimeout(() => {
updateStatusName()
updateSexName()
}, 100)
}
})
// 加载部门列表
function loadDeptList() {
listDept().then(res => {
const listData = res.data || []
deptList.value = [listData]
})
}
// 加载岗位列表
function loadPostList() {
listPost().then(res => {
console.log('单独获取岗位列表:', res)
const listData = res.rows || []
postList.value = [listData]
}).catch(err => {
console.error('获取岗位列表失败:', err)
})
}
// 加载角色列表
function loadRoleList() {
listRole().then(res => {
console.log('单独获取角色列表:', res)
const listData = res.rows || []
roleList.value = [listData]
}).catch(err => {
console.error('获取角色列表失败:', err)
})
}
// 获取详情
function getDetail(id) {
getUser(id).then(res => {
console.log('编辑用户-获取详情数据:', res)
const data = res.data || {}
console.log('用户信息:', data.user)
console.log('已选岗位IDs:', data.postIds)
console.log('已选角色IDs:', data.roleIds)
// 用户数据在 data.user 中
if (data.user) {
Object.assign(form, data.user)
}
// 单独获取完整的岗位和角色列表
loadPostList()
loadRoleList()
// 设置已选岗位和角色（从 data 根级别获取）
form.postIds = data.postIds || []
form.roleIds = data.roleIds || []
console.log('form.postIds:', form.postIds)
console.log('form.roleIds:', form.roleIds)
updateStatusName()
updateSexName()
updateDeptName()
// 延迟更新岗位和角色名称，等待列表加载完成
setTimeout(() => {
updatePostNames()
updateRoleNames()
}, 300)
}).catch(err => {
console.error('获取用户详情失败:', err)
})
}
// 更新状态显示名称
function updateStatusName() {
if (statusList.value[0]) {
const item = statusList.value[0].find(v => v.dictValue === form.status)
statusName.value = item ? item.dictLabel : ''
}
}
// 更新性别显示名称
function updateSexName() {
if (sexList.value[0]) {
const item = sexList.value[0].find(v => v.dictValue === form.sex)
sexName.value = item ? item.dictLabel : ''
}
}
// 状态选择确认
function handleStatusConfirm(e) {
form.status = e.value[0].dictValue
statusName.value = e.value[0].dictLabel
showStatusPicker.value = false
}
// 性别选择确认
function handleSexConfirm(e) {
form.sex = e.value[0].dictValue
sexName.value = e.value[0].dictLabel
showSexPicker.value = false
}
// 更新部门显示名称
function updateDeptName() {
if (form.deptId && deptList.value[0]) {
const dept = deptList.value[0].find(v => v.deptId === form.deptId)
deptName.value = dept ? dept.deptName : ''
}
}
// 更新岗位显示名称
function updatePostNames() {
if (form.postIds && form.postIds.length > 0 && postList.value[0]) {
postNames.value = postList.value[0]
.filter(v => form.postIds.includes(v.postId))
.map(v => v.postName)
}
}
// 更新角色显示名称
function updateRoleNames() {
if (form.roleIds && form.roleIds.length > 0 && roleList.value[0]) {
roleNames.value = roleList.value[0]
.filter(v => form.roleIds.includes(v.roleId))
.map(v => v.roleName)
}
}
// 部门选择确认
function handleDeptConfirm(e) {
form.deptId = e.value[0].deptId
deptName.value = e.value[0].deptName
showDeptPicker.value = false
}
// 岗位选择确认
function openPostPicker() {
tempPostIds.value = [...form.postIds]
showPostPicker.value = true
}
function cancelPostSelect() {
showPostPicker.value = false
}
function confirmPostSelect() {
form.postIds = [...tempPostIds.value]
// 更新显示名称
if (postList.value[0]) {
postNames.value = postList.value[0]
.filter(v => form.postIds.includes(v.postId))
.map(v => v.postName)
}
showPostPicker.value = false
}
// 角色选择确认
function openRolePicker() {
tempRoleIds.value = [...form.roleIds]
showRolePicker.value = true
}
function cancelRoleSelect() {
showRolePicker.value = false
}
function confirmRoleSelect() {
form.roleIds = [...tempRoleIds.value]
// 更新显示名称
if (roleList.value[0]) {
roleNames.value = roleList.value[0]
.filter(v => form.roleIds.includes(v.roleId))
.map(v => v.roleName)
}
showRolePicker.value = false
}
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.userId) {
updateUser(form).then(() => {
proxy.$modal.msgSuccess('修改成功')
setTimeout(() => {
uni.navigateTo({ url: `/pages_mine/pages/system/user/list` })
}, 1500)
})
} else {
addUser(form).then(() => {
proxy.$modal.msgSuccess('新增成功')
setTimeout(() => {
uni.navigateTo({ url: `/pages_mine/pages/system/user/list` })
}, 1500)
})
}
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>
<style lang="scss" scoped>
.container {
background-color: #f5f5f5;
}
.section {
margin: 24rpx;
padding: 0;
background-color: #fff;
border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
overflow: hidden;
.section-title {
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
line-height: 1.2;
font-size: 28rpx;
font-weight: 600;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 28rpx;
background: #ffffff;
border-radius: 3rpx;
margin-right: 12rpx;
}
}
.form-view {
padding: 24rpx;
.remark-textarea {
width: 100%;
min-height: 160rpx;
background: #ffffff;
border: 2rpx solid #dcdfe6;
border-radius: 8rpx;
padding: 20rpx;
box-sizing: border-box;
font-size: 28rpx;
line-height: 1.5;
}
.remark-count {
text-align: right;
font-size: 24rpx;
color: #909399;
margin-top: 8rpx;
}
.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;
}
}
.selected-tags {
margin-top: 16rpx;
padding: 20rpx;
background: #f8f9fa;
border-radius: 12rpx;
.selected-title {
font-size: 26rpx;
color: #666;
margin-bottom: 12rpx;
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
.tag-item {
padding: 8rpx 16rpx;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
border: 1rpx solid #667eea;
border-radius: 24rpx;
font-size: 24rpx;
color: #667eea;
}
}
}
}
}
.select-popup {
background: #fff;
max-height: 80vh;
display: flex;
flex-direction: column;
.popup-header {
padding: 32rpx 24rpx 24rpx;
border-bottom: 1rpx solid #f0f0f0;
.header-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 8rpx;
display: block;
}
.header-count {
font-size: 24rpx;
color: #667eea;
display: block;
}
}
.popup-content {
flex: 1;
max-height: 60vh;
padding: 16rpx 24rpx 24rpx;
.checkbox-item {
padding: 20rpx 24rpx;
margin-bottom: 12rpx;
background: #f8f9fa;
border-radius: 12rpx;
border: 2rpx solid transparent;
transition: all 0.3s;
&:active {
background: #f0f2f5;
}
}
}
.popup-footer {
padding: 24rpx;
border-top: 1rpx solid #f0f0f0;
display: flex;
gap: 24rpx;
.footer-btn {
flex: 1;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16rpx;
font-size: 32rpx;
font-weight: 500;
transition: all 0.3s;
}
.cancel-btn {
background: #f5f7fa;
color: #909399;
&:active {
background: #e8eaed;
}
}
.confirm-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
&:active {
opacity: 0.8;
}
}
}
}
</style>
<style lang="scss">
.form-btn .u-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border: none !important;
border-radius: 24rpx !important;
height: 80rpx !important;
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
}
.form-btn .u-button__text {
font-size: 30rpx !important;
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
// 备注框样式
.remark-textarea {
width: 100% !important;
min-height: 160rpx !important;
background: #ffffff !important;
border: 2rpx solid #dcdfe6 !important;
border-radius: 8rpx !important;
padding: 20rpx !important;
box-sizing: border-box !important;
font-size: 28rpx !important;
line-height: 1.5 !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;
}
/* 统一输入框高度和行高 */
.u--input,
.u-input__content__field-wrapper {
height: 60rpx !important;
line-height: 60rpx !important;
min-height: 60rpx !important;
box-sizing: border-box !important;
}
/* 强制统一所有输入框宽度 */
.u-form-item__body {
flex: 1 !important;
}
.u-form-item__body .u--input {
width: 100% !important;
box-sizing: border-box !important;
}
/* 确保输入框内的文字垂直居中 */
.u-input__content__field-wrapper__field {
line-height: 60rpx !important;
height: 60rpx !important;
}
</style>

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

@@ -9,45 +9,37 @@
<view class="section">
<view class="section-title">{{ title}}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="活动名称" prop="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">
<u-form-item label="类型" prop="typeName" required @click="handleType" class="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>
</u-form-item>
<u-form-item label="活动地点" required prop="place" >
<u--input v-model="form.place" placeholder="请填写活动地点"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('place')"></u--input>
</u-form-item>
<u-form-item label="成员" required prop="partner" >
<u--input v-model="form.partner" placeholder="请填写成员"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('partner')"></u--input>
</u-form-item>
<u-form-item label="开始时间" prop="startTime" required @click="selectStartTime()">
<u--input v-model="form.startTime" disabled disabledColor="#ffffff" placeholder="请选择开始时间" inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
<u-form-item label="开始时间" prop="startTime" required @click="selectStartTime()" class="with-arrow">
<u--input v-model="form.startTime" disabled disabledColor="#ffffff" placeholder="请选择开始时间" inputAlign="left" :customStyle="getInputStyle('startTime')"></u--input>
</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>
<u-form-item label="结束时间" prop="endTime" @click="selectEndTime()" class="with-arrow">
<u--input v-model="form.endTime" disabled disabledColor="#ffffff" placeholder="请选择结束时间" inputAlign="left" :customStyle="getInputStyle('endTime')"></u--input>
</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="activityVolumeName" required @click="handleActivityVolume" class="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>
inputAlign="left" :customStyle="getInputStyle('activityVolumeName')"></u--input>
</u-form-item>
<u-form-item label="总费用" prop="totalCost" >
<u--input v-model="form.totalCost" type="number" placeholder="请填写总费用"
inputAlign="right" border="none">
inputAlign="left" :customStyle="getInputStyle('totalCost')">
<template #suffix>
<up-text
text="元"
@@ -55,20 +47,20 @@
</template></u--input>
</u-form-item>
<u-form-item label="费用明细" prop="costDetail" labelPosition="top">
<u--textarea v-model="form.costDetail" placeholder="请填写费用明细" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.costDetail" placeholder="请填写费用明细" autoHeight inputAlign="right" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
<u-form-item label="饮食" prop="foods" labelPosition="top">
<u--textarea v-model="form.foods" placeholder="请填写饮食" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.foods" placeholder="请填写饮食" autoHeight inputAlign="right" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
<u-form-item label="收获" prop="harvest" labelPosition="top">
<u--textarea v-model="form.harvest" placeholder="请填写收获" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.harvest" placeholder="请填写收获" autoHeight inputAlign="right" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.remark" placeholder="请填写备注" autoHeight inputAlign="right" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
@@ -120,6 +112,36 @@ const flag = ref('add')
const activityVolumeList = ref([])
const showActivityVolume = ref(false)
// 表单验证错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
const inputErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
const data = reactive({
form: {
id: null,
@@ -147,7 +169,6 @@ rules: {
place: [{ required: true, message: '活动地点不能为空', trigger: ['change', 'blur'] }],
partner: [{ required: true, message: '成员不能为空', trigger: ['change', 'blur'] }],
startTime: [{ required: true, message: '开始时间不能为空', trigger: ['change', 'blur'] }],
// endTime: [{ required: true, message: '结束时间不能为空', trigger: ['change', 'blur'] }],
activityVolumeName: [{ required: true, message: '活动量不能为空', trigger: ['change', 'blur'] }],
typeName: [{ required: true, message: '类型不能为空', trigger: ['change', 'blur'] }],
}
@@ -261,6 +282,7 @@ function getData() {
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
@@ -290,7 +312,13 @@ function submit() {
})
})
}
})
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>
@@ -347,4 +375,4 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
</style>
</style>

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

@@ -9,47 +9,43 @@
<view class="section">
<view class="section-title">{{ title}}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
<u-form-item label="人员姓名" prop="personName" required @click="handlePerson" class="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>
</u-form-item>
<u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
<u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord" class="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>
</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">
<u-form-item label="就医类型" prop="typeName" required @click="handleType" class="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>
</u-form-item>
<u-form-item label="科室" prop="departments" required >
<u--input v-model="form.departments" placeholder="请填写科室"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('departments')"></u--input>
</u-form-item>
<u-form-item label="大夫" prop="doctor" required >
<u--input v-model="form.doctor" placeholder="请填写大夫"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('doctor')"></u--input>
</u-form-item>
<u-form-item label="就诊时间" prop="visitingTime" required @click="selectDate()">
<u--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 label="就诊时间" prop="visitingTime" required @click="selectDate()" class="with-arrow">
<u--input v-model="form.visitingTime" disabled disabledColor="#ffffff" placeholder="请选择就诊时间" inputAlign="left" :customStyle="getInputStyle('visitingTime')"></u--input>
</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="元"
@@ -57,20 +53,20 @@
</template></u--input>
</u-form-item>
<u-form-item label="诊断结果" prop="diagnosis" required labelPosition="top">
<u--textarea v-model="form.diagnosis" placeholder="请填写诊断结果" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.diagnosis" placeholder="请填写诊断结果" autoHeight inputAlign="right"
height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;" :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" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.prescribe" placeholder="请填写处理及医嘱" autoHeight inputAlign="right"
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;" :customStyle="getTextAreaStyle('prescribe')"></u--textarea>
</u-form-item>
<u-form-item label="费用明细" prop="costDetail" >
<u--textarea v-model="form.costDetail" placeholder="请填写费用明细" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u-form-item label="费用明细" prop="costDetail" labelPosition="top">
<u--textarea v-model="form.costDetail" placeholder="请填写费用明细" autoHeight inputAlign="right"
maxlength="2000" height="25" style="border: 2rpx solid #dcdfe6 !important; min-height: 25rpx;"></u--textarea>
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.remark" placeholder="请填写备注" autoHeight inputAlign="right"
maxlength="2000" height="25" style="border: 2rpx solid #dcdfe6 !important; min-height: 25rpx;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
@@ -115,6 +111,55 @@ const personList = ref([])
const typeList = ref([])
const showType = ref(false)
const flag = ref('add')
// 表单验证错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
const inputErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框基础样式
const textAreaBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
}
// 输入框错误样式
const textAreaErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
}
// 根据字段名获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
// 根据字段名获取输入框样式
const getTextAreaStyle = (field) => {
return errorFields.value.includes(field) ? textAreaErrorStyle : textAreaBaseStyle
}
const data = reactive({
form: {
id: null,
@@ -307,6 +352,7 @@ function datePickConfirm(e) {
datePickShow.value = false
}
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
@@ -336,15 +382,17 @@ function submit() {
})
})
}
})
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.section {
margin: 24rpx;
padding: 0;
@@ -397,4 +445,4 @@ page {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
</style>
</style>

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

@@ -6,66 +6,55 @@
title="健康档案"
>
</u-navbar>
<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="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>
</u-form-item>
<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="160rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="人员姓名" prop="personName" required @click="handlePerson" class="with-arrow">
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
inputAlign="left" :customStyle="getInputStyle('personName')"></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>
<u-form-item label="档案状态" prop="stateName" required @click="handleState">
<u-form-item label="档案名称" prop="name" required >
<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" class="with-arrow">
<u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择类型"
inputAlign="left" :customStyle="getInputStyle('typeName')"></u--input>
</u-form-item>
<u-form-item label="档案状态" prop="stateName" required @click="handleState" class="with-arrow">
<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>
inputAlign="left" :customStyle="getInputStyle('stateName')"></u--input>
</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>
<u-form-item label="发生时间" prop="occurTime" required @click="selectOccurTime()" class="with-arrow">
<u--input v-model="form.occurTime" disabled disabledColor="#ffffff" placeholder="请选择发生时间" inputAlign="left" :customStyle="getInputStyle('occurTime')"></u--input>
</u-form-item>
<u-form-item label="发生原因" prop="etiologyName" required @click="handleEtiology">
<u-form-item label="发生原因" prop="etiologyName" required @click="handleEtiology" class="with-arrow">
<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>
inputAlign="left" :customStyle="getInputStyle('etiologyName')"></u--input>
</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>
<u-form-item label="康复时间" prop="rehabilitationTime" @click="selectRehabilitationTime()" class="with-arrow">
<u--input v-model="form.rehabilitationTime" disabled disabledColor="#ffffff" placeholder="请选择康复时间" inputAlign="left" :customStyle="getInputStyle('rehabilitationTime')"></u--input>
</u-form-item>
<u-form-item label="初期症状" prop="initialSymptoms" required >
<u--textarea v-model="form.initialSymptoms" placeholder="请填写初期症状" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u-form-item label="初期症状" prop="initialSymptoms" required labelPosition="top">
<u--textarea v-model="form.initialSymptoms" placeholder="请填写初期症状" autoHeight inputAlign="right" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;" :customStyle="getTextAreaStyle('initialSymptoms')"></u--textarea>
</u-form-item>
<u-form-item label="中期症状" prop="mediumTermSymptoms" >
<u--textarea v-model="form.mediumTermSymptoms" placeholder="请填写中期症状" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u-form-item label="中期症状" prop="mediumTermSymptoms" labelPosition="top">
<u--textarea v-model="form.mediumTermSymptoms" placeholder="请填写中期症状" autoHeight inputAlign="right" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
<u-form-item label="后期症状" prop="laterStageSymptoms" >
<u--textarea v-model="form.laterStageSymptoms" placeholder="请填写后期症状" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u-form-item label="后期症状" prop="laterStageSymptoms" labelPosition="top">
<u--textarea v-model="form.laterStageSymptoms" placeholder="请填写后期症状" autoHeight inputAlign="right" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
<!-- <u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
</u-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="showPerson" :columns="personList" keyName="name" @cancel="handlePersonCancel"
@confirm="handlePersonConfirm"></u-picker>
@@ -122,6 +111,53 @@ const showEtiology = ref(false)
const rehabilitationTimeShow = ref(false)
// 表单验证错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
const inputErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框基础样式
const textAreaBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
}
// 输入框错误样式
const textAreaErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
}
// 根据字段名获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
// 根据字段名获取输入框样式
const getTextAreaStyle = (field) => {
return errorFields.value.includes(field) ? textAreaErrorStyle : textAreaBaseStyle
}
const data = reactive({
form: {
id: null,
@@ -340,6 +376,7 @@ function rehabilitationTimeConfirm(e) {
}
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
updateHealthRecord(form.value).then(res => {
@@ -358,7 +395,13 @@ function submit() {
})
})
}
})
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>
@@ -415,4 +458,4 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
</style>
</style>

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

@@ -9,20 +9,18 @@
<view class="section">
<view class="section-title">{{ title}}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
<u-form-item label="人员姓名" prop="personName" required @click="handlePerson" class="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>
</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>
<u-form-item label="测量时间" prop="measureTime" required @click="selectDate()" class="with-arrow">
<u--input v-model="form.measureTime" disabled disabledColor="#ffffff" placeholder="请选择测量时间" inputAlign="left" :customStyle="getInputStyle('measureTime')"></u--input>
</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"
@@ -31,8 +29,8 @@
</u--input>
</u-form-item>
<u-form-item label="体重" required prop="weight" >
<u--input v-model="form.weight" type="number" placeholder="请填写体重过"
inputAlign="right" border="none">
<u--input v-model="form.weight" type="number" placeholder="请填写体重"
inputAlign="left" :customStyle="getInputStyle('weight')">
<template #suffix>
<up-text
text="KG"
@@ -41,8 +39,8 @@
</u--input>
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.remark" placeholder="请填写备注" autoHeight inputAlign="right" count
maxlength="2000" height="120" style="border: 2rpx solid #dcdfe6 !important; min-height: 120rpx;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
@@ -80,6 +78,37 @@ const datePickShow = ref(false)
const showPerson = ref(false)
const title = ref("身高体重记录")
const personList = ref([])
// 表单验证错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
const inputErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
const data = reactive({
form: {
id: null,
@@ -101,7 +130,9 @@ queryPersonParams: {
},
rules: {
personName: [{ required: true, message: '人员不能为空', trigger: ['change', 'blur'] }],
measureTime: [{ required: true, message: '测量时间不能为空', trigger: ['change', 'blur'] }]
measureTime: [{ required: true, message: '测量时间不能为空', trigger: ['change', 'blur'] }],
weight: [{ required: true, message: '体重不能为空', trigger: ['change', 'blur'] }],
height: [{ required: true, message: '身高不能为空', trigger: ['change', 'blur'] }]
}
})
const { form, queryPersonParams, rules} = toRefs(data)
@@ -147,14 +178,7 @@ function handlePerson() {
function handlePersonConfirm(e) {
form.value.personName = e.value[0].name
form.value.personId = e.value[0].id
form.value.healthRecordName = ''
form.value.healthRecordId = ''
queryHealthRecordParams.value.personId=e.value[0].id
listHealthRecord(queryHealthRecordParams.value).then((response) => {
healthRecordList.value = [response.rows]
showPerson.value = false
})
showPerson.value = false
}
function handlePersonCancel() {
showPerson.value = false
@@ -168,6 +192,7 @@ function datePickConfirm(e) {
datePickShow.value = false
}
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
updateHeightWeightRecord(form.value).then(res => {
@@ -186,7 +211,13 @@ function submit() {
})
})
}
})
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>
@@ -243,4 +274,4 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
</style>
</style>

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

@@ -9,54 +9,46 @@
<view class="section">
<view class="section-title">{{ title}}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
<u-form-item label="人员姓名" prop="personName" required @click="handlePerson" class="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>
</u-form-item>
<u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
<u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord" class="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>
</u-form-item>
<u-form-item label="用药类型" prop="marTypeName" required @click="handleMarType">
<u-form-item label="用药类型" prop="marTypeName" required @click="handleMarType" class="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>
inputAlign="left" :customStyle="getInputStyle('marTypeName')"></u--input>
</u-form-item>
<u-form-item label="药品名称" prop="medicalName" required @click="handleMedical">
<u-form-item label="药品名称" prop="medicalName" required @click="handleMedical" class="with-arrow">
<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('medicalName')"></u--input>
</u-form-item>
<u-form-item label="药品来源" prop="resourceName" required @click="handleResource">
<u-form-item label="药品来源" prop="resourceName" required @click="handleResource" class="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>
inputAlign="left" :customStyle="getInputStyle('resourceName')"></u--input>
</u-form-item>
<u-form-item label="用药地点" prop="placeName" required @click="handlePlace">
<u-form-item label="用药地点" prop="placeName" required @click="handlePlace" class="with-arrow">
<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>
inputAlign="left" :customStyle="getInputStyle('placeName')"></u--input>
</u-form-item>
<u-form-item label="用药时间" prop="dosingTime" required @click="selectDate()">
<u--input v-model="form.dosingTime" disabled disabledColor="#ffffff" placeholder="请选择用药时间" inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
<u-form-item label="用药时间" prop="dosingTime" required @click="selectDate()" class="with-arrow">
<u--input v-model="form.dosingTime" disabled disabledColor="#ffffff" placeholder="请选择用药时间" inputAlign="left" :customStyle="getInputStyle('dosingTime')"></u--input>
</u-form-item>
<u-form-item label="用药剂量" prop="dosage" required >
<u--input v-model="form.dosage" placeholder="请填写用药剂量"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('dosage')"></u--input>
</u-form-item>
<u-form-item label="用药单位" prop="unitName" required @click="handleUnit">
<u-form-item label="用药单位" prop="unitName" required @click="handleUnit" class="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>
inputAlign="left" :customStyle="getInputStyle('unitName')"></u--input>
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.remark" placeholder="请填写备注" autoHeight inputAlign="right" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
@@ -126,6 +118,36 @@ const showPlace = ref(false)
const unitList = ref([])
const showUnit = ref(false)
// 表单验证错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
const inputErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
const data = reactive({
form: {
id: null,
@@ -143,7 +165,8 @@ form: {
personId: null,
resource: '1',
place: '1',
resourceName: '医院开药',
unitName: null,
resourceName: '医院开药',
placeName: '家中'
},
queryPersonParams: {
@@ -166,10 +189,10 @@ rules: {
personName: [{ required: true, message: '人员不能为空', trigger: ['change', 'blur'] }],
medicalName: [{ required: true, message: '药品名称不能为空', trigger: ['change', 'blur'] }],
marTypeName: [{ required: true, message: '用药类型不能为空', trigger: ['change', 'blur'] }],
resource: [{ required: true, message: '药品来源不能为空', trigger: ['change', 'blur'] }],
place: [{ required: true, message: '用药地点不能为空', trigger: ['change', 'blur'] }],
resourceName: [{ required: true, message: '药品来源不能为空', trigger: ['change', 'blur'] }],
placeName: [{ required: true, message: '用药地点不能为空', trigger: ['change', 'blur'] }],
unitName: [{ required: true, message: '用药单位不能为空', trigger: ['change', 'blur'] }],
dosage: [{ type: 'number', required: true, message: '用药剂量不能为空', trigger: ['change', 'blur'] }],
dosingTime: [{ required: true, message: '用药时间不能为空', trigger: ['change', 'blur'] }]
}
})
@@ -443,6 +466,7 @@ function datePickConfirm(e) {
datePickShow.value = false
}
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
@@ -473,7 +497,13 @@ function submit() {
})
})
}
})
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>
@@ -530,4 +560,4 @@ function submit() {
font-weight: 500 !important;
letter-spacing: 2rpx !important;
}
</style>
</style>

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

@@ -9,115 +9,106 @@
<view class="section">
<view class="section-title">{{ title}}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="药品全称" prop="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-form-item label="药品剂型" prop="dosageFormName" class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('dosageFormName')"></u--input>
</u-form-item>
<u-form-item label="治疗类型" prop="treatmentTypeName" @click="handleTreatmentType">
<u-form-item label="治疗类型" prop="treatmentTypeName" class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('treatmentTypeName')"></u--input>
</u-form-item>
<u-form-item label="药品分类" prop="classificationName" @click="handleClassification">
<u-form-item label="药品分类" prop="classificationName" class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('classificationName')"></u--input>
</u-form-item>
<u-form-item label="类别" prop="categoryName" @click="handleCategory">
<u-form-item label="类别" prop="categoryName" class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('categoryName')"></u--input>
</u-form-item>
<u-form-item label="包装单位" prop="packageUnitName" @click="handlePackageUnit">
<u-form-item label="包装单位" prop="packageUnitName" class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('packageUnitName')"></u--input>
</u-form-item>
<u-form-item label="是否进口" prop="isImportName" @click="handleIsImport">
<u-form-item label="是否进口" prop="isImportName" class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('isImportName')"></u--input>
</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-form-item label="规格单位" prop="unitName" class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('unitName')"></u--input>
</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-form-item label="含量单位" prop="contentUnitName" class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('contentUnitName')"></u--input>
</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" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.indications" placeholder="请填写功能主治" autoHeight inputAlign="left" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
<u-form-item label="贮藏" prop="storage" labelPosition="top">
<u--textarea v-model="form.storage" placeholder="请填写贮藏" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.storage" placeholder="请填写贮藏" autoHeight inputAlign="left" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
<u-form-item label="药品成分" prop="ingredients" labelPosition="top">
<u--textarea v-model="form.ingredients" placeholder="请填写药品成分" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.ingredients" placeholder="请填写药品成分" autoHeight inputAlign="left" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
<u-form-item label="用法用量" prop="usage" labelPosition="top">
<u--textarea v-model="form.usage" placeholder="请填写用法用量" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.usage" placeholder="请填写用法用量" autoHeight inputAlign="left" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
<u-form-item label="性状" prop="character" labelPosition="top">
<u--textarea v-model="form.character" placeholder="请填写性状" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.character" placeholder="请填写性状" autoHeight inputAlign="left" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
<u-form-item label="不良反应" prop="adverseReaction" labelPosition="top">
<u--textarea v-model="form.adverseReaction" placeholder="请填写不良反应" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.adverseReaction" placeholder="请填写不良反应" autoHeight inputAlign="left" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.remark" placeholder="请填写备注" autoHeight inputAlign="left" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
@@ -183,6 +174,29 @@ const showUnit = ref(false)
const contentUnitList = ref([])
const showContentUnit = ref(false)
// 错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '16rpx 20rpx',
backgroundColor: '#ffffff'
}
// 输入框错误样式
const inputErrorStyle = {
border: '2rpx solid #ff4d4f',
borderRadius: '8rpx',
padding: '16rpx 20rpx',
backgroundColor: '#fff2f0'
}
// 获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
const data = reactive({
form: {
@@ -465,7 +479,10 @@ function handleDosageForm() {
showContentUnit.value = false
}
function submit() {
proxy.$refs['uForm'].validate().then(() => {
// 清空错误字段
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
updateMedicineBasic(form.value).then(res => {
@@ -495,6 +512,12 @@ function submit() {
})
})
}
}).catch(errors => {
// 验证失败，记录错误字段
if (errors && errors.length > 0) {
errorFields.value = errors.map(err => err.field)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>

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

@@ -9,90 +9,82 @@
<view class="section">
<view class="section-title">{{ title}}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="治疗类型" prop="marTypeName" @click="handleMarType">
<u-form-item label="治疗类型" prop="marTypeName" class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('marTypeName')"></u--input>
</u-form-item>
<u-form-item label="药品名称" prop="medicineName" required @click="handleMedical">
<u-form-item label="药品名称" prop="medicineName" required class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('medicineName')"></u--input>
</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-form-item label="使用状态" prop="stateName" required class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('stateName')"></u--input>
</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>
<u-form-item label="购买时间" prop="purchaseDate" class="with-arrow" @click="selectDate()">
<u--input v-model="form.purchaseDate" disabled disabledColor="#ffffff" placeholder="请选择购买时间" inputAlign="left" :customStyle="getInputStyle('purchaseDate')"></u--input>
</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>
<u-form-item label="生产日期" prop="productionDate" class="with-arrow" @click="selectProductionDate()">
<u--input v-model="form.productionDate" disabled disabledColor="#ffffff" placeholder="请选择生产日期" inputAlign="left" :customStyle="getInputStyle('productionDate')"></u--input>
</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>
<u-form-item label="过期日期" prop="expiringDate" class="with-arrow" @click="selectExpiringDate()">
<u--input v-model="form.expiringDate" disabled disabledColor="#ffffff" placeholder="请选择过期日期" inputAlign="left" :customStyle="getInputStyle('expiringDate')"></u--input>
</u-form-item>
<u-form-item label="包装单位" prop="packageUnitName" @click="handlePackageUnit">
<u-form-item label="包装单位" prop="packageUnitName" class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('packageUnitName')"></u--input>
</u-form-item>
<u-form-item label="规格单位" prop="unitName" @click="handleUnit">
<u-form-item label="规格单位" prop="unitName" class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('unitName')"></u--input>
</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" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.usage" placeholder="请填写医嘱" autoHeight inputAlign="left" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.remark" placeholder="请填写备注" autoHeight inputAlign="left" count
maxlength="2000" height="45" style="border: 2rpx solid #dcdfe6 !important; min-height: 45rpx;"></u--textarea>
</u-form-item>
</u--form>
@@ -174,6 +166,30 @@ const showPackageUnit = ref(false)
const unitList = ref([])
const showUnit = ref(false)
// 错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '16rpx 20rpx',
backgroundColor: '#ffffff'
}
// 输入框错误样式
const inputErrorStyle = {
border: '2rpx solid #ff4d4f',
borderRadius: '8rpx',
padding: '16rpx 20rpx',
backgroundColor: '#fff2f0'
}
// 获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
const data = reactive({
form: {
id: null,
@@ -476,7 +492,10 @@ function datePickConfirm(e) {
datePickShow.value = false
}
function submit() {
proxy.$refs['uForm'].validate().then(() => {
// 清空错误字段
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
updateMedicineStockIn(form.value).then(res => {
@@ -505,6 +524,12 @@ function submit() {
})
})
}
}).catch(errors => {
// 验证失败，记录错误字段
if (errors && errors.length > 0) {
errorFields.value = errors.map(err => err.field)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>

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

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

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

@@ -9,38 +9,35 @@
<view class="section">
<view class="section-title">{{ title}}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="姓名" prop="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="nickName" required >
<u--input v-model="form.nickName" placeholder="请填写昵称"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('nickName')"></u--input>
</u-form-item>
<u-form-item label="类型" prop="typeName" required @click="handleType">
<u-form-item label="类型" prop="typeName" required @click="handleType" class="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>
</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 label="生日" prop="birthday" required @click="selectBirthday()" class="with-arrow">
<u--input v-model="form.birthday" disabled disabledColor="#ffffff" placeholder="请选择生日" inputAlign="left" :customStyle="getInputStyle('birthday')"></u--input>
</u-form-item>
<u-form-item label="性别" prop="sexName" required @click="handleSex">
<u-form-item label="性别" prop="sexName" required @click="handleSex" class="with-arrow">
<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>
inputAlign="left" :customStyle="getInputStyle('sexName')"></u--input>
</u-form-item>
<u-form-item label="身份证" prop="identityCard" >
<u--input v-model="form.identityCard" placeholder="请填写身份证"
inputAlign="right" border="none"></u--input>
inputAlign="left"></u--input>
</u-form-item>
<u-form-item label="身高" prop="height" >
<u--input v-model="form.height" placeholder="请填写身高"
inputAlign="right" border="none">
inputAlign="left" >
<template #suffix>
<up-text
text="CM"
@@ -49,7 +46,7 @@
</u-form-item>
<u-form-item label="体重" prop="weight" >
<u--input v-model="form.weight" placeholder="请填写体重"
inputAlign="right" border="none">
inputAlign="left">
<template #suffix>
<up-text
text="KG"
@@ -58,9 +55,9 @@
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
</u-form-item>
<u--textarea v-model="form.remark" placeholder="请输入备注" autoHeight inputAlign="right" count
maxlength="500" style="border: 2rpx solid #dcdfe6 !important;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
<u-button type="primary" text="提交" @click="submit"></u-button>
@@ -121,6 +118,7 @@ form: {
identityCard: null,
ranking: 0
},
rules: {
name: [{ required: true, message: '姓名不能为空', trigger:['change', 'blur'] }],
nickName: [{ required: true, message: '昵称不能为空', trigger: ['change', 'blur'] }],
@@ -129,6 +127,35 @@ rules: {
sexName: [{ required: true, message: '性别不能为空', trigger: ['change', 'blur'] }],
}
})
// 表单验证错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 输入框错误样式
const inputErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx',
width: '100%',
boxSizing: 'border-box'
}
// 根据字段名获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
const { form, rules} = toRefs(data)
@@ -225,6 +252,7 @@ function birthdayConfirm(e) {
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
updatePerson(form.value).then(res => {
@@ -243,8 +271,15 @@ function submit() {
})
})
}
})
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>
<style lang="scss" scoped>

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

@@ -9,29 +9,27 @@
<view class="section">
<view class="section-title">{{ title}}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
<u-form-item label="人员姓名" prop="personName" required class="with-arrow" @click="handlePerson">
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
</u-form-item>
<u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
<u-form-item label="健康档案" prop="healthRecordName" required class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('healthRecordName')"></u--input>
</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>
<u-form-item label="记录时间" prop="recordingTime" required class="with-arrow" @click="selectDate()">
<u--input v-model="form.recordingTime" disabled disabledColor="#ffffff" placeholder="请选择记录时间" inputAlign="left" :customStyle="getInputStyle('recordingTime')"></u--input>
</u-form-item>
<u-form-item label="记录内容" required prop="content" >
<u--textarea v-model="form.content" placeholder="请填写记录内容" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u-form-item label="记录内容" required prop="content" labelPosition="top">
<u--textarea v-model="form.content" placeholder="请填写记录内容" autoHeight inputAlign="left" count
maxlength="2000" height="120" style="border: 2rpx solid #dcdfe6 !important; min-height: 120rpx;" :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" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.remark" placeholder="请填写备注" autoHeight inputAlign="left" count
maxlength="2000" height="120" style="border: 2rpx solid #dcdfe6 !important; min-height: 120rpx;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
@@ -71,6 +69,48 @@ const showHealthRecord = ref(false)
const title = ref("记录内容记录")
const healthRecordList = ref([])
const personList = ref([])
// 错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '16rpx 20rpx',
backgroundColor: '#ffffff'
}
// 输入框错误样式
const inputErrorStyle = {
border: '2rpx solid #ff4d4f',
borderRadius: '8rpx',
padding: '16rpx 20rpx',
backgroundColor: '#fff2f0'
}
// 输入框基础样式
const textAreaBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
}
// 输入框错误样式
const textAreaErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
}
// 根据字段名获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
// 根据字段名获取输入框样式
const getTextAreaStyle = (field) => {
return errorFields.value.includes(field) ? textAreaErrorStyle : textAreaBaseStyle
}
const data = reactive({
form: {
id: null,
@@ -215,7 +255,10 @@ function datePickConfirm(e) {
datePickShow.value = false
}
function submit() {
proxy.$refs['uForm'].validate().then(() => {
// 清空错误字段
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
updateProcessRecord(form.value).then(res => {
@@ -246,6 +289,12 @@ function submit() {
})
})
}
}).catch(errors => {
// 验证失败，记录错误字段
if (errors && errors.length > 0) {
errorFields.value = errors.map(err => err.field)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>

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

@@ -9,25 +9,25 @@
<view class="section">
<view class="section-title">{{ title}}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="人员姓名" prop="personName" required @click="handlePerson">
<u-form-item label="人员姓名" prop="personName" required class="with-arrow" @click="handlePerson">
<u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
inputAlign="right" border="none"></u--input>
<u-icon slot="right" name="arrow-down"></u-icon>
inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
</u-form-item>
<u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
<u-form-item label="健康档案" prop="healthRecordName" required class="with-arrow" @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>
inputAlign="left" :customStyle="getInputStyle('healthRecordName')"></u--input>
</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>
<u-form-item label="测量时间" prop="measureTime" required class="with-arrow" @click="selectDate()">
<u--input v-model="form.measureTime" disabled disabledColor="#ffffff" placeholder="请选择测量时间" inputAlign="left" :customStyle="getInputStyle('measureTime')"></u--input>
</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="℃"
@@ -36,8 +36,8 @@
</u--input>
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
maxlength="2000" style="padding:18rpx 0;"></u--textarea>
<u--textarea v-model="form.remark" placeholder="请填写备注" autoHeight inputAlign="left" count
maxlength="2000" height="120" style="border: 2rpx solid #dcdfe6 !important; min-height: 120rpx;"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">
@@ -77,6 +77,31 @@ const showHealthRecord = ref(false)
const title = ref("体温记录")
const healthRecordList = ref([])
const personList = ref([])
// 错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '16rpx 20rpx',
backgroundColor: '#ffffff'
}
// 输入框错误样式
const inputErrorStyle = {
border: '2rpx solid #ff4d4f',
borderRadius: '8rpx',
padding: '16rpx 20rpx',
backgroundColor: '#fff2f0'
}
// 获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
const data = reactive({
form: {
id: null,
@@ -218,7 +243,10 @@ function datePickConfirm(e) {
datePickShow.value = false
}
function submit() {
proxy.$refs['uForm'].validate().then(() => {
// 清空错误字段
errorFields.value = []
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
updateTemperatureRecord(form.value).then(res => {
@@ -249,6 +277,12 @@ function submit() {
})
})
}
}).catch(errors => {
// 验证失败，记录错误字段
if (errors && errors.length > 0) {
errorFields.value = errors.map(err => err.field)
}
proxy.$modal.msgError('请填写完整信息')
})
}
</script>

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

@@ -88,3 +88,151 @@
}
}
}
// ==================== 表单样式（参考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,
.u--input *,
.u-input,
.u-input *,
.u-input__content,
.u-input__content * {
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;
}
}