From e1dbf60b536abc743a946d0194e55d413535e7ad Mon Sep 17 00:00:00 2001
From: wangzenghua <1048523306@qq.com>
Date: Tue, 11 Mar 2025 09:39:25 +0100
Subject: [PATCH] =?UTF-8?q?feat:action/tree=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/custom-table-operate/index.vue |  8 ++-
 .../components/custom-table-tree/index.vue    | 67 +++++++++++++++++++
 main/src/components/index.js                  | 13 +++-
 3 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 main/src/components/custom-table-tree/index.vue

diff --git a/main/src/components/custom-table-operate/index.vue b/main/src/components/custom-table-operate/index.vue
index 9e86264..3504e34 100644
--- a/main/src/components/custom-table-operate/index.vue
+++ b/main/src/components/custom-table-operate/index.vue
@@ -5,8 +5,8 @@
       <el-dropdown-menu v-if="!isEmpty(actions)">
         <template v-for="item in actions" :key="item.name">
           <el-dropdown-item v-if="onPermission(item)" @click="item.event(data)">
-            <el-button :type="item.type ?? 'primary'" :icon="item.icon" :size="item.size" :disabled="item.disabled" text>
-              {{ item.name }}
+            <el-button :type="item.type ?? 'primary'" :icon="formatterIcon(item)" :size="item.size" :disabled="item.disabled" text>
+              {{ item.name || item.formatter(data) }}
             </el-button>
           </el-dropdown-item>
         </template>
@@ -26,6 +26,10 @@ const onPermission = (row) => {
   if (row.auth === undefined) return true;
   return typeof row.auth === 'function' ? row.auth(props.data) : row.auth;
 };
+
+const formatterIcon = (row) => {
+  return typeof row.icon === 'function' ? row.icon(props.data) : row.icon;
+};
 </script>
 <style lang="scss" scoped>
 .custom-table-operate {
diff --git a/main/src/components/custom-table-tree/index.vue b/main/src/components/custom-table-tree/index.vue
new file mode 100644
index 0000000..8caddec
--- /dev/null
+++ b/main/src/components/custom-table-tree/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <div :class="`custom-table-tree ${shadow ? 'custom-table-tree__shadow' : ''}`">
+    <div v-if="title" class="title">{{ title }}</div>
+    <el-tree
+      node-key="id"
+      :data="data"
+      :show-checkbox="option.showCheckbox"
+      :default-expanded-keys="option.defaultExpandedKeys"
+      :default-checked-keys="option.defaultCheckedKeys"
+      :props="option.defaultProps"
+      @node-click="handleNodeClick"
+    />
+  </div>
+</template>
+<script setup name="custom-table-tree">
+const props = defineProps({
+  title: { type: String, default: '' },
+  shadow: { type: Boolean, default: true },
+  data: { type: Array, default: () => [] },
+  option: {
+    type: Object,
+    default: () => {
+      return {
+        showCheckbox: false,
+        defaultProps: {
+          children: 'children',
+          label: 'label',
+        },
+        defaultExpandedKeys: [],
+        defaultCheckedKeys: [],
+      };
+    },
+  },
+});
+const emit = defineEmits(['node-click']);
+
+const handleNodeClick = (data) => {
+  emit('node-click', data);
+};
+</script>
+<style lang="scss" scoped>
+.custom-table-tree {
+  width: 100%;
+  height: 100%;
+  min-width: 200px;
+  @include flex-column();
+
+  &__shadow {
+    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1);
+  }
+
+  .title {
+    height: 36px;
+    padding: 0 20px;
+    line-height: 36px;
+    border-radius: 4px;
+    font-size: 16px;
+    color: #fff;
+    background: var(--el-color-primary);
+  }
+
+  .el-tree {
+    padding: 16px 10px 10px;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/main/src/components/index.js b/main/src/components/index.js
index b95d513..9e092b9 100644
--- a/main/src/components/index.js
+++ b/main/src/components/index.js
@@ -1,5 +1,6 @@
 import SvgIcon from './svg-icon';
 import CustomTableOperate from './custom-table-operate';
+import CustomTableTree from './custom-table-tree';
 import CustomImportExcel from './custom-import-excel';
 import CustomRichEditor from './custom-rich-editor';
 import CustomEchartBar from './custom-echart-bar';
@@ -7,4 +8,14 @@ import CustomEchartPie from './custom-echart-pie';
 import CustomEchartLine from './custom-echart-line';
 import CustomEchartMixin from './custom-echart-mixin';
 
-export { SvgIcon, CustomTableOperate, CustomImportExcel, CustomRichEditor, CustomEchartBar, CustomEchartPie, CustomEchartLine, CustomEchartMixin };
+export {
+  SvgIcon,
+  CustomTableOperate,
+  CustomTableTree,
+  CustomImportExcel,
+  CustomRichEditor,
+  CustomEchartBar,
+  CustomEchartPie,
+  CustomEchartLine,
+  CustomEchartMixin,
+};