|
|
@@ -73,6 +73,15 @@
|
|
|
@click="handleUpdateFolderName(data)">
|
|
|
修改
|
|
|
</el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ style="width: 120px;border: none; text-align: center;"
|
|
|
+ @click="swdt(data)">
|
|
|
+ 查看思维导图
|
|
|
+ </el-button>
|
|
|
<!-- 删除按钮始终显示 -->
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
@@ -569,13 +578,13 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
+
|
|
|
parseTime,
|
|
|
dict,
|
|
|
/** 查询文件列表 */
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
let params = this.queryParams;
|
|
|
- console.log('当前参数D:', params);
|
|
|
|
|
|
// 自定义添加时间范围参数(小写开头)
|
|
|
if (this.createDateRange && this.createDateRange.length === 2) {
|
|
|
@@ -595,7 +604,6 @@ export default {
|
|
|
delete params.endUpdateTime;
|
|
|
}
|
|
|
|
|
|
- console.log('请求参数:', params);
|
|
|
listFile(params).then(response => {
|
|
|
this.fileList = response.rows;
|
|
|
this.total = response.total;
|
|
|
@@ -606,7 +614,6 @@ export default {
|
|
|
getFileTree() {
|
|
|
folderTreeSelectByDeptId().then(response => {
|
|
|
this.fileOptions = response.data;
|
|
|
- console.log("获取到的文件夹树:", this.fileOptions);
|
|
|
})
|
|
|
},
|
|
|
// 筛选节点
|
|
|
@@ -614,11 +621,210 @@ export default {
|
|
|
if (!value) return true;
|
|
|
return data.label.indexOf(value) !== -1;
|
|
|
},
|
|
|
- // 节点单击事件
|
|
|
+ /**
|
|
|
+ * 将子树转换为mermaid思维导图文本
|
|
|
+ * @param {object} node - 子树根节点(由getSubTree返回)
|
|
|
+ * @returns {string} mermaid思维导图代码
|
|
|
+ */
|
|
|
+ // 获取子树结构
|
|
|
+ getSubTree(nodeId, tree = this.fileOptions) {
|
|
|
+ for (const node of tree) {
|
|
|
+ if (node.id === nodeId) {
|
|
|
+ return JSON.parse(JSON.stringify(node)); // 深拷贝节点
|
|
|
+ }
|
|
|
+ if (node.children && node.children.length > 0) {
|
|
|
+ const result = this.getSubTree(nodeId, node.children);
|
|
|
+ if (result) return result;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+ },
|
|
|
+
|
|
|
+ convertToMindmap(node) {
|
|
|
+ if (!node || !node.label) return 'mindmap\n (空数据)';
|
|
|
+
|
|
|
+ const MAX_DEPTH = 5;
|
|
|
+ const lines = ['mindmap']; // mindmap单独一行,不加空格
|
|
|
+
|
|
|
+ const generateLines = (currentNode, indentLevel = 1) => {
|
|
|
+ if (indentLevel > MAX_DEPTH) return;
|
|
|
+
|
|
|
+ // 处理空标签情况
|
|
|
+ const label = currentNode.label || '未命名节点';
|
|
|
+
|
|
|
+ // 转义特殊字符(括号、引号等)
|
|
|
+ const escapedLabel = label
|
|
|
+ .replace(/[()]/g, '\\$&') // 转义括号
|
|
|
+ .replace(/"/g, '\\"') // 转义引号
|
|
|
+ .replace(/\s+/g, ' ') // 替换多个空格为单个空格
|
|
|
+ .trim(); // 去除首尾空格
|
|
|
+
|
|
|
+ // 每个节点单独一行,使用2个空格缩进
|
|
|
+ const indent = ' '.repeat(indentLevel);
|
|
|
+ lines.push(`${indent}${escapedLabel}`);
|
|
|
+
|
|
|
+ if (currentNode.children?.length) {
|
|
|
+ currentNode.children.forEach(child =>
|
|
|
+ generateLines(child, indentLevel + 1)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ generateLines(node);
|
|
|
+
|
|
|
+ // 返回格式化的字符串,确保没有多余空格
|
|
|
+ return lines.join('\n');
|
|
|
+ },
|
|
|
+ convertToMarkdown(node) {
|
|
|
+ if (!node || !node.label) return '# 空数据';
|
|
|
+
|
|
|
+ const MAX_DEPTH = 5;
|
|
|
+ let markdownContent = `# ${node.label}\n\n`;
|
|
|
+
|
|
|
+ const generateMarkdown = (currentNode, depth = 2) => {
|
|
|
+ if (depth > MAX_DEPTH) return;
|
|
|
+
|
|
|
+ if (currentNode.children && currentNode.children.length > 0) {
|
|
|
+ currentNode.children.forEach(child => {
|
|
|
+ const indent = ' '.repeat(depth - 2);
|
|
|
+ markdownContent += `${indent}## ${child.label}\n`;
|
|
|
+
|
|
|
+ if (child.children && child.children.length > 0) {
|
|
|
+ child.children.forEach(grandchild => {
|
|
|
+ const subIndent = ' '.repeat(depth - 1);
|
|
|
+ markdownContent += `${subIndent}- ${grandchild.label}\n`;
|
|
|
+
|
|
|
+ if (grandchild.children && grandchild.children.length > 0) {
|
|
|
+ grandchild.children.forEach(greatGrandchild => {
|
|
|
+ const subSubIndent = ' '.repeat(depth);
|
|
|
+ markdownContent += `${subSubIndent}- ${greatGrandchild.label}\n`;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ markdownContent += '\n';
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ generateMarkdown(node, 2);
|
|
|
+ return markdownContent;
|
|
|
+ },
|
|
|
+ swdt(data){
|
|
|
+ // 新增:生成Markdown格式思维导图并跳转
|
|
|
+ try {
|
|
|
+ const subTree = this.getSubTree(data.id);
|
|
|
+ if (!subTree) {
|
|
|
+ this.$message.error('未找到该节点的子树数据');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const markdownData = this.convertToMarkdown(subTree);
|
|
|
+ console.log('生成的Markdown格式数据:', markdownData);
|
|
|
+
|
|
|
+ // 跳转到思维导图页面
|
|
|
+ // this.$router.push({
|
|
|
+ // path: '/mindmap',
|
|
|
+ // query: {
|
|
|
+ // data: encodeURIComponent(markdownData),
|
|
|
+ // title: data.label,
|
|
|
+ // format: 'markdown'
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+
|
|
|
+ const routeData = this.$router.resolve({
|
|
|
+ path: '/mindmap',
|
|
|
+ query: {
|
|
|
+ data: encodeURIComponent(markdownData),
|
|
|
+ title: data.label,
|
|
|
+ format: 'markdown'
|
|
|
+ }
|
|
|
+ });
|
|
|
+ window.open(routeData.href, '_blank');
|
|
|
+ } catch (error) {
|
|
|
+ console.error('生成思维导图失败:', error);
|
|
|
+ this.$message.error('生成思维导图失败');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 修改后的handleNodeClick方法
|
|
|
handleNodeClick(data) {
|
|
|
+ // ...原有文件列表加载逻辑
|
|
|
+
|
|
|
this.queryParams.folderId = data.id;
|
|
|
this.selectedFolderId = data.id;
|
|
|
this.handleQuery();
|
|
|
+
|
|
|
+ },
|
|
|
+// 验证思维导图数据格式
|
|
|
+ validateMermaidData(data) {
|
|
|
+ if (!data) return false;
|
|
|
+
|
|
|
+ // 基本格式检查
|
|
|
+ const lines = data.split('\n');
|
|
|
+ if (lines.length < 2) return false;
|
|
|
+
|
|
|
+ // 第一行必须是 'mindmap' 且单独一行
|
|
|
+ if (lines[0].trim() !== 'mindmap') return false;
|
|
|
+
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ async renderMindmap() {
|
|
|
+ try {
|
|
|
+ // 获取传递的数据
|
|
|
+ let mindmapData = decodeURIComponent(this.$route.query.data || '');
|
|
|
+ const title = this.$route.query.title || '思维导图';
|
|
|
+
|
|
|
+ // 保存原始数据用于调试
|
|
|
+ this.rawData = mindmapData;
|
|
|
+
|
|
|
+ console.log('接收到的思维导图数据:', mindmapData);
|
|
|
+
|
|
|
+ if (!mindmapData) {
|
|
|
+ throw new Error('未获取到思维导图数据');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清理数据:确保mindmap后是换行符
|
|
|
+ mindmapData = mindmapData.replace(/^mindmap\s+/, 'mindmap\n');
|
|
|
+
|
|
|
+ // 设置页面标题
|
|
|
+ document.title = title;
|
|
|
+
|
|
|
+ // 确保DOM已更新
|
|
|
+ await this.$nextTick();
|
|
|
+
|
|
|
+ // 检查容器元素是否存在
|
|
|
+ if (!this.$refs.mindmap) {
|
|
|
+ throw new Error('找不到思维导图容器元素');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清除容器内容
|
|
|
+ this.$refs.mindmap.innerHTML = '';
|
|
|
+
|
|
|
+ // 初始化并配置Mermaid
|
|
|
+ this.mermaid.initialize({
|
|
|
+ startOnLoad: false,
|
|
|
+ theme: 'neutral',
|
|
|
+ mindmap: {
|
|
|
+ nodeSpacing: 50,
|
|
|
+ levelDistance: 100
|
|
|
+ },
|
|
|
+ securityLevel: 'loose',
|
|
|
+ logLevel: 5 // 开启详细调试日志
|
|
|
+ });
|
|
|
+
|
|
|
+ // 渲染思维导图
|
|
|
+ const { svg } = await this.mermaid.render(
|
|
|
+ 'mindmap',
|
|
|
+ mindmapData,
|
|
|
+ this.$refs.mindmap
|
|
|
+ );
|
|
|
+
|
|
|
+ this.$refs.mindmap.innerHTML = svg;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('渲染思维导图失败:', error);
|
|
|
+ this.error = `渲染错误: ${error.message}\n\n请检查思维导图数据格式`;
|
|
|
+ }
|
|
|
},
|
|
|
/** 获取用户信息 */
|
|
|
getUserInfo() {
|
|
|
@@ -791,7 +997,6 @@ export default {
|
|
|
this.$message.error('文件上传失败,请重试');
|
|
|
},
|
|
|
getFolderName(row) {
|
|
|
- console.log('row', row)
|
|
|
return row.folderName
|
|
|
},
|
|
|
indexMethod(index) {
|