@mixlinker/actionitem

ActionItem 动态表单组件 - 支持多种表单类型、字段联动、WebSocket 数据交互

安装

npm install @mixlinker/actionitem
# 或
pnpm add @mixlinker/actionitem

使用

全局注册

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import { ActionItemPlugin } from '@mixlinker/actionitem'
import '@mixlinker/actionitem/style.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(ActionItemPlugin)

局部使用

<template>
  <ActionItem 
    :config="config"
    :show-toolbar="true"
    :show-ws-controls="true"
    @submit="onSubmit"
    @ws-data="onWsData"
  />
</template>

<script setup>
import { ActionItem } from '@mixlinker/actionitem'
import '@mixlinker/actionitem/style.css'

const config = {
  action_name: '用户信息',
  params: [
    { key: 'name', cn_name: '姓名', form_type: 'text', required: true },
    { key: 'age', cn_name: '年龄', form_type: 'number' }
  ]
}

const onSubmit = (data) => console.log('提交:', data)
const onWsData = (data) => console.log('WebSocket:', data)
</script>

直接使用类

import { ActionItemComponent } from '@mixlinker/actionitem'

const acti = new ActionItemComponent({
  action_name: '表单',
  params: [...]
})

// 连接 WebSocket
acti.connectWebSocket('ws://localhost:8080', {
  onData: (data) => console.log(data)
})

// 导出数据
const result = acti.exportToOriginalFormat()

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | config | ActionItemConfig | - | 表单配置 | | style | ActionItemStyle | - | 样式配置 | | wsUrl | string | - | WebSocket URL | | autoConnect | boolean | false | 自动连接 WebSocket | | showToolbar | boolean | true | 显示工具栏 | | showWsControls | boolean | true | 显示 WebSocket 控制 |

Events

| 事件 | 参数 | 说明 | |------|------|------| | submit | data | 提交表单 | | generate | data | 生成 JSON | | wsConnect | - | WebSocket 连接成功 | | wsDisconnect | - | WebSocket 断开 | | wsData | data | 收到 WebSocket 数据 | | wsError | error | WebSocket 错误 |

支持的 form_type

• text, textarea, select, radio_group, checkbox_group
• number, switch, date_picker, time_picker
• file_upload, sub_form, hidden

联动功能

通过 rules 配置实现字段联动：hidden, disabled, required, enum, placeholder, default_value, tooltip

开发

# 安装依赖
pnpm install

# 启动测试环境
pnpm test

# 构建
pnpm build

License

MIT