|
@@ -2378,85 +2378,78 @@ export default {
|
|
|
}
|
|
|
|
|
|
let com = _this.coms[_this.comIndex];
|
|
|
- let uniqueId = `Directory_${_this.comIndex}_${com.attrs.length + 1}`;
|
|
|
-
|
|
|
- // 获取当前层级
|
|
|
- let currentLevel = e.content.level || 1;
|
|
|
-
|
|
|
- // 生成带有模块索引和层级的内容
|
|
|
- let { number, content } = this.generateNumberedContent(
|
|
|
+
|
|
|
+ // 获取当前模块中已有的目录数量,用于生成新目录的编号
|
|
|
+ const existingDirectories = com.attrs.filter(attr => attr.type === "Directory");
|
|
|
+ const currentLevelDirectories = existingDirectories.filter(dir => dir.level === e.content.level);
|
|
|
+
|
|
|
+ // 生成目录编号 - 使用下划线替代点号
|
|
|
+ const number = this.generateDirectoryNumber(
|
|
|
_this.comIndex,
|
|
|
- currentLevel
|
|
|
+ e.content.level,
|
|
|
+ currentLevelDirectories.length + 1
|
|
|
);
|
|
|
|
|
|
+ // 生成唯一ID - 使用下划线分隔所有部分
|
|
|
+ let uniqueId = `Directory_${_this.comIndex}_${e.content.level}_${number.replace(/\./g, '_')}`;
|
|
|
+
|
|
|
let data = {
|
|
|
type: "Directory",
|
|
|
id: uniqueId,
|
|
|
- name: "目录信息",
|
|
|
+ name: "目录信息",
|
|
|
intro: "目录信息",
|
|
|
- number: number,
|
|
|
- content: content,
|
|
|
- level: currentLevel,
|
|
|
+ number: number, // 保留原始的带点号的编号用于显示
|
|
|
+ displayNumber: number, // 用于显示的编号
|
|
|
+ content: "",
|
|
|
+ level: e.content.level,
|
|
|
moduleIndex: _this.comIndex,
|
|
|
+ parentNumber: this.getParentNumber(number) // 记录父级目录编号
|
|
|
};
|
|
|
|
|
|
- // 使用 $set 来确保响应式更新
|
|
|
- this.$set(com.attrs, com.attrs.length, data);
|
|
|
-
|
|
|
- // 强制更新视图
|
|
|
- this.$forceUpdate();
|
|
|
-
|
|
|
- // 使用 nextTick 确保 DOM 更新后再检查
|
|
|
- this.$nextTick(() => {
|
|
|
- if (!com.attrs[com.attrs.length - 1].content) {
|
|
|
- this.$set(com.attrs[com.attrs.length - 1], "content", content);
|
|
|
- console.log(com);
|
|
|
- this.$forceUpdate();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 使用新的唯一 ID 在插入命令中
|
|
|
+ com.attrs.push(data);
|
|
|
+
|
|
|
_this.insertCmd = {
|
|
|
content: `{{${uniqueId}}}`,
|
|
|
};
|
|
|
- },
|
|
|
|
|
|
- generateNumberedContent(moduleIndex, level) {
|
|
|
- let number = this.generateLevelPrefix(moduleIndex, level);
|
|
|
- let content = this.coms[moduleIndex].type === "TextArea" ? "" : "";
|
|
|
-
|
|
|
- return { number, content };
|
|
|
+ // 更新所有目录的显示
|
|
|
+ this.updateDirectoryDisplay(com);
|
|
|
},
|
|
|
|
|
|
- generateLevelPrefix(moduleIndex, level) {
|
|
|
- let prefix = [];
|
|
|
- let currentModule = this.coms[moduleIndex];
|
|
|
+ generateDirectoryNumber(moduleIndex, level, count) {
|
|
|
+ // 如果是一级目录,直接返回模块序号
|
|
|
+ if(level === 1) {
|
|
|
+ return `${moduleIndex + 1}`;
|
|
|
+ }
|
|
|
|
|
|
- // 获取当前模块中已存在的目录项
|
|
|
- let existingDirectories = currentModule.attrs.filter(
|
|
|
- (attr) => attr.type === "Directory"
|
|
|
+ // 获取父级目录编号
|
|
|
+ const parentLevel = level - 1;
|
|
|
+ const parentDirectories = this.coms[moduleIndex].attrs.filter(
|
|
|
+ attr => attr.type === "Directory" && attr.level === parentLevel
|
|
|
);
|
|
|
+
|
|
|
+ if(parentDirectories.length === 0) {
|
|
|
+ // 如果没有父级目录,自动创建
|
|
|
+ const parentNumber = this.generateDirectoryNumber(moduleIndex, parentLevel, 1);
|
|
|
+ this.insertDirectory({
|
|
|
+ content: {
|
|
|
+ level: parentLevel
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return `${parentNumber}.${count}`;
|
|
|
+ }
|
|
|
|
|
|
- // 计算当前层级的序号
|
|
|
- let currentLevelCount =
|
|
|
- existingDirectories.filter((dir) => dir.level === level).length + 1;
|
|
|
+ // 使用最后一个父级目录的编号
|
|
|
+ const lastParent = parentDirectories[parentDirectories.length - 1];
|
|
|
+ return `${lastParent.number}.${count}`;
|
|
|
+ },
|
|
|
|
|
|
- // 构建多级序号
|
|
|
- for (let i = 1; i <= level; i++) {
|
|
|
- if (i === 1) {
|
|
|
- prefix.push(moduleIndex + 1);
|
|
|
- } else if (i === level) {
|
|
|
- prefix.push(currentLevelCount);
|
|
|
- } else {
|
|
|
- // 对于中间层级,找到最近的上级目录项
|
|
|
- let parentLevel = existingDirectories
|
|
|
- .filter((dir) => dir.level === i - 1)
|
|
|
- .pop();
|
|
|
- prefix.push(parentLevel ? parentLevel.number.split(".")[i - 1] : 1);
|
|
|
- }
|
|
|
+ getParentNumber(number) {
|
|
|
+ const parts = number.split('.');
|
|
|
+ if(parts.length > 1) {
|
|
|
+ return parts.slice(0, -1).join('.');
|
|
|
}
|
|
|
-
|
|
|
- return prefix.join(".");
|
|
|
+ return '';
|
|
|
},
|
|
|
|
|
|
onInsertProductAttr(e) {
|
|
@@ -4029,6 +4022,23 @@ export default {
|
|
|
// 强制更新视图
|
|
|
this.$forceUpdate();
|
|
|
},
|
|
|
+
|
|
|
+ // 添加新方法:更新目录显示
|
|
|
+ updateDirectoryDisplay(com) {
|
|
|
+ // 按级别和编号排序目录
|
|
|
+ const directories = com.attrs
|
|
|
+ .filter(attr => attr.type === "Directory")
|
|
|
+ .sort((a, b) => {
|
|
|
+ if (a.level !== b.level) return a.level - b.level;
|
|
|
+ return a.number.localeCompare(b.number, undefined, { numeric: true });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新每个目录的显示内容
|
|
|
+ directories.forEach(dir => {
|
|
|
+ const pattern = new RegExp(`{{${dir.id}}}`, 'g');
|
|
|
+ com.content = com.content.replace(pattern, `${dir.number} {{${dir.id}}}`);
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -4127,6 +4137,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.module-list-container {
|
|
|
+ width: 320px;
|
|
|
margin-top: 110px;
|
|
|
/* position: absolute;
|
|
|
top: 135px;
|
|
@@ -4267,4 +4278,76 @@ export default {
|
|
|
.highlight {
|
|
|
animation: highlight-pulse 2s ease-in-out;
|
|
|
}
|
|
|
+
|
|
|
+/* 添加到组件的 <style> 部分 */
|
|
|
+.el-tree {
|
|
|
+ .el-tree-node {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ /* 为每个节点添加左侧垂直线 */
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 8px; /* 调整线条位置 */
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 2px;
|
|
|
+ background-color: #1aad19; /* 线条颜色 */
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 移除最后一个子节点的垂直线延伸 */
|
|
|
+ &:last-child:before {
|
|
|
+ height: 20px; /* 调整到节点中心位置 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 为每个节点添加水平连接线 */
|
|
|
+ .el-tree-node__content:before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 8px; /* 与垂直线对齐 */
|
|
|
+ top: 50%;
|
|
|
+ width: 16px; /* 水平线长度 */
|
|
|
+ height: 2px;
|
|
|
+ background-color: #1aad19;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 移除根节点的垂直线 */
|
|
|
+ & > .el-tree-node:before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 移除第一层节点的连接线 */
|
|
|
+ & > .el-tree-node > .el-tree-node__content:before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 调整节点内容的位置,为线条留出空间 */
|
|
|
+ .el-tree-node__content {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 28px !important; /* 调整缩进 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 确保展开箭头在正确位置 */
|
|
|
+ .el-tree-node__expand-icon {
|
|
|
+ padding: 6px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 自定义树节点样式 */
|
|
|
+.custom-tree-node {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 8px;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ /* 编辑输入框样式 */
|
|
|
+ .el-input {
|
|
|
+ margin-left: -4px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|