jeecgboot3.4.2版本发布，新功能（表单右侧评论功能）
zhangdaiscott
parent
78d182ba0c
commit
df0441c8f5
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-alert type="info" class="jeecg-comment-files">
|
||||
<template #message>
|
||||
<span class="j-icon">
|
||||
<a-upload multiple v-model:file-list="selectFileList" :showUploadList="false" :before-upload="beforeUpload">
|
||||
<span class="inner-button"><upload-outlined />上传</span>
|
||||
</a-upload>
|
||||
</span>
|
||||
<span class="j-icon">
|
||||
<span class="inner-button"><folder-outlined />从文件库选择?</span>
|
||||
</span>
|
||||
</template>
|
||||
</a-alert>
|
||||
|
||||
<!-- 正在上传的文件 -->
|
||||
<div class="selected-file-warp" v-if="selectFileList && selectFileList.length > 0">
|
||||
<div class="selected-file-list">
|
||||
<div class="item" v-for="item in selectFileList">
|
||||
<div class="complex">
|
||||
<div class="content" >
|
||||
<!-- 图片 -->
|
||||
<div v-if="isImage(item)" class="content-top" style="height: 100%">
|
||||
<div class="content-image" :style="getImageAsBackground(item)">
|
||||
<!-- <img style="height: 100%;" :src="getImageSrc(item)">-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文件 -->
|
||||
<template v-else>
|
||||
<div class="content-top">
|
||||
<div class="content-icon" :style="{ background: 'url(' + getBackground(item) + ') no-repeat' }"></div>
|
||||
</div>
|
||||
<div class="content-bottom" :title="item.name">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="layer" :class="{'layer-image':isImage(item)}">
|
||||
<div class="next" @click="viewImage(item)"><div class="text">{{ item.name }} </div></div>
|
||||
<div class="buttons">
|
||||
<div class="opt-icon">
|
||||
<Tooltip title="删除">
|
||||
<delete-outlined @click="handleRemove(item)" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item empty"></div><div class="item empty"></div><div class="item empty"></div> <div class="item empty"></div><div class="item empty"></div><div class="item empty"></div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 24px; margin-top: 18px; text-align: right">
|
||||
<a-button @click="quxiao">取消</a-button>
|
||||
<a-button type="primary" style="margin-left: 10px" @click="queding" :loading="buttonLoading">确定</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 历史文件 -->
|
||||
<history-file-list :dataList="dataList"></history-file-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { UploadOutlined, FolderOutlined, DownloadOutlined, PaperClipOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
|
||||
import { uploadFileUrl } from './useComment';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import { computed, watchEffect, unref, ref } from 'vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { fileList } from './useComment';
|
||||
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { saveOne, useCommentWithFile, useFileList } from './useComment';
|
||||
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import HistoryFileList from './HistoryFileList.vue';
|
||||
|
||||
export default {
|
||||
name: 'CommentFiles',
|
||||
components: {
|
||||
UploadOutlined,
|
||||
FolderOutlined,
|
||||
JUpload,
|
||||
DownloadOutlined,
|
||||
PaperClipOutlined,
|
||||
DeleteOutlined,
|
||||
Tooltip,
|
||||
HistoryFileList,
|
||||
},
|
||||
props: {
|
||||
tableName: propTypes.string.def(''),
|
||||
dataId: propTypes.string.def(''),
|
||||
datetime: propTypes.number.def(1)
|
||||
},
|
||||
setup(props) {
|
||||
// const { createMessage } = useMessage();
|
||||
const { userInfo } = useUserStore();
|
||||
const dataList = ref([]);
|
||||
const commentId = ref('');
|
||||
|
||||
async function loadFileList() {
|
||||
const params = {
|
||||
tableName: props.tableName,
|
||||
tableDataId: props.dataId,
|
||||
};
|
||||
const data = await fileList(params);
|
||||
console.log('1111', data)
|
||||
if (!data || !data.records || data.records.length == 0) {
|
||||
dataList.value = [];
|
||||
} else {
|
||||
let array = data.records;
|
||||
console.log(123, array);
|
||||
dataList.value = array;
|
||||
}
|
||||
commentId.value = '';
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
// 每次切换tab都会刷新文件列表--- VUEN-1884 评论里上传的图片未在文件中显示
|
||||
if(props.datetime){
|
||||
if (props.tableName && props.dataId) {
|
||||
loadFileList();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const { saveCommentAndFiles, buttonLoading } = useCommentWithFile(props);
|
||||
const { selectFileList, beforeUpload, handleRemove, getBackground, isImage, getImageAsBackground, viewImage } = useFileList();
|
||||
|
||||
function quxiao() {
|
||||
selectFileList.value = [];
|
||||
}
|
||||
async function queding() {
|
||||
let obj = {
|
||||
fromUserId: userInfo.id,
|
||||
commentContent: '上传了附件'
|
||||
}
|
||||
await saveCommentAndFiles(obj, selectFileList.value)
|
||||
selectFileList.value = [];
|
||||
await loadFileList();
|
||||
}
|
||||
|
||||
return {
|
||||
selectFileList,
|
||||
beforeUpload,
|
||||
handleRemove,
|
||||
getBackground,
|
||||
isImage,
|
||||
dataList,
|
||||
uploadFileUrl,
|
||||
quxiao,
|
||||
queding,
|
||||
buttonLoading,
|
||||
getImageAsBackground,
|
||||
viewImage
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import 'comment.less';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,328 @@
|
|||
<template>
|
||||
<div :style="{ position: 'relative', height: allHeight + 'px' }">
|
||||
<a-list class="jeecg-comment-list" header="" item-layout="horizontal" :data-source="dataList" :style="{ height: commentHeight + 'px' }">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item style="padding-left: 10px; flex-direction: column" @click="handleClickItem">
|
||||
<a-comment>
|
||||
<template #avatar>
|
||||
<a-avatar class="tx" :src="getAvatar(item)" :alt="getAvatarText(item)">{{ getAvatarText(item) }}</a-avatar>
|
||||
</template>
|
||||
|
||||
<template #author>
|
||||
<div class="comment-author">
|
||||
<span>{{ item.fromUserId_dictText }}</span>
|
||||
|
||||
<template v-if="item.toUserId">
|
||||
<span>回复</span>
|
||||
<span>{{ item.toUserId_dictText }}</span>
|
||||
<Tooltip class="comment-last-content" @visibleChange="(v)=>visibleChange(v, item)">
|
||||
<template #title>
|
||||
<div v-html="getHtml(item.commentId_dictText)"></div>
|
||||
</template>
|
||||
<message-outlined />
|
||||
</Tooltip>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #datetime>
|
||||
<div>
|
||||
<Tooltip :title="item.createTime">
|
||||
<span>{{ getDateDiff(item) }}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<span @click="showReply(item)">回复</span>
|
||||
|
||||
<Popconfirm title="确定删除吗？" @confirm="deleteComment(item)">
|
||||
<span>删除</span>
|
||||
</Popconfirm>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div v-html="getHtml(item.commentContent)" style="font-size: 15px">
|
||||
</div>
|
||||
|
||||
<div v-if="item.fileList && item.fileList.length > 0">
|
||||
<!-- 历史文件 -->
|
||||
<history-file-list :dataList="item.fileList" isComment></history-file-list>
|
||||
</div>
|
||||
</template>
|
||||
</a-comment>
|
||||
<div v-if="item.commentStatus" class="inner-comment">
|
||||
<my-comment inner @cancel="item.commentStatus = false" @comment="(content, fileList) => replyComment(item, content, fileList)" :inputFocus="focusStatus"></my-comment>
|
||||
</div>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
|
||||
<div style="position: absolute; bottom: 0; left: 0; width: 100%; background: #fff; border-top: 1px solid #eee">
|
||||
<a-comment style="margin: 0 10px">
|
||||
<template #avatar>
|
||||
<a-avatar class="tx" :src="getMyAvatar()" :alt="getMyname()">{{ getMyname() }}</a-avatar>
|
||||
</template>
|
||||
<template #content>
|
||||
<my-comment ref="bottomCommentRef" @comment="sendComment" :inputFocus="focusStatus"></my-comment>
|
||||
</template>
|
||||
</a-comment>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 评论列表
|
||||
*/
|
||||
import { defineComponent, ref, onMounted, watch, watchEffect } from 'vue';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh.js';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
dayjs.locale('zh');
|
||||
dayjs.extend(relativeTime);
|
||||
dayjs.extend(customParseFormat);
|
||||
import { MessageOutlined } from '@ant-design/icons-vue';
|
||||
import { Comment, Tooltip } from 'ant-design-vue';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import MyComment from './MyComment.vue';
|
||||
import { list, saveOne, deleteOne, useCommentWithFile, useEmojiHtml, queryById } from './useComment';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import HistoryFileList from './HistoryFileList.vue';
|
||||
import { Popconfirm } from 'ant-design-vue';
|
||||
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CommentList',
|
||||
components: {
|
||||
MessageOutlined,
|
||||
AComment: Comment,
|
||||
Tooltip,
|
||||
MyComment,
|
||||
Popconfirm,
|
||||
HistoryFileList,
|
||||
},
|
||||
props: {
|
||||
tableName: propTypes.string.def(''),
|
||||
dataId: propTypes.string.def(''),
|
||||
datetime: propTypes.number.def(1)
|
||||
},
|
||||
setup(props) {
|
||||
const { createMessage } = useMessage();
|
||||
const dataList = ref([]);
|
||||
const { userInfo } = useUserStore();
|
||||
/**
|
||||
* 获取当前用户名称
|
||||
*/
|
||||
function getMyname() {
|
||||
if (userInfo.realname) {
|
||||
return userInfo.realname.substr(0, 2);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function getMyAvatar(){
|
||||
return userInfo.avatar;
|
||||
}
|
||||
|
||||
// 获取头像
|
||||
function getAvatar(item) {
|
||||
if (item.fromUserAvatar) {
|
||||
return getFileAccessHttpUrl(item.fromUserAvatar)
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
// 头像没有获取 用户名前两位
|
||||
function getAvatarText(item){
|
||||
if (item.fromUserId_dictText) {
|
||||
return item.fromUserId_dictText.substr(0, 2);
|
||||
}
|
||||
return '未知';
|
||||
}
|
||||
|
||||
function getAuthor(item) {
|
||||
if (item.toUser) {
|
||||
return item.fromUserId_dictText + ' 回复 ' + item.fromUserId_dictText;
|
||||
} else {
|
||||
return item.fromUserId_dictText;
|
||||
}
|
||||
}
|
||||
|
||||
function getDateDiff(item) {
|
||||
if (item.createTime) {
|
||||
const temp = dayjs(item.createTime, 'YYYY-MM-DD hh:mm:ss');
|
||||
return temp.fromNow();
|
||||
}
|
||||
return '';
|
||||
}
|
||||
const commentHeight = ref(300);
|
||||
const allHeight = ref(300);
|
||||
onMounted(() => {
|
||||
commentHeight.value = window.innerHeight - 57 - 46 - 70 - 160;
|
||||
allHeight.value = window.innerHeight - 57 - 46 - 53 -20;
|
||||
});
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async function loadData() {
|
||||
const params = {
|
||||
tableName: props.tableName,
|
||||
tableDataId: props.dataId,
|
||||
column: 'createTime',
|
||||
order: 'desc',
|
||||
};
|
||||
const data = await list(params);
|
||||
if (!data || !data.records || data.records.length == 0) {
|
||||
dataList.value = [];
|
||||
} else {
|
||||
let array = data.records;
|
||||
console.log(123, array);
|
||||
dataList.value = array;
|
||||
}
|
||||
}
|
||||
|
||||
const { saveCommentAndFiles } = useCommentWithFile(props);
|
||||
// 回复
|
||||
async function replyComment(item, content, fileList) {
|
||||
console.log(content, item);
|
||||
let obj = {
|
||||
fromUserId: userInfo.id,
|
||||
toUserId: item.fromUserId,
|
||||
commentId: item.id,
|
||||
commentContent: content
|
||||
}
|
||||
await saveCommentAndFiles(obj, fileList)
|
||||
await loadData();
|
||||
}
|
||||
|
||||
//评论
|
||||
async function sendComment(content, fileList) {
|
||||
let obj = {
|
||||
fromUserId: userInfo.id,
|
||||
commentContent: content
|
||||
}
|
||||
await saveCommentAndFiles(obj, fileList)
|
||||
await loadData();
|
||||
focusStatus.value = false;
|
||||
setTimeout(()=>{
|
||||
focusStatus.value = true;
|
||||
},100)
|
||||
}
|
||||
|
||||
//删除
|
||||
async function deleteComment(item) {
|
||||
const params = { id: item.id };
|
||||
await deleteOne(params);
|
||||
await loadData();
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开回复时触发
|
||||
* @type {Ref<UnwrapRef<boolean>>}
|
||||
*/
|
||||
const focusStatus = ref(false);
|
||||
function showReply(item) {
|
||||
let arr = dataList.value;
|
||||
for (let temp of arr) {
|
||||
temp.commentStatus = false;
|
||||
}
|
||||
item.commentStatus = true;
|
||||
focusStatus.value = false;
|
||||
focusStatus.value = true;
|
||||
}
|
||||
|
||||
// 表单改变 -重新加载评论列表
|
||||
watchEffect(() => {
|
||||
if(props.datetime){
|
||||
if (props.tableName && props.dataId) {
|
||||
loadData();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const { getHtml } = useEmojiHtml();
|
||||
const bottomCommentRef = ref()
|
||||
function handleClickItem(){
|
||||
bottomCommentRef.value.changeActive()
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 根据id查询评论信息
|
||||
*/
|
||||
async function visibleChange(v, item){
|
||||
if(v==true){
|
||||
if(!item.commentId_dictText){
|
||||
const data = await queryById(item.commentId);
|
||||
if(data.success == true){
|
||||
item.commentId_dictText = data.result.commentContent
|
||||
}else{
|
||||
console.error(data.message)
|
||||
item.commentId_dictText='该评论已被删除';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
dataList,
|
||||
getAvatar,
|
||||
getAvatarText,
|
||||
getAuthor,
|
||||
getDateDiff,
|
||||
commentHeight,
|
||||
allHeight,
|
||||
replyComment,
|
||||
sendComment,
|
||||
getMyname,
|
||||
getMyAvatar,
|
||||
|
||||
focusStatus,
|
||||
showReply,
|
||||
deleteComment,
|
||||
getHtml,
|
||||
handleClickItem,
|
||||
bottomCommentRef,
|
||||
visibleChange
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-comment-list {
|
||||
overflow: auto;
|
||||
/* border-bottom: 1px solid #eee;*/
|
||||
.inner-comment {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.ant-comment {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.comment-author {
|
||||
span {
|
||||
margin: 3px;
|
||||
}
|
||||
.comment-last-content {
|
||||
margin-left: 5px;
|
||||
&:hover{
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-list-items{
|
||||
.ant-list-item:last-child{
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
}
|
||||
.tx{
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<div class="comment-tabs-warp" v-if="showStatus">
|
||||
<a-tabs @change="handleChange" :animated="false">
|
||||
<a-tab-pane tab="评论" key="comment" class="comment-list-tab">
|
||||
<comment-list :tableName="tableName" :dataId="dataId" :datetime="datetime1"></comment-list>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="文件" key="file">
|
||||
<comment-files :tableName="tableName" :dataId="dataId" :datetime="datetime2"></comment-files>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="日志" key="log">
|
||||
<data-log-list :tableName="tableName" :dataId="dataId" :datetime="datetime3"></data-log-list>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
<a-empty v-else description="新增页面不支持评论" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 评论区域
|
||||
*/
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import { computed, ref } from 'vue';
|
||||
import CommentList from './CommentList.vue';
|
||||
import CommentFiles from './CommentFiles.vue';
|
||||
import DataLogList from './DataLogList.vue';
|
||||
|
||||
export default {
|
||||
name: 'CommentPanel',
|
||||
components: {
|
||||
CommentList,
|
||||
CommentFiles,
|
||||
DataLogList,
|
||||
},
|
||||
props: {
|
||||
tableName: propTypes.string.def(''),
|
||||
dataId: propTypes.string.def(''),
|
||||
},
|
||||
setup(props) {
|
||||
const showStatus = computed(() => {
|
||||
if (props.dataId && props.tableName) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
const datetime1 = ref(1);
|
||||
const datetime2 = ref(1);
|
||||
const datetime3 = ref(1);
|
||||
function handleChange(e) {
|
||||
let temp = new Date().getTime();
|
||||
if (e == 'comment') {
|
||||
datetime1.value = temp;
|
||||
} else if (e == 'file') {
|
||||
datetime2.value = temp;
|
||||
} else {
|
||||
datetime3.value = temp;
|
||||
}
|
||||
}
|
||||
|
||||
// VUEN-1978【bug】online关联记录和他表字段存在问题 20 修改完数据，再次打开不切换tab的时候，修改日志没有变化
|
||||
function reload() {
|
||||
let temp = new Date().getTime();
|
||||
datetime1.value = temp;
|
||||
datetime2.value = temp;
|
||||
datetime3.value = temp;
|
||||
}
|
||||
|
||||
return {
|
||||
showStatus,
|
||||
handleChange,
|
||||
datetime1,
|
||||
datetime2,
|
||||
datetime3,
|
||||
reload
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.comment-tabs-warp {
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
> .ant-tabs {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
//antd3升级后，表单右侧讨论样式调整
|
||||
::v-deep(.ant-tabs-top .ant-tabs-nav, .ant-tabs-bottom .ant-tabs-nav, .ant-tabs-top div .ant-tabs-nav, .ant-tabs-bottom div .ant-tabs-nav) {
|
||||
margin: 0 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<template>
|
||||
<div class="data-log-scroll" :style="{'height': height+'px'}">
|
||||
<div class="data-log-content">
|
||||
<div class="logbox">
|
||||
|
||||
<div class="log-item" v-for="(item, index) in dataList">
|
||||
<span class="log-item-icon">
|
||||
<plus-outlined v-if="lastIndex == index" style="margin-top:3px"/>
|
||||
<edit-outlined v-else/>
|
||||
</span>
|
||||
<span class="log-item-content">
|
||||
<a @click="handleClickPerson">@{{item.createBy}}</a>
|
||||
{{ item.dataContent }}
|
||||
</span>
|
||||
<div class="log-item-date">
|
||||
<Tooltip :title="item.createTime">
|
||||
<span>{{ getDateDiff(item) }}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PlusOutlined, EditOutlined } from '@ant-design/icons-vue';
|
||||
import { getModalHeight, getLogList } from './useComment'
|
||||
import {ref, watchEffect} from 'vue'
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh.js';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
dayjs.locale('zh');
|
||||
dayjs.extend(relativeTime);
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
export default {
|
||||
name: "DataLogList",
|
||||
components:{
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
Tooltip
|
||||
},
|
||||
props: {
|
||||
tableName: propTypes.string.def(''),
|
||||
dataId: propTypes.string.def(''),
|
||||
datetime: propTypes.number.def(1),
|
||||
},
|
||||
setup(props){
|
||||
const winHeight = getModalHeight();
|
||||
const height = ref(300);
|
||||
height.value = winHeight - 46 - 57 -53 - 30;
|
||||
|
||||
const dataList = ref([]);
|
||||
const lastIndex = ref(0);
|
||||
/**
|
||||
* 加载数据
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async function loadData() {
|
||||
const params = {
|
||||
dataTable: props.tableName,
|
||||
dataId: props.dataId,
|
||||
type: 'comment'
|
||||
};
|
||||
const res = await getLogList(params);
|
||||
if (!res || !res.result || res.result.length == 0) {
|
||||
dataList.value = [];
|
||||
lastIndex.value = -1;
|
||||
} else {
|
||||
let arr = res.result;
|
||||
lastIndex.value = arr.length-1;
|
||||
console.log('log-list', arr);
|
||||
dataList.value = arr;
|
||||
}
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
if(props.datetime){
|
||||
if (props.tableName && props.dataId) {
|
||||
console.log(props.tableName, props.dataId)
|
||||
loadData();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function getDateDiff(item) {
|
||||
if (item.createTime) {
|
||||
const temp = dayjs(item.createTime, 'YYYY-MM-DD hh:mm:ss');
|
||||
return temp.fromNow();
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function handleClickPerson() {
|
||||
console.log('此功能未开放')
|
||||
}
|
||||
|
||||
return {
|
||||
height,
|
||||
lastIndex,
|
||||
dataList,
|
||||
getDateDiff,
|
||||
handleClickPerson
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data-log-scroll{
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding-bottom: 16px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
.data-log-content{
|
||||
/* right: -10px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
top: 0;*/
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
.logbox{
|
||||
box-sizing: border-box;
|
||||
padding-left: 16px;
|
||||
.log-item{
|
||||
box-sizing: border-box;
|
||||
color: #9e9e9e;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 25px;
|
||||
position: relative;
|
||||
.log-item-icon{
|
||||
left: 0;
|
||||
line-height: 16px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.log-item-content{
|
||||
word-wrap: break-word;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
word-break: break-word;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.log-item-date{
|
||||
word-wrap: break-word;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
word-break: break-word;
|
||||
box-sizing: border-box;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<div class="comment-file-his-list" :class="isComment === true ? 'in-comment' : ''">
|
||||
<div class="selected-file-list">
|
||||
<div class="item" v-for="item in dataList">
|
||||
<div class="complex">
|
||||
<div class="content">
|
||||
<!-- 图片 -->
|
||||
<div v-if="isImage(item)" class="content-top" style="height: 100%">
|
||||
<div class="content-image" :style="getImageAsBackground(item)">
|
||||
<!--<img style="height: 100%;" :src="getImageSrc(item)"/>-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文件 -->
|
||||
<template v-else>
|
||||
<div class="content-top">
|
||||
<div class="content-icon" :style="{ background: 'url(' + getBackground(item) + ') no-repeat' }"></div>
|
||||
</div>
|
||||
<div class="content-bottom" :title="item.name">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="layer" :class="{'layer-image':isImage(item)}">
|
||||
<div class="next" @click="viewImage(item)">
|
||||
<div class="text">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="text">
|
||||
{{ getFileSize(item) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="opt-icon">
|
||||
<Tooltip title="下载">
|
||||
<download-outlined @click="downLoad(item)" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item empty"></div><div class="item empty"></div><div class="item empty"></div> <div class="item empty"></div><div class="item empty"></div><div class="item empty"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { UploadOutlined, FolderOutlined, DownloadOutlined, PaperClipOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { useFileList } from './useComment';
|
||||
|
||||
export default {
|
||||
name: 'HistoryFileList',
|
||||
props: {
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
isComment: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
UploadOutlined,
|
||||
FolderOutlined,
|
||||
DownloadOutlined,
|
||||
PaperClipOutlined,
|
||||
DeleteOutlined,
|
||||
Tooltip,
|
||||
},
|
||||
setup() {
|
||||
const { getBackground, getFileSize, downLoad, isImage, getImageAsBackground, viewImage } = useFileList();
|
||||
return {
|
||||
getBackground,
|
||||
downLoad,
|
||||
getFileSize,
|
||||
isImage,
|
||||
getImageAsBackground,
|
||||
viewImage
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import 'comment.less';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,383 @@
|
|||
<template>
|
||||
<div :class="{'comment-active': commentActive}" style="border: 1px solid #eee; margin: 0; position: relative" @click="handleClickBlank">
|
||||
<textarea ref="commentRef" v-model="myComment" @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 labelKey="realname" rowKey="username" @register="registerModal" @getSelectResult="setValue" isRadioSelection></UserSelectModal>
|
||||
<a-modal v-model:visible="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 } 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/modal/UserSelectModal.vue';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import UploadChunk from './UploadChunk.vue';
|
||||
import { Picker } from 'emoji-mart-vue-fast/src';
|
||||
import 'emoji-mart-vue-fast/css/emoji-mart.css';
|
||||
import { 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,
|
||||
Picker,
|
||||
},
|
||||
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 }] = 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 { label, value } = options[0];
|
||||
if (label && value) {
|
||||
let str = `${label}[${value}]`;
|
||||
let temp = myComment.value;
|
||||
if (!temp) {
|
||||
myComment.value = '@' + str;
|
||||
} else {
|
||||
if (temp.endsWith('@')) {
|
||||
myComment.value = temp + str;
|
||||
} else {
|
||||
myComment.value = '@' + str + ' ' + temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
myComment.value = temp + str;
|
||||
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, getHtml } = useEmojiHtml();
|
||||
|
||||
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">
|
||||
.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: #1e88e5 !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");
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<div v-if="visible">
|
||||
<a-alert type="info" class="jeecg-comment-files" style="margin: 0">
|
||||
<template #message>
|
||||
<span class="j-icon">
|
||||
<a-upload multiple v-model:file-list="selectFileList" :showUploadList="false" :before-upload="beforeUpload">
|
||||
<span class="inner-button"><upload-outlined />上传</span>
|
||||
</a-upload>
|
||||
</span>
|
||||
<span class="j-icon">
|
||||
<span class="inner-button"><folder-outlined />从文件库选择?</span>
|
||||
</span>
|
||||
</template>
|
||||
</a-alert>
|
||||
|
||||
<!-- 正在上传的文件 -->
|
||||
<div class="selected-file-warp" v-if="selectFileList && selectFileList.length > 0">
|
||||
<div class="selected-file-list">
|
||||
<div class="item" v-for="item in selectFileList">
|
||||
<div class="complex">
|
||||
<div class="content">
|
||||
<!-- 图片 -->
|
||||
<div v-if="isImage(item)" class="content-top" style="height: 100%">
|
||||
<div class="content-image" :style="{'height':'100%', 'backgroundImage': 'url('+getImageSrc(item)+')'}">
|
||||
<!-- <img style="height: 100%;" :src="getImageSrc(item)">-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文件 -->
|
||||
<template v-else>
|
||||
<div class="content-top">
|
||||
<div class="content-icon" :style="{ background: 'url(' + getBackground(item) + ') no-repeat' }"></div>
|
||||
</div>
|
||||
<div class="content-bottom" :title="item.name">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="layer" :class="{'layer-image':isImage(item)}">
|
||||
<div class="next" @click="viewImage(item)">
|
||||
<div class="text">{{ item.name }} </div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="opt-icon">
|
||||
<Tooltip title="删除">
|
||||
<delete-outlined @click="handleRemove(item)" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item empty"></div><div class="item empty"></div><div class="item empty"></div> <div class="item empty"></div><div class="item empty"></div><div class="item empty"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRaw, watch } from 'vue';
|
||||
import { useFileList } from './useComment';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { UploadOutlined, FolderOutlined, DownloadOutlined, PaperClipOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
export default {
|
||||
name: 'UploadChunk',
|
||||
components: {
|
||||
Tooltip,
|
||||
UploadOutlined,
|
||||
FolderOutlined,
|
||||
DownloadOutlined,
|
||||
PaperClipOutlined,
|
||||
DeleteOutlined,
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits:['select'],
|
||||
setup(_p, {emit}) {
|
||||
const { selectFileList, beforeUpload, handleRemove, getBackground, isImage, getImageSrc, viewImage } = useFileList();
|
||||
|
||||
function getUploadFileList() {
|
||||
let list = toRaw(selectFileList.value);
|
||||
console.log(list);
|
||||
return list;
|
||||
}
|
||||
|
||||
function clear(){
|
||||
selectFileList.value = [];
|
||||
}
|
||||
|
||||
watch(()=>selectFileList.value, (arr)=>{
|
||||
if(arr && arr.length>0){
|
||||
let name = arr[0].name;
|
||||
if(name){
|
||||
emit('select', name)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
selectFileList,
|
||||
beforeUpload,
|
||||
handleRemove,
|
||||
getBackground,
|
||||
getUploadFileList,
|
||||
clear,
|
||||
isImage,
|
||||
getImageSrc,
|
||||
viewImage
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import 'comment.less';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
/*文件上传列表-begin*/
|
||||
.selected-file-warp,
|
||||
.comment-file-his-list {
|
||||
margin: 10px 20px;
|
||||
&.in-comment{
|
||||
margin: 10px 6px;
|
||||
}
|
||||
}
|
||||
.selected-file-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-right: -6px;
|
||||
.item {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
flex: 1 1 0%;
|
||||
height: 118px;
|
||||
margin: 0 6px 6px 0;
|
||||
min-width: 140px;
|
||||
max-width: 200px;
|
||||
width: 150px;
|
||||
&.empty {
|
||||
height: 0;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
.complex {
|
||||
border: 1px solid #e0e0e0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
.content-top {
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
flex: 1 1 0%;
|
||||
justify-content: center;
|
||||
.content-icon {
|
||||
background-position: 50%;
|
||||
background-size: contain !important;
|
||||
height: 55px;
|
||||
width: 40px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.content-image{
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.content-bottom {
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-basis: 30px;
|
||||
font-size: 13px;
|
||||
justify-content: flex-start;
|
||||
padding: 0 10px;
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.layer {
|
||||
opacity: 0;
|
||||
background-color: #f5f5f5;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: opacity 0.2s;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.next {
|
||||
height: 75px;
|
||||
padding: 5px;
|
||||
.text {
|
||||
color: #1e88e5 !important;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-basis: 30px;
|
||||
font-size: 12px;
|
||||
justify-content: flex-start;
|
||||
padding: 3px 7px 4px;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
line-height: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
flex-basis: 32px;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding-right: 5px;
|
||||
justify-content: flex-end;
|
||||
.opt-icon {
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
width: 32px;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
.anticon-delete:hover {
|
||||
color: red;
|
||||
}
|
||||
.anticon-download:hover{
|
||||
color: #1e88e5 !important
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layer-image{
|
||||
background: #000;
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.next{
|
||||
.text{
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.opt-icon{
|
||||
color: #000 !important;
|
||||
.anticon-delete:hover {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jeecg-comment-files {
|
||||
margin: 0 20px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
&.ant-alert-info{
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #f5f5f5;
|
||||
}
|
||||
.j-icon {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
border: 1px solid #e6f7ff;
|
||||
padding: 2px 7px;
|
||||
margin: 0 10px;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: #fff;
|
||||
color: #096dd9;
|
||||
}
|
||||
.inner-button {
|
||||
display: inline-block;
|
||||
color:#9e9e9e;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
/*border-color: #fff;*/
|
||||
/* color: #096dd9;*/
|
||||
color: #000;
|
||||
}
|
||||
span{
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-file-list {
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
line-height: 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
height: 100%;
|
||||
|
||||
.item-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
min-width: 100px;
|
||||
width: 20%;
|
||||
max-width: 220px;
|
||||
background-color: #fafafa;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
/* border-left: 1px solid #f0f0f0;*/
|
||||
padding: 10px 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
border-right: 1px solid #f0f0f0;
|
||||
flex-grow: 1;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
.anticon {
|
||||
&:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 839 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 MiB |
|
|
@ -0,0 +1,416 @@
|
|||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
const globSetting = useGlobSetting();
|
||||
const baseUploadUrl = globSetting.uploadUrl;
|
||||
import { ref, toRaw, unref, reactive } from 'vue';
|
||||
import { uploadMyFile } from '/@/api/common/api';
|
||||
|
||||
import excel from '/@/assets/svg/fileType/excel.svg';
|
||||
import other from '/@/assets/svg/fileType/other.svg';
|
||||
import pdf from '/@/assets/svg/fileType/pdf.svg';
|
||||
import txt from '/@/assets/svg/fileType/txt.svg';
|
||||
import word from '/@/assets/svg/fileType/word.svg';
|
||||
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||
import { createImgPreview } from '/@/components/Preview';
|
||||
import {EmojiIndex} from "emoji-mart-vue-fast/src";
|
||||
import data from "emoji-mart-vue-fast/data/apple.json";
|
||||
|
||||
enum Api {
|
||||
list = '/sys/comment/listByForm',
|
||||
addText = '/sys/comment/addText',
|
||||
deleteOne = '/sys/comment/deleteOne',
|
||||
fileList = '/sys/comment/fileList',
|
||||
logList = '/sys/dataLog/queryDataVerList',
|
||||
queryById = '/sys/comment/queryById',
|
||||
getFileViewDomain = '/sys/comment/getFileViewDomain',
|
||||
}
|
||||
|
||||
// 文件预览地址的domain 在后台配置的
|
||||
let onlinePreviewDomain = '';
|
||||
|
||||
/**
|
||||
* 获取文件预览的domain
|
||||
*/
|
||||
const getViewFileDomain = () => defHttp.get({ url: Api.getFileViewDomain });
|
||||
|
||||
/**
|
||||
* 列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const list = (params) => defHttp.get({ url: Api.list, params });
|
||||
|
||||
/**
|
||||
* 查询单条记录
|
||||
* @param params
|
||||
*/
|
||||
export const queryById = (id) => {
|
||||
let params = { id: id };
|
||||
return defHttp.get({ url: Api.queryById, params },{ isTransformResponse: false });
|
||||
};
|
||||
|
||||
/**
|
||||
* 文件列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const fileList = (params) => defHttp.get({ url: Api.fileList, params });
|
||||
|
||||
/**
|
||||
* 删除单个
|
||||
*/
|
||||
export const deleteOne = (params) => {
|
||||
return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true });
|
||||
};
|
||||
|
||||
/**
|
||||
* 保存
|
||||
* @param params
|
||||
*/
|
||||
export const saveOne = (params) => {
|
||||
let url = Api.addText;
|
||||
return defHttp.post({ url: url, params }, { isTransformResponse: false });
|
||||
};
|
||||
|
||||
/**
|
||||
* 数据日志列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const getLogList = (params) => defHttp.get({ url: Api.logList, params }, {isTransformResponse: false});
|
||||
|
||||
|
||||
/**
|
||||
* 文件上传接口
|
||||
*/
|
||||
export const uploadFileUrl = `${baseUploadUrl}/sys/comment/addFile`;
|
||||
|
||||
export function useCommentWithFile(props) {
|
||||
let uploadData = {
|
||||
biz: 'comment',
|
||||
commentId: '',
|
||||
};
|
||||
const { createMessage } = useMessage();
|
||||
const buttonLoading = ref(false);
|
||||
|
||||
//确定按钮触发
|
||||
async function saveCommentAndFiles(obj, fileList) {
|
||||
buttonLoading.value = true;
|
||||
setTimeout(() => {
|
||||
buttonLoading.value = false;
|
||||
}, 500);
|
||||
await saveComment(obj);
|
||||
await uploadFiles(fileList);
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存评论
|
||||
*/
|
||||
async function saveComment(obj) {
|
||||
const {fromUserId, toUserId, commentId, commentContent} = obj;
|
||||
let commentData = {
|
||||
tableName: props.tableName,
|
||||
tableDataId: props.dataId,
|
||||
fromUserId,
|
||||
commentContent,
|
||||
toUserId: '',
|
||||
commentId: ''
|
||||
};
|
||||
if(toUserId){
|
||||
commentData.toUserId = toUserId;
|
||||
}
|
||||
if(commentId){
|
||||
commentData.commentId = commentId;
|
||||
}
|
||||
uploadData.commentId = '';
|
||||
const res = await saveOne(commentData);
|
||||
if (res.success) {
|
||||
uploadData.commentId = res.result;
|
||||
} else {
|
||||
createMessage.warning(res.message);
|
||||
return Promise.reject('保存评论失败');
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadOne(file) {
|
||||
let url = uploadFileUrl;
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('tableName', props.tableName);
|
||||
formData.append('tableDataId', props.dataId);
|
||||
Object.keys(uploadData).map((k) => {
|
||||
formData.append(k, uploadData[k]);
|
||||
});
|
||||
return new Promise((resolve, reject) => {
|
||||
uploadMyFile(url, formData).then((res: any) => {
|
||||
console.log('uploadMyFile', res);
|
||||
if (res && res.data) {
|
||||
if (res.data.result == 'success') {
|
||||
resolve(1);
|
||||
} else {
|
||||
createMessage.warning(res.data.message);
|
||||
reject();
|
||||
}
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function uploadFiles(fileList) {
|
||||
if (fileList && fileList.length > 0) {
|
||||
for (let i = 0; i < fileList.length; i++) {
|
||||
let file = toRaw(fileList[i]);
|
||||
await uploadOne(file.originFileObj);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
saveCommentAndFiles,
|
||||
buttonLoading,
|
||||
};
|
||||
}
|
||||
|
||||
export function uploadMu(fileList) {
|
||||
const formData = new FormData();
|
||||
// let arr = []
|
||||
for(let file of fileList){
|
||||
formData.append('files[]', file.originFileObj);
|
||||
}
|
||||
console.log(formData)
|
||||
let url = `${baseUploadUrl}/sys/comment/addFile2`;
|
||||
uploadMyFile(url, formData).then((res: any) => {
|
||||
console.log('uploadMyFile', res);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示文件列表
|
||||
*/
|
||||
export function useFileList() {
|
||||
const imageSrcMap = reactive({});
|
||||
const typeMap = {
|
||||
xls: excel,
|
||||
xlsx: excel,
|
||||
pdf: pdf,
|
||||
txt: txt,
|
||||
docx: word,
|
||||
doc: word,
|
||||
};
|
||||
function getBackground(item) {
|
||||
console.log('获取文件背景图', item);
|
||||
if (isImage(item)) {
|
||||
return 'none'
|
||||
} else {
|
||||
const name = item.name;
|
||||
if(!name){
|
||||
return 'none';
|
||||
}
|
||||
const suffix = name.substring(name.lastIndexOf('.') + 1);
|
||||
console.log('suffix', suffix)
|
||||
let bg = typeMap[suffix];
|
||||
if (!bg) {
|
||||
bg = other;
|
||||
}
|
||||
return bg;
|
||||
}
|
||||
}
|
||||
|
||||
function getBase64(file, id){
|
||||
return new Promise((resolve, reject) => {
|
||||
//声明js的文件流
|
||||
let reader = new FileReader();
|
||||
if(file){
|
||||
//通过文件流将文件转换成Base64字符串
|
||||
reader.readAsDataURL(file);
|
||||
//转换成功后
|
||||
reader.onload = function () {
|
||||
let base = reader.result;
|
||||
console.log('base', base)
|
||||
imageSrcMap[id] = base;
|
||||
console.log('imageSrcMap', imageSrcMap)
|
||||
resolve(base)
|
||||
}
|
||||
}else{
|
||||
reject();
|
||||
}
|
||||
})
|
||||
}
|
||||
function handleImageSrc(file){
|
||||
if(isImage(file)){
|
||||
let id = file.uid;
|
||||
getBase64(file, id);
|
||||
}
|
||||
}
|
||||
|
||||
function downLoad(file) {
|
||||
let url = getFileAccessHttpUrl(file.url);
|
||||
if (url) {
|
||||
window.open(url);
|
||||
}
|
||||
}
|
||||
|
||||
function getFileSize(item) {
|
||||
let size = item.fileSize;
|
||||
if (!size) {
|
||||
return '0B';
|
||||
}
|
||||
let temp = Math.round(size / 1024);
|
||||
return temp + ' KB';
|
||||
}
|
||||
|
||||
const selectFileList = ref<any[]>([]);
|
||||
function beforeUpload(file) {
|
||||
handleImageSrc(file);
|
||||
selectFileList.value = [...selectFileList.value, file];
|
||||
console.log('selectFileList', unref(selectFileList));
|
||||
return false
|
||||
}
|
||||
|
||||
function handleRemove(file) {
|
||||
const index = selectFileList.value.indexOf(file);
|
||||
const newFileList = selectFileList.value.slice();
|
||||
newFileList.splice(index, 1);
|
||||
selectFileList.value = newFileList;
|
||||
}
|
||||
|
||||
function isImage(item){
|
||||
const type = item.type||'';
|
||||
if (type.indexOf('image') >= 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function getImageSrc(file){
|
||||
if(isImage(file)){
|
||||
let id = file.uid;
|
||||
if(id){
|
||||
if(imageSrcMap[id]){
|
||||
return imageSrcMap[id];
|
||||
}
|
||||
}else if(file.url){
|
||||
//数据库中地址
|
||||
let url = getFileAccessHttpUrl(file.url);
|
||||
return url;
|
||||
}
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示图片
|
||||
* @param item
|
||||
*/
|
||||
function getImageAsBackground(item){
|
||||
let url = getImageSrc(item);
|
||||
if(url){
|
||||
return {
|
||||
"backgroundImage": "url('"+url+"')"
|
||||
}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
|
||||
/**
|
||||
* 预览列表 cell 图片
|
||||
* @param text
|
||||
*/
|
||||
async function viewImage(file) {
|
||||
if(isImage(file)){
|
||||
let text = getImageSrc(file)
|
||||
if (text) {
|
||||
let imgList = [text];
|
||||
createImgPreview({ imageList: imgList });
|
||||
}
|
||||
}else{
|
||||
if(file.url){
|
||||
//数据库中地址
|
||||
let url = getFileAccessHttpUrl(file.url);
|
||||
await initViewDomain();
|
||||
//本地测试需要将文件地址的localhost/127.0.0.1替换成IP, 或是直接修改全局domain
|
||||
//url = url.replace('localhost', '192.168.1.100')
|
||||
//如果集成的KkFileview-v3.3.0+ 需要对url再做一层base64编码 encodeURIComponent(encryptByBase64(url))
|
||||
window.open(onlinePreviewDomain+'?officePreviewType=pdf&url='+encodeURIComponent(url));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化domain
|
||||
*/
|
||||
async function initViewDomain(){
|
||||
if(!onlinePreviewDomain){
|
||||
onlinePreviewDomain = await getViewFileDomain();
|
||||
}
|
||||
if(!onlinePreviewDomain.startsWith('http')){
|
||||
onlinePreviewDomain = 'http://'+ onlinePreviewDomain;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
selectFileList,
|
||||
getBackground,
|
||||
getFileSize,
|
||||
downLoad,
|
||||
beforeUpload,
|
||||
handleRemove,
|
||||
isImage,
|
||||
getImageSrc,
|
||||
getImageAsBackground,
|
||||
viewImage
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 用于emoji渲染
|
||||
*/
|
||||
export function useEmojiHtml(){
|
||||
const COLONS_REGEX = new RegExp('([^:]+)?(:[a-zA-Z0-9-_+]+:(:skin-tone-[2-6]:)?)','g');
|
||||
let emojisToShowFilter = function() {
|
||||
return true;
|
||||
}
|
||||
let emojiIndex = new EmojiIndex(data, {
|
||||
emojisToShowFilter,
|
||||
exclude:['recent','people','nature','foods','activity','places','objects','symbols','flags']
|
||||
});
|
||||
|
||||
function getHtml(text) {
|
||||
if(!text){
|
||||
return ''
|
||||
}
|
||||
return text.replace(COLONS_REGEX, function (match, p1, p2) {
|
||||
const before = p1 || ''
|
||||
if (endsWith(before, 'alt="') || endsWith(before, 'data-text="')) {
|
||||
return match
|
||||
}
|
||||
let emoji = emojiIndex.findEmoji(p2)
|
||||
if (!emoji) {
|
||||
return match
|
||||
}
|
||||
return before + emoji2Html(emoji)
|
||||
})
|
||||
return text;
|
||||
}
|
||||
|
||||
function endsWith(str, temp){
|
||||
return str.endsWith(temp)
|
||||
}
|
||||
|
||||
function emoji2Html(emoji) {
|
||||
let style = `position: absolute;top: -3px;left: 3px;width: 18px; height: 18px;background-position: ${emoji.getPosition()}`
|
||||
return `<span style="width: 24px" class="emoji-mart-emoji"><span class="my-emoji-icon emoji-set-apple emoji-type-image" style="${style}"> </span> </span>`
|
||||
}
|
||||
|
||||
return {
|
||||
emojiIndex,
|
||||
getHtml
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取modal窗体高度
|
||||
*/
|
||||
export function getModalHeight(){
|
||||
return window.innerHeight;
|
||||
}
|
||||
Loading…
Reference in New Issue