<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 {inject, ref, watchEffect} from 'vue'
|
import { propTypes } from '/@/utils/propTypes';
|
import { Tooltip } from 'ant-design-vue';
|
// import dayjs from 'dayjs';
|
// 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 dayjs = inject('$dayjs')
|
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>
|
