my-dataentry

一个基于 Vue 3 和 Element Plus 的数据录入组件库。

特性

• 支持多种数据类型的录入
• 支持数据项的上下移动
• 支持数据的保存和查询
• 支持文件上传
• 支持富文本编辑
• 支持表格数据编辑
• 支持分类和关联数据
• 支持数据项级别的设置
• 支持备注信息

安装

npm install my-dataentry

使用方法

全局注册

// main.ts
import { createApp } from 'vue'
import DataEntry from 'my-dataentry'
import 'my-dataentry/dist/style.css'

const app = createApp(App)
app.use(DataEntry)

组件中使用

<template>
  <data-entry
    :title-name="titleName"
    :identifier-suffix="identifierSuffix"
    :duplicate-check="duplicateCheck"
    :data-level="dataLevel"
    :record-item-list="recordItemList"
    @save="handleSave"
    @cancel="handleCancel"
    @save-and-search="handleSaveAndSearch"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DataEntry } from 'my-dataentry'

const titleName = ref('示例数据')
const identifierSuffix = ref('')
const duplicateCheck = ref(1)
const dataLevel = ref('')
const recordItemList = ref([])

const handleSave = (data: any) => {
  console.log('保存数据:', data)
}

const handleCancel = () => {
  console.log('取消操作')
}

const handleSaveAndSearch = (data: any) => {
  console.log('保存并查询数据:', data)
}
</script>

组件属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | titleName | string | - | 资源库名称 | | identifierSuffix | string | - | 标识号 | | duplicateCheck | number | 1 | 是否查重(1:是, 0:否) | | dataLevel | string | - | 资源级别 | | isSave | boolean | false | 是否保存中 | | isSaved | boolean | false | 是否已保存 | | recorditemList | array | [] | 记录项列表 |

事件

| 事件名 | 参数 | 说明 | |--------|------|------| | save | (data: any) | 保存数据时触发 | | cancel | - | 取消操作时触发 | | save-and-search | (data: any) | 保存并查询时触发 |

支持的数据类型

1. 单行文本 (type: 2-5, 15-20)
2. 多行文本 (type: 6)
3. 表格 (type: 7)
4. 文件 (type: 8-14)
5. 网页 (type: 21)
6. 关联 (type: 22, 25)
7. 分类 (type: 23, 24)

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

许可证

MIT