chore: complete

vsdeeper · Jul 24, 2024 · 0c87d7a · 0c87d7a
1 parent f26039d
commit 0c87d7a
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 19 deletions.
diff --git a/templates/vue-admin/public/mock/user-list.json b/templates/vue-admin/public/mock/user-list.json
@@ -0,0 +1,16 @@
+{
+  "code": 0,
+  "data": {
+    "list": [
+      {
+        "id": 1,
+        "name": "张三",
+        "code": "v0001"
+      }
+    ],
+    "pageIndex": 1,
+    "pageSize": 20,
+    "total": 100
+  },
+  "msg": "success"
+}
diff --git a/templates/vue-admin/src/api/system/user.ts b/templates/vue-admin/src/api/system/user.ts
@@ -0,0 +1,16 @@
+import { http } from '@/utils/http'
+import { sleep } from 'radash'
+
+export async function queryUserList(params: PagingParams) {
+  try {
+    const { data } = await http({
+      method: 'get',
+      url: '/mock/user-list.json?t=' + +new Date(),
+      params
+    })
+    await sleep(1000)
+    return data as Record<string, any>
+  } catch (error) {
+    console.error('queryUserList ->', error)
+  }
+}
diff --git a/templates/vue-admin/src/components/vs-table/vs-table.vue b/templates/vue-admin/src/components/vs-table/vs-table.vue
@@ -15,9 +15,11 @@ const props = withDefaults(
     showRowOperate?: boolean
     paginationAlign?: 'left' | 'right'
     tableOperateAlign?: 'left' | 'right'
-    columns?: VsTableColumnItem[]
-    rowOperateItems?: VsTableOperateItem[]
-    tableOperateItems?: VsTableOperateItem[]
+    total?: number
+    tableData?: Record<string, any>[]
+    tableColumns?: VsTableColumnItem[]
+    rowOperateOptions?: VsTableOperateItem[]
+    tableOperateOptions?: VsTableOperateItem[]
     currentPage?: number
     pageSize?: number
 
@@ -38,7 +40,7 @@ const props = withDefaults(
 const emit = defineEmits<{
   // 以下自定义 emit 事件
   (e: 'operate', key: string, row?: Record<string, any>): void
-  (e: 'pagination-change', val: { currentPage: number; pageSize: number }): void
+  (e: 'paging-change', val: { pageIndex: number; pageSize: number }): void
   (e: 'update:currentPage', val: number): void
   (e: 'update:pageSize', val: number): void
   // 以下 ElTable emit 事件
@@ -129,11 +131,11 @@ function onOperate(key: string, val?: any) {
 }
 
 function handleSizeChange(val: number) {
-  emit('pagination-change', { currentPage: 1, pageSize: val })
+  emit('paging-change', { pageIndex: 1, pageSize: val })
 }
 
 function handleCurrentChange(val: number) {
-  emit('pagination-change', { currentPage: val, pageSize: _pageSize.value! })
+  emit('paging-change', { pageIndex: val, pageSize: _pageSize.value! })
 }
 
 // 以下 ElTable Expose
@@ -207,10 +209,10 @@ defineExpose({
 </script>
 
 <template>
-  <div v-loading="loading" class="vs-table">
-    <div v-if="tableOperateItems?.length" :class="['table-operate', tableOperateAlign]">
+  <div class="vs-table">
+    <div v-if="tableOperateOptions?.length" :class="['table-operate', tableOperateAlign]">
       <template
-        v-for="(item, index) in tableOperateItems"
+        v-for="(item, index) in tableOperateOptions"
         :key="`tableOperateItem${item.value}${index}`"
       >
         <el-popconfirm
@@ -235,7 +237,13 @@ defineExpose({
         </template>
       </template>
     </div>
-    <el-table v-if="columns?.length" ref="tableRef" v-bind="tableProps">
+    <el-table
+      v-if="tableColumns?.length"
+      v-loading="loading"
+      ref="tableRef"
+      :data="tableData"
+      v-bind="tableProps"
+    >
       <template #append="scope">
         <slot name="append" v-bind="scope"></slot>
       </template>
@@ -244,11 +252,15 @@ defineExpose({
       </template>
       <el-table-column v-if="showSelection" type="selection" fixed="left" width="55" />
       <el-table-column v-if="showIndex" type="index" width="50" :index="(index) => index + 1" />
-      <TableColumn v-for="(col, index) in columns" :key="`${col.label}${col.prop}${index}`" :col>
-        <template v-for="slot in getSlots(columns)" #[slot]="scope">
+      <TableColumn
+        v-for="(col, index) in tableColumns"
+        :key="`${col.label}${col.prop}${index}`"
+        :col
+      >
+        <template v-for="slot in getSlots(tableColumns)" #[slot]="scope">
           <slot :name="slot" v-bind="scope" />
         </template>
-        <template v-for="slot in getSlots(columns).map((e) => `${e}-header`)" #[slot]="scope">
+        <template v-for="slot in getSlots(tableColumns).map((e) => `${e}-header`)" #[slot]="scope">
           <slot :name="slot" v-bind="scope" />
         </template>
       </TableColumn>
@@ -259,7 +271,7 @@ defineExpose({
       >
         <template #default="{ row }">
           <template
-            v-for="(item, index) in rowOperateItems"
+            v-for="(item, index) in rowOperateOptions"
             :key="`rowOperateItem${item.value}${index}`"
           >
             <el-popconfirm
@@ -301,6 +313,7 @@ defineExpose({
       <el-pagination
         v-model:current-page="_currentPage"
         v-model:page-size="_pageSize"
+        :total
         v-bind="{
           pageSizes: [10, 20, 30, 40, 50],
           layout: paginationLayout,

diff --git a/templates/vue-admin/src/layout/main-layout/components/AppSetting.vue b/templates/vue-admin/src/layout/main-layout/components/AppSetting.vue
@@ -9,7 +9,8 @@ const show = ref(false)
 const appSetting = ref<AppSetting>({
   theme: {},
   menu: {},
-  main: {}
+  main: {},
+  dataTable: {}
 })
 const { appSettingData } = storeToRefs(useAppSettingDataStore())
 const { getAppSettingData, appSettingConst, setAppSettingData } = useAppSettingDataStore()
@@ -48,6 +49,10 @@ function onChange(key: string, val: any) {
       appSettingData.value!.main.breadcrumb = val
       break
     }
+    case 'appSetting.dataTable.pageSize': {
+      appSettingData.value!.dataTable.pageSize = val
+      break
+    }
   }
 }
 
@@ -173,6 +178,24 @@ defineExpose({
         @change="(val) => onChange('appSetting.main.breadcrumb', val)"
       />
     </div>
+    <el-divider direction="horizontal" content-position="center">数据表</el-divider>
+    <div class="flex-box">
+      <span class="label">
+        每页显示条目个数
+        <el-tooltip effect="dark" content="保存设置刷新页面后生效" placement="top">
+          <el-icon color="#ffae1f"><QuestionFilled /></el-icon>
+        </el-tooltip>
+      </span>
+      <el-select
+        v-model="appSetting.dataTable.pageSize"
+        style="width: 120px"
+        @change="(val) => onChange('appSetting.dataTable.pageSize', val)"
+      >
+        <el-option label="10条/页" :value="10" />
+        <el-option label="20条/页" :value="20" />
+        <el-option label="30条/页" :value="30" />
+      </el-select>
+    </div>
     <template #footer>
       <el-button size="large" @click="onReset">重置设置</el-button>
       <el-button size="large" type="primary" @click="onSave">保存设置</el-button>

diff --git a/templates/vue-admin/src/stores/global/app-setting.ts b/templates/vue-admin/src/stores/global/app-setting.ts
@@ -16,6 +16,9 @@ export interface AppSetting {
     navRecord?: boolean
     breadcrumb?: boolean
   }
+  dataTable: {
+    pageSize?: number
+  }
 }
 
 const useAppSettingDataStore = defineStore('global/app-setting', () => {
@@ -32,6 +35,9 @@ const useAppSettingDataStore = defineStore('global/app-setting', () => {
       width: 'full',
       navRecord: true,
       breadcrumb: true
+    },
+    dataTable: {
+      pageSize: 10
     }
   }
   const appSettingData = ref<AppSetting>(JSON.parse(JSON.stringify(appSettingConst)))
@@ -44,11 +50,16 @@ const useAppSettingDataStore = defineStore('global/app-setting', () => {
     appSettingData.value = JSON.parse(JSON.stringify(data))
   }
 
+  function getPageSize() {
+    return appSettingData.value.dataTable.pageSize
+  }
+
   return {
     appSettingData,
     appSettingConst,
     getAppSettingData,
-    setAppSettingData
+    setAppSettingData,
+    getPageSize
   }
 })
 

diff --git a/templates/vue-admin/src/views/system/user/User.vue b/templates/vue-admin/src/views/system/user/User.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import type { VsSearchOptionItem } from '@/components'
+import type { VsSearchOptionItem, VsTableColumnItem, VsTableOperateItem } from '@/components'
 import type { SSelectProps } from '@/components/vs-search/components'
+import { queryUserList } from '@/api/system/user'
+import { useAppSettingDataStore } from '@/stores/global'
 
+const { getPageSize } = useAppSettingDataStore()
+const permissionCodes = ref(['add', 'edit'])
 const searchOptions = ref<VsSearchOptionItem[]>([
   {
     id: 'searchStr',
@@ -26,11 +30,46 @@ const searchOptions = ref<VsSearchOptionItem[]>([
     label: '手机号'
   }
 ])
+const params = ref<PagingParams>({
+  pageIndex: 1,
+  pageSize: getPageSize()
+})
+const loading = ref(false)
+const total = ref(0)
+const tableData = ref<Record<string, any>[]>([])
+const tableOperateOptions = ref<VsTableOperateItem[]>([
+  { label: '新增', value: 'add', code: 'add', show: (code) => permissionCodes.value.includes(code) }
+])
+const tableColumns = ref<VsTableColumnItem[]>([
+  { label: '员工姓名', prop: 'name' },
+  { label: '员工工号', prop: 'code' }
+])
+
+onMounted(() => {
+  getTableList(params.value)
+})
+
+async function getTableList(params: PagingParams) {
+  loading.value = true
+  const res = await queryUserList(params)
+  loading.value = false
+  total.value = res?.total ?? 0
+  tableData.value = res?.list ?? []
+}
 </script>
 
 <template>
   <ViewWrapper>
     <VsSearch label-width="110px" :options="searchOptions"></VsSearch>
-    <VsTable></VsTable>
+    <VsTable
+      v-model:page-size="params.pageSize"
+      v-model:current-page="params.pageIndex"
+      :table-columns
+      :table-operate-options
+      :table-data
+      :total
+      :loading
+    >
+    </VsTable>
   </ViewWrapper>
 </template>
diff --git a/templates/vue-admin/types/global.d.ts b/templates/vue-admin/types/global.d.ts
@@ -33,8 +33,21 @@ declare global {
   /**
    * 自定义 import.meta.env 环境变量
    * @interface ImportMetaEnv
+   * @property {string} ImportMetaEnv.VITE_MODE - 自定义模式
    */
   interface ImportMetaEnv extends Readonly<Record<string, string>> {
-    // readonly VITE_ENV: 'dev' | 'test' | 'prod'
+    readonly VITE_MODE: 'dev' | 'test' | 'prod'
+  }
+
+  /**
+   * 分页参数
+   * @interface PagingParams
+   * @property {number} PagingParams.pageIndex - 页码
+   * @property {number} PagingParams.pageSize - 每页显示条目个数
+   */
+  interface PagingParams {
+    pageIndex?: number
+    pageSize?: number
+    [key: string]: any
   }
 }