fix: 功能bug修复,完善。
This commit is contained in:
@@ -26,12 +26,10 @@
|
|||||||
inputAlign="left" :customStyle="getInputStyle('configValue')"></u--input>
|
inputAlign="left" :customStyle="getInputStyle('configValue')"></u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="系统内置" prop="typeName" @click="showTypePicker = true">
|
<u-form-item label="系统内置" prop="typeName" @click="showTypePicker = true" class="with-arrow">
|
||||||
<view class="select-input-wrapper">
|
|
||||||
<u--input v-model="typeName" disabled disabledColor="#ffffff" placeholder="请选择系统内置"
|
<u--input v-model="typeName" disabled disabledColor="#ffffff" placeholder="请选择系统内置"
|
||||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
<u-icon name="arrow-down" class="select-arrow"></u-icon>
|
|
||||||
</view>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||||
@@ -180,11 +178,7 @@ function submit() {
|
|||||||
if (errors && Array.isArray(errors)) {
|
if (errors && Array.isArray(errors)) {
|
||||||
errorFields.value = errors.map(err => err.field || err.prop)
|
errorFields.value = errors.map(err => err.field || err.prop)
|
||||||
}
|
}
|
||||||
console.log('验证失败')
|
proxy.$modal.msgError('请填写完整信息')
|
||||||
proxy.$refs['uToast'].show({
|
|
||||||
type: 'error',
|
|
||||||
message: '请填写完整信息'
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -11,12 +11,12 @@
|
|||||||
<view class="form-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" label-width="auto"
|
||||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||||
<u-form-item label="上级部门" prop="parentName" @click="showDeptPicker = true">
|
<u-form-item label="上级部门" prop="parentName" @click="showDeptPicker = true" class="with-arrow">
|
||||||
<view class="select-input-wrapper">
|
|
||||||
<u--input v-model="parentName" disabled disabledColor="#ffffff" placeholder="请选择上级部门"
|
<u--input v-model="parentName" disabled disabledColor="#ffffff" placeholder="请选择上级部门"
|
||||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
<u-icon name="arrow-down" class="select-arrow"></u-icon>
|
|
||||||
</view>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="部门名称" prop="deptName" required>
|
<u-form-item label="部门名称" prop="deptName" required>
|
||||||
@@ -43,12 +43,11 @@
|
|||||||
inputAlign="left" :customStyle="getInputStyle('email')"></u--input>
|
inputAlign="left" :customStyle="getInputStyle('email')"></u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
|
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true" class="with-arrow">
|
||||||
<view class="select-input-wrapper">
|
|
||||||
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
||||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
<u-icon name="arrow-down" class="select-arrow"></u-icon>
|
|
||||||
</view>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
</u--form>
|
</u--form>
|
||||||
<view class="form-btn">
|
<view class="form-btn">
|
||||||
@@ -274,10 +273,7 @@ function submit() {
|
|||||||
if (errors && Array.isArray(errors)) {
|
if (errors && Array.isArray(errors)) {
|
||||||
errorFields.value = errors.map(err => err.field || err.prop)
|
errorFields.value = errors.map(err => err.field || err.prop)
|
||||||
}
|
}
|
||||||
proxy.$refs['uToast'].show({
|
proxy.$modal.msgError('请填写完整信息')
|
||||||
type: 'error',
|
|
||||||
message: '请填写完整信息'
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -31,7 +31,6 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<u-toast ref="uToast"></u-toast>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -60,7 +59,9 @@ const inputBaseStyle = {
|
|||||||
border: '2rpx solid #dcdfe6',
|
border: '2rpx solid #dcdfe6',
|
||||||
borderRadius: '8rpx',
|
borderRadius: '8rpx',
|
||||||
padding: '0 24rpx',
|
padding: '0 24rpx',
|
||||||
height: '68rpx'
|
height: '68rpx',
|
||||||
|
width: '100%',
|
||||||
|
boxSizing: 'border-box'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 输入框错误样式
|
// 输入框错误样式
|
||||||
@@ -69,7 +70,9 @@ const inputErrorStyle = {
|
|||||||
border: '2rpx solid #f56c6c',
|
border: '2rpx solid #f56c6c',
|
||||||
borderRadius: '8rpx',
|
borderRadius: '8rpx',
|
||||||
padding: '0 24rpx',
|
padding: '0 24rpx',
|
||||||
height: '68rpx'
|
height: '68rpx',
|
||||||
|
width: '100%',
|
||||||
|
boxSizing: 'border-box'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据字段名获取输入框样式
|
// 根据字段名获取输入框样式
|
||||||
@@ -103,28 +106,20 @@ function getDetail(id) {
|
|||||||
// 提交
|
// 提交
|
||||||
function submit() {
|
function submit() {
|
||||||
errorFields.value = [] // 清空错误字段
|
errorFields.value = [] // 清空错误字段
|
||||||
console.log('submit 被调用')
|
|
||||||
proxy.$refs['uForm'].validate().then(() => {
|
proxy.$refs['uForm'].validate().then(() => {
|
||||||
console.log('验证通过', form.dictId)
|
|
||||||
if (form.dictId) {
|
if (form.dictId) {
|
||||||
updateType(form).then(() => {
|
updateType(form).then(() => {
|
||||||
console.log('修改成功,将跳转')
|
proxy.$modal.msgSuccess('修改成功')
|
||||||
proxy.$refs['uToast'].show({
|
setTimeout(() => {
|
||||||
message: '修改成功', complete() {
|
uni.navigateTo({ url: `/pages_mine/pages/system/dict/list` })
|
||||||
console.log('complete 被调用,执行跳转')
|
}, 1500)
|
||||||
uni.navigateTo({ url: `/pages_mine/pages/system/dict/list` })
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
addType(form).then(() => {
|
addType(form).then(() => {
|
||||||
console.log('新增成功,将跳转')
|
proxy.$modal.msgSuccess('新增成功')
|
||||||
proxy.$refs['uToast'].show({
|
setTimeout(() => {
|
||||||
message: '新增成功', complete() {
|
uni.navigateTo({ url: `/pages_mine/pages/system/dict/list` })
|
||||||
console.log('complete 被调用,执行跳转')
|
}, 1500)
|
||||||
uni.navigateTo({ url: `/pages_mine/pages/system/dict/list` })
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}).catch((errors) => {
|
}).catch((errors) => {
|
||||||
@@ -132,11 +127,7 @@ function submit() {
|
|||||||
if (errors && Array.isArray(errors)) {
|
if (errors && Array.isArray(errors)) {
|
||||||
errorFields.value = errors.map(err => err.field || err.prop)
|
errorFields.value = errors.map(err => err.field || err.prop)
|
||||||
}
|
}
|
||||||
console.log('验证失败')
|
proxy.$modal.msgError('请填写完整信息')
|
||||||
proxy.$refs['uToast'].show({
|
|
||||||
type: 'error',
|
|
||||||
message: '请填写完整信息'
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -182,20 +173,6 @@ 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>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
@@ -31,12 +31,10 @@
|
|||||||
inputAlign="left" :customStyle="getInputStyle('dictSort')"></u--input>
|
inputAlign="left" :customStyle="getInputStyle('dictSort')"></u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="回显样式" prop="listClassName" @click="showListClassPicker = true">
|
<u-form-item label="回显样式" prop="listClassName" @click="showListClassPicker = true" class="with-arrow">
|
||||||
<view class="select-input-wrapper">
|
|
||||||
<u--input v-model="listClassName" disabled disabledColor="#ffffff" placeholder="请选择回显样式"
|
<u--input v-model="listClassName" disabled disabledColor="#ffffff" placeholder="请选择回显样式"
|
||||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
<u-icon name="arrow-down" class="select-arrow"></u-icon>
|
|
||||||
</view>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||||
|
|||||||
@@ -12,25 +12,19 @@
|
|||||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
||||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||||
|
|
||||||
<u-form-item label="上级菜单" prop="parentName" @click="showParentPicker = true">
|
<u-form-item label="上级菜单" prop="parentName" @click="showParentPicker = true" class="with-arrow">
|
||||||
<u--input v-model="parentName" disabled disabledColor="#ffffff" placeholder="请选择上级菜单"
|
<u--input v-model="parentName" disabled disabledColor="#ffffff" placeholder="请选择上级菜单"
|
||||||
inputAlign="right" border="none"></u--input>
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
<template #right>
|
|
||||||
<u-icon name="arrow-down"></u-icon>
|
|
||||||
</template>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="菜单类型" prop="menuTypeName" @click="showMenuTypePicker = true">
|
<u-form-item label="菜单类型" prop="menuTypeName" @click="showMenuTypePicker = true" class="with-arrow">
|
||||||
<u--input v-model="menuTypeName" disabled disabledColor="#ffffff" placeholder="请选择菜单类型"
|
<u--input v-model="menuTypeName" disabled disabledColor="#ffffff" placeholder="请选择菜单类型"
|
||||||
inputAlign="right" border="none"></u--input>
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
<template #right>
|
|
||||||
<u-icon name="arrow-down"></u-icon>
|
|
||||||
</template>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="菜单名称" prop="menuName" required>
|
<u-form-item label="菜单名称" prop="menuName" required>
|
||||||
<u--input v-model="form.menuName" placeholder="请输入菜单名称" maxlength="50"
|
<u--input v-model="form.menuName" placeholder="请输入菜单名称" maxlength="50"
|
||||||
inputAlign="right" border="none"></u--input>
|
inputAlign="left" :customStyle="getInputStyle('menuName')"></u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="显示排序">
|
<u-form-item label="显示排序">
|
||||||
@@ -39,49 +33,37 @@
|
|||||||
|
|
||||||
<u-form-item label="路由地址" v-if="form.menuType !== 'F'">
|
<u-form-item label="路由地址" v-if="form.menuType !== 'F'">
|
||||||
<u--input v-model="form.path" placeholder="请输入路由地址" maxlength="200"
|
<u--input v-model="form.path" placeholder="请输入路由地址" maxlength="200"
|
||||||
inputAlign="right" border="none"></u--input>
|
inputAlign="left" :customStyle="getInputStyle('path')"></u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="组件路径" v-if="form.menuType === 'C'">
|
<u-form-item label="组件路径" v-if="form.menuType === 'C'">
|
||||||
<u--input v-model="form.component" placeholder="请输入组件路径" maxlength="255"
|
<u--input v-model="form.component" placeholder="请输入组件路径" maxlength="255"
|
||||||
inputAlign="right" border="none"></u--input>
|
inputAlign="left" :customStyle="getInputStyle('component')"></u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="权限标识" v-if="form.menuType !== 'M'">
|
<u-form-item label="权限标识" v-if="form.menuType !== 'M'">
|
||||||
<u--input v-model="form.perms" placeholder="请输入权限标识" maxlength="100"
|
<u--input v-model="form.perms" placeholder="请输入权限标识" maxlength="100"
|
||||||
inputAlign="right" border="none"></u--input>
|
inputAlign="left" :customStyle="getInputStyle('perms')"></u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="是否外链" v-if="form.menuType !== 'F'" @click="showFramePicker = true">
|
<u-form-item label="是否外链" v-if="form.menuType !== 'F'" @click="showFramePicker = true" class="with-arrow">
|
||||||
<u--input v-model="frameName" disabled disabledColor="#ffffff" placeholder="请选择"
|
<u--input v-model="frameName" disabled disabledColor="#ffffff" placeholder="请选择"
|
||||||
inputAlign="right" border="none"></u--input>
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
<template #right>
|
|
||||||
<u-icon name="arrow-down"></u-icon>
|
|
||||||
</template>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="是否缓存" v-if="form.menuType === 'C'" @click="showCachePicker = true">
|
<u-form-item label="是否缓存" v-if="form.menuType === 'C'" @click="showCachePicker = true" class="with-arrow">
|
||||||
<u--input v-model="cacheName" disabled disabledColor="#ffffff" placeholder="请选择"
|
<u--input v-model="cacheName" disabled disabledColor="#ffffff" placeholder="请选择"
|
||||||
inputAlign="right" border="none"></u--input>
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
<template #right>
|
|
||||||
<u-icon name="arrow-down"></u-icon>
|
|
||||||
</template>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="显示状态" v-if="form.menuType !== 'F'" @click="showVisiblePicker = true">
|
<u-form-item label="显示状态" v-if="form.menuType !== 'F'" @click="showVisiblePicker = true" class="with-arrow">
|
||||||
<u--input v-model="visibleName" disabled disabledColor="#ffffff" placeholder="请选择"
|
<u--input v-model="visibleName" disabled disabledColor="#ffffff" placeholder="请选择"
|
||||||
inputAlign="right" border="none"></u--input>
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
<template #right>
|
|
||||||
<u-icon name="arrow-down"></u-icon>
|
|
||||||
</template>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="菜单状态" prop="statusName" @click="showStatusPicker = true">
|
<u-form-item label="菜单状态" prop="statusName" @click="showStatusPicker = true" class="with-arrow">
|
||||||
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
||||||
inputAlign="right" border="none"></u--input>
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
<template #right>
|
|
||||||
<u-icon name="arrow-down"></u-icon>
|
|
||||||
</template>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
</u--form>
|
</u--form>
|
||||||
@@ -181,7 +163,9 @@ const inputBaseStyle = {
|
|||||||
border: '2rpx solid #dcdfe6',
|
border: '2rpx solid #dcdfe6',
|
||||||
borderRadius: '8rpx',
|
borderRadius: '8rpx',
|
||||||
padding: '0 24rpx',
|
padding: '0 24rpx',
|
||||||
height: '68rpx'
|
height: '68rpx',
|
||||||
|
width: '100%',
|
||||||
|
boxSizing: 'border-box'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 输入框错误样式
|
// 输入框错误样式
|
||||||
@@ -190,7 +174,9 @@ const inputErrorStyle = {
|
|||||||
border: '2rpx solid #f56c6c',
|
border: '2rpx solid #f56c6c',
|
||||||
borderRadius: '8rpx',
|
borderRadius: '8rpx',
|
||||||
padding: '0 24rpx',
|
padding: '0 24rpx',
|
||||||
height: '68rpx'
|
height: '68rpx',
|
||||||
|
width: '100%',
|
||||||
|
boxSizing: 'border-box'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据字段名获取输入框样式
|
// 根据字段名获取输入框样式
|
||||||
@@ -436,20 +422,6 @@ 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>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
@@ -9,21 +9,21 @@
|
|||||||
<view class="section">
|
<view class="section">
|
||||||
<view class="section-title">公告信息</view>
|
<view class="section-title">公告信息</view>
|
||||||
<view class="form-view">
|
<view class="form-view">
|
||||||
<u--form labelPosition="left" :model="form" ref="uForm">
|
<u--form labelPosition="left" :model="form" ref="uForm" labelWidth="160rpx"
|
||||||
<u-form-item label="公告标题" prop="noticeTitle" borderBottom required>
|
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||||
<u--input v-model="form.noticeTitle" placeholder="请输入公告标题" border="none"></u--input>
|
<u-form-item label="公告标题" prop="noticeTitle" required>
|
||||||
|
<u--input v-model="form.noticeTitle" placeholder="请输入公告标题"
|
||||||
|
inputAlign="left" :customStyle="getInputStyle('noticeTitle')"></u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item label="公告类型" prop="noticeType" borderBottom required>
|
|
||||||
<u-radio-group v-model="form.noticeType" placement="row">
|
<u-form-item label="公告类型" prop="noticeType" required @click="showNoticeTypePicker = true" class="with-arrow">
|
||||||
<u-radio v-for="item in noticeTypeList" :key="item.dictValue" :name="item.dictValue" :label="item.dictLabel">
|
<u--input v-model="noticeTypeName" disabled disabledColor="#ffffff" placeholder="请选择公告类型"
|
||||||
</u-radio>
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
</u-radio-group>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item label="状态" prop="status" borderBottom>
|
|
||||||
<u-radio-group v-model="form.status" placement="row">
|
<u-form-item label="状态" prop="status" @click="showStatusPicker = true" class="with-arrow">
|
||||||
<u-radio v-for="item in statusList" :key="item.dictValue" :name="item.dictValue" :label="item.dictLabel">
|
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
||||||
</u-radio>
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
</u-radio-group>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item label="内容" prop="noticeContent" labelPosition="top">
|
<u-form-item label="内容" prop="noticeContent" labelPosition="top">
|
||||||
<view class="editor-container">
|
<view class="editor-container">
|
||||||
@@ -72,7 +72,14 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<u-toast ref="uToast"></u-toast>
|
|
||||||
|
<!-- 公告类型选择器 -->
|
||||||
|
<u-picker itemHeight="88" :show="showNoticeTypePicker" :columns="noticeTypeColumns" keyName="dictLabel"
|
||||||
|
@cancel="showNoticeTypePicker = false" @confirm="handleNoticeTypeConfirm"></u-picker>
|
||||||
|
|
||||||
|
<!-- 状态选择器 -->
|
||||||
|
<u-picker itemHeight="88" :show="showStatusPicker" :columns="statusColumns" keyName="dictLabel"
|
||||||
|
@cancel="showStatusPicker = false" @confirm="handleStatusConfirm"></u-picker>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -87,6 +94,12 @@ const title = ref('新增公告')
|
|||||||
const noticeId = ref(undefined)
|
const noticeId = ref(undefined)
|
||||||
const noticeTypeList = ref([])
|
const noticeTypeList = ref([])
|
||||||
const statusList = ref([])
|
const statusList = ref([])
|
||||||
|
const noticeTypeColumns = ref([])
|
||||||
|
const statusColumns = ref([])
|
||||||
|
const showNoticeTypePicker = ref(false)
|
||||||
|
const showStatusPicker = ref(false)
|
||||||
|
const noticeTypeName = ref('')
|
||||||
|
const statusName = ref('')
|
||||||
const editorCtx = ref(null)
|
const editorCtx = ref(null)
|
||||||
const contentLength = ref(0)
|
const contentLength = ref(0)
|
||||||
|
|
||||||
@@ -107,7 +120,9 @@ const inputBaseStyle = {
|
|||||||
border: '2rpx solid #dcdfe6',
|
border: '2rpx solid #dcdfe6',
|
||||||
borderRadius: '8rpx',
|
borderRadius: '8rpx',
|
||||||
padding: '0 24rpx',
|
padding: '0 24rpx',
|
||||||
height: '68rpx'
|
height: '68rpx',
|
||||||
|
width: '100%',
|
||||||
|
boxSizing: 'border-box'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 输入框错误样式
|
// 输入框错误样式
|
||||||
@@ -116,7 +131,9 @@ const inputErrorStyle = {
|
|||||||
border: '2rpx solid #f56c6c',
|
border: '2rpx solid #f56c6c',
|
||||||
borderRadius: '8rpx',
|
borderRadius: '8rpx',
|
||||||
padding: '0 24rpx',
|
padding: '0 24rpx',
|
||||||
height: '68rpx'
|
height: '68rpx',
|
||||||
|
width: '100%',
|
||||||
|
boxSizing: 'border-box'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据字段名获取输入框样式
|
// 根据字段名获取输入框样式
|
||||||
@@ -125,18 +142,16 @@ const getInputStyle = (field) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
console.log('页面加载参数:', options)
|
|
||||||
if (options.id) {
|
if (options.id) {
|
||||||
noticeId.value = options.id
|
noticeId.value = options.id
|
||||||
title.value = '修改公告'
|
title.value = '修改公告'
|
||||||
console.log('加载公告详情,ID:', noticeId.value)
|
|
||||||
getNotice(noticeId.value).then(response => {
|
getNotice(noticeId.value).then(response => {
|
||||||
console.log('获取到的公告数据:', response.data)
|
|
||||||
Object.assign(form, response.data)
|
Object.assign(form, response.data)
|
||||||
console.log('表单数据初始化完成:', form)
|
// 更新显示名称
|
||||||
|
updateNoticeTypeName()
|
||||||
|
updateStatusName()
|
||||||
// 如果编辑器已经初始化,设置内容
|
// 如果编辑器已经初始化,设置内容
|
||||||
if (editorCtx.value && form.noticeContent) {
|
if (editorCtx.value && form.noticeContent) {
|
||||||
console.log('设置编辑器初始内容:', form.noticeContent)
|
|
||||||
editorCtx.value.setContents({
|
editorCtx.value.setContents({
|
||||||
html: form.noticeContent
|
html: form.noticeContent
|
||||||
})
|
})
|
||||||
@@ -147,46 +162,71 @@ onLoad((options) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 获取字典数据
|
// 获取字典数据
|
||||||
console.log('开始获取字典数据')
|
|
||||||
getDicts('sys_notice_type').then(res => {
|
getDicts('sys_notice_type').then(res => {
|
||||||
noticeTypeList.value = res.data
|
noticeTypeList.value = res.data
|
||||||
console.log('公告类型字典:', res.data)
|
noticeTypeColumns.value = [res.data]
|
||||||
|
// 如果是新增模式,设置默认值
|
||||||
|
if (!noticeId.value && res.data.length > 0) {
|
||||||
|
form.noticeType = res.data[0].dictValue
|
||||||
|
noticeTypeName.value = res.data[0].dictLabel
|
||||||
|
}
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error('获取公告类型字典失败:', error)
|
console.error('获取公告类型字典失败:', error)
|
||||||
})
|
})
|
||||||
|
|
||||||
getDicts('sys_notice_status').then(res => {
|
getDicts('sys_notice_status').then(res => {
|
||||||
statusList.value = res.data
|
statusList.value = res.data
|
||||||
console.log('公告状态字典:', res.data)
|
statusColumns.value = [res.data]
|
||||||
|
// 更新状态显示
|
||||||
|
updateStatusName()
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error('获取公告状态字典失败:', error)
|
console.error('获取公告状态字典失败:', error)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 更新公告类型显示名称
|
||||||
|
function updateNoticeTypeName() {
|
||||||
|
if (noticeTypeList.value.length > 0) {
|
||||||
|
const item = noticeTypeList.value.find(v => v.dictValue === form.noticeType)
|
||||||
|
noticeTypeName.value = item ? item.dictLabel : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新状态显示名称
|
||||||
|
function updateStatusName() {
|
||||||
|
if (statusList.value.length > 0) {
|
||||||
|
const item = statusList.value.find(v => v.dictValue === form.status)
|
||||||
|
statusName.value = item ? item.dictLabel : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 公告类型选择确认
|
||||||
|
function handleNoticeTypeConfirm(e) {
|
||||||
|
form.noticeType = e.value[0].dictValue
|
||||||
|
noticeTypeName.value = e.value[0].dictLabel
|
||||||
|
showNoticeTypePicker.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 状态选择确认
|
||||||
|
function handleStatusConfirm(e) {
|
||||||
|
form.status = e.value[0].dictValue
|
||||||
|
statusName.value = e.value[0].dictLabel
|
||||||
|
showStatusPicker.value = false
|
||||||
|
}
|
||||||
|
|
||||||
onReady(() => {
|
onReady(() => {
|
||||||
// 页面准备完成后的一些初始化操作
|
// 页面准备完成后的一些初始化操作
|
||||||
})
|
})
|
||||||
|
|
||||||
// 编辑器初始化完成
|
// 编辑器初始化完成
|
||||||
function onEditorReady() {
|
function onEditorReady() {
|
||||||
console.log('编辑器初始化完成')
|
|
||||||
uni.createSelectorQuery().select('#editor').context((res) => {
|
uni.createSelectorQuery().select('#editor').context((res) => {
|
||||||
editorCtx.value = res.context
|
editorCtx.value = res.context
|
||||||
console.log('编辑器上下文获取成功:', editorCtx.value)
|
|
||||||
// 如果是编辑模式,设置初始内容
|
// 如果是编辑模式,设置初始内容
|
||||||
if (form.noticeContent) {
|
if (form.noticeContent) {
|
||||||
console.log('设置初始内容到编辑器:', form.noticeContent)
|
|
||||||
editorCtx.value.setContents({
|
editorCtx.value.setContents({
|
||||||
html: form.noticeContent,
|
html: form.noticeContent
|
||||||
success: () => {
|
|
||||||
console.log('编辑器内容设置成功')
|
|
||||||
},
|
|
||||||
fail: (error) => {
|
|
||||||
console.error('编辑器内容设置失败:', error)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
} else {
|
|
||||||
console.log('没有初始内容需要设置')
|
|
||||||
}
|
}
|
||||||
}).exec()
|
}).exec()
|
||||||
}
|
}
|
||||||
@@ -201,7 +241,6 @@ function onEditorInput(e) {
|
|||||||
// 计算内容长度(去除HTML标签)
|
// 计算内容长度(去除HTML标签)
|
||||||
const text = res.text || ''
|
const text = res.text || ''
|
||||||
contentLength.value = text.length
|
contentLength.value = text.length
|
||||||
console.log('编辑器内容已更新:', res.html)
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -218,10 +257,6 @@ function editorBlur() {
|
|||||||
editorCtx.value.getContents({
|
editorCtx.value.getContents({
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
form.noticeContent = res.html
|
form.noticeContent = res.html
|
||||||
console.log('失去焦点时保存的内容:', res.html)
|
|
||||||
},
|
|
||||||
fail: (error) => {
|
|
||||||
console.error('失去焦点时获取内容失败:', error)
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -334,7 +369,6 @@ async function submitForm() {
|
|||||||
editorCtx.value.getContents({
|
editorCtx.value.getContents({
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
form.noticeContent = res.html
|
form.noticeContent = res.html
|
||||||
console.log('提交前获取到的内容:', res.html)
|
|
||||||
resolve(res.html)
|
resolve(res.html)
|
||||||
},
|
},
|
||||||
fail: reject
|
fail: reject
|
||||||
@@ -347,14 +381,12 @@ async function submitForm() {
|
|||||||
|
|
||||||
doSubmit()
|
doSubmit()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取编辑器内容失败:', error)
|
|
||||||
modal.msgError('获取内容失败,请重试')
|
modal.msgError('获取内容失败,请重试')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function doSubmit() {
|
function doSubmit() {
|
||||||
errorFields.value = [] // 清空错误字段
|
errorFields.value = [] // 清空错误字段
|
||||||
console.log('准备提交的表单数据:', form)
|
|
||||||
|
|
||||||
if (!form.noticeTitle) {
|
if (!form.noticeTitle) {
|
||||||
errorFields.value.push('noticeTitle')
|
errorFields.value.push('noticeTitle')
|
||||||
@@ -373,48 +405,23 @@ function doSubmit() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const submitForm = { ...form }
|
const submitForm = { ...form }
|
||||||
console.log('最终提交的数据:', submitForm)
|
|
||||||
|
|
||||||
// 检查必要字段
|
|
||||||
console.log('检查字段:')
|
|
||||||
console.log('- 标题:', submitForm.noticeTitle)
|
|
||||||
console.log('- 类型:', submitForm.noticeType)
|
|
||||||
console.log('- 内容长度:', submitForm.noticeContent.length)
|
|
||||||
console.log('- 状态:', submitForm.status)
|
|
||||||
console.log('- ID:', submitForm.noticeId)
|
|
||||||
|
|
||||||
if (noticeId.value) {
|
if (noticeId.value) {
|
||||||
console.log('执行修改操作')
|
|
||||||
updateNotice(submitForm).then(response => {
|
updateNotice(submitForm).then(response => {
|
||||||
console.log('修改成功响应:', response)
|
|
||||||
modal.msgSuccess('修改成功')
|
modal.msgSuccess('修改成功')
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}, 1000)
|
}, 1000)
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error('修改失败:', error)
|
|
||||||
console.log('错误详情:', {
|
|
||||||
message: error.message,
|
|
||||||
response: error.response,
|
|
||||||
data: error.response?.data
|
|
||||||
})
|
|
||||||
modal.msgError('修改失败: ' + (error.message || '未知错误'))
|
modal.msgError('修改失败: ' + (error.message || '未知错误'))
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
console.log('执行新增操作')
|
|
||||||
addNotice(submitForm).then(response => {
|
addNotice(submitForm).then(response => {
|
||||||
console.log('新增成功响应:', response)
|
|
||||||
modal.msgSuccess('新增成功')
|
modal.msgSuccess('新增成功')
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}, 1000)
|
}, 1000)
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error('新增失败:', error)
|
|
||||||
console.log('错误详情:', {
|
|
||||||
message: error.message,
|
|
||||||
response: error.response,
|
|
||||||
data: error.response?.data
|
|
||||||
})
|
|
||||||
modal.msgError('新增失败: ' + (error.message || '未知错误'))
|
modal.msgError('新增失败: ' + (error.message || '未知错误'))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -463,20 +470,6 @@ 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 {
|
.editor-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 2rpx solid #e8edf3;
|
border: 2rpx solid #e8edf3;
|
||||||
|
|||||||
@@ -25,12 +25,9 @@
|
|||||||
<u-number-box v-model="form.postSort" :min="0" :max="999" inputAlign="right"></u-number-box>
|
<u-number-box v-model="form.postSort" :min="0" :max="999" inputAlign="right"></u-number-box>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
|
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true" class="with-arrow">
|
||||||
<view class="select-input-wrapper">
|
|
||||||
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
||||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
<u-icon name="arrow-down" class="select-arrow"></u-icon>
|
|
||||||
</view>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||||
@@ -43,7 +40,6 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<u-toast ref="uToast"></u-toast>
|
|
||||||
<u-picker itemHeight="88" :show="showStatusPicker" :columns="statusList" keyName="dictLabel" @cancel="showStatusPicker = false"
|
<u-picker itemHeight="88" :show="showStatusPicker" :columns="statusList" keyName="dictLabel" @cancel="showStatusPicker = false"
|
||||||
@confirm="handleStatusConfirm"></u-picker>
|
@confirm="handleStatusConfirm"></u-picker>
|
||||||
</view>
|
</view>
|
||||||
@@ -79,7 +75,9 @@ const inputBaseStyle = {
|
|||||||
border: '2rpx solid #dcdfe6',
|
border: '2rpx solid #dcdfe6',
|
||||||
borderRadius: '8rpx',
|
borderRadius: '8rpx',
|
||||||
padding: '0 24rpx',
|
padding: '0 24rpx',
|
||||||
height: '68rpx'
|
height: '68rpx',
|
||||||
|
width: '100%',
|
||||||
|
boxSizing: 'border-box'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 输入框错误样式
|
// 输入框错误样式
|
||||||
@@ -88,7 +86,9 @@ const inputErrorStyle = {
|
|||||||
border: '2rpx solid #f56c6c',
|
border: '2rpx solid #f56c6c',
|
||||||
borderRadius: '8rpx',
|
borderRadius: '8rpx',
|
||||||
padding: '0 24rpx',
|
padding: '0 24rpx',
|
||||||
height: '68rpx'
|
height: '68rpx',
|
||||||
|
width: '100%',
|
||||||
|
boxSizing: 'border-box'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据字段名获取输入框样式
|
// 根据字段名获取输入框样式
|
||||||
@@ -147,22 +147,19 @@ function handleStatusConfirm(e) {
|
|||||||
function submit() {
|
function submit() {
|
||||||
errorFields.value = [] // 清空错误字段
|
errorFields.value = [] // 清空错误字段
|
||||||
proxy.$refs['uForm'].validate().then(() => {
|
proxy.$refs['uForm'].validate().then(() => {
|
||||||
console.log('提交的表单数据:', form)
|
|
||||||
if (form.postId) {
|
if (form.postId) {
|
||||||
updatePost(form).then(() => {
|
updatePost(form).then(() => {
|
||||||
proxy.$refs['uToast'].show({
|
proxy.$modal.msgSuccess('修改成功')
|
||||||
message: '修改成功', complete() {
|
setTimeout(() => {
|
||||||
uni.navigateTo({ url: `/pages_mine/pages/system/post/list` })
|
uni.navigateTo({ url: `/pages_mine/pages/system/post/list` })
|
||||||
}
|
}, 1500)
|
||||||
})
|
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
addPost(form).then(() => {
|
addPost(form).then(() => {
|
||||||
proxy.$refs['uToast'].show({
|
proxy.$modal.msgSuccess('新增成功')
|
||||||
message: '新增成功', complete() {
|
setTimeout(() => {
|
||||||
uni.navigateTo({ url: `/pages_mine/pages/system/post/list` })
|
uni.navigateTo({ url: `/pages_mine/pages/system/post/list` })
|
||||||
}
|
}, 1500)
|
||||||
})
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}).catch((errors) => {
|
}).catch((errors) => {
|
||||||
@@ -170,10 +167,7 @@ function submit() {
|
|||||||
if (errors && Array.isArray(errors)) {
|
if (errors && Array.isArray(errors)) {
|
||||||
errorFields.value = errors.map(err => err.field || err.prop)
|
errorFields.value = errors.map(err => err.field || err.prop)
|
||||||
}
|
}
|
||||||
proxy.$refs['uToast'].show({
|
proxy.$modal.msgError('请填写完整信息')
|
||||||
type: 'error',
|
|
||||||
message: '请填写完整信息'
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -215,20 +209,6 @@ 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>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
@@ -26,12 +26,9 @@
|
|||||||
<u-number-box v-model="form.roleSort" :min="0" :max="999" inputAlign="right"></u-number-box>
|
<u-number-box v-model="form.roleSort" :min="0" :max="999" inputAlign="right"></u-number-box>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
|
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true" class="with-arrow">
|
||||||
<view class="select-input-wrapper">
|
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
||||||
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
||||||
<u-icon name="arrow-down" class="select-arrow"></u-icon>
|
|
||||||
</view>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||||
@@ -39,12 +36,9 @@
|
|||||||
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
|
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="菜单权限" @click="openMenuPicker">
|
<u-form-item label="菜单权限" @click="openMenuPicker" class="with-arrow">
|
||||||
<view class="select-input-wrapper">
|
<u--input :value="menuPermissionText" disabled disabledColor="#ffffff" placeholder="请选择菜单权限"
|
||||||
<u--input :value="menuPermissionText" disabled disabledColor="#ffffff" placeholder="请选择菜单权限"
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
||||||
<u-icon name="arrow-down" class="select-arrow"></u-icon>
|
|
||||||
</view>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<!-- 已选菜单标签展示 -->
|
<!-- 已选菜单标签展示 -->
|
||||||
@@ -164,7 +158,9 @@ const inputBaseStyle = {
|
|||||||
border: '2rpx solid #dcdfe6',
|
border: '2rpx solid #dcdfe6',
|
||||||
borderRadius: '8rpx',
|
borderRadius: '8rpx',
|
||||||
padding: '0 24rpx',
|
padding: '0 24rpx',
|
||||||
height: '68rpx'
|
height: '68rpx',
|
||||||
|
width: '100%',
|
||||||
|
boxSizing: 'border-box'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 输入框错误样式
|
// 输入框错误样式
|
||||||
@@ -173,7 +169,9 @@ const inputErrorStyle = {
|
|||||||
border: '2rpx solid #f56c6c',
|
border: '2rpx solid #f56c6c',
|
||||||
borderRadius: '8rpx',
|
borderRadius: '8rpx',
|
||||||
padding: '0 24rpx',
|
padding: '0 24rpx',
|
||||||
height: '68rpx'
|
height: '68rpx',
|
||||||
|
width: '100%',
|
||||||
|
boxSizing: 'border-box'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据字段名获取输入框样式
|
// 根据字段名获取输入框样式
|
||||||
@@ -536,20 +534,6 @@ 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>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
@@ -36,28 +36,19 @@
|
|||||||
inputAlign="left" :customStyle="getInputStyle('email')"></u--input>
|
inputAlign="left" :customStyle="getInputStyle('email')"></u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="用户性别" prop="sexName" @click="showSexPicker = true">
|
<u-form-item label="用户性别" prop="sexName" @click="showSexPicker = true" class="with-arrow">
|
||||||
<view class="select-input-wrapper">
|
<u--input v-model="sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
|
||||||
<u--input v-model="sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
||||||
<u-icon name="arrow-down" class="select-arrow"></u-icon>
|
|
||||||
</view>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="归属部门" prop="deptName" @click="showDeptPicker = true">
|
<u-form-item label="归属部门" prop="deptName" @click="showDeptPicker = true" class="with-arrow">
|
||||||
<view class="select-input-wrapper">
|
<u--input v-model="deptName" disabled disabledColor="#ffffff" placeholder="请选择归属部门"
|
||||||
<u--input v-model="deptName" disabled disabledColor="#ffffff" placeholder="请选择归属部门"
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
||||||
<u-icon name="arrow-down" class="select-arrow"></u-icon>
|
|
||||||
</view>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="岗位" prop="postNames" @click="openPostPicker">
|
<u-form-item label="岗位" prop="postNames" @click="openPostPicker" class="with-arrow">
|
||||||
<view class="select-input-wrapper">
|
<u--input :value="postNamesText" disabled disabledColor="#ffffff" placeholder="请选择岗位"
|
||||||
<u--input :value="postNamesText" disabled disabledColor="#ffffff" placeholder="请选择岗位"
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
||||||
<u-icon name="arrow-down" class="select-arrow"></u-icon>
|
|
||||||
</view>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<!-- 已选岗位标签展示 -->
|
<!-- 已选岗位标签展示 -->
|
||||||
@@ -70,12 +61,9 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<u-form-item label="角色" prop="roleNames" @click="openRolePicker">
|
<u-form-item label="角色" prop="roleNames" @click="openRolePicker" class="with-arrow">
|
||||||
<view class="select-input-wrapper">
|
<u--input :value="roleNamesText" disabled disabledColor="#ffffff" placeholder="请选择角色"
|
||||||
<u--input :value="roleNamesText" disabled disabledColor="#ffffff" placeholder="请选择角色"
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
||||||
<u-icon name="arrow-down" class="select-arrow"></u-icon>
|
|
||||||
</view>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<!-- 已选角色标签展示 -->
|
<!-- 已选角色标签展示 -->
|
||||||
@@ -88,12 +76,9 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
|
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true" class="with-arrow">
|
||||||
<view class="select-input-wrapper">
|
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
||||||
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
||||||
<u-icon name="arrow-down" class="select-arrow"></u-icon>
|
|
||||||
</view>
|
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||||
@@ -220,7 +205,9 @@ const inputBaseStyle = {
|
|||||||
border: '2rpx solid #dcdfe6',
|
border: '2rpx solid #dcdfe6',
|
||||||
borderRadius: '8rpx',
|
borderRadius: '8rpx',
|
||||||
padding: '0 24rpx',
|
padding: '0 24rpx',
|
||||||
height: '68rpx'
|
height: '68rpx',
|
||||||
|
width: '100%',
|
||||||
|
boxSizing: 'border-box'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 输入框错误样式
|
// 输入框错误样式
|
||||||
@@ -229,7 +216,9 @@ const inputErrorStyle = {
|
|||||||
border: '2rpx solid #f56c6c',
|
border: '2rpx solid #f56c6c',
|
||||||
borderRadius: '8rpx',
|
borderRadius: '8rpx',
|
||||||
padding: '0 24rpx',
|
padding: '0 24rpx',
|
||||||
height: '68rpx'
|
height: '68rpx',
|
||||||
|
width: '100%',
|
||||||
|
boxSizing: 'border-box'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据字段名获取输入框样式
|
// 根据字段名获取输入框样式
|
||||||
@@ -545,21 +534,6 @@ function submit() {
|
|||||||
padding-top: 16rpx;
|
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 {
|
.selected-tags {
|
||||||
margin-top: 16rpx;
|
margin-top: 16rpx;
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
@@ -592,74 +566,111 @@ function submit() {
|
|||||||
|
|
||||||
.select-popup {
|
.select-popup {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
max-height: 80vh;
|
max-height: 85vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
border-radius: 24rpx 24rpx 0 0;
|
||||||
|
|
||||||
.popup-header {
|
.popup-header {
|
||||||
padding: 32rpx 24rpx 24rpx;
|
padding: 40rpx 32rpx 32rpx;
|
||||||
border-bottom: 1rpx solid #f0f0f0;
|
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 {
|
.header-title {
|
||||||
font-size: 32rpx;
|
font-size: 34rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 8rpx;
|
margin-bottom: 12rpx;
|
||||||
display: block;
|
display: block;
|
||||||
|
letter-spacing: 1rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-count {
|
.header-count {
|
||||||
font-size: 24rpx;
|
font-size: 26rpx;
|
||||||
color: #667eea;
|
color: #667eea;
|
||||||
display: block;
|
display: block;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-content {
|
.popup-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
max-height: 60vh;
|
max-height: 55vh;
|
||||||
padding: 24rpx;
|
padding: 16rpx 32rpx 32rpx;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
.checkbox-item {
|
.checkbox-item {
|
||||||
padding: 16rpx 0;
|
padding: 24rpx 20rpx;
|
||||||
border-bottom: 1rpx solid #f5f5f5;
|
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 {
|
.popup-footer {
|
||||||
padding: 24rpx;
|
padding: 24rpx 32rpx 32rpx;
|
||||||
border-top: 1rpx solid #f0f0f0;
|
background: #fafafa;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 24rpx;
|
gap: 24rpx;
|
||||||
|
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
.footer-btn {
|
.footer-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 88rpx;
|
height: 92rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 16rpx;
|
border-radius: 20rpx;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
letter-spacing: 2rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cancel-btn {
|
.cancel-btn {
|
||||||
background: #f5f7fa;
|
background: #ffffff;
|
||||||
color: #909399;
|
color: #666;
|
||||||
|
border: 2rpx solid #e0e0e0;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: #e8eaed;
|
background: #f5f5f5;
|
||||||
|
border-color: #d0d0d0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.confirm-btn {
|
.confirm-btn {
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.4);
|
||||||
|
border: none;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
opacity: 0.8;
|
transform: translateY(2rpx);
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -681,6 +692,16 @@ function submit() {
|
|||||||
letter-spacing: 2rpx !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 {
|
.remark-textarea {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
|
|||||||
@@ -95,7 +95,7 @@
|
|||||||
.form-view {
|
.form-view {
|
||||||
// 表单项间距
|
// 表单项间距
|
||||||
:deep(.u-form-item) {
|
:deep(.u-form-item) {
|
||||||
margin-bottom: 5rpx;
|
margin-bottom: -20rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -179,8 +179,8 @@
|
|||||||
border-color: #f56c6c !important;
|
border-color: #f56c6c !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 下拉箭头放到输入框内部右侧
|
// 下拉箭头放到输入框内部右侧(仅在有图标时生效)
|
||||||
:deep(.u-form-item__body__right) {
|
:deep(.u-form-item__body__right:has(.u-icon)) {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
right: 24rpx !important;
|
right: 24rpx !important;
|
||||||
top: 50% !important;
|
top: 50% !important;
|
||||||
@@ -195,6 +195,40 @@
|
|||||||
font-size: 28rpx !important;
|
font-size: 28rpx !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 带箭头的下拉选择框(使用 class="with-arrow")
|
||||||
|
:deep(.with-arrow) {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
// 增加点击区域提示
|
||||||
|
.u-form-item__body {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
// disabled 输入框允许点击穿透(包括所有子元素)
|
||||||
|
.u--input,
|
||||||
|
.u--input *,
|
||||||
|
.u-input,
|
||||||
|
.u-input *,
|
||||||
|
.u-input__content,
|
||||||
|
.u-input__content * {
|
||||||
|
pointer-events: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用伪元素添加箭头,不影响布局宽度
|
||||||
|
&::after {
|
||||||
|
content: '▼';
|
||||||
|
position: absolute;
|
||||||
|
right: 20rpx;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: #c0c4cc;
|
||||||
|
font-size: 20rpx;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 统一图标颜色
|
// 统一图标颜色
|
||||||
:deep(.u-icon) {
|
:deep(.u-icon) {
|
||||||
color: #909399 !important;
|
color: #909399 !important;
|
||||||
|
|||||||
Reference in New Issue
Block a user