@ebiz/designer-components 0.0.30 → 0.0.32

package/src/components/EbizSFormItem.vue

@@ -1,587 +0,0 @@
-<template>
-  <t-form-item
-    :class="['ebiz-s-form-item', className]"
-    :for="forAttr"
-    :help="help"
-    :label="label"
-    :name="name"
-    :style="customStyle" 
-    :rules="rules"
-    :label-width="labelWidth"
-    :label-align="labelAlign"
-    :status="status"
-    @validate="handleValidate"
-  >
-    <!-- 输入框 -->
-    <template v-if="type === 'input'">
-      <t-input
-        v-model="computedModelValue"
-        :placeholder="placeholder || '请输入'"
-        :disabled="disabled"
-        :readonly="readonly"
-        :clearable="clearable"
-        :max-length="maxLength"
-        :max-character="maxCharacter"
-        :show-limit-number="showLimitNumber"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 数字输入框 -->
-    <template v-else-if="type === 'number'">
-      <t-input-number
-        v-model="computedModelValue"
-        :placeholder="placeholder || '请输入'"
-        :disabled="disabled"
-        :readonly="readonly"
-        :max="max"
-        :min="min"
-        :step="step"
-        :format="format"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 文本域 -->
-    <template v-else-if="type === 'textarea'">
-      <t-textarea
-        v-model="computedModelValue"
-        :placeholder="placeholder || '请输入'"
-        :disabled="disabled"
-        :readonly="readonly"
-        :autosize="autosize"
-        :maxlength="maxLength"
-        :max-character="maxCharacter"
-        :show-limit-number="showLimitNumber"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 选择器 -->
-    <template v-else-if="type === 'select'">
-      <t-select
-        v-model="computedModelValue"
-        :options="options"
-        :placeholder="placeholder || '请选择'"
-        :disabled="disabled"
-        :clearable="clearable"
-        :filterable="filterable"
-        :multiple="multiple"
-        :loading="loading"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 日期选择器 -->
-    <template v-else-if="type === 'date'">
-      <t-date-picker
-        v-model="computedModelValue"
-        :placeholder="placeholder || '请选择日期'"
-        :disabled="disabled"
-        :clearable="clearable"
-        :format="dateFormat || 'YYYY-MM-DD'"
-        :mode="dateMode || 'date'"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 时间选择器 -->
-    <template v-else-if="type === 'time'">
-      <t-time-picker
-        v-model="computedModelValue"
-        :placeholder="placeholder || '请选择时间'"
-        :disabled="disabled"
-        :clearable="clearable"
-        :format="timeFormat || 'HH:mm:ss'"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 单选框组 -->
-    <template v-else-if="type === 'radio'">
-      <t-radio-group
-        v-model="computedModelValue"
-        :disabled="disabled"
-        :options="options"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 复选框组 -->
-    <template v-else-if="type === 'checkbox'">
-      <t-checkbox-group
-        v-model="computedModelValue"
-        :disabled="disabled"
-        :options="options"
-        :max="max"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 开关 -->
-    <template v-else-if="type === 'switch'">
-      <t-switch
-        v-model="computedModelValue"
-        :disabled="disabled"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 滑块 -->
-    <template v-else-if="type === 'slider'">
-      <t-slider
-        v-model="computedModelValue"
-        :disabled="disabled"
-        :max="max"
-        :min="min"
-        :step="step"
-        :range="range"
-        :marks="marks"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 上传 -->
-    <template v-else-if="type === 'upload'">
-      <t-upload
-        v-model="computedModelValue"
-        :disabled="disabled"
-        :accept="accept"
-        :multiple="multiple"
-        :max="max"
-        :action="action"
-        :headers="headers"
-        :with-credentials="withCredentials"
-        :before-upload="beforeUpload"
-        :format-response="formatResponse"
-        :theme="uploadTheme || 'file'"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 级联选择器 -->
-    <template v-else-if="type === 'cascader'">
-      <t-cascader
-        v-model="computedModelValue"
-        :disabled="disabled"
-        :options="options"
-        :placeholder="placeholder || '请选择'"
-        :clearable="clearable"
-        :filterable="filterable"
-        :multiple="multiple"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 树形选择器 -->
-    <template v-else-if="type === 'tree-select'">
-      <t-tree-select
-        v-model="computedModelValue"
-        :disabled="disabled"
-        :data="treeData || options"
-        :placeholder="placeholder || '请选择'"
-        :clearable="clearable"
-        :filterable="filterable"
-        :multiple="multiple"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 颜色选择器 -->
-    <template v-else-if="type === 'color-picker'">
-      <t-color-picker
-        v-model="computedModelValue"
-        :disabled="disabled"
-        :clearable="clearable"
-        @change="handleChange"
-      />
-    </template>
-
-    <!-- 默认插槽，用于自定义控件 -->
-    <template v-else>
-      <slot>
-        <div class="custom-control">
-          <slot name="default"></slot>
-        </div>
-      </slot>
-    </template>
-  </t-form-item>
-</template>
-
-<script>
-/**
- * @displayName PC端表单项
- * @description PC端表单项组件，基于TDesign FormItem封装，支持多种控件类型
- * @category 表单组件
- * @name EbizSFormItem
- */
-export default {
-  name: "EbizSFormItem"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits, computed } from 'vue';
-import { 
-  FormItem as TFormItem, 
-  Input as TInput, 
-  InputNumber as TInputNumber,
-  Textarea as TTextarea,
-  Select as TSelect,
-  DatePicker as TDatePicker,
-  TimePicker as TTimePicker,
-  RadioGroup as TRadioGroup,
-  CheckboxGroup as TCheckboxGroup,
-  Switch as TSwitch,
-  Slider as TSlider,
-  Upload as TUpload,
-  Cascader as TCascader,
-  TreeSelect as TTreeSelect,
-  ColorPicker as TColorPicker
-} from 'tdesign-vue-next';
-
-const props = defineProps({
-  /**
-   * 组件类型
-   * @options input|number|textarea|select|date|time|radio|checkbox|switch|slider|upload|cascader|tree-select|color-picker
-   */
-  type: {
-    type: String,
-    default: 'input',
-    validator: (val) => [
-      'input', 'number', 'textarea', 'select', 'date', 'time', 'radio', 
-      'checkbox', 'switch', 'slider', 'upload', 'cascader', 'tree-select', 
-      'color-picker'
-    ].includes(val)
-  },
-  /**
-   * 绑定的值
-   */
-  modelValue: {
-    type: [String, Number, Boolean, Array, Object],
-    default: undefined
-  },
-  /**
-   * 表单项标签
-   */
-  label: {
-    type: String,
-    default: ''
-  },
-  /**
-   * 表单项字段名，唯一标识
-   */
-  name: {
-    type: String,
-    default: ''
-  },
-  /**
-   * html元素原生属性for
-   */
-  forAttr: {
-    type: String,
-    default: undefined
-  },
-  /**
-   * 表单项帮助文本
-   */
-  help: {
-    type: [String, Function],
-    default: ''
-  },
-  /**
-   * 是否禁用
-   */
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 是否只读
-   */
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 表单项规则
-   */
-  rules: {
-    type: [Array, Object],
-    default: undefined
-  },
-  /**
-   * 自定义样式
-   */
-  customStyle: {
-    type: [String, Object],
-    default: ''
-  },
-  /**
-   * 自定义类名
-   */
-  className: {
-    type: String,
-    default: ''
-  },
-  /**
-   * 表单项标签宽度
-   */
-  labelWidth: {
-    type: [String, Number],
-    default: undefined
-  },
-  /**
-   * 表单项标签对齐方式
-   * @options left|right|top
-   */
-  labelAlign: {
-    type: String,
-    default: undefined,
-    validator: (val) => ['left', 'right', 'top'].includes(val)
-  },
-  /**
-   * 表单项状态
-   * @options default|success|warning|error
-   */
-  status: {
-    type: String,
-    default: undefined,
-    validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
-  },
-  /**
-   * 占位文本
-   */
-  placeholder: {
-    type: String,
-    default: ''
-  },
-  /**
-   * 是否可清空
-   */
-  clearable: {
-    type: Boolean,
-    default: true
-  },
-  /**
-   * 最大长度
-   */
-  maxLength: {
-    type: Number,
-    default: undefined
-  },
-  /**
-   * 最大字符数
-   */
-  maxCharacter: {
-    type: Number,
-    default: undefined
-  },
-  /**
-   * 是否显示字数限制
-   */
-  showLimitNumber: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 选项数据，用于select, radio, checkbox等
-   */
-  options: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * 树形数据，用于tree-select
-   */
-  treeData: {
-    type: Array,
-    default: undefined
-  },
-  /**
-   * 是否支持过滤
-   */
-  filterable: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 是否支持多选
-   */
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 加载状态
-   */
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 日期格式
-   */
-  dateFormat: {
-    type: String,
-    default: 'YYYY-MM-DD'
-  },
-  /**
-   * 日期选择器模式
-   * @options date|week|month|quarter|year
-   */
-  dateMode: {
-    type: String,
-    default: 'date',
-    validator: (val) => ['date', 'week', 'month', 'quarter', 'year'].includes(val)
-  },
-  /**
-   * 时间格式
-   */
-  timeFormat: {
-    type: String,
-    default: 'HH:mm:ss'
-  },
-  /**
-   * 最大值
-   */
-  max: {
-    type: Number,
-    default: undefined
-  },
-  /**
-   * 最小值
-   */
-  min: {
-    type: Number,
-    default: undefined
-  },
-  /**
-   * 步长
-   */
-  step: {
-    type: Number,
-    default: 1
-  },
-  /**
-   * 格式化函数
-   */
-  format: {
-    type: Function,
-    default: undefined
-  },
-  /**
-   * 文本域自适应高度
-   */
-  autosize: {
-    type: [Boolean, Object],
-    default: false
-  },
-  /**
-   * 滑块是否为范围选择
-   */
-  range: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 滑块刻度标记
-   */
-  marks: {
-    type: Object,
-    default: () => ({})
-  },
-  /**
-   * 上传接受的文件类型
-   */
-  accept: {
-    type: String,
-    default: ''
-  },
-  /**
-   * 上传接口地址
-   */
-  action: {
-    type: String,
-    default: ''
-  },
-  /**
-   * 上传请求头
-   */
-  headers: {
-    type: Object,
-    default: () => ({})
-  },
-  /**
-   * 上传是否携带cookie
-   */
-  withCredentials: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 上传前的钩子函数
-   */
-  beforeUpload: {
-    type: Function,
-    default: undefined
-  },
-  /**
-   * 上传响应格式化函数
-   */
-  formatResponse: {
-    type: Function,
-    default: undefined
-  },
-  /**
-   * 上传组件主题
-   * @options file|image|image-flow
-   */
-  uploadTheme: {
-    type: String,
-    default: 'file',
-    validator: (val) => ['file', 'image', 'image-flow'].includes(val)
-  }
-});
-
-const emit = defineEmits([
-  'update:modelValue',
-  'change',
-  'validate'
-]);
-
-// 计算属性处理v-model双向绑定
-const computedModelValue = computed({
-  get: () => props.modelValue,
-  set: (val) => {
-    emit('update:modelValue', val);
-  }
-});
-
-/**
- * 值变更事件
- * @param {*} val 新值
- */
-const handleChange = (val) => {
-  emit('change', val);
-};
-
-/**
- * 验证事件
- * @param {Object} validateResult 验证结果
- */
-const handleValidate = (validateResult) => {
-  emit('validate', validateResult);
-};
-</script>
-
-<style scoped>
-.ebiz-s-form-item {
-  width: 100%;
-  margin-bottom: 24px;
-}
-
-.custom-control {
-  width: 100%;
-}
-</style>