From 3cbb6061c5c5dc30fbf7de964cb1a465aa32e59f Mon Sep 17 00:00:00 2001
From: xiangshu233 <xiangshu233@outlook.com>
Date: Thu, 14 Jul 2022 16:31:31 +0800
Subject: [PATCH] =?UTF-8?q?BaseTableActin=20=E6=96=B0=E5=A2=9E=20icon=20?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B9=20+=20=E8=A1=A8=E6=A0=BC=E6=96=91?=
 =?UTF-8?q?=E9=A9=AC=E7=BA=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/src/Table.vue             | 18 +++++++++++++++++-
 .../Table/src/components/TableAction.vue       |  7 ++++++-
 src/components/Table/src/props.ts              |  2 +-
 src/components/Table/src/types/tableAction.ts  |  9 ++++++---
 src/views/comp/table/basic.vue                 | 12 +++++++++---
 5 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue
index 974e56c..49c35c9 100644
--- a/src/components/Table/src/Table.vue
+++ b/src/components/Table/src/Table.vue
@@ -22,6 +22,17 @@
       <!--顶部右侧区域-->
       <slot name="toolbar"></slot>
 
+      <!--斑马纹-->
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <div class="mr-2 table-toolbar-right-icon">
+            <n-switch v-model:value="isStriped" @update:value="setStriped" />
+          </div>
+        </template>
+        <span>表格斑马纹</span>
+      </n-tooltip>
+      <n-divider vertical />
+
       <!--刷新-->
       <n-tooltip trigger="hover">
         <template #trigger>
@@ -61,6 +72,7 @@
     <n-data-table
       ref="tableElRef"
       v-bind="getBindValues"
+      :striped="isStriped"
       :pagination="pagination"
       @update:page="updatePage"
       @update:page-size="updatePageSize"
@@ -144,7 +156,7 @@
       const tableElRef = ref<ComponentRef>(null);
       const wrapRef = ref<Nullable<HTMLDivElement>>(null);
       let paginationEl: HTMLElement | null;
-
+      const isStriped = ref(false);
       const tableData = ref<Recordable[]>([]);
       const innerPropsRef = ref<Partial<BasicTableProps>>();
 
@@ -223,6 +235,8 @@
         innerPropsRef.value = { ...unref(innerPropsRef), ...props };
       }
 
+      const setStriped = (value: boolean) => (isStriped.value = value);
+
       const tableAction = {
         reload,
         setColumns,
@@ -288,6 +302,8 @@
         updatePageSize,
         pagination,
         tableAction,
+        setStriped,
+        isStriped,
       };
     },
   });
diff --git a/src/components/Table/src/components/TableAction.vue b/src/components/Table/src/components/TableAction.vue
index 6147b5b..c85b467 100644
--- a/src/components/Table/src/components/TableAction.vue
+++ b/src/components/Table/src/components/TableAction.vue
@@ -2,7 +2,12 @@
   <div class="tableAction">
     <div class="flex items-center justify-center">
       <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
-        <n-button v-bind="action" class="mx-2">{{ action.label }}</n-button>
+        <n-button v-bind="action" class="mx-2">
+          {{ action.label }}
+          <template #icon v-if="action.hasOwnProperty('icon')">
+            <n-icon :component="action.icon" />
+          </template>
+        </n-button>
       </template>
       <n-dropdown
         v-if="dropDownActions && getDropdownList.length"
diff --git a/src/components/Table/src/props.ts b/src/components/Table/src/props.ts
index 10c0e1e..34b9111 100644
--- a/src/components/Table/src/props.ts
+++ b/src/components/Table/src/props.ts
@@ -43,7 +43,7 @@ export const basicProps = {
   },
   pagination: {
     type: [Object, Boolean],
-    default: () => { },
+    default: () => {},
   },
   //废弃
   showPagination: {
diff --git a/src/components/Table/src/types/tableAction.ts b/src/components/Table/src/types/tableAction.ts
index 6452e02..27d483f 100644
--- a/src/components/Table/src/types/tableAction.ts
+++ b/src/components/Table/src/types/tableAction.ts
@@ -1,10 +1,13 @@
 import { NButton } from 'naive-ui';
+import type { Component } from 'vue';
 import { PermissionsEnum } from '@/enums/permissionsEnum';
 export interface ActionItem extends Partial<InstanceType<typeof NButton>> {
   onClick?: Fn;
   label?: string;
-  color?: 'success' | 'error' | 'warning';
-  icon?: string;
+  type?: 'success' | 'error' | 'warning' | 'info' | 'primary' | 'default';
+  // 设定 color 后会覆盖 type 的样式
+  color?: string;
+  icon?: Component;
   popConfirm?: PopConfirm;
   disabled?: boolean;
   divider?: boolean;
@@ -20,5 +23,5 @@ export interface PopConfirm {
   cancelText?: string;
   confirm: Fn;
   cancel?: Fn;
-  icon?: string;
+  icon?: Component;
 }
diff --git a/src/views/comp/table/basic.vue b/src/views/comp/table/basic.vue
index 4750cf3..46bcbdd 100644
--- a/src/views/comp/table/basic.vue
+++ b/src/views/comp/table/basic.vue
@@ -24,6 +24,7 @@
   import { getTableList } from '@/api/table/list';
   import { columns } from './basicColumns';
   import { useDialog, useMessage } from 'naive-ui';
+  import { DeleteOutlined, EditOutlined } from '@vicons/antd';
 
   const message = useMessage();
   const dialog = useDialog();
@@ -41,8 +42,8 @@
     fixed: 'right',
     align: 'center',
     render(record) {
-      return h(TableAction, {
-        style: 'button',
+      return h(TableAction as any, {
+        style: 'text',
         actions: createActions(record),
       });
     },
@@ -52,7 +53,10 @@
     return [
       {
         label: '删除',
-        icon: 'ic:outline-delete-outline',
+        type: 'error',
+        // 配置 color 会覆盖 type
+        color: 'red',
+        icon: DeleteOutlined,
         onClick: handleDelete.bind(null, record),
         // 根据业务控制是否显示 isShow 和 auth 是并且关系
         ifShow: () => {
@@ -63,6 +67,8 @@
       },
       {
         label: '编辑',
+        type: 'primary',
+        icon: EditOutlined,
         onClick: handleEdit.bind(null, record),
         ifShow: () => {
           return true;