@bdsoft/element 1.1.13 → 1.1.15

package/src/components/carousel/index.vue

@@ -0,0 +1,104 @@
+<!--
+* @FileDescription:  轮播组件
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from 'vue'
+// import { _getData, _saveData, _deleteData, _motifyData, _addData, getBaseImgUrl } from '@/api/newrabbit'
+// import { getPic } from '@/api/page'
+const props = defineProps({
+  // // 图片的url
+  // picUrl: {
+  //   type: String,
+  //   default: 'ptService/sysconfig/pic'
+  // },
+  // // 图片的code
+  // picCode: {
+  //   type: String,
+  //   default: 'ptxmpic'
+  // },
+  // categoryid: {
+  //   type: String,
+  // },
+  // fl: {
+  //   type: String,
+  // }
+  carouselData: {
+    type: Array,
+    default: () => []
+  },
+  // 是否自动切换
+  autoplay: {
+    type: Boolean,
+    default: true
+  }
+})
+// const carouselData = ref([])
+// 首页的图片列表
+// const _getPic = () => {
+//   let p = { categoryid: props.categoryid || window.$bd.xmPicType.categoryid, fl:  props.fl || window.$bd.xmPicType.fl }
+//   _getData(props.picUrl, p).then((res) => {
+//     if (res.succeed) {
+//       carouselData.value = res.data[0].datas.map((v) => {
+//         v.imgUrl = ''
+//         if (v.url) {
+//           v.imgUrl = getBaseImgUrl(v.url, props.picCode)
+//         }
+//         return v
+//       })
+//       // console.log('_getPic', carouselData.value)
+//     }
+//   })
+// }
+onMounted(() => {
+  // _getPic()
+})
+</script>
+<template>
+  <div class="banner-bg">
+    <div class="banner-warp">
+      <div class="carousel-warp" style="">
+        <el-carousel height="560px" motion-blur style="" :autoplay="autoplay">
+          <el-carousel-item v-for="item in props.carouselData" :key="item">
+            <!-- 增加视频 组件轮播支持 -->
+          
+            <video v-if="item.filtype == 'video'" autoplay muted loop style="visibility: visible;object-fit: cover;object-position: center;width:100%;height: 560px;">
+              <source  :src="item.imgUrl" type="video/mp4" />
+            </video>
+            <img v-else :src="item.imgUrl" class="img" />
+            <component v-if="item.component" :is="item.component" :item="item" />
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.banner-bg {
+  height: 560px;
+  background-color: #ffffff19;
+  // background-image: url(./u5.png);
+  border-radius: 10px;
+  // width: 1200px;
+  margin: 0 auto;
+  .banner-warp {
+    padding-top: 0px;
+  }
+}
+
+.carousel-warp {
+  width: 100%;
+  margin: 0 auto;
+  // background-color: #fff;
+  // border-radius: 8px;
+}
+
+.img {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/carousel/readme.md

@@ -0,0 +1,12 @@
+## 轮播组件
+// 支持图片、视频、及自定义组件的传递
+
+```数据格式
+const carouselData = ref([
+  { imgUrl: bg0, title: '1',  component: CurrentCompoent['Coma'] },
+  { imgUrl: bg1, title: '2',  component: CurrentCompoent['Comb'] }, 
+  { imgUrl: bg2, title: '2',  component: CurrentCompoent['Comc'] },
+  { imgUrl: bg3, title: '2', component: CurrentCompoent['ComData'], filtype: 'video' }
+])
+
+```

package/src/components/chartconfig/index.vue

@@ -0,0 +1,141 @@
+<!--
+* @FileDescription:  图表配置窗口
+* @Author: 李兵泉
+* @Date: 2021-06-08 09 时
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<template>
+  <el-dialog v-model="visible" :width="600" title="图表配置" class="bdDialog chartConfig" :style="{ borderRadius: '10px' }" draggable>
+    <el-form v-model="chartColorForm" label-suffix=":" label-width='80px' class="formconfig" style="padding: 10px 10px">
+      <el-tabs type="border-card" class="chart-tabs" style="height: 100%">
+        <el-tab-pane label="坐标轴配置">
+          <el-divider content-position="left">X坐标轴</el-divider>
+          <el-form-item label="抽稀个数">
+            <el-input-number v-model="chartForm.xAxis_axisLabel_interval" :min="0" controls-position="right" />
+          </el-form-item>
+          <el-form-item label="旋转角度">
+            <el-input-number v-model="chartForm.xAxis_axisLabel_rotate" :min="-90" :max="90" controls-position="right" />
+          </el-form-item>
+
+          <el-divider content-position="left">Y坐标轴</el-divider>
+
+          <el-form-item label="最小值">
+            <el-input-number v-model="chartForm.yAxis_min" controls-position="right" />
+          </el-form-item>
+          <el-form-item label="最大值">
+            <el-input-number v-model="chartForm.yAxis_max" controls-position="right" />
+          </el-form-item>
+          <el-form-item label="间隔值">
+            <el-input-number v-model="chartForm.yAxis_interval" :min="0" controls-position="right" />
+          </el-form-item>
+        </el-tab-pane>
+        <el-tab-pane label="曲线配置">
+          <el-divider content-position="left">曲线节点</el-divider>
+          <el-form-item :label="item.name" v-for="(item, index) in chartForm.seriesConfig" :key="index">
+            <el-row>
+              <!-- 颜色数组 -->
+              <el-form-item label="颜色">
+                <el-color-picker v-model="item.itemStyle_color" size="small" />
+              </el-form-item>
+              <el-form-item label="显示数值">
+                <el-checkbox v-model="item.label_show" label="" />
+              </el-form-item>
+              <el-form-item label="抽稀个数">
+                <el-input-number v-model="item.label_interval" :min="0" controls-position="right" />
+              </el-form-item>
+            </el-row>
+          </el-form-item>
+          <el-divider content-position="left">grid边距</el-divider>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="左侧边距">
+                <el-input v-model="chartForm.grid_left" placeholder="示例： 20 或 20%" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="右侧边距">
+                <el-input v-model="chartForm.grid_right" placeholder="示例： 20 或 20%" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="上侧边距">
+                <el-input v-model="chartForm.grid_top" placeholder="示例： 20 或 20%" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="下侧边距">
+                <el-input v-model="chartForm.grid_bottom" placeholder="示例： 20 或 20%" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-tab-pane>
+      </el-tabs>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" @click="handleSetChartColorSave"> 确定 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from 'vue'
+import { useDialog } from '../../utils/hookDialog.js'
+
+const emits = defineEmits(['setNewChartConfig'])
+
+
+// 图表表单
+const chartForm = ref({
+  xAxis_axisLabel_interval: 0,
+  xAxis_axisLabel_rotate: 0,
+  yAxis_min: null,
+  yAxis_max: null,
+  yAxis_interval: null,
+  grid_left: null,
+  grid_top: null,
+  grid_right: null,
+  grid_bottom: null,
+  seriesConfig: [] // 颜色配置
+})
+
+// 打开回调
+const callShowDialog = () => {
+  let config = openParms.value
+  chartColorForm.sourceid = config.sourceid
+  chartColorForm.chartid = config.api.getId()
+  chartColorForm.api = config.api
+  chartForm.value = Object.assign({}, chartForm.value, extParms.value)
+}
+const { visible, showDialog, openParms, extParms, hideDialog } = useDialog(callShowDialog)
+
+// 颜色配置
+const chartColorForm = reactive({
+  sourceid: '',
+  chartid: '', // 当前操作的图表对象
+  api: null, // 当前操作的图表对象
+  visiable: false,
+})
+/**
+ * 保存配置
+ */
+const handleSetChartColorSave = () => {
+  emits('setNewChartConfig', chartForm.value) // 不同vue对象好像不通信改用bus
+
+  dialogClose()
+}
+const dialogClose = () => {
+  visible.value = false
+}
+defineExpose({
+  showDialog,
+  hideDialog,
+  dialogClose
+})
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/chartconfig/readme.md

@@ -0,0 +1,25 @@
+## 图表配置界面
+
+### 使用
+
+```
+<!-- 颜色配置窗口 -->
+<dialogChartConfig ref="dialogChartConfigRef" @saveColor="handleSetChartColorSave"></dialogChartConfig>
+
+import {dialogChartConfig} from '@bdsoft/element'
+
+const dialogChartConfigRef = ref()
+  // 打开图表配置窗口
+  const handleSetChartConfigDialog = (config) => {
+    // 这里接收的是图表的配置
+    dialogChartConfigRef.value.showDialog(config)
+  }
+// 项目中引入
+onMounted(() => {
+ bus.on('setChartConfigDialog', handleSetChartConfigDialog) // 图表颜色配置
+})
+
+ onUnmounted(() => {
+  bus.off('setChartConfigDialog', handleSetChartConfigDialog) // 图表颜色配置
+})
+```

package/src/components/contextMenu/hookContxtMenu.js

@@ -0,0 +1,41 @@
+import { ref, onUnmounted } from 'vue'
+
+export const useContextMenu = (container) => {
+  const x = ref(0)
+  const y = ref(0)
+  const visible = ref(false)
+  //  代开菜单
+  const openMenu = (e) => {
+    debugger
+    // 阻止默认行为
+    e.preventDefault()
+    // 阻止冒泡
+    e.stopPropagation()
+    // 显示菜单
+    visible.value = true
+    // 获取鼠标位置
+    x.value = e.clientX
+    y.value = e.clientY
+  }
+  // 关闭菜单
+  const closeMenu = () => {
+    console.log('关闭菜单')
+    visible.value = false
+  }
+
+  container.addEventListener('contextmenu', openMenu)
+  window.addEventListener('click', closeMenu)
+  window.addEventListener('contextmenu', closeMenu)
+
+  onUnmounted(() => {
+    // 移除事件
+    container?.removeEventListener('contextmenu', openMenu)
+    window.removeEventListener('click', closeMenu)
+    window.removeEventListener('contextmenu', closeMenu)
+  })
+  return {
+    x,
+    y,
+    visible
+  }
+}

package/src/components/contextMenu/index.vue

@@ -0,0 +1,245 @@
+<!--
+* @FileDescription:  适用整体区域的右键菜单 
+* @Author: 李兵泉
+* @Date: 2024-11-01 
+* @LastEditors: 最后更新作者
+* @LastEditTime: 最后更新时间
+-->
+<template>
+  <div class="context-menu-container">
+    <slot></slot>
+    
+    <!-- 右键菜单通过Teleport挂载到body -->
+    <Teleport to="body">
+      <transition name="menu-fade" @enter="handleEnter">
+        <div 
+          class="context-menu" 
+          ref="menuRef" 
+          v-if="isMenuVisible" 
+          :style="{ top: menuY + 'px', left: menuX + 'px' }"
+        >
+          <ul>
+            <li 
+              v-for="(item, index) in menuOptions" 
+              :key="index" 
+              class="menu-item"
+              @click="handleMenuItemClick(item, index)"
+            >
+              {{ item.label }}
+              <span v-if="item.icon" :class="item.icon"></span>
+            </li>
+          </ul>
+        </div>
+      </transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed , onMounted, onUnmounted, watch,provide } from 'vue';
+import { useElementBounding } from './useElementBounding.js'; // 自定义钩子，用于获取元素位置
+
+// 定义组件属性
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => []
+  }
+});
+
+// 定义组件事件
+const emit = defineEmits(['menu-click', 'show-menu', 'hide-menu']);
+
+// 菜单状态和位置
+const menuRef = ref(null);
+const isMenuVisible = ref(false);
+const menuX = ref(0);
+const menuY = ref(0);
+const currentItem = ref(null); // 当前右键的元素数据
+const menuOptions = computed(() => props.options);
+
+const currentItemData = ref(null);
+
+// 提供showMenu方法供子组件使用
+provide('showContextMenu', (itemData, event) => {
+  event.preventDefault();
+  currentItemData.value = itemData;
+  
+  // 计算位置逻辑...
+  const { clientX, clientY } = event;
+  const menuWidth = 180;
+  const menuHeight = props.options.length * 40;
+  
+  let x = clientX;
+  if (x + menuWidth > window.innerWidth) {
+    x = Math.max(0, window.innerWidth - menuWidth);
+  }
+  
+  let y = clientY;
+  if (y + menuHeight > window.innerHeight) {
+    y = Math.max(0, window.innerHeight - menuHeight);
+  }
+  
+  menuX.value = x;
+  menuY.value = y;
+  isMenuVisible.value = true;
+});
+
+// 处理菜单显示
+const showMenu = (item, event) => {
+  event.preventDefault(); // 阻止默认右键菜单
+  
+  // 存储当前右键的元素数据
+  currentItem.value = item;
+  
+  // 计算菜单位置，确保不超出视口
+  const { x, y } = calculateMenuPosition(event.clientX, event.clientY);
+  menuX.value = x;
+  menuY.value = y;
+  
+  // 显示菜单
+  isMenuVisible.value = true;
+  emit('show-menu', { item, x, y });
+};
+
+// 计算菜单位置，避免超出视口
+const calculateMenuPosition = (clientX, clientY) => {
+  const menuWidth = 180;
+  const menuHeight = 40 * menuOptions.value.length; // 假设每个菜单项40px高度
+  
+  let x = clientX;
+  let y = clientY;
+  
+  // 检查是否超出右边界
+  if (x + menuWidth > window.innerWidth) {
+    x = window.innerWidth - menuWidth;
+  }
+  
+  // 检查是否超出下边界
+  if (y + menuHeight > window.innerHeight) {
+    y = window.innerHeight - menuHeight;
+  }
+  
+  return { x, y };
+};
+
+// 处理菜单项点击
+const handleMenuItemClick = (item, index) => {
+  isMenuVisible.value = false;
+  emit('menu-click', { item, index, data: currentItem.value });
+  
+  // 如果菜单项有回调函数，执行它
+  if (typeof item.click === 'function') {
+    item.click(currentItem.value);
+  }
+};
+
+// 处理菜单进入动画
+const handleEnter = (el) => {
+  el.style.opacity = '0';
+  el.style.transform = 'translateY(-10px)';
+  el.style.transition = 'opacity 0.2s, transform 0.2s';
+  
+  setTimeout(() => {
+    el.style.opacity = '1';
+    el.style.transform = 'translateY(0)';
+  }, 10);
+};
+
+// 点击页面其他地方关闭菜单
+const closeMenuOnClickOutside = (event) => {
+  if (menuRef.value && !menuRef.value.contains(event.target)) {
+    isMenuVisible.value = false;
+    emit('hide-menu');
+  }
+};
+
+// 键盘ESC关闭菜单
+const closeMenuOnEsc = (event) => {
+  if (event.key === 'Escape') {
+    isMenuVisible.value = false;
+    emit('hide-menu');
+  }
+};
+
+// 生命周期钩子
+onMounted(() => {
+  document.addEventListener('click', closeMenuOnClickOutside);
+  document.addEventListener('keydown', closeMenuOnEsc);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeMenuOnClickOutside);
+  document.removeEventListener('keydown', closeMenuOnEsc);
+});
+
+defineExpose({
+  showMenu
+})
+// 监听选项变化
+watch(() => props.options, (newOptions) => {
+  // 菜单选项变化时，如果菜单显示中，重新计算高度
+  if (isMenuVisible.value && menuRef.value) {
+    const menuHeight = 40 * newOptions.length;
+    menuRef.value.style.height = `${menuHeight}px`;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.context-menu-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.context-menu {
+  position: fixed;
+  background-color: #fff;
+  width: 180px;
+  border-radius: 4px;
+  padding: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  overflow: hidden;
+  
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    
+    .menu-item {
+      margin: 0;
+      padding: 0 16px;
+      height: 40px;
+      line-height: 40px;
+      text-align: left;
+      cursor: pointer;
+      font-size: 14px;
+      color: #333;
+      display: flex;
+      align-items: center;
+      
+      &:hover {
+        background-color: #f5f7fa;
+        color: #409eff;
+      }
+      
+      span {
+        margin-left: 8px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+/* 菜单动画 */
+.menu-fade-enter-active, .menu-fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.menu-fade-enter-from, .menu-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>

package/src/components/contextMenu/readme.md

@@ -0,0 +1,55 @@
+# 右键菜单
+
+```
+import {BdContextMenu} from '@bdsoft/element'
+   <BdContextMenu :options="treeMenuDatas" @menu-click="handleMenuClick"  ref="menuRef">
+      <ul>
+        <li class="liwarp" v-for="item in treeData" @dblclick="handleTreeNodeDbClick(item)" @contextmenu.stop="showMenu(item, $event)">
+          <el-tooltip class="box-item" effect="dark" :content="item.AskContent" placement="right">
+            {{ item.AskContent }}
+          </el-tooltip>
+        </li>
+      </ul>
+    </BdContextMenu>
+
+const menuRef = ref(null);
+    const options = [
+  {
+    label: "新建",
+  },
+  {
+    label: "编辑",
+  },
+  {
+    label: "删除",
+  },
+  {
+    label: "复制",
+  }
+]
+const treeMenuDatas = [
+  {
+    value: 'qa-delcollect', label: '取消收藏', icon: 'del', type: 'title'
+  }
+]
+// 从上下文注入showContextMenu方法
+const showContextMenu = inject('showContextMenu');
+// 存储显示菜单数据
+const showMenu = (item, event) => {
+   if (showContextMenu) {
+    showContextMenu(item, event);
+  } else if (menuRef.value) {
+    // 方式2：通过ref调用（备用方案）
+    menuRef.value?.showMenu(item, event);
+  }
+}
+
+// 处理菜单项点击
+const handleMenuClick = (params) => {
+  const { item, index, data } = params;
+  if(item.value=='qa-delcollect'){
+    handleDelCollect(data)
+  }
+  // ElMessage(`点击了${item.label}，数据ID: ${data.id}`);
+};
+```

package/src/components/contextMenu/useElementBounding.js

@@ -0,0 +1,40 @@
+// hooks/useElementBounding.js
+import { ref, onMounted, onUnmounted } from 'vue';
+
+export function useElementBounding() {
+  const bounding = ref(null);
+  
+  const updateBounding = (el) => {
+    if (el) {
+      bounding.value = el.getBoundingClientRect();
+    }
+  };
+  
+  const bind = (el) => {
+    updateBounding(el);
+    
+    const observer = new MutationObserver(() => {
+      updateBounding(el);
+    });
+    
+    observer.observe(el, {
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+    
+    window.addEventListener('resize', () => updateBounding(el));
+    window.addEventListener('scroll', () => updateBounding(el));
+    
+    onUnmounted(() => {
+      observer.disconnect();
+      window.removeEventListener('resize', () => updateBounding(el));
+      window.removeEventListener('scroll', () => updateBounding(el));
+    });
+  };
+  
+  return {
+    bind,
+    bounding
+  };
+}