Skip to content

N
nse-ui
Commit edbc8bba by ningjihai
Options

项目管理 回显问题

parent ff6c8d66
正在显示 包含 153 行增加 和 68 行删除
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 {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论