机构管理机构树的按钮以及事件

src/views/system/institution/AccountModal.vue

@@ -7,7 +7,7 @@
 import {ref, computed, unref, reactive} from 'vue';
   import { BasicModal, useModalInner } from '@/components/Modal';
   import { BasicForm, useForm } from '@/components/Form';
-  import { accountFormSchema } from './account.data';
+  import { accountFormSchema } from './institution.data';
   import { getDeptList } from '@/api/system/dept/dept';
   import {addUserApi,UserDetailApi,UserUpdataApi} from '@/api/system/user/user'
   import { encryptTwo } from '../../../../src/utils/jsencrypt.js'

src/views/system/institution/DeptTree.vue

@@ -11,22 +11,32 @@
       :treeData="treeData"
       :fieldNames="{ key: 'businessId', title: 'institutionName' }"
       @select="handleSelect"
+      :actionList="actionList"
     />
   </div>
+  <MoveTreeModal @register="registerMoveTreeModel" @success="handleSuccess" />
+  <UpdateTreeModal @register="registerModal" @success="handleSuccess" />
 </template>
 <script lang="ts" setup>
-import {nextTick, onMounted, ref, unref} from 'vue';
-  import {BasicTree, TreeActionType, TreeItem} from '@/components/Tree';
-  import { getDeptList } from '@/api/system/dept/dept';
-  import {Nullable} from "@vben/types";
-  import { TreeData } from "@/views/system/institution/institutionData";
+import {h, nextTick, onMounted, ref, unref} from 'vue';
+import {BasicTree, TreeActionItem, TreeActionType, TreeItem} from '@/components/Tree';
+import { getDeptList } from '@/api/system/dept/dept';
+import {Nullable} from "@vben/types";
+import { TreeData } from "@/views/system/institution/institutionData";
+import {DeleteOutlined, PlusOutlined,EditOutlined,FolderOutlined } from "@ant-design/icons-vue";
+import {Modal} from "ant-design-vue";
+import { useMessage } from '@/hooks/web/useMessage';
+import MoveTreeModal from './MoveTreeModal.vue';
+import UpdateTreeModal from './UpdateTreeModal.vue';
+import {useModal} from "@/components/Modal";
+defineOptions({ name: 'DeptTree' });
 
-  defineOptions({ name: 'DeptTree' });
-
-  const emit = defineEmits(['select']);
-
-  const treeData = ref<TreeItem[]>([]);
-  const treeRef = ref<Nullable<TreeActionType>>(null);
+const emit = defineEmits(['select']);
+const { createMessage } = useMessage();
+const treeData = ref<TreeItem[]>([]);
+const treeRef = ref<Nullable<TreeActionType>>(null);
+const [registerModal, { openModal }] = useModal();
+const [registerMoveTreeModel, { openModal:openMoveTreeModel }] = useModal();
 function getTree() {
   const tree = unref(treeRef);
   if (!tree) {
@@ -43,31 +53,131 @@ async function fetch() {
   })
   }
 
-  function handleTree(data, id, parentId, children, rootId) {
-    id = id || 'id'
-    parentId = parentId || 'parentId'
-    children = children || 'children'
-    rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
-    // 对源数据深度克隆
-    const cloneData = JSON.parse(JSON.stringify(data))
-    // 循环所有项
-    const treeData = cloneData.filter(father => {
-      const branchArr = cloneData.filter(child => {
-        // 返回每一项的子级数组
-        return father[id] === child[parentId]
-      })
-      branchArr.length > 0 ? father.children = branchArr : ''
-      // 返回第一层
-      return father[parentId] === rootId
+function handleTree(data, id, parentId, children, rootId) {
+  id = id || 'id'
+  parentId = parentId || 'parentId'
+  children = children || 'children'
+  rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
+  // 对源数据深度克隆
+  const cloneData = JSON.parse(JSON.stringify(data))
+  // 循环所有项
+  const treeData = cloneData.filter(father => {
+    const branchArr = cloneData.filter(child => {
+      // 返回每一项的子级数组
+      return father[id] === child[parentId]
     })
-    return treeData !== '' ? treeData : data
-  }
+    branchArr.length > 0 ? father.children = branchArr : ''
+    // 返回第一层
+    return father[parentId] === rootId
+  })
+  return treeData !== '' ? treeData : data
+}
 
-  function handleSelect(keys) {
-    emit('select', keys[0]);
-  }
+function handleSelect(keys) {
+  emit('select', keys[0]);
+}
+
+onMounted(() => {
+  fetch();
+});
+
+/** 成功回调函数*/
+function handleSuccess() {
+
+}
+
+// 树的操作列表
+const actionList = [
+  {
+    //新增
+    render: (node) => {
+      return h(PlusOutlined, {
+        class: 'ml-2',
+        onClick: () => {
+          handleAdd(node);
+        },
+      });
+    },
+  },
+  {
+    //修改
+    render: (node) => {
+      return h(EditOutlined, {
+        class: 'ml-2',
+        onClick: () => {
+          handleUpdate(node);
+        },
+      });
+    },
+  },
+  {
+    //删除
+    render: (node) => {
+      return h(DeleteOutlined, {
+        class: 'ml-2',
+        onClick: () => {
+          handleDelete(node);
+        },
+      });
+    },
+  },
+  {
+    //移动
+    render: (node) => {
+      return h(FolderOutlined, {
+        class: 'ml-2',
+        onClick: () => {
+          handleMove(node);
+        },
+      });
+    },
+  },
+];
 
-  onMounted(() => {
-    fetch();
+
+// 新增节点
+const handleAdd = (node) => {
+  openModal(true, {
+    isAdd: true,
+    record: node,
+  });
+
+};
+
+// 修改节点
+const handleUpdate = (node) => {
+  openModal(true, {
+    isUpdate: true,
+    record: node,
   });
+
+};
+
+// 移动节点
+const handleMove = (node) => {
+  openMoveTreeModel(true, {
+    isMove: true,
+    record: node,
+  });
+
+};
+
+// 删除节点
+const handleDelete = (node) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '确定要删除此节点吗？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk() {
+      // 执行删除逻辑
+      createMessage.success('删除成功!')
+    },
+    onCancel() {
+      console.log('取消删除');
+      createMessage.info('取消删除')
+    },
+  });
+};
+
 </script>

src/views/system/institution/MoveTreeModal.vue

+<template>
+  <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {ref, computed, unref, reactive} from 'vue';
+import { BasicModal, useModalInner } from '@/components/Modal';
+import { BasicForm, useForm } from '@/components/Form';
+import {AddTreeSchema, MoveFormSchema} from './institution.data';
+import { useMessage } from '@/hooks/web/useMessage';
+import {TreeData} from "@/views/system/institution/institutionData";
+defineOptions({ name: 'AccountModal' });
+
+const emit = defineEmits(['success', 'register']);
+const { createMessage } = useMessage();
+const isUpdate = ref(true);
+const isMove = ref(false);
+const rowId = ref('')
+const form = ref([])
+//获取接口数据并放在下拉框里（这里是打开了一个弹框）
+//初始化表单
+const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+  labelWidth: 100,
+  baseColProps: { lg: 12, md: 24 },
+  schemas: MoveFormSchema,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23,
+  },
+});
+//初始化弹框
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  resetFields();
+  setModalProps({ confirmLoading: false });
+  form.value = data.record
+  const formData = {
+    institutionId: data.record.parentId,
+  }
+
+  // 塞值
+  setFieldsValue({
+    ...formData,
+  });
+
+  const treeList =  handleTree(TreeData, 'businessId',undefined,undefined,undefined)
+  updateSchema([
+    {
+      field: 'institutionId',
+      componentProps: {
+        treeData: treeList
+      },
+    },
+  ]);
+});
+
+const getTitle = computed(() => ('移动'));
+
+function handleTree(data, id, parentId, children, rootId) {
+  id = id || 'id'
+  parentId = parentId || 'parentId'
+  children = children || 'children'
+  rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
+  // 对源数据深度克隆
+  const cloneData = JSON.parse(JSON.stringify(data))
+  // 循环所有项
+  const treeData = cloneData.filter(father => {
+    const branchArr = cloneData.filter(child => {
+      // 返回每一项的子级数组
+      return father[id] === child[parentId]
+    })
+    branchArr.length > 0 ? father.children = branchArr : ''
+    // 返回第一层
+    return father[parentId] === rootId
+  })
+  return treeData !== '' ? treeData : data
+}
+
+/**确定按钮*/
+async function handleSubmit() {
+  const values = await validate();
+  createMessage.success('移动成功')
+  closeModal()
+}
+
+// 格式化日期
+function formatDate(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+</script>

src/views/system/institution/UpdateTreeModal.vue

+<template>
+  <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {ref, computed, unref, reactive} from 'vue';
+import { BasicModal, useModalInner } from '@/components/Modal';
+import { BasicForm, useForm } from '@/components/Form';
+import {AddTreeSchema} from './institution.data';
+import { useMessage } from '@/hooks/web/useMessage';
+import {TreeData} from "@/views/system/institution/institutionData";
+defineOptions({ name: 'AccountModal' });
+
+const emit = defineEmits(['success', 'register']);
+const { createMessage } = useMessage();
+const isUpdate = ref(true);
+const isMove = ref(false);
+const isAdd = ref(false);
+const rowId = ref('');
+//获取接口数据并放在下拉框里（这里是打开了一个弹框）
+//初始化表单
+const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+  labelWidth: 100,
+  baseColProps: { lg: 12, md: 24 },
+  schemas: AddTreeSchema,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23,
+  },
+});
+//初始化弹框
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  resetFields();
+  setModalProps({ confirmLoading: false });
+  //修改
+  isAdd.value = !!data?.isAdd;
+  //修改
+  isUpdate.value = !!data?.isUpdate;
+  if (unref(isUpdate)) {
+    //修改
+    // 获取行数据的id
+    rowId.value = data.record.businessId;
+    const formData = {
+      institutionId: data.record.parentId,
+      institutionName: data.record.anotherName,
+      code:data.record.code
+    }
+    // 塞值
+    setFieldsValue({
+      ...formData,
+    });
+  }else if (unref(isAdd)){
+    //新增
+
+  }
+
+  const treeList =  handleTree(TreeData, 'businessId',undefined,undefined,undefined)
+  updateSchema([
+    {
+      field: 'institutionId',
+      componentProps: {
+        treeData: treeList
+      },
+    },
+  ]);
+});
+
+const getTitle = computed(() => (!unref(isUpdate) ? '新增机构' : '编辑机构'));
+
+function handleTree(data, id, parentId, children, rootId) {
+  id = id || 'id'
+  parentId = parentId || 'parentId'
+  children = children || 'children'
+  rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
+  // 对源数据深度克隆
+  const cloneData = JSON.parse(JSON.stringify(data))
+  // 循环所有项
+  const treeData = cloneData.filter(father => {
+    const branchArr = cloneData.filter(child => {
+      // 返回每一项的子级数组
+      return father[id] === child[parentId]
+    })
+    branchArr.length > 0 ? father.children = branchArr : ''
+    // 返回第一层
+    return father[parentId] === rootId
+  })
+  return treeData !== '' ? treeData : data
+}
+
+/**确定按钮*/
+async function handleSubmit() {
+  const values = await validate();
+  if (unref(isUpdate)){
+    createMessage.success('修改成功')
+    closeModal()
+  }else if (!unref(isUpdate)){
+    createMessage.success('新增成功')
+    closeModal()
+  }
+
+}
+
+// 格式化日期
+function formatDate(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+</script>

src/views/system/institution/index.vue

@@ -50,7 +50,7 @@
   import AccountModal from './AccountModal.vue';
   import importModal from './importModal.vue';
   import MoveUser from './moveUser.vue';
-  import { columns, searchFormSchema } from './account.data';
+  import { columns, searchFormSchema } from './institution.data';
   import { useGo } from '@/hooks/web/usePage';
   import { downloadByData } from '@/utils/file/download';
   import { useRoute,onBeforeRouteLeave } from 'vue-router';

src/views/system/institution/account.data.ts → src/views/system/institution/institution.data.ts

@@ -110,7 +110,37 @@ export const accountFormSchema: any[] = [
 export const MoveFormSchema: any[] = [
   {
     field: 'institutionId',
-    label: '所属机构',
+    label: '目标机构',
+    component: 'TreeSelect',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      fieldNames: {
+        label: 'institutionName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
+]
+
+/**新增*/
+export const AddTreeSchema: any[] = [
+  {
+    field: 'institutionName',
+    label: '机构名称',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    rules: [
+      {
+        required: true,
+        message: '请输入姓名',
+      },
+    ],
+  },
+  {
+    field: 'institutionId',
+    label: '上级机构',
     component: 'TreeSelect',
     colProps: { lg: 24, md: 24 },
     componentProps: {
@@ -122,4 +152,17 @@ export const MoveFormSchema: any[] = [
     },
     required: true,
   },
+  {
+    field: 'code',
+    label: '机构编码',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    rules: [
+      {
+        required: true,
+        message: '请输入机构编码',
+      },
+    ],
+  },
 ]
+

src/views/system/institution/institutionData.ts

@@ -57,8 +57,9 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 100,
     "institutionName" : "机构管理",
+    "anotherName":"机构管理",
     "parentId" : 0,
-    "code:": "001",
+    "code": "DataGovernanceDep_product1",
     "ancestors" : "0",
     "orderNum" : 0,
     "children" : [ ],
@@ -70,8 +71,9 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 101,
     "institutionName" : "数据平台治理部",
+    "anotherName":"数据平台治理部",
     "parentId" : 100,
-    "code:": "002",
+    "code": "DataGovernanceDep_product2",
     "ancestors" : "0,100",
     "orderNum" : 1,
     "children" : [ ],
@@ -83,8 +85,9 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 107,
     "institutionName" : "数据资源管理部",
+    "anotherName":"数据资源管理部",
     "parentId" : 100,
-    "code:": "003",
+    "code": "DataGovernanceDep_product3",
     "ancestors" : "0,100",
     "orderNum" : 2,
     "children" : [ ],
@@ -96,8 +99,9 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 102,
     "institutionName" : "研发部门",
+    "anotherName":"研发部门",
     "parentId" : 101,
-    "code:": "004",
+    "code": "DataGovernanceDep_product4",
     "ancestors" : "0,100,101",
     "orderNum" : 1,
     "children" : [ ],
@@ -109,8 +113,9 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 103,
     "institutionName" : "市场部门",
+    "anotherName":"市场部门",
     "parentId" : 101,
-    "code:": "005",
+    "code": "DataGovernanceDep_product5",
     "ancestors" : "0,100,101",
     "orderNum" : 2,
     "children" : [ ],
@@ -122,8 +127,9 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 104,
     "institutionName" : "测试部门",
+    "anotherName":"测试部门",
     "parentId" : 101,
-    "code:": "006",
+    "code": "DataGovernanceDep_product6",
     "ancestors" : "0,100,101",
     "orderNum" : 3,
     "children" : [ ],
@@ -135,8 +141,9 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 105,
     "institutionName" : "财务部门",
+    "anotherName":"财务部门",
     "parentId" : 101,
-    "code:": "007",
+    "code": "DataGovernanceDep_product7",
     "ancestors" : "0,100,101",
     "orderNum" : 4,
     "children" : [ ],
@@ -148,8 +155,9 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 106,
     "institutionName" : "运维部门",
+    "anotherName":"运维部门",
     "parentId" : 101,
-    "code:": "008",
+    "code": "DataGovernanceDep_product8",
     "ancestors" : "0,100,101",
     "orderNum" : 5,
     "children" : [ ],
@@ -161,8 +169,9 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 202,
     "institutionName" : "数据部门",
+    "anotherName":"数据部门",
     "parentId" : 107,
-    "code:": "009",
+    "code": "DataGovernanceDep_product9",
     "ancestors" : "0,100,107",
     "orderNum" : 1,
     "children" : [ ],
@@ -174,8 +183,9 @@ export const TreeData: any[] = [
     "flag" : "0",
     "businessId" : 203,
     "institutionName" : "检查部门",
+    "anotherName":"检查部门",
     "parentId" : 107,
-    "code:": "010",
+    "code": "DataGovernanceDep_product10",
     "ancestors" : "0,100,107",
     "orderNum" : 2,
     "children" : [ ],

src/views/system/institution/moveUser.vue

@@ -7,7 +7,7 @@
 import {ref, computed, unref, reactive} from 'vue';
 import { BasicModal, useModalInner } from '@/components/Modal';
 import { BasicForm, useForm } from '@/components/Form';
-import {accountFormSchema, MoveFormSchema, resetPasswordFormSchema} from './account.data';
+import {accountFormSchema, MoveFormSchema, resetPasswordFormSchema} from './institution.data';
 import { getDeptList } from '@/api/system/dept/dept';
 import {resetUserPwd} from '@/api/system/user/user'
 import { encryptTwo } from '../../../../src/utils/jsencrypt.js'