@bdsoft/element 1.1.8 → 1.1.11

package/src/components/carousel/index.vue

@@ -1,104 +0,0 @@
-<!--
-* @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

@@ -1,12 +0,0 @@
-## 轮播组件
-// 支持图片、视频、及自定义组件的传递
-
-```数据格式
-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

@@ -1,141 +0,0 @@
-<!--
-* @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

@@ -1,25 +0,0 @@
-## 图表配置界面
-
-### 使用
-
-```
-<!-- 颜色配置窗口 -->
-<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

@@ -1,41 +0,0 @@
-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

@@ -1,245 +0,0 @@
-<!--
-* @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

@@ -1,55 +0,0 @@
-# 右键菜单
-
-```
-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

@@ -1,40 +0,0 @@
-// 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
-  };
-}