<template>
|
<div class="app-container">
|
<div style="margin-bottom: 10px">
|
<el-form style="display: flex;flex-wrap: wrap;">
|
<el-form-item label="企业名称:" v-if="data.isAdmin" style="margin-left: 20px">
|
<el-select
|
v-model="data.queryParams.companyName"
|
filterable
|
remote
|
@change="selectValue"
|
reserve-keyword
|
remote-show-suffix
|
:remote-method="getCompanyList"
|
:loading="loadingCompany"
|
style="width: 240px"
|
>
|
<el-option
|
v-for="item in data.companyList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
style="margin-left: 15px"
|
type="primary"
|
@click="exportData"
|
>导出</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="bottom">
|
<div class="left">
|
<span style="font-weight: 600;font-size: 24px">目录</span>
|
<div class="tree-container tree-hide-scrollbar" v-if="data.treeData">
|
<el-tree
|
ref="treeRef"
|
:data="data.treeData"
|
:props="data.defaultProps"
|
:default-expand-all="true"
|
:expand-on-click-node="false"
|
highlight-current
|
node-key="id"
|
:current-node-key="currentSelectedKey"
|
@node-click="handleNodeClick"
|
>
|
<template #default="{ node,data }">
|
<el-tooltip
|
:content="data.mess"
|
placement="bottom"
|
:disabled="!isTextOverflow(data)"
|
>
|
<span class="tree-text">{{ data.mess }}</span>
|
</el-tooltip>
|
</template>
|
</el-tree>
|
</div>
|
<el-empty v-else description="暂无数据" />
|
</div>
|
<div class="right">
|
<el-form :model="state.form" size="default" ref="noticeRef" label-position="top" label-width="125px" >
|
<el-form-item label="项目过程管控文件清单" prop="dataList">
|
<el-button style="margin-bottom: 10px" type="primary" @click="openDataDialog('add',{})">新增</el-button>
|
</el-form-item>
|
<el-table style="margin:15px 0;width: 100%" :data="state.form.dataList" :border="true" >
|
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
|
<el-table-column label="目录" prop="catalogueName" align="center" width="130" :show-overflow-tooltip="true" />
|
<el-table-column label="文件编号" prop="number" align="center" />
|
<el-table-column label="文件名称" prop="fileNameSimple" align="center" />
|
<el-table-column label="文件" prop="fileName" align="center" >
|
<template #default="scope">
|
<el-link v-if="scope.row.fileName" style="" type="primary" @click="openFile(scope.row.filePath)">{{scope.row.fileName}}</el-link>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160" >
|
<template #default="scope">
|
<el-button v-if="scope.row.filePath" link type="primary" @click="downloadFile(scope.row)" >下载</el-button>
|
<el-button v-if="data.isAdmin" link type="primary" @click="openDataDialog('edit',scope.row)" >编辑</el-button>
|
<el-button v-if="data.isAdmin" link type="danger" @click="handleDataDelete(scope.row)" >删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form>
|
<!-- <div style="display: flex;align-items: center;justify-content: right;margin-top: 10px">-->
|
<!-- <el-button v-if="state.form.id && data.isAdmin" type="danger" @click="deleteData">删除</el-button>-->
|
<!-- <el-button v-if="data.isAdmin" type="primary" @click="addData()">保存</el-button>-->
|
<!-- </div>-->
|
</div>
|
</div>
|
<dataDialog ref="dialogRef" @getList="getFileList"></dataDialog>
|
</div>
|
</template>
|
<script setup>
|
import {getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs} from "vue";
|
import Cookies from "js-cookie";
|
import {ElMessage, ElMessageBox} from "element-plus";
|
import {getCompany} from "@/api/onlineEducation/company";
|
import {getToken} from "@/utils/auth";
|
import {delPic} from "@/api/onlineEducation/banner";
|
import dataDialog from "./components/dataDialog.vue"
|
import {delSysClause} from "@/api/staffManage/staff";
|
import {getCatalogue} from "@/api/qualityManage/catalog";
|
import {
|
addCatalogueData,
|
addFile, delCatalogueData,
|
delFile,
|
editCatalogueData,
|
getCatalogueData,
|
getFile
|
} from "@/api/qualityManage/range";
|
import axios from "axios";
|
import TEditor from "@/components/Tinymce/Tinymce.vue";
|
import {renderAsync} from "docx-preview";
|
import {delProductFile, getProductFilePage} from "@/api/selfProblems/productFile";
|
import {generateWordDocument} from "@/utils/exportWord";
|
|
const { proxy } = getCurrentInstance();
|
const loading = ref(false);
|
const noticeRef = ref();
|
const dialogRef = ref();
|
const treeRef = ref()
|
const dialogRecordRef = ref();
|
const currentSelectedKey = ref()
|
const loadingCompany = ref(false)
|
const data = reactive({
|
queryParams: {
|
type: 3,
|
companyId: null,
|
},
|
companyList: [],
|
isAdmin: false,
|
defaultProps: {
|
children: 'children',
|
label: 'name',
|
},
|
treeData: [],
|
});
|
const state = reactive({
|
form: {
|
id: '',
|
companyId: null,
|
catalogueId: null,
|
dataList: [],
|
},
|
})
|
const dataList = ref([]);
|
const total = ref(0);
|
|
const { queryParams } = toRefs(data);
|
|
onMounted(async () => {
|
const userInfo = JSON.parse(Cookies.get('userInfo'))
|
console.log("userInfo",userInfo)
|
data.isAdmin = userInfo.userType === 0;
|
if(data.isAdmin){
|
await getCompanyList()
|
data.queryParams.companyId = data.companyList[0].id
|
data.queryParams.companyName = data.companyList[0].name
|
state.form.companyId = data.companyList[0].id
|
}else {
|
data.queryParams.companyId = userInfo.companyId
|
state.form.companyId = userInfo.companyId
|
}
|
await getList();
|
if(data.treeData.length >0){
|
// state.form.catalogueId = data.treeData[0].id
|
// currentSelectedKey.value = state.form.catalogueId
|
await getFileList()
|
|
}
|
|
})
|
const getList = async () => {
|
data.treeData = [];
|
loading.value = true;
|
const param = {
|
companyId: state.form.companyId,
|
type : 3
|
}
|
const res = await getCatalogue(param);
|
if(res.code === 200){
|
const menu = await handleTree(res.data.data)
|
data.treeData = menu;
|
}else{
|
ElMessage.warning(res.message)
|
}
|
loading.value = false;
|
}
|
const textMeasureRef = ref(null);
|
const getMeasureElement = () => {
|
if (!textMeasureRef.value) {
|
const el = document.createElement('span');
|
el.className = 'text-measure-element';
|
el.style.cssText = `
|
position: absolute;
|
visibility: hidden;
|
white-space: nowrap;
|
font-size: 14px; /* 匹配实际字体大小 */
|
`;
|
document.body.appendChild(el);
|
textMeasureRef.value = el;
|
}
|
return textMeasureRef.value;
|
};
|
// 判断文本是否溢出
|
const isTextOverflow = (text) => {
|
const measureEl = getMeasureElement();
|
measureEl.textContent = text.mess;
|
return measureEl.scrollWidth > 300; // 180px 是节点容器实际宽度
|
};
|
|
const handleTree = (val) => {
|
const traverse = (nodes, currentPath = '') => {
|
nodes.forEach((node, index) => {
|
node.mess = `${node.number} ${node.mess}`;
|
// 递归处理子节点（传递当前序号路径）
|
if (node.children && node.children.length) {
|
traverse(node.children, node.number);
|
}
|
});
|
};
|
traverse(val); // 从根节点开始遍历
|
return val;
|
}
|
const getCompanyList = async (val)=>{
|
if(val){
|
loadingCompany.value = true;
|
const queryParams = {
|
name: val
|
}
|
const res = await getCompany(queryParams)
|
if (res.code == 200) {
|
loadingCompany.value = false;
|
data.companyList = res.data.list
|
|
} else {
|
ElMessage.warning(res.message)
|
}
|
}else {
|
loadingCompany.value = true;
|
const queryParams = {
|
pageSize: 10,
|
pageNum: 1,
|
}
|
const res = await getCompany(queryParams)
|
if (res.code == 200) {
|
loadingCompany.value = false;
|
data.companyList = res.data.list
|
|
} else {
|
ElMessage.warning(res.message)
|
}
|
}
|
}
|
const selectValue = async (val) => {
|
state.form.id = ''
|
state.form.catalogueId = null
|
data.companyList.forEach(item => {
|
if(item.name === val){
|
data.queryParams.companyId = item.id
|
state.form.companyId = item.id
|
}
|
})
|
await getList()
|
if(data.treeData.length >0 ){
|
// state.form.catalogueId = data.treeData[0].id
|
// currentSelectedKey.value = state.form.catalogueId
|
await getFileList()
|
}else {
|
state.form.dataList = []
|
}
|
|
}
|
|
const handleNodeClick = async (val) => {
|
state.form.id = ''
|
state.form.catalogueId = val.id
|
currentSelectedKey.value = val.id
|
await getFileList()
|
}
|
|
const addData = async () => {
|
if(!state.form.catalogueId){
|
ElMessage.warning('请先选择左侧目录！')
|
return
|
}
|
const valid = await noticeRef.value.validate();
|
if(valid){
|
|
if(state.form.id){
|
//编辑
|
const {dataList,recordList,...data} = state.form
|
const res = await editCatalogueData(data)
|
if(res.code == 200){
|
ElMessage.success('编辑成功')
|
await getFileList()
|
|
}else{
|
ElMessage.warning(res.message)
|
}
|
|
}else {
|
//新增
|
const {id,dataList,recordList,...data} = state.form
|
const res = await addCatalogueData(data)
|
if(res.code == 200){
|
ElMessage.success('新增成功')
|
await getFileList()
|
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
|
}
|
}
|
const openDataDialog = (type, value) => {
|
if(!state.form.catalogueId){
|
ElMessage.warning('请先选择左侧目录！')
|
return
|
}
|
dialogRef.value.openDialog(type, value, state.form.companyId,state.form.catalogueId);
|
}
|
const openRecordDialog = (type, value) => {
|
if(!state.form.catalogueId){
|
ElMessage.warning('请先选择左侧目录！')
|
return
|
}
|
dialogRecordRef.value.openDialog(type, value, state.form.companyId,state.form.catalogueId);
|
}
|
|
const handleDataDelete = (val) => {
|
ElMessageBox.confirm(
|
'确定删除此条数据？',
|
'提示',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then( async() => {
|
const res = await delProductFile(val.id)
|
if(res.code == 200){
|
ElMessage.success('数据删除成功')
|
await getFileList()
|
}else{
|
ElMessage.warning(res.message)
|
}
|
})
|
}
|
|
const handleRecordDelete = (val) => {
|
ElMessageBox.confirm(
|
'确定删除此条数据？',
|
'提示',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then( async() => {
|
const res = await delFile(val.id)
|
if(res.code == 200){
|
ElMessage.success('数据删除成功')
|
await getFileList()
|
}else{
|
ElMessage.warning(res.message)
|
}
|
})
|
}
|
const deleteData = () => {
|
ElMessageBox.confirm(
|
'确定删除此条数据？',
|
'提示',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then( async() => {
|
const res = await delCatalogueData(state.form.id)
|
if(res.code == 200){
|
ElMessage.success('数据删除成功')
|
await getFileList()
|
}else{
|
ElMessage.warning(res.message)
|
}
|
})
|
}
|
const reset = async () => {
|
data.queryParams = {
|
companyId: '',
|
pageNum: 1,
|
pageSize: 10,
|
}
|
data.companyList = [];
|
await getList();
|
await getCompanyList()
|
data.queryParams.companyId = data.companyList[0].id
|
data.queryParams.companyName = data.companyList[0].name
|
state.form.companyId = data.companyList[0].id
|
}
|
|
const getFileList = async () => {
|
const queryParams = {
|
companyId: state.form.companyId,
|
catalogueId: state.form.catalogueId,
|
type: 2
|
}
|
const res = await getProductFilePage(queryParams)
|
if (res.code == 200) {
|
state.form.dataList = res.data.list.map(item => {
|
return {
|
...item,
|
fileNameSimple: item.fileName.split('.')[0]
|
}
|
})
|
} else {
|
ElMessage.warning(res.message)
|
}
|
}
|
const openFile = async(path)=>{
|
const ext = path.split('.').pop().toLowerCase();
|
if (ext === 'doc') {
|
ElMessageBox.confirm('暂不支持线上预览.doc文件，是否下载查看？', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => {
|
window.open(`${import.meta.env.VITE_APP_BASE_API}/${path}`, '_blank');
|
}).catch(() => {
|
console.log('取消预览')
|
});
|
return
|
}
|
try {
|
// 1. 获取文件
|
const response = await fetch(import.meta.env.VITE_APP_BASE_API + '/' + path);
|
const arrayBuffer = await response.arrayBuffer();
|
// 2. 创建新窗口
|
const win = window.open('', '_blank')
|
win.document.write(`
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<title>预览</title>
|
<style>
|
body { margin: 20px; font-family: Arial; }
|
.docx-container { width: 100%; height: 100%; }
|
</style>
|
</head>
|
<body>
|
<div id="container" class="docx-container"></div>
|
</body>
|
</html>
|
`);
|
// 3. 渲染 DOCX
|
await renderAsync(arrayBuffer, win.document.getElementById('container'));
|
|
} catch (error) {
|
console.error('预览失败:', error);
|
alert(`预览失败: ${error.message}`);
|
}
|
}
|
const downloadFile = (e)=>{
|
axios.get(import.meta.env.VITE_APP_BASE_API + '/' +e.filePath,{headers:{'Content-Type': 'application/json','Authorization': `${getToken()}`},responseType: 'blob'}).then(res=>{
|
if (res) {
|
const link = document.createElement('a')
|
let blob = new Blob([res.data],{type: res.data.type})
|
link.style.display = "none";
|
link.href = URL.createObjectURL(blob); // 创建URL
|
link.setAttribute("download", e.fileName);
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: '文件读取失败'
|
});
|
}
|
})
|
}
|
|
const showFile = (e) => {
|
if(e.target.nodeName === 'A'){
|
console.log("e",e)
|
e.preventDefault();
|
const file = {
|
fileUrl: e.target.href,
|
fileName: e.target.innerHTML
|
}
|
axios.get( file.fileUrl,{
|
headers:
|
{
|
'Content-Type': 'application/json',
|
'Authorization':getToken(),
|
},
|
responseType: 'blob'
|
}
|
).then(res=>{
|
if (res) {
|
const link = document.createElement('a')
|
let blob = new Blob([res.data],{type: res.data.type})
|
link.style.display = "none";
|
link.href = URL.createObjectURL(blob); // 创建URL
|
link.setAttribute("download", file.fileName);
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
} else {
|
this.$message.error('获取文件失败')
|
}
|
// handleClose();
|
})
|
}
|
}
|
const exportData = () => {
|
if(state.form.dataList.length == 0){
|
ElMessage.warning('暂无数据！')
|
return
|
}
|
startGeneration()
|
|
}
|
const templatePath = '/fileProjectExample.docx'
|
const startGeneration = async () => {
|
let table = {}
|
table.name = state.form.dataList[0].companyName
|
|
const dataList = state.form.dataList.map((item,index) => {
|
return{
|
...item,
|
caralog: item.catalogueName
|
}
|
})
|
const caralogList = idGroupToTree(dataList)
|
table.tableList = caralogList.map((item,index) => {
|
return {
|
...item,
|
fileList: item.children.map((f,findex) => {
|
return{
|
...f,
|
first: findex == 0,
|
}
|
})
|
}
|
})
|
try {
|
generateWordDocument(templatePath, table, table.name+'_项目过程管控文件清单.docx');
|
} catch (error){
|
ElMessage({
|
type: 'warning',
|
message: '导出失败'
|
});
|
}
|
}
|
function idGroupToTree(data) {
|
const groups = data.reduce((map, item) => {
|
map.has(item.caralog) || map.set(item.caralog, []);
|
map.get(item.caralog).push(item);
|
return map;
|
}, new Map());
|
return Array.from(groups).map(([caralog, items]) => ({
|
caralog,
|
children: items
|
}));
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.app-container{
|
.bottom{
|
display: flex;
|
width: auto;
|
height: auto;
|
border: 1px solid #c3c3c3;
|
margin: 20px;
|
|
.left{
|
//border-right: 1px solid darkgray;
|
display: flex;
|
min-width: 240px;
|
height: 700px;
|
margin: 20px 20px 20px 50px;
|
flex-direction: column;
|
:deep(.el-tree){
|
background: none;
|
}
|
:deep(.el-tooltip )
|
{
|
color: black;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
word-break: break-all;
|
white-space: nowrap;
|
}
|
.tree-text {
|
display: inline-block;
|
max-width: 300px; /* 根据实际容器宽度调整 */
|
white-space: nowrap; /* 强制不换行 */
|
overflow: hidden; /* 隐藏溢出 */
|
text-overflow: ellipsis; /* 显示省略号 */
|
}
|
/* 可选：移除el-tree默认的节点内边距 */
|
.el-tree-node__content {
|
padding-right: 5px;
|
}
|
|
.tree-container {
|
max-width: 600px;
|
margin-top: 20px;
|
height: 100%;
|
max-height: 1200px;
|
box-shadow: 8px 0 15px rgba(0,21,41,0.08);
|
overflow: auto; /* 确保出现滚动条 */
|
}
|
|
/* 隐藏默认滚动条 */
|
.tree-hide-scrollbar::-webkit-scrollbar {
|
width: 5px;
|
background-color: transparent;
|
}
|
.tree-hide-scrollbar::-webkit-scrollbar-thumb {
|
background-color: transparent;
|
border-radius: 4px;
|
}
|
/* 鼠标悬停时显示滚动条 */
|
.tree-hide-scrollbar:hover::-webkit-scrollbar-thumb {
|
background-color: #e1e1e1;
|
}
|
.tree-hide-scrollbar:hover::-webkit-scrollbar-track {
|
background-color: #f5f7fa;
|
}
|
.tree{
|
max-width: 600px;
|
margin-top: 20px;
|
height: 800px;
|
overflow-x: hidden;
|
box-shadow: 8px 0 15px rgba(0,21,41,0.08)
|
}
|
}
|
.right{
|
margin: 20px 20px 20px 10px;
|
flex: 1;
|
min-width: 100px;
|
:deep(.el-form-item__label){
|
font-weight: 600;font-size: 20px
|
}
|
:deep(.el-form-item__content){
|
float: right;
|
}
|
.reviewTable {
|
:deep(table){
|
border: 1px solid #ccc;
|
text-align: center;
|
}
|
:deep(table td){
|
border: 1px solid #ccc;
|
text-align: center;
|
padding: 0 5px;
|
}
|
:deep(table th){
|
border: 1px solid #ccc;
|
}
|
}
|
|
}
|
}
|
|
}
|
</style>
|
