index.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <div class="page1">
  3. <div class="header">
  4. <el-form :model="filterForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  5. <el-row>
  6. <el-col :span="8">
  7. <el-form-item label="测试类型" prop="type">
  8. <el-select v-model="filterForm.type" placeholder="请选择">
  9. <el-option label="类型一" value="shanghai"></el-option>
  10. <el-option label="类型二" value="beijing"></el-option>
  11. </el-select>
  12. </el-form-item>
  13. </el-col>
  14. <el-col :span="8">
  15. <el-form-item label="产品" prop="production">
  16. <el-select v-model="filterForm.production" placeholder="请选择">
  17. <el-option label="产品一" value="shanghai"></el-option>
  18. <el-option label="产品二" value="beijing"></el-option>
  19. </el-select>
  20. </el-form-item>
  21. </el-col>
  22. </el-row>
  23. </el-form>
  24. </div>
  25. <div class="main">
  26. <div class="left">
  27. <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  28. </div>
  29. <div class="right">
  30. <div class="page">
  31. </div>
  32. <div class="blockly">
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. </template>
  38. <script lang="ts">
  39. export default {
  40. data() {
  41. return {
  42. filterForm: {} as any,
  43. treeData: [{
  44. label: '仪器',
  45. children: [{
  46. label: '仪器1',
  47. }, {
  48. label: '仪器2',
  49. }]
  50. }, {
  51. label: '基础',
  52. children: [{
  53. label: '循环',
  54. }, {
  55. label: '大于',
  56. }]
  57. }, {
  58. label: '测试项目',
  59. children: [{
  60. label: '循环',
  61. }, {
  62. label: '大于',
  63. }]
  64. }, {
  65. label: '连接',
  66. children: [{
  67. label: '循环',
  68. }, {
  69. label: '大于',
  70. }]
  71. }],
  72. defaultProps: {
  73. children: 'children',
  74. label: 'label'
  75. }
  76. }
  77. },
  78. methods: {
  79. handleNodeClick() {
  80. }
  81. }
  82. }
  83. </script>
  84. <style lang="scss">
  85. .page1 {
  86. height: 100%;
  87. display: flex;
  88. flex-direction: column;
  89. }
  90. .header {
  91. height: 40px;
  92. padding: 12px 0;
  93. background-color: #f1f0ee;
  94. }
  95. .main {
  96. display: flex;
  97. flex: 1;
  98. width: 100%;
  99. .left {
  100. width: 200px;
  101. border-right: 1px solid #c0ccdc;
  102. }
  103. .right {
  104. display: flex;
  105. .page {
  106. width: 600px;
  107. border-right: 1px solid #c0ccdc;
  108. }
  109. }
  110. }
  111. </style>