<template>
<
div class="app-container">
<el-row :gutter="20">
<!-- 项目树菜单 -->
<el-col :span="6" :xs="24">
<
div class="head-container">
<el-input
v-model="projectName"
placeholder="请输入项目名称"
clearable
size="mini"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
@input="filterProjectTree"
/>
</
div>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-sort"
size="mini"
@click="toggleExpandAll"
>{{ isExpandAll ? '折叠' : '展开' }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-folder-add"
size="mini"
@click="handleAddProject"
v-hasPermi="['cms:project:add']"
>新增项目</el-button>
</el-col>
</el-row>
<el-tree
v-if="refresh
Table"
style="margin-top: 0.8rem;"
:data="filteredProjectTreeData"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:highlight-current="true"
:default-expand-all="isExpandAll"
ref="projectTree"
empty-text="加载中，请稍候"
node-key="id"
@node-click="handleProjectClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<
div class="tree-node-content">
<el-icon class="tree-icon" :size="16">
<svg-icon v-if="node.expanded" icon-class="folder-open" />
<svg-icon v-else icon-class="folder" />
</el-icon>
<
div v-if="node.label && node.label.length > 25" class="node-label">
<el-tooltip :show-after="300" :content="node.label + (data.version ? ` (v${data.version})` : '')" placement="top-start">
<span>{{ ellipsis(node.label, 20) }}{{ data.version ? ` (v${data.version})` : '' }}</span>
</el-tooltip>
</
div>
<
div v-else class="node-label">
<span>{{ node.label }}{{ data.version ? ` (v${data.version})` : '' }}</span>
</
div>
</
div>
<span class="node-actions">
<span class="node-actions">
<el-button
type="text"
size="mini"
icon="el-icon-edit"
v-hasPermi="['cms:project:update']"
@click.stop="() => handleEditProject(data)" >
</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-plus"
v-hasPermi="['cms:project:add']"
@click.stop="() => handleAddSubProject(data)" >
</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-delete"
v-hasPermi="['cms:project:delete']"
@click.stop="() => handleDeleteProject(data)" >
</el-button>
</span>
</span>
</span>
</el-tree>
</el-col>
<!-- 文档区域 -->
<el-col :span="18" :xs="24">
<!-- 文档列表视图 -->
<
div v-if="activeView === 'list'" class="doc-list-container">
<el-form :model="docQueryParams" ref="docQueryForm" :inline="true" label-width="68px">
<el-form-item label="文档标题" prop="title">
<el-input
v-model="docQueryParams.title"
placeholder="请输入文档标题"
clearable
size="mini"
@keyup.enter.native="getDocumentList"
prefix-icon="el-icon-search"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="docQueryParams.status" placeholder="状态" size="mini" clearable>
<el-option label="编制中✍" value="0" />
<el-option label="待评审✊" value="1" />
<el-option label="已评审👍" value="2" />
<el-option label="修改中🔧" value="3" />
<el-option label="开发中💪" value="4" />
<el-option label="已完成开发🆗" value="5" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="getDocumentList">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetDocQuery">重置</el-button>
</el-form-item>
</el-form>
<
div class="batch-actions">
<el-button
type="success"
icon="el-icon-download"
size="mini"
:disabled="selectedDocs.length === 0"
@click="handleBatchExport"
>
批量导出 ({{ selectedDocs.length }})
</el-button>
<el-button
type="danger"
size="mini"
:disabled="selectedDocs.length === 0"
v-hasPermi="['cms:project:deleteArticleFromProject']"
@click="handleBatchDeleteDocument"
>
批量删除({{ selectedDocs.length }})
</el-button>
</
div>
<el-
table
v-loading="docLoading"
:data="documentList"
highlight-current-row
@selection-change="handleSelectionChange"
ref="doc
Table"
>
<el-
table-column type="selection" width="55" align="center" />
<el-
table-column label="序号" type="index" width="50" align="center" />
<el-
table-column label="编号" align="center" prop="serialNum" />
<el-
table-column label="标题" align="center" prop="title" class-name="small-padding fixed-width" width="200" :show-overflow-tooltip="true" sor
table >
<template slot-scope="scope">
<
div v-show="scope.row.title.startsWith('[诊断项]')">{{scope.row.title}}<span style="color: #303133;font-family: 'Arial', sans-serif;font-size: 12px;font-weight: normal;font-style: italic;">(v{{scope.row.articleVersion}}版本)</span></
div>
<el-button v-show="!scope.row.title.startsWith('[诊断项]')" size="normal" type="text" icon="el-icon-tickets" @click="getArticleInfo(scope.row.id)">{{scope.row.title}}<span style="color: #303133;font-family: 'Arial', sans-serif;font-size: 12px;font-weight: normal;font-style: italic;">(v{{scope.row.articleVersion}}版本)</span></el-button>
</template>
</el-
table-column>
<el-
table-column label="进度" prop="status" width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.status === '0'" type="info" size="small">编制中✍</el-tag>
<el-tag v-if="scope.row.status === '1'" type="warning" size="small">待评审✊</el-tag>
<el-tag v-if="scope.row.status === '2'" type="success" size="small">已评审👍</el-tag>
<el-tag v-if="scope.row.status === '3'" type="success" size="small">修改中🔧</el-tag>
<el-tag v-if="scope.row.status === '4'" type="success" size="small">开发中💪</el-tag>
<el-tag v-if="scope.row.status === '5'" type="success" size="small">已完成开发🆗</el-tag>
</template>
</el-
table-column>
<el-
table-column label="创建人" prop="createBy" width="100" />
<el-
table-column label="负责人" prop="director" width="100"/>
<el-
table-column label="创建时间" prop="createTime" width="140" />
<el-
table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleEditDocument(scope.row)" ></el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDeleteDocument(scope.row)" v-hasPermi="['cms:project:deleteArticleFromProject']"></el-button>
</template>
</el-
table-column>
</el-
table>
<pagination
v-show="docTotal>0"
:total="docTotal"
:page.sync="docQueryParams.pageNum"
:limit.sync="docQueryParams.pageSize"
@pagination="getDocumentList"
/>
</
div>
<!-- 文档详情视图 -->
<
div v-else-if="activeView === 'detail'" class="doc-detail-container">
<
div class="doc-header">
<el-button type="text" icon="el-icon-back" @click="backToList">返回文档列表</el-button>
<h2 class="doc-title">
<el-icon class="title-icon"><svg-icon icon-class="document" /></el-icon>
{{ currentDocument.title }}
</h2>
</
div>
<!-- 富
文本编辑器 -->
<el-form :model="currentDocument" ref="docForm" label-width="80px">
<el-form-item label="文档内容">
<Tinymce :height='600' v-model='currentDocument.content'></Tinymce>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-check" @click="saveDocument">保存</el-button>
<el-button icon="el-icon-close" @click="backToList">取消</el-button>
</el-form-item>
</el-form>
</
div>
</el-col>
</el-row>
<!-- 项目编辑对话框 -->
<el-dialog :title="projectDialogTitle" :visible.sync="projectDialogVisible" width="50%">
<el-form :model="projectForm" ref="projectForm" label-width="100px">
<el-form-item label="项目名称" prop="name" required>
<el-input v-model="projectForm.name" placeholder="请输入项目名称" prefix-icon="el-icon-folder" />
</el-form-item>
<el-form-item label="上级项目" prop="parentId">
<treeselect
v-model="projectForm.parentId"
:options="projectTreeData"
:normalizer="normalizer"
placeholder="选择上级项目"
/>
</el-form-item>
<el-form-item label="项目版本号" prop="version" >
<el-input v-model="projectForm.version" placeholderequiredr="请输入项目名称" />
</el-form-item>
<el-form-item label="项目描述" prop="remark">
<el-input type="textarea" v-model="projectForm.remark" :rows="3" />
</el-form-item>
</el-form>
<
div slot="footer">
<el-button @click="projectDialogVisible = false">取消</el-button>
<el-button type="primary" icon="el-icon-check" @click="saveProject">保存</el-button>
</
div>
</el-dialog>
</
div>
</template>
<script>
import {
getData,
updateData
} from "@/api/cms/data";
import {
getProjectTree,
getDocuments,
saveProject,
updateProject,
deleteProject,
removeArticleFromProject
} from "@/api/cms/articleProject";
import Tinymce from '@/components/Tinymce';
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import axios from 'axios';
import {DecryptJs,EncryptJs} from '@/utils/crypto';
export default {
name: "ProjectManagement",
components: { Treeselect, Tinymce },
data() {
return {
// 项目树相关数据
projectName: '',
projectTreeData: [],
filteredProjectTreeData: [],
refresh
Table: true,
isExpandAll: true,
defaultProps: {
children: "children",
label: "label"
},
// 项目对话框相关
projectDialogVisible: false,
projectDialogTitle: '',
projectForm: {
id: null,
name: '',
version: '',
parentId: null,
remark: ''
},
// 文档列表相关
activeView: 'list', // 'list'
或 'detail'
docQueryParams: {
ids: null,
title: '',
status: '',
pageNum: 1,
pageSize: 10
},
documentList: [],
docTotal: 0,
docLoading: false,
selectedDocs: [], // 选中的文档
ids: [], // 选中文档ID集合
// 文档详情相关
currentDocument: {
id: null,
dataIds: null,
title: '',
content: '',
status: '0'
},
// 当前选中的项目ID（用于删除操作）
currentProjectId: null,
// 导出相关数据
form: {
ids: [], // 导出的文档ID集合
notesExportFlag: 1 // 默认导出详细
}
};
},
created() {
this.getProjectTree();
},
methods: {
// ================= 项目树方法 =================
ellipsis(text, maxLength) {
return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
},
toggleExpandAll() {
this.refresh
Table = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refresh
Table = true;
});
},
filterNode(value, data) {
if (!value) return true;
return data.label.toLowerCase().includes(value.toLowerCase());
},
filterProjectTree() {
this.$refs.projectTree.filter(this.projectName);
},
handleProjectClick(data) {
// 检查是否是根节点（所有项目）
if (data.isRoot) {
this.currentProjectId = null;
this.docQueryParams.dataIds = null;
} else {
this.currentProjectId = data.id;
this.docQueryParams.ids =data.dataIds;
}
this.getDocumentList();
},
handleAddProject() {
this.projectForm = {
id: null,
name: '',
version: '',
parentId: null,
remark: ''
};
this.projectDialogTitle = '新增项目';
this.projectDialogVisible = true;
},
handleAddSubProject(data) {
this.projectForm = {
id: null,
name: '',
version: '',
parentId: data.id,
remark: ''
};
this.projectDialogTitle = '新增子项目';
this.projectDialogVisible = true;
},
handleEditProject(data) {
this.projectForm = {
id: data.id,
name: data.name,
version: data.version,
parentId: data.parentId,
remark: data.remark || ''
};
this.projectDialogTitle = '编辑项目';
this.projectDialogVisible = true;
},
collectProjectIds(node) {
let ids = [node.id];
if (node.children && node.children.length > 0) {
node.children.forEach(child => {
ids = ids.concat(this.collectProjectIds(child));
});
}
return ids;
},
handleDeleteProject(data) {
this.$confirm(`确定删除项目 "${data.name}" 及其所有子项目吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 递归收集所有节点ID
const ids = this.collectProjectIds(data);
// 调用批量删除API
deleteProject(ids).then(response => {
if (response.code === 200) {
this.$message.success('删除成功');
this.getProjectTree();
} else {
this.$message.error(response.msg || '删除失败');
}
}).catch(error => {
this.$message.error('删除失败: ' + error.message);
});
});
},
saveProject() {
this.$refs.projectForm.validate(valid => {
if (valid) {
const saveMethod = this.projectForm.id ? updateProject : saveProject;
saveMethod(this.projectForm).then(response => {
if (response.code === 200) {
this.$message.success('保存成功');
this.projectDialogVisible = false;
this.getProjectTree();
} else {
this.$message.error(response.msg || '保存失败');
}
}).catch(error => {
this.$message.error('保存失败: ' + error.message);
});
}
});
},
normalizer(node) {
return {
id: node.id,
label: `${node.name} ${node.version? '【 v' + node.version +'】': ''}`,
children: node.children && node.children.length > 0 ? node.children : undefined
};
},
// 修改后的 getProjectTree 方法
getProjectTree() {
getProjectTree().then(response => {
if (response.code === 200 && response.data) {
const rootNode = response.data;
rootNode.isRoot = true;
this.projectTreeData = this.transformTreeData([rootNode]);
this.filteredProjectTreeData = [...this.projectTreeData];
this.$nextTick(() => {
if (this.projectTreeData.length > 0) {
const firstNode = this.findFirstNonRootNode(this.projectTreeData);
if (firstNode) {
this.$refs.projectTree.setCurrentKey(firstNode.id);
this.handleProjectClick(firstNode.rawData);
}
}
});
}
}).catch(error => {
console.error("获取项目树失败:", error);
this.$message.error('获取项目树失败: ' + error.message);
});
},
// 查找第一个非根节点
findFirstNonRootNode(nodes) {
for (const node of nodes) {
if (node.isRoot) continue;
return node;
}
return null;
},
// 修改后的 transformTreeData 方法
transformTreeData(nodes) {
if (!nodes || !Array.isArray(nodes)) return [];
return nodes.map(node => {
// 如果是根节点，直接返回其子节点
if (node.isRoot) {
return this.transformTreeData(node.children || []);
}
return {
id: node.id,
label: node.name,
name: node.name,
parentId: node.parentId,
dataIds: node.dataIds,
remark: node.remark,
version: node.version || '',
createBy: node.createBy,
createTime: node.createTime,
updateBy: node.updateBy,
updateTime: node.updateTime,
children: this.transformTreeData(node.children || []),
rawData: node
};
}).flat();
},
// ================= 文档管理方法 =================
// 在 methods 中添加递归收集 serialNum 的方法
collectAlldataIds(node) {
let dataIds = [];
// 添加当前节点的 serialNum
if (node.dataIds) {
const ids = node.dataIds.split(',').map(id => id.trim());
dataIds = [...dataIds, ...ids];
}
// 递归处理子节点
if (node.children && node.children.length > 0) {
node.children.forEach(child => {
dataIds = [...dataIds, ...this.collectAlldataIds(child)];
});
}
return dataIds;
},
// 修改后的 getDocumentList 方法
getDocumentList() {
this.docLoading = true;
getDocuments(this.docQueryParams).then(response => {
if (response.code === 200) {
this.documentList = response.rows;
this.docTotal = response.total;
this.selectedDocs = []; // 清空选择
this.ids = []; // 清空ID集合
} else {
this.$message.error(response.msg || '获取文档列表失败');
}
this.docLoading = false;
}).catch(error => {
this.$message.error('获取文档列表失败: ' + error.message);
this.docLoading = false;
});
},
resetDocQuery() {
this.docQueryParams.title = '';
this.docQueryParams.status = '';
this.getDocumentList();
},
handleEditDocument(row) {
getData(row.id).then(response => {
if (response.code === 200) {
this.currentDocument = {
id: response.data.id,
serialNum: response.data.serialNum,
title: response.data.title,
content: response.data.content,
status: response.data.status
};
this.activeView = 'detail';
} else {
this.$message.error(response.msg || '获取文档详情失败');
}
}).catch(error => {
this.$message.error('获取文档详情失败: ' + error.message);
});
},
// 修改后的 handleDeleteDocument 方法
handleDeleteDocument(row) {
// 检查当前是否选择了项目
if (!this.currentProjectId) {
this.$message.warning('请先选择一个具体项目');
return;
}
this.$confirm(`确定从项目中移除文档 "${row.title}" 吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const params = {
projectId: this.currentProjectId,
dataIds: [row.id]
};
removeArticleFromProject(params).then(response => {
if (response.code === 200) {
this.getProjectTree();
this.getDocumentList();
this.$message.success('文档已从项目中移除');
} else {
this.$message.error(response.msg || '移除文档失败');
}
}).catch(error => {
this.$message.error('移除文档失败: ' + error.message);
});
});
},
handleBatchDeleteDocument() {
if (!this.currentProjectId) {
this.$message.warning('请先选择一个具体项目');
return;
}
this.$confirm(`确定从项目中移除所选文档吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 获取选中的文档的serialNum，并去重
const dataIds = Array.from(new Set(
this.selectedDocs.map(item => item.id)
));
const params = {
projectId: this.currentProjectId,
dataIds: this.selectedDocs.map(item => item.id)
};
removeArticleFromProject(params).then(response => {
if (response.code === 200) {
this.getProjectTree();
this.getDocumentList();
this.$message.success('文档已从项目中移除');
} else {
this.$message.error(response.msg || '移除文档失败');
}
}).catch(error => {
this.$message.error('移除文档失败: ' + error.message);
});
});
},
backToList() {
this.activeView = 'list';
},
saveDocument() {
const saveMethod = this.currentDocument.id ? updateData : addData;
saveMethod(this.currentDocument).then(response => {
if (response.code === 200) {
this.$message.success('保存成功');
this.getDocumentList();
this.backToList();
} else {
this.$message.error(response.msg || '保存失败');
}
}).catch(error => {
this.$message.error('保存失败: ' + error.message);
});
},
// ================= 导出功能方法 =================
// 多选处理
handleSelectionChange(selection) {
this.selectedDocs = selection;
this.ids = selection.map(item => item.id);
},
// 导出文档（单篇）
handleExportHttp(row, isDetail) {
const params = {
ids: row.id,
notesExportFlag: isDetail ? 1 : 0
};
this.download(
'cms/data/createArticleOutputHttp',
params,
`word文档_${row.title}_${new Date().getTime()}.docx`,
{ timeout: 60000 }
);
},
// 批量导出文档
handleBatchExport() {
if (this.selectedDocs.length === 0) {
this.$message.warning('请选择要导出的文档');
return;
}
// 弹出选择导出类型的对话框
this.$confirm('请选择导出方式', '提示', {
distinguishCancelAndClose: true,
confirmButtonText: '导出详细',
cancelButtonText: '导出简版',
type: 'info'
}).then(() => {
// 导出详细
this.batchExportHttp(true);
}).catch(action => {
if (action === 'cancel') {
// 导出简版
this.batchExportHttp(false);
}
});
},
// 批量导出文档实现
batchExportHttp(isDetail) {
const params = {
ids: this.ids,
notesExportFlag: isDetail ? 1 : 0
};
this.download('cms/data/createArticleOutputHttp', {
...params
}, `word文档_${new Date().getTime()}.docx`, { timeout: 60000 }) // 超时设置
},
// 排序格式化方法
sor
tableFormatter(row, column) {
if (this.ids.includes(row.id)) {
return 1;
} else {
return 2;
}
},
// 跳转到文章详情页
getArticleInfo(articleId) {
// id加密
const articleIdStr = EncryptJs(articleId, "f1827100d08ff039", "ed363078893c0329");
console.log('阅读的文档跳转加密后的ID：'+articleIdStr)
let routeUrl = this.$router.resolve({
path: '/cms/doucumentView',
query: {
id: articleIdStr
}
});
window.open(routeUrl.href, '_blank');
}
}
};
</script>
<style scoped>
/* 新增节点信息容器样式 */
.node-info {
display: flex;
flex-direction: column;
margin-left: 8px;
}
/* 版本号样式 */
.node-version {
font-size: 12px;
color: #909399;
margin-top: 2px;
font-style: italic;
}
/* 调整节点内容布局 */
.tree-node-content {
display: flex;
align-items: center;
flex: 1;
}
/* 调整节点标签样式 */
.node-label {
font-size: 14px;
font-weight: normal;
}
/* 确保操作按钮在右侧 */
.node-actions {
display: flex;
align-items: center;
}
/* 响应式调整 */
@media (max-width: 768px) {
.node-version {
font-size: 10px;
}
}
<style scoped>
.app-container {
padding: 20px;
background-color: #f5f7fa;
}
.head-container {
padding: 10px;
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.tree-node-content {
display: flex;
align-items: center;
}
.tree-icon {
margin-right: 8px;
color: #409EFF;
}
.node-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.node-actions {
display: flex;
align-items: center;
}
.doc-list-container {
background-color: #ffffff;
padding: 20px;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.batch-actions {
margin-bottom: 15px;
}
.doc-detail-container {
background-color: #ffffff;
padding: 20px;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.doc-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.doc-title {
display: flex;
align-items: center;
margin-left: 15px;
margin-bottom: 0;
font-size: 18px;
color: #303133;
}
.title-icon {
margin-right: 10px;
color: #409EFF;
}
.doc-title .doc-icon {
margin-right: 8px;
color: #909399;
}
.el-tree {
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 10px;
max-height: 70vh;
overflow-y: auto;
background-color: #ffffff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.custom-tree-node .el-button {
padding: 4px;
margin-left: 5px;
}
.el-
table {
margin-top: 10px;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-form-item {
margin-bottom: 18px;
}
.el-tag {
margin: 2px;
}
/* 响应式调整 */
@media (max-width: 768px) {
.el-col-xs-24 {
width: 100%;
margin-bottom: 20px;
}
.doc-list-container, .doc-detail-container {
padding: 10px;
}
.doc-header h2 {
font-size: 16px;
}
}
</style>
优化此树的ui，每个节点要显示dataIds的数量，有数量的有特殊标志，并且每个节点名称前要有图标，只改ui，不改变原有的逻辑和代码，不能添加多余的功能，优化完之后给我完整的代码
本文介绍了如何在HTML元素中实现文本自动换行的方法，特别是针对长字符串和英文字符的情况。通过调整CSS属性如word-break和table-layout，可以有效解决内容溢出问题。
扫一扫
1480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
