@ebiz/designer-components 0.0.18-kzy.3 → 0.0.18-kzy.5

package/src/components/EbizTreeSelector.vue

@@ -0,0 +1,423 @@
+<template>
+  <div class="ebiz-tree-selector">
+    <div class="selected-items" v-if="modelValue && modelValue.length">
+      <div v-for="(item, index) in modelValue" :key="index" class="selected-item">
+        <span class="item-text">{{ item.label }}</span>
+        <span class="item-remove" @click.stop="removeItem(index)">×</span>
+      </div>
+    </div>
+    <t-button @click="showDialog" variant="text" theme="primary" size="small"> 添加 </t-button>
+
+    <EbizDialog v-model:visible="dialogVisible" header="选择人员/部门" width="800px" placement="center" confirmBtn="确定"
+      cancelBtn="取消" @confirm="handleConfirm" @cancel="handleCancel">
+      <div class="selector-container">
+        <!-- 左侧选择区域 -->
+        <div class="left-panel">
+          <!-- 顶部搜索区域 -->
+          <div class="search-box">
+            <t-input v-model="searchText" placeholder="搜索成员、部门或标签" clearable>
+              <template #suffix-icon>
+                <t-icon name="search"></t-icon>
+              </template>
+            </t-input>
+          </div>
+
+          <!-- 选项卡 -->
+          <t-tabs v-model="activeTab" class="selector-tabs">
+            <t-tab-panel value="organization" label="组织架构" :destroyOnHide="false">
+
+            </t-tab-panel>
+            <!-- <t-tab-panel value="department" label="部门"></t-tab-panel> -->
+            <!-- <t-tab-panel value="position" label="岗位"></t-tab-panel> -->
+            <t-tab-panel value="employee" label="员工"></t-tab-panel>
+          </t-tabs>
+
+          <!-- 树形结构区域 -->
+          <div class="tree-content">
+            <div v-if="loading" class="loading-container">
+              <t-loading />
+            </div>
+            <EbizTree ref="organizationTree" v-show="activeTab === 'organization'" checkable :items="organizationData"
+              v-model="checkedNodes" v-model:expanded="expandedNodes" :disable-check="disableCheck"
+              :keys="{ label: 'name', value: 'id', children: 'childs' }" @change="handleChange" />
+            <!-- <EbizTree
+              v-else-if="activeTab === 'department'"
+              checkable
+              :items="filteredData."
+              v-model="checkedNodes"
+              :disable-check="disableCheck"
+            />
+            <EbizTree
+              v-else-if="activeTab === 'position'"
+              checkable
+              :items="filteredData.position"
+              v-model="checkedNodes"
+              :disable-check="disableCheck"
+            /> -->
+            <EbizTree ref="employeeTree" v-show="activeTab === 'employee'" checkable :items="employeeData"
+              :keys="{ label: 'label', value: 'bindid', children: 'childs' }" v-model="checkedUserNodes"
+              :disable-check="disableCheck" />
+          </div>
+        </div>
+
+        <!-- 右侧已选区域 -->
+        <div class="right-panel">
+          <div class="selected-title">已选择的部门、成员</div>
+          <div class="selected-count">共 {{ [...selectPreview, ...selectPreviewUser].length }} 项</div>
+          <div class="selected-list">
+            <div v-for="(item, index) in [...selectPreview,...selectPreviewUser]" :key="index"
+              class="selected-list-item">
+              <t-icon :name="getIconForType(item)" class="item-icon" />
+              <span class="selected-label">{{ item.label }}</span>
+              <t-icon name="close-circle" class="remove-icon" @click="removePreviewItem(item)" />
+            </div>
+            <div v-if="[...selectPreview, ...selectPreviewUser].length === 0" class="no-selection">
+              <t-icon name="info-circle" />
+              <span style="user-select: none">请在左侧选择部门或成员</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </EbizDialog>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import {
+  Button as TButton,
+  Icon as TIcon,
+  Input as TInput,
+  Loading as TLoading,
+  TabPanel as TTabPanel,
+  Tabs as TTabs
+} from 'tdesign-vue-next'
+import EbizDialog from './TdesignDialog.vue'
+import EbizTree from './EbizTree.vue'
+import dataService from '../apiService/simpleDataService'
+
+const props = defineProps({
+  // 选中的数据，支持v-model
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 树形数据，可以是单个数组或分类对象
+  data: {
+    type: [Array, Object],
+    default: () => []
+  },
+  // 禁用选择的节点
+  disableCheck: {
+    type: Function,
+    default: null
+  },
+  // 标题
+  title: {
+    type: String,
+    default: '选择人员/部门'
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+// 弹窗显示状态
+const dialogVisible = ref(false)
+// 搜索文本
+const searchText = ref('')
+// 选中的节点
+const checkedNodes = ref([])
+const  checkedUserNodes = ref([]);
+// 展开的节点
+const expandedNodes = ref([])
+// 当前活动的选项卡
+const activeTab = ref('organization')
+// 弹窗内预览的选中项
+const selectPreview = ref([])
+const selectPreviewUser = ref([])
+// 加载状态
+const loading = ref(false)
+// API返回的数据
+const organizationData = ref([])
+const employeeData = ref([])
+const organizationTree = ref()
+const employeeTree = ref()
+
+// 获取API数据
+const fetchApiData = async () => {
+  loading.value = true
+  try {
+    organizationData.value = await dataService.fetch(
+      { keyWord: activeTab.value === 'organization' ? searchText.value : '' },
+      {},
+      '/appdata/execute/plugin?key=organizational_structure'
+    )
+    employeeData.value = (await dataService.fetch(
+      {keyWord:activeTab.value === 'employee' ? searchText.value : ''},
+      {},
+      "/appdata/execute/plugin?key=all_active_employesse"
+    )).map(i=>({
+      label:i.name,
+      bindid:i.id,
+      type:'employee'
+    }))
+  } catch (error) {
+  } finally {
+    loading.value = false
+  }
+}
+
+// 根据类型获取对应图标
+const getIconForType = (item) => {
+  const iconMap = {
+    GS: 'internet',
+    DEPT: 'folder',
+    GW: 'user-list',
+    employee: 'user'
+  }
+  return iconMap[item.type] || 'user'
+}
+
+// 显示对话框
+function showDialog() {
+  // 获取API数据
+  fetchApiData()
+  // 重置选中的节点
+  checkedNodes.value = props.modelValue.filter(i => i.type !== 'employee').map((item) => item.bindid);
+  checkedUserNodes.value = props.modelValue.filter(i => i.type === 'employee').map((item) => item.bindid);
+  dialogVisible.value = true
+}
+
+// 确认选择
+function handleConfirm() {
+  const finalValue = [...selectPreview.value.map((item) => ({
+    label: item.label,
+    bindid: item.bindid,
+    type: item.type
+  })), ...selectPreviewUser.value];
+  emit(
+    'update:modelValue', finalValue
+  )
+  emit('change', finalValue)
+  dialogVisible.value = false
+}
+
+// 取消选择
+function handleCancel() {
+  dialogVisible.value = false
+}
+
+// 移除已选择预览中的项目
+function removePreviewItem(item) {
+  const isUser = item.type == 'employee';
+  if(isUser){
+    let index = selectPreviewUser.value.findIndex(i=>i.bindid === item.bindid);
+    const removedUser = selectPreviewUser.value[index];
+    selectPreviewUser.value.splice(index,1);
+    checkedUserNodes.value = checkedUserNodes.value.filter((value) => value !== removedUser.bindid)
+    return
+  }
+  let index = selectPreview.value.findIndex(i => i.bindid === item.bindid);
+  const removedItem = selectPreview.value[index];
+  selectPreview.value.splice(index, 1)
+  checkedNodes.value = checkedNodes.value.filter((value) => value !== removedItem.bindid)
+}
+
+// 移除选中项
+function removeItem(index) {
+  const newValue = [...props.modelValue]
+  newValue.splice(index, 1)
+  console.log(newValue,230)
+  emit('update:modelValue', newValue)
+  emit('change', newValue)
+}
+
+// 监听选中节点变化，同步到预览
+watch(
+  checkedNodes,
+  (newValues) => {
+    if (!organizationTree.value.treeRef) return
+    selectPreview.value = newValues.map(organizationTree.value.treeRef.getItem).map((i) => ({
+      label: i?.label,
+      type: i?.data?.type || i.type,
+      bindid: i?.value
+    }))
+  },
+  { deep: true }
+)
+watch(checkedUserNodes,nVal=>{
+  selectPreviewUser.value = employeeData.value.filter(i=>nVal.includes(i.bindid))
+},{deep:true})
+// 监听modelValue变化，同步到选中节点
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    checkedNodes.value = newValue.filter(i=>i.type!=='employee').map((item) => item.bindid);
+    checkedUserNodes.value = newValue.filter(i => i.type === 'employee').map((item) => item.bindid);
+    console.log(newValue,checkedUserNodes.value,267)
+  },
+  { deep: true ,immediate:true}
+)
+watch(activeTab,nVal=>{
+  searchText.value = ''
+})
+watch(searchText,nVal=>{
+  fetchApiData()
+})
+// 组件挂载时，预加载数据
+onMounted(() => {
+  showDialog()
+})
+</script>
+
+<style scoped>
+.ebiz-tree-selector {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+}
+
+.selected-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.selected-item {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.item-text {
+  margin-right: 4px;
+}
+
+.item-remove {
+  cursor: pointer;
+  color: #999;
+  font-size: 16px;
+}
+
+.item-remove:hover {
+  color: #ff4d4f;
+}
+
+.add-button {
+  display: flex;
+  align-items: center;
+}
+
+.selector-container {
+  display: flex;
+  height: 500px;
+}
+
+.left-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #e0e0e0;
+  padding-right: 16px;
+}
+
+.right-panel {
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  padding-left: 16px;
+}
+
+.search-box {
+  margin-bottom: 12px;
+}
+
+.selector-tabs {
+  margin-bottom: 12px;
+}
+
+.tree-content {
+  flex: 1;
+  overflow: auto;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  padding: 12px;
+  position: relative;
+}
+
+.loading-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.selected-title {
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.selected-count {
+  color: #999;
+  font-size: 12px;
+  margin-bottom: 12px;
+}
+
+.selected-list {
+  flex: 1;
+  overflow: auto;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.selected-list-item {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.selected-list-item:last-child {
+  border-bottom: none;
+}
+
+.item-icon {
+  color: #0052d9;
+  margin-right: 8px;
+}
+
+.selected-label {
+  flex: 1;
+  user-select: none;
+}
+
+.remove-icon {
+  color: #999;
+  cursor: pointer;
+}
+
+.remove-icon:hover {
+  color: #ff4d4f;
+}
+
+.no-selection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #999;
+  gap: 8px;
+}
+</style>

package/src/components/TddesignButton.vue

@@ -0,0 +1,153 @@
+<template>
+    <tiny-tooltip :content="!isNormal && !apiConfig.apiId ? tooltipText : ''" placement="top">
+        <t-button :disabled="disabled || loading" :theme="type" :size="size" @click="click">
+            <slot>{{ text }}</slot>
+        </t-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 { Button as TButton } from 'tdesign-vue-next';
+import { TinyTooltip } 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'
+        type: String,
+        default: 'primary'
+    },
+    size: {//'large' | 'medium' | 'small'
+        type: String,
+        default: 'medium'
+    },
+    apiConfig: {//接口配置
+        type: Object,
+        default: () => ({
+            key: null,
+            apiId: null,
+            apiType: ''
+        })
+    },
+    data: {
+        type: Object,
+        default: () => ({})
+    },
+    onClick: {
+        type: Function,
+        default: () => { }
+    },
+    onPrepare: {//调用接口前置事件
+        type: Function,
+        default: () => true // 默认返回true，允许继续执行
+    },
+    onFinish: {//调用接口后置事件
+        type: Function,
+        default: () => { }
+    },
+    onError: {
+        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', 'success', 'error', 'loading', 'prepare'])
+
+const { text, isNormal, disabled, type, size, variant, apiConfig, data } = toRefs(props)
+
+const tooltipText = ref('请先设置接口配置')
+const loading = ref(false)
+
+// 检查API配置是否有效
+const isValidApiConfig = () => {
+    return apiConfig.value && apiConfig.value.apiId &&
+        typeof apiConfig.value.apiType === 'number' &&
+        apiConfig.value.apiType >= 0 &&
+        apiConfig.value.apiType < apiMap.length;
+}
+
+const click = async (e) => {
+    // 总是调用onClick回调
+    props.onClick()
+    emit('click', e)
+
+    // 如果是普通按钮或API配置无效，不调用接口
+    if (isNormal.value || !isValidApiConfig()) {
+        return
+    }
+
+    try {
+        // 设置加载状态
+        loading.value = true
+        emit('loading', true)
+
+        // 调用前置处理并获取返回值
+        const shouldContinue = props.onPrepare()
+        emit('prepare', shouldContinue)
+
+        // 只有当返回值明确为false时才中断，undefined或其他值都继续执行
+        if (shouldContinue === false) {
+            return null
+        }
+
+        // 调用接口
+        const apiType = apiMap[apiConfig.value.apiType]
+        const res = await dataService.fetch(data.value, {
+            key: apiConfig.value.key,
+            apiId: apiConfig.value.apiId,
+            apiType
+        })
+
+        // 成功处理
+        emit('success', res)
+        props.onFinish(res)
+
+        return res
+    } catch (error) {
+        // 错误处理
+        emit('error', error)
+        props.onError(error)
+
+        return null
+    } finally {
+        // 清除加载状态
+        loading.value = false
+        emit('loading', false)
+    }
+}
+</script>
+
+<style lang='less' scoped></style>

package/src/components/TdesignUpload.vue

@@ -4,7 +4,6 @@
         :draggable="draggable" :fileListDisplay="fileListDisplay" :files="internalFiles" :format="format"
         :formatRequest="formatRequest" :headers="headers" :isBatchUpload="isBatchUpload" :max="max" :method="method"
         :multiple="multiple" :name="name" :placeholder="placeholder"
-        :requestMethod="useInternalUpload ? customRequestMethod : requestMethod"
         :showUploadProgress="showUploadProgress" :sizeLimit="sizeLimit" :status="status" :theme="theme" :tips="tips"
         :uploadAllFilesInOneRequest="uploadAllFilesInOneRequest" :uploadButton="uploadButton"
         :useMockProgress="useMockProgress" :withCredentials="withCredentials" v-model="modelValue"
@@ -58,7 +57,7 @@ import { Upload as TUpload } from 'tdesign-vue-next';
 import dataService from '../apiService/simpleDataService';
 
 // 内部上传地址常量
-const INTERNAL_UPLOAD_URL = '/file/upload';
+const INTERNAL_UPLOAD_URL = '/api/file/app/td-upload';
 
 // 内部维护的文件列表，代替直接使用props.files
 const internalFiles = ref([]);
@@ -274,7 +273,7 @@ const props = defineProps({
     // 是否使用内部上传服务，如果为true则忽略action参数
     useInternalUpload: {
         type: Boolean,
-        default: true
+        default: false
     }
 });
 

package/src/index.js

@@ -23,6 +23,7 @@ import EbizRouteBreadcrumb from "./components/EbizRouteBreadcrumb.vue";
 import EbizRichTextEditor from "./components/EbizRichTextEditor.vue";
 import EbizFileUpload from "./components/EbizFileUpload.vue";
 import EbizTabHeader from "./components/EbizTabHeader.vue";
+import EbizPageHeader from "./components/EbizPageHeader.vue";
 import TdesignCalendar from "./components/TdesignCalendar/index.vue";
 import TdesignCollapse from "./components/TdesignCollapse.vue";
 import TdesignCollapsePanel from "./components/TdesignCollapsePanel.vue";
@@ -52,6 +53,11 @@ import EbizTable from "./components/EbizTable.vue";
 import EbizTableColumn from './components/EbizTableColumn.vue';
 import EbizTableSort from './components/EbizTableSort.vue';
 import EbizStatusBadge from "./components/EbizStatusBadge.vue";
+import EbizDetailBlock from './components/EbizDetailBlock.vue';
+import EbizTree from './components/EbizTree.vue';
+import EbizTreeSelector from './components/EbizTreeSelector.vue';
+import EbizTimePicker from './components/EbizTimePicker.vue';
+import EbizGridEditorSelect from './components/EbizGridEditorSelect.vue';
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // 导入简洁数据服务
@@ -91,6 +97,8 @@ export {
   EbizRouteBreadcrumb,
   EbizRichTextEditor,
   EbizTabHeader,
+  // 页面头部组件
+  EbizPageHeader,
   // 思维导图
   EbizMindmap,
   // 文件上传组件
@@ -156,5 +164,13 @@ export {
   // 表格排序组件
   EbizTableSort,
   // 状态标记组件
-  EbizStatusBadge
+  EbizStatusBadge,
+  // 详情块组件
+  EbizDetailBlock,
+  // 树组件
+  EbizTree,
+  EbizTreeSelector,
+  // 时间选择器组件
+  EbizTimePicker,
+  EbizGridEditorSelect // 表格编辑专用select组件
 };

package/src/router/index.js

@@ -244,6 +244,12 @@ const routes = [
     component: () => import('../views/DialogDemo.vue'),
     meta: { title: 'TDesign对话框组件示例' }
   },
+  {
+    path: '/page-header',
+    name: 'PageHeader',
+    component: () => import('../views/PageHeaderDemo.vue'),
+    meta: { title: 'Ebiz页面头部组件示例', icon: 'header' }
+  },
   {
     path: '/table-demo',
     name: 'TableDemo',
@@ -261,6 +267,44 @@ const routes = [
     name: 'TableSort',
     component: () => import('../views/TableSortDemo.vue'),
     meta: { title: 'Ebiz表格排序组件示例' }
+  },
+  {
+    path: '/ebiz-detail-block',
+    name: 'EbizDetailBlock',
+    component: () => import('../views/EbizDetailBlockDemo.vue'),
+    meta: { title: 'Ebiz详情块组件示例' }
+  },
+  {
+    path: '/tree',
+    name: 'Tree',
+    component: () => import('../views/TreeDemo.vue'),
+    meta: { title: 'Ebiz树组件示例' }
+  },
+  {
+    path: '/tree-demo',
+    name: 'TreeDemo',
+    component: () => import('../views/TreeDemo.vue'),
+    meta: { title: 'Ebiz树组件示例' }
+  },
+  {
+    path: '/tree-selector-demo',
+    name: 'TreeSelectorDemo',
+    component: () => import('../views/TreeSelectorDemo.vue'),
+    meta: {
+      title: '树形选择器'
+    }
+  },
+  {
+    path: '/tree-selector',
+    name: 'TreeSelector',
+    component: () => import('../views/TreeSelectorDemo.vue'),
+    meta: { title: '树选择器组件示例' }
+  },
+  {
+    path: '/time-picker',
+    name: 'TimePicker',
+    component: () => import('../views/TimePickerDemo.vue'),
+    meta: { title: '时间选择器组件示例' }
   }
 ]