vue2-client 1.6.49 → 1.7.0

package/src/base-client/components/common/CitySelect/CitySelect.vue

@@ -1,247 +1,247 @@
-<template>
-  <div>
-    <a-cascader
-      v-if="type === 'cascader'"
-      :options="tagData.divisionsForTree"
-      :placeholder="placeholder"
-      style="width: 100%;"
-      :size="size"
-    />
-    <a-select
-      ref="select"
-      :size="size"
-      v-model="valueView"
-      style="width: 100%;"
-      :dropdownMatchSelectWidth="false"
-      :dropdownStyle="dropdownStyle"
-      :placeholder="placeholder"
-      @blur="selectBlurHandle"
-      allow-clear
-      :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
-      :style="inputStyle">
-      <div slot="dropdownRender" @mousedown.prevent>
-        <a-tabs v-model="activeKey" :size="size">
-          <a-tab-pane
-            :tab="view.key"
-            v-for="(view,index) in viewArr"
-            :key="view.key"
-            v-if="contexts > index"
-            :disabled="tagData[view.value].length === 0">
-
-            <a-checkable-tag
-              :style="tagStyle"
-              v-for="item of tagData[view.value]"
-              :key="item.code"
-              @change="tagClick(view.key,item)">
-              <a-tooltip
-                placement="top"
-                :mouseEnterDelay="0.5"
-                :title="item.name"
-                :getPopupContainer=" triggerNode => { return triggerNode.parentElement } "
-              >
-                {{ item.name.length > 8 ?`${item.name.slice(0, 8)}...`:item.name }}
-              </a-tooltip>
-            </a-checkable-tag>
-          </a-tab-pane>
-        </a-tabs>
-      </div>
-    </a-select>
-  </div>
-</template>
-
-<script>
-const viewArr = [
-  {
-    key: '省/直辖市',
-    value: 'divisionsForTree',
-  }, {
-    key: '市',
-    value: 'cityData',
-  }, {
-    key: '区',
-    value: 'areaData',
-  }, {
-    key: '街道',
-    value: 'streetData',
-  }
-]
-export default {
-  name: 'CitySelect',
-  data () {
-    return {
-      open: false,
-      tagData: {
-        divisionsForTree: [],
-        // 市
-        cityData: [],
-        // 区
-        areaData: [],
-        // 街道
-        streetData: [],
-      },
-      // model: {
-      //   provinceModel: { name: '', code: '' },
-      //   cityModel: { name: '', code: '' },
-      //   areaModel: { name: '', code: '' },
-      //   streetModel: { name: '', code: '' }
-      // },
-      model: [
-        { name: '', code: '' },
-        { name: '', code: '' },
-        { name: '', code: '' },
-        { name: '', code: '' }
-      ],
-      // 控制标签
-      activeKey: '省/直辖市',
-      // 遍历以渲染页面
-      viewArr,
-      // 框内显示值 valueView
-      valueView: undefined
-    }
-  },
-  mounted () {
-    this.$appdata.getDivisionsOhChinaForTree().then(res => {
-      this.tagData.divisionsForTree = res
-    })
-  },
-  model: {
-    prop: 'value',
-    event: 'onChange'
-  },
-  computed: {},
-  props: {
-    // 页面渲染内容  默认 省市区街道 四个 所以是4
-    contexts: {
-      type: Number,
-      default: 3
-    },
-    placeholder: {
-      type: String,
-      default: '请选择省市区'
-    },
-    // small lage 输入框大小
-    size: {
-      type: String,
-      default: undefined
-    },
-    // 类型 simple / undefined
-    // simple 就是用的 cascader  不穿就是用的 自己封装的
-    type: {
-      type: String,
-      default: undefined
-    },
-    // 框的样式
-    inputStyle: {
-      type: Object,
-      default: () => {
-      }
-    },
-    // 下拉框的样式
-    dropdownStyle: {
-      type: Object,
-      default: () => {
-        return {
-          width: '35rem',
-          padding: '1%'
-        }
-      }
-    },
-    // 标签的样式
-    tagStyle: {
-      type: Object,
-      default: () => {
-        return {
-          fontSize: '0.88rem',
-          width: '23%',
-          textAlign: 'left',
-          margin: '0.5%',
-          cursor: 'pointer'
-        }
-      }
-    },
-    // 用于v-model 绑定
-    value: {
-      type: String,
-      default: undefined
-    },
-    // 用于v-model 绑定 code :最后一级的code  address: 所有级拼接的地址
-    valueType: {
-      type: String,
-      default: 'address'
-    }
-  },
-  watch: {},
-  methods: {
-    tagClick (e, item) {
-      if (e === '省/直辖市') {
-        // 如果是同一个标签
-        if (this.model[0].name !== item.name) {
-          this.tagData.cityData = item.children
-          this.tagData.areaData = []
-          this.tagData.streetData = []
-          this.model[0].name = item.name
-          this.model[0].code = item.code
-          this.model[1] = { name: '', code: '' }
-          this.model[2] = { name: '', code: '' }
-          this.model[3] = { name: '', code: '' }
-        }
-        if (this.contexts !== 1) {
-          this.activeKey = '市'
-        }
-        this.getResultText(1)
-      } else if (e === '市') {
-        if (this.model[1].name !== item.name) {
-          this.tagData.areaData = item.children
-          this.tagData.streetData = []
-          this.model[1].name = item.name
-          this.model[1].code = item.code
-          this.model[2] = { name: '', code: '' }
-          this.model[3] = { name: '', code: '' }
-        }
-        if (this.contexts !== 2) {
-          this.activeKey = '区'
-        }
-        this.getResultText(2)
-      } else if (e === '区') {
-        if (this.model[2].name !== item.name) {
-          this.tagData.streetData = item.children
-          this.model[2].name = item.name
-          this.model[2].code = item.code
-          this.model[3] = { name: '', code: '' }
-        }
-        if (this.contexts !== 3) {
-          this.activeKey = '街道'
-        }
-        this.getResultText(3)
-      } else if (e === '街道') {
-        if (this.model[3].name !== item.name) {
-          this.model[3].name = item.name
-          this.model[3].code = item.code
-        }
-        this.getResultText(4)
-      }
-    },
-    getResultText (tag) {
-      const address = []
-      let code = ''
-      for (let i = 0; i < this.contexts; i++) {
-        if (this.model[i].name && this.model[i].name !== '') {
-          address.push(this.model[i].name)
-        }
-        code = this.model[i].code ?? ''
-      }
-      this.valueView = this.valueType === 'address' ? address.join('/') : code
-      if (tag === this.contexts) {
-        this.$refs.select.blur()
-        this.$emit('onChange', this.valueType === 'address' ? address.join('') : code)
-      }
-    },
-    // 失去焦点回调
-    selectBlurHandle () {
-      if (!this.model[this.contexts - 1].code || this.model[this.contexts - 1].code === '') {
-        this.valueView = undefined
-      }
-    }
-  }
-}
-</script>
+<template>
+  <div>
+    <a-cascader
+      v-if="type === 'cascader'"
+      :options="tagData.divisionsForTree"
+      :placeholder="placeholder"
+      style="width: 100%;"
+      :size="size"
+    />
+    <a-select
+      ref="select"
+      :size="size"
+      v-model="valueView"
+      style="width: 100%;"
+      :dropdownMatchSelectWidth="false"
+      :dropdownStyle="dropdownStyle"
+      :placeholder="placeholder"
+      @blur="selectBlurHandle"
+      allow-clear
+      :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
+      :style="inputStyle">
+      <div slot="dropdownRender" @mousedown.prevent>
+        <a-tabs v-model="activeKey" :size="size">
+          <a-tab-pane
+            :tab="view.key"
+            v-for="(view,index) in viewArr"
+            :key="view.key"
+            v-if="contexts > index"
+            :disabled="tagData[view.value].length === 0">
+
+            <a-checkable-tag
+              :style="tagStyle"
+              v-for="item of tagData[view.value]"
+              :key="item.code"
+              @change="tagClick(view.key,item)">
+              <a-tooltip
+                placement="top"
+                :mouseEnterDelay="0.5"
+                :title="item.name"
+                :getPopupContainer=" triggerNode => { return triggerNode.parentElement } "
+              >
+                {{ item.name.length > 8 ?`${item.name.slice(0, 8)}...`:item.name }}
+              </a-tooltip>
+            </a-checkable-tag>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </a-select>
+  </div>
+</template>
+
+<script>
+const viewArr = [
+  {
+    key: '省/直辖市',
+    value: 'divisionsForTree',
+  }, {
+    key: '市',
+    value: 'cityData',
+  }, {
+    key: '区',
+    value: 'areaData',
+  }, {
+    key: '街道',
+    value: 'streetData',
+  }
+]
+export default {
+  name: 'CitySelect',
+  data () {
+    return {
+      open: false,
+      tagData: {
+        divisionsForTree: [],
+        // 市
+        cityData: [],
+        // 区
+        areaData: [],
+        // 街道
+        streetData: [],
+      },
+      // model: {
+      //   provinceModel: { name: '', code: '' },
+      //   cityModel: { name: '', code: '' },
+      //   areaModel: { name: '', code: '' },
+      //   streetModel: { name: '', code: '' }
+      // },
+      model: [
+        { name: '', code: '' },
+        { name: '', code: '' },
+        { name: '', code: '' },
+        { name: '', code: '' }
+      ],
+      // 控制标签
+      activeKey: '省/直辖市',
+      // 遍历以渲染页面
+      viewArr,
+      // 框内显示值 valueView
+      valueView: undefined
+    }
+  },
+  mounted () {
+    this.$appdata.getDivisionsOhChinaForTree().then(res => {
+      this.tagData.divisionsForTree = res
+    })
+  },
+  model: {
+    prop: 'value',
+    event: 'onChange'
+  },
+  computed: {},
+  props: {
+    // 页面渲染内容  默认 省市区街道 四个 所以是4
+    contexts: {
+      type: Number,
+      default: 3
+    },
+    placeholder: {
+      type: String,
+      default: '请选择省市区'
+    },
+    // small lage 输入框大小
+    size: {
+      type: String,
+      default: undefined
+    },
+    // 类型 simple / undefined
+    // simple 就是用的 cascader  不穿就是用的 自己封装的
+    type: {
+      type: String,
+      default: undefined
+    },
+    // 框的样式
+    inputStyle: {
+      type: Object,
+      default: () => {
+      }
+    },
+    // 下拉框的样式
+    dropdownStyle: {
+      type: Object,
+      default: () => {
+        return {
+          width: '35rem',
+          padding: '1%'
+        }
+      }
+    },
+    // 标签的样式
+    tagStyle: {
+      type: Object,
+      default: () => {
+        return {
+          fontSize: '0.88rem',
+          width: '23%',
+          textAlign: 'left',
+          margin: '0.5%',
+          cursor: 'pointer'
+        }
+      }
+    },
+    // 用于v-model 绑定
+    value: {
+      type: String,
+      default: undefined
+    },
+    // 用于v-model 绑定 code :最后一级的code  address: 所有级拼接的地址
+    valueType: {
+      type: String,
+      default: 'address'
+    }
+  },
+  watch: {},
+  methods: {
+    tagClick (e, item) {
+      if (e === '省/直辖市') {
+        // 如果是同一个标签
+        if (this.model[0].name !== item.name) {
+          this.tagData.cityData = item.children
+          this.tagData.areaData = []
+          this.tagData.streetData = []
+          this.model[0].name = item.name
+          this.model[0].code = item.code
+          this.model[1] = { name: '', code: '' }
+          this.model[2] = { name: '', code: '' }
+          this.model[3] = { name: '', code: '' }
+        }
+        if (this.contexts !== 1) {
+          this.activeKey = '市'
+        }
+        this.getResultText(1)
+      } else if (e === '市') {
+        if (this.model[1].name !== item.name) {
+          this.tagData.areaData = item.children
+          this.tagData.streetData = []
+          this.model[1].name = item.name
+          this.model[1].code = item.code
+          this.model[2] = { name: '', code: '' }
+          this.model[3] = { name: '', code: '' }
+        }
+        if (this.contexts !== 2) {
+          this.activeKey = '区'
+        }
+        this.getResultText(2)
+      } else if (e === '区') {
+        if (this.model[2].name !== item.name) {
+          this.tagData.streetData = item.children
+          this.model[2].name = item.name
+          this.model[2].code = item.code
+          this.model[3] = { name: '', code: '' }
+        }
+        if (this.contexts !== 3) {
+          this.activeKey = '街道'
+        }
+        this.getResultText(3)
+      } else if (e === '街道') {
+        if (this.model[3].name !== item.name) {
+          this.model[3].name = item.name
+          this.model[3].code = item.code
+        }
+        this.getResultText(4)
+      }
+    },
+    getResultText (tag) {
+      const address = []
+      let code = ''
+      for (let i = 0; i < this.contexts; i++) {
+        if (this.model[i].name && this.model[i].name !== '') {
+          address.push(this.model[i].name)
+        }
+        code = this.model[i].code ?? ''
+      }
+      this.valueView = this.valueType === 'address' ? address.join('/') : code
+      if (tag === this.contexts) {
+        this.$refs.select.blur()
+        this.$emit('onChange', this.valueType === 'address' ? address.join('') : code)
+      }
+    },
+    // 失去焦点回调
+    selectBlurHandle () {
+      if (!this.model[this.contexts - 1].code || this.model[this.contexts - 1].code === '') {
+        this.valueView = undefined
+      }
+    }
+  }
+}
+</script>