@ebiz/designer-components 0.0.25 → 0.0.27

package/src/components/EbizSFormItem.vue

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