@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnSmartForm/stringForm/index.vue

@@ -0,0 +1,170 @@
+<!--单行文本组件-->
+<template>
+  <div class="w-default-wrap">
+	<formItemTop :column="column" :dataBack="dataBack"/>
+	<div class="w-default-wrap"> 
+		<el-autocomplete
+		v-if="isUrlType"
+        v-model="column.value"
+        :fetch-suggestions="querySearch"
+        clearable
+        class="w-50"
+        :placeholder="column?.extraInfo?.placeholder || ''"
+        @select="handleSelect"
+      />
+    <el-input  v-model="column.value" v-else-if="column?.extraInfo?.dataExtra == 'textarea'"
+               @input="onInput" @focus="onFocus" @blur="onBlur" clearable show-word-limit
+							 :placeholder="column?.extraInfo?.placeholder || ''"
+               type="textarea" :rows="4" :maxlength="500"/>
+    <el-input v-model="column.value" :disabled="disabled" v-else
+		:placeholder="column?.extraInfo?.placeholder || ''"
+              @input="onInput" @focus="onFocus" @blur="onBlur" clearable show-word-limit>
+    </el-input>
+	  <div class="w-margin-top6" v-if="dataBack && dataBack.key == column.columnCode">
+		<el-button link type="primary" style="padding-left: 0" @click="$emit('operate', this.column,'choosePackage')">选择{{column.name || ''}}</el-button>
+	  </div>
+	</div>
+	<formItemFooter :column="column" :extraInfo="extraInfo" @operate="(column,type)=>$emit('operate', column,type)"/>
+  </div>
+</template>
+<script>
+  import {debounce} from "lodash";
+  import formItemTop from "../formItemTop/formItemTop.vue";
+  import formItemFooter from "../formItemFooter/formItemFooter.vue";
+
+  export default {
+	name: "stringForm",
+	components: {formItemTop, formItemFooter},
+	props: {
+	  column: Object,
+	  dataBack: Object,
+    extraInfo: Object,
+	  disabled: Boolean,
+	  postFunc: Function
+	},
+	data() {
+	  return {
+	    lastQueryValue: null,
+	    lastQueryResults: []
+	  };
+	},
+	computed: {
+	  parsedDataExtra() {
+	    const dataExtra = this.column?.extraInfo?.dataExtra || '';
+	    if (!dataExtra) return null;
+	    try {
+	      return JSON.parse(dataExtra);
+	    } catch (e) {
+	      return null;
+	    }
+	  },
+	  isUrlType() {
+	    return !!this.parsedDataExtra?.searchUrl;
+	  },
+	  dataExtraUrl() {
+	    return this.parsedDataExtra?.searchUrl || '';
+	  }
+	},
+	methods: {
+	  /**
+	   * 输入框输入事件
+	   * */
+	  onInput(e) {
+		this.column.error = '';
+		this.column.warning = '';
+		this.$emit('onInput', this.column)
+		this.onChange(e)
+	  },
+	  /**
+	   * 输入框Change事件
+	   * @param {String} type 是否是其他事件类型
+	   * */
+	  onChange: debounce(function (e, type) {
+		// 当值不为空
+		if (this.column.value) {
+		  this.checkValue()
+		}
+		this.$emit('onChange', this.column)
+	  }, 500),
+	  /**
+	   * 输入框onFocus事件
+	   * */
+	  onFocus(e) {
+		this.$emit('focus', this.column)
+	  },
+	  /**
+	   * 输入框失去焦点事件
+	   * */
+	  onBlur() {
+		this.$emit('blur', this.column)
+	  },
+	  /**
+	   * 检查输入框的值，并判断是否需要调用检查数据唯一
+	   *
+	   * */
+	  checkValue() {
+		try {
+		  // 组件正则校验
+		  if (this.column.extraInfo.regular) {
+			//获取校验规则，转化为正则表达式
+			let rule = new RegExp(this.column.extraInfo.regular);
+			if (!rule.test(this.column.value)) {
+			  this.column.error = this.column.extraInfo.paraExplain || '请输入符合要求的' + this.column.name;
+			}
+		  }
+		} catch (e) {
+		  console.log("stringForm.changeErr:" + e)
+		}
+	  },
+
+
+	  /**
+	   * 远程搜索建议（聚焦时用当前值筛选，输入变更时用输入值筛选）
+	   */
+	  querySearch(queryString, cb) {
+			//queryString为空则不请求接口 直接lastQueryResults置空即可
+			if (!queryString) {
+				this.lastQueryValue = null;
+				this.lastQueryResults = [];
+				cb([]);
+				return;
+			}
+		if (this.lastQueryValue === queryString) {
+		  cb(this.lastQueryResults);
+		  return;
+		}
+		const postData = {
+		  ...(this.column.postData || {}),
+			column:this.column.columnCode,
+		  keyword: queryString || '',
+		  pageNo: 1,
+		  pageSize: 50
+		};
+		const url = this.dataExtraUrl;
+		this.postFunc(url, postData).then(res => {
+		  if (!res.code && res.data?.results) {
+		    const list = res.data.results.map(i => ({ value: i.value || i.label || '', ...i }));
+		    this.lastQueryValue = queryString;
+		    this.lastQueryResults = list;
+		    cb(list);
+		  } else {
+		    this.lastQueryValue = queryString;
+		    this.lastQueryResults = [];
+		    cb([]);
+		  }
+		}).catch(() => {
+		  this.lastQueryValue = queryString;
+		  this.lastQueryResults = [];
+		  cb([]);
+		});
+	  },
+	  handleSelect(item) {
+		this.column.value = item.value;
+		this.column.error = '';
+		this.column.warning = '';
+		this.$emit('onInput', this.column);
+		this.$emit('onChange', this.column);
+	  }
+	}
+  }
+</script>

package/packages/BnVirtPopover/index.vue

@@ -0,0 +1,319 @@
+<!--
+ * @description 虚拟弹出框组件
+ * 一个可以根据触发元素位置自动调整显示位置的弹出框组件
+ * 特点：
+ * 1. 自动判断上下位置
+ * 2. 自适应屏幕边界
+ * 3. 箭头始终指向触发元素
+ * 4. 支持hover和点击触发
+ -->
+<template>
+  <!-- 使用 transition 实现弹出动画，根据位置使用不同的动画效果 -->
+  <transition appear :name="popoverPosition == 'bottom' ? 'el-zoom-in-top' : 'el-zoom-in-bottom'">
+	<div class="virtualPopover" ref="customPopover" :style="popoverStyle" :class="popoverClass"
+		 @mouseover="onMouseEvent" @mouseleave="onMouseEvent" v-show="modal">
+	  <!-- 箭头元素 -->
+	  <div :class="arrowClass" :style="arrowStyle"></div>
+	  <!-- 内容区域，阻止事件冒泡 -->
+	  <div class="virtualPopover-modal" @click.stop="">
+		<slot></slot>
+	  </div>
+	</div>
+  </transition>
+</template>
+
+<script>
+  export default {
+	name: "BnVirtPopover",
+	props: {
+	  // popover的宽度，支持数字或字符串（如'200px'）
+	  width: {
+		type: [Number, String],
+		default: 220,
+	  },
+	  // popover的显示位置，支持 'top' 或 'bottom'
+	  popoverPosition: {
+		type: String,
+		default: "bottom",
+	  },
+	},
+	data() {
+	  return {
+		modal: false, // 控制 popover 的显示/隐藏
+		popoverStyle: {}, // popover 的样式对象
+		popoverClass: [], // popover 的类名数组
+		arrowStyle: {}, // 箭头的样式对象
+		arrowClass: [], // 箭头的类名数组
+		targetEvent: undefined, // 存储触发事件的对象
+		closeTimer: null, // 关闭延时器
+	  };
+	},
+	methods: {
+	  /**
+	   * 切换 popover 的显示状态
+	   * 如果当前显示且点击同一个触发元素，则关闭
+	   * 如果当前显示且点击不同触发元素，则更新位置
+	   * 如果当前隐藏，则显示
+	   * @param {Event} e - 触发事件对象
+	   */
+	  toggle(e) {
+		if(!e){
+		  alert('把事件对象传进来')
+		}
+		this.targetEvent = e;
+		// 鼠标悬浮事件
+		if(e.type.indexOf('mouse')>=0){
+		  // 鼠标离开事件
+		  if (e.type == 'mouseleave') {
+			this.close(e);
+		  } else {
+			this.openPopover(e);
+		  }
+		}
+		//点击事件 或 其他
+		else{
+		  if (this.modal) {
+			this.close(e);
+		  } else {
+			this.openPopover(e);
+		  }
+		}
+	  },
+	  /**
+	   * 打开 popover
+	   * @param {Event} e - 触发事件对象
+	   */
+	  openPopover(e) {
+		this.targetEvent = e;
+		this.open()
+		// 等待 DOM 更新后初始化位置
+		this.$nextTick(() => {
+		  this.initPosition();
+		});
+		// 阻止事件冒泡
+		e && e.stopPropagation();
+		// 添加全局事件监听
+		window.addEventListener("click",this.close);
+		window.addEventListener("mouseup",this.onMouseup);
+	  },
+	  /**
+	   * 初始化 popover 位置
+	   * 包括：
+	   * 1. 计算 popover 的位置和大小
+	   * 2. 处理屏幕边界情况
+	   * 3. 计算箭头位置
+	   * 4. 判断显示方向（上/下）
+	   */
+	  initPosition() {
+		if (this.targetEvent && this.targetEvent.target && this.targetEvent.target.getBoundingClientRect) {
+		  // 获取点击dom位置
+		  const {left, top, width, height} = this.targetEvent.target.getBoundingClientRect();
+		  // 初始样式
+		  this.popoverStyle = {};
+		  this.popoverClass = ["virtualPopover"];
+		  this.arrowClass = ["virtualPopover-arrow"];
+		  // 获取屏幕宽高
+		  const clientWidth = window.innerWidth;
+		  const clientHeight = window.innerHeight;
+		  // 计算变量
+		  const arrowWidth = 6;
+		  const popoverGap = width > this.width ? 0 : 10; // 最小边距
+		  const popoverLeft = left - popoverGap; // 距离左侧距离
+		  
+		  // 计算 popover 的最终位置
+		  let finalPopoverLeft = popoverLeft;
+		  if (this.width && popoverLeft + this.width > clientWidth) {
+			// 如果超出右边界，将 popover 靠右对齐
+			finalPopoverLeft = clientWidth - this.width - popoverGap;
+			this.popoverStyle.left = `${finalPopoverLeft}px`;
+		  } else {
+			this.popoverStyle.left = `${popoverLeft}px`;
+		  }
+		  
+		  // 计算箭头位置，使其始终指向触发元素的中心
+		  const targetCenter = left + width / 2;
+		  const arrowLeft = targetCenter - finalPopoverLeft - arrowWidth;
+		  
+		  // 确保箭头不会超出 popover 的边界
+		  const minArrowLeft = arrowWidth * 2;
+		  const maxArrowLeft = this.width - arrowWidth * 3;
+		  this.arrowStyle.left = `${Math.min(Math.max(arrowLeft, minArrowLeft), maxArrowLeft)}px`;
+		  
+		  // 判断popover宽度是否超出屏幕宽度，超出则减少为最小宽度，出现滚动条
+		  if (isNaN(this.width)) {
+			this.popoverStyle.width = `${this.width}`;
+		  } else {
+			if (this.width + popoverGap * 2 > clientWidth) {
+			  this.popoverStyle.width = `${clientWidth - popoverGap * 2}px`;
+			} else this.popoverStyle.minWidth = `${this.width}px`;
+		  }
+		  // 获取popover的dom位置
+		  const {bottom: popoverBottom, height: popoverHeight} = this.$refs.customPopover.getBoundingClientRect();
+		  // 判断popover是在上方还是下方
+		  const bottomDistance = clientHeight - popoverBottom; // 与底部距离
+		  let popoverPosition = this.popoverPosition;
+		  if (top > bottomDistance && (popoverHeight === 0 || this.modal || popoverHeight >= bottomDistance)) {
+			popoverPosition = "top";
+		  }
+		  // 内容高度大于屏幕剩高度，并且上方区域大于下方区域
+		  if (popoverPosition === "top") {
+			this.popoverStyle.bottom = `${clientHeight - top}px`;
+		  } else {
+			this.popoverStyle.top = `${top + height}px`;
+		  }
+		  this.arrowClass.push(popoverPosition);
+		  this.popoverClass.push(popoverPosition);
+		}
+	  },
+	  /**
+	   * 监听鼠标抬起事件
+	   * 用于判断点击位置是否在 popover 外部，决定是否关闭
+	   * @param {MouseEvent} param0 - 鼠标事件对象，解构获取坐标
+	   */
+	  onMouseup({x, y}) {
+		if (this.$refs.customPopover && this.modal) {
+		  if (this.targetEvent && this.targetEvent.target && this.targetEvent.target.getBoundingClientRect) {
+			const {left, right, top, bottom} = this.targetEvent.target.getBoundingClientRect();
+			if (!(x < left || x > right || y < top || y > bottom)) return;
+		  }
+		  const {left, right, top, bottom} = this.$refs.customPopover.getBoundingClientRect();
+		  if (x < left || x > right || y < top || y > bottom) {
+			this.close()
+		  };
+		}
+	  },
+	  /**
+	   * 开启
+	   */
+	  open() {
+		clearTimeout(this.closeTimer);
+		this.closeTimer = null;
+		this.modal = true;
+	  },
+	  /**
+	   * 关闭
+	   */
+	  close() {
+		clearTimeout(this.closeTimer);
+		// 当触发是点击事件时，直接关闭，不延时
+		if(this.targetEvent && this.targetEvent.type == 'click'){
+		  this.modal = false;
+		  window.removeEventListener("click", this.close);
+		  window.removeEventListener("mouseup", this.onMouseup);
+		}else{
+		  this.closeTimer = setTimeout(() => {
+			this.modal = false;
+			window.removeEventListener("click", this.close);
+			window.removeEventListener("mouseup", this.onMouseup);
+		  }, 300);
+		}
+	  },
+	  /**
+	   * 处理鼠标移入移出事件
+	   * 用于实现 hover 效果
+	   * 移入时清除关闭定时器
+	   * 移出时设置延迟关闭
+	   * @param {MouseEvent} e - 鼠标事件对象
+	   */
+	  onMouseEvent(e) {
+		if (e.type === 'mouseover' && this.targetEvent.type!='click') {
+		  clearTimeout(this.closeTimer);
+		  this.closeTimer = null;
+		  this.modal = true;
+		}
+		// 只有触发事件是鼠标悬浮时，从pop移开才关闭
+		else if (this.targetEvent.type.indexOf('mouse')>=0  && e.type === 'mouseleave') {
+		  clearTimeout(this.closeTimer);
+		  this.modal = false;
+		  window.removeEventListener("click", this.close);
+		  window.removeEventListener("mouseup", this.onMouseup);
+		}
+	  },
+	},
+  };
+</script>
+
+<!-- 
+  样式说明：
+  1. virtualPopover: 弹出框容器
+  2. virtualPopover-modal: 内容区域
+  3. virtualPopover-arrow: 箭头
+  使用 SCSS 变量统一管理箭头大小
+-->
+<style lang='scss' scoped>
+  // 箭头大小
+  $arrowWidth: 6px;
+  .virtualPopover {
+	position: fixed;
+	z-index: 9999;
+	padding-top: $arrowWidth;
+	
+	&-modal {
+	  position: relative;
+	  background: #fff;
+	  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.02),
+	  0px 9px 28px 0px rgba(0, 0, 0, 0.02),
+	  0px 6px 16px -8px rgba(0, 0, 0, 0.04);
+	}
+	
+	&-arrow {
+	  position: absolute;
+	  
+	  &::before,
+	  &::after {
+		content: "";
+		display: block;
+		width: 0;
+		height: 0;
+		top: 0px;
+		border: $arrowWidth solid transparent;
+		position: absolute;
+		z-index: 1;
+	  }
+	  
+	  &::before {
+		z-index: 2;
+	  }
+	  
+	  &.bottom {
+		top: -$arrowWidth;
+		
+		&::before {
+		  border-bottom-color: #fff;
+		}
+		
+		&::after {
+		  border-bottom-color: rgba(0, 0, 0, 0.08);
+		}
+	  }
+	  
+	  &.bottom::after {
+		top: -1px;
+	  }
+	  
+	  &.top {
+		bottom: 0;
+		
+		&::before {
+		  border-top-color: #fff;
+		}
+		
+		&::after {
+		  border-top-color: rgba(0, 0, 0, 0.08);
+		}
+	  }
+	  
+	  &.top::after {
+		top: 1px;
+	  }
+	}
+  }
+  
+  .virtualPopover.bottom {
+	margin-top: $arrowWidth;
+  }
+  
+  .virtualPopover.top {
+	margin-bottom: $arrowWidth;
+  }
+</style>

package/packages/BnWebLog/BnWebLog.vue

@@ -0,0 +1,140 @@
+<!--
+  @Auther:辛巴
+  @Date:2023/02/22
+  @Description:复选框组件
+  @VERSION:1.0-->
+<template>
+  <div>
+    <el-dialog v-model="show" title="接口请求日志" append-to-body width="1020px" top="10px" destroy-on-close>
+      <div style="height: calc(100vh - 158px);overflow-y: auto;padding: 8px 20px 20px 20px" v-loading="loading">
+        <div class="w-text-right">
+          <el-button link @click="copyText(dataList)" type="primary">复制数据</el-button>
+        </div>
+        <div style="height: calc(100% - 80px)">
+          <vxe-table height="100%" row-id="id" :loading="loading" :data="dataList">
+            <vxe-column field="url" title="路径"></vxe-column>
+            <vxe-column field="time" title="时间" width="160"></vxe-column>
+            <vxe-column field="code" title="code" width="130" :formatter="formatterCode"></vxe-column>
+            <vxe-column field="traceId" title="traceId"></vxe-column>
+          </vxe-table>
+        </div>
+        <div class="w-text-right w-margin-top6">
+          <el-pagination v-model:current-page="currentPage"
+                         v-model:page-size="pageSize"
+                         layout="prev, pager, next" @current-change="changePage"
+                         :total="apiLogList.length">
+          </el-pagination>
+        </div>
+      </div>
+    </el-dialog>
+    <div class="BnWebLog" v-show="show">
+      <el-card class="BnWebLog-card">
+        <div class="w-flex-right">
+          <el-button type="primary" link @click="copyText(sessionInfo)">复制信息</el-button>
+          <el-button type="primary" link @click="show=false">关闭</el-button>
+        </div>
+        <div class="BnWebLog-card-body">
+          <div v-if="sessionInfo.userName">用户名：{{ sessionInfo.userName }}</div>
+          <div v-if="sessionInfo.userId">用户id：{{ sessionInfo.userId }}</div>
+          <div class="w-text-over" v-if="sessionInfo.companyName">公司名称：{{ sessionInfo.companyName }}</div>
+          <div v-if="sessionInfo.companyId">公司id：{{ sessionInfo.companyId }}</div>
+          <div v-if="sessionInfo.tableCode">表code：{{ sessionInfo.tableCode }}</div>
+          <div v-if="sessionInfo.appId">小程序id：{{ sessionInfo.appId }}</div>
+          <div v-if="sessionInfo.tableId">工作表id：{{ sessionInfo.tableId }}</div>
+          <div v-if="sessionInfo.taskId">任务id：{{ sessionInfo.taskId }}</div>
+          <div v-if="sessionInfo.workflowId">流程模板id：{{sessionInfo.workflowId}}</div>
+          <div v-if="sessionInfo.instanceId">流程实例id：{{sessionInfo.instanceId}}</div>
+          <div v-if="sessionInfo.workFlowNodeId">流程节点id：{{sessionInfo.workFlowNodeId}}</div>
+          <div v-if="sessionInfo.processCode">流程节点code：{{sessionInfo.processCode}}</div>
+          <div v-if="sessionInfo.url">工作表i地址：{{sessionInfo.url}}</div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BnWebLog",
+  data() {
+    return {
+      show: false,
+      apiLogList: [],
+      sessionInfo: {},
+      dataList: [],
+      loading: false,
+      currentPage: 1,
+      pageSize: 20,
+    }
+  },
+  mounted() {
+    document.addEventListener('keydown', this.handleShortcut);
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleShortcut);
+  },
+  methods: {
+    /**
+     * 快捷键 Ctrl+Shift+? 或 Ctrl+Shift+/ 打开弹框和 sysInfoTool
+     */
+    handleShortcut(e) {
+      if (e.ctrlKey && e.shiftKey && (e.key === '?' || e.key === '/')) {
+        e.preventDefault();
+        this.open();
+      }
+    },
+    /**
+     * 打开日志记录
+     * */
+    open() {
+      this.show = true;
+      this.apiLogList = JSON.parse(localStorage.getItem('webLog') || 'false') || [];
+      this.sessionInfo = JSON.parse(localStorage.getItem('sessionInfo') || 'false') || {};
+      this.changePage({currentPage: 1, pageSize: 20});
+    },
+    /**
+     * 复制文本
+     */
+    copyText(val) {
+      const textarea = document.createElement('textarea');
+      textarea.value = JSON.stringify(val);
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      this.$message.success('复制成功');
+    },
+    /**
+     * 分页
+     * */
+    changePage() {
+      this.dataList = [];
+      if (this.apiLogList.length > 0) {
+        this.dataList = this.apiLogList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
+      }
+    },
+    /**
+     * 格式化状态
+     * */
+    formatterCode({cellValue}) {
+      return `${cellValue}：${cellValue == 0 || cellValue == 1 ? '成功' : '失败'}`;
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.BnWebLog {
+  position: fixed;
+  right: 0;
+  bottom: 10em;
+  z-index: 99999;
+
+  &-card {
+    width: 276px;
+    &-body{
+      word-break: break-all;
+    }
+  }
+}
+</style>