IMS系统表单设计器完全指南

/* 表单字段定义 */
class FormField {
    constructor(config) {
        this.id = config.id;                    // 字段唯一标识
        this.type = config.type;                // 字段类型
        this.label = config.label;              // 显示标签
        this.placeholder = config.placeholder;  // 占位提示
        this.required = config.required || false;  // 是否必填
        this.defaultValue = config.defaultValue;
        this.validation = config.validation;    // 验证规则
        this.options = config.options;          // 选项列表（select/radio等）
        this.layout = config.layout || {};      // 布局配置
    }
}

/* 支持的字段类型 */
const FIELD_TYPES = {
    INPUT: 'input',           // 单行文本
    TEXTAREA: 'textarea',     // 多行文本
    NUMBER: 'number',        // 数字
    SELECT: 'select',        // 下拉选择
    RADIO: 'radio',          // 单选
    CHECKBOX: 'checkbox',    // 复选
    DATE: 'date',            // 日期
    DATETIME: 'datetime',    // 日期时间
    FILE: 'file',            // 文件上传
    EDITOR: 'editor',        // 富文本编辑器
    USER_SELECT: 'user',      // 用户选择
    DEPT_SELECT: 'dept'       // 部门选择
};

/* 拖拽管理器 */
class DragDropManager {
    constructor(canvas) {
        this.canvas = canvas;
        this.draggedItem = null;
        this.placeholder = null;
        this.initEventListeners();
    }

    /* 初始化拖拽事件 */
    initEventListeners() {
        // 拖拽开始
        this.canvas.addEventListener('dragstart', (e) => {
            if (e.target.dataset.fieldType) {
                this.draggedItem = e.target;
                e.dataTransfer.setData('fieldType', e.target.dataset.fieldType);
            }
        });

        // 拖拽放置
        this.canvas.addEventListener('drop', (e) => {
            e.preventDefault();
            const fieldType = e.dataTransfer.getData('fieldType');
            if (fieldType) {
                const position = this.getDropPosition(e);
                this.addField(fieldType, position);
            }
        });

        // 拖拽经过
        this.canvas.addEventListener('dragover', (e) => {
            e.preventDefault();
            this.updatePlaceholder(e);
        });
    }

    /* 添加字段到画布 */
    addField(fieldType, position) {
        const field = new FormField({
            id: generateId(),
            type: fieldType,
            label: getDefaultLabel(fieldType)
        });

        this.renderField(field, position);
    }
}

/* 表单验证器 */
class FormValidator {
    /* 验证规则定义 */
    static rules = {
        required: (value) => {
            return value !== '' && value !== null
                ? null
                : '此字段为必填项';
        },

        minLength: (value, min) => {
            return value.length >= min
                ? null
                : `最小长度为 ${min} 个字符`;
        },

        maxLength: (value, max) => {
            return value.length <= max
                ? null
                : `最大长度为 ${max} 个字符`;
        },

        pattern: (value, regex) => {
            return new RegExp(regex).test(value)
                ? null
                : '格式不正确';
        },

        email: (value) => {
            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
                ? null
                : '请输入有效的邮箱地址';
        },

        phone: (value) => {
            return /^1[3-9]\d{9}$/.test(value)
                ? null
                : '请输入有效的手机号码';
        }
    };

    /* 验证单个字段 */
    validateField(field, value) {
        if (!field.validation) return { valid: true };

        const errors = [];
        for (const rule of field.validation) {
            const validator = this.rules[rule.type];
            if (validator) {
                const error = validator(value, rule.params);
                if (error) errors.push(error);
            }
        }

        return { valid: errors.length === 0, errors };
    }
}

/* 表单模板管理器 */
class FormTemplateManager {
    /* 保存表单模板 */
    async saveTemplate(template) {
        const data = {
            id: template.id || generateId(),
            name: template.name,
            fields: template.fields.map(f => f.toJSON()),
            layout: template.layout,
            createdAt: new Date().toISOString()
        };

        // 保存到后端
        return await api.post('/form/templates', data);
    }

    /* 加载表单模板 */
    async loadTemplate(templateId) {
        const data = await api.get(`/form/templates/${templateId}`);

        return new FormTemplate({
            id: data.id,
            name: data.name,
            fields: data.fields.map(f => new FormField(f)),
            layout: data.layout
        });
    }

    /* 导出表单为 JSON Schema */
    exportToJsonSchema(template) {
        const schema = {
            type: 'object',
            properties: {},
            required: []
        };

        template.fields.forEach(field => {
            schema.properties[field.id] = convertToJsonSchema(field);
            if (field.required) {
                schema.required.push(field.id);
            }
        });

        return schema;
    }
}