【招生用户端】 新增# 子账号管理：对接组织架构的编辑和删除接口

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: '',

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>

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)

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()
 }

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>