@bsgoal/common 1.7.8 → 1.8.1

package/package.json

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

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

@@ -29,6 +29,10 @@ const confirm = () => {
   })
 }
 
+
+
+
+
 // 配置项
 const configOptions = ref([
   {
@@ -191,9 +195,9 @@ export default {
       :values="values"
       none="--"
     >
-     <template #prop1="{option}">
+     <!-- <template #prop1="{option}">
          <div>666 {{ option }} </div>
-     </template>
+     </template> -->
     </BsgoalBaseForm>
     <el-button type="primary" @click="confirm">提交</el-button>
   </div>

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

@@ -0,0 +1,49 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-20 13:51:53
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-20 14:48:43
+ * @FilePath: \common\src\components\bsgoal-base-layout\demo.vue
+ * @Description: 布局组件 演示
+ * 
+-->
+
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+import BsgoalBaseLayout from './index.vue'
+// props
+const props = defineProps({})
+</script>
+<script>
+export default {
+  name: 'BsgoalBaseLayoutDemo'
+}
+</script>
+<template>
+  <div class="bsgoal-base-layout-demo">
+    <BsgoalBaseLayout>
+      <template #area>
+        <div>0</div>
+      </template>
+      <template #area1>
+        <div>1</div>
+      </template>
+      <template #area2>
+        <div>2</div>
+      </template>
+      <template #area13>
+        <div>3</div>
+      </template>
+    </BsgoalBaseLayout>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

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

@@ -0,0 +1,59 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-05-20 13:51:38
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-05-20 15:22:33
+ * @FilePath: \common\src\components\bsgoal-base-layout\index.vue
+ * @Description: 响应式 布局
+ * 
+-->
+
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref, useSlots } from 'vue'
+// props
+const props = defineProps({
+  /**
+   * 间隔
+   */
+  gutter: {
+    type: [Number],
+    default: 0
+  },
+  /**
+   * 划分的比例
+   */
+  ratio: {
+    type: [Number],
+    default: 12
+  }
+})
+
+// ---> S 插槽 <---
+const slots = useSlots()
+const slotNames = ref(Object.keys(slots))
+// ---> E 插槽 <---
+</script>
+<script>
+export default {
+  name: 'BsgoalBaseLayout'
+}
+</script>
+<template>
+  <div class="bsgoal-base-layout">
+    <el-row class="base_layout" :gutter="gutter">
+      <template v-for="(name, key) of slotNames" :key="key">
+        <el-col :xs="24" :sm="24" :md="ratio" :lg="ratio" :xl="ratio">
+          <slot :name="name"></slot>
+        </el-col>
+      </template>
+    </el-row>
+  </div>
+</template>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+.bsgoal-base-layout {
+}
+</style>

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

@@ -214,12 +214,12 @@ setTimeout(() => {
   ]
 }, 3000)
 
-const options = ref([
+const configOptionsTable = ref([
   {
     label: '列列列列列列列列列1',
     prop: 'prop1',
-    tooltip: true,
-    limit: 3
+    // tooltip: true,
+    // limit: 3
   },
   {
     label: '列列列列列列列列列2',
@@ -256,15 +256,17 @@ const clearData = () => {
       operation
       selection
       :has-page="false"
-      :config-options="options"
+      :config-options="configOptionsTable"
       :data="data"
       :auto-height="false"
     >
+      <!-- S 操作项 -->
       <template v-slot:operation="{ row }">
         <div>
-          <el-button type="primary">操作按钮</el-button>
+          {{ row }}
         </div>
       </template>
+      <!-- E 操作项 -->
     </BsgoalBaseTable>
   </div>
 </template>

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

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-04-28 16:01:11
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-04-28 16:37:14
+ * @LastEditTime: 2023-05-20 15:51:07
  * @FilePath: \common\src\components\bsgoal-base-tabs\demo.vue
  * @Description: tabs 标签切页 公共组件演示
 -->
@@ -43,7 +43,7 @@ const  config = ref([
   <div class="bsgoal-base-tabs-demo">
     <div class="base_tabs_demo">
       {{ activeTabName }}
-      <BsgoalBaseTabs v-model="activeTabName" :config-options="config" > 
+      <BsgoalBaseTabs :config-options="config" > 
         <template #tab1>
           <div>
              这是 tab1 

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

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-04-28 16:01:06
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-05-19 17:52:36
+ * @LastEditTime: 2023-05-20 15:50:39
  * @FilePath: \common\src\components\bsgoal-base-tabs\index.vue
  * @Description: tabs 标签页公共组件
  * 
@@ -16,7 +16,7 @@ export default {
 <script setup>
 /* setup模板
 ---------------------------------------------------------------- */
-import { ref } from 'vue'
+import { ref, unref } from 'vue'
 const props = defineProps({
   /**
    * 配置项
@@ -62,6 +62,15 @@ const props = defineProps({
  */
 const emits = defineEmits(['update:modelValue'])
 
+// ---> S modelValue Get <---
+
+// ---> E modelValue Get <---
+const modelValueGet = () => {
+  const { modelValue = '', configOptions = [] } = props
+  const nameList = unref(configOptions).map((mi) => mi.value)
+  const actionName = unref(modelValue) 
+  return actionName || nameList[0]
+}
 // ---> S tab的切换 <---
 const changeTab = (activeValue = '') => {
   emits('update:modelValue', activeValue)
@@ -71,10 +80,10 @@ const changeTab = (activeValue = '') => {
 <template>
   <div class="bsgoal-base-tabs">
     <el-tabs
-      :stretch="stretch"
       class="bsgoal_base_tabs"
+      :stretch="stretch"
       :type="type"
-      :model-value="modelValue"
+      :model-value="modelValueGet"
       @tab-change="changeTab"
     >
       <template v-for="({ label, value }, key) of configOptions" :key="key">

package/src/entry.js

@@ -7,6 +7,7 @@ import BsgoalBaseDialog from '@/components/bsgoal-base-dialog/index.vue'
 import BsgoalBaseTabs from '@/components/bsgoal-base-tabs/index.vue'
 import BsgoalBaseLink from '@/components/bsgoal-base-link/index.vue'
 import BsgoalBaseButton from '@/components/bsgoal-base-button/index.vue'
+import BsgoalBaseLayout from '@/components/bsgoal-base-layout/index.vue'
 import enumType from '@/enums/enumType.js'
 import { useFetch } from '@/combines/useFetchs.js'
 
@@ -27,7 +28,8 @@ export default {
       BsgoalBaseDialog,
       BsgoalBaseTabs,
       BsgoalBaseLink,
-      BsgoalBaseButton
+      BsgoalBaseButton,
+      BsgoalBaseLayout
     }
 
     for (const [name, component] of Object.entries(componentsMap)) {

package/src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-04-10 10:41:52
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-05-18 16:38:23
+ * @LastEditTime: 2023-05-20 14:37:30
  * @FilePath: \common\src\router\index.js
  * @Description: 路由配置
  * 
@@ -88,6 +88,11 @@ const router = createRouter({
           name: '按钮',
           component: import('@/components/bsgoal-base-button/demo.vue')
         },
+        {
+          path: 'bsgoal-base-layout-demo',
+          name: '布局',
+          component: import('@/components/bsgoal-base-layout/demo.vue')
+        },
       ]
     }
   ]