@ebiz/designer-components 0.2.0 → 0.2.1

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

@@ -1,1012 +1,1012 @@
-<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" style="margin-bottom: 10px;">
-
-        <slot name="default">
-            <!-- 员工选择 -->
-            <template v-if="type === 'employee'">
-                <ebiz-employee-selector v-model="computedModelValue" :placeholder="placeholder || '请选择员工'"
-                    :disabled="disabled" :clearable="clearable" :single="single" :defaultTab="defaultTab"
-                    :maxCount="maxCount" @change="handleChange" />
-            </template>
-
-            <!-- 部门选择 -->
-            <template v-if="type === 'dept'">
-                <ebiz-department-selector v-model="computedModelValue" :placeholder="placeholder || '请选择部门'"
-                    :disabled="disabled" :clearable="clearable" :filterable="filterable" :apiUrl="apiUrl"
-                    :companyId="companyId" :multiple="multiple" @change="handleChange" />
-            </template>
-
-            <!-- 输入框 -->
-            <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'">
-                <template v-if="isRemote">
-                    <ebiz-remote-select v-model="computedModelValue" :queryParams="queryParams"
-                        :placeholder="placeholder || '请选择'" :disabled="disabled" :clearable="clearable"
-                        :filterable="true" :multiple="multiple" :loading="loading" :apiConfig="remoteApiConfig"
-                        @change="handleChange" />
-                </template>
-                <template v-else>
-                    <t-select v-model="computedModelValue" :options="options" :placeholder="placeholder || '请选择'"
-                        :disabled="disabled" :clearable="clearable" :filterable="filterable" :multiple="multiple"
-                        :loading="loading" @change="handleChange" />
-                </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"
-                    :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 === 'date-range'">
-                <t-date-range-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 === 'datetime-range'">
-                <t-date-range-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期时间范围'" :disabled="disabled"
-                    :clearable="clearable" format="YYYY-MM-DD HH:mm:ss" :mode="dateMode || 'date'" enable-time-picker @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'">
-                <ebiz-upload v-model="computedModelValue" :disabled="disabled" :accept="accept" :multiple="multiple"
-                    :max="max" :theme="uploadTheme || 'file'" @change="handleChange" />
-            </template>
-
-            <!-- 视频上传 -->
-            <template v-else-if="type === 'video-upload'">
-                <div>
-                    <ebiz-upload v-if="!computedModelValue" v-model="computedModelValue" :disabled="disabled"
-                        :accept="accept || 'video/*'" :multiple="false" :max="1" :theme="'file'" :action="action"
-                        :headers="headers" :withCredentials="withCredentials" :beforeUpload="beforeUpload"
-                        :formatResponse="formatResponse" :placeholder="placeholder || '请上传视频'" :sizeLimit="sizeLimit"
-                        :tips="tips || '只能上传一个视频文件'" @change="handleChange" />
-                    <div v-else style="display: flex; position: relative;">
-                        <video :src="computedModelValue" controls autoplay muted width="400"></video>
-                        <div style="position: absolute; top: 5px; right: 5px;">
-                            <t-button theme="danger" @click="clearVideoUpload" size="small" :disabled="disabled">
-                                <template #icon>
-                                    <t-icon name="delete"></t-icon>
-                                </template>
-                            </t-button>
-                        </div>
-                    </div>
-                </div>
-            </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-if="type === 'rich-text'">
-                <ebiz-rich-text-editor v-model="computedModelValue" :placeholder="placeholder || '请输入内容'"
-                    :disabled="disabled" :readonly="readonly" :height="editorHeight"
-                    :toolbar-config="editorToolbarConfig" :editor-config="editorConfig" :image-path="editorImagePath"
-                    :video-path="editorVideoPath" :max-length="maxLength" @change="handleChange" />
-            </template>
-
-            <!-- 子表格 -->
-            <template v-else-if="type === 'table'">
-                <div class="ebiz-form-table">
-                    <t-space direction="vertical" style="width: 100%;">
-                        <!-- 添加按钮 -->
-                        <div>
-                            <t-button theme="primary" variant="outline" @click="addTableRow" :disabled="disabled">
-                                <template #icon>
-                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                        <path d="M8 1V15M1 8H15" stroke="currentColor" stroke-width="1.5"
-                                            stroke-linecap="round" />
-                                    </svg>
-                                </template>
-                                {{ addButtonText }}
-                            </t-button>
-                        </div>
-
-                        <!-- 表格 -->
-                        <t-table :data="computedModelValue" :columns="computedTableColumns"
-                            row-key="__id" size="small" bordered :empty="'暂无数据'">
-                            <!-- 序号列 -->
-                            <template #index="{ rowIndex }">
-                                {{ rowIndex + 1 }}
-                            </template>
-
-                            <!-- 动态渲染每个数据列 -->
-                            <template v-for="col in tableColumns" :key="col.key" #[col.key]="{ row, rowIndex }">
-                                <!-- 输入框 -->
-                                <t-input v-if="!col.type || col.type === 'input'" v-model="row[col.key]"
-                                    :disabled="disabled" :placeholder="col.placeholder || `请输入${col.name}`"
-                                    :clearable="col.clearable !== false" :maxlength="col.maxlength"
-                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
-
-                                <!-- 数字输入框 -->
-                                <t-input-number v-else-if="col.type === 'number'" v-model="row[col.key]"
-                                    :disabled="disabled" :placeholder="col.placeholder || `请输入${col.name}`"
-                                    :min="col.min" :max="col.max" :step="col.step || 1"
-                                    :decimal-places="col.decimalPlaces"
-                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
-
-                                <!-- 选择器 -->
-                                <t-select v-else-if="col.type === 'select' && col.isRemote !== true" v-model="row[col.key]" :disabled="disabled"
-                                    :placeholder="col.placeholder || `请选择${col.name}`" :options="col.options || []"
-                                    :clearable="col.clearable !== false" :filterable="col.filterable"
-                                    :multiple="col.multiple"
-                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
-
-                                <!-- 远程搜索 -->
-                                <ebiz-remote-select v-else-if="col.type === 'select' && col.isRemote === true" v-model="row[col.key]" :queryParams="col.queryParams"
-                                        :placeholder="col.placeholder || `请选择${col.name}`" :disabled="disabled" :clearable="col.clearable !== false"
-                                        :filterable="true" :multiple="col.multiple" :apiConfig="col.remoteApiConfig"
-                                        @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
-
-                                <!-- 日期选择器 -->
-                                <t-date-picker v-else-if="col.type === 'date'" v-model="row[col.key]"
-                                    :disabled="disabled" :placeholder="col.placeholder || `请选择${col.name}`"
-                                    :format="col.format || 'YYYY-MM-DD'" :clearable="col.clearable !== false"
-                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
-
-                                <!-- 日期时间选择器 -->
-                                <t-date-picker v-else-if="col.type === 'datetime'" v-model="row[col.key]"
-                                    :disabled="disabled" :placeholder="col.placeholder || `请选择${col.name}`"
-                                    :format="col.format || 'YYYY-MM-DD HH:mm:ss'" enable-time-picker
-                                    :clearable="col.clearable !== false"
-                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
-
-                                <!-- 开关 -->
-                                <t-switch v-else-if="col.type === 'switch'" v-model="row[col.key]" :disabled="disabled"
-                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
-
-                                <!-- 文本域 -->
-                                <t-textarea v-else-if="col.type === 'textarea'" v-model="row[col.key]"
-                                    :disabled="disabled" :placeholder="col.placeholder || `请输入${col.name}`"
-                                    :autosize="col.autosize || { minRows: 2, maxRows: 4 }" :maxlength="col.maxlength"
-                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
-
-                                <!-- 单选框组 -->
-                                <t-radio-group v-else-if="col.type === 'radio'" v-model="row[col.key]"
-                                    :disabled="disabled" :options="col.options || []"
-                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
-
-                                <!-- 复选框组 -->
-                                <t-checkbox-group v-else-if="col.type === 'checkbox'" v-model="row[col.key]"
-                                    :disabled="disabled" :options="col.options || []" :max="col.max"
-                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
-
-                                <ebiz-employee-selector v-else-if="col.type === 'employee'" v-model="row[col.key]"
-                                    :placeholder="col.placeholder || '请选择员工'" :disabled="disabled" 
-                                    :clearable="col.clearable !== false" :single="col.single" :defaultTab="col.defaultTab"
-                                    :maxCount="col.maxCount" @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
-
-                                <!-- 默认文本显示 -->
-                                <span v-else>{{ row[col.key] || '' }}</span>
-                            </template>
-
-                            <!-- 操作列 -->
-                            <template v-if="showTableActions" #actions="{ rowIndex }">
-                                <t-button theme="danger" variant="text" size="small" :disabled="disabled"
-                                    @click="removeTableRow(rowIndex)">
-                                    删除
-                                </t-button>
-                            </template>
-                        </t-table>
-                    </t-space>
-                </div>
-            </template>
-
-            <!-- 字典选择器 -->
-            <template v-else-if="type === 'dictionarySelect'">
-                <ebiz-dictionary-select v-model="computedModelValue" :dictionary-key="dictionaryKey" :queryParams="queryParams"
-                    :placeholder="placeholder || '请选择'" :disabled="disabled" :clearable="clearable"
-                    :filterable="true" :multiple="multiple" :loading="loading"
-                    @change="handleChange" />
-            </template>
-
-            <!-- 默认插槽，用于自定义控件 -->
-            <template v-else>
-            </template>
-        </slot>
-
-    </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, watch, onMounted } 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,
-    Cascader as TCascader,
-    TreeSelect as TTreeSelect,
-    ColorPicker as TColorPicker,
-    Table as TTable,
-    Button as TButton,
-    Space as TSpace,
-    DateRangePicker as TDateRangePicker
-} from 'tdesign-vue-next';
-import EbizRemoteSelect from '../../EbizRemoteSelect.vue';
-import EbizEmployeeSelector from '../../EbizEmployeeSelector.vue';
-import EbizDepartmentSelector from '../../EbizDepartmentSelector.vue';
-import { EbizUpload } from '../../../index.js'
-import EbizRichTextEditor from '../../EbizRichTextEditor.vue';
-import EbizDictionarySelect from '../../EbizDictionarySelect.vue';
-
-const props = defineProps({
-    /**
-     * 组件类型
-     * @options input|number|textarea|select|date|datetime|time|radio|checkbox|switch|slider|upload|video-upload|cascader|tree-select|color-picker|employee|dept|table
-     */
-    type: {
-        type: String,
-        default: undefined,
-        validator: (val) => [
-            'input', 'number', 'textarea', 'select', 'date', 'datetime', 'time', 'radio',
-            'checkbox', 'switch', 'slider', 'upload', 'video-upload', 'cascader', 'tree-select',
-            'color-picker', 'employee', 'dept', 'table', 'rich-text'
-        ].includes(val)
-    },
-
-    queryParams: {
-        type: Object,
-        default: () => ({})
-    },
-    /**
-     * 绑定的值
-     */
-    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: true
-    },
-    /**
-     * 是否支持多选
-     */
-    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)
-    },
-    /**
-     * 是否开启远程搜索
-     */
-    isRemote: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 远程搜索配置
-     */
-    remoteApiConfig: {
-        type: Object,
-        default: () => ({
-            url: '',
-            method: 'GET',
-            params: {},
-            data: {},
-            headers: {},
-            transformResponse: null
-        })
-    },
-    /**
-     * 员工选择器是否单选
-     */
-    single: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 员工选择器默认标签页
-     * @options organization|recent
-     */
-    defaultTab: {
-        type: String,
-        default: 'organization',
-        validator: (val) => ['organization', 'recent'].includes(val)
-    },
-    /**
-     * 员工选择器最大选择数量
-     */
-    maxCount: {
-        type: Number,
-        default: undefined
-    },
-    /**
-     * 部门选择器API地址
-     */
-    apiUrl: {
-        type: String,
-        default: '/api/departments'
-    },
-    /**
-     * 部门选择器所属公司ID
-     */
-    companyId: {
-        type: [String, Number],
-        default: undefined
-    },
-    /**
-     * 子表格列配置，用于table类型
-     * 示例：[
-     *   {name:'名称', key:'name', type:'input', width:150},
-     *   {name:'类型', key:'type', type:'select', options:[{label:'选项1', value:'1'}]},
-     *   {name:'数量', key:'num', type:'number', min:0, max:999}
-     * ]
-     */
-    tableColumns: {
-        type: Array,
-        default: () => []
-    },
-    /**
-     * 子表格是否显示操作列
-     */
-    showTableActions: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 子表格新增按钮文本
-     */
-    addButtonText: {
-        type: String,
-        default: '添加数据'
-    },
-    /**
-     * 富文本编辑器高度
-     */
-    editorHeight: {
-        type: [String, Number],
-        default: 300
-    },
-    /**
-     * 富文本编辑器工具栏配置
-     */
-    editorToolbarConfig: {
-        type: Object,
-        default: () => ({})
-    },
-    /**
-     * 富文本编辑器配置
-     */
-    editorConfig: {
-        type: Object,
-        default: () => ({})
-    },
-    /**
-     * 富文本图片上传路径
-     */
-    editorImagePath: {
-        type: String,
-        default: 'editor'
-    },
-    /**
-     * 富文本视频上传路径
-     */
-    editorVideoPath: {
-        type: String,
-        default: 'video'
-    },
-    /**
-     * 字典类型
-     */
-    dictionaryKey: {
-        type: String,
-        default: ''
-    }
-});
-
-const emit = defineEmits([
-    'update:modelValue',
-    'change',
-    'validate'
-]);
-
-// 计算属性处理v-model双向绑定
-const computedModelValue = computed({
-    get: () => props.modelValue,
-    set: (val) => {
-        emit('update:modelValue', val);
-    }
-});
-
-// 表格列配置计算属性
-const computedTableColumns = computed(() => {
-    if (props.type !== 'table' || !props.tableColumns?.length) return [];
-
-    const columns = [];
-
-    // 添加序号列
-    columns.push({
-        colKey: 'index',
-        title: '序号',
-        width: 80,
-        align: 'center'
-    });
-
-    // 添加用户配置的列
-    const userColumns = props.tableColumns.map(col => ({
-        colKey: col.key,
-        title: col.name,
-        width: col.width || undefined,
-        align: col.align || 'left'
-    }));
-
-    columns.push(...userColumns);
-
-    // 添加操作列
-    if (props.showTableActions) {
-        columns.push({
-            colKey: 'actions',
-            title: '操作',
-            width: 80,
-            align: 'center'
-        });
-    }
-
-    return columns;
-});
-
-/**
- * 值变更事件
- * @param {*} val 新值
- */
-const handleChange = (val) => {
-    emit('change', val);
-};
-
-/**
- * 验证事件
- * @param {Object} validateResult 验证结果
- */
-const handleValidate = (validateResult) => {
-    emit('validate', validateResult);
-};
-
-/**
- * 清除视频上传
- */
-const clearVideoUpload = () => {
-    computedModelValue.value = null;
-    emit('change', null);
-};
-
-/**
- * 添加表格行
- */
-const addTableRow = () => {
-    const currentData = computedModelValue.value || [];
-    const newRow = {};
-
-    // 根据表格列配置初始化新行数据
-    props.tableColumns.forEach(col => {
-        // 根据列类型设置默认值
-        switch (col.type) {
-            case 'number':
-                newRow[col.key] = col.defaultValue || 0;
-                break;
-            case 'switch':
-                newRow[col.key] = col.defaultValue || false;
-                break;
-            case 'checkbox':
-                newRow[col.key] = col.defaultValue || [];
-                break;
-            case 'select':
-                if (col.multiple) {
-                    newRow[col.key] = col.defaultValue || [];
-                } else {
-                    newRow[col.key] = col.defaultValue || '';
-                }
-                break;
-            default:
-                newRow[col.key] = col.defaultValue || '';
-                break;
-        }
-    });
-
-    const newData = [...currentData, newRow];
-    // 只更新computedModelValue，让watch自动处理change事件
-    computedModelValue.value = JSON.parse(JSON.stringify(newData));
-};
-
-/**
- * 删除表格行
- * @param {number} rowIndex 行索引
- */
-const removeTableRow = (rowIndex) => {
-    if (props.type !== 'table') return;
-
-    const currentData = [...(computedModelValue.value || [])];
-    currentData.splice(rowIndex, 1);
-
-    // 只更新computedModelValue，让watch自动处理change事件
-    computedModelValue.value = currentData;
-};
-
-/**
- * 更新表格单元格数据
- * @param {number} rowIndex 行索引
- * @param {string} colKey 列键名
- * @param {*} value 新值
- */
-const updateTableCell = (rowIndex, colKey, value) => {
-    if (props.type !== 'table') return;
-
-    const currentData = [...(computedModelValue.value || [])];
-    if (currentData[rowIndex]) {
-        currentData[rowIndex] = {
-            ...currentData[rowIndex],
-            [colKey]: value
-        };
-
-        // 只更新computedModelValue，让watch自动处理change事件
-        computedModelValue.value = currentData;
-    }
-};
-
-// 监听modelValue变化，触发change事件（仅在table类型时）
-watch(
-    () => props.modelValue,
-    (newVal, oldVal) => {
-        if (props.type === 'table' && newVal !== oldVal) {
-            // 只在数据真正变化时触发change事件
-            const cleanData = Array.isArray(newVal) ? newVal : [];
-            handleChange(cleanData);
-        }
-    },
-    { deep: true }
-);
-
-// 组件挂载时初始化文件列表
-onMounted(() => {
-});
-</script>
-
-<style scoped>
-.custom-control {
-    width: 100%;
-}
-
-.ebiz-form-table {
-    width: 100%;
-}
-
-.ebiz-form-table :deep(.t-table) {
-    border: 1px solid var(--td-border-level-1-color);
-    border-radius: var(--td-radius-default);
-}
-
-.ebiz-form-table :deep(.t-table td) {
-    padding: 8px 12px;
-}
-
-.ebiz-form-table :deep(.t-table th) {
-    background-color: var(--td-bg-color-secondarycontainer);
-    font-weight: 500;
-}
-
-.ebiz-form-table :deep(.t-input) {
-    border: none;
-    box-shadow: none;
-}
-
-.ebiz-form-table :deep(.t-input:focus-within) {
-    border: 1px solid var(--td-brand-color);
-    box-shadow: 0 0 0 2px var(--td-brand-color-focus);
-}
-
-.ebiz-form-table :deep(.t-input-number) {
-    border: none;
-    box-shadow: none;
-}
-
-.ebiz-form-table :deep(.t-input-number:focus-within) {
-    border: 1px solid var(--td-brand-color);
-    box-shadow: 0 0 0 2px var(--td-brand-color-focus);
-}
-
-.ebiz-form-table :deep(.t-select) {
-    border: none;
-    box-shadow: none;
-}
-
-.ebiz-form-table :deep(.t-select:focus-within) {
-    border: 1px solid var(--td-brand-color);
-    box-shadow: 0 0 0 2px var(--td-brand-color-focus);
-}
-
-.ebiz-form-table :deep(.t-date-picker) {
-    border: none;
-    box-shadow: none;
-}
-
-.ebiz-form-table :deep(.t-date-picker:focus-within) {
-    border: 1px solid var(--td-brand-color);
-    box-shadow: 0 0 0 2px var(--td-brand-color-focus);
-}
-
-.ebiz-form-table :deep(.t-textarea) {
-    border: none;
-    box-shadow: none;
-}
-
-.ebiz-form-table :deep(.t-textarea:focus-within) {
-    border: 1px solid var(--td-brand-color);
-    box-shadow: 0 0 0 2px var(--td-brand-color-focus);
-}
-
-.ebiz-form-table :deep(.t-switch) {
-    justify-content: center;
-}
-
-.ebiz-form-table :deep(.t-radio-group),
-.ebiz-form-table :deep(.t-checkbox-group) {
-    justify-content: center;
-}
+<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" style="margin-bottom: 10px;">
+
+        <slot name="default">
+            <!-- 员工选择 -->
+            <template v-if="type === 'employee'">
+                <ebiz-employee-selector v-model="computedModelValue" :placeholder="placeholder || '请选择员工'"
+                    :disabled="disabled" :clearable="clearable" :single="single" :defaultTab="defaultTab"
+                    :maxCount="maxCount" @change="handleChange" />
+            </template>
+
+            <!-- 部门选择 -->
+            <template v-if="type === 'dept'">
+                <ebiz-department-selector v-model="computedModelValue" :placeholder="placeholder || '请选择部门'"
+                    :disabled="disabled" :clearable="clearable" :filterable="filterable" :apiUrl="apiUrl"
+                    :companyId="companyId" :multiple="multiple" @change="handleChange" />
+            </template>
+
+            <!-- 输入框 -->
+            <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'">
+                <template v-if="isRemote">
+                    <ebiz-remote-select v-model="computedModelValue" :queryParams="queryParams"
+                        :placeholder="placeholder || '请选择'" :disabled="disabled" :clearable="clearable"
+                        :filterable="true" :multiple="multiple" :loading="loading" :apiConfig="remoteApiConfig"
+                        @change="handleChange" />
+                </template>
+                <template v-else>
+                    <t-select v-model="computedModelValue" :options="options" :placeholder="placeholder || '请选择'"
+                        :disabled="disabled" :clearable="clearable" :filterable="filterable" :multiple="multiple"
+                        :loading="loading" @change="handleChange" />
+                </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"
+                    :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 === 'date-range'">
+                <t-date-range-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 === 'datetime-range'">
+                <t-date-range-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期时间范围'" :disabled="disabled"
+                    :clearable="clearable" format="YYYY-MM-DD HH:mm:ss" :mode="dateMode || 'date'" enable-time-picker @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'">
+                <ebiz-upload v-model="computedModelValue" :disabled="disabled" :accept="accept" :multiple="multiple"
+                    :max="max" :theme="uploadTheme || 'file'" @change="handleChange" />
+            </template>
+
+            <!-- 视频上传 -->
+            <template v-else-if="type === 'video-upload'">
+                <div>
+                    <ebiz-upload v-if="!computedModelValue" v-model="computedModelValue" :disabled="disabled"
+                        :accept="accept || 'video/*'" :multiple="false" :max="1" :theme="'file'" :action="action"
+                        :headers="headers" :withCredentials="withCredentials" :beforeUpload="beforeUpload"
+                        :formatResponse="formatResponse" :placeholder="placeholder || '请上传视频'" :sizeLimit="sizeLimit"
+                        :tips="tips || '只能上传一个视频文件'" @change="handleChange" />
+                    <div v-else style="display: flex; position: relative;">
+                        <video :src="computedModelValue" controls autoplay muted width="400"></video>
+                        <div style="position: absolute; top: 5px; right: 5px;">
+                            <t-button theme="danger" @click="clearVideoUpload" size="small" :disabled="disabled">
+                                <template #icon>
+                                    <t-icon name="delete"></t-icon>
+                                </template>
+                            </t-button>
+                        </div>
+                    </div>
+                </div>
+            </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-if="type === 'rich-text'">
+                <ebiz-rich-text-editor v-model="computedModelValue" :placeholder="placeholder || '请输入内容'"
+                    :disabled="disabled" :readonly="readonly" :height="editorHeight"
+                    :toolbar-config="editorToolbarConfig" :editor-config="editorConfig" :image-path="editorImagePath"
+                    :video-path="editorVideoPath" :max-length="maxLength" @change="handleChange" />
+            </template>
+
+            <!-- 子表格 -->
+            <template v-else-if="type === 'table'">
+                <div class="ebiz-form-table">
+                    <t-space direction="vertical" style="width: 100%;">
+                        <!-- 添加按钮 -->
+                        <div>
+                            <t-button theme="primary" variant="outline" @click="addTableRow" :disabled="disabled">
+                                <template #icon>
+                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                        <path d="M8 1V15M1 8H15" stroke="currentColor" stroke-width="1.5"
+                                            stroke-linecap="round" />
+                                    </svg>
+                                </template>
+                                {{ addButtonText }}
+                            </t-button>
+                        </div>
+
+                        <!-- 表格 -->
+                        <t-table :data="computedModelValue" :columns="computedTableColumns"
+                            row-key="__id" size="small" bordered :empty="'暂无数据'">
+                            <!-- 序号列 -->
+                            <template #index="{ rowIndex }">
+                                {{ rowIndex + 1 }}
+                            </template>
+
+                            <!-- 动态渲染每个数据列 -->
+                            <template v-for="col in tableColumns" :key="col.key" #[col.key]="{ row, rowIndex }">
+                                <!-- 输入框 -->
+                                <t-input v-if="!col.type || col.type === 'input'" v-model="row[col.key]"
+                                    :disabled="disabled" :placeholder="col.placeholder || `请输入${col.name}`"
+                                    :clearable="col.clearable !== false" :maxlength="col.maxlength"
+                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
+
+                                <!-- 数字输入框 -->
+                                <t-input-number v-else-if="col.type === 'number'" v-model="row[col.key]"
+                                    :disabled="disabled" :placeholder="col.placeholder || `请输入${col.name}`"
+                                    :min="col.min" :max="col.max" :step="col.step || 1"
+                                    :decimal-places="col.decimalPlaces"
+                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
+
+                                <!-- 选择器 -->
+                                <t-select v-else-if="col.type === 'select' && col.isRemote !== true" v-model="row[col.key]" :disabled="disabled"
+                                    :placeholder="col.placeholder || `请选择${col.name}`" :options="col.options || []"
+                                    :clearable="col.clearable !== false" :filterable="col.filterable"
+                                    :multiple="col.multiple"
+                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
+
+                                <!-- 远程搜索 -->
+                                <ebiz-remote-select v-else-if="col.type === 'select' && col.isRemote === true" v-model="row[col.key]" :queryParams="col.queryParams"
+                                        :placeholder="col.placeholder || `请选择${col.name}`" :disabled="disabled" :clearable="col.clearable !== false"
+                                        :filterable="true" :multiple="col.multiple" :apiConfig="col.remoteApiConfig"
+                                        @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
+
+                                <!-- 日期选择器 -->
+                                <t-date-picker v-else-if="col.type === 'date'" v-model="row[col.key]"
+                                    :disabled="disabled" :placeholder="col.placeholder || `请选择${col.name}`"
+                                    :format="col.format || 'YYYY-MM-DD'" :clearable="col.clearable !== false"
+                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
+
+                                <!-- 日期时间选择器 -->
+                                <t-date-picker v-else-if="col.type === 'datetime'" v-model="row[col.key]"
+                                    :disabled="disabled" :placeholder="col.placeholder || `请选择${col.name}`"
+                                    :format="col.format || 'YYYY-MM-DD HH:mm:ss'" enable-time-picker
+                                    :clearable="col.clearable !== false"
+                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
+
+                                <!-- 开关 -->
+                                <t-switch v-else-if="col.type === 'switch'" v-model="row[col.key]" :disabled="disabled"
+                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
+
+                                <!-- 文本域 -->
+                                <t-textarea v-else-if="col.type === 'textarea'" v-model="row[col.key]"
+                                    :disabled="disabled" :placeholder="col.placeholder || `请输入${col.name}`"
+                                    :autosize="col.autosize || { minRows: 2, maxRows: 4 }" :maxlength="col.maxlength"
+                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
+
+                                <!-- 单选框组 -->
+                                <t-radio-group v-else-if="col.type === 'radio'" v-model="row[col.key]"
+                                    :disabled="disabled" :options="col.options || []"
+                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
+
+                                <!-- 复选框组 -->
+                                <t-checkbox-group v-else-if="col.type === 'checkbox'" v-model="row[col.key]"
+                                    :disabled="disabled" :options="col.options || []" :max="col.max"
+                                    @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
+
+                                <ebiz-employee-selector v-else-if="col.type === 'employee'" v-model="row[col.key]"
+                                    :placeholder="col.placeholder || '请选择员工'" :disabled="disabled" 
+                                    :clearable="col.clearable !== false" :single="col.single" :defaultTab="col.defaultTab"
+                                    :maxCount="col.maxCount" @update:model-value="(value) => updateTableCell(rowIndex, col.key, value)" />
+
+                                <!-- 默认文本显示 -->
+                                <span v-else>{{ row[col.key] || '' }}</span>
+                            </template>
+
+                            <!-- 操作列 -->
+                            <template v-if="showTableActions" #actions="{ rowIndex }">
+                                <t-button theme="danger" variant="text" size="small" :disabled="disabled"
+                                    @click="removeTableRow(rowIndex)">
+                                    删除
+                                </t-button>
+                            </template>
+                        </t-table>
+                    </t-space>
+                </div>
+            </template>
+
+            <!-- 字典选择器 -->
+            <template v-else-if="type === 'dictionarySelect'">
+                <ebiz-dictionary-select v-model="computedModelValue" :dictionary-key="dictionaryKey" :queryParams="queryParams"
+                    :placeholder="placeholder || '请选择'" :disabled="disabled" :clearable="clearable"
+                    :filterable="true" :multiple="multiple" :loading="loading"
+                    @change="handleChange" />
+            </template>
+
+            <!-- 默认插槽，用于自定义控件 -->
+            <template v-else>
+            </template>
+        </slot>
+
+    </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, watch, onMounted } 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,
+    Cascader as TCascader,
+    TreeSelect as TTreeSelect,
+    ColorPicker as TColorPicker,
+    Table as TTable,
+    Button as TButton,
+    Space as TSpace,
+    DateRangePicker as TDateRangePicker
+} from 'tdesign-vue-next';
+import EbizRemoteSelect from '../../EbizRemoteSelect.vue';
+import EbizEmployeeSelector from '../../EbizEmployeeSelector.vue';
+import EbizDepartmentSelector from '../../EbizDepartmentSelector.vue';
+import { EbizUpload } from '../../../index.js'
+import EbizRichTextEditor from '../../EbizRichTextEditor.vue';
+import EbizDictionarySelect from '../../EbizDictionarySelect.vue';
+
+const props = defineProps({
+    /**
+     * 组件类型
+     * @options input|number|textarea|select|date|datetime|time|radio|checkbox|switch|slider|upload|video-upload|cascader|tree-select|color-picker|employee|dept|table
+     */
+    type: {
+        type: String,
+        default: undefined,
+        validator: (val) => [
+            'input', 'number', 'textarea', 'select', 'date', 'datetime', 'time', 'radio',
+            'checkbox', 'switch', 'slider', 'upload', 'video-upload', 'cascader', 'tree-select',
+            'color-picker', 'employee', 'dept', 'table', 'rich-text'
+        ].includes(val)
+    },
+
+    queryParams: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 绑定的值
+     */
+    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: true
+    },
+    /**
+     * 是否支持多选
+     */
+    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)
+    },
+    /**
+     * 是否开启远程搜索
+     */
+    isRemote: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 远程搜索配置
+     */
+    remoteApiConfig: {
+        type: Object,
+        default: () => ({
+            url: '',
+            method: 'GET',
+            params: {},
+            data: {},
+            headers: {},
+            transformResponse: null
+        })
+    },
+    /**
+     * 员工选择器是否单选
+     */
+    single: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 员工选择器默认标签页
+     * @options organization|recent
+     */
+    defaultTab: {
+        type: String,
+        default: 'organization',
+        validator: (val) => ['organization', 'recent'].includes(val)
+    },
+    /**
+     * 员工选择器最大选择数量
+     */
+    maxCount: {
+        type: Number,
+        default: undefined
+    },
+    /**
+     * 部门选择器API地址
+     */
+    apiUrl: {
+        type: String,
+        default: '/api/departments'
+    },
+    /**
+     * 部门选择器所属公司ID
+     */
+    companyId: {
+        type: [String, Number],
+        default: undefined
+    },
+    /**
+     * 子表格列配置，用于table类型
+     * 示例：[
+     *   {name:'名称', key:'name', type:'input', width:150},
+     *   {name:'类型', key:'type', type:'select', options:[{label:'选项1', value:'1'}]},
+     *   {name:'数量', key:'num', type:'number', min:0, max:999}
+     * ]
+     */
+    tableColumns: {
+        type: Array,
+        default: () => []
+    },
+    /**
+     * 子表格是否显示操作列
+     */
+    showTableActions: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 子表格新增按钮文本
+     */
+    addButtonText: {
+        type: String,
+        default: '添加数据'
+    },
+    /**
+     * 富文本编辑器高度
+     */
+    editorHeight: {
+        type: [String, Number],
+        default: 300
+    },
+    /**
+     * 富文本编辑器工具栏配置
+     */
+    editorToolbarConfig: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 富文本编辑器配置
+     */
+    editorConfig: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 富文本图片上传路径
+     */
+    editorImagePath: {
+        type: String,
+        default: 'editor'
+    },
+    /**
+     * 富文本视频上传路径
+     */
+    editorVideoPath: {
+        type: String,
+        default: 'video'
+    },
+    /**
+     * 字典类型
+     */
+    dictionaryKey: {
+        type: String,
+        default: ''
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue',
+    'change',
+    'validate'
+]);
+
+// 计算属性处理v-model双向绑定
+const computedModelValue = computed({
+    get: () => props.modelValue,
+    set: (val) => {
+        emit('update:modelValue', val);
+    }
+});
+
+// 表格列配置计算属性
+const computedTableColumns = computed(() => {
+    if (props.type !== 'table' || !props.tableColumns?.length) return [];
+
+    const columns = [];
+
+    // 添加序号列
+    columns.push({
+        colKey: 'index',
+        title: '序号',
+        width: 80,
+        align: 'center'
+    });
+
+    // 添加用户配置的列
+    const userColumns = props.tableColumns.map(col => ({
+        colKey: col.key,
+        title: col.name,
+        width: col.width || undefined,
+        align: col.align || 'left'
+    }));
+
+    columns.push(...userColumns);
+
+    // 添加操作列
+    if (props.showTableActions) {
+        columns.push({
+            colKey: 'actions',
+            title: '操作',
+            width: 80,
+            align: 'center'
+        });
+    }
+
+    return columns;
+});
+
+/**
+ * 值变更事件
+ * @param {*} val 新值
+ */
+const handleChange = (val) => {
+    emit('change', val);
+};
+
+/**
+ * 验证事件
+ * @param {Object} validateResult 验证结果
+ */
+const handleValidate = (validateResult) => {
+    emit('validate', validateResult);
+};
+
+/**
+ * 清除视频上传
+ */
+const clearVideoUpload = () => {
+    computedModelValue.value = null;
+    emit('change', null);
+};
+
+/**
+ * 添加表格行
+ */
+const addTableRow = () => {
+    const currentData = computedModelValue.value || [];
+    const newRow = {};
+
+    // 根据表格列配置初始化新行数据
+    props.tableColumns.forEach(col => {
+        // 根据列类型设置默认值
+        switch (col.type) {
+            case 'number':
+                newRow[col.key] = col.defaultValue || 0;
+                break;
+            case 'switch':
+                newRow[col.key] = col.defaultValue || false;
+                break;
+            case 'checkbox':
+                newRow[col.key] = col.defaultValue || [];
+                break;
+            case 'select':
+                if (col.multiple) {
+                    newRow[col.key] = col.defaultValue || [];
+                } else {
+                    newRow[col.key] = col.defaultValue || '';
+                }
+                break;
+            default:
+                newRow[col.key] = col.defaultValue || '';
+                break;
+        }
+    });
+
+    const newData = [...currentData, newRow];
+    // 只更新computedModelValue，让watch自动处理change事件
+    computedModelValue.value = JSON.parse(JSON.stringify(newData));
+};
+
+/**
+ * 删除表格行
+ * @param {number} rowIndex 行索引
+ */
+const removeTableRow = (rowIndex) => {
+    if (props.type !== 'table') return;
+
+    const currentData = [...(computedModelValue.value || [])];
+    currentData.splice(rowIndex, 1);
+
+    // 只更新computedModelValue，让watch自动处理change事件
+    computedModelValue.value = currentData;
+};
+
+/**
+ * 更新表格单元格数据
+ * @param {number} rowIndex 行索引
+ * @param {string} colKey 列键名
+ * @param {*} value 新值
+ */
+const updateTableCell = (rowIndex, colKey, value) => {
+    if (props.type !== 'table') return;
+
+    const currentData = [...(computedModelValue.value || [])];
+    if (currentData[rowIndex]) {
+        currentData[rowIndex] = {
+            ...currentData[rowIndex],
+            [colKey]: value
+        };
+
+        // 只更新computedModelValue，让watch自动处理change事件
+        computedModelValue.value = currentData;
+    }
+};
+
+// 监听modelValue变化，触发change事件（仅在table类型时）
+watch(
+    () => props.modelValue,
+    (newVal, oldVal) => {
+        if (props.type === 'table' && newVal !== oldVal) {
+            // 只在数据真正变化时触发change事件
+            const cleanData = Array.isArray(newVal) ? newVal : [];
+            handleChange(cleanData);
+        }
+    },
+    { deep: true }
+);
+
+// 组件挂载时初始化文件列表
+onMounted(() => {
+});
+</script>
+
+<style scoped>
+.custom-control {
+    width: 100%;
+}
+
+.ebiz-form-table {
+    width: 100%;
+}
+
+.ebiz-form-table :deep(.t-table) {
+    border: 1px solid var(--td-border-level-1-color);
+    border-radius: var(--td-radius-default);
+}
+
+.ebiz-form-table :deep(.t-table td) {
+    padding: 8px 12px;
+}
+
+.ebiz-form-table :deep(.t-table th) {
+    background-color: var(--td-bg-color-secondarycontainer);
+    font-weight: 500;
+}
+
+.ebiz-form-table :deep(.t-input) {
+    border: none;
+    box-shadow: none;
+}
+
+.ebiz-form-table :deep(.t-input:focus-within) {
+    border: 1px solid var(--td-brand-color);
+    box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+}
+
+.ebiz-form-table :deep(.t-input-number) {
+    border: none;
+    box-shadow: none;
+}
+
+.ebiz-form-table :deep(.t-input-number:focus-within) {
+    border: 1px solid var(--td-brand-color);
+    box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+}
+
+.ebiz-form-table :deep(.t-select) {
+    border: none;
+    box-shadow: none;
+}
+
+.ebiz-form-table :deep(.t-select:focus-within) {
+    border: 1px solid var(--td-brand-color);
+    box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+}
+
+.ebiz-form-table :deep(.t-date-picker) {
+    border: none;
+    box-shadow: none;
+}
+
+.ebiz-form-table :deep(.t-date-picker:focus-within) {
+    border: 1px solid var(--td-brand-color);
+    box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+}
+
+.ebiz-form-table :deep(.t-textarea) {
+    border: none;
+    box-shadow: none;
+}
+
+.ebiz-form-table :deep(.t-textarea:focus-within) {
+    border: 1px solid var(--td-brand-color);
+    box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+}
+
+.ebiz-form-table :deep(.t-switch) {
+    justify-content: center;
+}
+
+.ebiz-form-table :deep(.t-radio-group),
+.ebiz-form-table :deep(.t-checkbox-group) {
+    justify-content: center;
+}
 </style>