Browse Source

修改插入变量不渲染问题

yangg 6 months ago
parent
commit
e3306ead85

+ 2 - 46
ui/src/views/system/document/com/editor.vue

@@ -27,35 +27,8 @@
             <div style="padding: 10px 0">
               <el-form label-position="left" class="inline-form">
                 <el-row :gutter="24" style="margin-left: 0; margin-right: 0">
-                  <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+                 <!--  <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                     <el-form-item label="模块分类:">
-                      <!-- 此处需要处理为只有admin账号可编辑 -->
-                      <!--  <el-cascader
-                        v-if="showCategorySelect(it)"
-                        v-model="it.category_id"
-                        clearable
-                        :options="categoryList"
-                        :props="props"
-                        :show-all-levels="false"
-                        @change="onChangeCategory(it)"
-                        placeholder="请选择模块分类"
-                      />
-                     {{ $store.state.user }} -->
-                      <!-- <el-select
-                        v-if="showCategorySelect(it)"
-                        v-model="it.category_id"
-                        placeholder="请选择模块分类"
-                        size="large"
-                        style="width: 80%"
-                      >
-                        <el-option
-                          v-for="item in categoryList"
-                          :key="item.id"
-                          :label="item.name"
-                          :value="item.id"
-                        />
-                      </el-select>  v-else-->
-
                       <span @click="enableSelect(it)" style="cursor: pointer">{{
                         getCategory(it.category_id)
                       }}</span>
@@ -63,29 +36,12 @@
                   </el-col>
                   <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                     <el-form-item label="模块名称:">
-                      <!--  <el-input
-                        v-if="showCategoryName(it)"
-                        class="input-item"
-                        v-model="it.name"
-                        placeholder="请填写模块名称"
-                      />v-else -->
                       <span @click="enableName(it)" style="cursor: pointer">{{
                         it.dcb_name
                       }}</span>
                     </el-form-item>
-                  </el-col>
-                  <!-- <el-col :span="6">
-                    <el-form-item label="模块描述:">
-                      <el-input
-                        v-if="$store.state.user.roleInfo.id == 1"
-                        class="input-item"
-                        v-model="it.intro"
-                        placeholder="请填写模块介绍"
-                      />
-                      <span v-else>{{ it.intro }}</span>
-                    </el-form-item>
                   </el-col> -->
-                  <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                     <el-form-item
                       ><!-- v-if="$store.state.user.roleInfo.id == 1" -->
                       <div class="btn-save">

+ 1 - 1
ui/src/views/system/document/create.scss

@@ -298,7 +298,7 @@
       }
     }
     .editor-main{
-      width:55%;
+      width:56%;
       overflow: hidden;
       /* overflow-y: auto; */
       position:relative;

+ 215 - 23
ui/src/views/system/document/create.vue

@@ -547,6 +547,44 @@
           </el-tabs>
         </div>
       </div>
+      <div class="module-list-container">
+        <draggable
+          v-model="coms"
+          @add="onAdd"
+          @update="onDragEnd"
+          @end="onDragComplete"
+          group="itxst"
+          animation="300"
+          handle=".drag-handle"
+          :scroll="true"
+          :scrollSensitivity="100"
+          :scrollSpeed="20"
+        >
+          <transition-group style="display: block;">
+            <template v-for="(it, index) in coms">
+              <div
+                :key="index"
+                class="module-item"
+                :class="comIndex == index ? 'active-module' : ''"
+              >
+                <div class="drag-handle">
+                  <img src="@/icons/svg/drag.svg" style="width: 20px;" icon-class="drag" />
+                </div>
+                <div class="module-info">
+                  <div class="module-category">
+                    <span class="label">模块分类:</span>
+                    <span class="value">{{ getCategory(it.category_id) }}</span>
+                  </div>
+                  <div class="module-name">
+                    <span class="label">模块名称:</span>
+                    <span class="value">{{ it.dcb_name }}</span>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </transition-group>
+        </draggable>
+      </div>
     </div>
 
     <!-- 新增资源选择弹框 -->
@@ -2644,41 +2682,51 @@ export default {
       if (res.status != 200) return [];
 
       let dataList = res.data.dataList.map((item) => {
-        // 添加空值检查
-        if (!item.attrs) {
-          item.attrs = "[]";
-        }
-        if (!item.content) {
-          item.content = "";
-        }
-
         try {
-          // 解析 attrs,添加错误处理
-          item.attrs =
-            typeof item.attrs === "string"
-              ? JSON.parse(item.attrs)
+          // 处理属性值
+          if (item.dcb_attrs) {
+            // 如果存在 dcb_attrs,优先使用它并确保正确解析
+            item.attrs = typeof item.dcb_attrs === "string" 
+              ? JSON.parse(item.dcb_attrs) 
+              : item.dcb_attrs;
+          } else if (!item.attrs) {
+            // 如果既没有 dcb_attrs 也没有 attrs,设置为空数组
+            item.attrs = [];
+          } else {
+            // 如果有 attrs 但是是字符串,解析它
+            item.attrs = typeof item.attrs === "string" 
+              ? JSON.parse(item.attrs) 
               : item.attrs;
+          }
+
+          // 确保 content 存在
+          item.content = item.dcb_nr || item.content || "";
 
-          // 从 content 中提取所有 {{}} 包裹的 ID,添加空值检查
-          const contentIds = (
-            (item.content || "").match(/{{([^}]+)}}/g) || []
-          ).map((match) => match.slice(2, -2).trim());
+          // 从 content 中提取所有 {{}} 包裹的 ID
+          const contentIds = (item.content.match(/{{([^}]+)}}/g) || [])
+            .map(match => match.slice(2, -2).trim());
+
+          // 只在有 contentIds 时进行过滤
+          if (contentIds.length > 0) {
+            item.attrs = Array.isArray(item.attrs) 
+              ? item.attrs.filter(attr => attr && attr.id && contentIds.includes(attr.id))
+              : [];
+          }
 
           // 确保 attrs 是数组
-          item.attrs = Array.isArray(item.attrs) ? item.attrs : [];
+          if (!Array.isArray(item.attrs)) {
+            item.attrs = [];
+          }
 
-          // 过滤 attrs,只保留在 content 中出现的 ID
-          item.attrs = item.attrs.filter(
-            (attr) => attr && attr.id && contentIds.includes(attr.id)
-          );
         } catch (error) {
-          console.error("Error processing template item:", error);
+          console.error("Error processing template item:", error, item);
           item.attrs = [];
         }
 
         return item;
       });
-
+      
+      console.log("处理后的数据列表:", dataList);
       return dataList;
     },
 
@@ -3093,7 +3141,101 @@ export default {
         this.docAttr.links = JSON.stringify(this.docAttr.linkProduct);
       }
       // ... 其他代码保持不变 ...
+    },
+     // 添加或修改以下方法
+     getCategory(categoryId) {
+      // 处理数组格式的categoryId
+      if (Array.isArray(categoryId)) {
+        categoryId = categoryId[categoryId.length - 1]; // 获取数组最后一个值
+      }
+      
+      // 如果没有categoryId,直接返回空字符串
+      if (!categoryId) return '';
+
+      const findCategory = (list) => {
+        if (!list || !Array.isArray(list)) return null;
+        
+        for (const category of list) {
+          // 确保进行数字比较
+          if (Number(category.id) === Number(categoryId) || 
+              Number(category.dcb_category_id) === Number(categoryId)) {
+            return category.name || category.dcb_name;
+          }
+          
+          // 检查templates
+          if (category.templates) {
+            const template = category.templates.find(t => 
+              Number(t.dcb_category_id) === Number(categoryId) || 
+              Number(t.category_id) === Number(categoryId)
+            );
+            if (template) {
+              return category.name;
+            }
+          }
+          
+          // 递归检查子分类
+          if (category.children) {
+            const found = findCategory(category.children);
+            if (found) return found;
+          }
+        }
+        return null;
+      };
+
+      // 在分类列表中查找
+      const categoryName = findCategory(this.categoryList);
+      
+      // 如果找到分类名称则返回,否则返回格式化后的分类ID
+      return categoryName || (categoryId ? String(categoryId) : '');
+    },
+
+   // 添加目录编号更新方法
+  updateDirectoryNumbers() {
+    this.coms.forEach((com, moduleIndex) => {
+      if (com.attrs) {
+        // 获取当前模块中的所有目录类型属性
+        const directoryAttrs = com.attrs.filter(attr => attr.type === 'Directory');
+        
+        // 更新每个目录的编号
+        directoryAttrs.forEach((dir, index) => {
+          // 生成新的编号
+          const number = this.generateLevelPrefix(moduleIndex, dir.level);
+          // 更新目录编号
+          this.$set(dir, 'number', number);
+        });
+      }
+    });
+  },
+
+    // 简化拖拽完成处理
+    onDragComplete() {
+      this.$nextTick(() => {
+        // 只在存在目录类型的属性时才更新编号
+        if (this.coms.some(com => com.attrs && com.attrs.some(attr => attr.type === 'Directory'))) {
+          this.updateDirectoryNumbers();
+        }
+        // 触发重建事件
+        this.$emit("onRebuild", this.coms);
+      });
+    },
+
+    // 简化拖拽结束处理
+    onDragEnd() {
+      // 可以添加其他拖拽结束后的处理逻辑
+      this.$forceUpdate();
+    },
+
+    // 简化添加处理
+    onAdd(evt) {
+      console.log('Added new module:', evt.added);
+      this.$nextTick(() => {
+        if (this.coms.some(com => com.attrs && com.attrs.some(attr => attr.type === 'Directory'))) {
+          this.updateDirectoryNumbers();
+        }
+        this.$emit("onRebuild", this.coms);
+      });
     }
+
   },
 };
 </script>
@@ -3191,4 +3333,54 @@ export default {
     }
   }
 }
+.module-list-container {
+/*   border: 1px solid #dcdfe6; */
+  border-radius: 4px;
+  padding: 10px;
+  
+  .module-item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 1px solid #ebeef5;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    &.active-module {
+      background-color: #f5f7fa;
+    }
+    
+    .drag-handle {
+      cursor: move;
+      margin-right: 15px;
+    }
+    
+    .module-info {
+      flex: 1;
+      
+      .module-category,
+      .module-name {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+        
+        .label {
+          color: #606266;
+          margin-right: 10px;
+          min-width: 70px;
+        }
+        
+        .value {
+          color: #303133;
+        }
+      }
+    }
+  }
+}
 </style>