Merge branch 'projectAddEdit_njh'

src/views/project/Project/ProjectEditDialog.vue

@@ -52,7 +52,6 @@
           <div class="filter-container">
             <el-select v-model="dbFilter.type" placeholder="请选择" class="filter-select" @change="selectChangeSql">
               <el-option v-for="(item,index) in sourceTypeList" :key="index" :label="item.text" :value="item.text" />
-              
             </el-select>
             
             <el-input
@@ -71,20 +70,23 @@
             <!-- 左侧可选数据库 -->
             <div class="db-list">
               <div class="db-list-header">
-                <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
+                <span>可选择数据源(数据库)</span>
               </div>
               <el-scrollbar height="300px">
-                <el-checkbox-group v-model="selectedDbs">
-                  <div
-                    v-for="db in filteredDatabases"
-                    :key="db.id"
-                    class="db-item"
-                  >
-                    <el-checkbox :value="db.tid">
-                      {{ db.sysname }}
-                    </el-checkbox>
+                <div
+                  v-for="db in availableDatabases"
+                  :key="db.tid"
+                  class="db-item"
+                  @click="selectDatabase(db)"
+                >
+                  <!-- <div class="db-checkbox">
+                    <el-checkbox :model-value="isDatabaseSelected(db.tid)" @click.stop />
+                  </div> -->
+                  <div class="db-info">
+                    <div class="db-name">{{ db.sysname }}</div>
+                    <div class="db-type">{{ db.dbtype }}</div>
                   </div>
-                </el-checkbox-group>
+                </div>
               </el-scrollbar>
             </div>
 
@@ -92,17 +94,19 @@
             <div class="db-list selected">
               <div class="db-list-header">
                 <span>已选择数据源(数据库)</span>
-                <el-button type="text" @click="handleClearSelected">清空</el-button>
+                <span style="color: #2d8cf0;" @click="handleClearSelected">清空</span>
+               
               </div>
               <el-scrollbar height="300px">
                 <div
                   v-for="db in selectedDbDetails"
                   :key="db.tid"
                   class="selected-db-item"
+                  @click="deselectDatabase(db)"
                 >
                   <div class="db-name">{{ db.sysname }}</div>
-                  <div class="db-ip">{{ db.dbip }}</div>
-                  <div class="db-username">{{ db.username }}</div>
+                  <!-- <div class="db-ip">{{ db.dbip }}</div> -->
+                  <div class="db-type">{{ db.dbtype }}</div>
                 </div>
               </el-scrollbar>
             </div>
@@ -257,8 +261,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import { ElMessageBox } from 'element-plus'
-import { ElMessage } from 'element-plus'
+import { ElMessageBox, ElMessage } from 'element-plus'
 import { Search } from '@element-plus/icons-vue'
 import {
   getdatascopeprojectlist,
@@ -342,7 +345,7 @@ const reset = () => {
   activeStep.value = 1
   dbFilter.value.type = ''
   dbFilter.value.keyword = ''
-  allDatabases.value = []
+  // allDatabases.value = []
   selectedDbs.value = []
   allSchemasIndex.value = 0
 }
@@ -378,11 +381,62 @@ const dbFilter = ref({
   type: '',
   keyword: ''
 })
-
-const allDatabases = ref([])
-const selectedDbs = ref([])
+const selectedDbDetails = ref([])
+// 定义数据源相关变量
+const availableDatabases = ref([]) // queryByEditSort返回的未选择数据源
+const selectedDbs = ref([]) // 当前选择的数据库ID列表
 const selectAll = ref(false)
 
+
+
+// 计算属性：过滤后的可选数据库（排除已选择的）
+const filteredAvailableDatabases = computed(() => {
+  return availableDatabases.value.filter(db => 
+    !selectedDbs.value.includes(db.tid)
+  )
+})
+// 计算属性：已选择的数据源详情
+// const selectedDbDetails = computed(() => {
+//   // 从所有数据源中找出已选择的
+//   return availableDatabases.value.filter(db => 
+//     selectedDbs.value.includes(db.tid)
+//   )
+// })
+// 检查数据库是否已选择
+const isDatabaseSelected = (dbId) => {
+  return selectedDbs.value.includes(dbId)
+}
+// 选择数据库（点击左侧）
+const selectDatabase = (item) => {
+  if (!selectedDbs.value.includes(item.tid)) {
+    let index = availableDatabases.value.findIndex(x => x.tid === item.tid)
+    availableDatabases.value.splice(index,1)
+    selectedDbs.value.push(item.tid)
+    selectedDbDetails.value.push(item)
+  
+
+  }
+}
+// 取消选择数据库（点击右侧）
+const deselectDatabase = (db) => {
+  const index = selectedDbs.value.indexOf(db.tid)
+  if (index > -1) {
+    selectedDbs.value.splice(index, 1)
+    selectedDbDetails.value.splice(index, 1)
+    availableDatabases.value.push(db)
+
+  }
+}
+
+
+// 清空选择
+const handleClearSelected = () => {
+  availableDatabases.value = selectedDbDetails.value
+  selectedDbs.value = []
+  selectAll.value = false
+}
+
+
 // 第三步：Schema选择相关
 const selectedDataSource = ref(null)
 const allSchemas = ref([])
@@ -394,36 +448,26 @@ const domainGroups = ref([])
 const selectedDomains = ref([])
 
 // 计算属性
-const filteredDatabases = computed(() => {
-  return allDatabases.value.filter(db => {
-    const keywordMatch = db.sysname.includes(dbFilter.value.keyword)
-    return keywordMatch
-  })
-})
+// const filteredDatabases = computed(() => {
+//   return allDatabases.value.filter(db => {
+//     const keywordMatch = db.sysname.includes(dbFilter.value.keyword)
+//     return keywordMatch
+//   })
+// })
+
 
 
-const selectedDbDetails = computed(() => {
-  return allDatabases.value.filter(db => selectedDbs.value.includes(db.tid))
-})
 
 const selectedDomainDetails = computed(() => {
   const allDomains = domainGroups.value.flatMap(group => group.list)
   return allDomains.filter(domain => selectedDomains.value.includes(domain.id))
 })
 
-// 方法
-const handleSelectAll = (val) => {
-  if (val) {
-    selectedDbs.value = filteredDatabases.value.map(db => db.tid)
-  } else {
-    selectedDbs.value = []
-  }
-}
 
-const handleClearSelected = () => {
-  selectedDbs.value = []
-  selectAll.value = false
-}
+// const handleClearSelected = () => {
+//   selectedDbs.value = []
+//   selectAll.value = false
+// }
 
 const allSchemasCompute = computed(() => {
   return allSchemas.value[allSchemasIndex.value]
@@ -495,6 +539,7 @@ const loginUser = {
     username: appStore.userInfo.user.username
   }
 } 
+// 修改数据库类型变化时的处理
 const selectChangeSql = () => {
   queryByEditSort({
     projectId: formData.value.id || '',
@@ -502,9 +547,10 @@ const selectChangeSql = () => {
     loginUser: loginUser,
     flag: 1
   }).then(res => {
-    allDatabases.value = res.data
+    availableDatabases.value = res.data
   })
 }
+
 const basicInfoFormRef = ref(null)
 const handleNextStep = async () => {
   if (activeStep.value === 1) {
@@ -529,7 +575,7 @@ const handleNextStep = async () => {
                 loginUser: loginUser,
                 flag: 1
               }).then(res => {
-                allDatabases.value = res.data
+                availableDatabases.value = res.data
               })
             }
           } else {
@@ -632,10 +678,10 @@ const handleClose = (done) => {
   })
 }
 
-// 监听数据变化
-watch(selectedDbs, (newVal) => {
-  selectAll.value = newVal.length > 0 && newVal.length === allDatabases.value.length
-})
+// // 监听数据变化
+// watch(selectedDbs, (newVal) => {
+//   selectAll.value = newVal.length > 0 && newVal.length === allDatabases.value.length
+// })
 
 watch(selectedDomains, (newVal) => {
   if(domainGroups.value.length > 0) {
@@ -807,25 +853,45 @@ 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)
+        // 设置已选择的数据源详情
         
+        // 设置当前选择的数据库ID
+        selectedDbs.value = data.dataSourceIdList.map(item => item.systemsource_id)
         // 保存原始schemalist数据
         originalSchemalist.value = data.schemalist || []
         areaAndRuleListRead.value = data.areaAndRuleList || []
+
+
+
+        if(data.dataSourceIdList && data.dataSourceIdList.length > 0){
+          selectedDbDetails.value = data.dataSourceIdList.map(item =>(({
+            ...item,
+            tid: item.systemsource_id,
+            dbtype: item.dbtype,
+            sysname:item.sysname
+          })))
+        }
+        
+       /// 加载可选数据源
+        queryByEditSort({
+          projectId: formData.value.id || '',
+          dbtype: dbFilter.value.type,
+          loginUser: loginUser,
+          flag: 1
+        }).then(res => {
+          availableDatabases.value = res.data
+        })
         
-      // 处理数据域和规则数据
+        // 处理数据域和规则数据
         if (data.areaAndRuleList && data.areaAndRuleList.length > 0) {
           formData.value.areaAndRuleList = data.areaAndRuleList
-          // 先获取所有数据域和规则
           getAllDataAreaAndRule().then(domainRes => {
             domainGroups.value = domainRes.data
-            // 处理已选择的规则
             processAreaAndRuleListForEdit(data.areaAndRuleList)
           })
         }
         
-        // 如果是编辑模式，需要处理已选择的schema
+        // 处理已选择的schema
         if (props.mode === 'edit' && originalSchemalist.value.length > 0) {
           processSchemalistForEdit(originalSchemalist.value)
         }