174 lines
3.9 KiB
Vue
174 lines
3.9 KiB
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>
|