From bb64589dfd71e293fb28ad5cec5d0db97f811599 Mon Sep 17 00:00:00 2001
From: kaeery <3491123437@qq.com>
Date: Sun, 2 Mar 2025 11:36:14 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=8B=9B=E7=94=9F=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E7=AB=AF=E3=80=91=20=E6=96=B0=E5=A2=9E#=20=E5=AD=90=E8=B4=A6?=
 =?UTF-8?q?=E5=8F=B7=E7=AE=A1=E7=90=86=EF=BC=9A=E5=AF=B9=E6=8E=A5=E7=BB=84?=
 =?UTF-8?q?=E7=BB=87=E6=9E=B6=E6=9E=84=E7=9A=84=E7=BC=96=E8=BE=91=E5=92=8C?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../account_center/organization/edit.vue      |  2 +-
 .../components/organization/message-box.vue   | 25 ++++++++++++
 .../organization/organization-tree.vue        |  6 +--
 .../components/organization/structure.vue     |  7 +++-
 .../sub_account/modules/organization.vue      | 39 +++++++++++++++++--
 5 files changed, 71 insertions(+), 8 deletions(-)
 create mode 100644 src/views/account_center/sub_account/components/organization/message-box.vue

diff --git a/src/views/account_center/organization/edit.vue b/src/views/account_center/organization/edit.vue
index e7d3bd6..1ca7d61 100644
--- a/src/views/account_center/organization/edit.vue
+++ b/src/views/account_center/organization/edit.vue
@@ -40,7 +40,7 @@ const formRef = shallowRef<FormInstance>()
 const popupRef = shallowRef<InstanceType<typeof Popup>>()
 const mode = ref('add')
 const popupTitle = computed(() => {
-    return mode.value == 'edit' ? '编辑部门' : '新增部门'
+    return mode.value == 'edit' ? '编辑组织' : '新增组织'
 })
 const formData = reactive({
     id: '',
diff --git a/src/views/account_center/sub_account/components/organization/message-box.vue b/src/views/account_center/sub_account/components/organization/message-box.vue
new file mode 100644
index 0000000..56879a7
--- /dev/null
+++ b/src/views/account_center/sub_account/components/organization/message-box.vue
@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <div class="flex gap-[6px] items-center mb-[2px]">
+            <el-icon color="#E6A23C"><WarningFilled /></el-icon>
+            <span>此操作不可逆，确定删除该组织?</span>
+        </div>
+        <span class="text-[14px] text-[#999] ml-[20px]">此组织下的所有成员也会被删除。</span>
+    </div>
+</template>
+
+<script lang="ts">
+import { WalletFilled, WarningFilled } from '@element-plus/icons-vue'
+
+export default defineComponent({
+    components: {
+        WarningFilled
+    },
+    setup() {
+        return {
+            WalletFilled
+        }
+    }
+})
+</script>
+<style scoped></style>
diff --git a/src/views/account_center/sub_account/components/organization/organization-tree.vue b/src/views/account_center/sub_account/components/organization/organization-tree.vue
index 028131c..0ee1cbb 100644
--- a/src/views/account_center/sub_account/components/organization/organization-tree.vue
+++ b/src/views/account_center/sub_account/components/organization/organization-tree.vue
@@ -60,7 +60,7 @@ const props = defineProps({
         type: [String, Number]
     }
 })
-const emit = defineEmits(['setGroupLeader'])
+const emit = defineEmits(['setGroupLeader', 'handleOrganization', 'handleDelete'])
 const defaultProps = {
     children: 'children',
     label: 'name',
@@ -90,10 +90,10 @@ const handleCommand = (args: any[], data: Tree) => {
     const command = args[0]
     switch (command) {
         case 'editOrganization':
-            parent?.fetchOrganizationList()
+            emit('handleOrganization', 'edit', data)
             break
         case 'deleteOrganization':
-            parent?.fetchOrganizationList()
+            emit('handleDelete', data)
             break
         case 'setGroupLeader':
             emit('setGroupLeader', data)
diff --git a/src/views/account_center/sub_account/components/organization/structure.vue b/src/views/account_center/sub_account/components/organization/structure.vue
index ed9360d..5385f48 100644
--- a/src/views/account_center/sub_account/components/organization/structure.vue
+++ b/src/views/account_center/sub_account/components/organization/structure.vue
@@ -18,8 +18,13 @@
 <script setup lang="ts">
 import { ORGANIZATION_INJECTION_KEY } from '@/config/symbol'
 
+const emit = defineEmits(['handleOrganization'])
+
 const parent = inject(ORGANIZATION_INJECTION_KEY)
-const handleAddOrganzation = () => {}
+const handleAddOrganzation = () => {
+    emit('handleOrganization', 'add')
+}
+
 const handleRefreshOrganization = () => {
     parent?.fetchOrganizationList()
 }
diff --git a/src/views/account_center/sub_account/modules/organization.vue b/src/views/account_center/sub_account/modules/organization.vue
index eef7c5c..3d90208 100644
--- a/src/views/account_center/sub_account/modules/organization.vue
+++ b/src/views/account_center/sub_account/modules/organization.vue
@@ -1,24 +1,31 @@
 <template>
     <div class="flex flex-col w-[240px] border-r-solid-light2">
-        <structure />
+        <structure @handle-organization="handleOrganization" />
         <organization-tree
             ref="organizationTreeRef"
             :data="data"
             :loading="loading"
             :currentNodeKey="curSelectedNode?.id"
             @set-group-leader="setGroupLeader"
+            @handle-organization="handleOrganization"
+            @handle-delete="handleDelete"
         />
     </div>
     <group-leader-dialog ref="groupLeaderDialogRef" @refresh-list="$emit('fetchTableList')" />
+    <edit-popup v-if="showEdit" ref="editRef" @success="fetchOrganizationList" @close="showEdit = false" />
 </template>
 
 <script setup lang="ts">
+import type { PropType } from 'vue'
 import structure from '../components/organization/structure.vue'
 import organizationTree, { type Tree } from '../components/organization/organization-tree.vue'
 import groupLeaderDialog from '../components/organization/groupLeader-dialog.vue'
+import editPopup from '@/views/account_center/organization/edit.vue'
+import MessageBoxContent from '../components/organization/message-box.vue'
 import { ORGANIZATION_INJECTION_KEY } from '@/config/symbol'
-import type { PropType } from 'vue'
-import { organzationLists } from '@/api/account_center/organization'
+import { organzationDelete, organzationLists } from '@/api/account_center/organization'
+import { ElMessageBox } from 'element-plus'
+import feedback from '@/utils/feedback'
 
 defineProps({
     curSelectedNode: {
@@ -56,6 +63,32 @@ const setGroupLeader = (data: Tree) => {
         data
     })
 }
+const showEdit = ref(false)
+const editRef = ref<InstanceType<typeof editPopup>>()
+const handleOrganization = async (mode: 'add' | 'edit', data?: any) => {
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open(mode)
+    mode == 'edit' && editRef.value?.getDetail(data)
+}
+const handleDelete = (data?: Tree) => {
+    ElMessageBox({
+        title: '温馨提示',
+        showCancelButton: true,
+        message: () => {
+            return h(MessageBoxContent)
+        },
+        callback: (value: string) => {
+            if (value == 'confirm') {
+                organzationDelete({ id: data?.id }).then(() => {
+                    feedback.msgSuccess('删除成功')
+                    fetchOrganizationList()
+                })
+            } else if (value == 'cancel') {
+            }
+        }
+    })
+}
 </script>
 
 <style scoped lang="scss"></style>