my-epson-components

my-epson-components

基于 Vue 3 + Element Plus 的通用业务组件库，提取自爱普生知识管理系统，可在任意 Vue 3 项目中复用。

安装

npm install my-epson-components

前置依赖：项目中需已安装 vue@^3.4.0 和 element-plus@^2.5.0。

快速上手

方式一：按需引入（推荐）

import { InlineEditTable } from 'my-epson-components'

<template>
  <InlineEditTable
    title="产品线管理"
    name-label="产品线名称"
    code-label="产品线编码"
    :list-api="fetchList"
    :create-api="createItem"
    :update-api="updateItem"
    :delete-api="deleteItems"
  />
</template>

<script setup>
import { InlineEditTable } from 'my-epson-components'

async function fetchList(params) {
  // 返回格式：{ data: { items: [...], total: 100 } }
}
async function createItem(data) { /* POST */ }
async function updateItem(id, data) { /* PUT */ }
async function deleteItems(ids) { /* DELETE，ids 为数组 */ }
</script>

方式二：全局注册

// main.js
import { createApp } from 'vue'
import EpsonUIComponents from 'my-epson-components'

const app = createApp(App)
app.use(EpsonUIComponents)
// 之后所有模板中可直接使用 <InlineEditTable />

组件列表

组件名	说明
InlineEditTable	支持行内编辑、搜索、分页、批量删除的通用数据表格

InlineEditTable

适用于「名称 + 编码 + 描述」结构的档案/配置数据管理，内置行内编辑、模糊搜索、分页、批量删除、PP 同步数据保护等能力。

Props

属性	类型	必填	默认值	说明
title	String	✅	—	页面标题
nameLabel	String		'名称'	名称列的表头文字
codeLabel	String		'编码'	编码列的表头文字
listApi	Function	✅	—	列表查询函数，接收 { page, size, name?, description? }，需返回 { data: { items, total } }
createApi	Function	✅	—	新增函数，接收 { name, code, description }
updateApi	Function	✅	—	更新函数，接收 (id, { name, code, description })
deleteApi	Function	✅	—	批量删除函数，接收 ids: number[]

listApi 返回格式

{
  data: {
    items: Array<{
      id: number
      name: string
      code: string
      description?: string
      sourceType: 'manual' | 'pp_sync'   // pp_sync 行为只读
      createdAt: string                   // ISO 8601
    }>
    total: number
  }
}

功能特性

• 行内编辑：点击操作列"编辑"按钮，名称与描述字段直接变为输入框，支持保存/取消
• 模糊搜索：支持按名称、描述关键字过滤
• 分页：默认每页 20 条，可通过分页器切换
• 批量删除：勾选多行后点击"批量删除"，pp_sync 来源数据自动跳过并给出提示
• 只读保护：sourceType === 'pp_sync' 的行禁止编辑，行背景高亮提示

本地开发

# 克隆仓库后进入组件库目录
cd ui-components

# 安装依赖
npm install

# 构建库（watch 模式）
npm run dev

# 一次性构建
npm run build

# 启动文档网站
npm run docs:dev

许可证

MIT