@ebiz/designer-components 0.0.18

package/src/components/Button.vue

@@ -0,0 +1,103 @@
+<template>
+    <tiny-tooltip :content="!isNormal && !apiConfig.apiId ? tooltipText : ''" placement="top">
+
+        <tiny-button :disabled="disabled" :type="type" :size="size" @click="click">
+            <slot>{{ text }}</slot>
+        </tiny-button>
+
+    </tiny-tooltip>
+</template>
+
+
+<script lang='js'>
+export default {
+    name: "EbizButton"
+}
+</script>
+
+<script lang='js' setup>
+
+import { ref, reactive, computed, toRef, toRefs } from 'vue';
+import { TinyButton, TinyTooltip, TinyNotify } from '@opentiny/vue';
+import dataService from '../apiService/simpleDataService';
+
+
+const props = defineProps({
+    text: {
+        type: String,
+        default: ''
+    },
+    isNormal: {//是否为普通按钮
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    type: {//'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+        type: String,
+        default: 'default'
+    },
+    size: {//'large' | 'medium' | 'small' | 'mini'
+        type: String,
+        default: 'medium'
+    },
+    apiConfig: {//接口配置
+        type: Object,
+        default: {
+            apiId: null,
+            apiType: ''
+        }
+    },
+    data: {
+        type: Object,
+        default: {}
+    },
+    onClick: {
+        type: Function,
+        default: () => { }
+    },
+    onPrepare: {//调用接口前置事件
+        type: Function,
+        default: () => { }
+    },
+    onFinish: {//调用接口后置事件
+        type: Function,
+        default: () => { }
+    }
+})
+
+const apiMap = [
+    'MULTIPLE_DATA_SEARCH',
+    'DETAILS_DATA',
+    'INTERFACE_PLUGIN',
+    'DATA_INSERT',
+    'BATCH_DATA_INSERT',
+    'DATA_MODIFY',
+    'BATCH_DATA_MODIFY',
+    'DEL_DATA',
+    'BATCH_DEL_DATA',
+    'MULTIPLE_DATA_LINK_SEARCH'
+];
+
+const emit = defineEmits(['click'])
+
+const { text, isNormal, disabled, type, size, apiConfig, data, isUseMethod } = toRefs(props)
+
+const tooltipText = ref('请先设置接口配置')
+
+const click = () => {
+    props.onClick()
+    if (!isNormal.value && apiConfig.value.apiId) {
+        props.onPrepare()
+        dataService.fetch(data.value, { apiId: apiConfig.value.apiId, apiType: apiMap[apiConfig.value.apiType] }).then((res) => {
+            emit('click', res)
+            props.onFinish()
+        })
+    }
+}
+
+</script>
+
+<style lang='less' scoped></style>

package/src/components/DataContainer.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <slot name="content" :row="data"></slot>
+    </div>
+</template>
+
+<script setup>
+
+import { ref, defineProps, onMounted } from "vue";
+
+const props = defineProps(['apiConfig']);
+
+const data = ref({
+    listData: [
+        { id: 1, name: "用户1", age: 25, email: "user1@example.com" },
+        { id: 2, name: "用户2", age: 30, email: "user2@example.com" },
+        { id: 3, name: "用户3", age: 22, email: "user3@example.com" },
+        { id: 4, name: "用户4", age: 28, email: "user4@example.com" },
+        { id: 5, name: "用户5", age: 35, email: "user5@example.com" },
+        { id: 6, name: "用户6", age: 27, email: "user6@example.com" },
+        { id: 7, name: "用户7", age: 24, email: "user7@example.com" },
+        { id: 8, name: "用户8", age: 29, email: "user8@example.com" },
+        { id: 9, name: "用户9", age: 31, email: "user9@example.com" },
+        { id: 10, name: "用户10", age: 26, email: "user10@example.com" },
+    ],
+    pageConfig: {
+        total: 10,
+        current: 1,
+        size: 10,
+    },
+});
+
+onMounted(() => {
+    console.log("DataContainer component has been mounted.");
+    // You can add any initialization logic here
+    // 加载数据
+
+});
+</script>

package/src/components/EbizDialog.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { computed } from 'vue';
+import { TinyDialogBox } from '@opentiny/vue';
+const props = defineProps({
+  title: {
+    type: String,
+    default: '弹窗标题'
+  },
+  slotHeader:{
+    type:Boolean,
+    default:false
+  },
+  width:{
+    type:String,
+    default:'30%'
+  },
+  // 开发值
+  devShow:{
+    type:Boolean,
+    default:true
+  },
+  // 绑定值
+  bindShow:{
+    type:Boolean,
+    default:false
+  },
+  center:{
+    type:Boolean,
+    default:false
+  },
+  showClose:{
+    type:Boolean,
+    default:true
+  },
+  draggable:{
+    type:Boolean,
+    default:false
+  },
+  // 是否绑定到body（嵌套的dialog必须设置为true）
+  appendToBody:{
+    type:Boolean,
+    default:false
+  }
+})
+const show = computed(()=>props.devShow || props.bindShow)
+</script>
+
+<template>
+  <div>
+    <tiny-dialog-box v-model:visible="show" :draggable="props.draggable" :close-on-click-modal="props.showClose" :showClose="props.showClose" :center="props.center" :appendToBody="props.appendToBody" :title="props.title" :width="props.width">
+      <template #title>
+        <slot name="title"></slot>
+      </template>
+      <slot name="content"></slot>
+    </tiny-dialog-box>
+  </div>
+</template>
+
+<style scoped lang="less">
+
+</style>

package/src/components/EbizDivider.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="ebiz-divider" :style="dividerStyle">
+        <div v-if="showText && text" class="divider-text" :style="textStyle">
+            <slot>{{ text }}</slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+/**
+ * EbizDivider 组件 - 可自定义颜色的分隔线组件
+ * 支持自定义分隔线颜色、粗细、间距和文本
+ */
+const props = defineProps({
+    /**
+     * 分隔线颜色
+     */
+    color: {
+        type: String,
+        default: '#e8e8e8'
+    },
+    /**
+     * 分隔线粗细
+     */
+    thickness: {
+        type: Number,
+        default: 1
+    },
+    /**
+     * 分隔线上下边距
+     */
+    margin: {
+        type: Number,
+        default: 24
+    },
+    /**
+     * 分隔线文本
+     */
+    text: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 是否显示文本
+     */
+    showText: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 文本颜色
+     */
+    textColor: {
+        type: String,
+        default: '#333'
+    }
+});
+
+// 计算分隔线样式
+const dividerStyle = computed(() => {
+    return {
+        borderTop: `${props.thickness}px solid ${props.color}`,
+        margin: `${props.margin}px 0`,
+        position: props.showText ? 'relative' : 'inherit',
+        textAlign: 'center'
+    };
+});
+
+// 计算文本样式
+const textStyle = computed(() => {
+    return {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        backgroundColor: '#fff',
+        padding: '0 10px',
+        color: props.textColor
+    };
+});
+</script>
+
+<style scoped>
+.ebiz-divider {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+}
+
+.divider-text {
+    font-size: 14px;
+    font-weight: 500;
+}
+</style> 

package/src/components/EbizMindmap/README.md

@@ -0,0 +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
+
+我们的需求里面出了有部门之外，还需要有企业和岗位，企业下面有部门，部门下面有岗位和子部门，岗位下面没有子级
+

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

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

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

@@ -0,0 +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%
+}
+</style>

package/src/components/EbizMindmap/components/vueNode.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="chart-container">
+    <div class='chart drag-manager-wrap' ref="chartRef">
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import MindmapChart from '../../charts/framework/charts/MindmapChart';
+import Demo from './node.vue';
+
+const props = defineProps({
+  option: {
+    type: Object,
+    required: true
+  },
+  layoutoption: {
+    type: Object,
+    required: true
+  }
+});
+
+const chartRef = ref(null);
+const integrateChart = ref(null);
+const newoption = ref({});
+const currentTheme = ref(localStorage.getItem('chartTheme') || 'hdesign-light');
+
+const renderChart = () => {
+  integrateChart.value = new MindmapChart();
+  integrateChart.value.init(chartRef.value);
+  newoption.value = JSON.parse(JSON.stringify(props.option));
+  newoption.value.component = Demo;
+  integrateChart.value.setOption(newoption.value);
+  integrateChart.value.canvas.onScale = (args) => { };
+  integrateChart.value.render();
+};
+
+onMounted(() => {
+  renderChart();
+});
+
+watch(() => props.layoutoption, (newValue) => {
+  chartRef.value.innerHTML = '';
+  newoption.value.layout.direction = newValue.direction;
+  newoption.value.layout.vGap = newValue.vGap;
+  newoption.value.layout.hGap = newValue.hGap;
+  newoption.value.layout.oneSide = [];
+  newoption.value.layout.oneSide.push(newValue.oneSideString);
+
+  integrateChart.value.init(chartRef.value);
+  integrateChart.value.setOption(newoption.value);
+  integrateChart.value.canvas.onScale = (args) => { };
+  integrateChart.value.render();
+}, { deep: true });
+</script>
+
+<style scoped>
+.drag-manager-wrap {
+  width: 100% !important;
+  height: 600px;
+  overflow: hidden;
+}
+</style>