qdintc/intc-single-ultra-app
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-07 00:36:25 +08:00
parent 7eef22d90c
commit 3a35c8a6f6
10 changed files with 669 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/pages_mine/pages/system/config/addEdit.vue
View File

@@ -7,30 +7,30 @@
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="参数名称" prop="configName" required>
<u--input v-model="form.configName" placeholder="请输入参数名称"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('configName')"></u--input>
</u-form-item>
<u-form-item label="参数键名" prop="configKey" required>
<u--input v-model="form.configKey" placeholder="请输入参数键名"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('configKey')"></u--input>
</u-form-item>
<u-form-item label="参数键值" prop="configValue" required>
<u--input v-model="form.configValue" placeholder="请输入参数键值"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('configValue')"></u--input>
</u-form-item>
<u-form-item label="系统内置" prop="typeName" @click="showTypePicker = true">
<u--input v-model="typeName" 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="typeName" 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">
@@ -65,6 +65,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 = {
configName: [
{ required: true, message: '参数名称不能为空', trigger: ['blur', 'change'] }
@@ -118,6 +144,7 @@ function handleTypeConfirm(e) {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
console.log('submit 被调用')
proxy.$refs['uForm'].validate().then(() => {
console.log('验证通过', form.configId)
@@ -142,7 +169,11 @@ function submit() {
})
})
}
}).catch(() => {
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
console.log('验证失败')
proxy.$refs['uToast'].show({
type: 'error',
@@ -193,6 +224,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">

75
src/pages_mine/pages/system/dept/addEdit.vue
View File

@@ -6,16 +6,16 @@
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="上级部门" prop="parentName" @click="showDeptPicker = true">
<u--input v-model="parentName" 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="parentName" 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="deptName" required>
<u--input v-model="form.deptName" placeholder="请输入部门名称" maxlength="30"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('deptName')"></u--input>
</u-form-item>
<u-form-item label="显示排序">
@@ -24,25 +24,25 @@
<u-form-item label="负责人" prop="leader">
<u--input v-model="form.leader" placeholder="请输入负责人" maxlength="20"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('leader')"></u--input>
</u-form-item>
<u-form-item label="联系电话" prop="phone">
<u--input v-model="form.phone" placeholder="请输入联系电话" maxlength="11"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('phone')"></u--input>
</u-form-item>
<u-form-item label="邮箱" prop="email">
<u--input v-model="form.email" placeholder="请输入邮箱" maxlength="50"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('email')"></u--input>
</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>
<view class="form-btn">
@@ -84,6 +84,32 @@ const form = reactive({
status: '0'
})
// 表单验证错误字段
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 = {
deptName: [
{ required: true, message: '部门名称不能为空', trigger: ['blur', 'change'] }
@@ -218,6 +244,7 @@ function handleDeptConfirm(e) {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.deptId) {
updateDept(form).then(() => {
@@ -236,7 +263,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: '请填写完整信息'
@@ -286,6 +317,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">

55
src/pages_mine/pages/system/dict/addEdit.vue
View File

@@ -7,17 +7,17 @@
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="字典名称" prop="dictName" required>
<u--input v-model="form.dictName" placeholder="请输入字典名称"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('dictName')"></u--input>
</u-form-item>
<u-form-item label="字典类型" prop="dictType" required>
<u--input v-model="form.dictType" placeholder="请输入字典类型"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('dictType')"></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="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">
@@ -45,6 +45,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 = {
dictName: [
{ required: true, message: '字典名称不能为空', trigger: ['blur', 'change'] }
@@ -70,6 +96,7 @@ function getDetail(id) {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
console.log('submit 被调用')
proxy.$refs['uForm'].validate().then(() => {
console.log('验证通过', form.dictId)
@@ -94,7 +121,11 @@ function submit() {
})
})
}
}).catch(() => {
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
console.log('验证失败')
proxy.$refs['uToast'].show({
type: 'error',
@@ -145,6 +176,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">

69
src/pages_mine/pages/system/dictData/addEdit.vue
View File

@@ -7,35 +7,35 @@
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="字典类型">
<u--input v-model="form.dictType" disabled disabledColor="#ffffff" placeholder="字典类型"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
</u-form-item>
<u-form-item label="数据标签" prop="dictLabel" required>
<u--input v-model="form.dictLabel" placeholder="请输入数据标签"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('dictLabel')"></u--input>
</u-form-item>
<u-form-item label="数据键值" prop="dictValue" required>
<u--input v-model="form.dictValue" placeholder="请输入数据键值"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('dictValue')"></u--input>
</u-form-item>
<u-form-item label="显示排序" prop="dictSort" required>
<u--input v-model.number="form.dictSort" type="digit" placeholder="请输入显示排序"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('dictSort')"></u--input>
</u-form-item>
<u-form-item label="回显样式" prop="listClassName" @click="showListClassPicker = true">
<u--input v-model="listClassName" 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="listClassName" 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">
@@ -78,6 +78,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 = {
dictLabel: [
{ required: true, message: '数据标签不能为空', trigger: ['blur', 'change'] }
@@ -138,6 +164,7 @@ function handleListClassConfirm(e) {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.dictCode) {
updateData(form).then(() => {
@@ -154,7 +181,11 @@ function submit() {
}, 1500)
})
}
}).catch(() => {
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
@@ -201,6 +232,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">

47
src/pages_mine/pages/system/menu/addEdit.vue
View File

@@ -166,6 +166,32 @@ const form = reactive({
status: '0'
})
// 表单验证错误字段
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 = {
menuName: [
{ required: true, message: '菜单名称不能为空', trigger: ['blur', 'change'] }
@@ -336,6 +362,7 @@ function handleStatusConfirm(e) {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs.uForm.validate().then(() => {
if (form.menuId) {
updateMenu(form).then(() => {
@@ -352,7 +379,11 @@ function submit() {
}, 1500)
})
}
}).catch(() => {
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
@@ -399,6 +430,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">

44
src/pages_mine/pages/system/notice/addEdit.vue
View File

@@ -92,6 +92,32 @@ const form = reactive({
status: '0'
})
// 表单验证错误字段
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
}
onLoad((options) => {
console.log('页面加载参数:', options)
if (options.id) {
@@ -321,17 +347,21 @@ async function submitForm() {
}
function doSubmit() {
errorFields.value = [] // 清空错误字段
console.log('准备提交的表单数据:', form)
if (!form.noticeTitle) {
errorFields.value.push('noticeTitle')
modal.msgError('请输入公告标题')
return
}
if (!form.noticeType) {
errorFields.value.push('noticeType')
modal.msgError('请选择公告类型')
return
}
if (!form.noticeContent || form.noticeContent.trim() === '') {
errorFields.value.push('noticeContent')
modal.msgError('请输入公告内容')
return
}
@@ -427,6 +457,20 @@ function doSubmit() {
}
}
.select-input-wrapper {
position: relative;
.select-arrow {
position: absolute;
right: 24rpx;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 28rpx;
pointer-events: none;
}
}
.editor-container {
width: 100%;
border: 2rpx solid #e8edf3;

65
src/pages_mine/pages/system/post/addEdit.vue
View File

@@ -7,12 +7,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="岗位排序">
@@ -20,16 +20,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">
@@ -64,6 +64,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'] }
@@ -113,6 +139,7 @@ function handleStatusConfirm(e) {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
console.log('提交的表单数据:', form)
if (form.postId) {
@@ -132,7 +159,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: '请填写完整信息'
@@ -178,6 +209,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">

75
src/pages_mine/pages/system/role/addEdit.vue
View File

@@ -8,12 +8,12 @@
<u-form-item label="角色名称" prop="roleName" required>
<u--input v-model="form.roleName" placeholder="请输入角色名称" maxlength="30"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('roleName')"></u--input>
</u-form-item>
<u-form-item label="权限字符" prop="roleKey" required>
<u--input v-model="form.roleKey" placeholder="请输入权限字符" maxlength="100"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('roleKey')"></u--input>
</u-form-item>
<u-form-item label="显示顺序" required>
@@ -21,24 +21,24 @@
</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-item label="菜单权限" @click="openMenuPicker">
<u--input :value="menuPermissionText" 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 :value="menuPermissionText" disabled disabledColor="#ffffff" placeholder="请选择菜单权限"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
</view>
</u-form-item>
<!-- 已选菜单标签展示 -->
@@ -149,6 +149,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 selectedMenuCount = computed(() => {
return tempSelectedMenuIds.value.length
})
@@ -265,6 +291,7 @@ function confirmMenuSelect() {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
// 设置菜单权限
form.menuIds = selectedMenuIds.value
@@ -284,7 +311,11 @@ function submit() {
}, 1500)
})
}
}).catch(() => {
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
@@ -499,6 +530,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">

161
src/pages_mine/pages/system/user/addEdit.vue
View File

@@ -3,55 +3,55 @@
<view class="section">
<view class="section-title">{{ title }}</view>
<view class="form-view">
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="160rpx"
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
<u-form-item label="用户昵称" prop="nickName" required>
<u--input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30"
inputAlign="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('nickName')"></u--input>
</u-form-item>
<u-form-item label="用户名称" prop="userName" required v-if="!form.userId">
<u--input v-model="form.userName" placeholder="请输入用户名称" maxlength="30"
inputAlign="right" border="none"></u--input>
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="right" border="none"></u--input>
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="right" border="none"></u--input>
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="right" border="none"></u--input>
inputAlign="left" :customStyle="getInputStyle('email')"></u--input>
</u-form-item>
<u-form-item label="用户性别" prop="sexName" @click="showSexPicker = true">
<u--input v-model="sexName" 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="sexName" 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="deptName" @click="showDeptPicker = true">
<u--input v-model="deptName" 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="deptName" 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="postNames" @click="openPostPicker">
<u--input :value="postNamesText" 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 :value="postNamesText" disabled disabledColor="#ffffff" placeholder="请选择岗位"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
</view>
</u-form-item>
<!-- 已选岗位标签展示 -->
@@ -65,11 +65,11 @@
</view>
<u-form-item label="角色" prop="roleNames" @click="openRolePicker">
<u--input :value="roleNamesText" 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 :value="roleNamesText" disabled disabledColor="#ffffff" placeholder="请选择角色"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
<u-icon name="arrow-down" class="select-arrow"></u-icon>
</view>
</u-form-item>
<!-- 已选角色标签展示 -->
@@ -83,16 +83,16 @@
</view>
<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="300"
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
</u-form-item>
</u--form>
<view class="form-btn">
@@ -205,6 +205,32 @@ const roleNamesText = computed(() => {
return roleNames.value.join('、') || ''
})
// 表单验证错误字段
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 = {
nickName: [
{ required: true, message: '用户昵称不能为空', trigger: ['blur', 'change'] }
@@ -427,6 +453,7 @@ function confirmRoleSelect() {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.userId) {
updateUser(form).then(() => {
@@ -443,7 +470,11 @@ function submit() {
}, 1500)
})
}
}).catch(() => {
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
@@ -485,10 +516,44 @@ function submit() {
.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;
}
// 下拉选择输入框容器
.select-input-wrapper {
position: relative;
.select-arrow {
position: absolute;
right: 24rpx;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 28rpx;
pointer-events: none;
}
}
.selected-tags {
margin-top: 16rpx;
padding: 20rpx;
@@ -609,4 +674,32 @@ function submit() {
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;
}
</style>

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

@@ -88,3 +88,117 @@
}
}
}
// ==================== 表单样式（参考PC端Element UI）====================
// 表单容器样式
.form-view {
// 表单项间距
:deep(.u-form-item) {
margin-bottom: 5rpx;
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) {
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;
}
// 统一图标颜色
:deep(.u-icon) {
color: #909399 !important;
}
}