多功能便捷CRUD组件

用于快速搭建CRUD的前端应用, 目前已实现网络的增删改查的请求封装，实现表格数据的筛选，查找，分页等常用功能，使用该组件可以快速开发出业务系统的常用功能界面。

在线Demo

Live Demo 在线演示

安装--Install

$ npm install common-list --save

使用--Usage

1.全局引入

main.js

import { createApp } from 'vue'
import App from './App.vue'
import MyTable from 'common-list'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css';
import zhCn from 'element-plus/es/locale/lang/zh-cn'
createApp(App).use(ElementPlus, {
    locale: zhCn,
}).use(router).use(MyTable).mount('#app')

2.使用组件

<template>
    <CommonList :datatitle="DemoUrlSet.title" key-field-name="demoID" :table-data="tableData"
      :column-list="DemoColumns" :op-column-width="300" :total-count="tableData.length" searchplaceholder="搜索" :use-select="false">

    </CommonList>
</template>

<script setup lang="ts">

import { InitComponentData} from 'common-list' //初始化组件，获取列表数据
import { DemoColumns,netUtil } from '/@/models/columndata';//字段集合和网络工具类

import { Demo } from "/@/models/index"; //数据对象
import { DemoUrlSet } from "/@/models/urlset";//读取数据的网址对象

const { tableData } = InitComponentData<Demo>(netUtil,DemoUrlSet, 'demoID', null, {});
//RoleCheck()
</script>

3.common-list中的数据类型

export enum SaveType { Add, Edit, Delete, MultiSet, Upload, Check }
export interface KeyValue {
    title: string,
    value: string | number
}

export interface DataColumn { //数据列类型
    title: string,
    fieldName: string,
    placeholder?: string,
    inputType?: string,//input的数据类型，对应input ： text,number,date
    options?: KeyValue[],
    isMultiple?: boolean,
    required?: boolean,
    useSwitch?: boolean,
    dataType?: string,
    isMainField?: boolean, //是否需要占用多点显示位置，如35%
    isHideInList?: boolean, //是否不在表格里显示
    isHideInForm?: boolean, //是否不在表单里显示
    isImg?: boolean,
    isDate?: boolean,
    needShowTime?: boolean,
    isWholeRow?: boolean,//是否独占一行！！！
    isRichText?: boolean,
    isFile?: boolean,
    isAutoUpload?: boolean,
    fileLimit?: number,
    useComponent?: boolean,
    canEditInTable?: boolean,
    showInDetail?: boolean,  
}

export class CrudUrlSet {  //api网址集合
    getListApiUrl: string;
    getSingleApiUrl: string;
    addApiUrl: string;
    editApiUrl: string;
    delApiUrl: string;
    checkApiUrl: string;//用于登录
    multiSetApiUrl: string;//批量重置
    resetListApiUrl: string;  //批量重置修复
    importApiUrl: string; //批量导入
    restfulApiUrl: string; //统一api地址，根据http method去辨别！
    keyFieldName: string;
    demoFieldName: string;
    title: string;
    needResetKeysWhenUpdated: string[];
}


export interface FilterData {
    datalist: any[],//这个是数据数组
    selectedlist: any[] | any,//这个选中数据数组
    isMultiple: boolean,//是否可以多选
    onlyLocal?: boolean,//是否只是本地筛选
    placeholder: string,//占位符文本
    filterFieldName: string //列表筛选字段名，这个是必选的
    valueFieldName: string //选项值的字段名
    textFieldName?: string //选项文本的字段名
}

export interface TableListOption<T> {
    tableID?: string,//表格ID,用于导出
    maxHeight?: number,//最大高度
    opColumnWidth?: number, //操作栏宽度,默认200  
    opColumnTitle?: string, //操作栏标题   
    highlightCurrentRow?: boolean,//高亮显示当前行
    noOpColumn?: boolean,//不显示操作栏
    useSelect?: boolean,  //使用选择，默认为true			
    singleSelect?: boolean,//单选，在useSelect为true是时才有意义
    resizable?: boolean, //允许调宽
    canEdit?: boolean,//表格中直接显示编辑，一般是配合editChange方法
    paging?: boolean,//是否分页，数据总数量与tableData的数量不一致时为true,
    searchText?: string,//来自ListHead的搜索文字
    showDelOpBtns?: boolean,//显示删除按钮，默认为true	
    showDetailOpBtns?: boolean,	//显示详情按钮，默认为true	
    showEditOpBtns?: boolean,//显示编辑按钮，默认为true	
    columnList: DataColumn[], //字段属性数组，表格数据根据这个来显示
    tableData: T[], //表格数据源
    totalCount?: number, //数据总数量，如果与tableData的数量不一致时，则显示分页
    downloadFile?: (url: string) => {}, //参数传过来是方法！！
    pageSizes?: number[],//页码设置，默认为[20, 30, 50, 100]
}

export interface ListHeadOption<T> {
    searchplaceholder?: string, //搜索框占位符文字
    sampleFileUrl?: string,//导入的样例文件
    addBtnText?: string, //新增按钮的文本，默认为添加
    tableID?: string,//表格ID,用于导出
    enableBatchSet?: boolean, //支持批量设置
    hasResizeBtn?: boolean, //  显示调整表格宽度的按钮
    enableMultiAdd?: boolean, //支持批量添加
    isCustomRefresh?: boolean, //自定义重新刷新列表，自定义读取数据api
    hasSearchInput?:boolean,//显示搜索框
    showImportBtn?: boolean,//显示导入按钮
    enableExport?: boolean,//显示导出
    enableColumnBtn?: boolean,//管理显示列
    searchFromServer?: boolean,//从服务器上搜索
    filterFromServer?: boolean, //通过在服务器里筛选！！
    showDefaultOpBtns?: boolean,//显示默认按钮，默认为true	
    columnList: DataColumn[], //字段属性数组，表格数据根据这个来显示
    tableData: T[], //表格数据源
    totalCount?: number, //数据总数量，如果与tableData的数量不一致时，则显示分页
    filterObjList?: FilterData[],//筛选数据列表，可以有多个，可选单选或多选	
}

export interface CommonListOption<T> extends TableListOption<T>, ListHeadOption<T> {
    dialogWidth?: number, //对话框宽度，默认1000	
    datatitle?: string, //对话框的标题       
    keyFieldName?: string, //主键字段名
    maxImgSize?: number, // 图片大小最大字节， 默认2 * 1024 * 1024		
    maxVideoSize?: number, // 视频大小最大字节， 默认50 * 1024 * 1024		
    hasListHead?: boolean,//是否包含列表头
    newDialogData?: boolean,  //使用新的对话框数据，默认为true
    showDialogSizeSet?: boolean,//显示对话框大小设置按钮
    showEditInTable?: boolean,//表格中直接显示编辑，一般是配合editChange方法
    containDialog?: boolean,//是否包含对话框，如果只显示数据，可以设置这个为true,已节省组件开销
    showKeepData?: boolean,		//保存之前的表单数据
    isDemo?: boolean, //是否用于demo显示
    addNewObj?: T,  //新建对象
    autoOpenObj?: T,//自动打开的对象，一般为接受其他系统传过来的参数
    listStyle: string,//列表显示方式，分别为table(表格),pic(图片列表),free(自由列表)
    getRowData?: (n: number) => {}, //参数传过来是方法！用于获取单条记录，一般从服务器重新获取！
    settingColumnList?: DataColumn[],//设置后，ListHead的enableBatchSet将为true

}

4.对应的Demo模型类

export class Demo {
    demoID: number;
    name: string;
    demoDesc: string;
    constructor(name: string) {

        this.demoID = 0;
        this.demoDesc = ''
        this.name = name
    }
}
export const DemoColumns = ref<DataColumn[]>([
    {
        title: '标题',
        fieldName: 'name',

    },
    {
        title: '内容',
        fieldName: 'demoDesc',
        isHideInList: true
    }
])

export const DemoUrlRestfulSet: CrudUrlSet = {
    restfulApiUrl:'/api/demo/rest',
    importApiUrl: '/api/demo/importdemos',
    keyFieldName: 'demoID',
    title: '演示'
}

CommonList常用属性说明

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :------------ | :--------------------------------------------------- | :------ | :----------- | :----- | | tableData | 表格数据列表，数组 | Array | 数组 | [] | | column-list | 列集合 | Array | | 0 | | key-field-name | 主键字段名 | String | | true | | datatitle | 数据标题 | Boolean | | false | | use-select | 是否开启选择数据 | Boolean | | false | | total-count | 数据条数 | Number | | |

##插槽

| 插槽名称 | 说明 | | :------------ | :------------------------------------------ | | otherbtns | 自定义操作按钮系列 | | headTitle | 自定义表头区域 | | opColumn | 表格操作列行内的自定义操作 |