@bsgoal/common 1.5.3 → 1.5.5

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";.bsgoal-base-form .base_form{padding:16px 6px 8px 16px}.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-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-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-search-operation{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bsgoal-base-search-operation .operation_fold{margin-left:12px;cursor:pointer;min-width:3em}.bsgoal-base-cascader{width:100%}.bsgoal-base-cascader .base_cascader{width: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-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:#409eff}.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-dialog .base_dialog_header{font-weight:500;color:#303133;font-size:16px}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__header{padding:16px 30px;margin-right:0;background-color:#f5f7fa}.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 30px 30px}
+@charset "UTF-8";.base_tooltip_popper{max-width:20em}.bsgoal-base-form .base_form{padding:16px 6px 8px 16px}.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-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-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-search-operation{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bsgoal-base-search-operation .operation_fold{margin-left:12px;cursor:pointer;min-width:3em}.bsgoal-base-cascader{width:100%}.bsgoal-base-cascader .base_cascader{width: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-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:#409eff}.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-dialog .base_dialog_header{font-weight:500;color:#303133;font-size:16px}.bsgoal-base-dialog .bsgoal_base_dialog_main .el-dialog__header{padding:16px 30px;margin-right:0;background-color:#f5f7fa}.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 30px 30px}

package/package.json

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

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

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-04-10 15:00:00
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-04-20 17:47:40
+ * @LastEditTime: 2023-05-04 14:20:32
  * @FilePath: \common\src\components\bsgoal-base-form\demo.vue
  * @Description: 表单公共组件演示组件
  * 
@@ -10,7 +10,7 @@
 
 <template>
   <div class="bsgoal-base-form-demo">
-    <BsgoalBaseForm ref="BSGOAL_BASE_FORM_REF" :config-options="configOptions" :values="values" />
+    <BsgoalBaseForm readonly ref="BSGOAL_BASE_FORM_REF" :limits="10" :config-options="configOptions" :values="values" />
     <el-button type="primary" @click="confirm">提交</el-button>
   </div>
 </template>
@@ -27,7 +27,8 @@ import { ref, computed, toRefs, watch, unref } from 'vue'
 import EnumType from '../../enums/enumType.js'
 
 const values = ref({
-   prop1:'6666'
+   prop1:'66111111111111166',
+   prop2:'select1'
 })
 
 const BSGOAL_BASE_FORM_REF = ref(null)
@@ -49,7 +50,8 @@ const configOptions = ref([
     prop: 'prop1',
     type: EnumType.INPUT,
     width: '100px',
-    rules:true
+    rules:true,
+    readonly:true
   },
   {
     label: 'prop2',
@@ -73,7 +75,9 @@ const configOptions = ref([
         label: 'select4',
         value: 'select5'
       }
-    ]
+    ],
+    readonly:true
+
   },
   {
     label: 'prop3',

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

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-04-17 11:44:29
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-04-25 09:06:35
+ * @LastEditTime: 2023-05-04 14:21:33
  * @FilePath: \common\src\components\bsgoal-base-form\index.vue
  * @Description:  表单公共组件 
  * 
@@ -16,10 +16,11 @@ export default {
 <script setup>
 /* setup模板
 ---------------------------------------------------------------- */
-import { ref, computed, unref, watchEffect, nextTick } from 'vue'
+import { ref, computed, unref, watchEffect } from 'vue'
 import EnumType from '../../enums/enumType.js'
 import baseDirective from '../../directives/directiveBase.js'
 import { ElMessage } from 'element-plus'
+import BsgoalBaseTooltip from '../bsgoal-base-tooltip/index.vue'
 // props
 const props = defineProps({
   /**
@@ -58,6 +59,20 @@ const props = defineProps({
   values: {
     type: [Object],
     default: () => ({})
+  },
+  /**
+   * 全局字数限制
+   */
+  limits: {
+    type: [Number],
+    default: 0
+  },
+  /**
+   * 全局只读
+   */
+  readonlys: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -260,7 +275,6 @@ const validateForm = (callback = () => {}) => {
     } else {
       callback(false)
 
-      console.log('field', field)
       const firstProp = Object.keys(field)[0]
       const {
         [firstProp]: {
@@ -291,14 +305,15 @@ defineExpose({
                 prop = '',
                 type = 'text',
                 placeholder = '',
-                readonly = false,
+                readonly = readonlys,
                 clearable = true,
                 rows = 2,
                 min = 1,
                 max = 10,
                 range = [],
                 format = '',
-                rules = []
+                rules = [],
+                limit = limits
               } = {},
               index
             ) of configOptionsGet"
@@ -465,7 +480,7 @@ defineExpose({
                 <!-- S 文本内容 -->
                 <template v-else>
                   <div>
-                    {{ model[prop] }}
+                    <BsgoalBaseTooltip :content="model[prop]" :limit="limit" />
                   </div>
                 </template>
                 <!-- E 文本内容 -->

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

@@ -0,0 +1,40 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-04 10:59:33
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-04 11:19:39
+ * @FilePath: \common\src\components\bsgoal-base-tooltip\demo.vue
+ * @Description: 文字提示公共组件演示
+ * 
+-->
+
+<script>
+export default {
+  name: "BsgoalBaseTooltipDemo",
+};
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue';
+import  BsgoalBaseTooltip from './index.vue'
+// props
+ const props = defineProps({
+
+})
+</script>
+<template>
+  <div class="bsgoal-base-tooltip-demo">
+    <div class="base_tooltip_demo">
+        <BsgoalBaseTooltip content="愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人" />
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

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

@@ -0,0 +1,97 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-04 10:59:25
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-04 14:17:17
+ * @FilePath: \common\src\components\bsgoal-base-tooltip\index.vue
+ * @Description:  文字提示公共组件 
+ * 
+-->
+
+<script>
+export default {
+  name: 'BsgoalBaseTooltip'
+}
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref, computed, unref } from 'vue'
+// props
+const props = defineProps({
+  /**
+   * 文字提示内容
+   */
+  content: {
+    type: [String],
+    default: ''
+  },
+  /**
+   * 类型
+   */
+  type: {
+    type: [String],
+    default: 'text',
+    validator: (v) => ['text', 'custom'].includes(v)
+  },
+  /**
+   * 限定显示的字符
+   */
+  limit: {
+    type: [Number],
+    default: 10
+  },
+  /**
+   *  最大内容宽度
+   */
+  max: {
+    type: [Number, String],
+    default: '10em'
+  }
+})
+
+// ---> S 字符数限制 <---
+const contentGet = computed(() => {
+  const { content = '', limit = 0 } = props
+  let contentString = content
+  const contentLength = content.length
+  if ( limit && contentLength > limit) {
+    contentString = `${content.substring(0, limit)}...`
+  }
+  return contentString
+})
+// ---> E 字符数限制 <---
+
+// ---> S 禁用tooltip <---
+const disabledGet = computed(() => {
+  const { content = '', limit = 0 } = props
+  return content.length < limit || !limit
+})
+// ---> E 禁用tooltip <---
+</script>
+<template>
+  <div class="bsgoal-base-tooltip">
+    <el-tooltip
+      class="base_tooltip"
+      effect="dark"
+      popper-class="base_tooltip_popper"
+      placement="top-start"
+      :content="content"
+      :disabled="disabledGet"
+    >
+      <slot>
+        {{ contentGet }}
+      </slot>
+    </el-tooltip>
+  </div>
+</template>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+.bsgoal-base-tooltip {
+}
+
+.base_tooltip_popper {
+  max-width: 20em;
+}
+</style>

package/src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-04-10 10:41:52
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-04-28 16:17:42
+ * @LastEditTime: 2023-05-04 11:12:13
  * @FilePath: \common\src\router\index.js
  * @Description: 路由配置
  * 
@@ -73,6 +73,11 @@ const router = createRouter({
           name: 'tabs标签',
           component: import('@/components/bsgoal-base-tabs/demo.vue')
         },
+        {
+          path: '/bsgoal-base-tooltip-demo',
+          name: '文字提示',
+          component: import('@/components/bsgoal-base-tooltip/demo.vue')
+        },
       ]
     }
   ]