lcw
This commit is contained in:
@ -1,147 +1,172 @@
|
||||
<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-dialog
|
||||
v-model="dialogVisible"
|
||||
class="luntan-tech-dialog"
|
||||
title="发布帖子"
|
||||
width="60%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<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="内容" 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="表情">
|
||||
<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>
|
||||
<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 #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'
|
||||
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: '活动'
|
||||
}
|
||||
|
||||
"Smileys & Emotion": "笑脸&表情",
|
||||
"Food & Drink": "食物&饮料",
|
||||
"Animals & Nature": "动物&自然",
|
||||
"Travel & Places": "旅行&地点",
|
||||
"People & Body": "人物&身体",
|
||||
Objects: "物品",
|
||||
Symbols: "符号",
|
||||
Flags: "旗帜",
|
||||
Activities: "活动"
|
||||
};
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'success'])
|
||||
const emit = defineEmits(["update:modelValue", "success"]);
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const formRef = ref()
|
||||
const submitting = ref(false)
|
||||
const imageIds = ref([])
|
||||
const dialogVisible = ref(false);
|
||||
const formRef = ref();
|
||||
const submitting = ref(false);
|
||||
const imageIds = ref([]);
|
||||
|
||||
const form = ref({
|
||||
title: '',
|
||||
content: ''
|
||||
})
|
||||
title: "",
|
||||
content: ""
|
||||
});
|
||||
|
||||
const rules = {
|
||||
title: [
|
||||
{ required: true, message: '请输入标题', trigger: 'blur' }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: '请输入内容', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
content: [{ required: true, message: "请输入内容", trigger: "blur" }]
|
||||
};
|
||||
|
||||
watch(() => props.modelValue, (val) => {
|
||||
dialogVisible.value = val
|
||||
})
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
dialogVisible.value = val;
|
||||
}
|
||||
);
|
||||
|
||||
watch(dialogVisible, (val) => {
|
||||
emit('update:modelValue', val)
|
||||
if (!val) {
|
||||
resetForm()
|
||||
}
|
||||
})
|
||||
emit("update:modelValue", val);
|
||||
if (!val) {
|
||||
resetForm();
|
||||
}
|
||||
});
|
||||
|
||||
const onEmojiClick = (emoji) => {
|
||||
form.value.content += emoji
|
||||
}
|
||||
form.value.content += emoji;
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
if (!formRef.value) return;
|
||||
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
submitting.value = true
|
||||
try {
|
||||
const ltmasg = getItem('ltmasg')
|
||||
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 || ''
|
||||
}
|
||||
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)
|
||||
await tbGsxtXxltSave(postData);
|
||||
|
||||
ElMessage.success('发布成功')
|
||||
emit('success')
|
||||
handleClose()
|
||||
} catch (error) {
|
||||
console.error('发布失败', error)
|
||||
ElMessage.error('发布失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
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()
|
||||
}
|
||||
form.value = {
|
||||
title: "",
|
||||
content: ""
|
||||
};
|
||||
imageIds.value = [];
|
||||
formRef.value?.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 样式已由Upload组件内部处理</style>
|
||||
// Upload 等子组件样式在各自内部
|
||||
::v-deep .form-item-box {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../styles/luntan-dialog-tech.scss";
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user