@ebiz/designer-components 0.0.39 → 0.0.40

package/src/index.js

@@ -46,6 +46,7 @@ import EbizStatistic from "./components/EbizStatistic.vue";
 import EbizWatermark from "./components/TdesignWatermark.vue";
 import EbizAvatar from "./components/EbizAvatar.vue";
 import EbizEmployeeInfo from "./components/EbizEmployeeInfo.vue";
+import EbizEmployeeSelector from "./components/EbizEmployeeSelector.vue";
 import EbizAlert from "./components/TdesignAlert.vue";
 import EbizDialog from "./components/TdesignDialog.vue";
 import EbizTable from "./components/EbizTable.vue";
@@ -170,6 +171,8 @@ export {
   EbizAvatar,
   // 员工信息组件
   EbizEmployeeInfo,
+  // 员工选择器组件
+  EbizEmployeeSelector,
   // 提示组件
   EbizAlert,
   // 对话框组件

package/src/router/index.js

@@ -234,6 +234,12 @@ const routes = [
     component: () => import('../views/EbizEmployeeInfo.vue'),
     meta: { title: 'Ebiz员工信息组件示例' }
   },
+  {
+    path: '/ebiz-employee-selector',
+    name: 'EbizEmployeeSelector',
+    component: () => import('../views/EbizEmployeeSelector.vue'),
+    meta: { title: 'Ebiz员工选择器组件示例' }
+  },
   {
     path: '/tdesign-alert',
     name: 'TdesignAlert',

package/src/views/EbizEmployeeSelector.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="component-demo-container">
+    <h2>员工选择器组件示例</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <div class="demo-block">
+        <EbizEmployeeSelector v-model="selectedEmployees" />
+        
+        <div class="demo-info" v-if="selectedEmployees.length > 0">
+          <h4>已选员工：</h4>
+          <pre>{{ JSON.stringify(selectedEmployees, null, 2) }}</pre>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizEmployeeSelector } from '../index.js';
+import { Button as TButton } from 'tdesign-vue-next';
+
+// 演示数据
+const selectedEmployees = ref([]);
+const singleEmployee = ref([]);
+const roleEmployees = ref([]);
+const limitedEmployees = ref([]);
+const presetEmployees = ref([]);
+
+// 设置预选员工
+const presetEmployeeIds = () => {
+  // 设置一些预定义的员工ID
+  presetEmployees.value = ['1001', '1002', '1003'];
+};
+</script>
+
+<style scoped>
+.component-demo-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+}
+
+h2 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+h3 {
+  font-size: 18px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 8px;
+}
+
+.demo-block {
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.demo-info {
+  margin-top: 20px;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+
+pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+}
+</style> 

package/src/views/Home.vue

@@ -67,6 +67,7 @@ export default {
       { path: '/watermark', title: 'TDesign水印组件示例' },
       { path: '/ebiz-avatar', title: 'Ebiz头像组件示例' },
       { path: '/ebiz-employee-info', title: 'Ebiz员工信息组件示例' },
+      { path: '/ebiz-employee-selector', title: 'Ebiz员工选择器组件示例' },
       { path: '/tdesign-alert', title: 'TDesign提示组件示例' },
       { path: '/tdesign-dialog', title: 'TDesign对话框组件示例' },
       { path: '/page-header', title: 'Ebiz页面头部组件示例' },