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

<template>
  <el-dialog
    v-model="dialogVisible"
    class="luntan-tech-dialog"
    title="发布帖子"
    width="60%"
    :before-close="handleClose"
    :append-to-body="true"
  >
    <div style="overflow: auto; height: 60vh">
      <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>
    </div>

    <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 等子组件样式在各自内部
::v-deep .form-item-box {
  width: 100% !important;
}
</style>

<style lang="scss">
@import "../styles/luntan-dialog-tech.scss";
</style>