meixioacomponent 2.0.37 → 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'

package/packages/components/proPageTable/oa_pro_footer.vue

@@ -21,6 +21,7 @@
       <!--      </basePopoverButton>-->
 
       <base-pagination
+          :page-sizes="pageSizes"
           :config="pageConfig"
           :pageProps="pageProps"
           @currentChange="currentChange"
@@ -50,6 +51,10 @@ export default {
     pageConfig: {
       type: Object,
     },
+    pageSizes: {
+      type: Array,
+      default: () => [15, 30, 60, 100, 200, 300],
+    },
   },
   components: {
     basePopoverButton,

package/packages/components/proPageTable/oa_pro_table.vue

@@ -97,8 +97,6 @@
       >
 
 
-
-
         <template #expanded-row="{row}" v-if="expandId">
           <slot name="expandedRow" :scope="row"></slot>
         </template>
@@ -193,6 +191,7 @@
         class="oa-pro-table-footer"
     >
       <oa_pro_footerVue
+          :page-sizes="pageSizes"
           :pageConfig="pageConfig"
           :pageProps="pageProps"
           :totalList="totalList"
@@ -510,16 +509,20 @@ export default {
       default: false
     },
 
-    expandId:{
-      type:String,
-      default:null
+    expandId: {
+      type: String,
+      default: null
     },
     rowspanAndColspan: {
       type: Function,
       default: () => {
         return null
       }
-    }
+    },
+    pageSizes: {
+      type: Array,
+      default: () => [15, 30, 60, 100, 200, 300],
+    },
   },
   computed: {
     checkType() {
@@ -630,8 +633,8 @@ export default {
   },
   mixins: [tableSectionMixins],
   methods: {
-    rehandleExpandChange(value,params){
-      this.$emit('rehandleExpandChange',value)
+    rehandleExpandChange(value, params) {
+      this.$emit('rehandleExpandChange', value)
     },
     isToolTip(value) {
       if (!value) {
@@ -903,11 +906,17 @@ export default {
       }
 
       result[`keyword`] = this.module;
-      if(this.sort[`sortBy`]){
-        result[`sortField`] = this.sort?.sortBy;
-        result[`sortOrder`] = this.sort?.descending ? 'desc' : 'asc';
+      try {
+        if (this.sort[`sortBy`]) {
+          result[`sortField`] = this.sort?.sortBy;
+          result[`sortOrder`] = this.sort?.descending ? 'desc' : 'asc';
+        }
+      } catch (error) {
+        result[`sortField`] = null;
+        result[`sortOrder`] = '';
       }
 
+
       // 高级筛选的结果
       const searchList = [];