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

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>