sgxt_web/src/views/backOfficeSystem/luntan/components/PublishDialog.vue

<template>
    <el-dialog v-model="dialogVisible" title="发布帖子" width="600px" :before-close="handleClose">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入帖子标题" maxlength="50" show-word-limit />
            </el-form-item>

            <el-form-item label="内容" prop="content">
                <el-input v-model="form.content" type="textarea" :rows="6" placeholder="请输入帖子内容" maxlength="500"
                    show-word-limit />
            </el-form-item>

            <el-form-item label="表情">
                <V3Emoji
                    :options-name="optionsName"
                    @click-emoji="onEmojiClick"
                    :recent="true"
                />
            </el-form-item>

            <el-form-item label="图片">
                <Upload v-model="imageIds" :limit="9" :isImg="true" :isAll="true" />
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="submitting">
                发布
            </el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import V3Emoji from 'vue3-emoji'
import { tbGsxtXxltSave } from '@/api/tbGsxtXxltHf'
import { getItem } from '@/utils/storage.js'
import Upload from '@/components/MyComponents/Upload/index.vue'

const optionsName = {
    'Smileys & Emotion': '笑脸&表情',
    'Food & Drink': '食物&饮料',
    'Animals & Nature': '动物&自然',
    'Travel & Places': '旅行&地点',
    'People & Body': '人物&身体',
    Objects: '物品',
    Symbols: '符号',
    Flags: '旗帜',
    Activities: '活动'
}


const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['update:modelValue', 'success'])

const dialogVisible = ref(false)
const formRef = ref()
const submitting = ref(false)
const imageIds = ref([])

const form = ref({
    title: '',
    content: ''
})

const rules = {
    title: [
        { required: true, message: '请输入标题', trigger: 'blur' }
    ],
    content: [
        { required: true, message: '请输入内容', trigger: 'blur' }
    ]
}

watch(() => props.modelValue, (val) => {
    dialogVisible.value = val
})

watch(dialogVisible, (val) => {
    emit('update:modelValue', val)
    if (!val) {
        resetForm()
    }
})

const onEmojiClick = (emoji) => {
    form.value.content += emoji
}

const handleClose = () => {
    dialogVisible.value = false
}

const handleSubmit = async () => {
    if (!formRef.value) return

    await formRef.value.validate(async (valid) => {
        if (valid) {
            submitting.value = true
            try {
                const ltmasg = getItem('ltmasg')

                const postData = {
                    title: form.value.title,
                    content: form.value.content,
                    tp: imageIds.value.join(','),
                    fbrsfzh: ltmasg?.sfzh || '',
                    fbrxm: ltmasg?.xm || '',
                    fbrtx: ltmasg?.tx || ''
                }

                await tbGsxtXxltSave(postData)

                ElMessage.success('发布成功')
                emit('success')
                handleClose()
            } catch (error) {
                console.error('发布失败', error)
                ElMessage.error('发布失败')
            } finally {
                submitting.value = false
            }
        }
    })
}

const resetForm = () => {
    form.value = {
        title: '',
        content: ''
    }
    imageIds.value = []
    formRef.value?.resetFields()
}
</script>

<style scoped lang="scss">
// 样式已由Upload组件内部处理</style>