|
|
|
@ -2,9 +2,7 @@ |
|
|
|
<div class="app-container"> |
|
|
|
<div class="flex w-full h-full"> |
|
|
|
<div class="tree mr-10 card"> |
|
|
|
<el-tree :data="treeList" :props="defaultProps" @node-click="handleNodeClick" :default-expanded-keys="expandedKeys" :default-checked-keys="checkedKeys" :auto-expand-parent="true" |
|
|
|
:expand-on-click-node="false" :highlight-current="true" ref="tree" node-key="deptId" |
|
|
|
:accordion="true"></el-tree> |
|
|
|
<el-tree :data="treeList" :props="defaultProps" @node-click="handleNodeClick"></el-tree> |
|
|
|
</div> |
|
|
|
<div class="card flex-1" style="width: calc(100% - 170px)"> |
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" |
|
|
|
@ -124,7 +122,13 @@ |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-row v-if="form.hire === '2'"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="最大可租住天数" prop="days" > |
|
|
|
<el-input-number v-model="form.days" :min="0" placeholder="请输入建筑面积" style="width: 200px;" :disabled="disabled"/> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row type="flex" style="margin-bottom:10px"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-col :span="6" type="flex" style="text-align:right;margin-right:15px;height: 100%;align-items: center;display: flex;justify-content: end;"> |
|
|
|
@ -235,7 +239,8 @@ export default { |
|
|
|
houseTypeId: null, |
|
|
|
remark: null, |
|
|
|
floor: 0, |
|
|
|
hire:'1', |
|
|
|
hire:'', |
|
|
|
days:null, |
|
|
|
}, |
|
|
|
// 表单校验 |
|
|
|
rules: { |
|
|
|
@ -260,7 +265,9 @@ export default { |
|
|
|
hire: [ |
|
|
|
{ required: true, message: '请选择长租房/短租房', trigger: 'change' } |
|
|
|
], |
|
|
|
|
|
|
|
days: [ |
|
|
|
{ validator: validateDays, trigger: 'blur' } |
|
|
|
], |
|
|
|
}, |
|
|
|
deptList: [], |
|
|
|
defaultProps: { |
|
|
|
@ -273,10 +280,7 @@ export default { |
|
|
|
buildingOption: [], |
|
|
|
unitOptions: [], |
|
|
|
disabled:false, |
|
|
|
treeList:[], |
|
|
|
expandedKeys: [],// 展开的节点的 key 数组 |
|
|
|
checkedKeys: [],// 选中的节点的 key 数组 |
|
|
|
showTree: true, |
|
|
|
treeList:[] |
|
|
|
}; |
|
|
|
}, |
|
|
|
components: { |
|
|
|
@ -374,7 +378,11 @@ export default { |
|
|
|
remark: null, |
|
|
|
floor: 0, |
|
|
|
hire:'1', |
|
|
|
days:null, |
|
|
|
}; |
|
|
|
this.buildingOption = []; |
|
|
|
this.unitOptions = []; |
|
|
|
|
|
|
|
this.resetForm("form"); |
|
|
|
}, |
|
|
|
/** 搜索按钮操作 */ |
|
|
|
@ -488,70 +496,9 @@ export default { |
|
|
|
this.form.unitId = ''; |
|
|
|
this.unitOptions = []; |
|
|
|
await this.getUnitbyBuddingId(this.form.buildingId) |
|
|
|
}, |
|
|
|
// 新增方法：处理树展开逻辑 |
|
|
|
handleExpandTree(apartmentId) { |
|
|
|
if (!apartmentId) return; |
|
|
|
const targetId = Number(apartmentId); |
|
|
|
const findParents = (node, targetId, parents = []) => { |
|
|
|
if (Number(node.deptId) === targetId) { |
|
|
|
return [...parents, node.deptId]; |
|
|
|
} |
|
|
|
if (node.children) { |
|
|
|
for (let child of node.children) { |
|
|
|
const result = findParents(child, targetId, [...parents, node.deptId]); |
|
|
|
if (result) return result; |
|
|
|
} |
|
|
|
} |
|
|
|
return null; |
|
|
|
}; |
|
|
|
|
|
|
|
let path = null; |
|
|
|
for (let node of this.treeList) { |
|
|
|
path = findParents(node, targetId); |
|
|
|
if (path) break; |
|
|
|
} |
|
|
|
|
|
|
|
if (path) { |
|
|
|
// 直接设置展开路径，由于 :accordion="true"，其他节点会自动收起 |
|
|
|
this.expandedKeys = path; |
|
|
|
this.checkedKeys = [path[path.length - 1]]; |
|
|
|
} else { |
|
|
|
console.warn('未找到匹配的节点路径'); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch:{ |
|
|
|
$route: { |
|
|
|
handler: function (newVal, oldVal) { |
|
|
|
if (newVal.query) { |
|
|
|
this.queryParams = { |
|
|
|
...this.queryParams, |
|
|
|
...newVal.query, |
|
|
|
}; |
|
|
|
this.treeList = []; |
|
|
|
this.showTree = false; |
|
|
|
this.$nextTick(() => { |
|
|
|
// 重新渲染 el-tree 实例 |
|
|
|
this.showTree = true; |
|
|
|
this.getList(); |
|
|
|
// 等待 deptList 加载完成 |
|
|
|
if (this.treeList.length === 0) { |
|
|
|
this.getDeptList().then(() => { |
|
|
|
this.handleExpandTree(newVal.query.deptId); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.handleExpandTree(newVal.query.deptId); |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.getDeptList() |
|
|
|
} |
|
|
|
}, |
|
|
|
immediate: true, |
|
|
|
deep: true, |
|
|
|
}, |
|
|
|
} |
|
|
|
watch:{} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
|
