@bsgoal/common 2.12.1 → 2.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsgoal/common",
-  "version": "2.12.1",
+  "version": "2.13.1",
   "private": false,
   "files": [
     "dist",
@@ -28,7 +28,8 @@
   "dependencies": {
     "element-plus": "^2.3.3",
     "vue": "^3.3.4",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vue3-image-preview": "^0.2.6"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",

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

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-04-21 08:43:39
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-06-21 17:57:30
+ * @LastEditTime: 2023-06-25 09:47:05
  * @FilePath: \common\src\components\bsgoal-base-tree\demo.vue
  * @Description: 左侧树的演示
  * 
@@ -45,10 +45,11 @@ const createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node'
 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)
+  console.log('triggerTreeClick ================');
+  // console.log('value', value)
+  // console.log('node', node)
+  // console.log('treeNode', treeNode)
+  // console.log('event', event)
 }
 
 const treeLazyLoad = (node) => {
@@ -93,7 +94,7 @@ const treeInitNode = (node) => {
 }
 
 const triggerAddClick = (params = '') => {
-  console.log('params', params)
+  console.log('triggerAddClick', params)
 }
 </script>
 <template>

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

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-04-21 08:43:33
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-06-21 17:57:59
+ * @LastEditTime: 2023-06-25 10:05:14
  * @FilePath: \common\src\components\bsgoal-base-tree\index.vue
  * @Description: 虚拟化树型结构 公共组件
  * 
@@ -30,7 +30,7 @@ const props = defineProps({
   /**
    * 数据
    */
-  data: {
+  treeData: {
     type: [Object, Array],
     default: () => []
   },
@@ -69,7 +69,7 @@ const props = defineProps({
   }
 })
 
-const emits = defineEmits(['on-click', 'on-switch', 'on-click-add'])
+const emits = defineEmits(['on-click', 'on-switch', 'on-add'])
 
 // 计算高度的指令
 const vHeight = directiveBase.height
@@ -132,8 +132,8 @@ const loadNode = async (node, resolve, props) => {
 }
 
 const lazyGet = computed(() => {
-  const { data = [] } = props
-  if (!data || !data.length) {
+  const { treeData = [] } = props
+  if (!treeData || !treeData.length) {
     return true
   }
 
@@ -149,7 +149,7 @@ const lazyGet = computed(() => {
  * @return {*}
  */
 const handleItemAdd = (node = null, data = {}) => {
-  emits('on-click-add', { node, data })
+  emits('on-add', { node, data })
 }
 </script>
 <template>
@@ -164,7 +164,7 @@ const handleItemAdd = (node = null, data = {}) => {
           ref="EL_TREE_REF"
           highlight-current
           empty-text="暂无数据"
-          :data="data"
+          :data="treeData"
           :lazy="lazyGet"
           :load="(node, resolve) => loadNode(node, resolve, props)"
           :expand-on-click-node="false"
@@ -181,7 +181,7 @@ const handleItemAdd = (node = null, data = {}) => {
               <!-- E 节点名称 -->
               <!-- S 操作符号 -->
               <span class="base_tree_node_icon" v-show="data.hasIcon">
-                <el-icon color="#409EFF" @click="handleItemAdd(node, data)">
+                <el-icon color="#409EFF" @click.stop="handleItemAdd(node, data)">
                   <Plus />
                 </el-icon>
               </span>

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

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-06-20 09:20:51
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-06-20 19:33:11
+ * @LastEditTime: 2023-06-25 15:22:12
  * @FilePath: \common\src\components\bsgoal-base-tree-table\demo.vue
  * @Description:  树 + 列表 + 演示
  * 
@@ -10,11 +10,10 @@
 <script setup>
 /* setup模板
 ---------------------------------------------------------------- */
-import { ref ,unref } from 'vue'
+import { ref, unref } from 'vue'
 import BsgoalBaseTreeTable from './index.vue'
 import ComponentTypeEnums from '../../enums/componentTypeEnums.js'
 
-
 defineOptions({
   name: 'BsgoalBaseTreeTableDemo'
 })
@@ -24,6 +23,7 @@ const props = defineProps({})
 // ---> S 树 <---
 
 const triggerTreeClick = (value, node, treeNode, event) => {
+  console.log('triggerTreeClick =========================')
   console.log('value', value)
   console.log('node', node)
   console.log('treeNode', treeNode)
@@ -74,7 +74,6 @@ const treeInitNode = (node) => {
 
 // ---> S 列表 <---
 
-
 const configOptions = ref([
   {
     label: 'prop1',
@@ -748,7 +747,6 @@ const tableData = ref([
   }
 ])
 
-
 const tableDataVal = unref(tableData)
 
 const fetch = (params) => {
@@ -767,22 +765,50 @@ const fetch = (params) => {
   })
 }
 
+const triggerTreeAddClick = (params = '') => {
+  console.log('triggerTreeAddClick', params)
+}
+
+const treeData = ref([
+  {
+    label: 'label2-1',
+    isLeaf: true,
+    hasIcon: true
+  },
+  {
+    label: 'label2-2',
+    children: [
+      {
+        label: 'label2-2-1'
+      }
+    ]
+  },
+  {
+    label: 'label2-3'
+  }
+])
+const BSGOAL_BASE_TREE_TABLE_REF = ref(null)
+const test = () => {
+  BSGOAL_BASE_TREE_TABLE_REF.value.refreshList({ prop: 111 })
+}
 
 // ---> E 列表 <---
 </script>
 <template>
   <div class="bsgoal-base-tree-table-demo">
     <div class="base_tree_table_demo">
+      <!-- <div @click="test">点击</div> -->
       <BsgoalBaseTreeTable
+        ref="BSGOAL_BASE_TREE_TABLE_REF"
         selection
         operation
+        :tree-data="treeData"
         :page-size="40"
-        :lazy-load="treeLazyLoad"
-        :init-node="treeInitNode"
         :fetch="fetch"
         :config-options="configOptions"
         :expression="77"
-        @on-click="triggerTreeClick"
+        @on-click-tree="triggerTreeClick"
+        @on-add-tree="triggerTreeAddClick"
       ></BsgoalBaseTreeTable>
     </div>
   </div>

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

@@ -2,7 +2,7 @@
  * @Author: canlong.shen
  * @Date: 2023-06-20 09:20:44
  * @LastEditors: canlong.shen
- * @LastEditTime: 2023-06-21 10:21:31
+ * @LastEditTime: 2023-06-25 15:20:18
  * @FilePath: \common\src\components\bsgoal-base-tree-table\index.vue
  * @Description: 树结构  + 列表
  * 
@@ -29,7 +29,7 @@ const props = defineProps({
   /**
    * 数据
    */
-  data: {
+  treeData: {
     type: [Object, Array],
     default: () => []
   },
@@ -157,7 +157,7 @@ const props = defineProps({
   }
 })
 
-
+const emits = defineEmits(['on-click-tree', 'on-switch-tree', 'on-add-tree'])
 
 // ---> S 注入插槽 <---
 const slots = useSlots()
@@ -166,13 +166,51 @@ const slotNames = ref(Object.keys(slots))
 
 // ---> S 树 <---
 const switchStatus = ref(true)
-const switchTree = (status = '') => {
+const triggerTreeSwitch = (status = '') => {
   switchStatus.value = status
 }
 provide('TREE_SWITCH_STATUS', switchStatus)
+/**
+ * @Author: canlong.shen
+ * @description: 触发树 添加按钮 事件
+ * @param {*} node
+ * @param {*} data
+ * @default:
+ * @return {*}
+ */
+const triggerTreeAdd = ({ node, data } = {}) => {
+  emits('on-add-tree', { node, data })
+}
+/**
+ * @Author: canlong.shen
+ * @description: 触发树 单击项事件
+ * @param {*} value
+ * @param {*} node
+ * @param {*} treeNode
+ * @param {*} event
+ * @default:
+ * @return {*}
+ */
+const triggerTreeClick = (value, node, treeNode, event) => {
+  emits('on-click-tree', value, node, treeNode, event)
+}
 
 // ---> E 树 <---
 
+// ---> S 表 <---
+const BSGOAL_BASE_SEARCH_TABLE_REF = ref(null)
+const refreshList = (params = {}) => {
+  console.log('params',params);
+  BSGOAL_BASE_SEARCH_TABLE_REF.value.refreshList(params)
+}
+
+// 暴露的属性
+defineExpose({
+  refreshList
+})
+
+// ---> E 表 <---
+
 const tableStyler = computed(() => {
   const styler = {}
   const switchStatusValue = switchStatus.value
@@ -193,13 +231,15 @@ const tableStyler = computed(() => {
         <BsgoalBaseTree
           v-bind="$props"
           class="base_tree_table--tree"
-          @on-switch="switchTree"
+          @on-switch="triggerTreeSwitch"
+          @on-add="triggerTreeAdd"
+          @on-click="triggerTreeClick"
         ></BsgoalBaseTree>
         <!-- E 树 -->
       </div>
       <div class="base_tree_table--table" :style="tableStyler">
         <!-- S 列表 -->
-        <BsgoalBaseSearchTable v-bind="$props">
+        <BsgoalBaseSearchTable ref="BSGOAL_BASE_SEARCH_TABLE_REF" v-bind="$props">
           <template v-for="slotName of slotNames" v-slot:[slotName]="{ row = {} }">
             <slot :name="slotName" :row="row"></slot>
           </template>

package/src/components/bsgoal-base-viewer/assets/upload_default.svg

@@ -0,0 +1,13 @@
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id=".upload/&#229;&#141;&#160;&#228;&#189;&#141;&#229;&#155;&#190;" clip-path="url(#clip0_15278_44270)">
+<rect width="70" height="70" fill="#F0F2F5"/>
+<g id="&#229;&#155;&#190;&#231;&#137;&#135;&#229;&#141;&#160;&#228;&#189;&#141;&#229;&#155;&#190;">
+<path id="Vector" d="M33.54 35.432L41 23L57 53H15L29 27L33.54 35.432V35.432ZM35.78 39.476L40.974 49H50.334L40.794 31.116L35.78 39.476V39.476ZM21.696 49H36.304L29 35.438L21.696 49ZM22 27C20.6739 27 19.4021 26.4732 18.4645 25.5355C17.5268 24.5979 17 23.3261 17 22C17 20.6739 17.5268 19.4021 18.4645 18.4645C19.4021 17.5268 20.6739 17 22 17C23.3261 17 24.5979 17.5268 25.5355 18.4645C26.4732 19.4021 27 20.6739 27 22C27 23.3261 26.4732 24.5979 25.5355 25.5355C24.5979 26.4732 23.3261 27 22 27Z" fill="#DDDFE5"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_15278_44270">
+<rect width="70" height="70" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,35 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-06-21 16:08:07
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-06-25 09:59:14
+ * @FilePath: \common\src\components\bsgoal-base-viewer\demo.vue
+ * @Description: 图片预览 演示
+ * 
+-->
+
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref } from 'vue'
+import BsgoalBaseViewer from './index.vue'
+defineOptions({
+  name: 'BsgoalBaseViewerDemo'
+})
+
+const props = defineProps({})
+const src = ref('https://img.phb123.com/uploads/allimg/200615/60-2006151H317-52.jpg')
+</script>
+<template>
+  <div class="bsgoal-base-viewer-demo">
+    <BsgoalBaseViewer :src="src" />
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

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

@@ -0,0 +1,66 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-06-21 16:08:00
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-06-25 10:00:41
+ * @FilePath: \common\src\components\bsgoal-base-viewer\index.vue
+ * @Description: 图片 预览
+ * 
+-->
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { ref, computed } from 'vue'
+import { preview, vPreview, Vue3ImagePreview } from 'vue3-image-preview'
+import uploadDefaultIcon from './assets/upload_default.svg'
+defineOptions({
+  name: 'BsgoalBaseViewer'
+})
+
+const props = defineProps({
+  /**
+   * 宽度
+   */
+  width: {
+    type: [String, Number],
+    default: '48'
+  },
+  /**
+   * 宽度
+   */
+  height: {
+    type: [String, Number],
+    default: '48'
+  },
+  /**
+   * 预览图片路径
+   */
+  src: {
+    type: [String],
+    default: ''
+  }
+})
+
+const srcGet = computed(() => {
+  const { src = '' } = props
+  if (!src) {
+    return uploadDefaultIcon
+  }
+  return src
+})
+</script>
+<template>
+  <div class="bsgoal-base-viewer">
+    <div class="base_viewer">
+      <img v-preview :src="srcGet" :style="{ width: `${width}px`, height: `${height}px` }" />
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.bsgoal-base-viewer {
+  display: inline-block;
+  .base_viewer {
+    margin: 4px 8px;
+  }
+}
+</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-06-20 10:07:27
+ * @LastEditTime: 2023-06-21 16:56:42
  * @FilePath: \common\src\router\index.js
  * @Description: 路由配置
  * 
@@ -18,6 +18,11 @@ const router = createRouter({
       name: 'home',
       component: LayoutHome,
       children: [
+        {
+          path: '/bsgoal-base-viewer-demo',
+          name: '图片预览',
+          component: import('@/components/bsgoal-base-viewer/demo.vue')
+        },
         {
           path: '/bsgoal-baes-popover-demo',
           name: '弹出框',