fix: ui

src/api/system/dept/index.js

@@ -0,0 +1,60 @@
+import { request } from '@/utils/request'
+
+export function getDeptList() {
+  return request({
+    url: 'sys/dept/list',
+    method: 'get'
+  })
+}
+
+export function moveDeptList(data) {
+  return request({
+    url: 'sys/dept/move',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteDept(data) {
+  return request({
+    url: 'sys/dept/delete',
+    method: 'post',
+    data
+  }, {
+    successMsg: '删除成功'
+  })
+}
+
+
+export function updateDept(data) {
+  return request({
+    url: 'sys/dept/update',
+    method: 'post',
+    data,
+  });
+}
+
+export function createDept(data) {
+  return request({
+    url: 'sys/dept/add',
+    method: 'post',
+    data
+  })
+}
+
+
+export function getDeptInfo(params) {
+  return request({
+    url: 'sys/dept/info',
+    method: 'get',
+    params
+  })
+}
+
+export function transferDept(data) {
+  return request({
+    url: 'sys/dept/transfer',
+    method: 'post',
+    data
+  })
+}

src/hooks/useModal/index.js

@@ -1 +1,9 @@
-export default {}
+import { installUseModal } from './useModal'
+
+// 导出
+export { useFormModal } from './useFromModal'
+export { useModal } from './useFormModal'
+export const install = (app) => {
+  installUseModal(app)
+}
+export default install

src/hooks/useModal/modal.jsx

@@ -0,0 +1,8 @@
+import { installUseModal, useModal } from './useModal'
+// export { useFormModal } from './useFromModal'
+export const install = (app) => {
+  installUseModal(app)
+}
+
+
+export default install

src/hooks/useModal/useFormModal.jsx

@@ -0,0 +1,43 @@
+import { omit } from 'lodash-es'
+import { nextTick, ref, unref } from "vue"
+import SchemaForm from '@/components/core/schema-form'
+
+export function useFormModal() {
+  const [ModalRender] = useModal()
+
+  const showModal = async ({modalProps, formProps}) => {
+    const formRef = ref()
+    const onCancel = (e) => {
+      formRef.value?.resetFields()
+      modalProps?.onCancel?.(e)
+    }
+
+    await ModalRender.show({
+      destroyOnClose: true,
+      ...omit(modalProps, ['onFinish', 'onFail']),
+      onCancel,
+      content: () => {
+        const _formProps = Object.assign({}, { showActionButtonGroup: false}, formProps)
+
+        return <SchemaForm ref={formRef} {..._formProps}></SchemaForm>
+      },
+      onOk: async () => {
+        let values;
+        try {
+          values = await formRef.value?.validate();
+          await modalProps?.onFinish?.(values);
+          formRef.value?.resetFields()
+        } catch(error) {
+          modalProps?.onFail?.(values)
+          return Promise.reject(error)
+        }
+      }
+    })
+
+    await nextTick()
+
+    return [unref(formRef)]
+  }
+
+  return [showModal, ModalRender]
+}

src/hooks/useModal/useModal.jsx

@@ -0,0 +1,68 @@
+import { createVNode, nextTick,getCurrentInstance, render } from "vue";
+import { MyModal } from './modal'
+let _app;
+
+export const useModal = () => {
+  let _modalInstallce;
+  const modalRef = ref();
+  const appContent = _app?._conotent || getCurrentInstance()?.appContent; // TODO: 这里的作用
+  const isAppChild = ref(false);
+
+  const getModalInstance = async () => {
+    await nextTick()
+    if(isAppChild.value && modalRef.value) {
+      return modalRef.value
+    }
+
+    if(_modalInstallce) {
+      return _modalInstallce
+    }
+
+    const container = document.createElement('div')
+    const vnode = createVNode(MyModal)
+    vnode.appContext = appContent
+    render(vnode, container)
+
+    _modalInstallce = vnode.component;
+    _modalInstallce.props.closeModal = hide;
+    return _modalInstallce;
+  }
+
+  const setProps = async (_props) => {
+    const instance = await getModalInstance()
+    if(Object.is(instance, modalRef.value)) {
+      instance?.exposed?.setProps?.(_props)
+    } else {
+      instance?.exposed?.setProps?.(_props)
+    }
+  }
+
+  const hide = () => {
+    setProps({visible: false})
+  }
+
+  const show = async (props) => {
+    setProps({
+      ...props,
+      closeModal: hide,
+      visible: true
+    })
+  }
+
+  await nextTick()
+
+  const ModalRender = (props, { attrs, slots}) => {
+    isAppChild.value = true
+    return <MyModal ref={modalRef} {...{...attrs, ...props }} v-slots={slots} />
+  }
+
+  ModalRender.show = show
+  ModalRender.hide = hide
+  ModalRender.setProps = setProps
+
+  return [ModalRender, modalRef]
+}
+
+export const installUseModal = (app) => {
+  _app = app
+}

src/utils/index.js

@@ -15,6 +15,83 @@ export function uniqueSlash(path) {
 }
 
 
-export function formatMenu2Tree() {
 
+/**
+ * 渲染菜单至树形控件
+ * @param {Array} menus 所有菜单
+ * @param {Number | null} parentId 父级菜单ID
+ * @param {number[]|string[]} keyPath ID路径
+ */
+
+export function formatMenu2Tree(menus, parentId, keyPath = []) {
+  return menus
+    .filter((item) => item.parentId === parentId)
+    .map((item) => {
+      const _keyPath = keyPath.concat(parentId || []);
+      const arr = formatMenu2Tree(menus, item.id, _keyPath);
+      return Object.assign(item, {
+        keyPath: _keyPath,
+        title: item.name,
+        key: item.id,
+        value: item.id,
+        formData: item,
+        children: arr.length ? arr : null,
+      });
+    });
 }
+
+/*
+ * 渲染部门至树形控件
+ * @param {Array} depts 所有部门
+ * @param {Number | null} parentId 父级部门ID
+ * @param {number[]|string[]} keyPath ID路径
+ */
+export const formatDept2Tree = (
+  depts,
+  parentId,
+  keyPath = [],
+) => {
+  return depts
+    .filter((item) => item.parentId === parentId)
+    .map((item) => {
+      const _keyPath = keyPath.concat(parentId || []);
+      const arr = formatDept2Tree(depts, item.id, _keyPath);
+      return Object.assign(item, {
+        keyPath: _keyPath,
+        title: item.name,
+        key: item.id,
+        value: item.id,
+        formData: item,
+        children: arr.length ? arr : null,
+      });
+    });
+};
+
+
+
+/**
+ * 在树中根据ID找child
+ * @param {string|number} id
+ * @param {any[]} treeData 树形数据
+ * @param {string} keyName 指定ID的属性名，默认是id
+ * @param {string} children 指定children的属性名，默认是children
+ */
+
+export const findChildById = (
+  id,
+  treeData = [],
+  keyName = 'id',
+  children = 'children',
+) => {
+  return treeData.reduce((prev, curr) => {
+    if (curr[keyName] === id) {
+      return curr;
+    }
+    if (prev) {
+      return prev;
+    }
+    if (curr[children]?.length) {
+      return findChildById(id, curr[children], keyName, children);
+    }
+  }, undefined);
+};

src/views/system/permission/user/index.bat.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="card">
+    <div class="left">
+      <a-tree
+        v-model:expandedKeys="state.expandedKeys"
+        auto-expand-parent
+        :tree-data="state.deptTree"
+        @select="onTreeSelect"
+      >
+        <template #title="{ key, title, formData }">
+          <a-dropdown :trigger="['contextmenu']">
+            <span>{{ title }}</span>
+            <template #overlay>
+              <a-menu>
+                <a-menu-item
+                  key="1"
+                  :disabled="!$auth('sys.dept.update')"
+                  @click="openDeptModal(formData)"
+                >
+                  编辑 <EditOutlined></EditOutlined>
+                </a-menu-item>
+                <a-menu-item
+                  key="2"
+                  :disabled="!auth('sys.dept.delete')"
+                  @click="delDept(key)"
+                >
+                  删除 <DeleteOutlined></DeleteOutlined>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+        </template>
+      </a-tree>
+    </div>
+
+    <div class="right">
+      <dynamic-table
+        header-title="用户管理"
+        show-index
+        title-tooltip="请不要随意删除用户，避免到影响其他用户的使用"
+        :data-request="loadTableData"
+        :columns="columns"
+        :scroll="{ x: 2000 }"
+        :row-selection="rowSelection"
+      >
+        <template #toolbar>
+           <a-button type="primary" :disabled="!$auth('sys.user.add')" @click="openUserModal({})">
+            <PlusOutlined /> 新增
+          </a-button>
+        </template>
+      </dynamic-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@vue/runtime-core";
+import { deptSchemas } from "./formSchemas";
+import { DeleteOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons-vue";
+import { Modal } from "ant-design-vue";
+import { useFormModal } from '@/hooks/useModal/index'
+const [showModal] = useFormModal()
+const [DynamicTable, dynamicTableInstance ] = useTable()
+
+export default defineComponent({
+  setup() {
+    const openDeptModal = async (record) => {
+      const [formRef] = await showModal({
+        modalProps: {
+          title: record.id ? "编辑部门" : "新增部门",
+          width: 700,
+          onFinish: async (values) => {
+            values.id = record.id;
+            await (record.id ? updateDept : createDept)(values);
+            fetchDeptList();
+          },
+        },
+        formProps: {
+          labelWidth: 100,
+          schemas: deptSchemas,
+        },
+      });
+    };
+
+    const delDept = () => {};
+
+    return {
+      openDeptModal
+    };
+  },
+});
+</script>
+
+<style lang="less" scoped>
+</style>