spaceSelect.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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 = {Cascade: [{ Name: 'zoneType', Filters: `ProjectId='${this.projectId}'` }]}
  49. queryAllZoneType(params1, res => {
  50. this.options = res.Content;
  51. if (this.isAll) {
  52. this.options.unshift({
  53. Code: "",
  54. Name: "全部"
  55. });
  56. this.value = [''];
  57. }
  58. this.changeVal(this.value);
  59. })
  60. },
  61. //改变空间
  62. changeVal(value) {
  63. let val = value[value.length - 1];
  64. let space = {};
  65. this.options.forEach(item => {
  66. if (item.ZoneType) {
  67. item.ZoneType.forEach(other => {
  68. if (other.Code == val) {
  69. space = other
  70. }
  71. })
  72. } else {
  73. if (item.Code == val) {
  74. space = item
  75. }
  76. }
  77. })
  78. this.$emit('change', val, space, value)
  79. }
  80. },
  81. created() {
  82. this.getOptionData();
  83. }
  84. }
  85. </script>
  86. <style lang="less" scoped>
  87. #spaceSelect {
  88. float: left;
  89. margin-left: 10px;
  90. .buildFloor {
  91. color: #999999;
  92. font-size: 14px;
  93. }
  94. }
  95. </style>