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

This commit is contained in:
tianyongbao
2026-02-07 00:36:25 +08:00
parent 49f6875a55
commit d46137b83c
12 changed files with 715 additions and 104 deletions

View File

@@ -13,12 +13,12 @@
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="岗位名称" prop="postName" required>
<u--input v-model="form.postName" placeholder="请输入岗位名称" maxlength="30"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('postName')"></u--input>
</u-form-item>
<u-form-item label="岗位编码" prop="postCode" required>
<u--input v-model="form.postCode" placeholder="请输入岗位编码" maxlength="30"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('postCode')"></u--input>
</u-form-item>
<u-form-item label="岗位排序">
@@ -26,16 +26,16 @@
</u-form-item>
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
inputAlign="right" border="none"></u--input>
<template #right>
<u-icon name="arrow-down"></u-icon>
</template>
<view class="select-input-wrapper">
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
</view>
</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="500" style="padding:18rpx 0;"></u--textarea>
<u--input v-model="form.remark" placeholder="请输入备注" maxlength="500"
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
</u-form-item>
</u--form>
<view class="form-btn">
@@ -70,6 +70,32 @@ const form = reactive({
remark: undefined
})
// 表单验证错误字段
const errorFields = ref([])
// 输入框基础样式
const inputBaseStyle = {
background: '#ffffff',
border: '2rpx solid #dcdfe6',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
}
// 输入框错误样式
const inputErrorStyle = {
background: '#fef0f0',
border: '2rpx solid #f56c6c',
borderRadius: '8rpx',
padding: '0 24rpx',
height: '68rpx'
}
// 根据字段名获取输入框样式
const getInputStyle = (field) => {
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
}
const rules = {
postName: [
{ required: true, message: '岗位名称不能为空', trigger: ['blur', 'change'] }
@@ -119,6 +145,7 @@ function handleStatusConfirm(e) {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
console.log('提交的表单数据:', form)
if (form.postId) {
@@ -138,7 +165,11 @@ function submit() {
})
})
}
}).catch(() => {
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$refs['uToast'].show({
type: 'error',
message: '请填写完整信息'
@@ -184,6 +215,20 @@ function submit() {
}
}
}
.select-input-wrapper {
position: relative;
.select-arrow {
position: absolute;
right: 24rpx;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 28rpx;
pointer-events: none;
}
}
</style>
<style lang="scss">