@bsgoal/common 2.14.7 → 2.15.1

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";.base_tooltip_popper{max-width:20em}.bsgoal-base-form .base_form .el-form-item{margin-right:10px}.bsgoal-base-form .base_form div.el-input,.bsgoal-base-form .base_form div.el-select{width:100%}.bsgoal-base-form .base_form--visible{width:0px;height:0px;overflow:hidden}.bsgoal-base-table-pagination{text-align:right}.bsgoal-base-table-pagination .base_table_pagination{display:inline-block;margin-top:16px}.bsgoal-base-table-empty .base_table_empty{text-align:center}.bsgoal-base-table-empty .base_table_empty_img{padding-top:16px;line-height:initial}.bsgoal-base-table-empty .base_table_empty_text{display:inline-block}.bsgoal-base-table .base_table{padding:16px}.bsgoal-base-table .base_table_menu{margin-bottom:8px}.bsgoal-base-table .el-table__body-wrapper{overflow-y:hidden!important}.bsgoal-base-table .el-scrollbar__view{height:100%}.bsgoal-base-table .base_table--tree{margin-top:10px}.bsgoal-base-table th>div.cell{white-space:nowrap}.bsgoal-base-line .base_line{height:10px;background-color:#f0f2f5}.bsgoal-base-line .bsgoal-base-line__vertical{display:inline-block;height:100%}.bsgoal-base-line .base_line__vertical{width:10px;height:100%}.bsgoal-base-line .bsgoal-base-line__fill{position:absolute;left:0;right:0}.bsgoal-base-search-operation{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:33.5px}.bsgoal-base-search-operation .operation_fold{margin-left:12px;cursor:pointer;min-width:3em}.bsgoal-base-cascader{height:100%;width:100%}.bsgoal-base-cascader .base_cascader{width:inherit;height:inherit}.bsgoal-base-search .base_search{padding:16px 6px 8px 16px}.bsgoal-base-search .base_search .el-form-item{margin-bottom:8px;margin-right:10px}.bsgoal-base-search .base_search div.el-input,.bsgoal-base-search .base_search div.el-select{width:100%}.bsgoal-base-search .el-col{margin-bottom:0!important}.bsgoal-base-tree-fold .base_tree_fold{position:absolute;top:0;bottom:0;right:10px;margin:auto;width:14px;height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:10px;background-color:var(--el-color-primary)}.bsgoal-base-tree-fold .base_tree_fold--hide{right:0px}.bsgoal-base-tree{display:inline-block}.bsgoal-base-tree .base_tree{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;min-width:14px}.bsgoal-base-tree .base_tree_main{width:221px;padding:16px;scrollbar-width:none;-ms-overflow-style:none;overflow-x:hidden;overflow-y:auto}.bsgoal-base-tree .base_tree_main::-webkit-scrollbar{width:6px;height:6px}.bsgoal-base-tree .base_tree_main::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,.2);width:20px}.bsgoal-base-tree .base_tree_main::-webkit-scrollbar-track{background-color:#fff}.bsgoal-base-tree .base_tree_main_input{margin-bottom:10px}.bsgoal-base-tree .base_tree .el-tree-node__content>i.el-tree-node__expand-icon{padding-left:0}.bsgoal-base-tree .base_tree_node{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1}.bsgoal-base-tree .base_tree_node_label{-webkit-box-flex:1;-ms-flex:1;flex:1}.bsgoal-base-tree .base_tree_node_icon{-webkit-box-flex:0;-ms-flex:none;flex:none}.bsgoal-base-button,.bsgoal-base-button .base_button{display:inline-block}.bsgoal-base-dialog .base_dialog_header{font-weight:500;color:#303133;font-size:16px}.bsgoal-base-dialog .bsgoal-dialog__footer--conceal .el-dialog__footer{display:none}.bsgoal-base-dialog .el-dialog__footer{height:initial;line-height:initial}.bsgoal-base-dialog .el-dialog__footer .el-button{margin-left:initial}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__header{padding:16px 30px;margin-right:0;background-color:#f5f7fa;height:initial!important}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__header .el-dialog__headerbtn{top:0px;right:8px}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__body{padding:0}.bsgoal-base-dialog .bsgoal_base_dialog_main .base_dialog_content{padding:30px}.bsgoal-base-dialog .bsgoal_base_dialog_main .base_dialog_content--form{padding:0 0 0 30px}.bsgoal-base-dialog .bsgoal_base_dialog_main .base_dialog_content--form .bsgoal-base-form .base_form{padding:initial;padding-top:16px}.bsgoal-base-dialog .bsgoal_base_dialog_main .base_dialog_content--blank{padding-top:0}.bsgoal-base-dialog .base_dialog_footer_cancel{margin-right:16px}.bsgoal-base-tabs .base_tabs--fill{position:absolute;top:8px;bottom:0;left:16px;right:16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.bsgoal-base-tabs .base_tabs--fill>div.el-tabs__content{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative}.bsgoal-base-alert .el-alert,.bsgoal-base-item .base_item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bsgoal-base-item .base_item_label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:14px;color:#606266;height:32px;line-height:32px;padding-right:12px}.bsgoal-base-tree-table .base_tree_table{display:-webkit-box;display:-ms-flexbox;display:flex}.bsgoal-base-tree-table .base_tree_table--table{overflow:hidden}.bsgoal-base-viewer{display:inline-block}.bsgoal-base-viewer .base_viewer{margin:4px 8px}
+@charset "UTF-8";.base_tooltip_popper{max-width:20em}.bsgoal-base-form .base_form .el-form-item{margin-right:10px}.bsgoal-base-form .base_form div.el-input,.bsgoal-base-form .base_form div.el-select{width:100%}.bsgoal-base-form .base_form--visible{width:0px;height:0px;overflow:hidden}.bsgoal-base-sizes{display:inline-block}.bsgoal-base-sizes .base_sizes_input{cursor:pointer;margin-left:16px}.bsgoal-base-sizes .base_sizes_item{text-align:center;font-size:14px;padding:0 20px;color:#606266;height:34px;line-height:34px;cursor:pointer}.bsgoal-base-sizes .base_sizes_item:hover{background-color:#f5f7fa}.bsgoal-base-sizes .base_sizes_item--selected{color:#409eff;font-weight:700}.bsgoal-base-table-pagination{text-align:right}.bsgoal-base-table-pagination .base_table_pagination{display:inline-block;margin-top:16px}.bsgoal-base-table-empty .base_table_empty{text-align:center}.bsgoal-base-table-empty .base_table_empty_img{padding-top:16px;line-height:initial}.bsgoal-base-table-empty .base_table_empty_text{display:inline-block}.bsgoal-base-table .base_table{padding:16px}.bsgoal-base-table .base_table_menu{margin-bottom:8px}.bsgoal-base-table .el-table__body-wrapper{overflow-y:hidden!important}.bsgoal-base-table .el-scrollbar__view{height:100%}.bsgoal-base-table .base_table--tree{margin-top:10px}.bsgoal-base-table th>div.cell{white-space:nowrap}.bsgoal-base-line .base_line{height:10px;background-color:#f0f2f5}.bsgoal-base-line .bsgoal-base-line__vertical{display:inline-block;height:100%}.bsgoal-base-line .base_line__vertical{width:10px;height:100%}.bsgoal-base-line .bsgoal-base-line__fill{position:absolute;left:0;right:0}.bsgoal-base-search-operation{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:33.5px}.bsgoal-base-search-operation .operation_fold{margin-left:12px;cursor:pointer;min-width:3em}.bsgoal-base-cascader{height:100%;width:100%}.bsgoal-base-cascader .base_cascader{width:inherit;height:inherit}.bsgoal-base-search .base_search{padding:16px 6px 8px 16px}.bsgoal-base-search .base_search .el-form-item{margin-bottom:8px;margin-right:10px}.bsgoal-base-search .base_search div.el-input,.bsgoal-base-search .base_search div.el-select{width:100%}.bsgoal-base-search .el-col{margin-bottom:0!important}.bsgoal-base-tree-fold .base_tree_fold{position:absolute;top:0;bottom:0;right:10px;margin:auto;width:14px;height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:10px;background-color:var(--el-color-primary)}.bsgoal-base-tree-fold .base_tree_fold--hide{right:0px}.bsgoal-base-tree{display:inline-block}.bsgoal-base-tree .base_tree{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;min-width:14px}.bsgoal-base-tree .base_tree_main{width:221px;padding:16px;scrollbar-width:none;-ms-overflow-style:none;overflow-x:hidden;overflow-y:auto}.bsgoal-base-tree .base_tree_main::-webkit-scrollbar{width:6px;height:6px}.bsgoal-base-tree .base_tree_main::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,.2);width:20px}.bsgoal-base-tree .base_tree_main::-webkit-scrollbar-track{background-color:#fff}.bsgoal-base-tree .base_tree_main_input{margin-bottom:10px}.bsgoal-base-tree .base_tree .el-tree-node__content>i.el-tree-node__expand-icon{padding-left:0}.bsgoal-base-tree .base_tree_node{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1}.bsgoal-base-tree .base_tree_node_label{-webkit-box-flex:1;-ms-flex:1;flex:1}.bsgoal-base-tree .base_tree_node_icon{-webkit-box-flex:0;-ms-flex:none;flex:none}.bsgoal-base-button,.bsgoal-base-button .base_button{display:inline-block}.bsgoal-base-dialog .base_dialog_header{font-weight:500;color:#303133;font-size:16px}.bsgoal-base-dialog .bsgoal-dialog__footer--conceal .el-dialog__footer{display:none}.bsgoal-base-dialog .el-dialog__footer{height:initial;line-height:initial}.bsgoal-base-dialog .el-dialog__footer .el-button{margin-left:initial}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__header{padding:16px 30px;margin-right:0;background-color:#f5f7fa;height:initial!important}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__header .el-dialog__headerbtn{top:0px;right:8px}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__body{padding:0}.bsgoal-base-dialog .bsgoal_base_dialog_main .base_dialog_content{padding:30px}.bsgoal-base-dialog .bsgoal_base_dialog_main .base_dialog_content--form{padding:0 0 0 30px}.bsgoal-base-dialog .bsgoal_base_dialog_main .base_dialog_content--form .bsgoal-base-form .base_form{padding:initial;padding-top:16px}.bsgoal-base-dialog .bsgoal_base_dialog_main .base_dialog_content--blank{padding-top:0}.bsgoal-base-dialog .base_dialog_footer_cancel{margin-right:16px}.bsgoal-base-tabs .base_tabs--fill{position:absolute;top:8px;bottom:0;left:16px;right:16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.bsgoal-base-tabs .base_tabs--fill>div.el-tabs__content{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative}.bsgoal-base-alert .el-alert,.bsgoal-base-item .base_item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bsgoal-base-item .base_item_label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:14px;color:#606266;height:32px;line-height:32px;padding-right:12px}.bsgoal-base-tree-table .base_tree_table{display:-webkit-box;display:-ms-flexbox;display:flex}.bsgoal-base-tree-table .base_tree_table--table{overflow:hidden}.bsgoal-base-viewer{display:inline-block}.bsgoal-base-viewer .base_viewer{margin:4px 8px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsgoal/common",
-  "version": "2.14.7",
+  "version": "2.15.1",
   "private": false,
   "files": [
     "dist",

package/src/components/bsgoal-base-sizes/demo.vue

@@ -0,0 +1,34 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-06-27 17:10:41
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-06-28 09:12:38
+ * @FilePath: \common\src\components\bsgoal-base-sizes\demo.vue
+ * @Description: 页数切换
+ * 
+-->
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+import BsgoalBaseSizes from './index.vue'
+defineOptions({
+  name: 'BsgoalBaseSizesDemo'
+})
+
+const props = defineProps({})
+
+const triggerSizeChange = (params = '') => {
+  console.log(params)
+}
+</script>
+<template>
+  <div class="bsgoal-base-sizes-demo">
+    <div style="height: 400px; background-color: red"></div>
+    <BsgoalBaseSizes :page-size="20" @on-size-change="triggerSizeChange" />
+  </div>
+</template>
+<style lang="scss">
+.bsgoal-base-sizes-demo {
+}
+</style>

package/src/components/bsgoal-base-sizes/index.vue

@@ -0,0 +1,169 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-06-27 16:52:31
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-06-28 10:44:04
+ * @FilePath: \common\src\components\bsgoal-base-sizes\index.vue
+ * @Description: 页数切换 公共组件
+ * 
+-->
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref, watch, watchEffect } from 'vue'
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+defineOptions({
+  name: 'BsgoalBaseSizes'
+})
+
+const props = defineProps({
+  /**
+   * 每页显示个数选择器的选项设置
+   */
+  pageSizes: {
+    type: [Array],
+    default: () => [10, 20, 30, 40, 50, 100]
+  },
+
+  /**
+   * 每页显示条目个数
+   */
+  pageSize: {
+    type: [Number],
+    default: 0
+  },
+  /**
+   * width 宽度
+   */
+  width: {
+    type: [String, Number],
+    default: 110
+  }
+})
+
+const emits = defineEmits(['on-size-change'])
+
+// ---> S popover <---
+const visible = ref(false)
+const suffixIcon = ref(ArrowDown)
+
+const showPopover = () => {
+  suffixIcon.value = ArrowUp
+}
+const hidePopover = () => {
+  suffixIcon.value = ArrowDown
+}
+
+const selectedIndex = ref(-1)
+const selectedSize = ref(10)
+
+watch(
+  () => props.pageSize,
+  () => {
+    const { pageSize = 0, pageSizes = [] } = props
+
+    const curIndex = pageSizes.findIndex((fi) => fi === pageSize)
+
+    if (curIndex !== -1) {
+      selectedIndex.value = curIndex
+      selectedSize.value = pageSize 
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+/**
+ * @Author: canlong.shen
+ * @description: 单击单项
+ * @param {*} size
+ * @param {*} key
+ * @default:
+ * @return {*}
+ */
+const handleSizeItem = (size = 0, index = 0) => {
+  selectedIndex.value = index
+  selectedSize.value = size
+  emits('on-size-change', size)
+  visible.value = false
+}
+// ---> E popover <---
+
+// ---> S input <---
+const content = ref('')
+
+watchEffect(() => {
+  const curPageSize = selectedSize.value
+  content.value = `${curPageSize}条/页`
+})
+
+// ---> E input <---
+</script>
+<template>
+  <div class="bsgoal-base-sizes">
+    <el-popover
+      class="base_sizes"
+      placement="top"
+      trigger="click"
+      :width="`${width}px`"
+      v-model:visible="visible"
+      :teleported="false"
+      @show="showPopover"
+      @hide="hidePopover"
+    >
+      <template #reference>
+        <el-input
+          v-model="content"
+          readonly
+          class="base_sizes_input"
+          placeholder="Please input"
+          :style="{ width: `${width}px` }"
+          :suffix-icon="suffixIcon"
+        >
+        </el-input>
+      </template>
+
+      <template #default>
+        <template v-for="(size, key) of pageSizes" :key="key">
+          <div
+            class="base_sizes_item"
+            :class="{ 'base_sizes_item--selected': selectedIndex === key }"
+            @click="handleSizeItem(size, key)"
+          >
+            {{ `${size}条/页` }}
+          </div>
+        </template>
+      </template>
+    </el-popover>
+  </div>
+</template>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+.bsgoal-base-sizes {
+  display: inline-block;
+  .base_sizes_input {
+    cursor: pointer;
+    margin-left: 16px;
+  }
+  .base_sizes_item {
+    text-align: center;
+    font-size: 14px;
+    padding: 0 20px;
+    color: #606266;
+    height: 34px;
+    line-height: 34px;
+    cursor: pointer;
+  }
+
+  .base_sizes_item:hover {
+    background-color: #f5f7fa;
+  }
+
+  .base_sizes_item--selected {
+    color: #409eff;
+    font-weight: 700;
+  }
+}
+</style>

package/src/components/bsgoal-base-table-pagination/demo.vue

@@ -0,0 +1,35 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-06-27 16:30:46
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-06-28 10:02:50
+ * @FilePath: \common\src\components\bsgoal-base-table-pagination\demo.vue
+ * @Description: 分页公共组件 demo
+ * 
+-->
+
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+import BsgoalBaseTablePagination from './index.vue'
+defineOptions({
+  name: 'BsgoalBaseTablePaginationDemo'
+})
+
+const props = defineProps({})
+</script>
+<template>
+  <div class="bsgoal-base-table-pagination-demo">
+    <div style="height: 300px; background-color: red;"></div>
+    <BsgoalBaseTablePagination  />
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

package/src/components/bsgoal-base-table-pagination/index.vue

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-04-15 16:34:57
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-06-25 16:04:50
+ * @LastEditTime: 2023-06-28 10:12:16
  * @FilePath: \common\src\components\bsgoal-base-table-pagination\index.vue
  * @Description: 表格的分页按钮
  * 
@@ -13,7 +13,7 @@
 ---------------------------------------------------------------- */
 import { ref, computed, inject, unref } from 'vue'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-
+import BsgoalBaseSizes from '../bsgoal-base-sizes/index.vue'
 defineOptions({
   name: 'BsgoalBaseTablePagination'
 })
@@ -77,7 +77,7 @@ const page = ref(1)
       <el-config-provider :locale="zhCn">
         <el-pagination
           background
-          layout="total, sizes, prev, pager, next, jumper"
+          layout="total, slot, prev, pager, next, jumper"
           v-model:current-page="page"
           :page-sizes="pageSizes"
           :page-size="pageSize"
@@ -85,8 +85,12 @@ const page = ref(1)
           @size-change="triggerSizeChange"
           @current-change="triggerCurrentChange"
         >
-          <template v-slot:next>
-            <span>总数</span>
+          <template #default="">
+            <BsgoalBaseSizes
+              :page-sizes="pageSizes"
+              :page-size="pageSize"
+              @on-size-change="triggerSizeChange"
+            />
           </template>
         </el-pagination>
       </el-config-provider>

package/src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-04-10 10:41:52
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-06-21 16:56:42
+ * @LastEditTime: 2023-06-27 17:17:30
  * @FilePath: \common\src\router\index.js
  * @Description: 路由配置
  * 
@@ -18,6 +18,16 @@ const router = createRouter({
       name: 'home',
       component: LayoutHome,
       children: [
+        {
+          path: '/bsgoal-base-sizes-demo',
+          name: '页数切换',
+          component: import('@/components/bsgoal-base-sizes/demo.vue')
+        },
+        {
+          path: '/bsgoal-base-table-pagination-demo',
+          name: '表格分页',
+          component: import('@/components/bsgoal-base-table-pagination/demo.vue')
+        },
         {
           path: '/bsgoal-base-viewer-demo',
           name: '图片预览',