Skip to content

Commit b01d47a

Browse files
zqzhan@kaikeba.comxianweics
zqzhan@kaikeba.com
authored and
xianweics
committed
feat: search table
1 parent 38d476e commit b01d47a

5 files changed

Lines changed: 159 additions & 26 deletions

File tree

‎examples/vue-demo/src/views/TableDemo.vue‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
<template>
22
<div>
3-
<v-table :request='request' :columns='columns' :title='title' :batchToolbar='batchToolbar'></v-table>
3+
<v-table :request='request' :columns='columns' :title='title' :batchToolbar='batchToolbar' :searchConfigs='searchConfigs'></v-table>
44
</div>
55
</template>
66

77
<script lang="ts">
88
import { defineComponent } from 'vue';
99
import axios from 'axios';
10-
import { ICrud, ICrudToolbarTypeEnum } from '@fe-code/vue/components/CrudTypes';
10+
import {
11+
ICrud,
12+
ICrudToolbarTypeEnum,
13+
ICurdFromItemTypeEnum,
14+
} from '@fe-code/vue/components/CrudTypes';
1115
1216
const apiConfig = {
1317
add: '/api/json/add',
@@ -64,6 +68,40 @@ export default defineComponent({
6468
}),
6569
},
6670
],
71+
searchConfigs: [
72+
{
73+
type: ICurdFromItemTypeEnum.Input,
74+
label: '审批人',
75+
value: '',
76+
prop: 'user',
77+
placeholder: '审批人',
78+
},
79+
{
80+
type: ICurdFromItemTypeEnum.Select,
81+
label: '活动区域',
82+
value: '',
83+
prop: 'region',
84+
placeholder: '活动区域',
85+
data: [
86+
{
87+
label: '上海',
88+
value: 'shanghai',
89+
},
90+
{
91+
label: '北京',
92+
value: 'beijing',
93+
},
94+
],
95+
},
96+
// {
97+
// type: ICurdFromItemTypeEnum.Picker,
98+
// label: '日期',
99+
// value: '',
100+
// prop: 'data',
101+
// placeholder: '请选择日期',
102+
// dataType: 'data',
103+
// },
104+
],
67105
};
68106
return {
69107
...demoTable,

‎lib/vue/components/CrudTypes.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ export interface ICrud<P = unknown, R = unknown> {
1111

1212
/** 字段属性 */
1313
columns: ICrudColumn[];
14+
15+
/** 搜索 */
16+
searchConfigs: ISearch[];
1417
}
1518

1619
/** 列表数据请求 Promise */
@@ -47,6 +50,13 @@ export enum ICrudToolbarTypeEnum {
4750
DeleteBatch = 'deleteBatch',
4851
}
4952

53+
/** form item 类型 */
54+
export enum ICurdFromItemTypeEnum {
55+
Input = 'input',
56+
Select = 'select',
57+
Picker = 'picker',
58+
}
59+
5060
/** 操作按钮定义 */
5161
export type ICrudToolbar<T = unknown> = {
5262
className?: string;
@@ -64,3 +74,13 @@ export type ICrudToolbar<T = unknown> = {
6474
/** 覆盖渲染，优先级最高，覆盖 ToolbarType 内部定义方法 */
6575
render?: (row?: T | T[], index?: (string | number)[] | number) => any;
6676
};
77+
78+
export type ISearch = {
79+
type: string;
80+
label: string;
81+
value: string;
82+
prop: string;
83+
placeholder: string;
84+
dataType?: string;
85+
data?: Array<any>;
86+
};

‎lib/vue/components/Table/index.vue‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<ToolBar :batchToolbar='batchToolbar' :selectRows='selectRows' :setLoading='setLoading' :clearSelection='clearSelection' :columns='columns'></ToolBar>
3+
<ToolBar :batchToolbar='batchToolbar' :selectRows='selectRows' :setLoading='setLoading' :clearSelection='clearSelection' :columns='columns' :searchConfigs='searchConfigs'></ToolBar>
44

55
<el-table :data='tableData' style='width: 100%' v-loading='loading' @selection-change='handleSelectionChange' ref='multipleTable'>
66
<el-table-column type='selection' width='55'></el-table-column>
@@ -23,7 +23,7 @@
2323
<script lang="ts">
2424
import { defineComponent, ComponentOptions, PropType } from 'vue';
2525
import ToolBar from '../ToolBar/index.vue';
26-
import { ICrudColumn, ICrudColumnToolbar, ICrudListRequest } from '../CrudTypes';
26+
import { ICrudColumn, ICrudColumnToolbar, ICrudListRequest, ISearch } from '../CrudTypes';
2727
2828
interface IData {
2929
/** 列表总数 */
@@ -43,6 +43,7 @@ const Tabel = defineComponent({
4343
request: Function as PropType<ICrudListRequest<unknown, unknown>>,
4444
columns: Array as PropType<ICrudColumn[]>,
4545
batchToolbar: Array as PropType<ICrudColumnToolbar[]>,
46+
searchConfigs: Array as PropType<ISearch[]>,
4647
},
4748
components: {
4849
ToolBar,
@@ -58,19 +59,23 @@ const Tabel = defineComponent({
5859
};
5960
},
6061
async mounted() {
61-
console.log(this.columns);
62+
// console.log(this.columns);
6263
6364
this.getList();
6465
},
6566
methods: {
67+
searcCb(values) {
68+
this.getList(values);
69+
},
6670
setLoading(flag: boolean) {
6771
this.loading = flag;
6872
},
69-
async getList() {
73+
async getList(params = {}) {
7074
this.setLoading(true);
7175
const res = await this.request({
7276
pageSize: this.pageSize,
7377
current: this.current,
78+
params,
7479
});
7580
const { code, data, total } = res.data;
7681
if (code == 1) {

‎lib/vue/components/ToolBar/filterSearch.vue‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<div class='filter-search'>
3+
<el-form :inline='true' :model='form' size='small' ref='form' class='demo-form-form'>
4+
<el-form-item v-for='item in searchConfigs' :key='item.prop' :prop='item.prop' :label='item.label'>
5+
<el-input v-if='item.type === Input' v-model='item.value' :placeholder='item.placeholder' />
6+
<el-select v-if='item.type === Select' v-model='item.value' :placeholder='item.placeholder'>
7+
<el-option v-for='o in item.data' :key='o.value' :label='o.label' :value='o.value' />
8+
</el-select>
9+
<el-date-picker v-if='item.type === Picker' :type='item.dataType' v-model='item.value' :placeholder='item.placeholder' />
10+
</el-form-item>
11+
<el-form-item>
12+
<el-button type='primary' @click='onSubmit("form")'>查询</el-button>
13+
<el-button @click='resetForm("form")'>重置</el-button>
14+
</el-form-item>
15+
</el-form>
16+
</div>
17+
</template>
18+
19+
<script lang='ts'>
20+
import { defineComponent, ComponentOptions, PropType } from 'vue';
21+
import { ISearch, ICurdFromItemTypeEnum } from '../CrudTypes';
22+
23+
const FilterSearch = defineComponent({
24+
name: 'filterSearch',
25+
setup() {},
26+
props: {
27+
searchConfigs: Array as PropType<ISearch[]>,
28+
},
29+
data() {
30+
return {
31+
...ICurdFromItemTypeEnum,
32+
};
33+
},
34+
created() {
35+
// console.log('343434', this.searchConfigs);
36+
},
37+
methods: {
38+
onSubmit(formName) {
39+
const values = this.searchConfigs.reduce((prev, { prop, value }) => {
40+
prev[prop] = value;
41+
return prev;
42+
}, {});
43+
this?.$parent?.$parent?.searcCb?.(values);
44+
},
45+
resetForm(formName) {
46+
this.$refs[formName].resetFields();
47+
this?.$parent?.$parent?.searcCb?.();
48+
},
49+
},
50+
});
51+
52+
FilterSearch.install = (Vue: ComponentOptions) => {
53+
Vue.component(FilterSearch.name, FilterSearch);
54+
};
55+
export default FilterSearch;
56+
</script>
57+
58+
<style lang="scss" scoped>
59+
.filter-search {
60+
text-align: left;
61+
}
62+
</style>

‎lib/vue/components/ToolBar/index.vue‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,35 @@
11
<template>
2-
<div class='toolBarWrap'>
3-
<div v-for='(item, index) in batchToolbar' :key='index' class='toolBarItem'>
4-
<el-button v-if='!item.render' :type='item.type' :plain='item.plain' @click='btnClick(item)'>{{item.label}}</el-button>
5-
</div>
2+
<div>
3+
<filter-search :searchConfigs='searchConfigs' />
4+
<div class='toolBarWrap'>
5+
<div v-for='(item, index) in batchToolbar' :key='index' class='toolBarItem'>
6+
<el-button v-if='!item.render' :type='item.type' :plain='item.plain' @click='btnClick(item)'>{{item.label}}</el-button>
7+
</div>
68

7-
<el-dialog :title='dialogTitle' v-model='dialogFormVisible' destroy-on-close :before-close='beforeCloseDialog'>
8-
<el-form :model='form' ref='formRef'>
9-
<el-form-item :label='column.title' v-for='(column,index) in columns' :key='index' :prop='column.dataIndex'>
10-
<el-input v-model='form[column.dataIndex]' autocomplete='off'></el-input>
11-
</el-form-item>
9+
<el-dialog :title='dialogTitle' v-model='dialogFormVisible' destroy-on-close :before-close='beforeCloseDialog'>
10+
<el-form :model='form' ref='formRef'>
11+
<el-form-item :label='column.title' v-for='(column,index) in columns' :key='index' :prop='column.dataIndex'>
12+
<el-input v-model='form[column.dataIndex]' autocomplete='off'></el-input>
13+
</el-form-item>
1214

13-
<!-- <el-select v-model='form.region' placeholder='请选择活动区域'>
14-
<el-option label='区域一' value='shanghai'></el-option>
15-
<el-option label='区域二' value='beijing'></el-option>
16-
</el-select>-->
17-
</el-form>
18-
<div slot='footer' class='dialog-footer'>
19-
<el-button @click='clickDialogCancel'>取 消</el-button>
20-
<el-button type='primary' @click='clickDialogOk()'>确 定</el-button>
21-
</div>
22-
</el-dialog>
15+
<!-- <el-select v-model='form.region' placeholder='请选择活动区域'>
16+
<el-option label='区域一' value='shanghai'></el-option>
17+
<el-option label='区域二' value='beijing'></el-option>
18+
</el-select>-->
19+
</el-form>
20+
<div slot='footer' class='dialog-footer'>
21+
<el-button @click='clickDialogCancel'>取 消</el-button>
22+
<el-button type='primary' @click='clickDialogOk()'>确 定</el-button>
23+
</div>
24+
</el-dialog>
25+
</div>
2326
</div>
2427
</template>
2528

2629
<script lang="ts">
2730
import { defineComponent, ComponentOptions, PropType } from 'vue';
28-
import { ICrudColumn, ICrudColumnToolbar, ICrudToolbarTypeEnum } from '../CrudTypes';
31+
import { ICrudColumn, ICrudColumnToolbar, ICrudToolbarTypeEnum, ISearch } from '../CrudTypes';
32+
import FilterSearch from './filterSearch.vue';
2933
3034
type SetLoadingFn = (flag: boolean) => void;
3135
@@ -40,12 +44,16 @@ interface IToolBarData {
4044
4145
const ToolBar = defineComponent({
4246
name: 'toolbar',
47+
components: {
48+
FilterSearch,
49+
},
4350
props: {
4451
batchToolbar: Array as PropType<ICrudColumnToolbar[]>,
4552
selectRows: Array as PropType<unknown[]>,
4653
setLoading: Function as PropType<SetLoadingFn>,
4754
clearSelection: Function,
4855
columns: Array as PropType<ICrudColumn[]>,
56+
searchConfigs: Array as PropType<ISearch[]>,
4957
},
5058
data(): IToolBarData {
5159
return {

0 commit comments

Comments
 (0)