Skip to content

Commit 4c47ca9

Browse files
YunaiVYunaiV
committed
vue3 重构：增加操作栏、搜索栏
1 parent ee9474f commit 4c47ca9

File tree

3 files changed

+177
-1
lines changed

3 files changed

+177
-1
lines changed

‎src/components/Pagination/index.vue

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<div :class="{ 'hidden': hidden }" class="pagination-container">
3+
<el-pagination
4+
:background="background"
5+
v-model:current-page="currentPage"
6+
v-model:page-size="pageSize"
7+
:layout="layout"
8+
:page-sizes="pageSizes"
9+
:pager-count="pagerCount"
10+
:total="total"
11+
@size-change="handleSizeChange"
12+
@current-change="handleCurrentChange"
13+
/>
14+
</div>
15+
</template>
16+
17+
<script setup>
18+
// TODO 芋艿：ts 重写
19+
// TODO 芋艿：scrollTo 接入
20+
// import { scrollTo } from '@/utils/scroll-to'
21+
22+
const props = defineProps({
23+
total: {
24+
required: true,
25+
type: Number
26+
},
27+
page: {
28+
type: Number,
29+
default: 1
30+
},
31+
limit: {
32+
type: Number,
33+
default: 20
34+
},
35+
pageSizes: {
36+
type: Array,
37+
default() {
38+
return [10, 20, 30, 50]
39+
}
40+
},
41+
// 移动端页码按钮的数量端默认值5
42+
pagerCount: {
43+
type: Number,
44+
default: document.body.clientWidth < 992 ? 5 : 7
45+
},
46+
layout: {
47+
type: String,
48+
default: 'total, sizes, prev, pager, next, jumper'
49+
},
50+
background: {
51+
type: Boolean,
52+
default: true
53+
},
54+
autoScroll: {
55+
type: Boolean,
56+
default: true
57+
},
58+
hidden: {
59+
type: Boolean,
60+
default: false
61+
}
62+
})
63+
64+
const emit = defineEmits();
65+
const currentPage = computed({
66+
get() {
67+
return props.page
68+
},
69+
set(val) {
70+
emit('update:page', val)
71+
}
72+
})
73+
const pageSize = computed({
74+
get() {
75+
return props.limit
76+
},
77+
set(val){
78+
emit('update:limit', val)
79+
}
80+
})
81+
function handleSizeChange(val) {
82+
if (currentPage.value * val > props.total) {
83+
currentPage.value = 1
84+
}
85+
emit('pagination', { page: currentPage.value, limit: val })
86+
if (props.autoScroll) {
87+
// scrollTo(0, 800)
88+
}
89+
}
90+
function handleCurrentChange(val) {
91+
emit('pagination', { page: val, limit: pageSize.value })
92+
if (props.autoScroll) {
93+
// scrollTo(0, 800)
94+
}
95+
}
96+
97+
</script>
98+
99+
<style scoped>
100+
.pagination-container {
101+
background: #fff;
102+
padding: 32px 16px;
103+
}
104+
.pagination-container.hidden {
105+
display: none;
106+
}
107+
</style>

‎src/types/auto-components.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ declare module '@vue/runtime-core' {
9393
ImageViewer: typeof import('./../components/ImageViewer/src/ImageViewer.vue')['default']
9494
Infotip: typeof import('./../components/Infotip/src/Infotip.vue')['default']
9595
InputPassword: typeof import('./../components/InputPassword/src/InputPassword.vue')['default']
96+
Pagination: typeof import('./../components/Pagination/index.vue')['default']
9697
ProcessDesigner: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue')['default']
9798
ProcessPalette: typeof import('./../components/bpmnProcessDesigner/package/palette/ProcessPalette.vue')['default']
9899
ProcessViewer: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessViewer.vue')['default']

‎src/views/infra/config/index.vue

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,25 +52,93 @@
5252
</el-form-item>
5353
</el-form>
5454

55+
<!-- 操作栏 -->
56+
<!-- TODO 间隔貌似有点问题 -->
57+
<el-row :gutter="10" class="mb8">
58+
<!-- TODO 芋艿，图标不对 -->
59+
<el-col :span="1.5">
60+
<el-button
61+
type="primary"
62+
plain
63+
icon="el-icon-plus"
64+
@click="handleAdd"
65+
v-hasPermi="['infra:config:create']"
66+
>
67+
新增
68+
</el-button>
69+
</el-col>
70+
<!-- TODO 芋艿，图标不对 -->
71+
<el-col :span="1.5">
72+
<el-button
73+
type="warning"
74+
icon="el-icon-download"
75+
@click="handleExport"
76+
:loading="exportLoading"
77+
v-hasPermi="['infra:config:export']"
78+
>
79+
导出
80+
</el-button>
81+
</el-col>
82+
<!-- TODO 芋艿：右侧导航 -->
83+
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
84+
</el-row>
85+
5586
<!-- 列表 -->
5687
<el-table v-loading="loading" :data="list">
5788
<el-table-column label="参数主键" align="center" prop="id" />
5889
<el-table-column label="参数分类" align="center" prop="category" />
5990
<el-table-column label="参数名称" align="center" prop="name" :show-overflow-tooltip="true" />
6091
<el-table-column label="参数键名" align="center" prop="key" :show-overflow-tooltip="true" />
6192
<el-table-column label="参数键值" align="center" prop="value" />
93+
<el-table-column label="是否可见" align="center" prop="visible">
94+
<template #default="scope">
95+
<!-- TODO 芋艿：这里 false 会不展示，实现略有问题 -->
96+
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.visible" />
97+
</template>
98+
</el-table-column>
6299
<el-table-column label="系统内置" align="center" prop="type">
63-
<template v-slot="scope">
100+
<template #default="scope">
64101
<dict-tag :type="DICT_TYPE.INFRA_CONFIG_TYPE" :value="scope.row.type" />
65102
</template>
66103
</el-table-column>
67104
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
105+
<!-- TODO 芋艿：时间写的有点复杂 -->
106+
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
107+
<template #default="scope">
108+
<!-- <span>{{ parseTime(scope.row.createTime) }}</span>-->
109+
<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
110+
</template>
111+
</el-table-column>
112+
<!-- TODO 芋艿：icon 有问题，会换行 -->
113+
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
114+
<template #default="scope">
115+
<el-button
116+
link
117+
type="primary"
118+
icon="el-icon-edit"
119+
@click="handleUpdate(scope.row)"
120+
v-hasPermi="['infra:config:update']"
121+
>
122+
修改
123+
</el-button>
124+
<el-button
125+
link
126+
type="primary"
127+
icon="el-icon-delete"
128+
@click="handleDelete(scope.row)"
129+
v-hasPermi="['infra:config:delete']"
130+
>
131+
删除
132+
</el-button>
133+
</template>
134+
</el-table-column>
68135
</el-table>
69136
</content-wrap>
70137
</template>
71138
<script setup lang="ts" name="Config">
72139
import * as ConfigApi from '@/api/infra/config'
73140
import { DICT_TYPE } from '@/utils/dict'
141+
import dayjs from 'dayjs'
74142
75143
const showSearch = ref(true) // 搜索框的是否展示
76144
const loading = ref(true) // 列表的加载中

0 commit comments

Comments
 (0)