270 lines
6.9 KiB
Vue
270 lines
6.9 KiB
Vue
<template>
|
||
<div class="secret-container">
|
||
<div class="title">以下是Redis的软件详情</div>
|
||
<div class="mt-3">
|
||
<OssDetailCp ref="ossDetailRef" :versionId="versionId"/>
|
||
</div>
|
||
|
||
<d-button v-if="isLogin" class="output-btn" @click="openSubscription">订阅</d-button>
|
||
<div class="bubble-bottom-operations">
|
||
<img onclick="handleRefresh()" src="@/assets/imgs/jyh/ai/icon_generate.png" />
|
||
<i class="icon-file" title="复制" onclick="handleFile()"></i>
|
||
<i class="icon-like" title="点赞" onclick="handleLike()"></i>
|
||
<i class="icon-dislike" title="踩" onclick="handleDislike()"></i>
|
||
<i class="icon-clever-customer" title="智能客服" onclick="handleCustomerService()"></i>
|
||
<i class="icon-more-operate" title="更多操作" onclick="handleMore()"></i>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted, watch, nextTick } from 'vue';
|
||
import { useRouter, useRoute } from 'vue-router';
|
||
import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
|
||
import { Message } from 'vue-devui';
|
||
import { storeToRefs } from 'pinia';
|
||
import NoData from '@/components/NoData/NoData.vue';
|
||
import { useAccountStore } from '@/stores/user';
|
||
import * as XLSX from 'xlsx';
|
||
const { formatTime } = useTimeFormat();
|
||
import { getHomeNoticeList, getReleaseExport, releasePage, searchLanguageList } from '@/api/jyh';
|
||
import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
|
||
import { useGlobalInfoStore } from '@/stores/Global';
|
||
import OssDetailCp from './OssDetail/index.vue'
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
|
||
const filterTableRef = ref();
|
||
const ossDetailRef = ref(null);
|
||
const versionId = ref('3238');
|
||
const { namespace } = getOrgInfo();
|
||
const userInfo = useAccountStore();
|
||
const { isLogin } = storeToRefs(userInfo);
|
||
// 定义 tableKey，用于强制刷新表格
|
||
const tableKey = ref(0);
|
||
const tableData = ref([]);
|
||
|
||
// 定义 columns 数据
|
||
const columns = ref([
|
||
{ key: 'subject', label: '漏洞类型', visible: true, filterable: true, sortable: false },
|
||
{ key: 'overview', label: '漏洞内容', visible: true, filterable: true, sortable: false },
|
||
{ key: 'importance', label: '重要性', visible: true, filterable: true, sortable: false,width: 80 },
|
||
{ key: 'publishTime', label: '时间', visible: true, filterable: true, sortable: false },
|
||
]);
|
||
|
||
// 调用子组件方法的示例函数
|
||
function openSubscription() {
|
||
if (ossDetailRef.value) {
|
||
// 假设子组件有一个名为 'someMethod' 的方法
|
||
ossDetailRef.value.openSubscription();
|
||
}
|
||
}
|
||
|
||
// 跳转
|
||
const gotoDetail = (row) => {
|
||
// 后续请换成params，暂时params传参没传过去
|
||
router.push({
|
||
path: 'repoDetail/' + row.id
|
||
});
|
||
};
|
||
|
||
const getReleaseList = async () => {
|
||
const { data, error } = await getHomeNoticeList();
|
||
if (!error && data) {
|
||
tableData.value = data.data || [];
|
||
console.log(tableData.value);
|
||
}
|
||
};
|
||
|
||
onMounted(async () => {
|
||
nextTick(() => {
|
||
getReleaseList();
|
||
});
|
||
// getReleaseList();
|
||
});
|
||
|
||
const exportResult = async () => {
|
||
const selectDatas = tableData.value.map((d) => d.id);
|
||
if (!tableData.value.length || selectDatas.length <= 0) {
|
||
Message.info('未选择任何数据');
|
||
return;
|
||
}
|
||
|
||
const { data, error } = await getReleaseExport({
|
||
list: selectDatas,
|
||
});
|
||
if (data && !error) {
|
||
// 方法1：如果后端返回的是文件流（Blob）
|
||
const blob = new Blob([data.data]);
|
||
const downloadUrl = window.URL.createObjectURL(blob);
|
||
|
||
// 创建一个临时的a标签触发下载
|
||
const link = document.createElement('a');
|
||
link.href = downloadUrl;
|
||
|
||
// 从Content-Disposition头中获取文件名，或者使用默认文件名
|
||
const contentDisposition = data.headers['content-disposition'];
|
||
let fileName = 'export.xlsx'; // 默认文件名
|
||
// if (contentDisposition) {
|
||
// const fileNameMatch = contentDisposition.match(/filename="?(.+)"?/);
|
||
// if (fileNameMatch && fileNameMatch[1]) {
|
||
// fileName = fileNameMatch[1].replace(/^[^0-9]*|[^0-9.xlsx]*$/g, "");
|
||
// }
|
||
// }
|
||
|
||
link.setAttribute('download', fileName);
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
|
||
// 清理
|
||
document.body.removeChild(link);
|
||
window.URL.revokeObjectURL(downloadUrl);
|
||
} else {
|
||
console.error('导出失败:', error);
|
||
// 这里可以添加错误提示，比如使用Element Plus的ElMessage
|
||
ElMessage.error('文件导出失败');
|
||
}
|
||
};
|
||
|
||
// 事件处理函数
|
||
function handleRefresh() {
|
||
console.log('刷新点击');
|
||
// 实际业务代码示例：
|
||
// location.reload(); // 重新加载页面
|
||
// 或调用API刷新数据
|
||
}
|
||
|
||
function handleFile() {
|
||
console.log('文件点击');
|
||
// 示例：触发文件上传
|
||
// document.getElementById('file-input').click();
|
||
}
|
||
|
||
function handleLike() {
|
||
console.log('点赞点击');
|
||
// 示例：切换点赞状态
|
||
const likeBtn = document.querySelector('.icon-like');
|
||
likeBtn.classList.toggle('active');
|
||
// 这里可以添加AJAX请求提交点赞状态
|
||
}
|
||
|
||
function handleDislike() {
|
||
console.log('踩点击');
|
||
// 类似点赞的逻辑
|
||
const dislikeBtn = document.querySelector('.icon-dislike');
|
||
dislikeBtn.classList.toggle('active');
|
||
}
|
||
|
||
function handleCustomerService() {
|
||
console.log('客服点击');
|
||
// 示例：打开客服对话框
|
||
// openChatWindow();
|
||
}
|
||
|
||
function handleMore() {
|
||
console.log('更多操作点击');
|
||
// 示例：显示下拉菜单
|
||
// showDropdownMenu();
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import 'devui-theme/styles-var/devui-var.scss';
|
||
|
||
.secret-container {
|
||
position: relative;
|
||
//min-height: 600px;
|
||
background: #ffffff;
|
||
padding: 20px;
|
||
margin-top: 16px;
|
||
border-radius: 15px;
|
||
|
||
.title {
|
||
color: #191919;
|
||
font-family: HarmonyOS Sans SC;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
letter-spacing: 0px;
|
||
text-align: left;
|
||
}
|
||
|
||
.secret-op {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
}
|
||
|
||
.error {
|
||
color: $devui-contrast;
|
||
}
|
||
|
||
:deep(.devui-table__row td) {
|
||
padding-top: 16px;
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
:deep(.devui-tag .devui-tag--default) {
|
||
background-color: #fff;
|
||
border-radius: 12px;
|
||
padding: 4px 8px;
|
||
font-size: 12px;
|
||
line-height: 16px;
|
||
margin-right: 8px;
|
||
border: 1px solid #e3e3ee;
|
||
}
|
||
|
||
.one-line {
|
||
word-break: break-all;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.title {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #9a9b9c;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.cur-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #2d2d2e;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.output-btn {
|
||
border-radius: 16px;
|
||
background: #DFDFDF;
|
||
|
||
|
||
color: #191919;
|
||
font-family: HarmonyOS Sans SC;
|
||
font-weight: regular;
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
letter-spacing: 0px;
|
||
text-align: left;
|
||
}
|
||
|
||
.secret-breadcrumb {
|
||
padding: 7px 20px 12px;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.bubble-bottom-operations {
|
||
margin-top: 16px;
|
||
margin-left: auto;
|
||
display: flex;
|
||
gap: 8px; /* 图标之间的间隔 */
|
||
align-items: center; /* 垂直居中图标 */
|
||
justify-content: end;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|