Skip to content

N
nse-ui
Commit e73dda55 by ningjihai
Options

项目新增和编辑

parent 9b62e3e0
正在显示 包含 181 行增加 和 623 行删除
src/views/project/Project/ProjectEditDialog.vue
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
<el-input <el-input
v-model="formData.name" v-model="formData.name"
placeholder="请输入项目名称" placeholder="请输入项目名称"
@blur="validateFormTitle"
/> />
</el-form-item> </el-form-item>
...@@ -49,12 +50,7 @@ ...@@ -49,12 +50,7 @@
/> />
</el-form-item> </el-form-item>
<!-- <el-form-item label="项目类型" prop="projectType">
<el-radio-group v-model="formData.projectType">
<el-radio label="normal">普通项目</el-radio>
<el-radio label="udf">UDF项目</el-radio>
</el-radio-group>
</el-form-item> -->
</el-form> </el-form>
</div> </div>
...@@ -79,9 +75,7 @@ ...@@ -79,9 +75,7 @@
placeholder="请选择数据源" placeholder="请选择数据源"
multiple multiple
@check="handleTreeSelectCheck" @check="handleTreeSelectCheck"
@node-click="handleNodeExpand"
:default-expand-all="false" :default-expand-all="false"
> >
<template #default="{ node, data }"> <template #default="{ node, data }">
<span class="tree-node-label"> <span class="tree-node-label">
...@@ -169,19 +163,14 @@ ...@@ -169,19 +163,14 @@
<template #footer> <template #footer>
<el-button type="primary" color="rgba(33, 103, 217, 1)" @click="handleSubmit">确认</el-button> <el-button type="primary" color="rgba(33, 103, 217, 1)" @click="handleSubmit">确认</el-button>
<el-button type="primary" plain>取消</el-button> <el-button type="primary" plain @click="handleCancle">取消</el-button>
<!-- <span class="dialog-footer">
<el-button @click="handlePrevStep">上一步</el-button>
<el-button type="primary" @click="handleNextStep">
{{ activeStep === 4 ? '完成' : '下一步' }}
</el-button>
</span> -->
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
import { ref, computed, watch } from 'vue' import { ref, computed, watch,nextTick } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus' import { ElMessageBox, ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue' import { Search } from '@element-plus/icons-vue'
import dialogCloseLogo from '@/assets/images/dialogCloseLogo.png' import dialogCloseLogo from '@/assets/images/dialogCloseLogo.png'
...@@ -242,7 +231,8 @@ const initialized = ref(false) ...@@ -242,7 +231,8 @@ const initialized = ref(false)
watch(dialogVisible, (newVal) => { watch(dialogVisible, (newVal) => {
if (newVal && !initialized.value) { if (newVal && !initialized.value) {
// initDialog() // initDialog()
fetchFirstLevelNodes() // fetchFirstLevelNodes()
fetchAllDatabaseNodes()
fetchRules() fetchRules()
} else if (!newVal) { } else if (!newVal) {
initialized.value = false initialized.value = false
...@@ -250,13 +240,19 @@ watch(dialogVisible, (newVal) => { ...@@ -250,13 +240,19 @@ watch(dialogVisible, (newVal) => {
}, { deep: true }) }, { deep: true })
const fetchRules = () => { const fetchRules = () => {
getAllDataAreaAndRule().then(res => { selectedRuleNode.value = []
domainGroups.value = res.data getAllDataAreaAndRule().then(res => {
// 如果是编辑模式，需要处理已选择的规则 domainGroups.value = res.data
if (props.mode === 'edit' && areaAndRuleListRead.value.length > 0) { // 如果是编辑模式，需要处理已选择的规则
processAreaAndRuleListForEdit(areaAndRuleListRead.value) if (props.mode === 'edit' && areaAndRuleListRead.value.length > 0) {
} // processAreaAndRuleListForEdit(areaAndRuleListRead.value)
}) // selectedRuleNode
areaAndRuleListRead.value.forEach(element => {
selectedRuleNode.value.push(element.rule_id)
});
}
})
} }
const treeRuleProps = reactive({ const treeRuleProps = reactive({
label: 'dataarea', label: 'dataarea',
...@@ -288,20 +284,7 @@ const transformedDomainGroups = computed(() => { ...@@ -288,20 +284,7 @@ const transformedDomainGroups = computed(() => {
return transformedGroup; return transformedGroup;
}); });
}); });
// 当对话框显示时执行的函数
const initDialog = () => {
querySelectOrDic()
initialized.value = true
}
const querySelectOrDic = () => {
selectProDataSource({
systemstyle: 1
}).then(res => {
sourceTypeList.value = res.data
dbFilter.value.type = res.data.length > 0 ? res.data[res.data.length - 1].text : ''
})
}
const treeData = ref([]) const treeData = ref([])
const selectedDbNodes = ref([]) const selectedDbNodes = ref([])
const treeProps = ref({ const treeProps = ref({
...@@ -312,82 +295,108 @@ const treeProps = ref({ ...@@ -312,82 +295,108 @@ const treeProps = ref({
// disabled: (data) => !data.tid // 只有二级节点可以选择 // disabled: (data) => !data.tid // 只有二级节点可以选择
}) })
// 获取树形数据 // 获取树形数据
const fetchFirstLevelNodes = async () => {
const fetchAllDatabaseNodes = async () => {
try { try {
// 获取所有一级节点
const typeRes = await selectProDataSource({ const typeRes = await selectProDataSource({
systemstyle: 1 systemstyle: 1
}) })
if (typeRes.flag && typeRes.data) { if (typeRes.flag && typeRes.data) {
treeData.value = typeRes.data.map(item => ({ const firstLevelNodes = typeRes.data.map(item => ({
id: item.value, id: item.value,
tid:item.value, tid: item.value,
text: item.text, text: item.text,
value: item.value, value: item.value,
sysname: item.text, sysname: item.text,
isFirstLevel: true, isFirstLevel: true,
children: [] // 初始化空children，用于懒加载 children: [] // 初始化空children
})).filter(item => item.value !== '0') })).filter(item => item.value !== '0')
}
} catch (error) {
console.error('获取一级节点数据失败:', error)
ElMessage.error('获取数据源类型失败')
}
}
// 处理节点展开事件（懒加载二级节点）
// 处理节点展开事件（懒加载二级节点）
const handleNodeExpand = async (nodeData) => {
console.log('节点展开:', nodeData)
// 只有一级节点需要懒加载，且没有子节点或子节点为空
if (nodeData.isFirstLevel && (!nodeData.children || nodeData.children.length === 0)) {
try {
// 设置加载状态
nodeData.loading = true;
const secondRes = await queryByEditSort({ // 为每个一级节点获取其二级节点
projectId: formData.value.id || '', const allNodes = await Promise.all(
dbtype: nodeData.text, firstLevelNodes.map(async (firstNode) => {
loginUser: loginUser, try {
flag: 1 const secondRes = await queryByEditSort({
}) projectId: '',
dbtype: firstNode.text,
if (secondRes.flag && secondRes.data) { loginUser: loginUser,
// 使用 Vue.set 或创建新对象来确保响应式更新 flag: 1
const newChildren = secondRes.data.map(db => ({ })
...db,
parentName: nodeData.text, if (secondRes.flag && secondRes.data) {
parentId: nodeData.id, firstNode.children = secondRes.data.map(db => ({
text: db.sysname, ...db,
isFirstLevel: false parentName: firstNode.text,
})) parentId: firstNode.id,
text: db.sysname,
// 关键：使用 Vue.set 或创建新数组来触发响应式更新 isFirstLevel: false
if (!nodeData.children) { }))
nodeData.children = newChildren; }
} else {
nodeData.children.splice(0, nodeData.children.length, ...newChildren); return firstNode
} } catch (error) {
console.error(`获取 ${firstNode.text} 的二级节点失败:`, error)
// 强制更新树数据（创建新数组引用） return firstNode
treeData.value = [...treeData.value]
// 手动触发节点展开
nextTick(() => {
const treeInstance = treeSelectRef.value;
if (treeInstance && treeInstance.expandNode) {
treeInstance.expandNode(nodeData, true);
} }
}); })
)
treeData.value = allNodes
console.log('treeData',treeData.value)
if(props.mode === 'edit' && selectedDbNodes.value){
selectedSchemas.value = []
nextTick(() =>{
if(treeSelectRef.value){
treeSelectRef.value.setCheckedKeys(selectedDbNodes.value)
selectedDbDetails.value = treeSelectRef.value.getCheckedNodes()
console.log('selectedDbDetails',selectedDbDetails.value)
fetchAllSchemas(selectedDbDetails.value)
console.log('editschemalist',editschemalist.value)
for (let index = 0; index < selectedDbDetails.value.length; index++) {
let tid = selectedDbDetails.value[index].tid
let list = editschemalist.value.filter(item =>item.osdsid === tid)
console.log('list',list)
let nameList = []
list.forEach(element => {
nameList.push(element.schemaname)
});
console.log('nameList',nameList)
if(nameList.length){
selectedSchemas.value.push(nameList)
}
}
if(selectedSchemas.value.length > 0){
selectChangeSchema()
}
console.log('selectedSchemas',selectedSchemas.value)
// editschemalist
}
})
// selectedDbDetails.value = treeSelectRef.value.getCheckedNodes()
// console.log('=====',selectedDbDetails.value)
// fetchAllSchemas(selectedDbDetails.value)
} }
} catch (error) {
console.error(`获取 ${nodeData.text} 的二级节点失败:`, error)
ElMessage.error(`获取 ${nodeData.text} 的数据源失败`)
} finally {
nodeData.loading = false;
} }
} catch (error) {
console.error('获取数据库节点数据失败:', error)
ElMessage.error('获取数据库节点数据失败')
} }
} }
const treeSelectRef = ref(null) const treeSelectRef = ref(null)
// 处理树选择变化 // 处理树选择变化
const handleTreeSelectCheck = (checkedNode, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) => { const handleTreeSelectCheck = (checkedNode, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) => {
...@@ -404,29 +413,14 @@ const handleTreeSelectCheck = (checkedNode, { checkedNodes, checkedKeys, halfChe ...@@ -404,29 +413,14 @@ const handleTreeSelectCheck = (checkedNode, { checkedNodes, checkedKeys, halfChe
}; };
watch(selectedDbNodes, (newVal) => { watch(selectedDbNodes, (newVal) => {
console.log('getCheckedNodes',treeSelectRef.value.getCheckedNodes())
console.log('节点监听器',selectedDbNodes.value)
if(newVal) { if(newVal) {
selectedDbDetails.value = treeSelectRef.value.getCheckedNodes() selectedDbDetails.value = treeSelectRef.value.getCheckedNodes()
fetchAllSchemas(selectedDbDetails.value) fetchAllSchemas(selectedDbDetails.value)
} }
}, { deep: true }) }, { deep: true })
// // 移除已选数据源
// const removeSelectedDb = (db) => {
// const index = selectedDbDetails.value.findIndex(item => item.tid === db.tid)
// if (index > -1) {
// selectedDbDetails.value.splice(index, 1)
// selectedDbNodes.value = selectedDbDetails.value.map(db => db.tid)
// // 从树选择器中移除
// const treeSelectRef = document.querySelector('.el-tree-select')
// if (treeSelectRef) {
// const selectedValues = selectedDbNodes.value
// // 这里需要根据实际情况更新树选择器的值
// }
// }
// }
// 过滤节点 // 过滤节点
const filterNode = (value, data) => { const filterNode = (value, data) => {
if (!value) return true if (!value) return true
...@@ -435,44 +429,14 @@ const filterNode = (value, data) => { ...@@ -435,44 +429,14 @@ const filterNode = (value, data) => {
} }
// 获取显示名称（一级节点/二级节点）
const getDbDisplayName = (db) => {
return `${db.parentName} / ${db.sysname}`
}
// 自定义节点样式 - 隐藏一级节点的checkbox
const customNodeClass = (data) => {
return data.isFirstLevel ? 'first-level-node' : 'second-level-node'
}
// // 在对话框显示时加载数据
// watch(dialogVisible, (newVal) => {
// if (newVal) {
// setTimeout(() => {
// fetchTreeData()
// }, 1000);
// }
// })
const reset = () => { const reset = () => {
sourceTypeList.value = [] sourceTypeList.value = []
formData.value = {} formData.value = {}
activeStep.value = 1
dbFilter.value.type = '' dbFilter.value.type = ''
dbFilter.value.keyword = '' dbFilter.value.keyword = ''
// allDatabases.value = []
selectedDbs.value = [] selectedDbs.value = []
allSchemasIndex.value = 0
} }
const sourceTypeList = ref([]) const sourceTypeList = ref([])
...@@ -487,14 +451,6 @@ const formData = ref({ ...@@ -487,14 +451,6 @@ const formData = ref({
domains: [], domains: [],
}) })
// 步骤条相关
const activeStep = ref(1)
const stepTitles = ref([
'基本信息',
'数据源配置',
'Schema选择',
'数据域选择'
])
// 弹窗标题 // 弹窗标题
const dialogTitle = computed(() => { const dialogTitle = computed(() => {
...@@ -510,139 +466,20 @@ const selectedDbDetails = ref([]) ...@@ -510,139 +466,20 @@ const selectedDbDetails = ref([])
// 定义数据源相关变量 // 定义数据源相关变量
const availableDatabases = ref([]) // queryByEditSort返回的未选择数据源 const availableDatabases = ref([]) // queryByEditSort返回的未选择数据源
const selectedDbs = ref([]) // 当前选择的数据库ID列表 const selectedDbs = ref([]) // 当前选择的数据库ID列表
const selectAll = ref(false)
// 计算属性：过滤后的可选数据库（排除已选择的）
const filteredAvailableDatabases = computed(() => {
return availableDatabases.value.filter(db =>
!selectedDbs.value.includes(db.tid) &&
db.sysname.toLowerCase().includes(dbFilter.value.keyword.toLowerCase())
)
})
// 计算属性：已选择的数据源详情
// 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 = [...availableDatabases.value,...selectedDbDetails.value]
selectedDbDetails.value = []
selectedDbs.value = []
selectAll.value = false
}
// 第三步：Schema选择相关
const selectedDataSource = ref(null)
const allSchemas = ref([]) const allSchemas = ref([])
const selectedSchemas = ref([]) const selectedSchemas = ref([])
const selectAllSchemas = ref(false)
// 第四步：数据域选择相关 // 第四步：数据域选择相关
const domainGroups = ref([]) 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 selectedDomainDetails = computed(() => {
const allDomains = domainGroups.value.flatMap(group => group.list)
return allDomains.filter(domain => selectedDomains.value.includes(domain.id))
})
// const handleClearSelected = () => {
// selectedDbs.value = []
// selectAll.value = false
// }
const allSchemasCompute = computed(() => {
return allSchemas.value[allSchemasIndex.value]
})
const allSchemasIndex = ref(0)
// 修改选择数据源的方法
const selectDataSource = (dbId, index) => {
selectedDataSource.value = dbId
allSchemasIndex.value = index
// 如果是编辑模式，从原始数据中恢复选中的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([]) const schemalist = ref([])
const schemaChange = () => {
selectedSchemas.value.forEach(element => {
let data = {
schemaname: element,
dbtype: selectedDbDetails.value[allSchemasIndex.value].dbtype,
osdsid: selectedDbDetails.value[allSchemasIndex.value].tid,
}
schemalist.value.push(data)
})
}
// 上一步
const handlePrevStep = () => {
if (activeStep.value > 1) {
activeStep.value--
}
}
const loginUser = { const loginUser = {
tsysUser: { tsysUser: {
...@@ -650,123 +487,10 @@ const loginUser = { ...@@ -650,123 +487,10 @@ const loginUser = {
username: appStore.userInfo.user.username username: appStore.userInfo.user.username
} }
} }
// 修改数据库类型变化时的处理
const selectChangeSql = () => {
queryByEditSort({
projectId: formData.value.id || '',
dbtype: dbFilter.value.type,
loginUser: loginUser,
flag: 1
}).then(res => {
availableDatabases.value = res.data
})
}
const basicInfoFormRef = ref(null)
const handleNextStep = async () => {
if (activeStep.value === 1) {
try {
if(!formData.value.name || formData.value.name === ''){
ElMessage({
message: '请填写项目名称',
type: 'warning',
})
return
}
const response = await validateStep1()
if (response.flag === true) {
checkDatasystem().then(res => {
if (res.flag === true) {
activeStep.value++
if(activeStep.value === 2) {
queryByEditSort({
projectId: formData.value.id || '',
dbtype: dbFilter.value.type,
loginUser: loginUser,
flag: 1
}).then(res => {
availableDatabases.value = res.data
})
}
} else {
ElMessage.error(res.msg)
}
}).catch(err => {
ElMessage.error(err.msg)
})
} else {
ElMessage.error(response.msg || '第一步验证失败')
return
}
} catch (error) {
// console.error('第一步验证接口调用失败:', error)
// ElMessage.error('网络错误，请稍后重试')
return
}
} else if (activeStep.value < 4) {
if(activeStep.value === 2){
console.log('selectedDbs.value',selectedDbs.value)
if(selectedDbs.value.length === 0 || selectedDbDetails.value.length === 0){
ElMessage({
message: '请选择数据源',
type: 'warning',
})
return
}
}
const basicInfoFormRef = ref(null)
if(activeStep.value === 3){
if(selectedSchemas.value.length === 0) {
ElMessage({
message: '请选择SCHEMA',
type: 'warning',
})
return
}
}
activeStep.value++
if (activeStep.value === 4) {
// 在第四步加载数据域和规则
getAllDataAreaAndRule().then(res => {
domainGroups.value = res.data
// 如果是编辑模式，需要处理已选择的规则
if (props.mode === 'edit' && areaAndRuleListRead.value.length > 0) {
processAreaAndRuleListForEdit(areaAndRuleListRead.value)
}
})
}
} else {
if(selectedDomains.value.length === 0){
ElMessage({
message: '请选择规则',
type: 'warning',
})
return
}
// 最后一步提交数据
formData.value.databases = selectedDbDetails.value
formData.value.schemas = schemalist.value
formData.value.domains = selectedDomainDetails.value.map(item => ({
dataarea_id: item.dataarea_id,
rule_id: item.id
}))
emit('submit', formData.value)
setTimeout(() => {
reset()
dialogVisible.value = false
}, 300)
}
}
// 第一步验证接口函数 // 第一步验证接口函数
const validateStep1 = async () => { const validateStep1 = async () => {
...@@ -775,6 +499,21 @@ const validateStep1 = async () => { ...@@ -775,6 +499,21 @@ const validateStep1 = async () => {
id: formData.value.id id: formData.value.id
}) })
} }
const validateFormTitle = () =>{
checkDatasystemName({
name: formData.value.name,
id: formData.value.id
}).then(response=>{
if (response.flag !== true){
ElMessage.error(response.msg || '第一步验证失败')
return
}
})
}
const handleSubmit = async ()=> { const handleSubmit = async ()=> {
if(!formData.value.name || formData.value.name === ''){ if(!formData.value.name || formData.value.name === ''){
ElMessage.warning('请输入项目名称') ElMessage.warning('请输入项目名称')
...@@ -853,6 +592,19 @@ const closeDialog = () => { ...@@ -853,6 +592,19 @@ const closeDialog = () => {
}) })
} }
const handleCancle = () =>{
ElMessageBox.confirm('确定要取消吗？未保存的更改将会丢失', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(() => {
dialogVisible.value = false
reset()
done()
}).catch(() => {
// 取消关闭
})
}
// 关闭前处理 // 关闭前处理
const handleClose = (done) => { const handleClose = (done) => {
ElMessageBox.confirm('确定要关闭吗？未保存的更改将会丢失', '提示', { ElMessageBox.confirm('确定要关闭吗？未保存的更改将会丢失', '提示', {
...@@ -866,58 +618,6 @@ const handleClose = (done) => { ...@@ -866,58 +618,6 @@ const handleClose = (done) => {
}) })
} }
// // 监听数据变化
// watch(selectedDbs, (newVal) => {
// selectAll.value = newVal.length > 0 && newVal.length === allDatabases.value.length
// })
watch(selectedDomains, (newVal) => {
if(domainGroups.value.length > 0) {
domainGroups.value.forEach(group => {
const groupDomainIds = group.list.map(d => d.id)
group.selectedAll = groupDomainIds.every(id => newVal.includes(id))
})
}
}, { deep: true })
// // 修改数据源监听器，确保编辑模式下正确显示schema
// watch(selectedDbDetails.value, async (newVal, oldVal) => {
// console.log('数据源监听器')
// if(newVal.length > 0) {
// console.log('数据源监听器2')
// console.log(newVal)
// console.log(oldVal)
// if(JSON.stringify(newVal)) {
// console.log('数据源监听器3')
// await fetchAllSchemas(newVal)
// }
// 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) => { const fetchAllSchemas = async (databases) => {
try { try {
allSchemas.value = [] allSchemas.value = []
...@@ -968,88 +668,8 @@ const selectChangeSchema = async () => { ...@@ -968,88 +668,8 @@ const selectChangeSchema = async () => {
console.log(list) console.log(list)
schemalist.value = list schemalist.value = list
} }
const editschemalist = ref([])
// 修改处理数据域和规则的方法
const processAreaAndRuleListForEdit = (areaAndRuleList) => {
if (!areaAndRuleList || !Array.isArray(areaAndRuleList)) {
console.warn('areaAndRuleList为空或不是数组')
selectedDomains.value = []
return
}
console.log('接口返回的areaAndRuleList:', areaAndRuleList)
// 提取所有规则ID
const selectedRuleIds = areaAndRuleList
.filter(item => item && item.rule_id)
.map(item => item.rule_id)
console.log('已选择的规则ID:', selectedRuleIds)
// 设置已选择的规则
selectedDomains.value = selectedRuleIds
// 更新分组全选状态
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 = selectedDomains.value.filter(id =>
groupRuleIds.includes(id)
)
group.selectedAll = selectedInGroup.length === groupRuleIds.length && groupRuleIds.length > 0
})
}
// 在脚本部分添加这个函数
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
fetchAllSchemas(selectedDbDetails.value).then(() => {
selectedSchemas.value = schemaList.map(item => item.schemaname)
schemalist.value = schemaList.map(item => ({
schemaname: item.schemaname,
dbtype: item.dbtype,
osdsid: item.osdsid
}))
})
}
const handlechangeSelectDomains = (val)=>{
console.log('selectedDomains.value',selectedDomains.value)
}
const originalSchemalist = ref([])
const areaAndRuleListRead = ref([]) const areaAndRuleListRead = ref([])
// 监听传入的项目数据变化
// 修改监听项目数据变化的逻辑
watch(() => props.projectData, (newVal) => { watch(() => props.projectData, (newVal) => {
if (props.mode === 'edit' && newVal.id) { if (props.mode === 'edit' && newVal.id) {
formData.value = { ...newVal } formData.value = { ...newVal }
...@@ -1058,52 +678,26 @@ watch(() => props.projectData, (newVal) => { ...@@ -1058,52 +678,26 @@ watch(() => props.projectData, (newVal) => {
if(res.flag) { if(res.flag) {
let data = res.data let data = res.data
if(!data) return if(!data) return
formData.value.id = data.project.id
formData.value.name = data.project.project formData.value.name = data.project.project
formData.value.remark = data.project.note formData.value.remark = data.project.note
areaAndRuleListRead.value = data.areaAndRuleList
// 设置已选择的数据源详情
// 设置当前选择的数据库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){ if(data.dataSourceIdList && data.dataSourceIdList.length > 0){
selectedDbDetails.value = data.dataSourceIdList.map(item =>(({ let list = []
...item, data.dataSourceIdList.forEach(element => {
tid: item.systemsource_id, list.push(element.systemsource_id)
dbtype: item.dbtype, });
sysname:item.sysname
}))) selectedDbNodes.value = list
}
editschemalist.value = data.schemalist
/// 加载可选数据源 // console.log('selectedDbNodes',selectedDbNodes.value)
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
if (props.mode === 'edit' && originalSchemalist.value.length > 0) {
processSchemalistForEdit(originalSchemalist.value)
} }
} else { } else {
ElMessage.error(res.msg) ElMessage.error(res.msg)
} }
...@@ -1112,42 +706,6 @@ watch(() => props.projectData, (newVal) => { ...@@ -1112,42 +706,6 @@ watch(() => props.projectData, (newVal) => {
}) })
} }
}, { immediate: true, deep: true }) }, { 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)
}
......
src/views/project/Project/list.vue
...@@ -166,37 +166,37 @@ const showAddDialog = () => { ...@@ -166,37 +166,37 @@ const showAddDialog = () => {
// }) // })
currentProject.value = null currentProject.value = null
dialogVisible.value = true dialogVisible.value = true
addLoading.value = false addLoading.value = false
} }
// 处理项目操作 // 处理项目操作
const handleCommandProject = (command, project) => { // const handleCommandProject = (command, project) => {
switch(command) { // switch(command) {
case '1': // 进入 // case '1': // 进入
handleEnterProject(project) // handleEnterProject(project)
break // break
case '2': // 编辑 // case '2': // 编辑
handleEditProject(project) // handleEditProject(project)
break // break
case '3': // 删除 // case '3': // 删除
handleDeleteProject(project) // handleDeleteProject(project)
break // break
case '4': // 导入 // case '4': // 导入
handleImportProject(project) // handleImportProject(project)
break // break
case '5': // 导出 // case '5': // 导出
handleExportProject(project) // handleExportProject(project)
break // break
case '6': // 下载插件 // case '6': // 下载插件
handleDownloadPlugin(project) // handleDownloadPlugin(project)
break // break
default: // default:
console.warn('未知命令:', command) // console.warn('未知命令:', command)
} // }
} // }
// 添加导入相关变量 // 添加导入相关变量
const importDialogVisible = ref(false) const importDialogVisible = ref(false)
const currentImportProjectId = ref('') const currentImportProjectId = ref('')
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论