@bsgoal/common 0.1.0 → 1.0.1

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

@@ -0,0 +1,42 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-04-15 13:49:25
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-18 18:12:06
+ * @FilePath: \common\src\components\bsgoal-base-table-content\index.vue
+ * @Description: 表格内容 
+ * 
+-->
+
+<script>
+export default {
+    name: "BsgoalBaseTableContent",
+};
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue';
+// props
+const props = defineProps({
+    data: {
+        type: [String,Number,Object,Number,Boolean],
+        default: ''
+    }
+})
+</script>
+<template>
+    <div class="bsgoal-base-table-content">
+        <div class="bas_tabl_content">
+            {{ data }}
+        </div>
+    </div>
+</template>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+.bsgoal-base-table-content {
+    
+}
+</style>
+

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

@@ -0,0 +1,107 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-04-15 16:34:57
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-25 13:50:40
+ * @FilePath: \common\src\components\bsgoal-base-table-pagination\index.vue
+ * @Description: 表格的分页按钮
+ * 
+-->
+
+<script>
+export default {
+  name: 'BsgoalBaseTablePagination'
+}
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref, computed } from 'vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+// props
+const props = defineProps({
+  /**
+   * 当前页数
+   */
+  currentPage: {
+    type: [Number],
+    default: 1
+  },
+  /**
+   * 可选页数集合
+   */
+  pageSizes: {
+    type: [Array],
+    default: () => [10, 20, 30, 40, 50, 100]
+  },
+  /**
+   * 每页显示条目个数
+   */
+  pageSize: {
+    type: [Number],
+    default: 10
+  },
+  /**
+   * 总条目
+   */
+  total: {
+    type: [Number],
+    default: 0
+  }
+})
+
+const emits = defineEmits(['on-size-change', 'on-current-change'])
+
+/**
+ * @Author: canlong.shen
+ * @description: page-size 改变时触发
+ * @default:
+ * @return {*}
+ */
+const triggerSizeChange = (size = 0) => {
+  emits('on-size-change', size)
+}
+/**
+ * @Author: canlong.shen
+ * @description: current-change
+ * @default:
+ * @return {*}
+ */
+const triggerCurrentChange = (current = 1) => {
+  emits('on-current-change', current)
+}
+const page = ref(1)
+</script>
+<template>
+  <div class="bsgoal-base-table-pagination">
+    <div class="base_table_pagination">
+      <el-config-provider :locale="zhCn">
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          v-model:current-page="page"
+          :page-sizes="pageSizes"
+          :page-size="pageSize"
+          :total="total"
+          @size-change="triggerSizeChange"
+          @current-change="triggerCurrentChange"
+        >
+          <template v-slot:next>
+            <span>总数</span>
+          </template>
+        </el-pagination>
+      </el-config-provider>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+.bsgoal-base-table-pagination {
+  text-align: right;
+  .base_table_pagination {
+    display: inline-block;
+    margin-top: 16px;
+  }
+}
+</style>

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

@@ -0,0 +1,113 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-04-21 08:43:39
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-21 18:03:30
+ * @FilePath: \common\src\components\bsgoal-base-tree\demo.vue
+ * @Description: 左侧树的演示
+ * 
+-->
+
+<script>
+export default {
+  name: 'BsgoalBaseTreeDemo'
+}
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import BsgoalBaseTree from './index.vue'
+
+import { ref } from 'vue'
+// props
+const props = defineProps({})
+
+const treeData = ref([])
+const getKey = (prefix, id) => {
+  return `${prefix}-${id}`
+}
+const createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {
+  let id = 0
+  return Array.from({ length: minNodesNumber })
+    .fill(deep)
+    .map(() => {
+      const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren)
+      const nodeKey = getKey(key, ++id)
+      return {
+        id: nodeKey,
+        value: nodeKey,
+        label: nodeKey,
+        children: childrenNumber
+          ? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
+          : undefined
+      }
+    })
+}
+treeData.value = createData(4, 4, 4)
+
+const triggerTreeClick = (value,node,treeNode,event ) => {
+  console.log('value', value)
+  console.log('node', node)
+  console.log('treeNode', treeNode)
+  console.log('event', event)
+}
+
+const treeLazyLoad = (node) => {
+  console.log('treeLazyLoad', node)
+  return new Promise((resove, reject) => {
+    setTimeout(() => {
+      resove([
+        {
+          label: 'label2-1',
+          isLeaf: true
+        },
+        {
+          label: 'label2-2',
+          children: [
+            {
+              label: 'label2-2-1'
+            }
+          ]
+        },
+        {
+          label: 'label2-3'
+        }
+      ])
+    }, 1000)
+  })
+}
+
+const treeInitNode = (node) => {
+  console.log('treeInitNode', node)
+
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve([
+        {
+          value: 'value1',
+          label: 'label1'
+        }
+      ])
+    }, 1000)
+  })
+}
+</script>
+<template>
+  <div class="bsgoal-base-tree-demo">
+    <div class="base_tree_demo">
+      <BsgoalBaseTree
+        :lazy-load="treeLazyLoad"
+        :init-node="treeInitNode"
+        @on-click="triggerTreeClick"
+      />
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

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

@@ -0,0 +1,213 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-04-21 08:43:33
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-25 09:10:35
+ * @FilePath: \common\src\components\bsgoal-base-tree\index.vue
+ * @Description: 虚拟化树型结构 公共组件
+ * 
+-->
+<script>
+export default {
+  name: 'BsgoalBaseTree'
+}
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref, watch } from 'vue'
+import directiveBase from '../../directives/directiveBase.js'
+import BsgoalBaseLine from '../bsgoal-base-line/index.vue'
+import BsgoalBaseTreeFold from '../bsgoal-base-tree-fold/index.vue'
+// props
+const props = defineProps({
+  /**
+   * 树结构 的下边距
+   */
+  gasket: {
+    type: [String, Number],
+    default: 10
+  },
+  /**
+   * 数据
+   */
+  data: {
+    type: [Object, Array],
+    default: () => []
+  },
+  /**
+   * 配置
+   */
+  treeProps: {
+    type: [Object],
+    default: () => ({
+      label: 'label',
+      children: 'children',
+      disabled: 'disabled',
+      isLeaf: 'isLeaf',
+      class: 'class'
+    })
+  },
+  /**
+   * 懒加载数据方法
+   * () => {
+   *   return Promise(resolve =>  resolve([]))
+   * }
+   */
+  lazyLoad: {
+    type: [Function],
+    default: () => {}
+  },
+  /**
+   * 初始化树节点
+   * () => {
+   *   return Promise(resolve =>  resolve([]))
+   * }
+   */
+  initNode: {
+    type: [Function],
+    default: () => {}
+  }
+})
+
+const emits = defineEmits(['on-click'])
+
+// 计算高度的指令
+const vHeight = directiveBase.height
+
+const filterText = ref('')
+const EL_TREE_REF = ref(null)
+
+watch(filterText, (val) => {
+  EL_TREE_REF.value.filter(val)
+})
+
+/**
+ * @Author: canlong.shen
+ * @description: 过滤节点
+ * @param {*} value
+ * @param {*} data
+ * @default:
+ * @return {*}
+ */
+const filterNode = (value, data) => {
+  if (!value) return true
+  return data.label.includes(value)
+}
+// 折叠的状态
+const foldStatus = ref(true)
+/**
+ * @Author: canlong.shen
+ * @description: 当节点被点击的时候触发
+ * @param {*} value 节点点击的节点对象
+ * @param {*} node TreeNode 的 node 属性
+ * @param {*} TreeNode TreeNode
+ * @param {*} event 事件对象
+ * @default:
+ * @return {*}
+ */
+const clickNodeTree = (value, node, treeNode, event) => {
+  emits('on-click', value, node, treeNode, event)
+}
+/**
+ * @Author: canlong.shen
+ * @description:  懒加载数据
+ * @param {*} node
+ * @param {*} resolve
+ * @default:
+ * @return {*}
+ */
+const loadNode = async (node, resolve, props) => {
+  // console.log('props',props);
+  if (node.level === 0) {
+    const initNodeData = await props.initNode(node)
+    // console.log('initNodeData',initNodeData);
+    return resolve(initNodeData || [])
+  } else {
+    const lazyNodeData = await props.lazyLoad(node)
+    // console.log('lazyNodeData',lazyNodeData);
+    resolve(lazyNodeData || [])
+  }
+}
+</script>
+<template>
+  <div class="bsgoal-base-tree">
+    <div class="base_tree" v-height="gasket">
+      <div v-show="foldStatus" class="base_tree_main">
+        <!-- S 查询 -->
+        <el-input v-model="filterText" class="base_tree_main_input" placeholder="输入关键字过滤" />
+        <!-- E 查询 -->
+        <!-- S 树结构 -->
+        <el-tree
+          ref="EL_TREE_REF"
+          lazy
+          highlight-current
+          empty-text="暂无数据"
+          :load="(node, resolve) => loadNode(node, resolve, props)"
+          :expand-on-click-node="false"
+          :props="treeProps"
+          :filter-node-method="filterNode"
+          @node-click="clickNodeTree"
+        />
+        <!-- E 树结构 -->
+      </div>
+      <!-- S 横线 -->
+      <BsgoalBaseLine vertical v-show="foldStatus" />
+      <!-- E 横线 -->
+      <!-- S 折叠按钮 -->
+      <BsgoalBaseTreeFold v-model="foldStatus" />
+      <!-- E 折叠按钮 -->
+    </div>
+  </div>
+</template>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+
+.bsgoal-base-tree {
+  display: inline-block;
+  .base_tree {
+    display: flex;
+    box-sizing: border-box;
+    position: relative;
+    min-width: 14px;
+  }
+  .base_tree_main {
+    width: 221px;
+    padding: 16px;
+
+    // 隐藏掉滚动条
+    scrollbar-width: none; /* firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+    overflow-x: hidden;
+    overflow-y: auto;
+    /*滚动条样式*/
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      background: rgba(0, 0, 0, 0.2);
+      width: 20px;
+    }
+    &::-webkit-scrollbar-track {
+      // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      // border-radius: 0;
+      // background: rgba(0, 0, 0, 0.1);
+      // opacity: 0.1;
+      background-color: #fff;
+    }
+  }
+  .base_tree_main_input {
+    margin-bottom: 10px;
+  }
+
+  .base_tree .el-tree-node__content > i.el-tree-node__expand-icon {
+    padding-left: 0px;
+  }
+}
+</style>

package/src/components/bsgoal-base-tree-fold/index.vue

@@ -0,0 +1,65 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-04-21 14:30:43
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-25 09:11:19
+ * @FilePath: \common\src\components\bsgoal-base-tree-fold\index.vue
+ * @Description:  树结构折叠按钮
+ * 
+-->
+
+<script>
+export default {
+  name: 'BsgoalBaseTreeFold'
+}
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
+
+defineProps(['modelValue'])
+const emits = defineEmits(['update:modelValue'])
+
+let status = ref(true)
+const triggerFold = () => {
+  status.value = !status.value
+  emits('update:modelValue', status.value)
+}
+</script>
+<template>
+  <div class="bsgoal-base-tree-fold">
+    <div class="base_tree_fold" :class="{ 'base_tree_fold--hide': !status }" @click="triggerFold">
+      <el-icon color="#fff"
+        ><ArrowLeft v-show="status" />
+        <ArrowRight v-show="!status" />
+      </el-icon>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+.bsgoal-base-tree-fold {
+  .base_tree_fold {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 10px;
+    margin: auto;
+    width: 14px;
+    height: 38px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 10px;
+    background-color: #409eff;
+  }
+  .base_tree_fold--hide {
+    right: 0px;
+  }
+}
+</style>

package/src/components/layout/layout-home.vue

@@ -0,0 +1,60 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-04-10 13:41:13
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-15 11:20:10
+ * @FilePath: \common\src\components\layout\layout-home.vue
+ * @Description: 首页
+ * 
+-->
+
+<template>
+  <div class="layout-home">
+    <el-container>
+      <el-header class="layout_el_header">
+        <LayoutTopHeader />
+      </el-header>
+      <el-container>
+        <el-aside width="200px">
+          <LayoutLeftMenu />
+        </el-aside>
+        <el-main style="padding:10px; background-color:#f0f2f5 ;">
+          <LayoutRightContainer  style="background-color: #fff;">
+            <router-view />
+          </LayoutRightContainer>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<script>
+export default {
+  name: 'LayoutHome'
+}
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import LayoutLeftMenu from '@/components/layout/layout-left-menu.vue'
+import LayoutTopHeader from '@/components/layout/layout-top-header.vue'
+import LayoutRightContainer from '@/components/layout/layout-right-container.vue'
+</script>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+.layout-home {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.layout_el_header {
+  background-color: #409eff;
+  padding: 0px;
+}
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

package/src/components/layout/layout-left-menu.vue

@@ -0,0 +1,48 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-04-10 14:05:59
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-19 09:27:42
+ * @FilePath: \common\src\components\layout\layout-left-menu.vue
+ * @Description: 左侧菜单栏
+ * 
+-->
+
+<template>
+  <div class="layout-left-menu">
+    <el-menu default-active="0" style="height: calc(100vh - 60px) ;">
+      <template v-for=" (menu, index) of menuList" :key="index">
+        <el-menu-item :index="index">
+          <el-icon><icon-menu /></el-icon>
+          <router-link :to="menu.path">
+            <span>{{ menu.name }}</span>
+          </router-link>
+        </el-menu-item>
+      </template>
+    </el-menu>
+  </div>
+</template>
+<script>
+export default {
+  name: 'LayoutLeftMenu'
+}
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { Menu as IconMenu } from '@element-plus/icons-vue'
+import { ref, computed, toRefs, watch, unref } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const routes = router.getRoutes()
+const { children = [] } = routes.find((fi) => fi.name === 'home') || {}
+const menuList = ref(children)
+</script>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

package/src/components/layout/layout-right-container.vue

@@ -0,0 +1,36 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-04-10 14:12:09
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-13 17:49:15
+ * @FilePath: \common\src\components\layout\layout-right-container.vue
+ * @Description: 主体内容容器
+ * 
+-->
+
+<template>
+  <div class="layout-right-container">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'LayoutRightContainer'
+}
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref, computed, toRefs, watch, unref } from 'vue'
+</script>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+.layout-right-container {
+  height: 100%;
+}
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>