vue3 重构：增加操作栏、搜索栏

src/components/Pagination/index.vue

+<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>

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']

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) // 列表的加载中