中国省市区街道四級連動地区選択コンポーネント

中国省市区街道四級連動地区選択コンポーネント

import data from <span class="hljs-string">'./data.js'</span>
import $ from <span class="hljs-string">'jquery'</span>
<span class="hljs-built_in">export</span> default {
  name: <span class="hljs-string">'AreaSelect'</span>,
  model: {
    props: <span class="hljs-string">'value'</span>,
    event: <span class="hljs-string">'change'</span>
  },
  props: {
    value: {
      <span class="hljs-built_in">type</span>: String,
      default: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
        <span class="hljs-built_in">return</span> <span class="hljs-string">''</span>
      }
    },
    level: {
      <span class="hljs-built_in">type</span>: String,
      default: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
        <span class="hljs-built_in">return</span> <span class="hljs-string">'street'</span>
      }
    }
  },
  <span class="hljs-function"><span class="hljs-title">data</span></span>() {
    <span class="hljs-built_in">return</span> {
      areas: data,
      innerLevel: 4,
      dropDown: {
        open: <span class="hljs-literal">false</span>
      },
      currentTab: <span class="hljs-string">'province'</span>,
      province: {
        key: <span class="hljs-string">''</span>,
        value: <span class="hljs-string">''</span>
      },
      city: {
        key: <span class="hljs-string">''</span>,
        value: <span class="hljs-string">''</span>
      },
      district: {
        key: <span class="hljs-string">''</span>,
        value: <span class="hljs-string">''</span>
      },
      street: {
        key: <span class="hljs-string">''</span>,
        value: <span class="hljs-string">''</span>
      }
    }
  },
  computed: {
    <span class="hljs-function"><span class="hljs-title">selectedArea</span></span>() {
      <span class="hljs-built_in">let</span> [key, value] = [<span class="hljs-string">''</span>, <span class="hljs-string">''</span>]
      <span class="hljs-keyword">if</span> (this.province.key !== <span class="hljs-string">''</span>) {
        key += this.province.key
        value += this.province.value
      }
      console.log(<span class="hljs-string">'province:'</span>, this.province.value)
      <span class="hljs-keyword">if</span> (this.city.key !== <span class="hljs-string">''</span>) {
        key += <span class="hljs-string">'/'</span> + this.city.key
        value += <span class="hljs-string">'/'</span> + this.city.value
      }
      console.log(<span class="hljs-string">'city:'</span>, this.city.value)
      <span class="hljs-keyword">if</span> (this.district.key !== <span class="hljs-string">''</span>) {
        key += <span class="hljs-string">'/'</span> + this.district.key
        value += <span class="hljs-string">'/'</span> + this.district.value
      }
      console.log(<span class="hljs-string">'district:'</span>, this.district.value)
      <span class="hljs-keyword">if</span> (this.street.key !== <span class="hljs-string">''</span>) {
        key += <span class="hljs-string">'/'</span> + this.street.key
        value += <span class="hljs-string">'/'</span> + this.street.value
      }
      console.log(<span class="hljs-string">'street:'</span>, this.street.value)
      console.log(<span class="hljs-string">'------------------------------------------------------'</span>)
      <span class="hljs-built_in">return</span> { key, value }
    }
  },
  watch: {
    <span class="hljs-string">'selectedArea.value'</span>(newVal, oldVal) {
      this.<span class="hljs-variable">$emit</span>(<span class="hljs-string">'change'</span>, newVal)
    }
  },
  <span class="hljs-function"><span class="hljs-title">created</span></span>() {
    this.innerLevel = this.calcInnerLevel(this.level)
    this.addBlurEvent()
  },
  methods: {
    <span class="hljs-function"><span class="hljs-title">openDropDown</span></span>() {
      this.dropDown.open = <span class="hljs-literal">true</span>
    },
    calcInnerLevel(level) {
      <span class="hljs-keyword">if</span> (level === <span class="hljs-string">'province'</span>) <span class="hljs-built_in">return</span> 1
      <span class="hljs-keyword">if</span> (level === <span class="hljs-string">'city'</span>) <span class="hljs-built_in">return</span> 2
      <span class="hljs-keyword">if</span> (level === <span class="hljs-string">'district'</span>) <span class="hljs-built_in">return</span> 3
      <span class="hljs-built_in">return</span> 4
    },
    <span class="hljs-function"><span class="hljs-title">addBlurEvent</span></span>() {
      $(document).click(<span class="hljs-string">'click'</span>, (event) => {
        <span class="hljs-keyword">if</span> (this.dropDown.open) {
          <span class="hljs-keyword">if</span> ($(event.target).closest(<span class="hljs-string">'#lwAreaSelect'</span>)[0] !== $(<span class="hljs-string">'#lwAreaSelect'</span>)[0]) {
            this.<span class="hljs-variable">$emit</span>(<span class="hljs-string">'blur'</span>)
            this.dropDown.open = <span class="hljs-literal">false</span>
          }
        }
      })
    },
    handleAreaSelect(key, value) {
      const targetElement = $(`[data-id=<span class="hljs-variable">${key}</span>]`)
      this.clearNextLevelData()
      <span class="hljs-keyword">if</span> (targetElement.hasClass(<span class="hljs-string">'selected'</span>)) {
        targetElement.removeClass(<span class="hljs-string">'selected'</span>)
      } <span class="hljs-keyword">else</span> {
        this.outputNextLevelData(key, value)
      }
    },
    outputNextLevelData(key, value) {
      this[this.currentTab] = { key, value }//  
      <span class="hljs-keyword">if</span> (this.currentTab !== this.level) {
        <span class="hljs-keyword">if</span> (this.currentTab === <span class="hljs-string">'province'</span>) {
          this.currentTab = <span class="hljs-string">'city'</span>
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (this.currentTab === <span class="hljs-string">'city'</span>) {
          this.currentTab = <span class="hljs-string">'district'</span>
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (this.currentTab === <span class="hljs-string">'district'</span>) {
          this.currentTab = <span class="hljs-string">'street'</span>
        }
      } <span class="hljs-keyword">else</span> {
        this.<span class="hljs-variable">$emit</span>(<span class="hljs-string">'blur'</span>)
        this.dropDown.open = <span class="hljs-literal">false</span>
      }
    },
    handleTabChange(tabName) {
      this.currentTab = tabName
    },
    <span class="hljs-function"><span class="hljs-title">clearNextLevelData</span></span>() {
      <span class="hljs-keyword">if</span> (this.currentTab === <span class="hljs-string">'province'</span>) {
        this.province = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
        this.city = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
        this.district = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
        this.street = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (this.currentTab === <span class="hljs-string">'city'</span>) {
        this.city = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
        this.district = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
        this.street = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
      } <span class="hljs-keyword">else</span> {
        this.district = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
        this.street = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
      }
    }
  }
}