JG-BASE-SERVICE-WEB/index.vue

<template>
    <div class="page1">
        <div class="header">
            <el-form :model="filterForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="测试类型" prop="type">
                            <el-select v-model="filterForm.type" placeholder="请选择">
                                <el-option label="类型一" value="shanghai"></el-option>
                                <el-option label="类型二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="产品" prop="production">
                            <el-select v-model="filterForm.production" placeholder="请选择">
                                <el-option label="产品一" value="shanghai"></el-option>
                                <el-option label="产品二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
        </div>
        <div class="main">
            <div class="left">
                <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </div>
            <div class="right">
                <div class="page">

                </div>
                <div class="blockly">

                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    data() {
        return {
            filterForm: {} as any,
            treeData: [{
                label: '仪器',
                children: [{
                    label: '仪器1',
                }, {
                    label: '仪器2',
                }]
            }, {
                label: '基础',
                children: [{
                    label: '循环',
                }, {
                    label: '大于',
                }]
            }, {
                label: '测试项目',
                children: [{
                    label: '循环',
                }, {
                    label: '大于',
                }]
            }, {
                label: '连接',
                children: [{
                    label: '循环',
                }, {
                    label: '大于',
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    methods: {
        handleNodeClick() {

        }
    }
}
</script>
<style lang="scss">
.page1 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    height: 40px;
    padding: 12px 0;
    background-color: #f1f0ee;
}

.main {
    display: flex;
    flex: 1;
    width: 100%;

    .left {
        width: 200px;
        border-right: 1px solid #c0ccdc;
    }

    .right {
        display: flex;

        .page {
            width: 600px;
            border-right: 1px solid #c0ccdc;
        }
    }
}
</style>