From c64ed917ba92f5e0c6c91e1fe7cf469ae6aa023b Mon Sep 17 00:00:00 2001
From: Ryan <425547052@qq.com>
Date: Tue, 12 Sep 2023 15:26:35 +0800
Subject: [PATCH] feat: add tabs bar to CrudTable

---
 .history/mock/api/post_20230912152251.js      | 138 +++++++++
 .history/mock/api/post_20230912152547.js      | 144 +++++++++
 .../table/CrudTable_20230912152251.vue        | 149 +++++++++
 .../table/CrudTable_20230912152508.vue        | 190 ++++++++++++
 .../views/demo/table/index_20230912152251.vue | 233 ++++++++++++++
 .../views/demo/table/index_20230912152520.vue | 287 ++++++++++++++++++
 .vs/ProjectSettings.json                      |   3 +
 .vs/VSWorkspaceState.json                     |   7 +
 .vs/slnx.sqlite                               | Bin 0 -> 98304 bytes
 .vs/vue-naive-admin/v16/.suo                  | Bin 0 -> 14848 bytes
 mock/api/post.js                              |   6 +
 src/components/table/CrudTable.vue            |  45 ++-
 src/views/demo/table/index.vue                |  56 +++-
 13 files changed, 1255 insertions(+), 3 deletions(-)
 create mode 100644 .history/mock/api/post_20230912152251.js
 create mode 100644 .history/mock/api/post_20230912152547.js
 create mode 100644 .history/src/components/table/CrudTable_20230912152251.vue
 create mode 100644 .history/src/components/table/CrudTable_20230912152508.vue
 create mode 100644 .history/src/views/demo/table/index_20230912152251.vue
 create mode 100644 .history/src/views/demo/table/index_20230912152520.vue
 create mode 100644 .vs/ProjectSettings.json
 create mode 100644 .vs/VSWorkspaceState.json
 create mode 100644 .vs/slnx.sqlite
 create mode 100644 .vs/vue-naive-admin/v16/.suo

diff --git a/.history/mock/api/post_20230912152251.js b/.history/mock/api/post_20230912152251.js
new file mode 100644
index 0000000..b6c3e54
--- /dev/null
+++ b/.history/mock/api/post_20230912152251.js
@@ -0,0 +1,138 @@
+const posts = [
+  {
+    title: '使用纯css优雅配置移动端rem布局',
+    author: '大脸怪',
+    category: 'Css',
+    description: '通常配置rem布局会使用js进行处理，比如750的设计稿会这样...',
+    content: '通常配置rem布局会使用js进行处理，比如750的设计稿会这样',
+    isRecommend: true,
+    isPublish: true,
+    createDate: '2021-11-04T04:03:36.000Z',
+    updateDate: '2021-11-04T04:03:36.000Z',
+  },
+  {
+    title: 'Vue2&Vue3项目风格指南',
+    author: 'Ronnie',
+    category: 'Vue',
+    description: '总结的Vue2和Vue3的项目风格',
+    content: '### 1. 命名风格\n\n> 文件夹如果是由多个单词组成，应该始终是横线连接 ',
+    isRecommend: true,
+    isPublish: true,
+    createDate: '2021-10-25T08:57:47.000Z',
+    updateDate: '2022-02-28T04:02:39.000Z',
+  },
+  {
+    title: '如何优雅的给图片添加水印',
+    author: '大脸怪',
+    category: 'JavaScript',
+    description: '优雅的给图片添加水印',
+    content: '我之前写过一篇文章记录了一次上传图片的优化史',
+    isRecommend: true,
+    isPublish: true,
+    createDate: '2021-06-24T18:46:19.000Z',
+    updateDate: '2021-09-23T07:51:22.000Z',
+  },
+
+  {
+    title: '前端缓存的理解',
+    author: '大脸怪',
+    category: 'Http',
+    description: '谈谈前端缓存的理解',
+    content:
+      '> 背景\n\n公司有个vue-cli3移动端web项目发版更新后发现部分用户手机在钉钉内置浏览器打开出现了缓存',
+    isRecommend: true,
+    isPublish: true,
+    createDate: '2021-06-10T18:51:19.000Z',
+    updateDate: '2021-09-17T09:33:24.000Z',
+  },
+  {
+    title: 'Promise的五个静态方法',
+    author: '大脸怪',
+    category: 'JavaScript',
+    description: '简单介绍下在 Promise 类中，有5 种静态方法及它们的使用场景',
+    content:
+      '## 1. Promise.all\n\n并行执行多个 promise，并等待所有 promise 都准备就绪。再对它们进行处理。',
+    isRecommend: true,
+    isPublish: true,
+    createDate: '2021-02-22T22:37:06.000Z',
+    updateDate: '2021-09-17T09:33:24.000Z',
+  },
+]
+
+export default [
+  {
+    url: '/api/posts',
+    method: 'get',
+    response: (data = {}) => {
+      const { title, pageNo, pageSize } = data.query
+      let pageData = []
+      let total = 60
+      const filterData = posts.filter(
+        (item) => item.title.includes(title) || (!title && title !== 0)
+      )
+      if (filterData.length) {
+        if (pageSize) {
+          while (pageData.length < pageSize) {
+            pageData.push(filterData[Math.round(Math.random() * (filterData.length - 1))])
+          }
+        } else {
+          pageData = filterData
+        }
+        pageData = pageData.map((item, index) => ({
+          id: pageSize * (pageNo - 1) + index + 1,
+          ...item,
+        }))
+      } else {
+        total = 0
+      }
+      return {
+        code: 0,
+        message: 'ok',
+        data: {
+          pageData,
+          total,
+          pageNo,
+          pageSize,
+        },
+      }
+    },
+  },
+  {
+    url: '/api/post',
+    method: 'post',
+    response: ({ body }) => {
+      return {
+        code: 0,
+        message: 'ok',
+        data: body,
+      }
+    },
+  },
+  {
+    url: '/api/post/:id',
+    method: 'put',
+    response: ({ query, body }) => {
+      return {
+        code: 0,
+        message: 'ok',
+        data: {
+          id: query.id,
+          body,
+        },
+      }
+    },
+  },
+  {
+    url: '/api/post/:id',
+    method: 'delete',
+    response: ({ query }) => {
+      return {
+        code: 0,
+        message: 'ok',
+        data: {
+          id: query.id,
+        },
+      }
+    },
+  },
+]
diff --git a/.history/mock/api/post_20230912152547.js b/.history/mock/api/post_20230912152547.js
new file mode 100644
index 0000000..80ffa1a
--- /dev/null
+++ b/.history/mock/api/post_20230912152547.js
@@ -0,0 +1,144 @@
+const posts = [
+  {
+    title: '使用纯css优雅配置移动端rem布局',
+    author: '大脸怪',
+    category: 'Css',
+    description: '通常配置rem布局会使用js进行处理，比如750的设计稿会这样...',
+    content: '通常配置rem布局会使用js进行处理，比如750的设计稿会这样',
+    isRecommend: true,
+    isPublish: true,
+    total_expanse: 100,
+    state: 'approve',
+    createDate: '2021-11-04T04:03:36.000Z',
+    updateDate: '2021-11-04T04:03:36.000Z',
+  },
+  {
+    title: 'Vue2&Vue3项目风格指南',
+    author: 'Ronnie',
+    category: 'Vue',
+    description: '总结的Vue2和Vue3的项目风格',
+    content: '### 1. 命名风格\n\n> 文件夹如果是由多个单词组成，应该始终是横线连接 ',
+    isRecommend: true,
+    total_expanse: 100,
+    isPublish: true,
+    createDate: '2021-10-25T08:57:47.000Z',
+    updateDate: '2022-02-28T04:02:39.000Z',
+  },
+  {
+    title: '如何优雅的给图片添加水印',
+    author: '大脸怪',
+    category: 'JavaScript',
+    description: '优雅的给图片添加水印',
+    content: '我之前写过一篇文章记录了一次上传图片的优化史',
+    isRecommend: true,
+    total_expanse: 100,
+    isPublish: true,
+    createDate: '2021-06-24T18:46:19.000Z',
+    updateDate: '2021-09-23T07:51:22.000Z',
+  },
+
+  {
+    title: '前端缓存的理解',
+    author: '大脸怪',
+    category: 'Http',
+    description: '谈谈前端缓存的理解',
+    content:
+      '> 背景\n\n公司有个vue-cli3移动端web项目发版更新后发现部分用户手机在钉钉内置浏览器打开出现了缓存',
+    isRecommend: true,
+    isPublish: true,
+    total_expanse: 100,
+    createDate: '2021-06-10T18:51:19.000Z',
+    updateDate: '2021-09-17T09:33:24.000Z',
+  },
+  {
+    title: 'Promise的五个静态方法',
+    author: '大脸怪',
+    category: 'JavaScript',
+    description: '简单介绍下在 Promise 类中，有5 种静态方法及它们的使用场景',
+    content:
+      '## 1. Promise.all\n\n并行执行多个 promise，并等待所有 promise 都准备就绪。再对它们进行处理。',
+    isRecommend: true,
+    isPublish: true,
+    total_expanse: 100,
+    createDate: '2021-02-22T22:37:06.000Z',
+    updateDate: '2021-09-17T09:33:24.000Z',
+  },
+]
+
+export default [
+  {
+    url: '/api/posts',
+    method: 'get',
+    response: (data = {}) => {
+      const { title, pageNo, pageSize } = data.query
+      let pageData = []
+      let total = 60
+      const filterData = posts.filter(
+        (item) => item.title.includes(title) || (!title && title !== 0)
+      )
+      if (filterData.length) {
+        if (pageSize) {
+          while (pageData.length < pageSize) {
+            pageData.push(filterData[Math.round(Math.random() * (filterData.length - 1))])
+          }
+        } else {
+          pageData = filterData
+        }
+        pageData = pageData.map((item, index) => ({
+          id: pageSize * (pageNo - 1) + index + 1,
+          ...item,
+        }))
+      } else {
+        total = 0
+      }
+      return {
+        code: 0,
+        message: 'ok',
+        data: {
+          pageData,
+          total,
+          pageNo,
+          pageSize,
+        },
+      }
+    },
+  },
+  {
+    url: '/api/post',
+    method: 'post',
+    response: ({ body }) => {
+      return {
+        code: 0,
+        message: 'ok',
+        data: body,
+      }
+    },
+  },
+  {
+    url: '/api/post/:id',
+    method: 'put',
+    response: ({ query, body }) => {
+      return {
+        code: 0,
+        message: 'ok',
+        data: {
+          id: query.id,
+          body,
+        },
+      }
+    },
+  },
+  {
+    url: '/api/post/:id',
+    method: 'delete',
+    response: ({ query }) => {
+      return {
+        code: 0,
+        message: 'ok',
+        data: {
+          id: query.id,
+        },
+      }
+    },
+  },
+]
diff --git a/.history/src/components/table/CrudTable_20230912152251.vue b/.history/src/components/table/CrudTable_20230912152251.vue
new file mode 100644
index 0000000..f2a36c0
--- /dev/null
+++ b/.history/src/components/table/CrudTable_20230912152251.vue
@@ -0,0 +1,149 @@
+<template>
+  <QueryBar v-if="$slots.queryBar" mb-30 @search="handleSearch" @reset="handleReset">
+    <slot name="queryBar" />
+  </QueryBar>
+
+  <n-data-table
+    :remote="remote"
+    :loading="loading"
+    :scroll-x="scrollX"
+    :columns="columns"
+    :data="tableData"
+    :row-key="(row) => row[rowKey]"
+    :pagination="isPagination ? pagination : false"
+    @update:checked-row-keys="onChecked"
+    @update:page="onPageChange"
+  />
+</template>
+
+<script setup>
+import { utils, writeFile } from 'xlsx'
+
+const props = defineProps({
+  /**
+   * @remote true: 后端分页  false： 前端分页
+   */
+  remote: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @remote 是否分页
+   */
+  isPagination: {
+    type: Boolean,
+    default: true,
+  },
+  scrollX: {
+    type: Number,
+    default: 1200,
+  },
+  rowKey: {
+    type: String,
+    default: 'id',
+  },
+  columns: {
+    type: Array,
+    required: true,
+  },
+  /** queryBar中的参数 */
+  queryItems: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  /** 补充参数（可选） */
+  extraParams: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  /**
+   * ! 约定接口入参出参
+   * * 分页模式需约定分页接口入参
+   *    @pageSize 分页参数：一页展示多少条，默认10
+   *    @pageNo   分页参数：页码，默认1
+   * * 需约定接口出参
+   *    @pageData 分页模式必须,非分页模式如果没有pageData则取上一层data
+   *    @total    分页模式必须，非分页模式如果没有total则取上一层data.length
+   */
+  getData: {
+    type: Function,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange'])
+const loading = ref(false)
+const initQuery = { ...props.queryItems }
+const tableData = ref([])
+const pagination = reactive({ page: 1, pageSize: 10 })
+
+async function handleQuery() {
+  try {
+    loading.value = true
+    let paginationParams = {}
+    // 如果非分页模式或者使用前端分页,则无需传分页参数
+    if (props.isPagination && props.remote) {
+      paginationParams = { pageNo: pagination.page, pageSize: pagination.pageSize }
+    }
+    const { data } = await props.getData({
+      ...props.queryItems,
+      ...props.extraParams,
+      ...paginationParams,
+    })
+    tableData.value = data?.pageData || data
+    pagination.itemCount = data.total ?? data.length
+  } catch (error) {
+    tableData.value = []
+    pagination.itemCount = 0
+  } finally {
+    emit('onDataChange', tableData.value)
+    loading.value = false
+  }
+}
+function handleSearch() {
+  pagination.page = 1
+  handleQuery()
+}
+async function handleReset() {
+  const queryItems = { ...props.queryItems }
+  for (const key in queryItems) {
+    queryItems[key] = ''
+  }
+  emit('update:queryItems', { ...queryItems, ...initQuery })
+  await nextTick()
+  pagination.page = 1
+  handleQuery()
+}
+function onPageChange(currentPage) {
+  pagination.page = currentPage
+  if (props.remote) {
+    handleQuery()
+  }
+}
+function onChecked(rowKeys) {
+  if (props.columns.some((item) => item.type === 'selection')) {
+    emit('onChecked', rowKeys)
+  }
+}
+function handleExport(columns = props.columns, data = tableData.value) {
+  if (!data?.length) return $message.warning('没有数据')
+  const columnsData = columns.filter((item) => !!item.title && !item.hideInExcel)
+  const thKeys = columnsData.map((item) => item.key)
+  const thData = columnsData.map((item) => item.title)
+  const trData = data.map((item) => thKeys.map((key) => item[key]))
+  const sheet = utils.aoa_to_sheet([thData, ...trData])
+  const workBook = utils.book_new()
+  utils.book_append_sheet(workBook, sheet, '数据报表')
+  writeFile(workBook, '数据报表.xlsx')
+}
+
+defineExpose({
+  handleSearch,
+  handleReset,
+  handleExport,
+})
+</script>
diff --git a/.history/src/components/table/CrudTable_20230912152508.vue b/.history/src/components/table/CrudTable_20230912152508.vue
new file mode 100644
index 0000000..4d2a39d
--- /dev/null
+++ b/.history/src/components/table/CrudTable_20230912152508.vue
@@ -0,0 +1,190 @@
+<template>
+  <QueryBar v-if="$slots.queryBar" mb-30 @search="handleSearch" @reset="handleReset">
+    <slot name="queryBar" />
+  </QueryBar>
+
+  <n-data-table
+    :remote="remote"
+    :loading="loading"
+    :scroll-x="scrollX"
+    :columns="columns"
+    :data="tableData"
+    :summary="getSummary"
+    :row-key="(row) => row[rowKey]"
+    :pagination="isPagination ? pagination : false"
+    @update:checked-row-keys="onChecked"
+    @update:page="onPageChange"
+  />
+</template>
+
+<script setup>
+import { utils, writeFile } from 'xlsx'
+
+const props = defineProps({
+  /**
+   * @remote true: 后端分页  false： 前端分页
+   */
+  remote: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @remote 是否分页
+   */
+  isPagination: {
+    type: Boolean,
+    default: true,
+  },
+  scrollX: {
+    type: Number,
+    default: 1200,
+  },
+  rowKey: {
+    type: String,
+    default: 'id',
+  },
+  columns: {
+    type: Array,
+    required: true,
+  },
+  //获取总结数据
+  getSummary: {
+    type: Function,
+    required: false,
+  },
+  //总结栏所需列名
+  sumaryCol: {
+    type: String,
+    default: 'total_expanse',
+  },
+  //总结数据
+  summaryRef: {
+    type: Object,
+    default: null,
+  },
+  /** queryBar中的参数 */
+  queryItems: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+
+  /** 补充参数（可选） */
+  extraParams: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  /**
+   * ! 约定接口入参出参
+   * * 分页模式需约定分页接口入参
+   *    @pageSize 分页参数：一页展示多少条，默认10
+   *    @pageNo   分页参数：页码，默认1
+   * * 需约定接口出参
+   *    @pageData 分页模式必须,非分页模式如果没有pageData则取上一层data
+   *    @total    分页模式必须，非分页模式如果没有total则取上一层data.length
+   */
+  getData: {
+    type: Function,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange', 'setSum'])
+const loading = ref(false)
+const initQuery = { ...props.queryItems }
+const tableData = ref([])
+const pagination = reactive({ page: 1, pageSize: 1 })
+
+const getSummary = (pageData) => {
+  // console.log(props.summaryRef)
+  // // eslint-disable-next-line vue/no-mutating-props
+  const sum = pageData.reduce(
+    (prevValue, row) => Number(prevValue) + Number(row[props.sumaryCol]),
+    0
+  )
+  emit('setSum', sum)
+  console.log(props.sumaryCol)
+  return {
+    title: {
+      value: h(
+        'div',
+        { style: 'top:10%' },
+        'Total: ' + Number(sum).toFixed(2)
+        // eslint-disable-next-line vue/no-mutating-props
+        // props.summaryRef.value = num
+        // return num
+      ),
+      colSpan: 10,
+    },
+  }
+}
+
+async function handleQuery() {
+  try {
+    loading.value = true
+    let paginationParams = {}
+    // 如果非分页模式或者使用前端分页,则无需传分页参数
+    if (props.isPagination && props.remote) {
+      paginationParams = { pageNo: pagination.page, pageSize: pagination.pageSize }
+    }
+    const { data } = await props.getData({
+      ...props.queryItems,
+      ...props.extraParams,
+      ...paginationParams,
+    })
+    tableData.value = data?.pageData || data
+    pagination.itemCount = data.total ?? data.length
+  } catch (error) {
+    tableData.value = []
+    pagination.itemCount = 0
+  } finally {
+    emit('onDataChange', tableData.value)
+    loading.value = false
+  }
+}
+function handleSearch() {
+  pagination.page = 1
+  handleQuery()
+}
+async function handleReset() {
+  const queryItems = { ...props.queryItems }
+  for (const key in queryItems) {
+    queryItems[key] = ''
+  }
+  emit('update:queryItems', { ...queryItems, ...initQuery })
+  await nextTick()
+  pagination.page = 1
+  handleQuery()
+}
+function onPageChange(currentPage) {
+  pagination.page = currentPage
+  if (props.remote) {
+    handleQuery()
+  }
+}
+function onChecked(rowKeys) {
+  if (props.columns.some((item) => item.type === 'selection')) {
+    emit('onChecked', rowKeys)
+  }
+}
+function handleExport(columns = props.columns, data = tableData.value) {
+  if (!data?.length) return $message.warning('没有数据')
+  const columnsData = columns.filter((item) => !!item.title && !item.hideInExcel)
+  const thKeys = columnsData.map((item) => item.key)
+  const thData = columnsData.map((item) => item.title)
+  const trData = data.map((item) => thKeys.map((key) => item[key]))
+  const sheet = utils.aoa_to_sheet([thData, ...trData])
+  const workBook = utils.book_new()
+  utils.book_append_sheet(workBook, sheet, '数据报表')
+  writeFile(workBook, '数据报表.xlsx')
+}
+
+defineExpose({
+  handleSearch,
+  handleReset,
+  handleExport,
+})
+</script>
diff --git a/.history/src/views/demo/table/index_20230912152251.vue b/.history/src/views/demo/table/index_20230912152251.vue
new file mode 100644
index 0000000..897a821
--- /dev/null
+++ b/.history/src/views/demo/table/index_20230912152251.vue
@@ -0,0 +1,233 @@
+<template>
+  <CommonPage show-footer title="文章">
+    <template #action>
+      <div>
+        <n-button type="primary" secondary @click="$table?.handleExport()">
+          <TheIcon icon="mdi:download" :size="18" class="mr-5" />
+          导出
+        </n-button>
+        <n-button type="primary" class="ml-16" @click="handleAdd">
+          <TheIcon icon="material-symbols:add" :size="18" class="mr-5" />
+          新建文章
+        </n-button>
+      </div>
+    </template>
+
+    <CrudTable
+      ref="$table"
+      v-model:query-items="queryItems"
+      :extra-params="extraParams"
+      :scroll-x="1200"
+      :columns="columns"
+      :get-data="api.getPosts"
+      @on-checked="onChecked"
+      @on-data-change="(data) => (tableData = data)"
+    >
+      <template #queryBar>
+        <QueryBarItem label="标题" :label-width="50">
+          <n-input
+            v-model:value="queryItems.title"
+            type="text"
+            placeholder="请输入标题"
+            @keypress.enter="$table?.handleSearch"
+          />
+        </QueryBarItem>
+      </template>
+    </CrudTable>
+    <!-- 新增/编辑/查看 -->
+    <CrudModal
+      v-model:visible="modalVisible"
+      :title="modalTitle"
+      :loading="modalLoading"
+      :show-footer="modalAction !== 'view'"
+      @on-save="handleSave"
+    >
+      <n-form
+        ref="modalFormRef"
+        label-placement="left"
+        label-align="left"
+        :label-width="80"
+        :model="modalForm"
+        :disabled="modalAction === 'view'"
+      >
+        <n-form-item label="作者" path="author">
+          <n-input v-model:value="modalForm.author" disabled />
+        </n-form-item>
+        <n-form-item
+          label="文章标题"
+          path="title"
+          :rule="{
+            required: true,
+            message: '请输入文章标题',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input v-model:value="modalForm.title" placeholder="请输入文章标题" />
+        </n-form-item>
+        <n-form-item
+          label="文章内容"
+          path="content"
+          :rule="{
+            required: true,
+            message: '请输入文章内容',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input
+            v-model:value="modalForm.content"
+            placeholder="请输入文章内容"
+            type="textarea"
+            :autosize="{
+              minRows: 3,
+              maxRows: 5,
+            }"
+          />
+        </n-form-item>
+      </n-form>
+    </CrudModal>
+  </CommonPage>
+</template>
+
+<script setup>
+import { NButton, NSwitch } from 'naive-ui'
+import { formatDateTime, renderIcon, isNullOrUndef } from '@/utils'
+import { useCRUD } from '@/composables'
+import api from './api'
+
+defineOptions({ name: 'Crud' })
+
+const $table = ref(null)
+/** 表格数据，触发搜索的时候会更新这个值 */
+const tableData = ref([])
+/** QueryBar筛选参数（可选） */
+const queryItems = ref({})
+/** 补充参数（可选） */
+const extraParams = ref({})
+
+onActivated(() => {
+  $table.value?.handleSearch()
+})
+
+const columns = [
+  { type: 'selection', fixed: 'left' },
+  {
+    title: '发布',
+    key: 'isPublish',
+    width: 60,
+    align: 'center',
+    fixed: 'left',
+    render(row) {
+      return h(NSwitch, {
+        size: 'small',
+        rubberBand: false,
+        value: row['isPublish'],
+        loading: !!row.publishing,
+        onUpdateValue: () => handlePublish(row),
+      })
+    },
+  },
+  { title: '标题', key: 'title', width: 150, ellipsis: { tooltip: true } },
+  { title: '分类', key: 'category', width: 80, ellipsis: { tooltip: true } },
+  { title: '创建人', key: 'author', width: 80 },
+  {
+    title: '创建时间',
+    key: 'createDate',
+    width: 150,
+    render(row) {
+      return h('span', formatDateTime(row['createDate']))
+    },
+  },
+  {
+    title: '最后更新时间',
+    key: 'updateDate',
+    width: 150,
+    render(row) {
+      return h('span', formatDateTime(row['updateDate']))
+    },
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 240,
+    align: 'center',
+    fixed: 'right',
+    hideInExcel: true,
+    render(row) {
+      return [
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            secondary: true,
+            onClick: () => handleView(row),
+          },
+          { default: () => '查看', icon: renderIcon('majesticons:eye-line', { size: 14 }) }
+        ),
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            style: 'margin-left: 15px;',
+            onClick: () => handleEdit(row),
+          },
+          { default: () => '编辑', icon: renderIcon('material-symbols:edit-outline', { size: 14 }) }
+        ),
+
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'error',
+            style: 'margin-left: 15px;',
+            onClick: () => handleDelete(row.id),
+          },
+          {
+            default: () => '删除',
+            icon: renderIcon('material-symbols:delete-outline', { size: 14 }),
+          }
+        ),
+      ]
+    },
+  },
+]
+
+// 选中事件
+function onChecked(rowKeys) {
+  if (rowKeys.length) $message.info(`选中${rowKeys.join(' ')}`)
+}
+
+// 发布
+function handlePublish(row) {
+  if (isNullOrUndef(row.id)) return
+
+  row.publishing = true
+  setTimeout(() => {
+    row.isPublish = !row.isPublish
+    row.publishing = false
+    $message?.success(row.isPublish ? '已发布' : '已取消发布')
+  }, 1000)
+}
+
+const {
+  modalVisible,
+  modalAction,
+  modalTitle,
+  modalLoading,
+  handleAdd,
+  handleDelete,
+  handleEdit,
+  handleView,
+  handleSave,
+  modalForm,
+  modalFormRef,
+} = useCRUD({
+  name: '文章',
+  initForm: { author: '大脸怪' },
+  doCreate: api.addPost,
+  doDelete: api.deletePost,
+  doUpdate: api.updatePost,
+  refresh: () => $table.value?.handleSearch(),
+})
+</script>
diff --git a/.history/src/views/demo/table/index_20230912152520.vue b/.history/src/views/demo/table/index_20230912152520.vue
new file mode 100644
index 0000000..31404f5
--- /dev/null
+++ b/.history/src/views/demo/table/index_20230912152520.vue
@@ -0,0 +1,287 @@
+<template>
+  <CommonPage show-footer title="文章">
+    <template #action>
+      <div>
+        <n-button type="primary" secondary @click="$table?.handleExport()">
+          <TheIcon icon="mdi:download" :size="18" class="mr-5" />
+          导出
+        </n-button>
+        <n-button type="primary" class="ml-16" @click="handleAdd">
+          <TheIcon icon="material-symbols:add" :size="18" class="mr-5" />
+          新建文章
+        </n-button>
+      </div>
+    </template>
+    <n-tabs
+      v-model:value="queryItems.state"
+      type="card"
+      animated
+      tab-style="font-weight:600;background-color:rgb(222, 231, 232); margin-bottom:10px;"
+      :on-update:value="selecetChap"
+    >
+      <n-tab v-for="(i, index) in tabsOptions" :id="i.name" :key="index" :name="i.name" style="">
+        <template #default>
+          <div style="">{{ i.text }}</div>
+        </template>
+      </n-tab>
+    </n-tabs>
+    <CrudTable
+      ref="$table"
+      v-model:query-items="queryItems"
+      :extra-params="extraParams"
+      :scroll-x="1200"
+      :columns="columns"
+      :get-data="api.getPosts"
+      :summary-ref="sumRef"
+      :sumary-col="current_ms"
+      @setSum="setSum"
+      @on-checked="onChecked"
+      @on-data-change="(data) => (tableData = data)"
+    >
+      <template #queryBar>
+        <QueryBarItem label="标题" :label-width="50">
+          <n-input
+            v-model:value="queryItems.title"
+            type="text"
+            placeholder="请输入标题"
+            @keypress.enter="$table?.handleSearch"
+          />
+        </QueryBarItem>
+      </template>
+    </CrudTable>
+    <!-- 新增/编辑/查看 -->
+    <CrudModal
+      v-model:visible="modalVisible"
+      :title="modalTitle"
+      :loading="modalLoading"
+      :show-footer="modalAction !== 'view'"
+      @on-save="handleSave"
+    >
+      <n-form
+        ref="modalFormRef"
+        label-placement="left"
+        label-align="left"
+        :label-width="80"
+        :model="modalForm"
+        :disabled="modalAction === 'view'"
+      >
+        <n-form-item label="作者" path="author">
+          <n-input v-model:value="modalForm.author" disabled />
+        </n-form-item>
+        <n-form-item
+          label="文章标题"
+          path="title"
+          :rule="{
+            required: true,
+            message: '请输入文章标题',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input v-model:value="modalForm.title" placeholder="请输入文章标题" />
+        </n-form-item>
+        <n-form-item
+          label="文章内容"
+          path="content"
+          :rule="{
+            required: true,
+            message: '请输入文章内容',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input
+            v-model:value="modalForm.content"
+            placeholder="请输入文章内容"
+            type="textarea"
+            :autosize="{
+              minRows: 3,
+              maxRows: 5,
+            }"
+          />
+        </n-form-item>
+      </n-form>
+    </CrudModal>
+  </CommonPage>
+</template>
+
+<script setup>
+import { NButton, NSwitch } from 'naive-ui'
+import { formatDateTime, renderIcon, isNullOrUndef } from '@/utils'
+import { useCRUD } from '@/composables'
+import api from './api'
+
+defineOptions({ name: 'Crud' })
+
+const $table = ref(null)
+/** 表格数据，触发搜索的时候会更新这个值 */
+const tableData = ref([])
+/** QueryBar筛选参数（可选） */
+const queryItems = ref({})
+/** 补充参数（可选） */
+const extraParams = ref({})
+
+//总结数
+const sumRef = ref(0)
+const current_ms = ref('total_expanse')
+
+onActivated(() => {
+  $table.value?.handleSearch()
+})
+
+const columns = [
+  { type: 'selection', fixed: 'left' },
+  {
+    title: '发布',
+    key: 'isPublish',
+    width: 60,
+    align: 'center',
+    fixed: 'left',
+    render(row) {
+      return h(NSwitch, {
+        size: 'small',
+        rubberBand: false,
+        value: row['isPublish'],
+        loading: !!row.publishing,
+        onUpdateValue: () => handlePublish(row),
+      })
+    },
+  },
+  { title: '标题', key: 'title', width: 150, ellipsis: { tooltip: true } },
+  { title: '分类', key: 'category', width: 80, ellipsis: { tooltip: true } },
+  { title: '创建人', key: 'author', width: 80 },
+  {
+    title: '创建时间',
+    key: 'createDate',
+    width: 150,
+    render(row) {
+      return h('span', formatDateTime(row['createDate']))
+    },
+  },
+  {
+    title: '最后更新时间',
+    key: 'updateDate',
+    width: 150,
+    render(row) {
+      return h('span', formatDateTime(row['updateDate']))
+    },
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 240,
+    align: 'center',
+    fixed: 'right',
+    hideInExcel: true,
+    render(row) {
+      return [
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            secondary: true,
+            onClick: () => handleView(row),
+          },
+          { default: () => '查看', icon: renderIcon('majesticons:eye-line', { size: 14 }) }
+        ),
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            style: 'margin-left: 15px;',
+            onClick: () => handleEdit(row),
+          },
+          { default: () => '编辑', icon: renderIcon('material-symbols:edit-outline', { size: 14 }) }
+        ),
+
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'error',
+            style: 'margin-left: 15px;',
+            onClick: () => handleDelete(row.id),
+          },
+          {
+            default: () => '删除',
+            icon: renderIcon('material-symbols:delete-outline', { size: 14 }),
+          }
+        ),
+      ]
+    },
+  },
+]
+
+//tabs栏
+const tabsOptions = ref([
+  {
+    name: 'tab1',
+    value: 'tab1',
+    text: 'tab1',
+  },
+  {
+    name: 'tab2',
+    value: 'tab2',
+    text: 'tab2',
+  },
+  {
+    name: 'tab3',
+    value: 'tab3',
+    text: 'tab3',
+  },
+  {
+    name: 'tab4',
+    value: 'tab4',
+    text: 'tab4',
+  },
+])
+//设置总结需要传的函数
+function setSum(val) {
+  sumRef.value = val
+  console.log(sumRef.value)
+}
+
+//根据tabs选择状态搜索
+function selecetChap(val) {
+  queryItems.value.state = val
+  $table.value?.handleSearch()
+}
+
+// 选中事件
+function onChecked(rowKeys) {
+  if (rowKeys.length) $message.info(`选中${rowKeys.join(' ')}`)
+}
+
+// 发布
+function handlePublish(row) {
+  if (isNullOrUndef(row.id)) return
+
+  row.publishing = true
+  setTimeout(() => {
+    row.isPublish = !row.isPublish
+    row.publishing = false
+    $message?.success(row.isPublish ? '已发布' : '已取消发布')
+  }, 1000)
+}
+
+const {
+  modalVisible,
+  modalAction,
+  modalTitle,
+  modalLoading,
+  handleAdd,
+  handleDelete,
+  handleEdit,
+  handleView,
+  handleSave,
+  modalForm,
+  modalFormRef,
+} = useCRUD({
+  name: '文章',
+  initForm: { author: '大脸怪' },
+  doCreate: api.addPost,
+  doDelete: api.deletePost,
+  doUpdate: api.updatePost,
+  refresh: () => $table.value?.handleSearch(),
+})
+</script>
diff --git a/.vs/ProjectSettings.json b/.vs/ProjectSettings.json
new file mode 100644
index 0000000..866f1e1
--- /dev/null
+++ b/.vs/ProjectSettings.json
@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}
\ No newline at end of file
diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
new file mode 100644
index 0000000..b9b9a4a
--- /dev/null
+++ b/.vs/VSWorkspaceState.json
@@ -0,0 +1,7 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "SelectedNode": "\\C:\\Users\\P17 Gen1\\Source\\Repos\\vue-naive-admin",
+  "PreviewInSolutionExplorer": false
+}
\ No newline at end of file
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
new file mode 100644
index 0000000000000000000000000000000000000000..5aaa25e3cb3bba7781fdfb99c35237ab4db22264
GIT binary patch
literal 98304
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

literal 0
HcmV?d00001

diff --git a/.vs/vue-naive-admin/v16/.suo b/.vs/vue-naive-admin/v16/.suo
new file mode 100644
index 0000000000000000000000000000000000000000..03f5896c6d5d7862486729bc15d39e316a91264e
GIT binary patch
literal 14848
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

literal 0
HcmV?d00001

diff --git a/mock/api/post.js b/mock/api/post.js
index b6c3e54..80ffa1a 100644
--- a/mock/api/post.js
+++ b/mock/api/post.js
@@ -7,6 +7,8 @@ const posts = [
     content: '通常配置rem布局会使用js进行处理，比如750的设计稿会这样',
     isRecommend: true,
     isPublish: true,
+    total_expanse: 100,
+    state: 'approve',
     createDate: '2021-11-04T04:03:36.000Z',
     updateDate: '2021-11-04T04:03:36.000Z',
   },
@@ -17,6 +19,7 @@ const posts = [
     description: '总结的Vue2和Vue3的项目风格',
     content: '### 1. 命名风格\n\n> 文件夹如果是由多个单词组成，应该始终是横线连接 ',
     isRecommend: true,
+    total_expanse: 100,
     isPublish: true,
     createDate: '2021-10-25T08:57:47.000Z',
     updateDate: '2022-02-28T04:02:39.000Z',
@@ -28,6 +31,7 @@ const posts = [
     description: '优雅的给图片添加水印',
     content: '我之前写过一篇文章记录了一次上传图片的优化史',
     isRecommend: true,
+    total_expanse: 100,
     isPublish: true,
     createDate: '2021-06-24T18:46:19.000Z',
     updateDate: '2021-09-23T07:51:22.000Z',
@@ -42,6 +46,7 @@ const posts = [
       '> 背景\n\n公司有个vue-cli3移动端web项目发版更新后发现部分用户手机在钉钉内置浏览器打开出现了缓存',
     isRecommend: true,
     isPublish: true,
+    total_expanse: 100,
     createDate: '2021-06-10T18:51:19.000Z',
     updateDate: '2021-09-17T09:33:24.000Z',
   },
@@ -54,6 +59,7 @@ const posts = [
       '## 1. Promise.all\n\n并行执行多个 promise，并等待所有 promise 都准备就绪。再对它们进行处理。',
     isRecommend: true,
     isPublish: true,
+    total_expanse: 100,
     createDate: '2021-02-22T22:37:06.000Z',
     updateDate: '2021-09-17T09:33:24.000Z',
   },
diff --git a/src/components/table/CrudTable.vue b/src/components/table/CrudTable.vue
index f2a36c0..4d2a39d 100644
--- a/src/components/table/CrudTable.vue
+++ b/src/components/table/CrudTable.vue
@@ -9,6 +9,7 @@
     :scroll-x="scrollX"
     :columns="columns"
     :data="tableData"
+    :summary="getSummary"
     :row-key="(row) => row[rowKey]"
     :pagination="isPagination ? pagination : false"
     @update:checked-row-keys="onChecked"
@@ -46,6 +47,21 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  //获取总结数据
+  getSummary: {
+    type: Function,
+    required: false,
+  },
+  //总结栏所需列名
+  sumaryCol: {
+    type: String,
+    default: 'total_expanse',
+  },
+  //总结数据
+  summaryRef: {
+    type: Object,
+    default: null,
+  },
   /** queryBar中的参数 */
   queryItems: {
     type: Object,
@@ -53,6 +69,7 @@ const props = defineProps({
       return {}
     },
   },
+
   /** 补充参数（可选） */
   extraParams: {
     type: Object,
@@ -75,11 +92,35 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange'])
+const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange', 'setSum'])
 const loading = ref(false)
 const initQuery = { ...props.queryItems }
 const tableData = ref([])
-const pagination = reactive({ page: 1, pageSize: 10 })
+const pagination = reactive({ page: 1, pageSize: 1 })
+
+const getSummary = (pageData) => {
+  // console.log(props.summaryRef)
+  // // eslint-disable-next-line vue/no-mutating-props
+  const sum = pageData.reduce(
+    (prevValue, row) => Number(prevValue) + Number(row[props.sumaryCol]),
+    0
+  )
+  emit('setSum', sum)
+  console.log(props.sumaryCol)
+  return {
+    title: {
+      value: h(
+        'div',
+        { style: 'top:10%' },
+        'Total: ' + Number(sum).toFixed(2)
+        // eslint-disable-next-line vue/no-mutating-props
+        // props.summaryRef.value = num
+        // return num
+      ),
+      colSpan: 10,
+    },
+  }
+}
 
 async function handleQuery() {
   try {
diff --git a/src/views/demo/table/index.vue b/src/views/demo/table/index.vue
index 897a821..31404f5 100644
--- a/src/views/demo/table/index.vue
+++ b/src/views/demo/table/index.vue
@@ -12,7 +12,19 @@
         </n-button>
       </div>
     </template>
-
+    <n-tabs
+      v-model:value="queryItems.state"
+      type="card"
+      animated
+      tab-style="font-weight:600;background-color:rgb(222, 231, 232); margin-bottom:10px;"
+      :on-update:value="selecetChap"
+    >
+      <n-tab v-for="(i, index) in tabsOptions" :id="i.name" :key="index" :name="i.name" style="">
+        <template #default>
+          <div style="">{{ i.text }}</div>
+        </template>
+      </n-tab>
+    </n-tabs>
     <CrudTable
       ref="$table"
       v-model:query-items="queryItems"
@@ -20,6 +32,9 @@
       :scroll-x="1200"
       :columns="columns"
       :get-data="api.getPosts"
+      :summary-ref="sumRef"
+      :sumary-col="current_ms"
+      @setSum="setSum"
       @on-checked="onChecked"
       @on-data-change="(data) => (tableData = data)"
     >
@@ -104,6 +119,10 @@ const queryItems = ref({})
 /** 补充参数（可选） */
 const extraParams = ref({})
 
+//总结数
+const sumRef = ref(0)
+const current_ms = ref('total_expanse')
+
 onActivated(() => {
   $table.value?.handleSearch()
 })
@@ -193,6 +212,41 @@ const columns = [
   },
 ]
 
+//tabs栏
+const tabsOptions = ref([
+  {
+    name: 'tab1',
+    value: 'tab1',
+    text: 'tab1',
+  },
+  {
+    name: 'tab2',
+    value: 'tab2',
+    text: 'tab2',
+  },
+  {
+    name: 'tab3',
+    value: 'tab3',
+    text: 'tab3',
+  },
+  {
+    name: 'tab4',
+    value: 'tab4',
+    text: 'tab4',
+  },
+])
+//设置总结需要传的函数
+function setSum(val) {
+  sumRef.value = val
+  console.log(sumRef.value)
+}
+
+//根据tabs选择状态搜索
+function selecetChap(val) {
+  queryItems.value.state = val
+  $table.value?.handleSearch()
+}
+
 // 选中事件
 function onChecked(rowKeys) {
   if (rowKeys.length) $message.info(`选中${rowKeys.join(' ')}`)