OnlineEducation-back-front/src/views/forum/postinfo/form.vue

<template>
    <xn-form-container
        :title="formData.postId ? '编辑帖子信息表' : '增加帖子信息表'"
        :width="700"
        :visible="visible"
        :destroy-on-close="true"
        @close="onClose"
    >
        <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
            <a-form-item label="分类id：" name="typeId">
                <a-input v-model:value="formData.typeId" placeholder="请输入分类id" allow-clear />
            </a-form-item>
            <a-form-item label="用户id：" name="userId">
                <a-input v-model:value="formData.userId" placeholder="请输入用户id" allow-clear />
            </a-form-item>
            <a-form-item label="帖子标题：" name="postTitle">
                <a-input v-model:value="formData.postTitle" placeholder="请输入帖子标题" allow-clear />
            </a-form-item>
            <a-form-item label="帖子内容：" name="postContent">
                <a-input v-model:value="formData.postContent" placeholder="请输入帖子内容" allow-clear />
            </a-form-item>
            <a-form-item label="是否置顶 0普通 1置顶：" name="isTop">
                <a-input v-model:value="formData.isTop" placeholder="请输入是否置顶 0普通 1置顶" allow-clear />
            </a-form-item>
            <a-form-item label="浏览次数：" name="viewCount">
                <a-input v-model:value="formData.viewCount" placeholder="请输入浏览次数" allow-clear />
            </a-form-item>
            <a-form-item label="回复次数：" name="replyCount">
                <a-input v-model:value="formData.replyCount" placeholder="请输入回复次数" allow-clear />
            </a-form-item>
            <a-form-item label="点赞次数：" name="likeCount">
                <a-input v-model:value="formData.likeCount" placeholder="请输入点赞次数" allow-clear />
            </a-form-item>
            <a-form-item label="最后回复用户id：" name="lastReplyUserId">
                <a-input v-model:value="formData.lastReplyUserId" placeholder="请输入最后回复用户id" allow-clear />
            </a-form-item>
            <a-form-item label="最后回复时间：" name="lastReplyTime">
                <a-date-picker v-model:value="formData.lastReplyTime" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择最后回复时间" style="width: 100%" />
            </a-form-item>
            <a-form-item label="帖子类型 0普通帖子 1技术支持 2内容纠错：" name="postType">
                <a-input v-model:value="formData.postType" placeholder="请输入帖子类型 0普通帖子 1技术支持 2内容纠错" allow-clear />
            </a-form-item>
            <a-form-item label="定向用户：" name="appointUser">
                <a-input v-model:value="formData.appointUser" placeholder="请输入定向用户" allow-clear />
            </a-form-item>
        </a-form>
        <template #footer>
            <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
            <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
        </template>
    </xn-form-container>
</template>

<script setup name="forumPostInfoForm">
    import { cloneDeep } from 'lodash-es'
    import { required } from '@/utils/formRules'
    import forumPostInfoApi from '@/api/forum/forumPostInfoApi'
    // 抽屉状态
    const visible = ref(false)
    const emit = defineEmits({ successful: null })
    const formRef = ref()
    // 表单数据
    const formData = ref({})
    const submitLoading = ref(false)

    // 打开抽屉
    const onOpen = (record) => {
        visible.value = true
        if (record) {
            let recordData = cloneDeep(record)
            formData.value = Object.assign({}, recordData)
        }
    }
    // 关闭抽屉
    const onClose = () => {
        formRef.value.resetFields()
        formData.value = {}
        visible.value = false
    }
    // 默认要校验的
    const formRules = {
    }
    // 验证并提交数据
    const onSubmit = () => {
        formRef.value.validate().then(() => {
            submitLoading.value = true
            const formDataParam = cloneDeep(formData.value)
            forumPostInfoApi
                .forumPostInfoSubmitForm(formDataParam, formDataParam.postId)
                .then(() => {
                    onClose()
                    emit('successful')
                })
                .finally(() => {
                    submitLoading.value = false
                })
        })
    }
    // 抛出函数
    defineExpose({
        onOpen
    })
</script>