Skip to content

Commit

Permalink
fix: 优化一些参数
Browse files Browse the repository at this point in the history
  • Loading branch information
@pcloth
pcloth committed Jun 4, 2024
1 parent f9360fa commit 1ae0a21
Show file tree
Hide file tree
Showing 4 changed files with 173 additions and 25 deletions.
142 changes: 142 additions & 0 deletions examples/docs/zh-CN/component/IPage.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
## 介绍

这是一个集成了增删改查的一个标准页面封装，为了更快速的交付业务。

:::demo 搜索组件是一个对el-form表单的封装，所有的输入单元和按钮都是`RenderCell`组件
```html
<template>
<IPage
v-bind="ipageProps"
/>
</template>
<script>
export default {
data(){
return {
ipageProps:{
searchProps:{
queryFunc:this.queryFunc
},
searchItems:[
{
id:'name',
label:'姓名',
props:{
placeholder:"请输入姓名"
},
},
{
id:'gender',
label:'性别',
slot:'select',
props:{
placeholder:"请选择性别"
},
options:[
{
label:'男',
value:1
},
{
label:'女',
value:2
},
{
label:'保密',
value:3,
disabled:true
}
]
},
],
columns:[
{
columnProps:{
prop:'name',
label:'姓名'
}
},
{
columnProps:{
prop:'gender',
label:'性别',
formatter:(val)=>{
return {
1:'男',
2:'女',
3:'保密'
}[val.gender]
}
}
}
],
formItems:[
{
id:'name',
label:'姓名',
slot:'input',
props:{
placeholder:"请输入姓名"
},
},
{
id:'gender',
label:'性别',
slot:'select',
props:{
placeholder:"请选择性别"
},
options:[
{
label:'男',
value:1
},
{
label:'女',
value:2
},
{
label:'保密',
value:3,
}
]
},
],
deleteFunc:async (data)=>{
// 发起删除请求
return true
},
formProps:{
submitFunc:async (data)=>{
// 发起保存请求
return true
}
}
}
}
},
methods:{
async queryFunc(params){
return new Promise((resolve, reject) => {
const records = []
for(let i=0;i<10;i++){
records.push({
name:'张三',
gender:(i%2)+1,
})
}
setTimeout(()=>{
resolve({
data:{
records
},
total:records.length
})
},1500)
})
},
}
}
</script>
```
4 changes: 2 additions & 2 deletions src/lib/IForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,15 +155,14 @@ export default {
watch:{
value:{
handler(){
// console.log('watch',JSON.stringify(this.value))
// console.log('watch form',JSON.stringify(this.value))
this.form = this.value
this.clearValidate()
},
deep:true
},
form(val){
this.$emit('input',val)
// console.log('watch from',JSON.stringify(val))
}
},
computed:{
Expand Down Expand Up @@ -218,6 +217,7 @@ export default {
}else{
this.handleSubmit = this._handleSubmit
}
window.tt = this;
},
methods:{
initOptions(){
Expand Down
49 changes: 27 additions & 22 deletions src/lib/IPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
</slot>
<slot name="pagination">
<el-pagination class="pagination" :class="paginationClass" :total="total" :current-page="filterQData.pageNo" :page-size="filterQData.pageSize"
@current-change="pageChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]"
@current-change="pageChange" @size-change="handleSizeChange"
v-bind="mergePaginationProps"></el-pagination>
</slot>
</div>
Expand Down Expand Up @@ -128,6 +128,11 @@ export default {
type: Boolean,
default: true,
},
/** 是否显示字段隐藏控制器 */
showColumnFilter: {
type: Boolean,
default: true,
},
// 支持renderCell组件参数格式
columnButtons: {
type: Array,
Expand Down Expand Up @@ -219,16 +224,16 @@ export default {
// 新增表单打开前接口
befoceAddOpenFunc: {
type: Function,
default: () => {
return Promise.resolve({});
},
// default: (loadData) => {
// return Promise.resolve({...loadData.data});
// },
},
// 编辑表单打开前接口
befoceEditOpenFunc: {
type: Function,
default: (loadData) => {
return Promise.resolve({...loadData.data});
},
// default: (loadData) => {
// return Promise.resolve({...loadData.data});
// },
},
deleteButton: {
type: [Object, Boolean],
Expand Down Expand Up @@ -260,7 +265,7 @@ export default {
formData: {},
formLoading: false,
showDialog: false,
currentRow: null,
currentRow: {},
dialogType: '',
dialogTitle: '',
dialogProps_: {},
Expand Down Expand Up @@ -355,21 +360,21 @@ export default {
const props_ = deepAssign($c.get('columnButtonProps'), this.columnButtonProps);
mergeColumns.push({
...props_,
// todo 制作筛选功能
/** */
slots:{
/** 筛选可见字段功能 */
header:(data,loadData)=>{
// todo 这里制作筛选功能
return <div class="IPage_toolBar">
let className = 'IPage_toolBar'
return <div class={className}>
<span>{props_.columnProps.label}</span>
<ITableColFilter
value={this.showColumnKeys}
onChangeFilter={(val)=>{
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.showColumnKeys = val
}}
allItems={loadData.allItems}
loadData={loadData}></ITableColFilter>
{this.showColumnFilter?<ITableColFilter
value={this.showColumnKeys}
onChangeFilter={(val)=>{
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.showColumnKeys = val
}}
allItems={loadData.allItems}
loadData={loadData}/>:null}
</div>
}
},
Expand Down Expand Up @@ -490,7 +495,7 @@ export default {
this.formLoading = false;
}
} else {
this.currentRow = loadData.data;
this.currentRow = {...loadData.data};
this.showDialog = true;
}
this.$nextTick(() => {
Expand Down Expand Up @@ -657,6 +662,6 @@ export default {
.IPage_toolBar {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: space-between;
}
</style>
3 changes: 2 additions & 1 deletion src/lib/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ export const config = {
},
/** 默认的el-pagination 组件的参数，直接传递给el-pagination */
paginationProps:{
layout:"total, sizes, prev, pager, next, jumper"
layout:"total, sizes, prev, pager, next, jumper",
pageSizes:[10, 20, 50, 100]
},
/** 默认toolbar上的RenderCell组件数据 */
toolbarButton:{
Expand Down

0 comments on commit 1ae0a21

Please sign in to comment.