Jeecg-Boot 2.2.0 版本发布 | 重磅升级

ant-design-vue-jeecg/src/components/jeecg/JAreaLinkage.vue

@@ -0,0 +1,156 @@
+<template>
+  <div v-if="!reloading" class="j-area-linkage">
+    <area-cascader
+      v-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>
+      <span style="color:red;"> Bad type value: {{_type}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { pcaa } from 'area-data'
+  import Area from '@/components/_util/Area'
+
+  export default {
+    name: 'JAreaLinkage',
+    props: {
+      value: {
+        type: String,
+        required:false
+      },
+      // 组件的类型，可选值：
+      // select 下拉样式
+      // cascader 级联样式（默认）
+      type: {
+        type: String,
+        default: 'cascader'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      }
+    },
+    data() {
+      return {
+        pcaa,
+        innerValue: [],
+        usedListeners: ['change'],
+        enums: {
+          type: ['cascader', 'select']
+        },
+        reloading: false,
+        areaData:''
+      }
+    },
+    computed: {
+      _listeners() {
+        let listeners = { ...this.$listeners }
+        // 去掉已使用的事件，防止冲突
+        this.usedListeners.forEach(key => {
+          delete listeners[key]
+        })
+        return listeners
+      },
+      _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]
+        }
+      },
+    },
+    watch: {
+      value: {
+        immediate: true,
+        handler() {
+          this.loadDataByValue(this.value)
+        }
+      },
+    },
+    created() {
+      this.initAreaData();
+    },
+    methods: {
+      /** 通过 value 反推 options */
+      loadDataByValue(value) {
+        if(!value || value.length==0){
+          this.innerValue = []
+          this.reloading = true;
+          setTimeout(()=>{
+            this.reloading = false
+          },100)
+        }else{
+          this.initAreaData();
+          let arr = this.areaData.getRealCode(value);
+          this.innerValue = arr
+        }
+      },
+      /** 通过地区code获取子级 */
+      loadDataByCode(value) {
+        let options = []
+        let data = pcaa[value]
+        if (data) {
+          for (let key in data) {
+            if (data.hasOwnProperty(key)) {
+              options.push({ value: key, label: data[key], })
+            }
+          }
+          return options
+        } else {
+          return []
+        }
+      },
+      /** 判断是否有子节点 */
+      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();
+        }
+      },
+
+    },
+    model: { prop: 'value', event: 'change' },
+  }
+</script>
+
+<style lang="less" scoped>
+  .j-area-linkage {
+    height:40px;
+    /deep/ .area-cascader-wrap .area-select {
+      width: 100%;
+    }
+
+    /deep/ .area-select .area-selected-trigger {
+      line-height: 1.15;
+    }
+  }
+
+</style>