576 lines
15 KiB
Vue
576 lines
15 KiB
Vue
<template>
|
||
<view class="container" style="padding-bottom:1rpx;">
|
||
<u-navbar
|
||
leftIconSize="40rpx"
|
||
leftIconColor="#333333"
|
||
:title="title"
|
||
>
|
||
</u-navbar>
|
||
<view class="section">
|
||
<view class="section-title">公告信息</view>
|
||
<view class="form-view">
|
||
<u--form labelPosition="left" :model="form" ref="uForm" labelWidth="160rpx"
|
||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||
<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 label="公告类型" prop="noticeType" required @click="showNoticeTypePicker = true" class="with-arrow">
|
||
<u--input v-model="noticeTypeName" disabled disabledColor="#ffffff" placeholder="请选择公告类型"
|
||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="状态" prop="status" @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="noticeContent" labelPosition="top">
|
||
<view class="editor-container">
|
||
<view class="editor-toolbar">
|
||
<view class="toolbar-item" @click="format('bold')">
|
||
<text class="iconfont">B</text>
|
||
</view>
|
||
<view class="toolbar-item" @click="format('italic')">
|
||
<text class="iconfont italic">I</text>
|
||
</view>
|
||
<view class="toolbar-item" @click="format('underline')">
|
||
<text class="iconfont underline">U</text>
|
||
</view>
|
||
<view class="toolbar-divider"></view>
|
||
<view class="toolbar-item" @click="insertImage">
|
||
<uni-icons type="image" size="16" color="#333333"></uni-icons>
|
||
</view>
|
||
<view class="toolbar-divider"></view>
|
||
<view class="toolbar-item" @click="undo">
|
||
<text class="iconfont">↶</text>
|
||
</view>
|
||
<view class="toolbar-item" @click="redo">
|
||
<text class="iconfont">↷</text>
|
||
</view>
|
||
</view>
|
||
<editor
|
||
id="editor"
|
||
class="editor-content"
|
||
:placeholder="'请输入公告内容'"
|
||
@ready="onEditorReady"
|
||
@input="onEditorInput"
|
||
@focus="editorFocus"
|
||
@blur="editorBlur"
|
||
:show-img-size="true"
|
||
:show-img-toolbar="true"
|
||
:show-img-resize="true"
|
||
></editor>
|
||
<view class="editor-counter">
|
||
<text>{{ contentLength }}/20000</text>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</u--form>
|
||
<view class="form-btn">
|
||
<u-button type="primary" text="保存" @click="submitForm"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 公告类型选择器 -->
|
||
<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>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, nextTick } from 'vue'
|
||
import { getNotice, addNotice, updateNotice } from '@/api/system/notice'
|
||
import { getDicts } from "@/api/system/dict/data"
|
||
import { onLoad, onReady } from "@dcloudio/uni-app"
|
||
import modal from '@/plugins/modal'
|
||
|
||
const title = ref('新增公告')
|
||
const noticeId = ref(undefined)
|
||
const noticeTypeList = 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 contentLength = ref(0)
|
||
|
||
const form = reactive({
|
||
noticeId: undefined,
|
||
noticeTitle: '',
|
||
noticeType: '',
|
||
noticeContent: '',
|
||
status: '0'
|
||
})
|
||
|
||
// 表单验证错误字段
|
||
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
|
||
}
|
||
|
||
onLoad((options) => {
|
||
if (options.id) {
|
||
noticeId.value = options.id
|
||
title.value = '修改公告'
|
||
getNotice(noticeId.value).then(response => {
|
||
Object.assign(form, response.data)
|
||
// 更新显示名称
|
||
updateNoticeTypeName()
|
||
updateStatusName()
|
||
// 如果编辑器已经初始化，设置内容
|
||
if (editorCtx.value && form.noticeContent) {
|
||
editorCtx.value.setContents({
|
||
html: form.noticeContent
|
||
})
|
||
}
|
||
}).catch(error => {
|
||
console.error('获取公告详情失败:', error)
|
||
})
|
||
}
|
||
|
||
// 获取字典数据
|
||
getDicts('sys_notice_type').then(res => {
|
||
noticeTypeList.value = 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 => {
|
||
console.error('获取公告类型字典失败:', error)
|
||
})
|
||
|
||
getDicts('sys_notice_status').then(res => {
|
||
statusList.value = res.data
|
||
statusColumns.value = [res.data]
|
||
// 更新状态显示
|
||
updateStatusName()
|
||
}).catch(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(() => {
|
||
// 页面准备完成后的一些初始化操作
|
||
})
|
||
|
||
// 编辑器初始化完成
|
||
function onEditorReady() {
|
||
uni.createSelectorQuery().select('#editor').context((res) => {
|
||
editorCtx.value = res.context
|
||
// 如果是编辑模式，设置初始内容
|
||
if (form.noticeContent) {
|
||
editorCtx.value.setContents({
|
||
html: form.noticeContent
|
||
})
|
||
}
|
||
}).exec()
|
||
}
|
||
|
||
// 编辑器内容变化
|
||
function onEditorInput(e) {
|
||
// 获取HTML内容
|
||
editorCtx.value.getContents({
|
||
success: (res) => {
|
||
// 使用 Vue 的响应式更新方式
|
||
form.noticeContent = res.html
|
||
// 计算内容长度（去除HTML标签）
|
||
const text = res.text || ''
|
||
contentLength.value = text.length
|
||
}
|
||
})
|
||
}
|
||
|
||
// 编辑器获得焦点
|
||
function editorFocus() {
|
||
// 可以添加焦点样式
|
||
}
|
||
|
||
// 编辑器失去焦点
|
||
function editorBlur() {
|
||
// 保存内容
|
||
if (editorCtx.value) {
|
||
editorCtx.value.getContents({
|
||
success: (res) => {
|
||
form.noticeContent = res.html
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// 格式化文本
|
||
function format(name, value) {
|
||
if (!editorCtx.value) return
|
||
|
||
editorCtx.value.format(name, value)
|
||
}
|
||
|
||
// 撤销
|
||
function undo() {
|
||
if (!editorCtx.value) return
|
||
editorCtx.value.undo()
|
||
}
|
||
|
||
// 重做
|
||
function redo() {
|
||
if (!editorCtx.value) return
|
||
editorCtx.value.redo()
|
||
}
|
||
|
||
// 插入图片
|
||
function insertImage() {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: (res) => {
|
||
const tempFilePath = res.tempFilePaths[0]
|
||
|
||
// 显示加载提示
|
||
uni.showLoading({
|
||
title: '上传中...'
|
||
})
|
||
|
||
// 这里需要根据实际的上传接口进行调整
|
||
// 示例代码，实际使用时需要替换为真实的上传逻辑
|
||
uni.uploadFile({
|
||
url: '/common/upload', // 替换为实际的上传地址
|
||
filePath: tempFilePath,
|
||
name: 'file',
|
||
success: (uploadRes) => {
|
||
uni.hideLoading()
|
||
try {
|
||
const data = JSON.parse(uploadRes.data)
|
||
if (data.code === 200) {
|
||
// 获取图片URL - 需要根据实际返回结构调整
|
||
const imageUrl = data.url || data.data || data.fileName
|
||
|
||
// 插入图片到编辑器
|
||
if (editorCtx.value) {
|
||
editorCtx.value.insertImage({
|
||
src: imageUrl,
|
||
width: '100%',
|
||
height: 'auto',
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '插入成功',
|
||
icon: 'success'
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
console.error('插入图片失败', err)
|
||
uni.showToast({
|
||
title: '插入失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: data.msg || '上传失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (e) {
|
||
console.error('解析上传结果失败', e)
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
uni.hideLoading()
|
||
console.error('上传失败', err)
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
console.error('选择图片失败', err)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 提交表单
|
||
async function submitForm() {
|
||
try {
|
||
// 提交前确保获取最新的编辑器内容
|
||
if (editorCtx.value) {
|
||
const content = await new Promise((resolve, reject) => {
|
||
editorCtx.value.getContents({
|
||
success: (res) => {
|
||
form.noticeContent = res.html
|
||
resolve(res.html)
|
||
},
|
||
fail: reject
|
||
})
|
||
})
|
||
|
||
// 确保内容已更新到表单
|
||
await nextTick()
|
||
}
|
||
|
||
doSubmit()
|
||
} catch (error) {
|
||
modal.msgError('获取内容失败，请重试')
|
||
}
|
||
}
|
||
|
||
function doSubmit() {
|
||
errorFields.value = [] // 清空错误字段
|
||
|
||
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
|
||
}
|
||
|
||
const submitForm = { ...form }
|
||
|
||
if (noticeId.value) {
|
||
updateNotice(submitForm).then(response => {
|
||
modal.msgSuccess('修改成功')
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1000)
|
||
}).catch(error => {
|
||
modal.msgError('修改失败: ' + (error.message || '未知错误'))
|
||
})
|
||
} else {
|
||
addNotice(submitForm).then(response => {
|
||
modal.msgSuccess('新增成功')
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1000)
|
||
}).catch(error => {
|
||
modal.msgError('新增失败: ' + (error.message || '未知错误'))
|
||
})
|
||
}
|
||
}
|
||
</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;
|
||
|
||
.form-btn {
|
||
padding-top: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.editor-container {
|
||
width: 100%;
|
||
border: 2rpx solid #e8edf3;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
background: #ffffff;
|
||
box-sizing: border-box;
|
||
|
||
.editor-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12rpx;
|
||
background: #f8f9fa;
|
||
border-bottom: 2rpx solid #e8edf3;
|
||
flex-wrap: wrap;
|
||
gap: 8rpx;
|
||
|
||
.toolbar-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
background: #ffffff;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #e8edf3;
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
background: #667eea;
|
||
border-color: #667eea;
|
||
|
||
.iconfont {
|
||
color: #ffffff;
|
||
}
|
||
|
||
uni-icons {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
|
||
&.italic {
|
||
font-style: italic;
|
||
}
|
||
|
||
&.underline {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
|
||
.toolbar-divider {
|
||
width: 2rpx;
|
||
height: 40rpx;
|
||
background: #e8edf3;
|
||
margin: 0 4rpx;
|
||
}
|
||
}
|
||
|
||
.editor-content {
|
||
width: 100%;
|
||
min-height: 500rpx;
|
||
padding: 20rpx;
|
||
font-size: 28rpx;
|
||
line-height: 1.6;
|
||
background: #ffffff;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.editor-counter {
|
||
padding: 12rpx 20rpx;
|
||
background: #f8f9fa;
|
||
border-top: 2rpx solid #e8edf3;
|
||
text-align: right;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
</style> |