lcw
This commit is contained in:
299
src/views/backOfficeSystem/MakeAcomment/components/a/addForm.vue
Normal file
299
src/views/backOfficeSystem/MakeAcomment/components/a/addForm.vue
Normal file
@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
|
||||
<!-- class="head_box" -->
|
||||
<div style="position: sticky;top: 0;float: right;">
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
<div class="content_box">
|
||||
<div>
|
||||
<div class="title_box">{{ listQuery.xsMc }}</div>
|
||||
<div class="content_icon flex align-center">
|
||||
<div class="icon_img"><img src="@/assets/images/ly-person-icon.png" alt="" srcset=""></div>
|
||||
<div class="flex align-space-around dir-column">
|
||||
<div class="publisher">发布者：{{ listQuery.ssbm }}——{{ listQuery.fbrxm }}</div>
|
||||
<div>发布于：{{ listQuery.fbsj }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="content_text">{{ listQuery.xsNr }} </p>
|
||||
<div class="itemXs_Xs flex just-between align-center">
|
||||
<div class=" flex just-between align-center">
|
||||
<el-icon class="icon">
|
||||
<Histogram />
|
||||
</el-icon>
|
||||
{{ listQuery.rd ? listQuery.rd : 0 }}
|
||||
</div>
|
||||
<div class=" flex just-between align-center">
|
||||
<el-icon class="icon">
|
||||
<ChatDotSquare />
|
||||
</el-icon>
|
||||
{{ pls }}
|
||||
</div>
|
||||
<div class="flex align-center">情报类型：
|
||||
<DictTag :tag="false" :value="listQuery.xlLx" color="#5c5c5c" :options="dict.D_GS_XS_LX" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title_box virtual">评论列表</div>
|
||||
<CommentList v-for="(item, index) in pagesData.listData" :key="index" :index="index" :item="item"
|
||||
@postReply="postReply" @delComment="delComment" :userInfo="userInfo" @cjpjZan="cjpjZan"/>
|
||||
<div class="sticky">
|
||||
<div class="title_box virtual">发表评论</div>
|
||||
<div class="flex flex-column ">
|
||||
<el-input v-model="textarea2" style="width: 100%" type="textarea" placeholder="请输入内容" /><el-button
|
||||
type="primary" @click="sendComment()">发表</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import { ref, reactive, toRaw, watch, onMounted, onUnmounted } from "vue";
|
||||
import CommentList from '../itemXs/commentList.vue'
|
||||
import { getItem } from '@/utils/storage.js'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
|
||||
const dialogForm = ref(false); //弹窗
|
||||
const listQuery = ref({})
|
||||
const textarea2 = ref()
|
||||
const userInfo = ref(getItem('idEntityCard'))
|
||||
// 初始化数据
|
||||
const init = (row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据id查询详情
|
||||
if (row) {
|
||||
qcckGet({ id: row }, "/mosty-gsxt/qbcj/selectByid").then((res) => {
|
||||
listQuery.value = res;
|
||||
});
|
||||
cjpjSelectPage()
|
||||
}
|
||||
|
||||
};
|
||||
// 关闭
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
pagesData.pagebreak.pageCurrent = 1
|
||||
};
|
||||
const pagesData = reactive({
|
||||
total: 0,
|
||||
pagebreak: {
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
listData: []
|
||||
});
|
||||
// 发送评论
|
||||
const sendComment = () => {
|
||||
const prmes = {
|
||||
pldd: 'pc端发送',
|
||||
plnr: textarea2.value,
|
||||
cjid: listQuery.value.id,
|
||||
dzs: 10
|
||||
}
|
||||
qcckPost(prmes, '/mosty-gsxt/gsxt/cjpj/add').then((res) => {
|
||||
textarea2.value = ''; // 清空评论内容
|
||||
cjpjSelectPage()
|
||||
})
|
||||
}
|
||||
const pls=ref(0)
|
||||
// 获取评论
|
||||
const cjpjSelectPage = () => {
|
||||
const prmes = {
|
||||
...pagesData.pagebreak,
|
||||
cjid: listQuery.value.id
|
||||
}
|
||||
qcckPost(prmes, '/mosty-gsxt/gsxt/cjpj/selectPage').then((res) => {
|
||||
pagesData.listData = pagesData.pagebreak.pageCurrent == 1 ? res.records : pagesData.listData.concat(res.records)
|
||||
pls.value=res.total
|
||||
|
||||
pagesData.total = res.pages
|
||||
})
|
||||
}
|
||||
//回复消息
|
||||
const postReply = (val) => {
|
||||
qcckPost(val, '/mosty-gsxt/gsxt/cjhf/add').then((res) => {
|
||||
ElMessage({
|
||||
message: '回复成功',
|
||||
type: 'success',
|
||||
plain: true,
|
||||
})
|
||||
})
|
||||
}
|
||||
// 删除评论
|
||||
const delComment = (val) => {
|
||||
ElMessageBox.confirm(
|
||||
'是否删除评论',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
qcckPost([val], '/mosty-gsxt/gsxt/cjpj/remove ').then((res) => {
|
||||
pagesData.pagebreak.pageCurrent= Math.ceil(pagesData.listData.length / pagesData.pagebreak.pageSize);
|
||||
cjpjSelectPage()
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
plain: true,
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除',
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
//点赞
|
||||
const cjpjZan = (val,data) => {
|
||||
|
||||
const promes = {
|
||||
dzs: data,
|
||||
id:val
|
||||
}
|
||||
qcckPost(promes, '/mosty-gsxt/gsxt/cjpj/gxdzs').then((res) => {
|
||||
ElMessage({
|
||||
message: '点赞成功',
|
||||
type: 'success',
|
||||
plain: true,
|
||||
})
|
||||
})
|
||||
}
|
||||
const disabled = ref(false)
|
||||
|
||||
|
||||
defineExpose({ init });
|
||||
|
||||
const load = () => {
|
||||
if (pagesData.pagebreak.pageCurrent < pagesData.total) {
|
||||
pagesData.pagebreak.pageCurrent++
|
||||
cjpjSelectPage()
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.boxlist {
|
||||
width: 99%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.content_box {
|
||||
padding-top: 5px;
|
||||
|
||||
.title_box {
|
||||
margin: 10px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
.virtual {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.virtual::after {
|
||||
content: "";
|
||||
height: 4px;
|
||||
width: 70px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, rgba(0, 206, 255, 1) 0%, rgba(244, 244, 244, 1) 100%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
bottom: -20px;
|
||||
background-color: #fff;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.content_icon {
|
||||
margin-top: 10px;
|
||||
|
||||
.icon_img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.align-space-around {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #6e6e6e;
|
||||
padding: 4px 0;
|
||||
|
||||
.publisher {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_text {
|
||||
|
||||
font-size: 16px;
|
||||
margin: 20px 0;
|
||||
// height: 40vh;
|
||||
line-height: 30px;
|
||||
overflow: auto;
|
||||
color: #6c6c6c;
|
||||
}
|
||||
}
|
||||
|
||||
.itemXs_Xs {
|
||||
width: 18%;
|
||||
font-size: 14px;
|
||||
color: #6c6c6c;
|
||||
line-height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
align-items: flex-end
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="content_icon flex align-center">
|
||||
<div class="icon_img"><img src="@/assets/images/ly-person-icon.png" alt=""></div>
|
||||
<div class="align-space-around dir-column">
|
||||
<div class="publisher">{{ item.ssbm }}—{{ item.plrxm }}</div>
|
||||
<div class="pubContent">{{ item.plnr }}</div>
|
||||
<div class="itemXs_time flex">
|
||||
<div>{{ item.pldd }}</div>
|
||||
<div>{{ item.plsj }}</div>
|
||||
<div>
|
||||
<span @click.stop="openReply(index)">回复</span>
|
||||
<span>删除</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pubContent flex" v-if="activeIndex === index" style="align-items: flex-end">
|
||||
<el-input
|
||||
v-model="textarea2"
|
||||
style="flex: 1; margin-right: 10px;"
|
||||
type="textarea"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
<el-button type="primary" @click="sendComment(item)">发表</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const emit = defineEmits(['postReply'])
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}, showIndex: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
})
|
||||
|
||||
const textarea2 = ref('')
|
||||
const activeIndex = ref(null)
|
||||
|
||||
const openReply = (index) => {
|
||||
// 如果点击的是当前已打开的回复框，则关闭它
|
||||
// 否则关闭其他回复框，打开当前点击的
|
||||
// activeIndex.value = activeIndex.value === index ? null : index
|
||||
textarea2.value = '' // 清空输入框内容
|
||||
}
|
||||
|
||||
const sendComment = (item) => {
|
||||
if (!textarea2.value.trim()) return // 防止发送空内容
|
||||
|
||||
const params = {
|
||||
cjid: item.cjid,
|
||||
plid: item.id,
|
||||
hfdd: "Pc端发送",
|
||||
hfnr: textarea2.value
|
||||
}
|
||||
emit('postReply', params)
|
||||
|
||||
// 发送后重置状态
|
||||
textarea2.value = ''
|
||||
activeIndex.value = null
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="content_icon flex align-center">
|
||||
<div class="icon_img"><img src="@/assets/images/ly-person-icon.png" alt="" srcset=""></div>
|
||||
<div class=" align-space-around dir-column">
|
||||
<div class="publisher">{{ item.ssbm }}—{{ item.plrxm }}</div>
|
||||
<div class="pubContent">{{ item.plnr }}</div>
|
||||
<div class="itemXs_time flex ">
|
||||
<div> {{ item.pldd }}</div>
|
||||
<div>{{ item.plsj }}</div>
|
||||
<div><span @click="openReply(index)" class="hf">回复</span>
|
||||
|
||||
<span class="del" @click="delComment(item)"
|
||||
v-show="userInfo==item.plrsfzh"
|
||||
>删除</span></div>
|
||||
<div @click="showReply(item)" class="ck">查看回复</div>
|
||||
<div @click="handleLike(item)" class="ck">点赞{{dzs }}</div>
|
||||
</div>
|
||||
<div class="pubContent flex" v-if="showInput" style="align-items: flex-end">
|
||||
<el-input v-model="textarea2" style="flex: 1;margin-right: 10px;" type="textarea" placeholder="请输入内容" /><el-button
|
||||
type="primary" @click="sendComment(item)">回复</el-button>
|
||||
</div>
|
||||
<div v-if="show">
|
||||
<ReplyList :replyId="item" ref="replyList" :userInfo="userInfo"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref ,computed} from 'vue'
|
||||
import ReplyList from './replyList.vue'
|
||||
|
||||
const emit = defineEmits(['postReply','cjpjZan'])
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}, item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showList: {
|
||||
type: Boolean,
|
||||
default:false
|
||||
}, userInfo: {
|
||||
type: String,
|
||||
default:''
|
||||
}
|
||||
});
|
||||
const textarea2 = ref()
|
||||
const showInput = ref(false)
|
||||
const show = ref(false)
|
||||
const dzsAdd = ref(0)
|
||||
const dzs = computed(() => {
|
||||
return props.item.dzs+dzsAdd.value
|
||||
})
|
||||
const openReply = () => {
|
||||
showInput.value=! showInput.value
|
||||
show.value=false
|
||||
}
|
||||
const replyList = ref()
|
||||
const sendComment = (item) => {
|
||||
const promes = {
|
||||
cjid: item.cjid,
|
||||
plid: item.id,
|
||||
hfdd:"Pc端发送",
|
||||
hfnr: textarea2.value
|
||||
}
|
||||
textarea2.value=''
|
||||
emit('postReply',promes)
|
||||
replyList.value? replyList.value.getList():""
|
||||
|
||||
}
|
||||
const replyId = ref()
|
||||
const showReply = (val) => {
|
||||
show.value=!show.value
|
||||
showInput.value=false
|
||||
replyId.value=val
|
||||
}
|
||||
|
||||
//删除评论
|
||||
const delComment = (item) => {
|
||||
emit('delComment', item.id)
|
||||
}
|
||||
|
||||
|
||||
function debounce(func, delay) {
|
||||
let timer = null;
|
||||
return function(...args) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
func.apply(this, args);
|
||||
}, delay);
|
||||
};
|
||||
}
|
||||
|
||||
const debouncedSubmitLike = debounce(async (item) => {
|
||||
try {
|
||||
await emit('cjpjZan', item.id, dzsAdd.value);
|
||||
console.log('点赞成功');
|
||||
} catch (error) {
|
||||
console.error('点赞失败', error);
|
||||
dzsAdd.value--;
|
||||
}
|
||||
}, 500);
|
||||
|
||||
const handleLike = (item) => {
|
||||
dzsAdd.value++;
|
||||
debouncedSubmitLike(item);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.boxlist {
|
||||
width: 99%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.content_box {
|
||||
padding-top: 5px;
|
||||
|
||||
.title_box {
|
||||
margin: 10px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.virtual {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.virtual::after {
|
||||
content: "";
|
||||
height: 4px;
|
||||
width: 70px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, rgba(0, 206, 255, 1) 0%, rgba(244, 244, 244, 1) 100%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.content_icon {
|
||||
margin-top: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 10px 0;
|
||||
|
||||
.icon_img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.align-space-around {
|
||||
width: calc(100% - 40px);
|
||||
// flex-wrap: wrap;
|
||||
font-size: 12px;
|
||||
color: #6e6e6e;
|
||||
padding: 4px 0;
|
||||
|
||||
.publisher {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.pubContent {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.itemXs_time {
|
||||
justify-content: space-between;
|
||||
width: 23%;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
|
||||
cursor: pointer;
|
||||
.del{
|
||||
color: red;
|
||||
}
|
||||
.hf{
|
||||
color: #49bb62;
|
||||
}
|
||||
.ck{
|
||||
color: rgb(27, 115, 239);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_text {
|
||||
margin: 20px 0;
|
||||
height: 40vh;
|
||||
overflow: auto;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
|
||||
.itemXs_Xs {
|
||||
width: 18%;
|
||||
font-size: 14px;
|
||||
color: #5c5c5c;
|
||||
line-height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,55 +1,72 @@
|
||||
<template>
|
||||
<div class="itemXs_Box">
|
||||
<div class="itemXs_Box" :style="{color:fontColor,backgroundColor:bgColor}">
|
||||
<div class="itemXs_Mc">
|
||||
情报描述情报描述情报描述情报措述情描述情报描述情报描述情报描，情报描述情报描述情报描述情报措述情描述情报描述情报描述情报描，
|
||||
{{ item.xsMc }}
|
||||
</div>
|
||||
<div class="itemXs_Ms">
|
||||
情报描述情报描述情报描述情报措述情描述情报描述情报描述情报描，情报描述情报描述情报描述情报措述情描述情报描述情报描述情报描，
|
||||
{{item.xsNr }}
|
||||
</div>
|
||||
<div class="itemXs_Xs flex just-between align-center">
|
||||
<div class=" flex just-between align-center"><el-icon class="icon"><Histogram /></el-icon>1000</div>
|
||||
<div class=" flex just-between align-center"><el-icon class="icon"><ChatDotSquare /></el-icon>15522</div>
|
||||
<div class=" flex just-between align-center"><el-icon class="icon"><Clock /></el-icon>2025-10-10 10:10:10</div>
|
||||
<div class=" flex just-between align-center"><el-icon class="icon"><Avatar /></el-icon>张三</div>
|
||||
<div>情报类型：测试数据</div>
|
||||
<div class=" flex just-between align-center">
|
||||
<el-icon class="icon"><Histogram /></el-icon>
|
||||
{{item.rd?item.rd:0}}
|
||||
</div>
|
||||
<div class=" flex just-between align-center">
|
||||
<el-icon class="icon"><ChatDotSquare /></el-icon>
|
||||
{{item.pls?item.pls:0}}
|
||||
</div>
|
||||
<div class=" flex just-between align-center">
|
||||
<el-icon class="icon"><Clock /></el-icon>
|
||||
{{item.fbsj}}
|
||||
</div>
|
||||
<div class=" flex just-between align-center">
|
||||
<el-icon class="icon"><Avatar /></el-icon>
|
||||
{{item.fbrxm}}
|
||||
</div>
|
||||
<div class="flex align-center">情报类型：
|
||||
<DictTag :tag="false" :value="item.xlLx" color="#6c6c6c" :options="dict.D_GS_XS_LX" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
},
|
||||
}, bgColor: {
|
||||
type: String,
|
||||
default: '#ffebee'
|
||||
},fontColor:{
|
||||
type:String,
|
||||
default:'#de0909'
|
||||
}, dict: {
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.itemXs_Box {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid red;
|
||||
// height: 100px;
|
||||
width: 40%;
|
||||
border-radius: 10px;
|
||||
padding: 10px 15px;
|
||||
|
||||
width: 32.5%;
|
||||
border-radius: 5px;
|
||||
padding: 20px 10px;
|
||||
max-height: 11vh;
|
||||
.itemXs_Mc {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #de0909;
|
||||
font-weight: 800;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.itemXs_Ms {
|
||||
color: #ccc;
|
||||
color: #6c6c6c;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@ -57,11 +74,13 @@ line-height: 20px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.itemXs_Xs{
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
font-size: 12px;
|
||||
color: #6c6c6c;
|
||||
line-height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon{
|
||||
font-size: 22px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="content_icon flex align-center">
|
||||
<div class="icon_img"><img src="@/assets/images/ly-person-icon.png" alt="" srcset=""></div>
|
||||
<div class=" align-space-around dir-column">
|
||||
<div class="publisher">{{ item.ssbm }}—{{ item.hfrxm }}</div>
|
||||
<div class="pubContent">{{ item.hfnr }}</div>
|
||||
<div class="itemXs_time flex ">
|
||||
<div> {{ item.hfdd }}</div>
|
||||
<div>{{ item.hfsj }}</div>
|
||||
<div><span class="del" @click="delComment(item)" v-show="userInfo==item.hfrsfzh">删除</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
|
||||
const emit=defineEmits(['postReply','delComment'])
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}, item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showList: {
|
||||
type: Boolean,
|
||||
default:false
|
||||
},userInfo:{type:String,default:''}
|
||||
});
|
||||
|
||||
const delComment = (item) => {
|
||||
emit('delComment',item.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.boxlist {
|
||||
width: 99%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.content_box {
|
||||
padding-top: 5px;
|
||||
|
||||
.title_box {
|
||||
margin: 10px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.virtual {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.virtual::after {
|
||||
content: "";
|
||||
height: 4px;
|
||||
width: 70px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, rgba(0, 206, 255, 1) 0%, rgba(244, 244, 244, 1) 100%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.content_icon {
|
||||
margin-top: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 10px 0;
|
||||
|
||||
.icon_img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.align-space-around {
|
||||
width: calc(100% - 40px);
|
||||
// flex-wrap: wrap;
|
||||
font-size: 12px;
|
||||
color: #6e6e6e;
|
||||
padding: 4px 0;
|
||||
|
||||
.publisher {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.pubContent {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.itemXs_time {
|
||||
justify-content: space-between;
|
||||
width: 15%;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
.del{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_text {
|
||||
margin: 20px 0;
|
||||
height: 40vh;
|
||||
overflow: auto;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
|
||||
.itemXs_Xs {
|
||||
width: 18%;
|
||||
font-size: 14px;
|
||||
color: #5c5c5c;
|
||||
line-height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div>
|
||||
<CommentList v-for="(item, index) in pagesData.listData" :key="index" :item="item" @delComment="cjhfRemove" :userInfo="userInfo"/>
|
||||
<el-pagination v-if="pagesData.total > 10" v-model:current-page="pagesData.pagebreak.pageCurrent"
|
||||
v-model:page-size="pagesData.pagebreak.pageSize" :size="10" :disabled="false" :total="pagesData.total"
|
||||
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
<div style="text-align: center;width: 100%;height: 20px;" v-if="pagesData.total == 0">暂无回复</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import { ref, reactive, toRaw, watch, onMounted, onUnmounted } from "vue";
|
||||
import CommentList from './lstItem.vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
const props = defineProps({
|
||||
replyId: { type: Object, default: () => { } },
|
||||
userInfo:{type:String,default:''}
|
||||
});
|
||||
|
||||
const pagesData = reactive({
|
||||
total: 0,
|
||||
pagebreak: {
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
listData: []
|
||||
});
|
||||
|
||||
|
||||
const handleSizeChange = (val) => {
|
||||
pagesData.pagebreak.pageSize = val
|
||||
getList()
|
||||
}
|
||||
const handleCurrentChange = (val) => {
|
||||
pagesData.pagebreak.pageCurrent = val
|
||||
getList()
|
||||
}
|
||||
//获取回复评论列表
|
||||
const getList = () => {
|
||||
const params = { ...pagesData.pagebreak, plid: props.replyId.id }
|
||||
qcckPost(params, '/mosty-gsxt/gsxt/cjhf/selectPage').then(res => {
|
||||
pagesData.listData = res.records
|
||||
pagesData.total = res.total
|
||||
// emitter.emit('pls',res.total)
|
||||
})
|
||||
}
|
||||
|
||||
// 删除评论
|
||||
const cjhfRemove = (val) => {
|
||||
ElMessageBox.confirm(
|
||||
'是否删除评论',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
qcckPost([val], '/mosty-gsxt/gsxt/cjhf/remove').then((res) => {
|
||||
getList()
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
plain: true,
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除',
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
defineExpose({
|
||||
getList
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.boxlist {
|
||||
width: 99%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.content_box {
|
||||
padding-top: 5px;
|
||||
|
||||
.title_box {
|
||||
margin: 10px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
.virtual {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.virtual::after {
|
||||
content: "";
|
||||
height: 4px;
|
||||
width: 70px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, rgba(0, 206, 255, 1) 0%, rgba(244, 244, 244, 1) 100%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
bottom: -20px;
|
||||
background-color: #fff;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.content_icon {
|
||||
margin-top: 10px;
|
||||
|
||||
.icon_img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.align-space-around {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #6e6e6e;
|
||||
padding: 4px 0;
|
||||
|
||||
.publisher {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_text {
|
||||
|
||||
font-size: 16px;
|
||||
margin: 20px 0;
|
||||
// height: 40vh;
|
||||
line-height: 30px;
|
||||
overflow: auto;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
|
||||
.itemXs_Xs {
|
||||
width: 18%;
|
||||
font-size: 14px;
|
||||
color: #5c5c5c;
|
||||
line-height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@ -8,25 +8,33 @@
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox " style="height: calc(100vh - 200px); display: flex;flex-wrap: wrap;">
|
||||
<div v-for="(item, index) in 1000" :key="index" class="tabBox_item flex ">
|
||||
<ItemXs :item="item" />
|
||||
<div class="tabBox tabListBox" >
|
||||
<div class="temperatureBox" ref="temperatureBox">
|
||||
<div class="flex just-between temperature">
|
||||
<div :class="{'active':pitchOn==1}" @click="handleAdd(1)">按热度</div>
|
||||
<div>|</div>
|
||||
<div :class="{'active':pitchOn==2}" @click="handleAdd(2)">按时间</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="just-between boxData" :style="{height:tabHeight+'px'}">
|
||||
<ItemXs :dict="{D_GS_XS_LX}" :item="item" v-for="(item, index) in pageData.tableData" :key="index" style="margin-bottom: 10px;" @click="handleView(item)"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<AddForm ref="addForm" :dict="{D_GS_XS_LX}"/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import AddForm from './components/a/addForm.vue'
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import ItemXs from './components/itemXs/itemXs.vue'
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_GS_XS_LX } = proxy.$dict("D_GS_XS_LX"); //获取字典数据
|
||||
const searchConfiger = reactive([
|
||||
|
||||
{
|
||||
label: "情报名称",
|
||||
showType: "input",
|
||||
@ -47,10 +55,11 @@ onMounted(() => {
|
||||
tabHeightFn()
|
||||
selectPagePbql()
|
||||
})
|
||||
// const tabHeight = ref(0)
|
||||
const tabHeight = ref(0)
|
||||
const temperatureBox=ref()
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
// pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
tabHeight.value = window.innerHeight - 370 - temperatureBox.value.offsetHeight;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
@ -58,7 +67,8 @@ const tabHeightFn = () => {
|
||||
const pageData = reactive({
|
||||
parameter: {
|
||||
pageCurrent: 1,
|
||||
pageSize: 10
|
||||
pageSize: 10,
|
||||
sort:"fbsj"
|
||||
},
|
||||
total: 0,
|
||||
loading: false,
|
||||
@ -69,9 +79,10 @@ const onSearch = (val) => {
|
||||
pageData.pageCurrent = 1;
|
||||
selectPagePbql()
|
||||
}
|
||||
|
||||
const selectPagePbql = () => {
|
||||
qcckGet(pageData.parameter, "/mosty-gsxt/qbcj/selectPagePbql").then((res) => {
|
||||
pageData.tableData =pageData.pageCurrent==1? res.records:pageData.tableData.concat(res.records || []);
|
||||
pageData.tableData =pageData.parameter.pageCurrent==1? res.records:pageData.tableData.concat(res.records || []);
|
||||
pageData.total = res.total;
|
||||
pageData.loading = false;
|
||||
}).catch((err) => {
|
||||
@ -80,9 +91,41 @@ const selectPagePbql = () => {
|
||||
pageData.loading = false;
|
||||
})
|
||||
}
|
||||
const pitchOn = ref(1)
|
||||
//查看新闻
|
||||
const addForm = ref()
|
||||
const handleView = (row) => {
|
||||
addForm.value.init(row.id)
|
||||
}
|
||||
const handleAdd = (val) => {
|
||||
pageData.parameter.sort = val == 1 ? "fbsj" : "rd"
|
||||
pageData.parameter.pageCurrent = 1;
|
||||
pitchOn.value = val
|
||||
selectPagePbql()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.boxData{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.active{
|
||||
color: #12a0ff;
|
||||
}
|
||||
.tabListBox{
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.temperatureBox{
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
.temperature{
|
||||
cursor: pointer;
|
||||
padding: 10px;color: #000;width: 140px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user