feat: 新增部门管理demo

locales/en.yaml

@@ -24,7 +24,8 @@ menus:
   hssysManagement: System Manage
   hsBaseinfo: Base Info
   hsDict: Dict Manage
-  hsJob: Job Manage
+  hsPost: Post Manage
+  hsDept: Dept Manage
   hseditor: Editor
   hserror: Error Page
   hsfourZeroFour: "404"

locales/zh-CN.yaml

@@ -24,7 +24,8 @@ menus:
   hssysManagement: 系统管理
   hsBaseinfo: 基础信息
   hsDict: 字典管理
-  hsJob: 岗位管理
+  hsPost: 岗位管理
+  hsDept: 部门管理
   hseditor: 编辑器
   hserror: 错误页面
   hsfourZeroFour: "404"

mock/asyncRoutes.ts

@@ -30,10 +30,18 @@ const systemRouter = {
       }
     },
     {
-      path: "/system/job/index",
+      path: "/system/post/index",
-      name: "job",
+      name: "post",
       meta: {
-        title: "menus.hsJob",
+        title: "menus.hsPost",
+        i18n: true
+      }
+    },
+    {
+      path: "/system/dept/index",
+      name: "dept",
+      meta: {
+        title: "menus.hsDept",
         i18n: true
       }
     }

mock/system.ts

@@ -51,5 +51,137 @@ export default [
         msg: ""
       };
     }
+  },
+  {
+    url: "/dept",
+    method: "post",
+    response: () => {
+      return {
+        code: 0,
+        data: [
+          {
+            name: "pure-admin",
+            parentId: 0,
+            sort: 0,
+            leaderUserId: 1,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 100,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "深圳总公司",
+            parentId: 100,
+            sort: 1,
+            leaderUserId: 104,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 101,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "研发部门",
+            parentId: 101,
+            sort: 1,
+            leaderUserId: 104,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 103,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "市场部门",
+            parentId: 102,
+            sort: 1,
+            leaderUserId: null,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 108,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "长沙分公司",
+            parentId: 100,
+            sort: 2,
+            leaderUserId: null,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 102,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "市场部门",
+            parentId: 101,
+            sort: 2,
+            leaderUserId: null,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 1,
+            id: 104,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "财务部门",
+            parentId: 102,
+            sort: 2,
+            leaderUserId: null,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 109,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "测试部门",
+            parentId: 101,
+            sort: 3,
+            leaderUserId: null,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 105,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "财务部门",
+            parentId: 101,
+            sort: 4,
+            leaderUserId: 103,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 1,
+            id: 106,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "运维部门",
+            parentId: 101,
+            sort: 5,
+            leaderUserId: null,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 107,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          }
+        ],
+        msg: ""
+      };
+    }
   }
 ] as MockMethod[];

src/api/system.ts

@@ -1,12 +1,17 @@
 import { http } from "../utils/http";
 
-interface jobType extends Promise<any> {
+interface postType extends Promise<any> {
   data?: object;
   code?: number;
   msg?: string;
 }
 
 // 获取岗位管理列表
-export const getJobList = (data?: object): jobType => {
+export const getPostList = (data?: object): postType => {
   return http.request("post", "/system", { data });
 };
+
+// 获取部门管理列表
+export const getDeptList = (data?: object): postType => {
+  return http.request("post", "/dept", { data });
+};

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -70,6 +70,7 @@ import closeCircleLine from "@iconify-icons/ri/close-circle-line";
 import arrowUpLine from "@iconify-icons/ri/arrow-up-line";
 import arrowDownLine from "@iconify-icons/ri/arrow-down-line";
 import bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
+import addFill from "@iconify-icons/ri/add-circle-line";
 addIcon("arrow-right-s-line", arrowRightSLine);
 addIcon("arrow-left-s-line", arrowLeftSLine);
 addIcon("logout-circle-r-line", logoutCircleRLine);
@@ -82,6 +83,7 @@ addIcon("close-circle-line", closeCircleLine);
 addIcon("arrow-up-line", arrowUpLine);
 addIcon("arrow-down-line", arrowDownLine);
 addIcon("bookmark-2-line", bookmark2Line);
+addIcon("add", addFill);
 
 // Font Awesome 4
 import faUser from "@iconify-icons/fa/user";

src/mockProdServer.ts

@@ -1,9 +1,11 @@
 import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";
-import mapMock from "../mock/map";
-import systemMock from "../mock/system";
-import asyncRoutesMock from "../mock/asyncRoutes";
 
-export const mockModules = [...mapMock, ...systemMock, ...asyncRoutesMock];
+const modules = import.meta.globEager("../mock/*.ts");
+const mockModules = [];
+
+Object.keys(modules).forEach(key => {
+  mockModules.push(...modules[key].default);
+});
 
 export function setupProdMockServer() {
   createProdMockServer(mockModules);

src/utils/tree.ts

@@ -117,3 +117,59 @@ export function appendFieldByUniqueId(
   }
   return menuTree;
 }
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ */
+export function handleTree(
+  data,
+  id?: string,
+  parentId?: string,
+  children?: string
+) {
+  const config = {
+    id: id || "id",
+    parentId: parentId || "parentId",
+    childrenList: children || "children"
+  };
+
+  const childrenListMap = {};
+  const nodeIds = {};
+  const tree = [];
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (childrenListMap[parentId] == null) {
+      childrenListMap[parentId] = [];
+    }
+    nodeIds[d[config.id]] = d;
+    childrenListMap[parentId].push(d);
+  }
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (nodeIds[parentId] == null) {
+      tree.push(d);
+    }
+  }
+
+  for (const t of tree) {
+    adaptToChildrenList(t);
+  }
+
+  function adaptToChildrenList(o) {
+    if (childrenListMap[o[config.id]] !== null) {
+      o[config.childrenList] = childrenListMap[o[config.id]];
+    }
+    if (o[config.childrenList]) {
+      for (const c of o[config.childrenList]) {
+        adaptToChildrenList(c);
+      }
+    }
+  }
+  return tree;
+}

src/views/system/dept/index.vue

@@ -0,0 +1,270 @@
+<script lang="ts">
+export default {
+  name: "dept"
+};
+</script>
+
+<script setup lang="ts">
+import dayjs from "dayjs";
+import { loadingSvg } from "../load";
+import { handleTree } from "/@/utils/tree";
+import { getDeptList } from "/@/api/system";
+import { FormInstance } from "element-plus";
+import { reactive, ref, onMounted, computed } from "vue";
+import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+
+const form = reactive({
+  user: "",
+  status: ""
+});
+const buttonRef = ref();
+const tooltipRef = ref();
+let treeData = ref([]);
+let checkList = ref([]);
+let loading = ref(true);
+let visible = ref(false);
+let size = ref("default");
+
+const formRef = ref<FormInstance>();
+
+const getDropdownItemStyle = computed(() => {
+  return s => {
+    return {
+      background: s === size.value ? useEpThemeStoreHook().epThemeColor : "",
+      color: s === size.value ? "#f4f4f5" : "#000"
+    };
+  };
+});
+
+function handleUpdate(row) {
+  console.log(row);
+}
+
+function handleDelete(row) {
+  console.log(row);
+}
+
+function onCheckChange(val) {
+  console.log("onCheckChange", val);
+}
+
+function handleSelectionChange(val) {
+  console.log("handleSelectionChange", val);
+}
+
+async function onSearch() {
+  loading.value = true;
+  let { data } = await getDeptList();
+  treeData.value = handleTree(data);
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  onSearch();
+};
+
+onMounted(() => {
+  onSearch();
+});
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="bg-white w-99/100 pl-8 pt-4"
+    >
+      <el-form-item label="部门名称：" prop="user">
+        <el-input v-model="form.user" placeholder="请输入" clearable />
+      </el-form-item>
+      <el-form-item label="状态：" prop="status">
+        <el-select v-model="form.status" placeholder="请选择" clearable>
+          <el-option label="开启" value="1" />
+          <el-option label="关闭" value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('search')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索</el-button
+        >
+        <el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <div
+      class="w-99/100 mt-6 p-2 bg-white"
+      v-loading="loading"
+      :element-loading-svg="loadingSvg"
+      element-loading-svg-view-box="-10, -10, 50, 50"
+    >
+      <div class="flex justify-between w-full h-60px p-4">
+        <p class="font-bold">部门列表</p>
+        <div class="w-220px flex items-center justify-around">
+          <el-button type="primary" :icon="useRenderIcon('add')"
+            >新增部门</el-button
+          >
+          <el-tooltip effect="dark" content="刷新" placement="top">
+            <IconifyIconOffline
+              class="cursor-pointer outline-none ml-4"
+              icon="refresh-right"
+              width="20"
+              color="#606266"
+              @click="onSearch"
+            />
+          </el-tooltip>
+          <el-divider direction="vertical" />
+
+          <el-tooltip effect="dark" content="密度" placement="top">
+            <el-dropdown id="header-translation" trigger="click">
+              <IconifyIconOffline
+                class="cursor-pointer outline-none"
+                icon="density"
+                width="20"
+                color="#606266"
+              />
+              <template #dropdown>
+                <el-dropdown-menu class="translation">
+                  <el-dropdown-item
+                    :style="getDropdownItemStyle('large')"
+                    @click="size = 'large'"
+                  >
+                    松散
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    :style="getDropdownItemStyle('default')"
+                    @click="size = 'default'"
+                  >
+                    默认
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    :style="getDropdownItemStyle('small')"
+                    @click="size = 'small'"
+                  >
+                    紧凑
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </el-tooltip>
+          <el-divider direction="vertical" />
+
+          <el-popover :width="200" trigger="click">
+            <template #reference>
+              <IconifyIconOffline
+                class="cursor-pointer outline-none"
+                icon="setting"
+                width="20"
+                color="#606266"
+                @mouseover="e => (buttonRef = e.currentTarget)"
+                @mouseenter="visible = true"
+                @mouseleave="visible = false"
+              />
+            </template>
+            <el-checkbox-group v-model="checkList" @change="onCheckChange">
+              <el-checkbox label="序号列" />
+              <el-checkbox label="勾选列" />
+            </el-checkbox-group>
+          </el-popover>
+        </div>
+
+        <el-tooltip
+          ref="tooltipRef"
+          v-model:visible="visible"
+          :popper-options="{
+            modifiers: [
+              {
+                name: 'computeStyles',
+                options: {
+                  adaptive: false,
+                  enabled: false
+                }
+              }
+            ]
+          }"
+          placement="top"
+          :virtual-ref="buttonRef"
+          virtual-triggering
+          trigger="click"
+          content="列设置"
+        />
+      </div>
+      <el-table
+        border
+        row-key="id"
+        table-layout="auto"
+        default-expand-all
+        :size="size"
+        :data="treeData"
+        :header-cell-style="{ background: '#fafafa', color: '#606266' }"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column
+          v-if="checkList.includes('勾选列')"
+          type="selection"
+          align="center"
+          width="55"
+        />
+        <el-table-column
+          v-if="checkList.includes('序号列')"
+          type="index"
+          align="center"
+          label="序号"
+          width="60"
+        />
+        <el-table-column label="部门名称" prop="name" width="180" />
+        <el-table-column label="排序" align="center" prop="sort" width="60" />
+        <el-table-column label="状态" align="center" prop="status" width="80">
+          <template #default="scope">
+            <el-tag
+              :type="scope.row.status === 0 ? 'danger' : 'success'"
+              effect="plain"
+            >
+              {{ scope.row.status === 0 ? "关闭" : "开启" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          align="center"
+          width="180"
+          prop="createTime"
+        >
+          <template #default="scope">
+            <span>{{
+              dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="操作" align="center" width="130">
+          <template #default="scope">
+            <el-button type="text" @click="handleUpdate(scope.row)"
+              >修改</el-button
+            >
+            <el-popconfirm title="是否确认删除?">
+              <template #reference>
+                <el-button type="text" @click="handleDelete(scope.row)"
+                  >删除</el-button
+                >
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>

src/views/system/post/index.vue

@@ -1,13 +1,13 @@
 <script lang="ts">
 export default {
-  name: "job"
+  name: "post"
 };
 </script>
 
 <script setup lang="ts">
 import dayjs from "dayjs";
-import { loadingSvg } from "./load";
+import { loadingSvg } from "../load";
-import { getJobList } from "/@/api/system";
+import { getPostList } from "/@/api/system";
 import { FormInstance } from "element-plus";
 import { Switch } from "@pureadmin/components";
 import { successMessage } from "/@/utils/message";
@@ -22,7 +22,7 @@ const form = reactive({
 });
 const buttonRef = ref();
 const tooltipRef = ref();
-let jobList = ref([]);
+let postList = ref([]);
 let pageSize = ref(10);
 let totalPage = ref(0);
 let checkList = ref([]);
@@ -84,8 +84,8 @@ function onChange(checked, { $index, row }) {
 
 async function onSearch() {
   loading.value = true;
-  let { data } = await getJobList();
+  let { data } = await getPostList();
-  jobList.value = data.list;
+  postList.value = data.list;
   totalPage.value = data.total;
   setTimeout(() => {
     loading.value = false;
@@ -124,9 +124,6 @@ onMounted(() => {
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)"
-          >重置</el-button
-        >
         <el-button
           type="primary"
           :icon="useRenderIcon('search')"
@@ -135,19 +132,24 @@ onMounted(() => {
         >
           搜索</el-button
         >
+        <el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
     <div
-      class="w-99/100 mt-6 pb-4 bg-white"
+      class="w-99/100 mt-6 p-2 bg-white"
       v-loading="loading"
       :element-loading-svg="loadingSvg"
       element-loading-svg-view-box="-10, -10, 50, 50"
     >
       <div class="flex justify-between w-full h-60px p-4">
         <p class="font-bold">岗位列表</p>
-        <div class="w-200px flex items-center justify-around">
+        <div class="w-220px flex items-center justify-around">
-          <el-button type="primary">新增岗位</el-button>
+          <el-button type="primary" :icon="useRenderIcon('add')"
+            >新增岗位</el-button
+          >
           <!-- <el-button type="success" :icon="useRenderIcon('import')"
             >导入</el-button
           >
@@ -156,13 +158,14 @@ onMounted(() => {
           > -->
           <el-tooltip effect="dark" content="刷新" placement="top">
             <IconifyIconOffline
-              class="cursor-pointer outline-none"
+              class="cursor-pointer outline-none ml-4"
               icon="refresh-right"
               width="20"
               color="#606266"
               @click="onSearch"
             />
           </el-tooltip>
+          <el-divider direction="vertical" />
 
           <el-tooltip effect="dark" content="密度" placement="top">
             <el-dropdown id="header-translation" trigger="click">
@@ -196,6 +199,7 @@ onMounted(() => {
               </template>
             </el-dropdown>
           </el-tooltip>
+          <el-divider direction="vertical" />
 
           <el-popover :width="200" trigger="click">
             <template #reference>
@@ -239,14 +243,16 @@ onMounted(() => {
       </div>
       <el-table
         border
+        table-layout="auto"
         :size="size"
-        :data="jobList"
+        :data="postList"
         :header-cell-style="{ background: '#fafafa', color: '#606266' }"
         @selection-change="handleSelectionChange"
       >
         <el-table-column
           v-if="checkList.includes('勾选列')"
           type="selection"
+          align="center"
           width="55"
         />
         <el-table-column
@@ -302,7 +308,7 @@ onMounted(() => {
         </el-table-column>
       </el-table>
       <el-pagination
-        class="flex justify-end mt-4 mr-2"
+        class="flex justify-end mt-4"
         :small="size === 'small' ? true : false"
         v-model:page-size="pageSize"
         :page-sizes="[10, 20, 30, 50]"
@@ -315,5 +321,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-
-<style lang="scoped"></style>