mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-02-04 01:25:34 +08:00
前端和后端源码，合并到一个git仓库中，方便用户下载，避免前后端不匹配的问题
This commit is contained in:
JEECG
420
jeecgboot-vue3/src/components/jeecg/comment/MyComment.vue
Normal file
420
jeecgboot-vue3/src/components/jeecg/comment/MyComment.vue
Normal file
@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div :class="{'comment-active': commentActive}" class="comment-main" @click="handleClickBlank">
|
||||
<textarea ref="commentRef" v-model="myComment" @keyup.enter="sendComment" @input="handleCommentChange" @blur="handleBlur" class="comment-content" :rows="3" placeholder="请输入你的评论，可以@成员" />
|
||||
<div class="comment-content comment-html-shower" :class="{'no-content':noConent, 'top-div': showHtml, 'bottom-div': showHtml == false }" v-html="commentHtml" @click="handleClickHtmlShower"></div>
|
||||
<div class="comment-buttons" v-if="commentActive">
|
||||
<div style="cursor: pointer">
|
||||
<Tooltip title="选择@用户">
|
||||
<user-add-outlined @click="openSelectUser" />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="上传附件">
|
||||
<PaperClipOutlined @click="uploadVisible = !uploadVisible" />
|
||||
</Tooltip>
|
||||
|
||||
<span title="表情" style="display: inline-block">
|
||||
<SmileOutlined ref="emojiButton" @click="handleShowEmoji" />
|
||||
<div style="position: relative" v-show=""> </div>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="commentActive">
|
||||
<a-button v-if="inner" @click="noComment" style="margin-right: 10px">取消</a-button>
|
||||
<a-button type="primary" @click="sendComment" :loading="buttonLoading" :disabled="disabledButton">发 送</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<upload-chunk ref="uploadRef" :visible="uploadVisible" @select="selectFirstFile"></upload-chunk>
|
||||
</div>
|
||||
<UserSelectModal rowKey="username" @register="registerModal" @selected="setValue" :multi="false"></UserSelectModal>
|
||||
<a-modal v-model:open="visibleEmoji" :footer="null" wrapClassName="emoji-modal" :closable="false" :width="490">
|
||||
<template #title>
|
||||
<span></span>
|
||||
</template>
|
||||
<Picker
|
||||
:pickerStyles="pickerStyles"
|
||||
:i18n="optionsName"
|
||||
:data="emojiIndex"
|
||||
emoji="grinning"
|
||||
:showPreview="false"
|
||||
:infiniteScroll="false"
|
||||
:showSearch="false"
|
||||
:showSkinTones="false"
|
||||
set="apple"
|
||||
@select="showEmoji">
|
||||
</Picker>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {ref, watch, computed, inject} from 'vue';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import { UserAddOutlined, PaperClipOutlined, SmileOutlined } from '@ant-design/icons-vue';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import UserSelectModal from '/@/components/Form/src/jeecg/components/userSelect/UserSelectModal.vue';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import UploadChunk from './UploadChunk.vue';
|
||||
import 'emoji-mart-vue-fast/css/emoji-mart.css';
|
||||
import {getGloablEmojiIndex, useEmojiHtml} from './useComment';
|
||||
|
||||
const optionsName = {
|
||||
categories: {
|
||||
recent: '最常用的',
|
||||
smileys: '表情选择',
|
||||
people: '人物&身体',
|
||||
nature: '动物&自然',
|
||||
foods: '食物&饮料',
|
||||
activity: '活动',
|
||||
places: '旅行&地点',
|
||||
objects: '物品',
|
||||
symbols: '符号',
|
||||
flags: '旗帜',
|
||||
},
|
||||
};
|
||||
export default {
|
||||
name: 'MyComment',
|
||||
components: {
|
||||
UserAddOutlined,
|
||||
Tooltip,
|
||||
UserSelectModal,
|
||||
PaperClipOutlined,
|
||||
UploadChunk,
|
||||
SmileOutlined,
|
||||
},
|
||||
props: {
|
||||
inner: propTypes.bool.def(false),
|
||||
inputFocus: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['cancel', 'comment'],
|
||||
setup(props, { emit }) {
|
||||
const uploadVisible = ref(false);
|
||||
const uploadRef = ref();
|
||||
//注册model
|
||||
const [registerModal, { openModal, closeModal }] = useModal();
|
||||
const buttonLoading = ref(false);
|
||||
const myComment = ref<string>('');
|
||||
function sendComment() {
|
||||
console.log(myComment.value);
|
||||
let content = myComment.value;
|
||||
if (!content && content !== '0') {
|
||||
disabledButton.value = true;
|
||||
} else {
|
||||
buttonLoading.value = true;
|
||||
let fileList = [];
|
||||
if (uploadVisible.value == true) {
|
||||
fileList = uploadRef.value.getUploadFileList();
|
||||
}
|
||||
emit('comment', content, fileList);
|
||||
setTimeout(() => {
|
||||
buttonLoading.value = false;
|
||||
}, 350);
|
||||
}
|
||||
}
|
||||
const disabledButton = ref(false);
|
||||
watch(myComment, () => {
|
||||
let content = myComment.value;
|
||||
if (!content && content !== '0') {
|
||||
disabledButton.value = true;
|
||||
} else {
|
||||
disabledButton.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
function noComment() {
|
||||
emit('cancel');
|
||||
}
|
||||
|
||||
const commentRef = ref();
|
||||
watch(
|
||||
() => props.inputFocus,
|
||||
(val) => {
|
||||
if (val == true) {
|
||||
// commentRef.value.focus()
|
||||
myComment.value = '';
|
||||
if (uploadVisible.value == true) {
|
||||
uploadRef.value.clear();
|
||||
uploadVisible.value = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
function openSelectUser() {
|
||||
openModal(true, {
|
||||
isUpdate: false,
|
||||
});
|
||||
}
|
||||
function setValue(options) {
|
||||
console.log('setValue', options);
|
||||
if (options && options.length > 0) {
|
||||
const { realname, username } = options[0];
|
||||
if (realname && username) {
|
||||
let str = `${realname}[${username}]`;
|
||||
let temp = myComment.value;
|
||||
if (!temp) {
|
||||
myComment.value = '@' + str;
|
||||
} else {
|
||||
if (temp.endsWith('@')) {
|
||||
myComment.value = temp + str +' ';
|
||||
} else {
|
||||
myComment.value = '@' + str + ' ' + temp + ' ';
|
||||
}
|
||||
}
|
||||
//update-begin---author:wangshuai---date:2024-01-22---for:【QQYUN-8002】选完人，鼠标应该放到后面并在前面加上空格---
|
||||
showHtml.value = false;
|
||||
commentRef.value.focus();
|
||||
commentActive.value = true;
|
||||
//update-end---author:wangshuai---date:2024-01-22---for:【QQYUN-8002】选完人，鼠标应该放到后面并在前面加上空格---
|
||||
}
|
||||
}
|
||||
closeModal();
|
||||
}
|
||||
|
||||
function handleCommentChange() {
|
||||
//console.log(1,e)
|
||||
}
|
||||
watch(
|
||||
() => myComment.value,
|
||||
(val) => {
|
||||
if (val && val.endsWith('@')) {
|
||||
openSelectUser();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const emojiButton = ref();
|
||||
function onSelectEmoji(emoji) {
|
||||
let temp = myComment.value || '';
|
||||
temp += emoji;
|
||||
myComment.value = temp;
|
||||
emojiButton.value.click();
|
||||
}
|
||||
|
||||
const visibleEmoji = ref(false);
|
||||
function showEmoji(e) {
|
||||
let temp = myComment.value || '';
|
||||
let str = e.colons;
|
||||
if (str.indexOf('::') > 0) {
|
||||
str = str.substring(0, str.indexOf(':') + 1);
|
||||
}
|
||||
// update-begin--author:liaozhiyang---date:20240603---for：【TV360X-931】评论表情插入光标位置
|
||||
const index = commentRef.value?.selectionStart ?? temp.length;
|
||||
// myComment.value = temp + str;
|
||||
const startStr = temp.substring(0, index);
|
||||
const endStr = temp.substring(index);
|
||||
myComment.value = startStr + str + endStr;
|
||||
// update-end--author:liaozhiyang---date:20240603---for：【TV360X-931】评论表情插入光标位置
|
||||
visibleEmoji.value = false;
|
||||
handleBlur();
|
||||
}
|
||||
|
||||
const pickerStyles = {
|
||||
width: '490px'
|
||||
/* height: '350px',
|
||||
top: '0px',
|
||||
left: '-75px',
|
||||
position: 'absolute',
|
||||
'z-index': 9999*/
|
||||
};
|
||||
function handleClickBlank(e) {
|
||||
console.log('handleClickBlank');
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
visibleEmoji.value = false;
|
||||
commentActive.value = true;
|
||||
}
|
||||
function handleShowEmoji(e) {
|
||||
console.log('handleShowEmoji');
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
visibleEmoji.value = !visibleEmoji.value;
|
||||
}
|
||||
|
||||
//const emojiIndex = inject('$globalEmojiIndex')
|
||||
const emojiIndex = getGloablEmojiIndex()
|
||||
const { getHtml } = useEmojiHtml(emojiIndex);
|
||||
|
||||
const commentHtml = computed(() => {
|
||||
let temp = myComment.value;
|
||||
if (!temp) {
|
||||
return '请输入你的评论，可以@成员';
|
||||
}
|
||||
return getHtml(temp);
|
||||
});
|
||||
|
||||
const showHtml = ref(false);
|
||||
function handleClickHtmlShower(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
showHtml.value = false;
|
||||
commentRef.value.focus();
|
||||
console.log(234);
|
||||
commentActive.value = true;
|
||||
}
|
||||
function handleBlur() {
|
||||
showHtml.value = true;
|
||||
}
|
||||
|
||||
const commentActive = ref(false);
|
||||
const noConent = computed(()=>{
|
||||
if(myComment.value.length>0){
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
function changeActive(){
|
||||
if(myComment.value.length==0){
|
||||
commentActive.value = false
|
||||
uploadVisible.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function selectFirstFile(fileName){
|
||||
if(myComment.value.length==0){
|
||||
myComment.value = fileName;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
myComment,
|
||||
sendComment,
|
||||
noComment,
|
||||
disabledButton,
|
||||
buttonLoading,
|
||||
commentRef,
|
||||
registerModal,
|
||||
openSelectUser,
|
||||
setValue,
|
||||
handleCommentChange,
|
||||
uploadRef,
|
||||
uploadVisible,
|
||||
onSelectEmoji,
|
||||
optionsName,
|
||||
emojiButton,
|
||||
emojiIndex,
|
||||
showEmoji,
|
||||
pickerStyles,
|
||||
visibleEmoji,
|
||||
handleClickBlank,
|
||||
handleShowEmoji,
|
||||
commentHtml,
|
||||
showHtml,
|
||||
handleClickHtmlShower,
|
||||
handleBlur,
|
||||
commentActive,
|
||||
noConent,
|
||||
changeActive,
|
||||
selectFirstFile
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
// update-begin--author:liaozhiyang---date:20240327---for：【QQYUN-8639】暗黑主题适配
|
||||
.comment-main {
|
||||
border: 1px solid #eee;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
// update-end--author:liaozhiyang---date:20240327---for：【QQYUN-8639】暗黑主题适配
|
||||
.comment-content {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-variant: tabular-nums;
|
||||
list-style: none;
|
||||
font-feature-settings: tnum;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 4px 11px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 15px;
|
||||
line-height: 1.5715;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s;
|
||||
width: 100%;
|
||||
border: solid 0px;
|
||||
outline: none;
|
||||
|
||||
.emoji-item {
|
||||
display: inline-block !important;
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
.comment-buttons {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #d9d9d9;
|
||||
.anticon {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
.comment-html-shower {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 70px;
|
||||
&.bottom-div {
|
||||
z-index: -99;
|
||||
}
|
||||
&.top-div {
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-modal {
|
||||
> .ant-modal{
|
||||
right: 25% !important;
|
||||
margin-right: 16px !important;
|
||||
}
|
||||
.ant-modal-header{
|
||||
padding: 0 !important;
|
||||
}
|
||||
.emoji-mart-bar{
|
||||
display: none;
|
||||
}
|
||||
h3.emoji-mart-category-label{
|
||||
/* display: none;*/
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-active{
|
||||
border-color: @primary-color !important;
|
||||
// box-shadow: 0 1px 1px 0 #90caf9, 0 1px 6px 0 #90caf9;
|
||||
}
|
||||
.no-content{
|
||||
color: #a1a1a1
|
||||
}
|
||||
|
||||
/**聊天表情本地化*/
|
||||
.emoji-type-image.emoji-set-apple {
|
||||
background-image: url("./image/emoji.png");
|
||||
}
|
||||
// update-begin--author:liaozhiyang---date:20240327---for：【QQYUN-8639】暗黑主题适配
|
||||
html[data-theme='dark'] {
|
||||
.emoji-type-image.emoji-set-apple {
|
||||
background-image: url("./image/emoji_native.png");
|
||||
}
|
||||
.comment-main {
|
||||
border-color: rgba(253, 253, 253, 0.12);
|
||||
}
|
||||
.comment-content {
|
||||
background-color: #141414;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
border-color: rgba(253, 253, 253, 0.12);
|
||||
}
|
||||
.comment-buttons{
|
||||
border-color: rgba(253, 253, 253, 0.12);
|
||||
}
|
||||
}
|
||||
// update-end--author:liaozhiyang---date:20240327---for：【QQYUN-8639】暗黑主题适配
|
||||
</style>
|
||||
Reference in New Issue
Block a user