el-plus-crud 0.0.2

package/lib/config/form.ts

@@ -0,0 +1,12 @@
+// 表单全局配置
+
+export const form_input_max_length = 20
+export const form_input_small_max_length = 10
+export const form_input_big_max_length = 100
+export const form_input_three_max_length = 300
+export const form_input_long_max_length = 500
+export const form_textarea_max_length = 500
+export const form_number_input_conf = { min: 0, max: 999999999, precision: 0, controlsPosition: 'right' }
+export const form_number_input_price_conf = { min: 0, max: 99999999, precision: 2, controlsPosition: 'right' }
+export const form_number_input_price4_conf = { min: 0, max: 99999999, precision: 4, controlsPosition: 'right' }
+export const form_number_input_double_conf = { min: 0, max: 1, precision: 4, controlsPosition: 'right' }

package/lib/config/index.ts

@@ -0,0 +1,9 @@
+/**
+ * 上传大小限制
+ * @type {string}
+ */
+export const uploadImgMaxSize = 2 * 1024 * 1024
+export const uploadFileMaxSize = 20 * 1024 * 1024
+
+// form配置
+export * from './form'

package/lib/index.ts

@@ -0,0 +1,29 @@
+import { App } from 'vue'
+import ElPlusForm from './components/el-plus-form/ElPlusForm.vue'
+import ElPlusFormDialog from './components/el-plus-form/ElPlusFormDialog.vue'
+import { components } from './components/el-plus-form/components/index'
+import ElPlusTable from './components/el-plus-table/ElPlusTable.vue'
+
+export default {
+  install: (app: App, format?: { [key: string]: Function }) => {
+    // 这里注入format对象
+    app.provide('format', format)
+    app.provide('globalData', { aaa: [] })
+    // app.config.globalProperties.$epfFormat = { ...format }
+
+    // 循环注册表单组件
+    components.unshift(ElPlusForm)
+    components.unshift(ElPlusFormDialog)
+
+    // 注册列表组件
+    components.push(ElPlusTable)
+
+    console.log('components: ', components)
+
+    components.map((component: any) => {
+      app.component(component.name, component)
+    })
+
+    console.log('app: ', app)
+  }
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "el-plus-crud",
+  "description": "采用Vue3 + TS，封装的element-plus数据驱动表单、列表组件",
+  "author": "K.D.Jack",
+  "version": "0.0.2",
+  "license": "MIT",
+  "private": false,
+  "main": "dist/el-plus-crud.umd.cjs",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue lib/",
+    "preview": "vite preview",
+    "release": "standard-version",
+    "prepare": "npx husky install && npx husky add .husky/pre-commit \"npx lint-staged\"",
+    "pub": "yarn build && yarn release && yarn publish"
+  },
+  "keywords": [
+    "element+",
+    "element plus",
+    "element plus form",
+    "element plus table",
+    "element plus crud",
+    "el-plus-form",
+    "el-plus-table",
+    "el-plus-crud"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/KDJack/el-plus-crud"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
+    "element-plus": "^2.3.6",
+    "lodash": "^4.17.21",
+    "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@types/node": "^20.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "eslint": "^8.34.0",
+    "eslint-plugin-vue": "^9.9.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.3",
+    "prettier": "^3.0.0",
+    "sass": "^1.58.3",
+    "standard-version": "^9.5.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.3.9",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-eslint-parser": "^9.1.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">= 7.0.0"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/tsconfig.json

@@ -0,0 +1,68 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    "module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"] /* Specify library files to be included in the compilation. */,
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+    // "declaration": true /* Generates corresponding '.d.ts' file. */,
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true /* Import emit helpers from 'tslib'. */,
+    // "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
+    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+    /* Strict Type-Checking Options */
+    "strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
+    /* Module Resolution Options */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "baseUrl": "." /* Base directory to resolve non-absolute module names. */,
+    "paths": {
+      "@/*": ["exame/*"]
+    } /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    "types": ["vite/client"] /* Type declaration files to be included in compilation. */,
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    /* Experimental Options */
+    "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    /* Advanced Options */
+    "skipLibCheck": true /* Skip type checking of declaration files. */,
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  "include": ["types/*.d.ts", "lib/**/*.ts", "lib/**/*.vue", "lib/**/*.tsx", "lib/**/*.d.ts", "lib/views/home/activeInfo/.vue.ts"], // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled
+  "exclude": ["node_modules", "dist"] // Indicates the file directory that does not need to be compiled
+}

package/types/axios.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import * as axios from 'axios'
+
+// 扩展 axios 数据返回类型，可自行扩展
+declare module 'axios' {
+  export interface AxiosResponse<T = any> {
+    code: number
+    data: T
+    message: string
+    type?: string
+    [key: string]: T
+  }
+}

package/types/formList.d.ts

@@ -0,0 +1,365 @@
+/**
+ *  表单描述
+ */
+declare interface IFormDesc {
+  [key: string]: IFormDescItem
+}
+
+/**
+ * 表单项描述
+ */
+declare interface IFormDescItem {
+  type: string
+  field?: string
+  label?: string | Function
+  prop?: string | Function
+  disabled?: boolean | Function
+  width?: string
+  format?: string | Function
+  showLabel?: boolean
+  labelWidth?: string | number
+  vif?: Function
+  tip?: string | Function
+  size?: string
+  placeholder?: string
+  attrs?: { [key: string]: any } | Function
+  options?: Array<IFormDescItemOptionItem> | IFetch<Array<IFormDescItemOptionItem>> | string
+  default?: string | boolean | number
+  rules?: string | Array<any>
+  require?: boolean
+  required?: boolean
+  valueFormat?: Function
+  isBlank?: boolean
+  colspan?: number
+  upType?: string
+  multiple?: boolean
+  noTip?: boolean
+  limit?: number
+  maxSize?: number
+  remote?: Function
+  // 如果是列表
+  tableConfig?: ITableConfig
+  tableAttr?: { [key: string]: any }
+  tableEvent?: { [key: string]: any }
+  // 查看详情
+  linkId?: string | ((val: any, formData: any) => string)
+  linkType?: string | ((val: any, formData: any) => string)
+  linkLabel?: string | ((val: any, formData: any) => string)
+  // 内部接口
+  _type?: string
+  _vif?: boolean
+  _tip?: string
+  _disabled?: boolean
+  _attrs?: { [key: string]: any }
+  _label?: null
+  _prop?: { [key: string]: any }
+  _options?: Array<IFormDescItemOptionItem>
+  // 其他属性
+  // 级联下拉是否只选中最后一级
+  checkStrictly?: boolean
+}
+
+/**
+ * option描述
+ */
+declare interface IFormDescItemOptionItem {
+  l?: string
+  v?: string | number
+  label?: string
+  value?: string | number
+  children?: Array<IFormDescItemOptionItem>
+}
+
+/**
+ * 按钮回调data
+ */
+declare interface IBtnBack {
+  row: { [key: string]: any }
+  callBack?: Function
+  field: string
+  rowIndex: number
+}
+
+/**
+ * 表单配置
+ */
+declare interface IFormConfig {
+  // 表单描述对象
+  formDesc: IFormDesc
+  // 表单里面item的顺序
+  order?: Array<string>
+  // 表单的列数，默认是1
+  column?: number
+  // 请求地址
+  beforeRequest?: Function
+  // 请求地址
+  requestFn?: Function
+  // 更新的函数
+  updateFn?: Function
+  // 请求成功时
+  success?: Function
+  // 成功时的提醒文本
+  successTip?: string
+  // 列表的ref
+  tableRef?: any
+}
+
+/**
+ * 表单回调
+ */
+declare interface IFormBack {
+  response?: any
+  formData?: { [key: string]: any }
+  callback: Function
+}
+
+/************************************列表************************************ */
+
+declare interface IFetch<T> {
+  // 查询数据的方法，入参和返回格式固定
+  (data?: any): Promise<T | null>
+}
+
+/**
+ * 表格项
+ */
+declare interface IColumnItem {
+  label: string
+  prop?: string
+  type?: string | Array<string>
+  width?: string
+  minWidth?: string
+  format?: string | Array<string>
+  color?: string | Array<string>
+  align?: string
+  headerAlign?: string
+  btns?: Array<Object>
+  isBatch?: Boolean
+  style?: Object
+  fixed?: 'left' | 'right'
+  limit?: number
+  count?: number
+  nodes?: Array<any>
+  inline?: Boolean
+  text?: Boolean
+  parent?: string
+  vif?: boolean | 0 | 1 | Function
+  _vif?: boolean
+  vshow?: boolean | 0 | 1 | Function
+  scShow?: boolean
+  showOverflowTooltip?: boolean
+}
+
+/**
+ * 导出项
+ */
+declare interface IExportConfig {
+  // 导出的URL接口地址
+  url: string
+  // 请求夹带的数据
+  data?: Object
+  // 文件名
+  name?: string
+  // 是否增加token权限
+  isAuth?: Boolean
+}
+
+/**
+ * 列表工具
+ */
+declare interface ITableToolbar {
+  // 列表顶部的功能按钮
+  btns?: Array<any>
+  // btn靠右显示, 只有当formConfig为null，可设置改属性
+  btnRight?: boolean
+  // 顶部查询条件的form
+  formConfig?: IFormConfig
+  // 顶部导出excel配置
+  export?: IExportConfig
+}
+
+/**
+ * 表单数解析
+ */
+declare interface ITreeProps {
+  // 子集的key字段
+  children: string
+  // 是否拥有子集的key
+  hasChildren?: string
+}
+
+/**
+ * 展开配置
+ */
+declare interface IExpConfig {
+  // 是否自动展开
+  isAutoLoadData?: Boolean
+  // 展开自身的查询主键的Id名称
+  idName?: string
+  // 渲染嵌套数据的配置选项
+  treeProps?: ITreeProps
+  // 需要查询的父类ID-展开类型的列表时采用;;
+  queryId?: string
+}
+
+/**
+ * 统计项
+ */
+declare interface IStatisticConfig {
+  // 数据库对应字段
+  dbKeys: Array<string>
+  // 需要统计的字段信息
+  keys: Array<Object>
+}
+
+/**
+ * 列表的选项卡配置
+ */
+declare interface ITableTabConf {
+  prop: string
+  tabs: Array<ITableTabItem>
+  attrs?: { [key: string]: any } | Function
+  // 远程拉取数量信息
+  fetch?: IFetch<PageObject<any>>
+  // 查询条件
+  queryMap?: any
+}
+
+/**
+ * 列表的选项配置
+ */
+declare interface ITableTabItem {
+  label: string | Function
+  value: string | number
+  key?: string
+}
+
+/**
+ * 尾行合计配置
+ */
+declare interface ISummaryConf {
+  // 尾行合计的属性名, 多个用逗号分割
+  prop: string
+  // 尾行合计的显示名称, 多个用逗号分割
+  label?: string
+  // 格式化
+  format?: string
+  // 尾行合计的合并方法
+  sumFn?: (tableData: any[]) => string
+}
+
+/**
+ * 列表配置
+ */
+declare interface ITableConfig {
+  // 列表的名称，全局唯一，且固定，方便存储列表设置
+  tbName?: string
+  tabConf?: ITableTabConf
+  // 调用接口
+  fetch?: IFetch<any>
+  // 列表配置，包含表头，每列信息等
+  column: Array<IColumnItem>
+  // 查询条件
+  queryMap?: any
+  // 列表顶部的工具栏
+  toolbar?: ITableToolbar
+  // 每行自身展开配置项
+  explan?: IExplanConfig
+  // 针对每行的class进行单独控制
+  formatRowClass?: Function
+  // 如果数据返回有多级，那么这里就是解析的地方 比如 ['res', 'data', 'list'] 这说明，要获取的是请求返回数据中，rea.data.list 这个数据
+  dataListModel?: Array<string>
+  // 统计信息
+  statistic?: IStatisticConfig
+  // 最大高度
+  maxHeight?: number
+  // 表格属性
+  tableAttr?: any
+  // 显示选中项的名称Key
+  showSelectNameKey?: String
+  // 配置通用的合计行
+  summaryConf?: ISummaryConf
+}
+
+/**
+ * 对象存储Info
+ */
+declare interface IOssInfo {
+  id?: string
+  name?: string
+  furl?: string
+  mimeType?: string
+  fsize?: number
+  suffix?: string
+  busId?: string
+  busType?: number
+  // upload组件需要的字段
+  url?: string
+  uid?: number
+  previewUrl?: string
+  shareUrl?: string
+  uploadId?: string
+}
+
+/************************************表单详情************************************ */
+declare interface IFInfoGroupItem {
+  title?: string
+  // 表单描述对象
+  formDesc: IFormDesc
+  // 表单的列数，默认是1
+  column?: number
+  // 最大宽度
+  maxWidth?: string
+  // 是否是表格
+  isTable?: boolean
+  // labelWidth
+  labelWidth?: string
+}
+
+/************************************批量下载************************************ */
+/**
+ * 文件（夹）信息
+ */
+declare interface IFiles {
+  id: string
+  // 是否是文件夹
+  folder?: 0 | 1
+  // 文件(夹)名称
+  name: string
+  // 文件地址
+  url?: string
+  // 文件夹中的文件列表
+  files?: Array<IFiles>
+}
+
+/**
+ * 下载信息
+ */
+declare interface IDownInfo {
+  // 文件名
+  name: string
+  // 到期时间
+  endData?: string
+  // 来源
+  sc?: string
+  // 状态：1可下载；2已过期；3已删除；4无权限; 5无效
+  status: 1 | 2 | 3 | 4 | 5
+  // 是否zip压缩，如果不是压缩，则默认下载files[0]
+  zip: 0 | 1
+  // 文件列表
+  files: Array<IFiles>
+}
+
+/**
+ * 下载文件信息
+ */
+declare interface IDownFile {
+  // 文件名
+  name: string
+  // 文件夹名
+  folder: string
+  // 文件地址
+  url: string
+  // 上传进度
+  percent?: number
+}