GDQDDrillingDialog.vue 3.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <div class='gdqd-dialog'>
  3. <div class='top'></div>
  4. <div class='gdqd-dialog-top'>
  5. <Select width='224' tipPlace='top' caption='管理归属' size='small' style='margin-right:12px' :selectdata='dataSelect2' :placeholder='"请选择"'></Select>
  6. <Select width='224' tipPlace='top' caption='设备状态' size='small' style='margin-right:12px' :selectdata='dataSelect2' :placeholder='"请选择"'></Select>
  7. <Select width='224' tipPlace='top' caption='楼层:' size='small' style='margin-right:12px' :selectdata='floorSelect' :placeholder='"请选择"'></Select>
  8. <el-input placeholder='请按照设备简称搜索' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
  9. <el-input placeholder='请按照设备编号搜索' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
  10. <el-input placeholder='请按品牌搜索' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
  11. <el-input placeholder='请按照型号搜索' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
  12. <el-input placeholder='请按照安装位置搜索' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
  13. <el-input placeholder='请按照生产厂商搜索' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
  14. <el-input placeholder='请按照服务商搜索' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
  15. </div>
  16. <el-table :data='tableData' style='width: 100%'>
  17. <el-table-column type='index' label='序号' width='50'></el-table-column>
  18. <el-table-column prop='lb' label='设备简称'></el-table-column>
  19. <el-table-column prop='sl' label='设备编号'></el-table-column>
  20. <el-table-column prop='unit' label='数量'></el-table-column>
  21. <el-table-column prop='lb' label='管理归属'></el-table-column>
  22. <el-table-column prop='sl' label='设备状态'></el-table-column>
  23. <el-table-column prop='unit' label='品牌'></el-table-column>
  24. <el-table-column prop='sl' label='型号'></el-table-column>
  25. <el-table-column prop='unit' label='楼层'></el-table-column>
  26. <el-table-column prop='lb' label='安装位置'></el-table-column>
  27. <el-table-column prop='sl' label='生产厂商'></el-table-column>
  28. <el-table-column prop='unit' label='服务商'></el-table-column>
  29. </el-table>
  30. </div>
  31. </template>
  32. <script>
  33. import Select from '@/components/Select/Select.vue'
  34. import { mapGetters } from 'vuex'
  35. export default {
  36. data() {
  37. return {
  38. tableData: [],
  39. dataSelect2: [
  40. { id: 'test1', name: '选择项' },
  41. { id: 'test2', name: '单平米' },
  42. { id: 'test3', name: '下级分项' },
  43. { id: 'test4', name: '滑动平均滑动平均' }
  44. ],
  45. input: '',
  46. floorSelect: [] //楼层下拉框
  47. }
  48. },
  49. components: {
  50. Select
  51. },
  52. computed: {
  53. ...mapGetters(['floorsArr'])
  54. },
  55. mounted() {
  56. this.init()
  57. },
  58. methods: {
  59. open() {
  60. this.visible = true
  61. },
  62. init() {
  63. this.floorSelect = []
  64. if (this.floorsArr.length > 0) {
  65. this.floorsArr.forEach(e => {
  66. let obj = {
  67. id: e,
  68. name: e
  69. }
  70. this.floorSelect.push(obj)
  71. })
  72. }
  73. }
  74. }
  75. }
  76. </script>
  77. <style lang="less" scoped>
  78. .gdqd-dialog {
  79. .top {
  80. }
  81. .gdqd-dialog-top {
  82. display: flex;
  83. }
  84. }
  85. </style>
  86. <style lang="less">
  87. .gdqd-dialog {
  88. border: 1px solid green;
  89. padding: 16px 24px 24px;
  90. }
  91. </style>