652 lines
18 KiB
Vue
652 lines
18 KiB
Vue
<template>
|
||
<div class="yhzx-box" style="height: 100%">
|
||
<div class="content">
|
||
<div class="content-mind">
|
||
<div class="content_top">
|
||
<div class="content_top_title">消息</div>
|
||
<div class="search_box">
|
||
<t-form>
|
||
<t-form-item>
|
||
<!-- <t-input
|
||
v-model="Xxzsbt"
|
||
placeholder="请输入"
|
||
style="width: 300px"
|
||
@enter="onSubmit({ PageNum: 1, PageSize: 10, isNew: true })"
|
||
>
|
||
<template #suffixIcon> <search-icon :style="{ cursor: 'pointer' }" /> </template
|
||
></t-input> -->
|
||
</t-form-item>
|
||
</t-form>
|
||
<!-- <t-button class="add_btn" theme="primary" @click="setDrawerVisible(true)">发布消息</t-button> -->
|
||
<!-- <GgDrawer :visible="drawerVisible" @setDrawerVisible="setDrawerVisible" @istb="istb" @onSubmit="onSubmit" /> -->
|
||
</div>
|
||
</div>
|
||
<div class="content_bottom">
|
||
<div class="content_left" @scroll="scrollHandler">
|
||
<t-loading :loading="ggListLoading" style="height: 100%">
|
||
<div v-show="false">{{ dtList }}</div>
|
||
<div v-if="dtList.length > 0">
|
||
<div
|
||
:class="curXxuuid === gg.xxuuid ? 'gg_item_current' : 'gg_item'"
|
||
v-for="(gg,index) in dtList"
|
||
:key="index"
|
||
>
|
||
<div class="gg_item_top" @click="onListClick(gg)">
|
||
<span class="gg_item_top_title">{{ gg.xxzsbt }}</span>
|
||
<!-- <span class="gg_item_top_time">{{ gg.Zssj }}</span> -->
|
||
</div>
|
||
<div class="gg_item_middle" @click="onListClick(gg)">{{ gg.xxnr }}</div>
|
||
<div class="gg_item_bottom">
|
||
<!-- <span class="gg_item_bottom_btn" @click="onDelete(gg.xxuuid)">删除</span> -->
|
||
<!-- <span class="gg_item_bottom_btn" v-if="isDcFbggSql === 'Y'" @click="onExport(gg)">导出脚本</span> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="empty_box">
|
||
<div class="empty_box_text">暂无数据</div>
|
||
</div>
|
||
</t-loading>
|
||
</div>
|
||
<div class="content_right">
|
||
<t-loading :loading="ggDetailLoading" style="height: 100%;">
|
||
<div v-if="ggDetailmx.xxzsbt" class="detail_box">
|
||
<div class="detail_top">
|
||
<t-popup :content="ggDetailmx.xxzsbt" placement="bottom" showArrow>
|
||
<span class="detail_top_title">{{ ggDetailmx.xxzsbt }}</span></t-popup
|
||
>
|
||
<!-- <span class="detail_top_time">{{ formatTime(ggDetailmx.xxyxqq) }}</span> -->
|
||
</div>
|
||
<!-- <div class=" detail_time detail_time-top"><span class="detail_middle">有效期起：</span> <span v-if="ggDetailmx.xxyxqq">{{ ggDetailmx.xxyxqq.substr(0, 10) }}</span></div>
|
||
<div class=" detail_time detail_time-bottom"><span class="detail_middle">有效期止：</span> <span v-if="ggDetailmx.xxyxqz">{{ ggDetailmx.xxyxqz.substr(0, 10) }}</span></div> -->
|
||
<div class="detail_middle">{{ ggDetailmx.xxnr }}</div>
|
||
<!-- <div class="detail_bottom" v-if="ggDetailmx.wjxxjh && ggDetailmx.wjxxjh.length > 0">
|
||
<t-list :split="true">
|
||
<t-list-item v-for="item in ggDetailmx.wjxxjh" :key="item.fjuuid">
|
||
|
||
<img :src="fjxxIcon(item.fjlx)" class="detail_bottom_icon" />
|
||
<span class="detail_bottom_text">{{ item.fjmc }}</span>
|
||
<template #action>
|
||
<t-loading :loading="curFjuuid === item.fjuuid && downLoadLoading">
|
||
<t-link theme="primary" hover="color" @click="downLoadFjxx(item)"> 下载</t-link>
|
||
</t-loading>
|
||
</template>
|
||
</t-list-item>
|
||
</t-list>
|
||
</div> -->
|
||
<!-- <t-divider /> -->
|
||
</div>
|
||
<div v-else class="empty_box">
|
||
<div class="empty_box_text">暂无数据</div>
|
||
</div>
|
||
</t-loading>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Nav from '@/pages/index/components/nav/index.vue';
|
||
import Footer from '@/pages/index/components/footer/index.vue';
|
||
import axios from 'axios';
|
||
import { mapState, mapActions } from 'vuex';
|
||
import { SearchIcon } from 'tdesign-icons-vue';
|
||
import GgList from './components/ggList';
|
||
import GgDetail from './components/ggDetail';
|
||
import GgDrawer from './components/ggDrawer';
|
||
import api from '@/pages/index/api/ggwhglHtgl/index';
|
||
export function getFjxx(data) {
|
||
return axios({
|
||
url: '/mhzc/xxzx/getFjxx',
|
||
data,
|
||
method: 'post',
|
||
responseType: 'blob', // 关键配置，表明返回的数据类型为Blob
|
||
});
|
||
}
|
||
export default {
|
||
components: { SearchIcon, GgList, GgDetail, GgDrawer,Nav,Footer},
|
||
data() {
|
||
return {
|
||
tabValue: 'sjgg',
|
||
Xxzsbt: '',
|
||
drawerVisible: false,
|
||
delVisible: false,
|
||
sliceWidth: 0,
|
||
ggListLoading: false,
|
||
ggDetailLoading: false,
|
||
downLoadLoading: false,
|
||
isChange: false,
|
||
scxx: '', // 删除信息
|
||
initCurXxuuid: '',
|
||
exportVisible: false,
|
||
dtList: [],
|
||
curXxuuid: '',
|
||
yhuuid:'',
|
||
ggDetailmx: {},
|
||
xzoptions: [],
|
||
pagination:{
|
||
PageNum:1,
|
||
PageSize:10,
|
||
totalPage:0,
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
// pagination: (state) => state.ggwhglHtgl.pagination,
|
||
dcFbggSqlData: (state) => state.ggwhglHtgl.dcFbggSqlData,
|
||
}),
|
||
},
|
||
created() {
|
||
// this.getXzByCurr1()
|
||
},
|
||
mounted() {
|
||
// this.queryWidth();
|
||
// this.onSubmit( 1, 10, true );
|
||
// this.queryIsDcFbggSql();
|
||
this.yhinit();
|
||
},
|
||
methods: {
|
||
...mapActions('ggwhglHtgl', [
|
||
'queryGgList', // 查询消息列表数据
|
||
'queryGgDetail', // 查询消息详情
|
||
'deleteGgxx', // 删除消息
|
||
// 'isDcFbggSql', // 是否显示导出脚本按钮
|
||
'dcFbggSql', // 获取导出脚本
|
||
]),
|
||
async yhinit() {
|
||
try {
|
||
// const res = await getMxjbxx(prame);
|
||
const { data } = await api.init();
|
||
this.yhuuid = data.yhUuid;
|
||
this.onSubmit( 1, 10, true );
|
||
// window.sessionStorage.setItem('yhxx', JSON.stringify(data));
|
||
} catch (error) {
|
||
console.error('数据加载失败', error);
|
||
}
|
||
},
|
||
findxz(xzuuid) {
|
||
console.log('this.xzoptions', this.xzoptions);
|
||
|
||
return this.xzoptions.find((t) => t.xzuuid === xzuuid)?.xzmc;
|
||
},
|
||
onListClick(data) {
|
||
this.curXxuuid = data.xxuuid;
|
||
this.ggDetailmx = data;
|
||
// this.$emit('initGgDetail', data);
|
||
},
|
||
async onDelete(uuid) {
|
||
const { code, data } = await api.delDt(uuid);
|
||
if (code == 1) {
|
||
this.onSubmit(1, 10, true);
|
||
}
|
||
// this.$emit('onGgDelete', data);
|
||
},
|
||
// 获取消息列表宽度
|
||
queryWidth() {
|
||
const { newsListRef } = this.$refs;
|
||
// this.sliceWidth = newsListRef.$el.clientWidth - 50;
|
||
},
|
||
// 滚动加载列表数据
|
||
scrollHandler(event) {
|
||
const { scrollTop, clientHeight, scrollHeight } = event.target;
|
||
if (this.pagination.PageNum < this.pagination.totalPage && scrollTop + clientHeight >= scrollHeight) {
|
||
// const nextPageNum = this.pagination.PageNum + 1;
|
||
this.pagination.PageNum = this.pagination.PageNum+1;
|
||
// this.$store.commit('ggwhglHtgl/SET_PAGINATION', { ...this.pagination, PageNum: nextPageNum });
|
||
this.onSubmit( this.pagination.PageNum, 10 );
|
||
}
|
||
},
|
||
istb(istjwc) {
|
||
if (istjwc) {
|
||
this.onSubmit(1, 10, true);
|
||
}
|
||
},
|
||
// 查询列表数据
|
||
async onSubmit( PageNum, PageSize, isChange, ) {
|
||
console.log('pagination',this.pagination);
|
||
try{
|
||
this.ggListLoading = true;
|
||
const {data} = await api.getDtPage({
|
||
pageNo: PageNum||1,
|
||
pageSize: PageSize||10,
|
||
xxflDm: '0',
|
||
yhuuid:this.yhuuid,
|
||
});
|
||
let dtList = data?.records;
|
||
this.ggListLoading = false;
|
||
this.pagination.totalPage = data?.pages;
|
||
// this.$store.commit('ggwhglHtgl/SET_PAGINATION', { ...this.pagination, totalPage: nextPageNum });
|
||
if (dtList?.length > 0 && isChange) {
|
||
this.curXxuuid = dtList[0].xxuuid;
|
||
this.ggDetailmx = dtList[0];
|
||
}
|
||
if(isChange){
|
||
this.pagination.PageNum=1;
|
||
this.dtList =dtList;
|
||
}else if (dtList?.length > 0&& !isChange) {
|
||
this.dtList = [...this.dtList, ...dtList];
|
||
}else{
|
||
this.dtList =[];
|
||
}
|
||
console.log('dtList',this.dtList);
|
||
}catch(err){
|
||
this.dtList =[];
|
||
this.ggDetailmx = [];
|
||
}finally{
|
||
this.ggDetailLoading = false;
|
||
this.downLoadLoading = false;
|
||
}
|
||
},
|
||
// async onSubmit() {
|
||
// this.ggListLoading = true;
|
||
// this.ggDetailLoading = true;
|
||
// let params = {
|
||
// pageNo: 1,
|
||
// pageSize: 10,
|
||
// dtlx: '0',
|
||
// };
|
||
// const { data } = await api.getDtPage(params);
|
||
// console.log('onSubmit', data);
|
||
// // data.records.map((item)=>{
|
||
// // item.dtzys=JSON.parse(item.dtzys);
|
||
// // })
|
||
// this.dtList = data;
|
||
// this.ggListLoading = false;
|
||
// if (this.dtList?.length > 0) {
|
||
// this.curXxuuid = this.dtList[0].dtUuid;
|
||
// this.ggDetailmx = this.dtList[0];
|
||
// }
|
||
// this.ggDetailLoading = false;
|
||
// this.downLoadLoading = false;
|
||
// },
|
||
// 获取消息详情数据无需改变是否已读状态
|
||
async initGgDetail(value) {
|
||
this.ggDetailLoading = true;
|
||
await this.queryGgDetail({
|
||
Xxfbgluuid: value,
|
||
});
|
||
this.ggDetailLoading = false;
|
||
},
|
||
// 确认删除
|
||
async onDeleteGgxx() {
|
||
const params = { FbztDm: '09', Xxfbuuid: this.scxx.xxuuid };
|
||
await this.deleteGgxx({
|
||
params,
|
||
successCb: () => {
|
||
this.$message.success('删除成功');
|
||
this.onSubmit({ PageNum: 1, PageSize: 10, isNew: true });
|
||
},
|
||
errorCb: () => {
|
||
this.$message.warning('删除失败！');
|
||
},
|
||
});
|
||
},
|
||
// 控制新建消息抽屉开关
|
||
setDrawerVisible(state) {
|
||
this.drawerVisible = state;
|
||
},
|
||
// 删除打开确认弹框
|
||
onGgDelete(data) {
|
||
this.delVisible = true;
|
||
this.scxx = data;
|
||
},
|
||
// 删除弹窗点击确认
|
||
onDelConfirm() {
|
||
this.delVisible = false;
|
||
this.onDeleteGgxx();
|
||
},
|
||
// 删除弹窗点击取消
|
||
onDelClose() {
|
||
this.delVisible = false;
|
||
},
|
||
// 下载附件
|
||
async downLoadFjxx(value) {
|
||
try {
|
||
const type = value.fjmc.substring(value.fjmc.lastIndexOf('.'));
|
||
let fileType = '';
|
||
switch (type) {
|
||
case '.doc':
|
||
fileType = 'application/msword';
|
||
break;
|
||
case '.docx':
|
||
fileType = 'application/msword';
|
||
break;
|
||
case '.xls':
|
||
fileType = 'application/vnd.ms-excel';
|
||
break;
|
||
case '.xlsx':
|
||
fileType = 'application/vnd.ms-excel';
|
||
break;
|
||
case '.pdf':
|
||
fileType = 'application/pdf';
|
||
break;
|
||
default:
|
||
fileType = '';
|
||
}
|
||
this.downLoadLoading = true;
|
||
const response = await getFjxx({ fjuuid: value.fjuuid });
|
||
const blob = new Blob([response.data], { type: fileType });
|
||
// 创建隐藏的可下载链接
|
||
const downloadUrl = window.URL.createObjectURL(blob);
|
||
const link = document.createElement('a');
|
||
link.href = downloadUrl;
|
||
link.download = value.fjmc; // 自定义下载文件名
|
||
link.style.display = 'none';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
window.URL.revokeObjectURL(downloadUrl);
|
||
link.remove();
|
||
this.downLoadLoading = true;
|
||
} catch (error) {
|
||
console.error('下载文件时发生错误:', error);
|
||
}
|
||
},
|
||
// queryIsDcFbggSql() {
|
||
// this.isDcFbggSql();
|
||
// },
|
||
// 导出脚本
|
||
async onExport(data) {
|
||
await this.dcFbggSql({ xxfbuuid: data.xxuuid });
|
||
this.exportVisible = true;
|
||
},
|
||
copyMySql() {
|
||
const input = document.createElement('input');
|
||
input.value = this.dcFbggSqlData.MySQL; // 获取文本框的内容
|
||
document.body.appendChild(input);
|
||
input.select(); // 选中输入内容
|
||
document.execCommand('copy'); // 执行复制操作
|
||
document.body.removeChild(input); // 移除临时创建的input
|
||
this.$message.success('复制成功！');
|
||
},
|
||
copyOracle() {
|
||
const input = document.createElement('input');
|
||
input.value = this.dcFbggSqlData.MySQL; // 获取文本框的内容
|
||
document.body.appendChild(input);
|
||
input.select(); // 选中输入内容
|
||
document.execCommand('copy'); // 执行复制操作
|
||
document.body.removeChild(input); // 移除临时创建的input
|
||
this.$message.success('复制成功！');
|
||
},
|
||
async getXzByCurr1() {
|
||
try {
|
||
const res = await api.getXzByCurr();
|
||
console.log('res', res);
|
||
let xzoptions1 = [];
|
||
res.data.map((item) => {
|
||
xzoptions1.push({ xzuuid: item.xzuuid, xzmc: item.xzmc });
|
||
});
|
||
console.log('xzoptions1', xzoptions1);
|
||
|
||
this.xzoptions = xzoptions1;
|
||
} catch (error) {
|
||
console.error('数据加载失败', error);
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.content {
|
||
height: calc(100vh - 76px);
|
||
padding: 24px;
|
||
background: #ecf1f9;
|
||
box-sizing: border-box;
|
||
.content-mind {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #fff;
|
||
}
|
||
}
|
||
.content_top {
|
||
height: 60px;
|
||
padding-left: 24px;
|
||
line-height: 60px;
|
||
&_title {
|
||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
line-height: 60px;
|
||
color: #333;
|
||
}
|
||
}
|
||
.search_box {
|
||
position: absolute;
|
||
top: 24px;
|
||
right: 24px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.add_btn {
|
||
margin-left: 25px;
|
||
}
|
||
}
|
||
.search_box /deep/.t-form:not(.t-form-inline) .t-form__item:last-of-type {
|
||
margin-bottom: 0;
|
||
}
|
||
.content_bottom {
|
||
display: flex;
|
||
height: calc(100% - 72px);
|
||
background: #fff;
|
||
}
|
||
.content_left {
|
||
width: 36%;
|
||
height: 100%;
|
||
padding: 16px;
|
||
overflow-y: auto;
|
||
border-right: 1px solid #27282e14;
|
||
}
|
||
.content_left::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
.content_left::-webkit-scrollbar-track {
|
||
background-color: #fff;
|
||
}
|
||
.content_left::-webkit-scrollbar-thumb {
|
||
background: #9996;
|
||
border-radius: 3px;
|
||
}
|
||
.content_right {
|
||
width: 64%;
|
||
padding: 24px 0 24px 24px;
|
||
}
|
||
.gg_item {
|
||
height: 100%;
|
||
padding: 12px 16px 10px;
|
||
overflow-y: auto;
|
||
border-bottom: 1px solid #27282e14;
|
||
}
|
||
.gg_item_current {
|
||
height: 100%;
|
||
padding: 12px 16px 10px;
|
||
overflow-y: auto;
|
||
background: #ecf2fe;
|
||
border-bottom: 1px solid #27282e14;
|
||
}
|
||
.gg_item:hover {
|
||
background: #ecf2fe;
|
||
}
|
||
.gg_item_top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
&_title {
|
||
height: 24px;
|
||
overflow: hidden;
|
||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
line-height: 24px;
|
||
color: #333;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
&_time {
|
||
height: 22px;
|
||
padding-top: 2px;
|
||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 22px;
|
||
color: #999;
|
||
}
|
||
}
|
||
.gg_item_middle {
|
||
height: 44px;
|
||
padding: 8px 0;
|
||
overflow: hidden;
|
||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 22px;
|
||
color: #999;
|
||
text-overflow: ellipsis;
|
||
cursor: pointer;
|
||
}
|
||
.gg_item_bottom {
|
||
text-align: right;
|
||
|
||
&_btn {
|
||
height: 22px;
|
||
margin-left: 15px;
|
||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 22px;
|
||
color: #4285f4;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.empty_box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
> img {
|
||
width: 80px;
|
||
margin: calc(100% / 2 - 116px) auto 0;
|
||
}
|
||
&_text {
|
||
margin: auto;
|
||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||
font-size: 18px;
|
||
font-weight: 400;
|
||
line-height: 60px;
|
||
color: #999;
|
||
}
|
||
}
|
||
.detail_box {
|
||
// height: calc(100% - 222px);
|
||
height: 100%;
|
||
overflow: auto;
|
||
// overflow-y: scroll;
|
||
}
|
||
.detail_top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 36px;
|
||
|
||
&_title {
|
||
height: 32px;
|
||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
line-height: 32px;
|
||
color: #27282e;
|
||
}
|
||
|
||
&_time {
|
||
height: 22px;
|
||
padding-top: 5px;
|
||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 22px;
|
||
color: #999;
|
||
white-space: nowrap;
|
||
> span {
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
.detail_time{
|
||
color: #999;
|
||
}
|
||
.detail_time-top{
|
||
margin-bottom: 8px;
|
||
}
|
||
.detail_time-bottom{
|
||
margin-bottom: 36px;
|
||
}
|
||
.detail_middle {
|
||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 22px;
|
||
color: #333;
|
||
white-space: pre-wrap;
|
||
}
|
||
.detail_bottom /deep/ .t-list {
|
||
margin-top: 24px;
|
||
border: 1px solid #eeeeef;
|
||
border-bottom: 0 solid #eeeeef;
|
||
}
|
||
.detail_bottom /deep/.t-list-item {
|
||
position: relative;
|
||
padding: 13px 16px;
|
||
background: #f9fafd;
|
||
}
|
||
.detail_bottom_icon {
|
||
// position: absolute;
|
||
// top: 16px;
|
||
width: 160px;
|
||
margin-right: 16px;
|
||
}
|
||
.detail_bottom_text {
|
||
position: absolute;
|
||
top: 13px;
|
||
left: 40px;
|
||
font-weight: 700;
|
||
}
|
||
.extra_title {
|
||
margin: 9px 0;
|
||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 22px;
|
||
color: #999;
|
||
}
|
||
.extra_content {
|
||
margin-bottom: 20px;
|
||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 22px;
|
||
color: #999;
|
||
> span {
|
||
margin: 0 5px;
|
||
}
|
||
}
|
||
.marginRight {
|
||
margin-right: 12px;
|
||
}
|
||
.empty_box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
> img {
|
||
width: 80px;
|
||
margin: calc(100% / 2 - 156px) auto 0;
|
||
}
|
||
&_text {
|
||
margin: auto;
|
||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||
font-size: 18px;
|
||
font-weight: 400;
|
||
line-height: 60px;
|
||
color: #999;
|
||
}
|
||
}
|
||
</style>
|
||
</style>
|