@ebiz/designer-components 0.1.38 → 0.1.39

package/package.json

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

package/src/components/senior/EbizSForm/TABLE_USAGE.md

@@ -0,0 +1 @@
+ 

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

@@ -121,6 +121,103 @@
                     @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" :pagination="false" 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'" 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)" />
+
+                                <!-- 日期选择器 -->
+                                <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)" />
+
+                                <!-- 默认文本显示 -->
+                                <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>
             </template>
@@ -132,7 +229,7 @@
 <script>
 /**
  * @displayName PC端表单项
- * @description PC端表单项组件，基于TDesign FormItem封装，支持多种控件类型
+ * @description PC端表单项组件，基于TDesign FormItem封装，支持多种控件类型，包括子表格功能
  * @category 表单组件
  * @name EbizSFormItem
  */
@@ -157,7 +254,10 @@ import {
     Slider as TSlider,
     Cascader as TCascader,
     TreeSelect as TTreeSelect,
-    ColorPicker as TColorPicker
+    ColorPicker as TColorPicker,
+    Table as TTable,
+    Button as TButton,
+    Space as TSpace
 } from 'tdesign-vue-next';
 import EbizRemoteSelect from '../../EbizRemoteSelect.vue';
 import EbizEmployeeSelector from '../../EbizEmployeeSelector.vue';
@@ -167,7 +267,7 @@ import { EbizUpload } from '../../../index.js'
 const props = defineProps({
     /**
      * 组件类型
-     * @options input|number|textarea|select|date|datetime|time|radio|checkbox|switch|slider|upload|cascader|tree-select|color-picker|employee|dept
+     * @options input|number|textarea|select|date|datetime|time|radio|checkbox|switch|slider|upload|cascader|tree-select|color-picker|employee|dept|table
      */
     type: {
         type: String,
@@ -175,7 +275,7 @@ const props = defineProps({
         validator: (val) => [
             'input', 'number', 'textarea', 'select', 'date', 'datetime', 'time', 'radio',
             'checkbox', 'switch', 'slider', 'upload', 'cascader', 'tree-select',
-            'color-picker', 'employee', 'dept'
+            'color-picker', 'employee', 'dept', 'table'
         ].includes(val)
     },
     /**
@@ -523,6 +623,32 @@ const props = defineProps({
     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: '添加数据'
     }
 });
 
@@ -536,10 +662,48 @@ const emit = defineEmits([
 const computedModelValue = computed({
     get: () => props.modelValue,
     set: (val) => {
+        console.log("val",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 新值
@@ -555,10 +719,163 @@ const handleChange = (val) => {
 const handleValidate = (validateResult) => {
     emit('validate', validateResult);
 };
+
+/**
+ * 添加表格行
+ */
+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.value = JSON.parse(JSON.stringify(newData));
+
+    handleChange(newData.map(({ __id, ...item }) => item));
+};
+
+/**
+ * 删除表格行
+ * @param {number} rowIndex 行索引
+ */
+const removeTableRow = (rowIndex) => {
+    if (props.type !== 'table') return;
+    
+    const currentData = [...(computedModelValue.value || [])];
+    currentData.splice(rowIndex, 1);
+    
+    computedModelValue.value = currentData;
+    handleChange(currentData.map(({ __id, ...item }) => item));
+};
+
+/**
+ * 更新表格单元格数据
+ * @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.value = currentData;
+        handleChange(currentData.map(({ __id, ...item }) => item));
+    }
+};
 </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>

package/src/views/EbizSForm/index.vue

@@ -17,7 +17,11 @@
           <ebiz-s-form-item label="爱好" name="hobbies" type="checkbox" :options="hobbyOptions"></ebiz-s-form-item>
           <ebiz-s-form-item label="职业" name="occupation" type="select" :options="occupationOptions"></ebiz-s-form-item>
           <ebiz-s-form-item label="出生日期" name="birthday" type="date"></ebiz-s-form-item>
-          <ebiz-s-form-item label="简介" name="bio" type="textarea" placeholder="请输入个人简介"></ebiz-s-form-item>
+          {{ formData.bio }}
+          <ebiz-s-form-item v-model="formData.bio" label="简介" name="bio" type="table" :tableColumns="[
+            { name: '名称', key: 'name' },
+            { name: '数量', key: 'num' }
+          ]" placeholder="请输入个人简介"></ebiz-s-form-item>
         </ebiz-s-form>
       </div>
     </div>
@@ -127,6 +131,8 @@ export default {
     const editFormRef = ref(null);
     const methodFormRef = ref(null);
 
+    const tableColumns = reactive();
+
     // 基础表单数据
     const formData = reactive({
       name: '',
@@ -135,7 +141,7 @@ export default {
       hobbies: [],
       occupation: '',
       birthday: '',
-      bio: ''
+      bio: [{name: '123', num: 123}]
     });
 
     // 表单验证规则

package/src/views/EbizSFormItemTableDemo.vue

@@ -0,0 +1 @@
+ 

package/src/views/EbizSFormTableDemo.vue

@@ -0,0 +1 @@
+