@ebiz/designer-components 0.0.22 → 0.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizDepartmentSelector.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <t-cascader v-model="selectedValue" :options="departmentTreeData" :placeholder="placeholder" :clearable="clearable"
+      :disabled="disabled" :size="size" :multiple="multiple" :max="max" :checkStrictly="checkStrictly"
+      :filterable="filterable" :loading="loading" @change="handleChange">
+      <template v-if="$slots.empty" #empty>
+        <slot name="empty"></slot>
+      </template>
+      <template v-if="$slots.dropdownItem" #dropdownItem="slotProps">
+        <slot name="dropdownItem" v-bind="slotProps"></slot>
+      </template>
+      <template v-if="$slots.collapsedItems" #collapsedItems="slotProps">
+        <slot name="collapsedItems" v-bind="slotProps"></slot>
+      </template>
+      <template v-if="$slots.suffix" #suffix>
+        <slot name="suffix"></slot>
+      </template>
+      <template v-if="$slots.prefixIcon" #prefixIcon>
+        <slot name="prefixIcon"></slot>
+      </template>
+    </t-cascader>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { Cascader as TCascader } from 'tdesign-vue-next';
+import { dataService } from '../index.js';
+
+// 定义组件属性
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Array],
+    default: undefined
+  },
+  placeholder: {
+    type: String,
+    default: '请选择部门'
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: undefined,
+    validator: (val) => ['small', 'medium', 'large'].includes(val)
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  max: {
+    type: Number,
+    default: 0
+  },
+  checkStrictly: {
+    type: Boolean,
+    default: true
+  },
+  filterable: {
+    type: Boolean,
+    default: true
+  }
+});
+
+// 定义组件事件
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 内部状态变量
+const departmentData = ref([]);
+const departmentTreeData = ref([]);
+const loading = ref(false);
+const selectedValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+});
+
+// 处理变更事件
+const handleChange = (value, context) => {
+  console.log(value, context.node.data);
+  emit('change', value, context);
+};
+
+// 将部门列表数据转换为树形结构
+const buildDepartmentTree = (data, parentId = null) => {
+  return data
+    .filter(item => item.manager_dept === parentId)
+    .map(item => {
+      const children = buildDepartmentTree(data, item.id);
+      return {
+        ...item,
+        label: item.name,
+        value: item.id,
+        children: children.length > 0 ? children : undefined
+      };
+    });
+};
+
+// 加载部门数据
+const loadDepartmentData = async () => {
+  try {
+    loading.value = true;
+    dataService.fetch({},{
+        apiId: 1933, 
+        apiType: 'MULTIPLE_DATA_SEARCH'
+    }).then(res => {
+      departmentData.value = res.data || [];
+      departmentTreeData.value = buildDepartmentTree(departmentData.value,0);
+    }).catch(err => {
+      console.error('获取部门数据失败:', err);
+    }).finally(() => {
+      loading.value = false;
+    });
+  } catch (error) {
+    console.error('获取部门数据失败:', error);
+    departmentData.value = [];
+    departmentTreeData.value = [];
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadDepartmentData();
+});
+</script>
+
+<style>
+.ebiz-department-selector {
+  width: 100%;
+}
+</style> 

package/src/components/EbizRemoteSelect.vue

@@ -194,7 +194,7 @@ const handleBlur = (value, context) => {
 // 值变化处理函数
 const handleChange = (value, context) => {
     emit('update:modelValue', value);
-    emit('change', value, context);
+    emit('change', value, context, options.value);
 };
 
 // 组件挂载时，如果有默认值则加载对应的选项

package/src/index.js

@@ -59,6 +59,7 @@ import EbizPopconfirm from './components/EbizPopconfirm.vue';
 import EbizTreeMergeTable from './components/EbizTreeMergeTable.vue';
 import EbizTdesignLoading from './components/EbizTdesignLoading.vue';
 import EbizAutoForm from './components/EbizAutoForm.vue';
+import EbizDepartmentSelector from './components/EbizDepartmentSelector.vue';
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // import EbizDescriptions from './components/EbizDescriptions.vue';
@@ -183,6 +184,8 @@ export {
   EbizTreeMergeTable,
   // 自动表单组件
   EbizAutoForm,
+  // 部门选择器组件
+  EbizDepartmentSelector,
   // 新增 EbizDescriptions 和 EbizDescriptionsItem
   EbizDescriptions,
   EbizDescriptionsItem,

package/src/router/index.js

@@ -304,6 +304,12 @@ const routes = [
     name: 'TreeMergeTableDemo',
     component: () => import('../views/TreeMergeTableDemo.vue'),
     meta: { title: '树形合并表格组件示例' }
+  },
+  {
+    path: '/ebiz-department-selector',
+    name: 'EbizDepartmentSelector',
+    component: () => import('../views/EbizDepartmentSelectorDemo.vue'),
+    meta: { title: 'Ebiz部门选择器组件示例' }
   }
 ]
 

package/src/views/EbizDepartmentSelectorDemo.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="department-selector-demo">
+    <h1>部门选择器组件</h1>
+    
+    <section class="demo-section">
+      <h2>基础用法</h2>
+      <div>
+        <EbizDepartmentSelector v-model="selectedDepartment" placeholder="请选择部门" />
+        <div class="result-container">
+          <p>选中结果: {{ selectedDepartment }}</p>
+        </div>
+      </div>
+    </section>
+    
+    <section class="demo-section">
+      <h2>多选模式</h2>
+      <div class="demo-box">
+        <EbizDepartmentSelector 
+          v-model="selectedMultipleDepartments" 
+          placeholder="请选择多个部门" 
+          :multiple="true" 
+        />
+        <div class="result-container">
+          <p>选中结果: {{ selectedMultipleDepartments }}</p>
+        </div>
+      </div>
+    </section>
+    
+    <section class="demo-section">
+      <h2>可选择任意层级</h2>
+      <div class="demo-box">
+        <EbizDepartmentSelector 
+          v-model="selectedWithStrictly" 
+          placeholder="任意层级皆可选择" 
+          :checkStrictly="true"
+          :multiple="true"
+        />
+        <div class="result-container">
+          <p>选中结果: {{ selectedWithStrictly }}</p>
+        </div>
+      </div>
+    </section>
+    
+    <section class="demo-section">
+      <h2>不同尺寸</h2>
+      <div class="demo-box">
+        <div class="size-row">
+          <EbizDepartmentSelector 
+            v-model="selectedSizeSmall" 
+            placeholder="小型尺寸" 
+            size="small"
+          />
+          <EbizDepartmentSelector 
+            v-model="selectedSizeMedium" 
+            placeholder="中型尺寸" 
+            size="medium"
+          />
+          <EbizDepartmentSelector 
+            v-model="selectedSizeLarge" 
+            placeholder="大型尺寸" 
+            size="large"
+          />
+        </div>
+      </div>
+    </section>
+    
+    <section class="demo-section">
+      <h2>自定义API地址</h2>
+      <div class="demo-box">
+        <EbizDepartmentSelector 
+          v-model="selectedCustomApi" 
+          placeholder="自定义API地址" 
+          apiUrl="/api/custom-departments"
+        />
+      </div>
+    </section>
+    
+    <section class="demo-section">
+      <h2>禁用状态</h2>
+      <div class="demo-box">
+        <EbizDepartmentSelector 
+          v-model="selectedDisabled" 
+          placeholder="禁用状态" 
+          :disabled="true"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizDepartmentSelector } from '../index.js';
+
+// 单选模式
+const selectedDepartment = ref(90);
+
+// 多选模式
+const selectedMultipleDepartments = ref([]);
+
+// 可选择任意层级
+const selectedWithStrictly = ref([]);
+
+// 不同尺寸
+const selectedSizeSmall = ref();
+const selectedSizeMedium = ref();
+const selectedSizeLarge = ref();
+
+// 自定义API地址
+const selectedCustomApi = ref();
+
+// 禁用状态
+const selectedDisabled = ref();
+
+// 模拟的Mock数据，用于在实际环境无法请求API时展示
+// 在实际开发环境下，可以查看浏览器控制台的网络请求
+// 这里模拟的数据可在开发环境下直接测试组件功能
+console.log('提示：实际环境中组件会请求API获取数据，这里为了演示效果，提供一些模拟数据');
+console.log('模拟数据结构：[{ id: 1, name: "总部", manager_dept: null }, { id: 2, name: "研发部", manager_dept: 1 }, ...]');
+
+</script>
+
+<style scoped>
+.department-selector-demo {
+  padding: 20px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+h1 {
+  margin-bottom: 30px;
+  font-size: 24px;
+  font-weight: 500;
+  color: #0052d9;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+}
+
+h2 {
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+}
+
+.demo-box {
+  padding: 24px;
+  border: 1px solid #e7e7e7;
+  border-radius: 6px;
+  background-color: #fff;
+}
+
+.result-container {
+  margin-top: 16px;
+  padding: 12px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+}
+
+.size-row {
+  display: flex;
+  gap: 16px;
+}
+
+.size-row > * {
+  flex: 1;
+}
+</style> 

package/src/views/Home.vue

@@ -78,7 +78,8 @@ export default {
       { path: '/tdesign-descriptions', title: 'Ebiz描述列表组件示例' },
       { path: '/popconfirm', title: 'Ebiz气泡确认框组件示例' },
       { path: '/tree-merge-table-demo', title: '树形合并表格组件示例' },
-      { path: '/auto-form-demo', title: 'Ebiz自动表单组件示例' }
+      { path: '/auto-form-demo', title: 'Ebiz自动表单组件示例' },
+      { path: '/ebiz-department-selector', title: 'Ebiz部门选择器组件示例' }
     ]
 
     return {