@weitutech/by-components 1.0.27 → 1.0.30

package/src/components/page-search/page-search.vue

@@ -1,114 +1,114 @@
-<template>
-  <div class="b-page-search">
-    <by-form
-      :value="formData"
-      v-bind="searchFormConfig"
-      :is-flexible="unfold"
-      @input="handleInput"
-      @change="handleChange"
-      @queryBtnClick="handleQueryClick"
-    >
-      <template #header>
-        <slot name="header" />
-      </template>
-      <template #footer>
-        <div v-if="isShowUnfoldBtn" class="fold">
-          <by-fold-search @change="handleFlexible" />
-        </div>
-      </template>
-      <template v-for="item in getCustomItem" #[item]>
-        <slot :name="item" />
-      </template>
-    </by-form>
-  </div>
-</template>
-
-<script>
-
-export default {
-  props: {
-    searchFormConfig: {
-      type: Object,
-      required: true,
-      default: () => {}
-    },
-    value: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  data() {
-    return {
-      formItems: this.searchFormConfig?.formItems ?? [],
-      formOriginData: {}, // 最初的初始化数据
-      formData: {}, // 双向绑定的
-      unfold: false // 是否展开
-    }
-  },
-
-  computed: {
-    isShowUnfoldBtn() {
-      const formItems = this.searchFormConfig?.formItems ?? []
-      const flexible = this.searchFormConfig?.flexible ?? undefined
-      // 如果没有配置flexible, 则默认为true
-      if (flexible) {
-        if (formItems.length > flexible.foldField.length) {
-          return true
-        } else {
-          return false
-        }
-      } else {
-        return false
-      }
-    },
-    // 所有需要自定义的插槽
-    getCustomItem() {
-      return this.formItems.filter(f => f.type === "custom").map(item => item.field)
-    }
-  },
-
-  watch: {
-    value: {
-      handler(newValue, oldValue) {
-        this.formData = newValue
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-
-  mounted() {
-    this.formOriginData = this.value
-    this.unfold = this.searchFormConfig.flexible?.unfold ?? false
-  },
-
-  // 双向绑定的属性应该是由配置文件的field来决定
-  // 1.优化一: formData中的属性应该动态来决定
-  methods: {
-    // 2.优化二: 当用户点击重置
-    handleResetClick() {
-      this.formData = { ...this.formOriginData }
-      this.$emit("input", { ...this.formOriginData })
-      this.$emit("resetBtnClick")
-    },
-
-    // 3.优化三: 当用户点击搜索
-    handleQueryClick() {
-      this.$emit("queryBtnClick")
-    },
-
-    // 4.优化四: 当用户点击展开
-    handleFlexible() {
-      this.unfold = !this.unfold
-    },
-    handleInput(value) {
-      this.formData = value
-      this.$emit("input", { ...this.formData })
-    },
-    handleChange(event) {
-      this.$emit("change", event)
-    }
-  }
-}
-</script>
+<template>
+  <div class="b-page-search">
+    <by-form
+      :value="formData"
+      v-bind="searchFormConfig"
+      :is-flexible="unfold"
+      @input="handleInput"
+      @change="handleChange"
+      @queryBtnClick="handleQueryClick"
+    >
+      <template #header>
+        <slot name="header" />
+      </template>
+      <template #footer>
+        <div v-if="isShowUnfoldBtn" class="fold">
+          <by-fold-search @change="handleFlexible" />
+        </div>
+      </template>
+      <template v-for="item in getCustomItem" #[item]>
+        <slot :name="item" />
+      </template>
+    </by-form>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    searchFormConfig: {
+      type: Object,
+      required: true,
+      default: () => {}
+    },
+    value: {
+      type: Object,
+      default: () => {}
+    }
+  },
+
+  data() {
+    return {
+      formItems: this.searchFormConfig?.formItems ?? [],
+      formOriginData: {}, // 最初的初始化数据
+      formData: {}, // 双向绑定的
+      unfold: false // 是否展开
+    }
+  },
+
+  computed: {
+    isShowUnfoldBtn() {
+      const formItems = this.searchFormConfig?.formItems ?? []
+      const flexible = this.searchFormConfig?.flexible ?? undefined
+      // 如果没有配置flexible, 则默认为true
+      if (flexible) {
+        if (formItems.length > flexible.foldField.length) {
+          return true
+        } else {
+          return false
+        }
+      } else {
+        return false
+      }
+    },
+    // 所有需要自定义的插槽
+    getCustomItem() {
+      return this.formItems.filter(f => f.type === "custom").map(item => item.field)
+    }
+  },
+
+  watch: {
+    value: {
+      handler(newValue, oldValue) {
+        this.formData = newValue
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+
+  mounted() {
+    this.formOriginData = this.value
+    this.unfold = this.searchFormConfig.flexible?.unfold ?? false
+  },
+
+  // 双向绑定的属性应该是由配置文件的field来决定
+  // 1.优化一: formData中的属性应该动态来决定
+  methods: {
+    // 2.优化二: 当用户点击重置
+    handleResetClick() {
+      this.formData = { ...this.formOriginData }
+      this.$emit("input", { ...this.formOriginData })
+      this.$emit("resetBtnClick")
+    },
+
+    // 3.优化三: 当用户点击搜索
+    handleQueryClick() {
+      this.$emit("queryBtnClick")
+    },
+
+    // 4.优化四: 当用户点击展开
+    handleFlexible() {
+      this.unfold = !this.unfold
+    },
+    handleInput(value) {
+      this.formData = value
+      this.$emit("input", { ...this.formData })
+    },
+    handleChange(event) {
+      this.$emit("change", event)
+    }
+  }
+}
+</script>

package/src/components/pager/index.vue

@@ -1,81 +1,81 @@
-<template>
-  <div id="pager" class="pager fixed bottom-0 right-0 w-full flex justify-center items-center z-50">
-    <el-pagination
-      :current-page="pager['page']"
-      :page-size="pager['limit']"
-      :page-sizes="pageSizes"
-      background
-      layout="total, prev, pager, next,sizes, jumper"
-      :total="totalCount"
-      @size-change="(value) => handleValueChange(value, 'limit')"
-      @current-change="(value) => handleValueChange(value, 'page')"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'BYPager',
-  props: {
-    limit: {
-      type: Number,
-      default: 15
-    },
-    page: {
-      type: Number,
-      default: 1
-    },
-    totalCount: {
-      type: Number,
-      required: true,
-      default: 25
-    },
-    pageSizes: {
-      type: Array,
-      default: () => [10, 15, 20, 25, 30, 50, 100]
-    }
-  },
-
-  data() {
-    return {
-      pager: {
-        page: this.page,
-        limit: this.limit
-      }
-    }
-  },
-
-  watch: {
-    page: {
-      handler: function(val, oldVal) {
-        this.pager.page = val
-      },
-      immediate: true
-    },
-    limit: {
-      handler: function(val, oldVal) {
-        this.pager.limit = val
-      },
-      immediate: true
-    }
-  },
-  mounted() {
-    // 修改分页文案
-    document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至"
-    document.getElementsByClassName("el-pagination__jump")[0].childNodes[2].nodeValue = ""
-  },
-
-  methods: {
-    handleValueChange(value, field) {
-      if (!value) return
-      const values = {
-        ...this.pager,
-        [field]: value,
-        page: field === "limit" ? 1 : value
-      }
-      this.$emit("onChange", values)
-    }
-  }
-}
-</script>
-
+<template>
+  <div id="pager" class="pager fixed bottom-0 right-0 w-full flex justify-center items-center z-50">
+    <el-pagination
+      :current-page="pager['page']"
+      :page-size="pager['limit']"
+      :page-sizes="pageSizes"
+      background
+      layout="total, prev, pager, next,sizes, jumper"
+      :total="totalCount"
+      @size-change="(value) => handleValueChange(value, 'limit')"
+      @current-change="(value) => handleValueChange(value, 'page')"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BYPager',
+  props: {
+    limit: {
+      type: Number,
+      default: 15
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    totalCount: {
+      type: Number,
+      required: true,
+      default: 25
+    },
+    pageSizes: {
+      type: Array,
+      default: () => [10, 15, 20, 25, 30, 50, 100]
+    }
+  },
+
+  data() {
+    return {
+      pager: {
+        page: this.page,
+        limit: this.limit
+      }
+    }
+  },
+
+  watch: {
+    page: {
+      handler: function(val, oldVal) {
+        this.pager.page = val
+      },
+      immediate: true
+    },
+    limit: {
+      handler: function(val, oldVal) {
+        this.pager.limit = val
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    // 修改分页文案
+    document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至"
+    document.getElementsByClassName("el-pagination__jump")[0].childNodes[2].nodeValue = ""
+  },
+
+  methods: {
+    handleValueChange(value, field) {
+      if (!value) return
+      const values = {
+        ...this.pager,
+        [field]: value,
+        page: field === "limit" ? 1 : value
+      }
+      this.$emit("onChange", values)
+    }
+  }
+}
+</script>
+