@ebiz/designer-components 0.0.18 → 0.0.19-beta.10

package/src/components/EbizFileUpload.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="ebiz-file-upload">
+    <tiny-pop-upload
+      ref="uploadRef"
+      v-model="fileList"
+      :action="uploadUrl"
+      :headers="headers"
+      :multiple="multiple"
+      :accept="accept"
+      :size-limit="sizeLimit"
+      :disabled="disabled"
+      :draggable="draggable"
+      :theme="theme"
+      :tips="tips"
+      :show-upload-progress="showUploadProgress"
+      :before-upload="handleBeforeUpload"
+      :on-success="handleSuccess"
+      :on-error="handleError"
+      :button-text="buttonText"
+      :button-size="buttonSize"
+      :button-type="buttonType"
+      :button-plain="buttonPlain"
+      @change="handleChange"
+    >
+      <template #default v-if="customTrigger">
+        <slot name="trigger"></slot>
+      </template>
+    </tiny-pop-upload>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, defineProps, defineEmits } from 'vue';
+import { PopUpload as TinyPopUpload } from '@opentiny/vue';
+
+/**
+ * EbizFileUpload 组件 - 基于 OpenTiny PopUpload 的文件上传组件
+ * 支持自定义上传地址、文件类型限制、大小限制、多文件上传等
+ * 提供成功和失败的回调处理
+ */
+const props = defineProps({
+  /**
+   * 上传地址
+   */
+  action: {
+    type: String,
+    default: '/api/file/upload'
+  },
+  /**
+   * 上传请求头信息
+   */
+  headers: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 是否允许多文件上传
+   */
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 接受上传的文件类型
+   */
+  accept: {
+    type: String,
+    default: '*'
+  },
+  /**
+   * 文件大小限制，单位 KB
+   */
+  sizeLimit: {
+    type: Number,
+    default: 5 * 1024  // 默认5MB
+  },
+  /**
+   * 是否禁用上传
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 是否支持拖拽上传
+   */
+  draggable: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 上传组件主题
+   */
+  theme: {
+    type: String,
+    default: 'text',
+    validator: (val) => ['text', 'button', 'both'].includes(val)
+  },
+  /**
+   * 上传按钮文本
+   */
+  buttonText: {
+    type: String,
+    default: '上传文件'
+  },
+  /**
+   * 上传提示文本
+   */
+  tips: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 是否显示上传进度
+   */
+  showUploadProgress: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 初始文件列表
+   */
+  initialFiles: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * 按钮大小
+   */
+  buttonSize: {
+    type: String,
+    default: 'medium',
+    validator: (val) => ['medium', 'small', 'mini'].includes(val)
+  },
+  /**
+   * 按钮类型
+   */
+  buttonType: {
+    type: String,
+    default: 'primary',
+    validator: (val) => ['default', 'primary', 'success', 'warning', 'danger', 'info', 'text'].includes(val)
+  },
+  /**
+   * 按钮是否为朴素按钮
+   */
+  buttonPlain: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 是否使用自定义触发器
+   */
+  customTrigger: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:files', 'success', 'error', 'change']);
+
+// 文件列表状态
+const fileList = ref(props.initialFiles || []);
+
+// 计算上传地址
+const uploadUrl = computed(() => props.action);
+
+// 上传前处理
+const handleBeforeUpload = (_file) => {
+  // 可以在这里添加文件校验逻辑
+  return true;
+};
+
+// 上传成功处理
+const handleSuccess = (response, file, fileList) => {
+  emit('success', { file, response, fileList });
+};
+
+// 上传失败处理
+const handleError = (error, file, fileList) => {
+  emit('error', { file, error, fileList });
+};
+
+// 文件变更处理
+const handleChange = (file, fileList) => {
+  emit('update:files', fileList);
+  emit('change', { file, fileList });
+};
+
+// 监听initialFiles变化更新文件列表
+watch(() => props.initialFiles, (newFiles) => {
+  if (newFiles && newFiles.length > 0) {
+    fileList.value = [...newFiles];
+  }
+});
+</script>
+
+<style scoped>
+.ebiz-file-upload {
+  width: 100%;
+  margin: 16px 0;
+}
+</style> 

package/src/components/EbizMindmap/README.md

@@ -1,8 +1,8 @@
-# 思维导图组件，组织关系图也是用的这个
-
-这是一个组织关系图组件，使用的@opentiny/huicharts下的MindmapChart实现，使用文档 @https://opentiny.design/tiny-charts/MindmapLayout
-
-官网的demo示例链接：https://opentiny.design/tiny-charts-playground/playground.html?name=MindmapChart-1&theme=hdesign-light
-
-我们的需求里面出了有部门之外，还需要有企业和岗位，企业下面有部门，部门下面有岗位和子部门，岗位下面没有子级
-
+# 思维导图组件，组织关系图也是用的这个
+
+这是一个组织关系图组件，使用的@opentiny/huicharts下的MindmapChart实现，使用文档 @https://opentiny.design/tiny-charts/MindmapLayout
+
+官网的demo示例链接：https://opentiny.design/tiny-charts-playground/playground.html?name=MindmapChart-1&theme=hdesign-light
+
+我们的需求里面出了有部门之外，还需要有企业和岗位，企业下面有部门，部门下面有岗位和子部门，岗位下面没有子级
+

package/src/components/EbizMindmap/components/GridNode.vue

@@ -1,102 +1,102 @@
-<template>
-	<tiny-tooltip pre :content="tipContent" placement="bottom" effect="light">
-		<div class="grid-card" :style="style">
-			<img draggable="false" v-if="iconPath" :src="iconPath" />
-			<div class="text" :style="`bottom:${data.height / 2 }px`"> {{ data.text }}</div>
-		</div>
-	</tiny-tooltip>
-</template>
-
-<script  >
-import { Tooltip } from '@opentiny/vue'
-export default {
-	components: {
-		TinyTooltip:  Tooltip
-	},
-	props: {
-		data: Object,
-	},
-	data() {
-		let styleObject = {};
-		let data = this.data;
-		let iconPath;
-		let tipContent = [];
-		let icons = {
-			main: './image/charts/layout/servers_main.svg',
-			portal: './image/charts/layout/servers_portal.svg',
-			bms: './image/charts/layout/servers_bms.svg',
-			ecs: './image/charts/layout/servers_ecs.svg',
-			hecs: './image/charts/layout/servers_hecs.svg'
-		}
-		if(data.width) {
-			styleObject.width = data.width + 'px';
-		}
-		if(data.height) {
-			styleObject.height = data.height + 'px';
-		}
-		if(data.fill) {
-			styleObject.background = data.fill;
-		}
-		iconPath = icons[data.name];
-		if(data.name){
-			tipContent.push(`服务器名称：${data.name}`)
-		}
-		if(data.ip){
-			tipContent.push(`IP地址： ${data.ip}`)
-		}
-		if (data.iconPath) {
-			iconPath = data.iconPath;
-		}
-		return {
-        	style: styleObject,
-			iconPath: iconPath,
-			tipContent: tipContent.join('\n')
-    	}
-	},
-	mounted() {
-
-	},
-	computed: {
-
-	},
-
-	methods: {
-
-	}
-}
-</script>
-
-
-<style scoped>
-.grid-card {
-	width: 100%;
-	height: 100%;
-	border-radius: 50%;
-	border: 1px solid #6599ff;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background: #fff;
-	position: relative;
-	
-}
-
-.text {
-	position: absolute;
-	transform: translateY(100%);
-	width: calc(100% + 30px);
-	text-align: center;
-	font-size: 12px;
-	display: -webkit-box;
-	-webkit-line-clamp: 3;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	margin-bottom: -18px;
-    color: var(--ti-base-color-common-7);
-}
-img{
-}
-img + .text{
-  margin-bottom: -35px;
-}
-</style>
+<template>
+	<tiny-tooltip pre :content="tipContent" placement="bottom" effect="light">
+		<div class="grid-card" :style="style">
+			<img draggable="false" v-if="iconPath" :src="iconPath" />
+			<div class="text" :style="`bottom:${data.height / 2 }px`"> {{ data.text }}</div>
+		</div>
+	</tiny-tooltip>
+</template>
+
+<script  >
+import { Tooltip } from '@opentiny/vue'
+export default {
+	components: {
+		TinyTooltip:  Tooltip
+	},
+	props: {
+		data: Object,
+	},
+	data() {
+		let styleObject = {};
+		let data = this.data;
+		let iconPath;
+		let tipContent = [];
+		let icons = {
+			main: './image/charts/layout/servers_main.svg',
+			portal: './image/charts/layout/servers_portal.svg',
+			bms: './image/charts/layout/servers_bms.svg',
+			ecs: './image/charts/layout/servers_ecs.svg',
+			hecs: './image/charts/layout/servers_hecs.svg'
+		}
+		if(data.width) {
+			styleObject.width = data.width + 'px';
+		}
+		if(data.height) {
+			styleObject.height = data.height + 'px';
+		}
+		if(data.fill) {
+			styleObject.background = data.fill;
+		}
+		iconPath = icons[data.name];
+		if(data.name){
+			tipContent.push(`服务器名称：${data.name}`)
+		}
+		if(data.ip){
+			tipContent.push(`IP地址： ${data.ip}`)
+		}
+		if (data.iconPath) {
+			iconPath = data.iconPath;
+		}
+		return {
+        	style: styleObject,
+			iconPath: iconPath,
+			tipContent: tipContent.join('\n')
+    	}
+	},
+	mounted() {
+
+	},
+	computed: {
+
+	},
+
+	methods: {
+
+	}
+}
+</script>
+
+
+<style scoped>
+.grid-card {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	border: 1px solid #6599ff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: #fff;
+	position: relative;
+	
+}
+
+.text {
+	position: absolute;
+	transform: translateY(100%);
+	width: calc(100% + 30px);
+	text-align: center;
+	font-size: 12px;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	margin-bottom: -18px;
+    color: var(--ti-base-color-common-7);
+}
+img{
+}
+img + .text{
+  margin-bottom: -35px;
+}
+</style>

package/src/components/EbizMindmap/components/node.vue

@@ -1,92 +1,92 @@
-<template>
-  <div class="mindmap-card">
-    <div class="mindmap-top" :style="{ backgroundColor: dynamicBackgroundColor }">
-      <p>{{ data.text }}</p>
-    </div>
-    <div class="mindmap-con">
-      <h4>部门人数: {{ data.peopleNum }}人</h4>
-      <!-- <div class="mindmap-progress-container">
-        <tiny-progress class="progress" :stroke-width="8" :percentage="data.peopleNum"
-          :format="formatText"></tiny-progress>
-      </div> -->
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import { Progress as TinyProgress } from '@opentiny/vue';
-
-const props = defineProps({
-  data: {
-    type: Object,
-    required: true
-  }
-});
-
-const dynamicBackgroundColor = computed(() => {
-  if (props.data.id.includes('root')) {
-    return '#2070F3';
-  } else if (props.data.id.includes('researchDept')) {
-    return '#F4840C';
-  } else if (props.data.id.includes('designDept')) {
-    return '#09AA71';
-  }
-  return '#E02128'; // 默认背景颜色
-});
-
-const formatText = () => {
-  return `${props.data.peopleNum}/100`;
-};
-</script>
-
-<style>
-.mindmap-card {
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  overflow: hidden;
-  font-family: Arial, sans-serif;
-  padding-left: 4px;
-  padding-right: 8px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
-}
-
-.mindmap-top {
-  height: 30%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-bottom: 1px solid #cccccc;
-  margin-left: -16px;
-  margin-right: -16px;
-  color: white;
-}
-
-.mindmap-con {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0 10px;
-  margin-top: 10px;
-  box-sizing: border-box;
-  font-size: 12px;
-}
-
-.tiny-progress__text {
-  font-size: 12px !important;
-  width: 20%
-}
-
-.mindmap-progress-container {
-  width: 100%;
-  margin-top: 4px;
-  margin-bottom: 6px;
-}
-
-.tiny-progress tiny-progress--line progress {
-  width: 80%
-}
+<template>
+  <div class="mindmap-card">
+    <div class="mindmap-top" :style="{ backgroundColor: dynamicBackgroundColor }">
+      <p>{{ data.text }}</p>
+    </div>
+    <div class="mindmap-con">
+      <h4>部门人数: {{ data.peopleNum }}人</h4>
+      <!-- <div class="mindmap-progress-container">
+        <tiny-progress class="progress" :stroke-width="8" :percentage="data.peopleNum"
+          :format="formatText"></tiny-progress>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Progress as TinyProgress } from '@opentiny/vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  }
+});
+
+const dynamicBackgroundColor = computed(() => {
+  if (props.data.id.includes('root')) {
+    return '#2070F3';
+  } else if (props.data.id.includes('researchDept')) {
+    return '#F4840C';
+  } else if (props.data.id.includes('designDept')) {
+    return '#09AA71';
+  }
+  return '#E02128'; // 默认背景颜色
+});
+
+const formatText = () => {
+  return `${props.data.peopleNum}/100`;
+};
+</script>
+
+<style>
+.mindmap-card {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  overflow: hidden;
+  font-family: Arial, sans-serif;
+  padding-left: 4px;
+  padding-right: 8px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+.mindmap-top {
+  height: 30%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid #cccccc;
+  margin-left: -16px;
+  margin-right: -16px;
+  color: white;
+}
+
+.mindmap-con {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 10px;
+  margin-top: 10px;
+  box-sizing: border-box;
+  font-size: 12px;
+}
+
+.tiny-progress__text {
+  font-size: 12px !important;
+  width: 20%
+}
+
+.mindmap-progress-container {
+  width: 100%;
+  margin-top: 4px;
+  margin-bottom: 6px;
+}
+
+.tiny-progress tiny-progress--line progress {
+  width: 80%
+}
 </style>