spaceSelect.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <template>
  2. <div id="spaceSelect">
  3. <span class="buildFloor" style="padding-right:12px">空间类型</span>
  4. <el-cascader
  5. v-model="value"
  6. placeholder="请选择空间类型"
  7. clearable
  8. :style="isWidth ? '' : 'width:160px;'" size="small"
  9. :props="{value:'code',label:'name',children:'ZoneType'}"
  10. :options="options"
  11. @change="changeVal">
  12. </el-cascader>
  13. </div>
  14. </template>
  15. <script>
  16. import { queryAllZoneType } from '@/api/scan/request';
  17. import { mapGetters } from 'vuex'
  18. export default {
  19. computed: {
  20. ...mapGetters("layout", ["projectId"])
  21. },
  22. props: {
  23. isWidth: {
  24. type: Boolean,
  25. default: true
  26. },
  27. isAll: {
  28. type: Boolean,
  29. default: false
  30. }
  31. },
  32. data() {
  33. return {
  34. value:[null],
  35. options: [],
  36. props: {
  37. isWidth:false
  38. }
  39. }
  40. },
  41. methods: {
  42. setValue(val) {
  43. this.value = val;
  44. this.changeVal(val);
  45. },
  46. //获取下拉框数据
  47. getOptionData() {
  48. let params1 = {}
  49. //Cascade: [{ Name: 'zoneType', Filters: `ProjectId='${this.projectId}'` }]
  50. queryAllZoneType(params1, res => {
  51. this.options = res.content;
  52. if (this.isAll) {
  53. this.options.unshift({
  54. code: "",
  55. name: "全部"
  56. });
  57. this.value = [''];
  58. }
  59. this.changeVal(this.value);
  60. })
  61. },
  62. //改变空间
  63. changeVal(value) {
  64. let val = value[value.length - 1];
  65. let space = {};
  66. this.options.forEach(item => {
  67. // if (item.ZoneType) {
  68. // zoneType级联其他分区, 新版已删除
  69. // item.ZoneType.forEach(other => {
  70. // if (other.code == val) {
  71. // space = other
  72. // }
  73. // })
  74. // } else {
  75. if (item.code == val) {
  76. space = item
  77. }
  78. // }
  79. })
  80. this.$emit('change', val, space, value)
  81. }
  82. },
  83. created() {
  84. this.getOptionData();
  85. }
  86. }
  87. </script>
  88. <style lang="less" scoped>
  89. #spaceSelect {
  90. float: left;
  91. margin-left: 10px;
  92. .buildFloor {
  93. color: #999999;
  94. font-size: 14px;
  95. }
  96. }
  97. </style>