@ebiz/designer-components 0.0.30 → 0.0.32

package/src/components/EbizSForm.vue

@@ -1,398 +0,0 @@
-<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>