@ebiz/designer-components 0.0.62 → 0.1.0

package/package.json

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

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

@@ -21,20 +21,20 @@
           <slot name="body"></slot>
         </div>
         <div v-else-if="dialogType === 'add'">
-          <t-form ref="formRef" :colon="colon"
-            :data="localFormData" :disabled="disabled" :label-align="labelAlign" :label-width="labelWidth" :layout="layout"
-            :reset-type="resetType" :reset-on-semi-controlled="resetOnSemiControlled" :rules="rules"
-            :show-error-message="showErrorMessage" :status-icon="statusIcon"
-            :style="customStyle" @reset="handleReset" @submit="handleSubmit" @validate="handleValidate">
+          <t-form ref="formRef" :colon="colon" :data="localFormData" :disabled="disabled" :label-align="labelAlign"
+            :label-width="labelWidth" :layout="layout" :reset-type="resetType"
+            :reset-on-semi-controlled="resetOnSemiControlled" :rules="rules" :show-error-message="showErrorMessage"
+            :status-icon="statusIcon" :style="customStyle" @reset="handleReset" @submit="handleSubmit"
+            @validate="handleValidate">
             <slot name="body"></slot>
           </t-form>
         </div>
         <div v-else-if="dialogType === 'edit'">
-          <t-form ref="formRef" :colon="colon"
-            :data="localFormData" :disabled="disabled" :label-align="labelAlign" :label-width="labelWidth" :layout="layout"
-            :reset-type="resetType" :reset-on-semi-controlled="resetOnSemiControlled" :rules="rules"
-            :show-error-message="showErrorMessage" :status-icon="statusIcon"
-            :style="customStyle" @reset="handleReset" @submit="handleSubmit" @validate="handleValidate">
+          <t-form ref="formRef" :colon="colon" :data="localFormData" :disabled="disabled" :label-align="labelAlign"
+            :label-width="labelWidth" :layout="layout" :reset-type="resetType"
+            :reset-on-semi-controlled="resetOnSemiControlled" :rules="rules" :show-error-message="showErrorMessage"
+            :status-icon="statusIcon" :style="customStyle" @reset="handleReset" @submit="handleSubmit"
+            @validate="handleValidate">
             <slot name="body"></slot>
           </t-form>
         </div>
@@ -51,7 +51,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import { Dialog as TDialog, MessagePlugin, Icon as TIcon,Form as TForm } from 'tdesign-vue-next'
+import { Dialog as TDialog, MessagePlugin, Icon as TIcon, Form as TForm } from 'tdesign-vue-next'
 import dataService from '../../../apiService/simpleDataService'
 
 const props = defineProps({
@@ -61,13 +61,13 @@ const props = defineProps({
     default: 'normal', // 'normal', 'add', 'delete'
     validator: (value) => ['normal', 'add', 'edit', 'delete'].includes(value)
   },
-  
+
   // 删除确认消息
   deleteConfirmMessage: {
     type: String,
     default: '确定要删除该数据吗？此操作不可逆，请谨慎操作。'
   },
-  
+
   // 按钮基础属性
   buttonText: {
     type: String,
@@ -106,7 +106,7 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  
+
   // 弹窗基础属性
   title: {
     type: String,
@@ -124,7 +124,7 @@ const props = defineProps({
     type: String,
     default: undefined
   },
-  
+
   // 弹窗样式和行为属性
   dialogWidth: {
     type: [String, Number],
@@ -166,7 +166,7 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
-  
+
   // API配置
   apiConfig: {
     type: Object,
@@ -180,13 +180,13 @@ const props = defineProps({
   },
 
   // 表单数据
-  formData:{
+  formData: {
     type: Object,
     default: () => null
   },
 
   // 表单验证规则
-  rules:{
+  rules: {
     type: Object,
     default: () => null
   },
@@ -201,7 +201,7 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
-  
+
   // 表单组件属性
   colon: {
     type: Boolean,
@@ -283,7 +283,9 @@ const formRef = ref(null)
 const currentId = ref(null)
 const currentParams = ref({})
 // 本地维护一份表单数据的副本
-const localFormData = ref(props.formData ? { ...props.formData } : {})
+const localFormData = computed(() => {
+  return props.formData ? { ...props.formData } : {}
+})
 
 // 监听props的visible变化
 watch(() => props.visible, (newVal) => {
@@ -304,16 +306,16 @@ const handleDialogClose = (e) => {
 // API调用方法
 // 获取错误消息
 const getErrorMessage = (error, dialogType) => {
-  const errorPrefix = dialogType === 'delete' 
-    ? '删除失败' 
-    : dialogType === 'add' 
-      ? '添加失败' 
+  const errorPrefix = dialogType === 'delete'
+    ? '删除失败'
+    : dialogType === 'add'
+      ? '添加失败'
       : dialogType === 'edit'
         ? '修改失败'
         : '操作失败'
-  
+
   if (!error) return `${errorPrefix}: 未知错误`
-  
+
   // 处理不同类型的错误
   if (error.response && error.response.data) {
     // API返回的详细错误信息
@@ -333,18 +335,18 @@ const getErrorMessage = (error, dialogType) => {
 
 const callApi = async (config = props.apiConfig) => {
   if (!config) return null
-  
+
   try {
     apiLoading.value = true
-    
+
     // 准备请求参数
     const fetchParams = { ...localFormData.value, ...props.formData }
-    
+
     // 如果有ID，添加到请求参数中
     if (currentId.value) {
       fetchParams.id = currentId.value
     }
-    
+
     // 合并当前参数到请求参数
     if (currentParams.value && Object.keys(currentParams.value).length > 0) {
       Object.keys(currentParams.value).forEach(key => {
@@ -353,44 +355,44 @@ const callApi = async (config = props.apiConfig) => {
         }
       })
     }
-    
+
     // 调用dataService进行API请求，直接使用config
     config.apiType = 'PROCESS'
-    const response = await dataService.fetch({ detailId: fetchParams.detailId || fetchParams.id, saveData: { ...fetchParams} }, config)
-    
+    const response = await dataService.fetch({ detailId: fetchParams.detailId || fetchParams.id, saveData: { ...fetchParams } }, config)
+
     // 显示成功消息
     if (props.showResultMessage) {
-      const successMessage = props.dialogType === 'delete' 
-        ? '删除成功' 
-        : props.dialogType === 'add' 
-          ? '添加成功' 
+      const successMessage = props.dialogType === 'delete'
+        ? '删除成功'
+        : props.dialogType === 'add'
+          ? '添加成功'
           : props.dialogType === 'edit'
             ? '修改成功'
             : '操作成功'
       MessagePlugin.success(successMessage)
     }
-    
+
     // 触发成功事件
     emit('api-success', response)
-    
+
     // 如果设置了成功后关闭，则关闭弹窗
     if (props.closeOnSuccess) {
       dialogVisible.value = false
     }
-    
+
     return response
   } catch (error) {
     // 错误处理和错误消息展示
     const errorMessage = getErrorMessage(error, props.dialogType)
-    
+
     // 显示错误消息
     if (props.showResultMessage) {
       MessagePlugin.error(errorMessage)
     }
-    
+
     // 触发错误事件
     emit('api-error', error)
-    
+
     throw error // 继续抛出错误以便上层捕获
   } finally {
     apiLoading.value = false
@@ -400,7 +402,7 @@ const callApi = async (config = props.apiConfig) => {
 // 弹窗确认事件
 const handleDialogConfirm = async (e) => {
   emit('dialog-confirm', e)
-  
+
   // 对于非普通类型的弹窗，总是尝试调用API
   if (props.dialogType !== 'normal') {
     if (props.apiConfig) {
@@ -411,10 +413,10 @@ const handleDialogConfirm = async (e) => {
         try {
           // 显示加载状态
           apiLoading.value = true
-          
+
           // 使用表单的validate方法进行校验
           const validateResult = await formRef.value.validate()
-          
+
           // 校验成功，执行提交操作
           if (validateResult === true) {
             // 直接调用callApi传入props.apiConfig
@@ -438,7 +440,7 @@ const handleDialogConfirm = async (e) => {
         try {
           // 显示加载状态
           apiLoading.value = true
-          
+
           // 删除操作直接调用API
           await callApi(props.apiConfig)
         } catch (error) {
@@ -459,7 +461,7 @@ const handleDialogConfirm = async (e) => {
       try {
         // 显示加载状态
         apiLoading.value = true
-        
+
         // 直接调用API，不修改apiConfig
         await callApi(props.apiConfig)
       } catch (error) {
@@ -505,14 +507,14 @@ const handleValidate = (params) => {
 // 加载详情数据
 const loadDetailData = async (id) => {
   if (!props.detailApiConfig) return null
-  
+
   try {
     // 显示加载状态
     apiLoading.value = true
-    
+
     // 准备请求参数
     const fetchParams = { id }
-    
+
     // 合并当前参数到请求参数
     if (currentParams.value && Object.keys(currentParams.value).length > 0) {
       // 过滤掉id和formData，避免重复
@@ -521,26 +523,26 @@ const loadDetailData = async (id) => {
         fetchParams[key] = otherParams[key]
       })
     }
-    
+
     // 调用dataService进行API请求，直接使用detailApiConfig
     const response = await dataService.fetch(fetchParams, props.detailApiConfig)
-    
+
     // 获取详情数据
     const detailData = response.data || response
-    
+
     // 更新本地表单数据
     if (detailData) {
       // 清空现有数据
       Object.keys(localFormData.value).forEach(key => {
         delete localFormData.value[key]
       })
-      
+
       // 写入新数据
       Object.keys(detailData).forEach(key => {
         localFormData.value[key] = detailData[key]
       })
     }
-    
+
     // 触发加载成功事件
     emit('detail-loaded', detailData)
     return detailData
@@ -549,7 +551,7 @@ const loadDetailData = async (id) => {
     if (props.showResultMessage) {
       MessagePlugin.error(`加载详情失败: ${error.message || '未知错误'}`)
     }
-    
+
     // 触发错误事件
     emit('detail-error', error)
     return null
@@ -560,7 +562,7 @@ const loadDetailData = async (id) => {
 
 // 打开弹窗并传递参数
 const openDialog = (params = {}) => {
-  params = { ...params , ...props.params}
+  params = { ...params, ...props.params }
   // 重置状态
   if (props.dialogType === 'add') {
     // 添加模式：清空表单数据
@@ -568,7 +570,7 @@ const openDialog = (params = {}) => {
       delete localFormData.value[key]
     })
   }
-  
+
   // 处理传入的表单数据
   if (params.formData && (props.dialogType === 'add' || props.dialogType === 'edit')) {
     // 更新本地表单数据副本
@@ -576,11 +578,11 @@ const openDialog = (params = {}) => {
       localFormData.value[key] = params.formData[key]
     })
   }
-  
+
   // 存储其他参数，如删除ID等
   if (params.id) {
     currentId.value = params.id
-    
+
     // 如果是编辑模式且有detailApiConfig，加载详情数据
     if (props.dialogType === 'edit' && props.detailApiConfig) {
       loadDetailData(params.id)
@@ -588,13 +590,13 @@ const openDialog = (params = {}) => {
   } else {
     currentId.value = null
   }
-  
+
   // 存储其他自定义参数
   currentParams.value = params
-  
+
   // 打开弹窗
   dialogVisible.value = true
-  
+
   return { success: true, message: '弹窗已打开' }
 }
 
@@ -610,7 +612,7 @@ const resetFormData = () => {
     formRef.value.reset()
     emit('reset', { type: 'manual' })
   }
-  
+
   return { success: true, message: '表单已重置' }
 }
 
@@ -620,7 +622,7 @@ const clearFormData = () => {
   Object.keys(localFormData.value).forEach(key => {
     delete localFormData.value[key]
   })
-  
+
   emit('reset', { type: 'clear' })
   return { success: true, message: '表单数据已清空' }
 }
@@ -630,17 +632,17 @@ const setFormData = (data) => {
   if (!data || typeof data !== 'object') {
     return { success: false, message: '数据必须是一个对象' }
   }
-  
+
   // 清空现有数据
   Object.keys(localFormData.value).forEach(key => {
     delete localFormData.value[key]
   })
-  
+
   // 写入新数据
   Object.keys(data).forEach(key => {
     localFormData.value[key] = data[key]
   })
-  
+
   return { success: true, message: '表单数据已设置' }
 }
 
@@ -654,10 +656,10 @@ const validateForm = async () => {
   if (!formRef.value) {
     return { success: false, message: '表单引用不存在' }
   }
-  
+
   try {
     const validateResult = await formRef.value.validate()
-    
+
     if (validateResult === true) {
       return { success: true, message: '表单验证通过', data: getFormData() }
     } else {
@@ -711,4 +713,4 @@ defineExpose({
   font-size: 14px;
   line-height: 22px;
 }
-</style> 
+</style>

package/src/components/senior/EbizSForm/item.vue

@@ -36,6 +36,13 @@
             </template>
         </template>
 
+        <!-- 日期选择器 -->
+        <template v-else-if="type === 'datetime'">
+            <t-date-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期时间'" :disabled="disabled"
+                :clearable="clearable" enable-time-picker format="YYYY-MM-DD HH:mm:ss" @change="handleChange" />
+        </template>
+
+
         <!-- 日期选择器 -->
         <template v-else-if="type === 'date'">
             <t-date-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期'" :disabled="disabled"