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 49f6875a55
commit d46137b83c
12 changed files with 715 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
node_modules/websocket-stream/node_modules/ws/lib/.DS_Store generated vendored Normal file
View File

Binary file not shown.

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

@@ -13,30 +13,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">
@@ -71,6 +71,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'] }
@@ -124,6 +150,7 @@ function handleTypeConfirm(e) {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
console.log('submit 被调用')
proxy.$refs['uForm'].validate().then(() => {
console.log('验证通过', form.configId)
@@ -148,7 +175,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',
@@ -199,6 +230,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

@@ -12,16 +12,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="显示排序">
@@ -30,25 +30,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">
@@ -90,6 +90,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'] }
@@ -224,6 +250,7 @@ function handleDeptConfirm(e) {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.deptId) {
updateDept(form).then(() => {
@@ -242,7 +269,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: '请填写完整信息'
@@ -292,6 +323,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

@@ -13,17 +13,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">
@@ -51,6 +51,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'] }
@@ -76,6 +102,7 @@ function getDetail(id) {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
console.log('submit 被调用')
proxy.$refs['uForm'].validate().then(() => {
console.log('验证通过', form.dictId)
@@ -100,7 +127,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',
@@ -151,6 +182,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

@@ -13,35 +13,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">
@@ -84,6 +84,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'] }
@@ -144,6 +170,7 @@ function handleListClassConfirm(e) {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.dictCode) {
updateData(form).then(() => {
@@ -160,7 +187,11 @@ function submit() {
}, 1500)
})
}
}).catch(() => {
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
@@ -207,6 +238,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/job/addEdit.vue
View File

@@ -106,6 +106,32 @@ const form = reactive({
remark: ''
})
// 表单验证错误字段
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 = {
jobName: [
{ required: true, message: '任务名称不能为空', trigger: ['blur', 'change'] }
@@ -195,6 +221,7 @@ function handleMisfirePolicyConfirm(e) {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
const submitForm = { ...form }
if (jobId.value) {
@@ -214,7 +241,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: '请填写完整信息'
@@ -264,6 +295,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

@@ -172,6 +172,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'] }
@@ -342,6 +368,7 @@ function handleStatusConfirm(e) {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs.uForm.validate().then(() => {
if (form.menuId) {
updateMenu(form).then(() => {
@@ -358,7 +385,11 @@ function submit() {
}, 1500)
})
}
}).catch(() => {
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
@@ -405,6 +436,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

@@ -98,6 +98,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) {
@@ -327,17 +353,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
}
@@ -433,6 +463,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

@@ -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">

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

@@ -14,12 +14,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>
@@ -27,24 +27,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>
<!-- 已选菜单标签展示 -->
@@ -155,6 +155,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
})
@@ -271,6 +297,7 @@ function confirmMenuSelect() {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
// 设置菜单权限
form.menuIds = selectedMenuIds.value
@@ -290,7 +317,11 @@ function submit() {
}, 1500)
})
}
}).catch(() => {
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
@@ -505,6 +536,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

@@ -9,55 +9,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>
<!-- 已选岗位标签展示 -->
@@ -71,11 +71,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>
<!-- 已选角色标签展示 -->
@@ -89,16 +89,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">
@@ -211,6 +211,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'] }
@@ -433,6 +459,7 @@ function confirmRoleSelect() {
// 提交
function submit() {
errorFields.value = [] // 清空错误字段
proxy.$refs['uForm'].validate().then(() => {
if (form.userId) {
updateUser(form).then(() => {
@@ -449,7 +476,11 @@ function submit() {
}, 1500)
})
}
}).catch(() => {
}).catch((errors) => {
// 记录验证失败的字段
if (errors && Array.isArray(errors)) {
errorFields.value = errors.map(err => err.field || err.prop)
}
proxy.$modal.msgError('请填写完整信息')
})
}
@@ -491,10 +522,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;
@@ -615,4 +680,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;
}
}