From 4c47ca9166cdce563666d07d10bd30590bc0bdfb Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 8 Mar 2023 09:49:14 +0800
Subject: [PATCH] =?UTF-8?q?vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A=E5=A2=9E?=
=?UTF-8?q?=E5=8A=A0=E6=93=8D=E4=BD=9C=E6=A0=8F=E3=80=81=E6=90=9C=E7=B4=A2?=
=?UTF-8?q?=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Pagination/index.vue | 107 ++++++++++++++++++++++++++++
src/types/auto-components.d.ts | 1 +
src/views/infra/config/index.vue | 70 +++++++++++++++++-
3 files changed, 177 insertions(+), 1 deletion(-)
create mode 100644 src/components/Pagination/index.vue
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
new file mode 100644
index 00000000..9e950b9d
--- /dev/null
+++ b/src/components/Pagination/index.vue
@@ -0,0 +1,107 @@
+<template>
+ <div :class="{ 'hidden': hidden }" class="pagination-container">
+ <el-pagination
+ :background="background"
+ v-model:current-page="currentPage"
+ v-model:page-size="pageSize"
+ :layout="layout"
+ :page-sizes="pageSizes"
+ :pager-count="pagerCount"
+ :total="total"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+</template>
+
+<script setup>
+// TODO 芋艿：ts 重写
+// TODO 芋艿：scrollTo 接入
+// import { scrollTo } from '@/utils/scroll-to'
+
+const props = defineProps({
+ total: {
+ required: true,
+ type: Number
+ },
+ page: {
+ type: Number,
+ default: 1
+ },
+ limit: {
+ type: Number,
+ default: 20
+ },
+ pageSizes: {
+ type: Array,
+ default() {
+ return [10, 20, 30, 50]
+ }
+ },
+ // 移动端页码按钮的数量端默认值5
+ pagerCount: {
+ type: Number,
+ default: document.body.clientWidth < 992 ? 5 : 7
+ },
+ layout: {
+ type: String,
+ default: 'total, sizes, prev, pager, next, jumper'
+ },
+ background: {
+ type: Boolean,
+ default: true
+ },
+ autoScroll: {
+ type: Boolean,
+ default: true
+ },
+ hidden: {
+ type: Boolean,
+ default: false
+ }
+})
+
+const emit = defineEmits();
+const currentPage = computed({
+ get() {
+ return props.page
+ },
+ set(val) {
+ emit('update:page', val)
+ }
+})
+const pageSize = computed({
+ get() {
+ return props.limit
+ },
+ set(val){
+ emit('update:limit', val)
+ }
+})
+function handleSizeChange(val) {
+ if (currentPage.value * val > props.total) {
+ currentPage.value = 1
+ }
+ emit('pagination', { page: currentPage.value, limit: val })
+ if (props.autoScroll) {
+ // scrollTo(0, 800)
+ }
+}
+function handleCurrentChange(val) {
+ emit('pagination', { page: val, limit: pageSize.value })
+ if (props.autoScroll) {
+ // scrollTo(0, 800)
+ }
+}
+
+</script>
+
+<style scoped>
+.pagination-container {
+ background: #fff;
+ padding: 32px 16px;
+}
+.pagination-container.hidden {
+ display: none;
+}
+</style>
diff --git a/src/types/auto-components.d.ts b/src/types/auto-components.d.ts
index 96eed08d..7b10d679 100644
--- a/src/types/auto-components.d.ts
+++ b/src/types/auto-components.d.ts
@@ -93,6 +93,7 @@ declare module '@vue/runtime-core' {
ImageViewer: typeof import('./../components/ImageViewer/src/ImageViewer.vue')['default']
Infotip: typeof import('./../components/Infotip/src/Infotip.vue')['default']
InputPassword: typeof import('./../components/InputPassword/src/InputPassword.vue')['default']
+ Pagination: typeof import('./../components/Pagination/index.vue')['default']
ProcessDesigner: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue')['default']
ProcessPalette: typeof import('./../components/bpmnProcessDesigner/package/palette/ProcessPalette.vue')['default']
ProcessViewer: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessViewer.vue')['default']
diff --git a/src/views/infra/config/index.vue b/src/views/infra/config/index.vue
index 14dd5ff7..f96da368 100644
--- a/src/views/infra/config/index.vue
+++ b/src/views/infra/config/index.vue
@@ -52,6 +52,37 @@
</el-form-item>
</el-form>
+ <!-- 操作栏 -->
+ <!-- TODO 间隔貌似有点问题 -->
+ <el-row :gutter="10" class="mb8">
+ <!-- TODO 芋艿，图标不对 -->
+ <el-col :span="1.5">
+ <el-button
+ type="primary"
+ plain
+ icon="el-icon-plus"
+ @click="handleAdd"
+ v-hasPermi="['infra:config:create']"
+ >
+ 新增
+ </el-button>
+ </el-col>
+ <!-- TODO 芋艿，图标不对 -->
+ <el-col :span="1.5">
+ <el-button
+ type="warning"
+ icon="el-icon-download"
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['infra:config:export']"
+ >
+ 导出
+ </el-button>
+ </el-col>
+ <!-- TODO 芋艿：右侧导航 -->
+ <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
+ </el-row>
+
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="参数主键" align="center" prop="id" />
@@ -59,18 +90,55 @@
<el-table-column label="参数名称" align="center" prop="name" :show-overflow-tooltip="true" />
<el-table-column label="参数键名" align="center" prop="key" :show-overflow-tooltip="true" />
<el-table-column label="参数键值" align="center" prop="value" />
+ <el-table-column label="是否可见" align="center" prop="visible">
+ <template #default="scope">
+ <!-- TODO 芋艿：这里 false 会不展示，实现略有问题 -->
+ <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.visible" />
+ </template>
+ </el-table-column>
<el-table-column label="系统内置" align="center" prop="type">
- <template v-slot="scope">
+ <template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_CONFIG_TYPE" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+ <!-- TODO 芋艿：时间写的有点复杂 -->
+ <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+ <template #default="scope">
+ <!-- <span>{{ parseTime(scope.row.createTime) }}</span>-->
+ <span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+ </template>
+ </el-table-column>
+ <!-- TODO 芋艿：icon 有问题，会换行 -->
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ icon="el-icon-edit"
+ @click="handleUpdate(scope.row)"
+ v-hasPermi="['infra:config:update']"
+ >
+ 修改
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ icon="el-icon-delete"
+ @click="handleDelete(scope.row)"
+ v-hasPermi="['infra:config:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
</el-table>
</content-wrap>
</template>
<script setup lang="ts" name="Config">
import * as ConfigApi from '@/api/infra/config'
import { DICT_TYPE } from '@/utils/dict'
+import dayjs from 'dayjs'
const showSearch = ref(true) // 搜索框的是否展示
const loading = ref(true) // 列表的加载中