✨ add department view

src/api/system/department.js

@@ -0,0 +1,40 @@
+import { fetch } from "@/libs/fetch";
+
+export function addDepartment(parameter) {
+  return fetch({
+    url: "/departments",
+    method: "post",
+    data: parameter,
+    headers: {
+      "Content-Type": "application/json;charset=UTF-8"
+    }
+  });
+}
+
+export function getDepartmentByTenant(tenantId) {
+  return fetch({
+    url: "/departments/tenant/" + tenantId,
+    method: "get"
+  });
+}
+
+export function getDepartment(id) {
+  return fetch({
+    url: "/departments/" + id,
+    method: "get"
+  });
+}
+
+export function batchRemove(id) {
+  return fetch({
+    url: "/departments/batch",
+    data: id,
+    method: "delete"
+  });
+}
+export function remove(id) {
+  return fetch({
+    url: "/departments/" + id,
+    method: "delete"
+  });
+}

src/components/Tree/Tree.jsx

@@ -0,0 +1,160 @@
+import { Menu, Icon, Input } from "ant-design-vue";
+
+const { Item, ItemGroup, SubMenu } = Menu;
+const { Search } = Input;
+
+export default {
+  name: "Tree",
+  props: {
+    dataSource: {
+      type: Array,
+      required: true
+    },
+    openKeys: {
+      type: Array,
+      default: () => []
+    },
+    search: {
+      type: Boolean,
+      default: false
+    },
+    tenants: {
+      type: Array,
+      default: () => []
+    }
+  },
+  created() {
+    this.localOpenKeys = this.openKeys.slice(0);
+  },
+  data() {
+    return {
+      localOpenKeys: []
+    };
+  },
+  methods: {
+    handlePlus(item) {
+      this.$emit("add", item);
+    },
+    handleTitleClick(...args) {
+      this.$emit("titleClick", { args });
+    },
+
+    renderSearch() {
+      return (
+        <Search
+          placeholder="请输入部门名称"
+          style="width: 100%; margin-bottom: 1rem"
+        />
+      );
+    },
+    renderIcon(icon) {
+      return (icon && <Icon type={icon} />) || null;
+    },
+    renderMenuItem(item) {
+      return (
+        <Item key={item.key}>
+          {this.renderIcon(item.icon)}
+          {item.name}
+          <a class="btn" {...{ on: { click: () => this.handlePlus(item) } }}>
+            <a-icon type="plus" />
+          </a>
+        </Item>
+      );
+    },
+    renderItem(item) {
+      return item.children
+        ? this.renderSubItem(item, item.key)
+        : this.renderMenuItem(item, item.key);
+    },
+    renderItemGroup(item) {
+      const childrenItems = item.children.map(o => {
+        return this.renderItem(o, o.key);
+      });
+
+      return (
+        <ItemGroup key={item.key}>
+          <template slot="title">
+            <span>{item.title}</span>
+            <a-dropdown>
+              <a class="btn">
+                <a-icon type="ellipsis" />
+              </a>
+              <a-menu slot="overlay">
+                <a-menu-item key="1">新增</a-menu-item>
+                <a-menu-item key="2">合并</a-menu-item>
+                <a-menu-item key="3">移除</a-menu-item>
+              </a-menu>
+            </a-dropdown>
+          </template>
+          {childrenItems}
+        </ItemGroup>
+      );
+    },
+    renderSubItem(item, key) {
+      const childrenItems =
+        item.children &&
+        item.children.map(o => {
+          return this.renderItem(o, o.id);
+        });
+
+      const title = (
+        <span slot="title">
+          {this.renderIcon(item.icon)}
+          <span>{item.title}</span>
+        </span>
+      );
+
+      // if (item.group) {
+      //   return this.renderItemGroup(item);
+      // }
+      // titleClick={this.handleTitleClick(item)}
+      return (
+        <SubMenu key={key}>
+          {title}
+          {childrenItems}
+        </SubMenu>
+      );
+    }
+  },
+  render() {
+    const { dataSource, search } = this.$props;
+
+    // this.localOpenKeys = openKeys.slice(0)
+    const list = dataSource.map(item => {
+      return this.renderItem(item);
+    });
+
+    console.log(list);
+
+    return (
+      <div class="tree-wrapper">
+        <a-select
+          allowClear=""
+          placeholder="请选择租户"
+          style="width: 100%; margin-bottom: 1rem;"
+        >
+          {this.tenants.map(item => (
+            <a-select-option key={item.id}>{item.tenantName}</a-select-option>
+          ))}
+        </a-select>
+        {search ? this.renderSearch() : null}
+
+        <Menu
+          mode="inline"
+          class="custom-tree"
+          {...{
+            on: {
+              click: item => this.$emit("click", item),
+              "update:openKeys": val => {
+                this.localOpenKeys = val;
+              }
+            }
+          }}
+          openKeys={this.localOpenKeys}
+        >
+          {list}
+        </Menu>
+      </div>
+    );
+  }
+};

src/components/index.js

@@ -3,6 +3,15 @@ import BasicLayout from "@/components/layout/basic-layout";
 import STable from "@/components/table";
 import tableMenu from "@/components/tableMenu/index";
 import PageLoading from "@/components/PageLoading";
-import IconSelector from '@/components/IconSelector'
+import IconSelector from "@/components/IconSelector";
+import Tree from "@/components/Tree/Tree";
 
-export { ExceptionPage, BasicLayout, STable, tableMenu, PageLoading, IconSelector };
+export {
+  ExceptionPage,
+  BasicLayout,
+  STable,
+  tableMenu,
+  PageLoading,
+  IconSelector,
+  Tree
+};

src/mock/index.js

@@ -19,6 +19,7 @@ if (
   require("./services/system/dict");
   require("./services/system/permission");
   require("./services/system/role");
+  require("./services/system/department");
 
   Mock.setup({
     timeout: 800 // setter delay time

src/mock/services/resource.js

@@ -13,6 +13,14 @@ const getResource = () => {
           title: "租户管理",
           key: "tenant"
         },
+        {
+          title: "用户管理",
+          key: "account"
+        },
+        {
+          title: "科室管理",
+          key: "department"
+        },
         {
           title: "角色管理",
           key: "role"

src/mock/services/system/department.js

@@ -0,0 +1,57 @@
+import Mock from "mockjs2";
+import { builder } from "../../util";
+
+const tenantsDepartments = () => {
+  return builder([
+    {
+      key: 1,
+      value: 1,
+      title: "领导科室",
+      children: [
+        {
+          key: 6,
+          value: 5,
+          title: "领导科室-1"
+        }
+      ]
+    },
+    {
+      key: 2,
+      value: 2,
+      title: "领导科室1"
+    },
+    {
+      key: 3,
+      value: 3,
+      title: "领导科室2"
+    }
+  ]);
+};
+
+const getDepartment = () => {
+  return builder({
+    id: 1,
+    name: "领导科室",
+    parentId: 0,
+    parentName: "",
+    sort: 0,
+    address: "",
+    remark: ""
+  });
+};
+
+// eslint-disable-next-line no-unused-vars
+export const removeDepart = req => {
+  return builder({});
+};
+
+// eslint-disable-next-line no-unused-vars
+export const addDepartment = req => {
+  return builder({});
+};
+
+Mock.mock(/\/departments\/tenant\/0/, "get", tenantsDepartments);
+Mock.mock(/\/departments\/1/, "get", getDepartment);
+Mock.mock(/\/departments\/batch/, "delete", removeDepart);
+Mock.mock(/\/departments\/1/, "delete", removeDepart);
+Mock.mock(/\/departments/, "post", addDepartment);

src/styles/base.less

@@ -40,3 +40,12 @@
 .ant-input-number {
   width: 100%;
 }
+
+.ant-card-body {
+  .table-operator {
+    margin-bottom: 18px;
+    .btn {
+      margin-right: 8px;
+    }
+  }
+}

src/views/system/account.vue

@@ -0,0 +1,44 @@
+<template>
+  <basicContainer>
+    <a-row :gutter="25">
+      <a-col :span="5">
+        <s-tree
+          :dataSource="orgTree"
+          :tenants="tenants"
+          :search="true"
+        ></s-tree>
+      </a-col>
+      <a-col :span="18"></a-col>
+    </a-row>
+  </basicContainer>
+</template>
+
+<script>
+import STree from "@/components/Tree/Tree";
+import { getDepartmentByTenant } from "@/api/system/department";
+import { getAllTenant } from "@/api/system/tenant";
+export default {
+  name: "account",
+  components: {
+    STree
+  },
+  data() {
+    return {
+      orgTree: [],
+      tenants: [],
+      tenantId: 0,
+      showSearch: false
+    };
+  },
+  mounted() {
+    getDepartmentByTenant(this.tenantId).then(res => {
+      this.orgTree = res.data;
+    });
+    getAllTenant().then(res => {
+      this.tenants = res.data;
+    });
+  }
+};
+</script>
+
+<style scoped></style>