@ebiz/designer-components 0.0.47 → 0.0.49

package/src/components/EbizFileUpload.vue

@@ -1,40 +1,41 @@
 <template>
   <div class="ebiz-file-upload">
-    <tiny-pop-upload
+    <t-upload
       ref="uploadRef"
       v-model="fileList"
       :action="uploadUrl"
       :headers="headers"
       :multiple="multiple"
       :accept="accept"
-      :size-limit="sizeLimit"
+      :max-size="sizeLimit"
       :disabled="disabled"
-      :draggable="draggable"
-      :theme="theme"
+      :drag="draggable"
+      :theme="tTheme"
       :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>
+      <template #trigger v-else>
+        <t-button :size="btnSize" :theme="buttonType" :variant="buttonPlain ? 'outline' : 'base'">
+          {{ buttonText }}
+        </t-button>
+      </template>
+    </t-upload>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, defineProps, defineEmits } from 'vue';
-import { PopUpload as TinyPopUpload } from '@opentiny/vue';
+import { ref, computed, watch } from 'vue';
+import { Upload as TUpload, Button as TButton } from 'tdesign-vue-next';
 
 /**
- * EbizFileUpload 组件 - 基于 OpenTiny PopUpload 的文件上传组件
+ * EbizFileUpload 组件 - 基于 TDesign Upload 的文件上传组件
  * 支持自定义上传地址、文件类型限制、大小限制、多文件上传等
  * 提供成功和失败的回调处理
  */
@@ -164,6 +165,24 @@ const fileList = ref(props.initialFiles || []);
 // 计算上传地址
 const uploadUrl = computed(() => props.action);
 
+// 将tiny主题映射到tdesign主题
+const tTheme = computed(() => {
+  switch (props.theme) {
+    case 'button': return 'button';
+    case 'both': return 'file-input';
+    default: return 'file';
+  }
+});
+
+// 将tiny按钮大小映射到tdesign按钮大小
+const btnSize = computed(() => {
+  switch (props.buttonSize) {
+    case 'mini': return 'small';
+    case 'small': return 'medium';
+    default: return 'large';
+  }
+});
+
 // 上传前处理
 const handleBeforeUpload = (_file) => {
   // 可以在这里添加文件校验逻辑
@@ -171,19 +190,19 @@ const handleBeforeUpload = (_file) => {
 };
 
 // 上传成功处理
-const handleSuccess = (response, file, fileList) => {
-  emit('success', { file, response, fileList });
+const handleSuccess = (result, file, fileList) => {
+  emit('success', { file: file.raw, response: result, fileList });
 };
 
 // 上传失败处理
 const handleError = (error, file, fileList) => {
-  emit('error', { file, error, fileList });
+  emit('error', { file: file.raw, error, fileList });
 };
 
 // 文件变更处理
-const handleChange = (file, fileList) => {
-  emit('update:files', fileList);
-  emit('change', { file, fileList });
+const handleChange = (value, context) => {
+  emit('update:files', value);
+  emit('change', { file: context.file?.raw, fileList: value });
 };
 
 // 监听initialFiles变化更新文件列表
@@ -199,4 +218,22 @@ watch(() => props.initialFiles, (newFiles) => {
   width: 100%;
   margin: 16px 0;
 }
+
+:deep(.t-upload__tips) {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+:deep(.t-upload__dragger) {
+  padding: 24px;
+  background-color: var(--td-bg-color-container);
+  border: 1px dashed var(--td-component-border);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: border-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+}
+
+:deep(.t-upload__dragger:hover) {
+  border-color: var(--td-brand-color);
+}
 </style> 

package/src/components/EbizRouteBreadcrumb.vue

@@ -1,26 +1,26 @@
 <template>
-  <tiny-breadcrumb>
-    <tiny-breadcrumb-item :to="{ path: '/' }">首页</tiny-breadcrumb-item>
-    <tiny-breadcrumb-item
+  <t-breadcrumb>
+    <t-breadcrumb-item :to="{ path: '/' }">首页</t-breadcrumb-item>
+    <t-breadcrumb-item
       v-for="(item, index) in breadcrumbItems"
       :key="index"
       :to="item.path"
     >
       {{ item.title }}
-    </tiny-breadcrumb-item>
-  </tiny-breadcrumb>
+    </t-breadcrumb-item>
+  </t-breadcrumb>
 </template>
 
 <script>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { TinyBreadcrumb, TinyBreadcrumbItem } from '@opentiny/vue'
+import { Breadcrumb as TBreadcrumb, BreadcrumbItem as TBreadcrumbItem } from 'tdesign-vue-next'
 
 export default {
   name: 'EbizRouteBreadcrumb',
   components: {
-    TinyBreadcrumb,
-    TinyBreadcrumbItem
+    TBreadcrumb,
+    TBreadcrumbItem
   },
   setup() {
     const route = useRoute()
@@ -41,7 +41,7 @@ export default {
 </script>
 
 <style scoped>
-.tiny-breadcrumb {
+.t-breadcrumb {
   margin: 16px 0;
 }
 </style> 

package/src/components/EbizSelect.vue

@@ -1,95 +1,85 @@
 <template>
   <div>
-    <tiny-select
-      v-model="value3"
+    <t-select
+      v-model="selectedValue"
       filterable
-      remote
-      :remote-config="{ autoSearch: true }"
-      :remote-method="remoteMethod3"
-      :loading="loading3"
+      :loading="loading"
       loading-text="Loading..."
+      :remote="true"
+      @search="remoteSearch"
       @change="onChange"
+      style="width: 280px;"
     >
-      <tiny-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-    </tiny-select>
-    
+      <t-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+    </t-select>
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, toRefs} from 'vue'
-import { TinySelect, TinyOption } from '@opentiny/vue'
+import { onMounted, ref, toRefs } from 'vue'
+import { Select as TSelect, Option as TOption } from 'tdesign-vue-next'
 import request from '@/apiService/simpleDataService';
+
 const props = defineProps({
   apiConfig: {
     type: Object,
-    default: {
-        apiId: null,
-        apiType: ''
-    }
+    default: () => ({
+      apiId: null,
+      apiType: ''
+    })
   }
 })
-const emit = defineEmits(['formSubmitted'])
 
-onMounted(() => {
-  remoteMethod3('')
-})
-
-const loading3 = ref(false)
-const value3 = ref('')
-const options3 = ref([])
-const list = ref([])
+const emit = defineEmits(['formSubmitted'])
 
-{/* const url = ('http://192.168.0.247:9002/api/appdata/select') */}
+const loading = ref(false)
+const selectedValue = ref('')
+const options = ref([])
 
 const { apiConfig } = toRefs(props);
 
-const remoteMethod3 = (query) => {
+const remoteSearch = (query) => {
+  if (!apiConfig.value.apiId) return;
+  
+  loading.value = true;
   request.fetch({
-    "queryParams":{"name": query}
-  },{
+    "queryParams": { "name": query }
+  }, {
     apiId: apiConfig.value.apiId,
-  },'/appdata/select',).then((val) => {
-    console.log("val.data11111", val.data)
-    options3.value = val.data.map((item) => {
-      return { value: item.name, label: item.name }
-    })
-    console.log("options3.value", options3.value)
-
-  }).catch((err) => {
-    console.log("err111111", err)
-  })
-}
-const onChange = () => {
-  emit('formSubmitted', value3.value);
-}
-
-
-{/* const url = ('http://localhost:3000/admin/product/getHomeProList') */}
-
-
-{/* onMounted(async() => {
-    // await axios.get(url).then((val) => {
-    //     console.log('val', val.data.data)
-    //     list.value = val.data.data.map((item) => {
-    //         return { value: item.name, label: item.name }
-    //       })
-    // })
-
-
-    //  post请求  参数：  apiId: 372, queryParams: {"type": 1}
-    await axios.post(url, { apiId: params.apiId, queryParams: { type: 1 } }).then((val) => {
-      list.value = val.data.data.map((item) => {
+  }, '/appdata/select')
+    .then((val) => {
+      options.value = val.data.map((item) => {
         return { value: item.name, label: item.name }
       })
     })
+    .catch((_err) => {
+      // 错误处理
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
 
-}) */}
+const onChange = () => {
+  emit('formSubmitted', selectedValue.value);
+}
 
+// 初始加载数据
+onMounted(() => {
+  remoteSearch('');
+})
 </script>
 
 <style lang="less" scoped>
-.tiny-select {
-  width: 280px;
+/* TDesign主题样式定制 */
+:deep(.t-select) {
+  &.t-is-focused {
+    border-color: #5e7ce0;
+  }
+}
+
+:deep(.t-select__panel) {
+  max-height: 300px;
+  overflow-y: auto;
 }
 </style>

package/src/components/EbizTabHeader.vue

@@ -1,13 +1,12 @@
 <template>
-  <tiny-tabs v-model="showTab" :tab-style="props.tabStyle" activeColor="#5e7ce0" @click="tabChange">
-    <tiny-tab-item activeColor="#5e7ce0" v-for="i in showTabs" :key="i.value" :title="i.label"
-      :name="i.value.toString()" />
-  </tiny-tabs>
+  <t-tabs v-model="showTab" :theme="props.tabStyle === 'card' ? 'card' : 'normal'" @change="tabChange">
+    <t-tab-panel v-for="i in showTabs" :key="i.value" :label="i.label" :value="i.value.toString()" />
+  </t-tabs>
 </template>
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import { TinyTabs, TinyTabItem } from '@opentiny/vue'
+import { Tabs as TTabs, TabPanel as TTabPanel } from 'tdesign-vue-next'
 import { dataService } from "../index.js"
 
 const emit = defineEmits(['tabChange'])
@@ -59,7 +58,6 @@ const remoteTabs = ref([])
 
 // 展示的tabs
 const showTabs = computed(() => {
-  console.log(props.tabs, 66, 110)
   if (remoteTabs.value.length) return [{ label: '全部', value: '0' }, ...remoteTabs.value];
   if (props.tabs.length) return props.tabs
   return [{ label: '全部', value: '0' }]
@@ -72,13 +70,13 @@ const showTab = computed(() => {
 })
 
 // methods
-const tabChange = (e) => {
-  emit('tabChange', e.name === '0' ? '' : e.name)
+const tabChange = (value) => {
+  emit('tabChange', value === '0' ? '' : value)
 }
 
 // init
 watch(() => showTabs.value, () => {
-  tabChange({ name: showTab.value })
+  tabChange(showTab.value)
 })
 
 watch(() => props.apiConfig, (nVal) => {
@@ -93,53 +91,43 @@ watch(() => props.apiConfig, (nVal) => {
 </script>
 
 <style scoped lang="less">
-:deep(.tiny-tabs__item.is-active) {
+// TDesign Tabs 主题色自定义
+:deep(.t-tabs__nav--card) {
+  .t-tabs__nav-item.t-is-active {
+    background-color: #5e7ce0;
+    border-color: #5e7ce0;
+  }
+}
+
+:deep(.t-tabs__nav-item) {
+  color: #606266;
+  
+  &:hover {
+    color: #5e7ce0;
+  }
+}
+
+:deep(.t-tabs__nav-item.t-is-active) {
   color: #5e7ce0;
 }
 
-:deep(.tiny-tabs__active-bar) {
-  background: #5e7ce0;
-  height: 4px;
+:deep(.t-tabs__bar) {
+  background-color: #5e7ce0;
 }
 
-:deep(.tiny-tabs__content) {
+:deep(.t-tabs__content) {
   display: none;
 }
 
-:deep(.tiny-tabs__nav) {
+:deep(.t-tabs__nav-container) {
   border-bottom: 1px solid #e8e8e8;
   margin-bottom: 0;
 }
 
-:deep(.tiny-tabs__item) {
+:deep(.t-tabs__nav-item) {
   padding: 0 20px;
   height: 40px;
   line-height: 40px;
   font-size: 14px;
-  color: #606266;
-  transition: color 0.3s;
-  cursor: pointer;
-
-  &:hover {
-    color: #5e7ce0;
-  }
-}
-
-:deep(.tiny-tabs__header) {
-  margin-bottom: 0;
-  overflow: hidden;
-  position: relative;
-  white-space: nowrap;
-}
-
-:deep(.tiny-tabs__nav-wrap) {
-  overflow: hidden;
-  position: relative;
-  white-space: nowrap;
-}
-
-:deep(.tiny-tabs__nav-scroll) {
-  overflow: hidden;
-  white-space: nowrap;
 }
 </style>

package/src/components/senior/EbizSDialog/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="ebiz-tdesign-button-dialog">
+    <div v-if="$slots.trigger" @click="openDialog">
+      <slot name="trigger"></slot>
+    </div>
     <t-dialog v-model:visible="dialogVisible" :header="title || computedTitle" :width="dialogWidth" :top="dialogTop"
       :attach="dialogAttach" :destroy-on-close="dialogDestroyOnClose" :mode="dialogMode" :placement="dialogPlacement"
       :show-overlay="dialogShowOverlay" :close-on-esc-keydown="dialogCloseOnEscKeydown"
@@ -556,6 +559,7 @@ const loadDetailData = async (id) => {
 
 // 打开弹窗并传递参数
 const openDialog = (params = {}) => {
+  params = { ...params , ...props.params}
   // 重置状态
   if (props.dialogType === 'add') {
     // 添加模式：清空表单数据

package/src/index.js

@@ -18,7 +18,6 @@ import EbizDivider from "./components/EbizDivider.vue";
 import EbizStatsCard from "./components/EbizStatsCard.vue";
 import EbizOkrTree from "./components/EbizOkrTree.vue";
 import EbizRemoteSelect from "./components/EbizRemoteSelect.vue";
-import EbizMindmap from "./components/EbizMindmap/index.vue";
 import EbizRouteBreadcrumb from "./components/EbizRouteBreadcrumb.vue";
 import EbizFileUpload from "./components/EbizFileUpload.vue";
 import EbizTabHeader from "./components/EbizTabHeader.vue";
@@ -63,6 +62,7 @@ import EbizAutoForm from './components/EbizAutoForm.vue';
 import EbizDepartmentSelector from './components/EbizDepartmentSelector.vue';
 import EbizTdesignButtonDialog from './components/EbizTdesignButtonDialog.vue';
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
+import EbizApproval from './components/EbizApproval.vue';
 
 // import EbizDescriptions from './components/EbizDescriptions.vue';
 // import EbizDescriptionsItem from './components/EbizDescriptionsItem.vue'
@@ -116,8 +116,6 @@ export {
   EbizTabHeader,
   // 页面头部组件
   EbizPageHeader,
-  // 思维导图
-  EbizMindmap,
   // 文件上传组件
   EbizFileUpload,
   // 日历组件
@@ -211,5 +209,7 @@ export {
   EbizSData,
   EbizSForm,
   EbizSFormItem,
-  EbizSDialog
+  EbizSDialog,
+  // 新增 EbizApproval 组件
+  EbizApproval
 };

package/src/router/index.js

@@ -4,6 +4,7 @@ import ButtonView from '../views/Button.vue'
 import TableView from '../views/TableView.vue'
 import TdesignDescriptions from '../views/TdesignDescriptions.vue'
 import EbizSForm from '../views/EbizSForm/index.vue'
+import path from 'path'
 
 const routes = [
   {
@@ -346,6 +347,12 @@ const routes = [
     name: 'EbizSDialog',
     component: () => import('../views/EbizSDialogDemo.vue'),
     meta: { title: 'Ebiz高级弹窗组件示例' }
+  },
+  {
+    path:"/approval",
+    name:"EbizApproval",
+    component:()=>import('../views/EbizApprovalDemo.vue'),
+    meta:{title:"Ebiz审批组件示例"}
   }
 ]
 

package/src/views/EbizApprovalDemo.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="approval-demo">
+    <h2>审批组件示例</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <ebiz-approval
+        v-model:approverList="approverList"
+        v-model:ccList="ccList"
+        key="approval-1"
+        :required="true"
+        @change="handleChange"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>不显示抄送人</h3>
+      <ebiz-approval
+        v-model:approverList="approverList2"
+        v-model:ccList="ccList2"
+        key="approval-2"
+        :id="2"
+        :required="true"
+        :showCC="false"
+        @change="handleChange"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>非必填</h3>
+      <ebiz-approval
+        v-model:approverList="approverList3"
+        v-model:ccList="ccList3"
+        key="approval-3"
+        :id="3"
+        :required="false"
+        @change="handleChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { EbizApproval } from '../index'
+
+const approverList = ref([])
+const ccList = ref([])
+
+const approverList2 = ref(['1'])
+const ccList2 = ref([])
+
+const approverList3 = ref(['1', '2', '3'])
+const ccList3 = ref(['4', '5'])
+
+const handleChange = (data: any) => {
+  console.log('变更数据:', data)
+}
+</script>
+
+<style lang="less" scoped>
+.approval-demo {
+  padding: 20px;
+
+  h2 {
+    margin-bottom: 24px;
+  }
+
+  .demo-section {
+    margin-bottom: 32px;
+
+    h3 {
+      margin-bottom: 16px;
+    }
+  }
+}
+</style> 

package/src/views/EbizSDataDemo.vue

@@ -45,7 +45,6 @@ export default {
 import { ref } from 'vue';
 import { EbizSData, EbizSFormItem } from '../index';
 import EbizTdesignButtonDialog from '../components/EbizTdesignButtonDialog.vue';
-import { TinyGrid } from '@opentiny/vue';
 
 // 表单数据
 const formData1 = ref({

package/src/views/Home.vue

@@ -85,7 +85,8 @@ export default {
       { path: '/ebiz-s-form', title: 'PC端表单组件示例' },
       { path: '/ebiz-map', title: '地图经纬度选择器组件示例' },
       { path: '/ebiz-s-data', title: 'Ebiz数据组件示例' },
-      { path: '/ebiz-s-dialog', title: 'Ebiz高级弹窗组件示例' }
+      { path: '/ebiz-s-dialog', title: 'Ebiz高级弹窗组件示例' },
+      { path: '/approval', title: 'Ebiz审批组件示例' }
     ]
 
     return {

package/src/components/EbizMindmap/README.md

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