基于 cl-crud2 开发,Github 传送门 (opens new window)

# Functions

  • 数据表格
  • 高级搜索
  • 多、单关键字搜索
  • 条件搜索
  • 新增、删除、修改、查询
  • 排序
  • 分页
  • 自定义表单
  • 自定义布局

# Quick start

在这一组文章中, 您将了解 CRUD 的核心基础知识。我们将构建一个基本应用场景, 其中的涵盖了大量的基础功能。

安装或者更新:

yarn add cl-crud2

# Service

请求服务

示例:

// 使用挂载的service
ctx.service(this.$service.system.user)

// 自行封装等方式
ctx.service({
    page: params => {
        return Promise.resolve({
            list: [
                {
                    id: 1,
                    name: 'icssoa',
                }
            ],
            pagination: {
                total: 1,
                page: 1,
                size: 10
            }
        })
    },
    add,
    update,
    info,
    delete,
    ...
})

# Permission

权限,控制编辑(update)、新增(add)、删除(delete)按钮的显示。

示例:

// Object
ctx.permission({
	add: true,
	delete: true,
	update: true
});

// Function
ctx.permission(() => {
	return {
		add: true
	};
});

# Dict

字典,配置参数:

{
    // 替换请求接口的尾地址
    api: {
        list: 'list',   // 全部数据
        add: 'add', // 新增
        update: 'update',   // 修改
        delete: 'delete',   // 删除
        info: 'info',   // 详情
        page: 'page',   // 分页
    },
    // 分页参数
    pagination: {
        page: 'page',   // 页数
        size: 'size',   // 每页显示的条目
    },
    // 搜索
    search: {
        keyWord: 'keyWord', // 模糊查询的关键字
        query: 'catecory',  // 类目
    },
    // 排序
    sort: {
        order: 'sort',  // 排序方式
        prop: 'order',  // 排序关键字
    },
    // 标签
    label: {
        add: '添加',
        delete: '删除',
        update: '编辑',
        refresh: '刷新',
        advSearch: '高级搜素'
    }
}

# Example

来尝试写一个例子

<template>
	<cl-crud @load="onLoad">
		<el-row type="flex" align="center">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-flex1 />
			<!-- 关键字搜索按钮 -->
			<cl-search-key />
		</el-row>

		<el-row>
			<!-- 表格 -->
			<cl-table ref="table" v-bind="table"></cl-table>
		</el-row>

		<el-row type="flex" justify="end">
			<!-- 分页 -->
			<cl-pagination />
		</el-row>

		<!-- 编辑 -->
		<cl-upsert ref="upsert" v-bind="upsert"></cl-upsert>
	</cl-crud>
</template>
export default {
	data() {
		return {
			// 表格配置
			table: {
				props: {
					// 默认排序
					"default-sort": {
						prop: "endTime",
						order: "descending"
					}
				},

				// 表格列
				columns: [
					{
						type: "selection",
						width: 60
					},
					{
						label: "id",
						prop: "id"
					},
					{
						label: "昵称",
						prop: "name"
					},
					{
						label: "期限",
						prop: "endTime",
						sortable: "custom"
					},
					// 操作栏
					{
						type: "op",
						layout: ["edit", "delete"]
					}
				]
			},

			// 新增、编辑配置
			upsert: {
				props: {
					width: "800px",
					"label-width": "80px"
				},

				// 表单项
				items: [
					{
						label: "昵称",
						prop: "name",
						component: {
							name: "el-input"
						},
						rules: {
							required: true,
							message: "昵称不能为空"
						}
					},
					{
						label: "期限",
						prop: "endTime",
						component: {
							name: "el-date-picker",
							props: {
								type: "datetime",
								"format-value": "yyyy-MM-dd HH:mm:ss"
							}
						}
					}
				]
			}
		};
	},

	methods: {
		onLoad({ ctx, app }) {
			ctx.service({
				page() {
					return Promise.resolve([
						{
							id: 1,
							name: "刘一",
							endTime: "2019年09月02日"
						},
						{
							id: 2,
							name: "陈二",
							endTime: "2019年09月05日"
						},
						{
							id: 3,
							name: "张三",
							endTime: "2019年09月12日"
						}
					]);
				}
			}).done();

			app.refresh({
				prop: "endTime",
				order: "desc"
			});
		}
	}
};