项目管理 回显问题

src/views/project/Project/ProjectEditDialog.vue

@@ -120,11 +120,11 @@
               <el-scrollbar height="400px">
                 <div class="datasource-list">
                   <div 
-                    v-for="(db,dbindex) in selectedDbDetails" 
+                    v-for="(db, dbIndex) in selectedDbDetails" 
                     :key="db.tid"
                     class="datasource-item"
                     :class="{ active: selectedDataSource === db.tid }"
-                    @click="selectDataSource(db.tid,dbindex)"
+                    @click="selectDataSource(db.tid, dbIndex)"
                   >
                     {{ db.sysname }}
                   </div>
@@ -137,12 +137,6 @@
               <div class="schema-header">
                 <div class="section-title">SCHEMA</div>
                 <div class="schema-select-all">
-                  <!-- <el-checkbox 
-                    v-model="selectAllSchemas" 
-                    @change="handleSelectAllSchemas"
-                  >
-                    全选
-                  </el-checkbox> -->
                   <span class="schema-count">{{ selectedSchemas.length }}/{{ allSchemasCompute.length }}</span>
                 </div>
               </div>
@@ -151,11 +145,14 @@
                 <el-checkbox-group v-model="selectedSchemas" @change="schemaChange">
                   <div 
                     v-for="schema in allSchemasCompute" 
-                    :key="schema"
+                    :key="schema.value"
                     class="schema-item"
                   >
-                    <el-checkbox :value="schema.value" :label=" schema.text" />
-                   
+                    <el-checkbox 
+                      :value="schema.value" 
+                      :label="schema.text"
+                      :checked="isSchemaSelected(schema.value)"
+                    />
                   </div>
                 </el-checkbox-group>
               </el-scrollbar>
@@ -163,6 +160,9 @@
           </div>
         </div>
 
+        <!-- 其他步骤内容保持不变 -->
+
+        <!-- 第四步：数据域选择 -->
        <!-- 第四步：数据域选择 -->
         <div v-if="activeStep === 4">
           <div class="step-title">规则选择</div>
@@ -185,13 +185,13 @@
                 </div>
                 
                 <el-scrollbar height="150px">
-                  <el-checkbox-group v-model="selectedDomains" @change="handlechangeSelectDomains">
+                  <el-checkbox-group v-model="selectedDomains" @change="handleDomainSelectionChange">
                     <div 
                       v-for="domain in group.list" 
                       :key="domain.id"
                       class="domain-item"
                     >
-                      <el-checkbox :value="domain.id">
+                      <el-checkbox :value="domain.id" :checked="isDomainSelected(domain.id)">
                         <div class="domain-content">
                           <div class="domain-name">{{ domain.name }}</div>
                           <div v-if="domain.desc" class="domain-desc">{{ domain.desc }}</div>
@@ -201,7 +201,6 @@
                   </el-checkbox-group>
                 </el-scrollbar>
               </div>
-              
             </div>
 
             <!-- 已选择规则 -->
@@ -222,11 +221,16 @@
                 >
                   <div class="domain-name">{{ domain.name }}</div>
                   <div v-if="domain.desc" class="domain-desc">{{ domain.desc }}</div>
+                  <div class="domain-group-name" v-if="findDomainGroupName(domain.id)">
+                    所属分组: {{ findDomainGroupName(domain.id) }}
+                  </div>
                 </div>
               </el-scrollbar>
             </div>
           </div>
         </div>
+
+
       </div>
 
       <!-- 右侧步骤条 -->
@@ -336,6 +340,7 @@ const reset = () => {
   dbFilter.value.keyword = ''
   allDatabases.value = []
   selectedDbs.value = []
+  allSchemasIndex.value = 0
 }
 
 const sourceTypeList = ref([])
@@ -392,6 +397,7 @@ const filteredDatabases = computed(() => {
   })
 })
 
+
 const selectedDbDetails = computed(() => {
   return allDatabases.value.filter(db => selectedDbs.value.includes(db.tid))
 })
@@ -421,16 +427,24 @@ const allSchemasCompute = computed(() => {
 
 const allSchemasIndex = ref(0)
 
+// 修改选择数据源的方法
 const selectDataSource = (dbId, index) => {
   selectedDataSource.value = dbId
   allSchemasIndex.value = index
-  selectedSchemas.value = []
   
-  allSchemasCompute.value.forEach(element => {
-    if(schemalist.value.find(item => item.schemaname === element.value && (item.osdsid == selectedDbDetails.value[allSchemasIndex.value].tid))){
-      selectedSchemas.value.push(element.value)
+  // 如果是编辑模式，从原始数据中恢复选中的schema
+  if (props.mode === 'edit' && originalSchemalist.value.length > 0) {
+    const dbSchemas = originalSchemalist.value
+      .filter(item => item.osdsid === dbId)
+      .map(item => item.schemaname)
+    
+    // 更新选中状态，但避免重复添加
+    dbSchemas.forEach(schema => {
+      if (!selectedSchemas.value.includes(schema)) {
+        selectedSchemas.value.push(schema)
       }
     })
+  }
 }
 
 const schemalist = ref([])
@@ -528,8 +542,8 @@ const handleNextStep = async () => {
       getAllDataAreaAndRule().then(res => {
         domainGroups.value = res.data
         // 如果是编辑模式，需要处理已选择的规则
-        if (props.mode === 'edit' && formData.value.id) {
-          processAreaAndRuleListForEdit()
+        if (props.mode === 'edit' && areaAndRuleListRead.value.length > 0) {
+          processAreaAndRuleListForEdit(areaAndRuleListRead.value)
         }
       })
     }
@@ -585,7 +599,7 @@ watch(selectedDomains, (newVal) => {
   }
 }, { deep: true })
 
-// 初始化时自动选择第一个数据源
+// 修改数据源监听器，确保编辑模式下正确显示schema
 watch(selectedDbDetails, async (newVal, oldVal) => {
   if(newVal.length > 0) {
     if(JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
@@ -595,9 +609,29 @@ watch(selectedDbDetails, async (newVal, oldVal) => {
     if(!selectedDataSource.value) {
       selectedDataSource.value = newVal[0].tid
     }
+    
+    // 如果是编辑模式且有schema数据，确保正确回显
+    if (props.mode === 'edit' && originalSchemalist.value.length > 0) {
+      processSchemalistForEdit(originalSchemalist.value)
+    }
   }
 }, { immediate: true })
 
+
+// 在第三步激活时确保数据正确加载
+watch(activeStep, (newVal) => {
+  if (newVal === 3) {
+    // 第三步激活时，确保schema数据正确加载
+    if (props.mode === 'edit' && originalSchemalist.value.length > 0) {
+      setTimeout(() => {
+        processSchemalistForEdit(originalSchemalist.value)
+      }, 300)
+    }
+  }
+})
+
+
+
 const fetchAllSchemas = async (databases) => {
   try {
     allSchemas.value = []
@@ -633,13 +667,8 @@ const fetchAllSchemas = async (databases) => {
   }
 }
 
-// 处理数据域和规则数据（编辑模式专用）
-const processAreaAndRuleListForEdit = () => {
-  // 这里需要根据实际情况获取项目详情中的 areaAndRuleList
-  // 假设我们已经有了 areaAndRuleList 数据
-  const areaAndRuleList = areaAndRuleListRead.value
-  console.log('======',)
-  
+// 修改处理数据域和规则的方法
+const processAreaAndRuleListForEdit = (areaAndRuleList) => {
   if (!areaAndRuleList || !Array.isArray(areaAndRuleList)) {
     console.warn('areaAndRuleList为空或不是数组')
     selectedDomains.value = []
@@ -648,40 +677,55 @@ const processAreaAndRuleListForEdit = () => {
   
   console.log('接口返回的areaAndRuleList:', areaAndRuleList)
   
-  // 处理已选择的规则
-  const selectedRuleIds = []
+  // 提取所有规则ID
+  const selectedRuleIds = areaAndRuleList
+    .filter(item => item && item.rule_id)
+    .map(item => item.rule_id)
   
-  // 遍历所有数据域分组和规则，找到匹配的规则
-  console.log('domainGroups',domainGroups.value)
+  console.log('已选择的规则ID:', selectedRuleIds)
   
+  // 设置已选择的规则
+  selectedDomains.value = selectedRuleIds
   
-  domainGroups.value.forEach(group => {
-    group.list.forEach(rule => {
-      // 检查这个规则是否在已选择的列表中
-      const isSelected = areaAndRuleList.some(item => 
-        item && item.dataarea_id === group.id && item.rule_id === rule.id
-      )
-      
-      if (isSelected && rule.id) {
-        selectedRuleIds.push(rule.id)
-      }
-    })
+  // 更新分组全选状态
+  updateGroupSelectionStates()
+}
+// 更新分组选择状态
+const updateGroupSelectionStates = () => {
+  if (domainGroups.value.length === 0) return
   
-    // 检查是否全选
+  domainGroups.value.forEach(group => {
     const groupRuleIds = group.list.map(rule => rule.id).filter(Boolean)
-    const selectedInGroup = selectedRuleIds.filter(id => groupRuleIds.includes(id))
+    const selectedInGroup = selectedDomains.value.filter(id => 
+      groupRuleIds.includes(id)
+    )
     group.selectedAll = selectedInGroup.length === groupRuleIds.length && groupRuleIds.length > 0
   })
-  
-  // 设置已选择的规则
-  selectedDomains.value = selectedRuleIds.filter(Boolean)
-  console.log('已选择的规则ID:', selectedDomains.value)
-  
-  if (selectedDomains.value.length === 0) {
-    console.warn('没有找到任何已选择的规则')
+}
+// 在脚本部分添加这个函数
+const isDomainSelected = (domainId) => {
+  return selectedDomains.value.includes(domainId)
+}
+// 监听数据域分组变化，当分组加载完成后更新选择状态
+watch(domainGroups, (newGroups) => {
+  if (newGroups.length > 0 && props.mode === 'edit' && areaAndRuleListRead.value.length > 0) {
+    // 延迟处理以确保DOM已渲染
+    setTimeout(() => {
+      processAreaAndRuleListForEdit(areaAndRuleListRead.value)
+    }, 100)
   }
+})
+watch(selectedDomains, () => {
+  updateGroupSelectionStates()
+}, { deep: true })
+// 查找规则所属分组名称
+const findDomainGroupName = (domainId) => {
+  for (const group of domainGroups.value) {
+    const found = group.list.find(domain => domain.id === domainId)
+    if (found) return group.dataarea
+  }
+  return null
 }
-
 // 处理Schema数据
 const processSchemaList = (schemaList) => {
   if (!schemaList || !Array.isArray(schemaList)) return
@@ -700,11 +744,12 @@ const handlechangeSelectDomains = (val)=>{
   console.log('selectedDomains.value',selectedDomains.value)
 }
 
-
+const originalSchemalist = ref([])
 const areaAndRuleListRead = ref([])
 // 监听传入的项目数据变化
+// 修改监听项目数据变化的逻辑
 watch(() => props.projectData, (newVal) => {
-  if (props.mode === 'edit') {
+  if (props.mode === 'edit' && newVal.id) {
     formData.value = { ...newVal }
     
     getDataProjectDetail({projectId: newVal.id}).then(res => { 
@@ -714,32 +759,72 @@ watch(() => props.projectData, (newVal) => {
 
         formData.value.name = data.project.project
         formData.value.remark = data.project.note
+        
+        // 设置数据源
         selectedDbs.value = data.dataSourceIdList.map(item => item.systemsource_id)
-        selectedDomains.value = data.areaAndRuleList.map(item=> item.rule_id)
-        console.log('selectedDomains.value',selectedDomains.value)
-        // 处理Schema数据
-        // processSchemaList(data.schemalist)
         
-        // 处理数据域和规则数据 - 关键修复
+        // 保存原始schemalist数据
+        originalSchemalist.value = data.schemalist || []
+        areaAndRuleListRead.value = data.areaAndRuleList || []
+        
+      // 处理数据域和规则数据
         if (data.areaAndRuleList && data.areaAndRuleList.length > 0) {
-          // 保存areaAndRuleList供后续使用
+          formData.value.areaAndRuleList = data.areaAndRuleList
+          // 先获取所有数据域和规则
+          getAllDataAreaAndRule().then(domainRes => {
+            domainGroups.value = domainRes.data
+            // 处理已选择的规则
+            processAreaAndRuleListForEdit(data.areaAndRuleList)
+          })
+        }
         
-          areaAndRuleListRead.value = data.areaAndRuleList
-          // 在第四步加载时处理规则选择
-          // if (activeStep.value === 4) {
-          //   processAreaAndRuleListForEdit()
-          //     formData.value.areaAndRuleList = data.areaAndRuleList
-          // }
+        // 如果是编辑模式，需要处理已选择的schema
+        if (props.mode === 'edit' && originalSchemalist.value.length > 0) {
+          processSchemalistForEdit(originalSchemalist.value)
         }
       } else {
         ElMessage.error(res.msg)
       }
     }).catch(err => {
-      console.log(err)
       ElMessage.error(err.msg)
     })
   }
 }, { immediate: true, deep: true })
+// 添加处理编辑模式schema的方法
+const processSchemalistForEdit = (schemalist) => {
+  if (!schemalist || !Array.isArray(schemalist)) return
+  
+  // 延迟处理以确保DOM已更新
+  setTimeout(() => {
+    // 清空当前选中的schema
+    selectedSchemas.value = []
+    schemalist.value = []
+    
+    // 根据原始数据设置选中的schema
+    schemalist.forEach(item => {
+      if (item.schemaname && !selectedSchemas.value.includes(item.schemaname)) {
+        selectedSchemas.value.push(item.schemaname)
+        
+        // 找到对应的数据源
+        const db = selectedDbDetails.value.find(db => db.tid === item.osdsid)
+        if (db) {
+          schemalist.value.push({
+            schemaname: item.schemaname,
+            dbtype: item.dbtype,
+            osdsid: item.osdsid
+          })
+        }
+      }
+    })
+    
+    console.log('编辑模式Schema处理完成:', selectedSchemas.value)
+  }, 500)
+}
+// 添加检查schema是否选中的方法
+const isSchemaSelected = (schemaValue) => {
+  return selectedSchemas.value.includes(schemaValue)
+}
+
 </script>
 <style scoped>
 .dialog-content {