pjd-eui

一个基于 Vue 2 和 Element UI 的组件库，提供常用的业务组件和工具函数。

安装

npm install pjd-eui

前置依赖

本组件库需要以下依赖（请确保项目中已安装）：

npm install vue@^2.6.14 element-ui@^2.15.14 axios@^1.5.0
npm install @riophae/vue-treeselect@^0.4.0 file-saver@^2.0.5 js-cookie@^3.0.5

快速开始

完整引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import PjdEui from 'pjd-eui'
import 'pjd-eui/styles/index.scss'

Vue.use(ElementUI)
Vue.use(PjdEui)

按需引入

import { CButton, CTable, CDialog } from 'pjd-eui'

Vue.component('CButton', CButton)
Vue.component('CTable', CTable)
Vue.component('CDialog', CDialog)

组件列表

基础组件

• CButton - 按钮组件，点击后自动失焦
• CCard - 卡片组件
• CDialog - 弹窗组件
• CDrawer - 抽屉组件

表单组件

• CForm - 表单组件，支持多种表单类型
• CFilter - 筛选组件，支持展开收起
• CLineSelect - 线性选择器

数据展示

• CTable - 表格组件，支持分页、筛选、列配置

上传组件

• CImageUpload - 图片上传组件
• CImageUpload2 - 图片上传组件（增强版）
• CFileUpload - 文件上传组件
• CIdCardUpload - 身份证上传组件

主题

• CTheme - 主题切换组件

工具函数

存储

import { setSession, getSession, removeSession } from 'pjd-eui'
import { setLocal, getLocal, removeLocal } from 'pjd-eui'
import { setCookies, getCookies, removeCookies } from 'pjd-eui'

// 使用示例
setLocal('key', 'value')
const value = getLocal('key')

Token 管理

import { setToken, getToken, removeToken, setTokenName } from 'pjd-eui'

setTokenName('my-token') // 设置 token 存储名称
setToken('your-token')
const token = getToken()

请求封装

import { RequestOption, request } from 'pjd-eui'

// 创建请求实例
const http = new RequestOption({
  baseURL: '/api',
  timeout: 30000,
  retryCount: 2, // 重试次数
  retryDelay: 1000, // 重试延迟
  headers: {
    clientId: 'your-client-id'
  }
})

// 设置 clientId
http.setClientId('new-client-id')

// 请求示例
http.get('/user/list', { page: 1 })
http.post('/user/add', { name: 'test' })

// 下载文件
http.download('/export', { id: 1 }, 'filename.xlsx')

主题切换

import { 
  changeThemeName, 
  changeThemeColor, 
  resetTheme,
  getThemeName,
  getThemeColor 
} from 'pjd-eui'

// 切换主题名称
changeThemeName('dark-theme')

// 切换主题颜色
changeThemeColor({
  'pjd-color-primary': '#409EFF',
  'pjd-color-success': '#67C23A'
})

// 重置主题
resetTheme()

工具方法

import { setUtil, validate, modal, errorCode } from 'pjd-eui'

// 深拷贝（支持循环引用、Date、RegExp、Map、Set）
const cloned = setUtil.deepClone(obj)

// 时间格式化
const time = setUtil.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')

// 防抖
const debouncedFn = setUtil.debounce(fn, 300)

// 构造树形结构
const tree = setUtil.handleTree(list, 'id', 'parentId', 'children')

// 表单验证规则
Vue.prototype.$rules = validate
// 在组件中使用
this.$rules.required('请输入用户名')

// 消息提示
modal.msgSuccess('操作成功')
modal.msgError('操作失败')
modal.confirm('确定删除吗？').then(() => { })

URL 参数处理

import { stringifyQuery, parseQuery } from 'pjd-eui'

// 对象转查询字符串（支持加密）
const query = stringifyQuery({ page: 1, size: 10 })

// 查询字符串转对象
const params = parseQuery('?page=1&size=10')

组件使用示例

CTable 表格组件

<template>
  <c-table
    :column="columns"
    :data="tableData"
    :page-option="pageOption"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
    <template #name="{ row }">
      <span>{{ row.name }}</span>
    </template>
  </c-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { prop: 'name', label: '名称', slot: 'name' },
        { prop: 'age', label: '年龄' },
        { prop: 'address', label: '地址' }
      ],
      tableData: [],
      pageOption: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      }
    }
  }
}
</script>

CForm 表单组件

<template>
  <c-form
    ref="form"
    :form-list="formList"
    :form-echo="formData"
  />
</template>

<script>
export default {
  data() {
    return {
      formList: [
        { field: 'name', label: '名称', type: 'input' },
        { field: 'age', label: '年龄', type: 'number' },
        { 
          field: 'status', 
          label: '状态', 
          type: 'select',
          options: [
            { label: '启用', value: 1 },
            { label: '禁用', value: 0 }
          ]
        }
      ],
      formData: {}
    }
  },
  methods: {
    async submit() {
      const data = await this.$refs.form.submit()
      // 提交数据
    }
  }
}
</script>

CFilter 筛选组件

<template>
  <c-filter
    :filter-form="filterForm"
    @submit="handleSearch"
    @refresh="handleRefresh"
  />
</template>

<script>
export default {
  data() {
    return {
      filterForm: [
        { field: 'name', label: '名称', type: 'input' },
        { field: 'status', label: '状态', type: 'select', options: [] }
      ]
    }
  },
  methods: {
    handleSearch(params) {
      console.log('搜索参数:', params)
    },
    handleRefresh(params) {
      console.log('重置参数:', params)
    }
  }
}
</script>

主题定制

组件库支持 CSS 变量自定义主题：

:root {
  --pjd-color-primary: #409EFF;
  --pjd-color-success: #67C23A;
  --pjd-color-warning: #E6A23C;
  --pjd-color-danger: #F56C6C;
  --pjd-color-info: #909399;
}

License

ISC