cnhis-design-vue 2.1.58 → 2.1.59

package/packages/scale-view/formitem/index.js

@@ -1,6 +1,6 @@
-export { default as MyTime } from "./r-time";
-export { default as MyChoice } from "./r-choice";
-export { default as MyInput } from "./r-input";
-export { default as MyAddress } from "./r-address";
-export { default as MyUpload } from "./r-upload";
-export { default as MyPrompt } from "./r-prompt";
+export { default as MyTime } from "./r-time";
+export { default as MyChoice } from "./r-choice";
+export { default as MyInput } from "./r-input";
+export { default as MyAddress } from "./r-address";
+export { default as MyUpload } from "./r-upload";
+export { default as MyPrompt } from "./r-prompt";

package/packages/scale-view/formitem/r-address.vue

@@ -1,238 +1,238 @@
-<template>
-  <div class="m-address">
-    <div class="field-select">
-      <div class="field-row">
-        <a-select
-          v-if="addressType.includes('province')"
-          class="field-cell"
-          labelInValue
-          @change="handleProvince"
-          v-model="provinceValue"
-          showSearch
-          :filterOption="filterOption"
-          :disabled="isLock"
-          :getPopupContainer="getPopupContainer"
-        >
-          <a-select-option v-for="item in province" :value="item.code" :key="item.code">{{
-            item.name
-          }}</a-select-option>
-        </a-select>
-        <a-select
-          v-if="addressType.includes('city')"
-          class="field-cell"
-          labelInValue
-          @change="handleCity"
-          v-model="cityValue"
-          showSearch
-          :disabled="isLock"
-          :filterOption="filterOption"
-          :getPopupContainer="getPopupContainer"
-        >
-          <a-select-option v-for="item in city" :value="item.code" :key="item.code">{{
-            item.name
-          }}</a-select-option>
-        </a-select>
-        <a-select
-          v-if="addressType.includes('district')"
-          class="field-cell"
-          labelInValue
-          @change="handleArea"
-          v-model="areaValue"
-          showSearch
-          :disabled="isLock"
-          :filterOption="filterOption"
-          :getPopupContainer="getPopupContainer"
-        >
-          <a-select-option v-for="item in area" :value="item.code" :key="item.code">{{
-            item.name
-          }}</a-select-option>
-        </a-select>
-      </div>
-    </div>
-    <div v-if="addressType.includes('address')" class="field-control">
-      <a-input
-        @change="handleAddress"
-        v-model="addressValue"
-        :disabled="isLock"
-        placeholder="请输入"
-      ></a-input>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Select, Input } from "ant-design-vue";
-import utils from "@/utils/utils-map";
-import addressData from './data'
-export default {
-  props: {
-    defaultValue: { default: () => {} },
-    setting: { default: '{"addressType":"province-city-district-address"}' },
-    isLock: { type: Boolean, default: false }
-  },
-  computed: {
-    addressType() {
-      let setObj = { addressType: "province-city-district-address" };
-      if (utils.isJSON(this.setting)) {
-        setObj = JSON.parse(this.setting);
-      } else {
-        setObj = this.setting;
-      }
-      return setObj.addressType;
-    }
-  },
-  watch: {
-    defaultValue: {
-      immediate: true,
-      handler(value) {
-        if (!utils.isEmpty(value)) {
-          this.getAllData().then(() => {
-            // 有默认值不触发 change
-            this.handleProvince(value["province"], 'no');
-            this.handleCity(value["city"], 'no');
-            this.handleArea(value["area"], 'no');
-            this.provinceValue = value["province"];
-            this.cityValue = value["city"];
-            this.areaValue = value["area"];
-            this.addressValue = value["address"];
-            this.allValue = JSON.parse(JSON.stringify(value));
-          });
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      allData: null,
-      provinceValue: { key: -1, label: "省/自治区/直辖市" },
-      cityValue: { key: -1, label: "市" },
-      areaValue: { key: -1, label: "区/县" },
-      province: [{ code: -1, name: "省/自治区/直辖市" }],
-      city: [{ code: -1, name: "市" }],
-      area: [{ code: -1, name: "区/县" }],
-      addressValue: "",
-      allValue: {}
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    // 组件初始化
-    init() {
-      this.getAllData();
-    },
-    // 获取中国区域数据
-    getAllData() {
-      return Promise.resolve(addressData).then(data => {
-        this.allData = data;
-        if (this.province.length <= 1) {
-          this.province.push(...this.objToArray(data["86"]));
-        }
-      });
-    },
-    // 操作省
-    handleProvince(code, isInit) {
-      console.log(this,'')
-      this.initCity();
-      this.initArea();
-      if (code.key > 0 && this.city.length == 1) {
-        this.city.push(...this.objToArray(this.allData[code.key]));
-      }
-      Object.assign(this.allValue, {
-        province: code,
-        address: this.addressValue
-      });
-      if (isInit == 'no') return;
-      this.$emit("change", this.allValue);
-    },
-    // 操作市
-    handleCity(code, isInit) {
-      this.initArea();
-      if (code.key > 0) {
-        this.area.push(...this.objToArray(this.allData[code.key]));
-      }
-      Object.assign(this.allValue, { city: code, address: this.addressValue });
-      if (isInit == 'no') return;
-      this.$emit("change", this.allValue);
-    },
-    // 操作区
-    handleArea(code, isInit) {
-      Object.assign(this.allValue, { area: code, address: this.addressValue });
-      if (isInit == 'no') return;
-      this.$emit("change", this.allValue);
-    },
-    // 填写详细地址
-    handleAddress(e) {
-      Object.assign(this.allValue, { address: e.currentTarget.value });
-      this.$emit("change", this.allValue);
-    },
-    // 初始化市
-    initCity() {
-      this.city = [{ code: -1, name: "市" }];
-      this.cityValue = { key: -1, label: "市" };
-      Object.assign(this.allValue, { city: this.cityValue });
-    },
-    // 初始化区
-    initArea() {
-      this.area = [{ code: -1, name: "区/县" }];
-      this.areaValue = { key: -1, label: "区/县" };
-      Object.assign(this.allValue, { area: this.areaValue });
-    },
-    // 对象转数组
-    objToArray(obj) {
-      if (!obj) return [];
-      return Object.keys(obj).map(item => {
-        return {
-          code: item,
-          name: obj[item]
-        };
-      });
-    },
-    getPopupContainer(triggerNode) {
-      return this.$el;
-    },
-
-    filterOption(...arg){
-      return utils.filterOption(...arg)
-    }
-  },
-  components:{
-    [Input.name]: Input,
-    [Select.name]: Select,
-    [Select.Option.name]: Select.Option,
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.m-address {
-  position: relative;
-  max-width: 500px;
-  .field-select {
-    width: 100%;
-    // display: table;
-    // table-layout: fixed;
-    // border-collapse: separate;
-    .field-row {
-      // display: table-row;
-      display: flex;
-      overflow: hidden;
-      .field-cell {
-        flex: 1;
-        // position: relative;
-        // display: table-cell;
-        width: 100%;
-        padding: 0 5px 5px 0;
-        &:last-child {
-          padding-right: 0;
-        }
-        // /deep/.ant-select-dropdown {
-        //   top: 32px !important;
-        //   left: 1px !important;
-        // }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="m-address">
+    <div class="field-select">
+      <div class="field-row">
+        <a-select
+          v-if="addressType.includes('province')"
+          class="field-cell"
+          labelInValue
+          @change="handleProvince"
+          v-model="provinceValue"
+          showSearch
+          :filterOption="filterOption"
+          :disabled="isLock"
+          :getPopupContainer="getPopupContainer"
+        >
+          <a-select-option v-for="item in province" :value="item.code" :key="item.code">{{
+            item.name
+          }}</a-select-option>
+        </a-select>
+        <a-select
+          v-if="addressType.includes('city')"
+          class="field-cell"
+          labelInValue
+          @change="handleCity"
+          v-model="cityValue"
+          showSearch
+          :disabled="isLock"
+          :filterOption="filterOption"
+          :getPopupContainer="getPopupContainer"
+        >
+          <a-select-option v-for="item in city" :value="item.code" :key="item.code">{{
+            item.name
+          }}</a-select-option>
+        </a-select>
+        <a-select
+          v-if="addressType.includes('district')"
+          class="field-cell"
+          labelInValue
+          @change="handleArea"
+          v-model="areaValue"
+          showSearch
+          :disabled="isLock"
+          :filterOption="filterOption"
+          :getPopupContainer="getPopupContainer"
+        >
+          <a-select-option v-for="item in area" :value="item.code" :key="item.code">{{
+            item.name
+          }}</a-select-option>
+        </a-select>
+      </div>
+    </div>
+    <div v-if="addressType.includes('address')" class="field-control">
+      <a-input
+        @change="handleAddress"
+        v-model="addressValue"
+        :disabled="isLock"
+        placeholder="请输入"
+      ></a-input>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Select, Input } from "ant-design-vue";
+import utils from "@/utils/utils-map";
+import addressData from './data'
+export default {
+  props: {
+    defaultValue: { default: () => {} },
+    setting: { default: '{"addressType":"province-city-district-address"}' },
+    isLock: { type: Boolean, default: false }
+  },
+  computed: {
+    addressType() {
+      let setObj = { addressType: "province-city-district-address" };
+      if (utils.isJSON(this.setting)) {
+        setObj = JSON.parse(this.setting);
+      } else {
+        setObj = this.setting;
+      }
+      return setObj.addressType;
+    }
+  },
+  watch: {
+    defaultValue: {
+      immediate: true,
+      handler(value) {
+        if (!utils.isEmpty(value)) {
+          this.getAllData().then(() => {
+            // 有默认值不触发 change
+            this.handleProvince(value["province"], 'no');
+            this.handleCity(value["city"], 'no');
+            this.handleArea(value["area"], 'no');
+            this.provinceValue = value["province"];
+            this.cityValue = value["city"];
+            this.areaValue = value["area"];
+            this.addressValue = value["address"];
+            this.allValue = JSON.parse(JSON.stringify(value));
+          });
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      allData: null,
+      provinceValue: { key: -1, label: "省/自治区/直辖市" },
+      cityValue: { key: -1, label: "市" },
+      areaValue: { key: -1, label: "区/县" },
+      province: [{ code: -1, name: "省/自治区/直辖市" }],
+      city: [{ code: -1, name: "市" }],
+      area: [{ code: -1, name: "区/县" }],
+      addressValue: "",
+      allValue: {}
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    // 组件初始化
+    init() {
+      this.getAllData();
+    },
+    // 获取中国区域数据
+    getAllData() {
+      return Promise.resolve(addressData).then(data => {
+        this.allData = data;
+        if (this.province.length <= 1) {
+          this.province.push(...this.objToArray(data["86"]));
+        }
+      });
+    },
+    // 操作省
+    handleProvince(code, isInit) {
+      console.log(this,'')
+      this.initCity();
+      this.initArea();
+      if (code.key > 0 && this.city.length == 1) {
+        this.city.push(...this.objToArray(this.allData[code.key]));
+      }
+      Object.assign(this.allValue, {
+        province: code,
+        address: this.addressValue
+      });
+      if (isInit == 'no') return;
+      this.$emit("change", this.allValue);
+    },
+    // 操作市
+    handleCity(code, isInit) {
+      this.initArea();
+      if (code.key > 0) {
+        this.area.push(...this.objToArray(this.allData[code.key]));
+      }
+      Object.assign(this.allValue, { city: code, address: this.addressValue });
+      if (isInit == 'no') return;
+      this.$emit("change", this.allValue);
+    },
+    // 操作区
+    handleArea(code, isInit) {
+      Object.assign(this.allValue, { area: code, address: this.addressValue });
+      if (isInit == 'no') return;
+      this.$emit("change", this.allValue);
+    },
+    // 填写详细地址
+    handleAddress(e) {
+      Object.assign(this.allValue, { address: e.currentTarget.value });
+      this.$emit("change", this.allValue);
+    },
+    // 初始化市
+    initCity() {
+      this.city = [{ code: -1, name: "市" }];
+      this.cityValue = { key: -1, label: "市" };
+      Object.assign(this.allValue, { city: this.cityValue });
+    },
+    // 初始化区
+    initArea() {
+      this.area = [{ code: -1, name: "区/县" }];
+      this.areaValue = { key: -1, label: "区/县" };
+      Object.assign(this.allValue, { area: this.areaValue });
+    },
+    // 对象转数组
+    objToArray(obj) {
+      if (!obj) return [];
+      return Object.keys(obj).map(item => {
+        return {
+          code: item,
+          name: obj[item]
+        };
+      });
+    },
+    getPopupContainer(triggerNode) {
+      return this.$el;
+    },
+
+    filterOption(...arg){
+      return utils.filterOption(...arg)
+    }
+  },
+  components:{
+    [Input.name]: Input,
+    [Select.name]: Select,
+    [Select.Option.name]: Select.Option,
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.m-address {
+  position: relative;
+  max-width: 500px;
+  .field-select {
+    width: 100%;
+    // display: table;
+    // table-layout: fixed;
+    // border-collapse: separate;
+    .field-row {
+      // display: table-row;
+      display: flex;
+      overflow: hidden;
+      .field-cell {
+        flex: 1;
+        // position: relative;
+        // display: table-cell;
+        width: 100%;
+        padding: 0 5px 5px 0;
+        &:last-child {
+          padding-right: 0;
+        }
+        // /deep/.ant-select-dropdown {
+        //   top: 32px !important;
+        //   left: 1px !important;
+        // }
+      }
+    }
+  }
+}
+</style>