Blame view

ant-design-vue-jeecg/src/components/jeecg/JAreaLinkage.vue 3.39 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div class="j-area-linkage">
    <div v-if="reloading">
      <span> Reloading... </span>
    </div>
    <area-cascader
      v-else-if="_type === enums.type[0]"
      :value="innerValue"
      :data="pcaa"
      :level="1"
      :style="{width}"
      v-bind="$attrs"
      v-on="_listeners"
      @change="handleChange"
    />
    <area-select
      v-else-if="_type === enums.type[1]"
      :value="innerValue"
      :data="pcaa"
      :level="2"
      v-bind="$attrs"
      v-on="_listeners"
      @change="handleChange"
    />
    <div v-else>
肖超群 authored
26
      <span style="color:red;"> Bad type value: {{ _type }}</span>
肖超群 authored
27
28
29
30
31
    </div>
  </div>
</template>

<script>
肖超群 authored
32
import Area from '@/components/_util/Area'
肖超群 authored
33
肖超群 authored
34
35
36
37
38
39
export default {
  name: 'JAreaLinkage',
  props: {
    value: {
      type: String,
      required: false
肖超群 authored
40
    },
肖超群 authored
41
42
43
44
45
46
    // 组件的类型,可选值:
    // select 下拉样式
    // cascader 级联样式(默认)
    type: {
      type: String,
      default: 'cascader'
肖超群 authored
47
    },
肖超群 authored
48
49
50
51
52
53
54
55
56
57
58
59
    width: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      pcaa: this.$Jpcaa,
      innerValue: [],
      usedListeners: ['change'],
      enums: {
        type: ['cascader', 'select']
肖超群 authored
60
      },
肖超群 authored
61
62
63
64
65
66
67
68
69
70
71
72
      reloading: false,
      areaData: ''
    }
  },
  computed: {
    _listeners() {
      let listeners = {...this.$listeners}
      // 去掉已使用的事件,防止冲突
      this.usedListeners.forEach(key => {
        delete listeners[key]
      })
      return listeners
肖超群 authored
73
    },
肖超群 authored
74
75
76
77
78
79
80
    _type() {
      if (this.enums.type.includes(this.type)) {
        return this.type
      } else {
        console.error(`JAreaLinkage的type属性只能接收指定的值(${this.enums.type.join('|')})`)
        return this.enums.type[0]
      }
肖超群 authored
81
    },
肖超群 authored
82
83
84
85
86
87
88
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        this.loadDataByValue(this.value)
      }
肖超群 authored
89
    },
肖超群 authored
90
91
92
93
94
  },
  created() {
    this.initAreaData();
  },
  methods: {
肖超群 authored
95
肖超群 authored
96
97
98
99
100
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => this.reloading = false)
    },
肖超群 authored
101
肖超群 authored
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
    /** 通过 value 反推 options */
    loadDataByValue(value) {
      if (!value || value.length === 0) {
        this.innerValue = []
      } else {
        this.initAreaData()
        let arr = this.areaData.getRealCode(value)
        this.innerValue = arr
      }
      this.reload()
    },
    /** 通过地区code获取子级 */
    loadDataByCode(value) {
      let options = []
      let data = this.pcaa[value]
      if (data) {
        for (let key in data) {
          if (data.hasOwnProperty(key)) {
            options.push({value: key, label: data[key],})
肖超群 authored
121
122
          }
        }
肖超群 authored
123
124
125
126
        return options
      } else {
        return []
      }
肖超群 authored
127
    },
肖超群 authored
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
    /** 判断是否有子节点 */
    hasChildren(options) {
      options.forEach(option => {
        let data = this.loadDataByCode(option.value)
        option.isLeaf = data.length === 0
      })
    },
    handleChange(values) {
      let value = values[values.length - 1]
      this.$emit('change', value)
    },
    initAreaData() {
      if (!this.areaData) {
        this.areaData = new Area(this.$Jpcaa);
      }
    },

  },
  model: {prop: 'value', event: 'change'},
}
肖超群 authored
148
149
150
</script>

<style lang="less" scoped>
肖超群 authored
151
152
.j-area-linkage {
  height: 40px;
肖超群 authored
153
肖超群 authored
154
155
156
157
158
159
  /deep/ .area-cascader-wrap .area-select {
    width: 100%;
  }

  /deep/ .area-select .area-selected-trigger {
    line-height: 1.15;
肖超群 authored
160
  }
肖超群 authored
161
}
肖超群 authored
162
163

</style>