page.md
8.59 KB
Mixin Page 标准页
常规分页逻辑的混入配置
6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/develop/mixin/page.md#">基础用法
MIX_PAGE混入配置项，会默认提供一套分页查询的业务逻辑。
::: snippet 预置了许多业务逻辑，避免重复维护相同的业务逻辑
<template>
<div>
<div class="page-search">
<el-form :model="searchModel" label-width="80px" size="small">
<el-row>
<el-col :span="6">
<el-form-item label="姓名">
<el-input v-model.trim="searchModel.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="18" style="text-align: right;">
<el-form-item>
<el-button-group>
<el-button :loading="loading" type="primary" @click="onSearch">查询</el-button>
<el-button @click="onReset">重置</el-button>
</el-button-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="page-action">
<el-button type="primary" size="small">新增</el-button>
</div>
<el-table class="page-table" v-loading="loading" v-bind="tableProps" :data="tableData">
<el-table-column label="姓名" prop="name" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column label="年龄" prop="age" min-width="120" show-overflow-tooltip></el-table-column>
</el-table>
<el-pagination class="page-pagination" v-bind="paginationProps" v-on="paginationEvent"></el-pagination>
</div>
</template>
<script>
// import MIX_PAGE from '@/mixins/page'; 注：使用时解除此注释
export default {
mixins: [MIX_PAGE],
data() {
return {
searchModel: {
name: '',
},
tableData: [
{ id: '0', name: '李饼', age: 32 },
{ id: '1', name: '陈拾', age: 20 },
],
};
},
};
</script>
:::
6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/develop/mixin/page.md#">推荐用法
与eagle-form、eagle-table等组件配合，可以最大限度的减少代码量，开发者只需要重点关心与业务相关的数据渲染
::: snippet MIX_PAGE混入配置项，会默认提供一套分页查询的业务逻辑。
<template>
<div>
<div class="page-search">
<eagle-form :model="searchModel" label-width="80px" size="small" span="6">
<eagle-form-item label="姓名" prop="name">
<el-input v-model="searchModel.name"></el-input>
</eagle-form-item>
<eagle-form-item span="18" style="text-align: right">
<el-button-group>
<el-button :loading="loading" type="primary" @click="onSearch">查询</el-button>
<el-button @click="onReset">重置</el-button>
</el-button-group>
</eagle-form-item>
</eagle-form>
</div>
<div class="page-action">
<el-button type="primary" size="small">新增</el-button>
</div>
<eagle-table class="page-table" v-loading="loading" v-bind="tableProps">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</eagle-table>
<el-pagination class="page-pagination" v-bind="paginationProps" v-on="paginationEvent"></el-pagination>
</div>
</template>
<script>
// import MIX_PAGE from '@/mixins/page'; 注：使用时解除此注释
export default {
mixins: [MIX_PAGE],
data() {
return {
auto: true,
searchModel: {
name: '',
},
};
},
methods: {
searchAPI(params) {
return new Promise(resolve => {
setTimeout(() => {
const source = [
{ id: '0', name: '李饼', age: 32 },
{ id: '1', name: '陈拾', age: 20 },
{ id: '3', name: '王七', age: 26 },
{ id: '4', name: '崔倍', age: 27 },
{ id: '5', name: '孙豹', age: 38 },
{ id: '6', name: '庞柏', age: 42 },
{ id: '7', name: '蔡疏', age: 60 },
{ id: '8', name: '卢纳', age: 55 },
];
const list = source.filter(item => `${item.name}`.includes(params.name));
resolve({
result: list,
totalCount: list.length
});
}, 500);
});
},
},
};
</script>
:::
6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/develop/mixin/page.md#">弹出框表单
常用的弹出框表单提交示例
::: snippet 新增修改共用表单示例
<template>
<div>
<div class="page-search">
<eagle-form :model="searchModel" label-width="80px" size="small" span="6">
<eagle-form-item label="姓名" prop="name">
<el-input v-model="searchModel.name"></el-input>
</eagle-form-item>
<eagle-form-item span="18" style="text-align: right">
<el-button-group>
<el-button :loading="loading" type="primary" @click="onSearch">查询</el-button>
<el-button @click="onReset">重置</el-button>
</el-button-group>
</eagle-form-item>
</eagle-form>
</div>
<div class="page-action">
<el-button type="primary" size="small" @click="openNew">新增</el-button>
</div>
<eagle-table class="page-table" v-loading="loading" v-bind="tableProps">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="操作" width="80">
<template #default="{ row, $index }">
<el-button size="mini" type="text" title="编辑" @click="openEdit({ row, index: $index })">编辑</el-button>
</template>
</el-table-column>
</eagle-table>
<el-pagination class="page-pagination" v-bind="paginationProps" v-on="paginationEvent"></el-pagination>
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="400px" @closed="resetForm">
<eagle-form ref="form" :model="form" :rules="formRules" label-width="60px" size="small">
<eagle-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</eagle-form-item>
<eagle-form-item label="年龄" prop="age">
<el-input v-model="form.age"></el-input>
</eagle-form-item>
<eagle-form-item>
<el-button type="primary" :loading="submitting" @click="onSubmit">确定</el-button>
<el-button @click="onCancel">取消</el-button>
</eagle-form-item>
</eagle-form>
</el-dialog>
</div>
</template>
<script>
// import MIX_PAGE from '@/mixins/page'; 注：使用时解除此注释
export default {
mixins: [MIX_PAGE],
data() {
return {
auto: true,
searchModel: {
name: '',
},
form: {
id: '',
name: '',
age: '',
},
formRules: {
name: [{ required: true, message: '请输入姓名' }]
},
dialogVisible: false,
dialogMode: 'new',
};
},
computed: {
dialogTitle() {
return this.dialogMode === 'edit' ? '编辑' : '新增';
}
},
methods: {
searchAPI(params) {
return new Promise(resolve => {
setTimeout(() => {
const source = [
{ id: '0', name: '李饼', age: 32 },
{ id: '1', name: '陈拾', age: 20 },
{ id: '3', name: '王七', age: 26 },
{ id: '4', name: '崔倍', age: 27 },
{ id: '5', name: '孙豹', age: 38 },
{ id: '6', name: '庞柏', age: 42 },
{ id: '7', name: '蔡疏', age: 60 },
{ id: '8', name: '卢纳', age: 55 },
];
const list = source.filter(item => `${item.name}`.includes(params.name));
resolve({
result: list,
totalCount: list.length
});
}, 300);
});
},
openNew() {
this.dialogMode = 'new';
this.dialogVisible = true;
},
openEdit({ row }) {
this.dialogMode = 'edit';
this.form = this.cloneDeep(row);
this.dialogVisible = true;
},
onSubmit() {
this.$refs.form.validate(valid => {
if (valid) {
let data = this.cloneDeep(this.form);
if (this.dialogMode === 'new') {
delete data.id;
console.log('新增提交：', data);
} else if (this.dialogMode === 'edit') {
console.log('修改提交：', data);
}
this.submitting = true;
setTimeout(() => {
this.submitting = false;
this.dialogVisible = false;
this.search();
}, 1500);
}
});
},
onCancel() {
this.dialogVisible = false;
},
resetForm() {
this.form = this.getOriginData().form;
this.$refs.form.resetFields();
}
},
};
</script>
:::
6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/develop/mixin/page.md#">内置方法
本配置中，已经混入了MIX_ORIGIN，内置了originData对象和getOriginData方法。