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-08 00:50:05 +08:00
parent 4265f85106
commit 167693570a
7 changed files with 18 additions and 751 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,8 +29,8 @@
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--input v-model="form.remark" placeholder="请输入备注" maxlength="500"
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
<u--textarea v-model="form.remark" placeholder="请输入备注" inputAlign="right" count
maxlength="500" style="border: 2rpx solid #dcdfe6 !important;height：160rpx"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">

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

@@ -16,8 +16,8 @@
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--input v-model="form.remark" placeholder="请输入备注" maxlength="500"
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
<u--textarea v-model="form.remark" placeholder="请输入备注" inputAlign="right" count
maxlength="500" style="border: 2rpx solid #dcdfe6 !important;height：160rpx"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">

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

@@ -34,8 +34,8 @@
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--input v-model="form.remark" placeholder="请输入备注" maxlength="500"
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
<u--textarea v-model="form.remark" placeholder="请输入备注" inputAlign="right" count
maxlength="500" style="border: 2rpx solid #dcdfe6 !important;height：160rpx"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">

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

@@ -28,8 +28,8 @@
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--input v-model="form.remark" placeholder="请输入备注" maxlength="500"
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
<u--textarea v-model="form.remark" placeholder="请输入备注" inputAlign="right" count
maxlength="500" style="border: 2rpx solid #dcdfe6 !important;height：160rpx"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">

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

@@ -29,8 +29,8 @@
</u-form-item>
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--input v-model="form.remark" placeholder="请输入备注" maxlength="500"
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
<u--textarea v-model="form.remark" placeholder="请输入备注" inputAlign="right" count
maxlength="500" style="border: 2rpx solid #dcdfe6 !important;height：160rpx"></u--textarea>
</u-form-item>
<u-form-item label="菜单权限" @click="openMenuPicker">

732
src/pages_mine/pages/system/user/addEdit copy.vue
View File

@@ -1,732 +0,0 @@
<template>
<view class="container" style="paddingBottom:1rpx;">
<u-navbar
leftIconSize="40rpx"
leftIconColor="#333333"
:title="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" labelWidth="160rpx"
: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" class="with-arrow">
<u--input v-model="sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
</u-form-item>
<u-form-item label="归属部门" prop="deptName" @click="showDeptPicker = true" class="with-arrow">
<u--input v-model="deptName" disabled disabledColor="#ffffff" placeholder="请选择归属部门"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
</u-form-item>
<u-form-item label="岗位" prop="postNames" @click="openPostPicker" class="with-arrow">
<u--input :value="postNamesText" disabled disabledColor="#ffffff" placeholder="请选择岗位"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
</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" class="with-arrow">
<u--input :value="roleNamesText" disabled disabledColor="#ffffff" placeholder="请选择角色"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
</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" class="with-arrow">
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
</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="28rpx"></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="28rpx"></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: '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 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;
}
.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: 85vh;
display: flex;
flex-direction: column;
border-radius: 24rpx 24rpx 0 0;
.popup-header {
padding: 40rpx 32rpx 32rpx;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
border-bottom: 2rpx solid #f5f5f5;
position: relative;
&::after {
content: '';
position: absolute;
top: 16rpx;
left: 50%;
transform: translateX(-50%);
width: 80rpx;
height: 6rpx;
background: #e0e0e0;
border-radius: 3rpx;
}
.header-title {
font-size: 34rpx;
font-weight: 600;
color: #333;
margin-bottom: 12rpx;
display: block;
letter-spacing: 1rpx;
}
.header-count {
font-size: 26rpx;
color: #667eea;
display: block;
font-weight: 500;
}
}
.popup-content {
flex: 1;
max-height: 55vh;
padding: 16rpx 32rpx 32rpx;
overflow-y: auto;
.checkbox-item {
padding: 24rpx 20rpx;
margin-bottom: 8rpx;
background: #fafafa;
border-radius: 12rpx;
border: 2rpx solid transparent;
transition: all 0.3s ease;
&:hover {
background: rgba(102, 126, 234, 0.05);
border-color: #667eea;
}
&:last-child {
margin-bottom: 0;
}
}
}
.popup-footer {
padding: 24rpx 32rpx 32rpx;
background: #fafafa;
display: flex;
gap: 24rpx;
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
.footer-btn {
flex: 1;
height: 92rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20rpx;
font-size: 32rpx;
font-weight: 500;
transition: all 0.3s;
letter-spacing: 2rpx;
}
.cancel-btn {
background: #ffffff;
color: #666;
border: 2rpx solid #e0e0e0;
&:active {
background: #f5f5f5;
border-color: #d0d0d0;
}
}
.confirm-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.4);
border: none;
&:active {
transform: translateY(2rpx);
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
}
}
}
}
</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;
}
/* 统一输入框宽度 */
.u-form-item__body {
flex: 1 !important;
}
.u-form-item__body .u--input {
width: 100% !important;
box-sizing: border-box !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>

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

@@ -89,10 +89,9 @@
<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--textarea v-model="form.remark" placeholder="请输入备注" inputAlign="right" count
maxlength="500" style="border: 2rpx solid #dcdfe6 !important;height：160rpx"></u--textarea>
</u-form-item>
</u--form>
<view class="form-btn">