@bsgoal/common 1.5.1 → 1.5.3

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 0 30px 30px}
+@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}

package/package.json

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

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

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-04-23 16:35:24
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-04-28 14:43:37
+ * @LastEditTime: 2023-05-04 10:08:13
  * @FilePath: \common\src\components\bsgoal-base-dialog\demo.vue
  * @Description: 弹窗公共组件 演示
  * 
@@ -18,25 +18,52 @@ export default {
 ---------------------------------------------------------------- */
 import { ref } from 'vue'
 import BsgoalBaseDialog from './index.vue'
-
+import BsgoalBaseTabs from '../bsgoal-base-tabs/index.vue'
 
 // props
 const props = defineProps({})
 
 const dialogVisible = ref(false)
+const dialogVisible2 = ref(false)
 
 const test = () => {
-   console.log('点击了');
-    dialogVisible.value = true
-
+  dialogVisible.value = true
+}
+const test2 = () => {
+  dialogVisible2.value = true
 }
 
+const activeTabName = ref('tab1')
+const tabsConfigOptions = ref([
+  {
+    label: 'tab1',
+    value: 'tab1'
+  },
+  {
+    label: 'tab2',
+    value: 'tab2'
+  },
+  {
+    label: 'tab3',
+    value: 'tab3'
+  },
+  {
+    label: 'tab4',
+    value: 'tab4'
+  }
+])
 </script>
 <template>
   <div class="bsgoal-base-dialog-demo">
     <div class="base_dialog_demo">
-      <BsgoalBaseDialog v-model="dialogVisible" width="600" />
-     <el-button type="primary" @click="test">打开弹窗22</el-button>
+      <BsgoalBaseDialog v-model="dialogVisible" width="600">
+        <BsgoalBaseTabs v-memo="activeTabName" :config-options="tabsConfigOptions" />
+      </BsgoalBaseDialog>
+      <BsgoalBaseDialog v-model="dialogVisible2" size="max" type="form">
+        <BsgoalBaseTabs v-memo="activeTabName" :config-options="tabsConfigOptions" />
+      </BsgoalBaseDialog>
+      <el-button type="primary" @click="test">打开弹窗</el-button>
+      <el-button type="primary" @click="test2">打开弹窗2</el-button>
     </div>
   </div>
 </template>

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

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-04-23 16:35:19
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-04-28 14:40:14
+ * @LastEditTime: 2023-05-04 10:07:14
  * @FilePath: \common\src\components\bsgoal-base-dialog\index.vue
  * @Description:  弹窗公共组件
  * 
@@ -16,7 +16,7 @@ export default {
 <script setup>
 /* setup模板
 ---------------------------------------------------------------- */
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 // props
 const props = defineProps({
   /**
@@ -46,14 +46,29 @@ const props = defineProps({
   confirmTxt: {
     type: [String],
     default: '确定'
-  }, 
- /**
+  },
+  /**
    * 宽度
    */
-  width:{
-    type:[String,Number]
+  width: {
+    type: [String, Number]
+  },
+  /**
+   * 弹窗类型
+   */
+  type: {
+    type: [String],
+    default: 'default',
+    validator: (v) => ['default', 'form', 'blank'].includes(v)
+  },
+  /**
+   * 弹窗大小
+   */
+  size: {
+    type: [String, Number],
+    default: 'medium',
+    validator: (v) => ['small', 'medium', 'lagre', 'max', 'dnymic'].includes(v)
   }
-
 })
 
 const emits = defineEmits(['update:modelValue', 'on-confirm'])
@@ -89,16 +104,41 @@ watch(
 watch(dialogVisible, (v) => {
   emits('update:modelValue', v)
 })
+
+//  设置不同尺寸
+
+const widthGet = computed(() => {
+  const { width, size } = props
+
+  if (width) {
+    return width
+  }
+
+  switch (size) {
+    case 'small':
+      return '480px'
+    case 'medium':
+      return '720px'
+    case 'lagre':
+      return '960px'
+    case 'max':
+      return '1232px'
+    case 'dnymic':
+      return '80%'
+    default:
+      return width
+  }
+})
 </script>
 <template>
   <div class="bsgoal-base-dialog">
     <div class="base_dialog">
       <!-- S 组件实体 -->
-      <el-dialog v-model="dialogVisible" custom-class="bsgoal_base_dialog_main" :width="width">
+      <el-dialog v-model="dialogVisible" custom-class="bsgoal_base_dialog_main" :width="widthGet">
         <template #header>
           <div class="base_dialog_header">{{ title }}</div>
         </template>
-        <div class="base_dialog_content">
+        <div :class="['base_dialog_content', { 'base_dialog_content--form': type === 'form' }]">
           <slot></slot>
         </div>
         <template #footer>
@@ -133,6 +173,14 @@ watch(dialogVisible, (v) => {
       }
     }
     .el-dialog__body {
+      padding: 0px;
+    }
+
+    .base_dialog_content {
+      padding: 30px;
+    }
+
+    .base_dialog_content--form {
       padding: 0px 0px 30px 30px;
     }
   }