1.1.0 • Published 3 years ago
@codser/crud v1.1.0
@codser/crud
- 基于ElementUI 表单增删改查组件
使用方式
安装ElementUI（已安装跳过）
npm i element-ui -S
yarn add element-ui引入ElementUI（已引入跳过）
// 全局引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 更多参考官方文档[https://element.eleme.cn/#/zh-CN/component/quickstart]安装该组件
yarn add @codser/crud
npm install @codser/crud --save引入
import CRUD from '@codser/crud';
Vue.use(CRUD)使用
<!--详情查看examples/App.vue,examples/main.js-->
<template>
<div id="app" class="container">
<CodserCrudList
:query="list.query"
:add="list.add"
:refresh="list.refresh"
@handle="handle"
:list="list.list"
>
<template slot="queryExt" slot-scope="{ query }">
<el-input
v-model="query.a"
clearable
placeholder="输入A"
style="width: 200px"
class="query-item"
@keyup.enter.native="getDatas"
/>
<el-input
v-model="query.b"
clearable
placeholder="输入B"
style="width: 200px"
class="query-item"
@keyup.enter.native="getDatas"
/>
</template>
<el-tag slot="etc_id" slot-scope="scope">{{
scope.row.name + scope.row.tag
}}</el-tag>
<el-tag slot="etc_tag" slot-scope="scope">{{
scope.row.name + scope.row.tag
}}</el-tag>
<!-- <span slot="newExt"> - </span> -->
<!-- <span slot="rowOptExt" slot-scope="{ row }">
<el-button style="margin-left:10px" @click="vvv(row)">作废</el-button>
</span> -->
</CodserCrudList>
<!--详情-st-->
<CodserCrudDetailFormModal
v-if="detail.show"
:modal="detail.modal"
:rowData="detail.rowData"
:showData="detail.showData"
:desc="detail.desc"
@closeHandle="detail.close"
>
<el-tag slot="edi_tag" slot-scope="{ row, data }">{{ data }}</el-tag>
</CodserCrudDetailFormModal>
<!--详情-ed-->
<!--编辑-st-->
<CodserCrudEditFormModal
v-if="edit.show"
:modals="edit.modals"
:type="edit.type"
:editRowData="edit.editRowData"
:submitDataKeys="edit.submitDataKeys"
:submitMethods="edit.submitMethods"
:formModel="edit.formModel"
@closeHandle="edit.close"
>
<template slot-scope="{ form }">
<el-form-item
label="名称"
prop="name"
:rules="[
{
required: true,
message: '请填写名称',
trigger: 'blur',
},
]"
>
<el-input v-model="form.model['name']" placeholder="名称" />
</el-form-item>
<el-form-item
label="标签"
prop="tag"
:rules="[
{
required: true,
message: '请填写标签',
trigger: 'blur',
},
]"
>
<el-input v-model="form.model['tag']" placeholder="标签" />
</el-form-item>
</template>
</CodserCrudEditFormModal>
<!--编辑-ed-->
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
list: { // 列表数据
query: { // 查询参数
show: true, // 是否显示查询
model: { // 查询表单数据
a: "",
b: "",
},
},
add: { // 是否显示新建按钮
show: true,
},
refresh: { // 是否显示刷新按钮
show: true,
},
list: { // 列表参数
loading: false, // 是否加载列表数据
pageSize: 2, // 每页数据大小
total: 13, // 数据总数【组件按照这个分页】
isOpt: true, // 是否显示表格操作列
isRowDetail: (row)=>{
return row.createBy=='root'
}, // 是否显示详情按钮
isRowEdit: ()=>{
return true
}, // 是否显示编辑按钮
isRowRemove: ()=>{
return false
}, // 是否显示删除按钮
data: [], // 数据
props: [ // 显示数据属性
{
label: "ID", // 显示数据字段名称
prop: "id", // 显示数据字段属性名
ext: true, // 是否扩展自定义 [<el-tag slot="etc_该字段属性名prop" slot-scope="scope：行数据">{{scope.row.name + scope.row.tag}}</el-tag>]
},
{
label: "名称",
prop: "name",
},
{
label: "标签",
prop: "tag",
ext: true,
},
{
label: "创建者",
prop: "createBy"
},
],
},
},
// 详情参数
detail: {
modal: {
title: "测试详情", // 标题
},
rowData: {}, // 详情行数据
showData: [
// 需要查看的详情列表说明
{
label: "ID", // 字段中文名称
prop: "id", // 字段英文名称
span: 3, // 字段合并列数
},
{
label: "名称",
prop: "name",
span: 3,
},
{
label: "标签",
prop: "tag",
span: 3,
ext: true, // 是否扩展自定义该列[<el-tag slot="edi_tag" slot-scope="{ row:showData的item, data：该数据的数据 }">{{ data }}</el-tag>]
},
{
label: "创建者",
prop: "createBy",
span: 3,
},
],
desc: {
column: 3, // 详情显示列表
},
show: false, // 是否显示详情对话框
close: () => {
// 详情对话框关闭事件
this.detail.show = false;
},
},
// 编辑参数
edit: {
show: false, // 是否显示编辑对话框
modals: {
title: "新建表单测试", // 编辑对话框名称
},
type: "add", // 是添加还是编辑
editRowData: {}, // 编辑行数据
submitDataKeys: [], // 编辑提交时除编辑表单外的数据，如：主键id
formModel: {
// 编辑表单对象
name: "",
tag: "",
},
close: (isLoad = false) => {
// 编辑对话框关闭事件
this.edit.show = false;
isLoad &&
this.handle({
type: "get",
params: {},
});
},
submitMethods: {
// 提交方法
add: (p) => {
// 添加提交方法：p为添加提交的表单数据
console.warn("添加表单：提交前拦截:", p);
return new Promise((resolve) => {
resolve("");
});
},
alter: (p) => {
// 修改提交方法：p为编辑提交的表单数据
console.warn("编辑表单：提交前拦截:", p);
return new Promise((resolve) => {
resolve("");
});
},
},
},
};
},
methods: {
// list列表处理器
handle({ type, params }) {
if (type == "get") {
// 获取数据
this.list.list.loading = true;
console.warn("get:", params);
setTimeout(() => {
this.list.list.data = [
{
id: "123456",
name: "测试",
tag: "0",
createBy:'root'
},
{
id: "123456",
name: "测试",
tag: "0",
createBy:'gaoshuai'
},
{
id: "8888",
name: "测试2",
tag: "1",
createBy:'zhangsan'
},
];
this.list.list.total = 23;
this.list.list.loading = false;
}, 2000);
}
if (type == "remove") {
// 删除行数据
let idx = (this.list.list.data || [])
.map((item) => item.id)
.indexOf(params.id);
if (idx != -1) {
this.list.list.data.splice(idx, 1);
}
}
if (type == "detail") {
// 详情行数据
this.detail.rowData = params;
this.detail.show = true;
}
if (type == "add") {
// 添加行数据
this.edit.type = "add";
this.edit.modals.title = "新建";
this.edit.show = true;
}
if (type == "edit") {
// 编辑行数据
this.edit.type = "alter";
this.edit.modals.title = "编辑";
this.edit.editRowData = JSON.parse(JSON.stringify(params));
this.edit.submitDataKeys = ["id"];
this.edit.show = true;
}
},
},
};
</script>
<style scoped>
.container {
padding: 20px;
}
</style>