@ebiz/designer-components 0.0.25 → 0.0.27

package/package.json

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

package/src/apiService/simpleDataService.js

@@ -7,7 +7,7 @@
 import axios from 'axios'
 import { TinyNotify } from '@opentiny/vue'
 // 从环境变量获取API基础URL
-const API_BASE_URL = 'http://' + window.location.host + '/api'
+const API_BASE_URL = window.location.origin + '/api'
 
 /**
  * 创建axios实例

package/src/components/Button.vue

@@ -105,7 +105,7 @@ const click = async (e) => {
     emit('click', e)
 
     // 如果是普通按钮或API配置无效，不调用接口
-    if (isNormal.value || !isValidApiConfig()) {
+    if (isNormal.value) {
         return
     }
 

package/src/components/EbizSForm.vue

@@ -0,0 +1,398 @@
+<template>
+  <t-form 
+    ref="formRef"
+    :class="['ebiz-s-form', className]"
+    :colon="colon"
+    :data="data"
+    :disabled="disabled" 
+    :label-align="labelAlign" 
+    :label-width="labelWidth" 
+    :layout="layout"
+    :reset-type="resetType"
+    :reset-on-semi-controlled="resetOnSemiControlled"
+    :rules="rules"
+    :scroll-to-first-error="scrollToFirstError"
+    :show-error-message="showErrorMessage"
+    :status-icon="statusIcon"
+    :style="customStyle"
+    @reset="handleReset"
+    @submit="handleSubmit"
+    @validate="handleValidate"
+  >
+    <slot></slot>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer"></slot>
+    </template>
+    <div class="form-buttons" v-if="showButtons">
+      <t-space>
+        <t-button v-if="showCancelButton" :theme="cancelButtonTheme" @click="handleCancel">{{ cancelButtonText }}</t-button>
+        <t-button v-if="showSubmitButton" theme="primary" :loading="loading" @click="handleFormSubmit">{{ submitButtonText }}</t-button>
+      </t-space>
+    </div>
+  </t-form>
+</template>
+
+<script>
+/**
+ * @displayName PC端表单
+ * @description PC端表单组件，基于TDesign Form封装，支持表单验证、API提交等功能
+ * @category 表单组件
+ * @name EbizSForm
+ */
+export default {
+  name: "EbizSForm"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, ref, reactive, computed } from 'vue';
+import { Form as TForm, Button as TButton, Space as TSpace, MessagePlugin } from 'tdesign-vue-next';
+import dataService from "../apiService/simpleDataService";
+
+const props = defineProps({
+  /**
+   * 表单数据对象
+   */
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 表单域标签的位置
+   * @options left|right|top
+   */
+  labelAlign: {
+    type: String,
+    default: 'right',
+    validator: (val) => ['left', 'right', 'top'].includes(val)
+  },
+  /**
+   * 表单布局
+   * @options vertical|inline
+   */
+  layout: {
+    type: String,
+    default: 'vertical',
+    validator: (val) => ['vertical', 'inline'].includes(val)
+  },
+  /**
+   * 是否显示必填标记
+   */
+  colon: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 是否禁用整个表单
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 表单域标签的宽度
+   */
+  labelWidth: {
+    type: [String, Number],
+    default: '100px'
+  },
+  /**
+   * 表单校验规则
+   */
+  rules: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 是否显示校验错误信息
+   */
+  showErrorMessage: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否显示校验图标
+   */
+  statusIcon: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 表单重置时的方式
+   * @options empty|initial
+   */
+  resetType: {
+    type: String,
+    default: 'empty',
+    validator: (val) => ['empty', 'initial'].includes(val)
+  },
+  /**
+   * 重置时是否清空所有非受控字段
+   */
+  resetOnSemiControlled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 表单校验不通过时，是否自动定位到第一个错误字段
+   */
+  scrollToFirstError: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 自定义样式
+   */
+  customStyle: {
+    type: [String, Object],
+    default: ''
+  },
+  /**
+   * 自定义类名
+   */
+  className: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 是否显示表单按钮（提交和取消）
+   */
+  showButtons: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否显示提交按钮
+   */
+  showSubmitButton: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 提交按钮文字
+   */
+  submitButtonText: {
+    type: String,
+    default: '提交'
+  },
+  /**
+   * 是否显示取消按钮
+   */
+  showCancelButton: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 取消按钮文字
+   */
+  cancelButtonText: {
+    type: String,
+    default: '取消'
+  },
+  /**
+   * 取消按钮主题
+   */
+  cancelButtonTheme: {
+    type: String,
+    default: 'default'
+  },
+  /**
+   * API配置，用于表单提交
+   */
+  apiConfig: {
+    type: Object,
+    default: () => null
+  },
+  /**
+   * 是否在提交成功后重置表单
+   */
+  resetOnSuccess: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 提交成功后的消息提示
+   */
+  successMessage: {
+    type: String,
+    default: '提交成功'
+  },
+  /**
+   * 提交失败后的消息提示
+   */
+  errorMessage: {
+    type: String,
+    default: '提交失败'
+  },
+  /**
+   * 是否显示提交结果消息
+   */
+  showResultMessage: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits([
+  'reset',
+  'submit',
+  'validate',
+  'success',
+  'error',
+  'cancel'
+]);
+
+const formRef = ref(null);
+const loading = ref(false);
+
+/**
+ * 提交表单
+ */
+const handleFormSubmit = async () => {
+  if (!formRef.value) return;
+  
+  const validateResult = await formRef.value.validate();
+  if (validateResult !== true) {
+    return;
+  }
+  
+  emit('submit', props.data);
+  
+  if (props.apiConfig) {
+    await submitFormData();
+  }
+};
+
+/**
+ * 调用API提交表单数据
+ */
+const submitFormData = async () => {
+  try {
+    loading.value = true;
+    
+    const { url, method, headers, params } = props.apiConfig;
+    const response = await dataService.request({
+      url,
+      method: method || 'post',
+      data: props.data,
+      params,
+      headers
+    });
+    
+    if (props.showResultMessage) {
+      MessagePlugin.success(props.successMessage);
+    }
+    
+    emit('success', response);
+    
+    if (props.resetOnSuccess && formRef.value) {
+      formRef.value.reset();
+    }
+    
+    return response;
+  } catch (error) {
+    if (props.showResultMessage) {
+      MessagePlugin.error(props.errorMessage || error.message || '提交失败');
+    }
+    
+    emit('error', error);
+    return null;
+  } finally {
+    loading.value = false;
+  }
+};
+
+/**
+ * 表单重置
+ * @param {Object} context 表单上下文
+ */
+const handleReset = (context) => {
+  emit('reset', context);
+};
+
+/**
+ * 表单验证
+ * @param {Object} result 表单验证结果
+ */
+const handleValidate = (result) => {
+  emit('validate', result);
+};
+
+/**
+ * 取消按钮点击事件
+ */
+const handleCancel = () => {
+  emit('cancel');
+};
+
+/**
+ * 表单提交事件，由内置的HTML表单submit事件触发
+ */
+const handleSubmit = (context) => {
+  // 这里只做转发，实际提交逻辑在handleFormSubmit中
+  emit('submit', context);
+};
+
+// 暴露方法给父组件
+defineExpose({
+  /**
+   * 提交表单方法
+   */
+  submit: handleFormSubmit,
+  /**
+   * 重置表单方法
+   */
+  reset: () => {
+    if (formRef.value) {
+      formRef.value.reset();
+    }
+  },
+  /**
+   * 校验表单方法
+   * @returns {Promise} 校验结果Promise
+   */
+  validate: async () => {
+    if (formRef.value) {
+      return await formRef.value.validate();
+    }
+    return false;
+  },
+  /**
+   * 校验特定字段
+   * @param {Array|String} fields 字段名称或字段名称数组
+   * @returns {Promise} 校验结果Promise
+   */
+  validateFields: async (fields) => {
+    if (formRef.value) {
+      return await formRef.value.validateFields(fields);
+    }
+    return false;
+  },
+  /**
+   * 清除校验结果
+   * @param {Array|String} fields 字段名称或字段名称数组，不传则清除所有
+   */
+  clearValidate: (fields) => {
+    if (formRef.value) {
+      formRef.value.clearValidate(fields);
+    }
+  },
+  /**
+   * 获取表单DOM元素
+   */
+  getFormElement: () => formRef.value
+});
+</script>
+
+<style scoped>
+.ebiz-s-form {
+  width: 100%;
+}
+
+.form-buttons {
+  margin-top: 24px;
+  padding: 8px 0;
+  display: flex;
+  justify-content: center;
+}
+</style>