| | |
|---|
| | | import api from '@/api' |
|---|
| | | export default { |
|---|
| | | name: 'TreeManage', |
|---|
| | | props: { |
|---|
| | | treeType: { type: String, required: true } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { tree: [], keyword: '', form: {}, saving: false, baseDevices: [] } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | treeType() { return this.$route.meta.treeType }, |
|---|
| | | isProduct() { return this.treeType === 'product' }, |
|---|
| | | maxLevel() { return this.isProduct ? 5 : 3 }, |
|---|
| | | levelNames() { return this.isProduct ? ['型号', 'X号', '一级系统', '二级系统', '设备'] : ['一级系统', '二级系统', '设备'] } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | keyword(value) { this.$refs.tree && this.$refs.tree.filter(value) }, |
|---|
| | | '$route.meta.treeType'() { this.form = {}; this.load() } |
|---|
| | | treeType() { this.form = {}; this.load() } |
|---|
| | | }, |
|---|
| | | created() { this.load() }, |
|---|
| | | methods: { |
|---|
| | |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | .tree-layout { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 12px; } |
|---|
| | | .tree-panel, .detail-panel { min-height: calc(100vh - 140px); padding: 14px; border: 1px solid #dce4ec; border-radius: 4px; background: #fff; } |
|---|
| | | .tree-panel, .detail-panel { min-height: calc(100vh - 180px); padding: 14px; border: 1px solid #dce4ec; border-radius: 4px; background: #fff; } |
|---|
| | | .tree-node { display: flex; align-items: center; gap: 7px; } |
|---|
| | | .tree-node small { color: #95a2b0; } |
|---|
| | | .level-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 50px; height: 20px; padding: 0 5px; border-radius: 3px; color: #2f658f; background: #e9f3fb; font-size: 11px; } |
|---|
