meixioacomponent 2.0.38 → 2.0.39

package/packages/components/base/baseArea/baseAreaV2.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="base-area-select-wrap">
+    <t-cascader
+        ref="cascader"
+        :keys="{
+          value:'code',
+          label:'name',
+          children: 'children',
+        }"
+        :load="load"
+        :options="options"
+        :disabled="disable||loading"
+        :size="componentSize" @change="onChange"
+        :placeholder="placeholder"
+        :input-props="inputProps"
+        v-model="localValue">
+    </t-cascader>
+  </div>
+</template>
+
+<script>
+import baseButtonHandleVue from '../baseButtonHandle/baseButtonHandle.vue'
+import {GetAreaTree} from "./api";
+import areaConfig from "./areaConfig";
+import {TransomComponentSize} from "../../../utils/utils";
+//
+
+export default {
+  name: 'baseArea',
+  data() {
+    return {
+      loading: false,
+      localValue: [],
+      localDetailValue: {},
+      placeholder: '请选择省市区镇',
+      options: [],
+      inputProps: {
+        value: '',
+      },
+    }
+  },
+  created() {
+  },
+
+  mounted() {
+    this.loadArea('').then(res => {
+      this.options = res;
+    })
+  },
+
+  props: {
+    value: {
+      default: null,
+    },
+    disable: {
+      type: Boolean,
+      default: false,
+    },
+    size: {type: String, default: 'small'}
+  },
+
+  components: {
+    baseButtonHandleVue,
+  },
+  computed: {
+    module: {
+      set(val) {
+        this.$emit('input', val)
+      },
+      get() {
+        return this.$props.value
+      },
+    },
+    componentSize() {
+      return TransomComponentSize(this.$props.size);
+    }
+
+  },
+  methods: {
+    init() {
+      if (this.module) {
+        const {province, city, district, town} = this.module;
+        this.inputProps.value = `${province}/${city}/${district}`
+        if (town) {
+          this.inputProps.value += `/${town}`
+          this.localValue = [province, city, district, town]
+        } else {
+          this.localValue = [province, city, district]
+        }
+        this.localDetailValue = {
+          province,
+          city,
+          district,
+          town
+        }
+      }
+    },
+    load(node) {
+      const {value} = node;
+      return new Promise((resolve) => {
+        this.loadArea(value).then(res => {
+          resolve(res);
+        })
+      })
+    },
+
+    loadArea(keyword) {
+      return new Promise((resolve) => {
+        this.loading = true;
+        GetAreaTree({
+          keyword: keyword
+        }).then(res => {
+          if (Array.isArray(res)) {
+            res.forEach(item => {
+              item[`children`] = item.level !== 4;
+            })
+            this.loading = false;
+            resolve(res);
+          } else {
+            resolve([]);
+          }
+        })
+      })
+    },
+    onChange() {
+      this.inputProps.value = '';
+      this.$nextTick(() => {
+        const list = this.$refs.cascader.panels;
+        list.forEach(itemList => {
+          this.onAreaChange(itemList)
+        })
+        const _value = {
+          ...this.localDetailValue,
+        }
+        this.$emit('confirmAreaValue', _value)
+        this.module = _value;
+        console.log(this.localValue);
+      })
+    },
+    onAreaChange(list) {
+      try {
+        let index = null;
+        for (let i = 0; i < list.length; i++) {
+          const item = list[i];
+          if (item.indeterminate || item.checked) {
+            index = i;
+          }
+        }
+        const value = list[index];
+        const {data} = value;
+        const {name, code, level} = data;
+        if (!level) return;
+        if (!this.localDetailValue[`idList`]) {
+          this.localDetailValue[`idList`] = [0, 0, 0, 0];
+        }
+        this.localDetailValue[`${areaConfig[level - 1].value}`] = name;
+        this.localDetailValue[`idList`][level - 1] = code;
+        console.log(this.localDetailValue);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+  watch: {
+    module: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          this.init();
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.base-area-select-wrap {
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  border-radius: calc(var(--radius) * 2);
+}
+
+</style>

package/packages/components/base/baseArea/index.js

@@ -1,5 +1,4 @@
-import baseArea from "./baseArea.vue";
-
+import baseArea from "./baseAreaV2.vue";
 baseArea.install = function (Vue) {
   Vue.component(baseArea.name, baseArea);
 };

package/packages/components/proForm/proForm/pro_form.vue

@@ -127,7 +127,7 @@
 
 <script>
 import pro_form_itemVue from './proFormItem/pro_form_item.vue'
-import baseAreaVue from '../../base/baseArea/baseArea.vue'
+import baseAreaVue from '../../base/baseArea/baseAreaV2.vue'
 import baseUploadVue from '../../base/baseUpload/baseUpload.vue'
 import pro_formItem_skeletonVue from './pro_form-item_skeleton.vue'
 import baseButtonHandleVue from '../../base/baseButtonHandle/baseButtonHandle.vue'