twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-06 00:18:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增部门管理demo

Browse Source
This commit is contained in:
xiaoxian521 2022-04-10 23:54:14 +08:00
parent f3f9c12edf
commit c4ebacedfe
11 changed files with 509 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
locales/en.yaml
View File

@ -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"

3
locales/zh-CN.yaml
View File

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

14
mock/asyncRoutes.ts
View File

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

132
mock/system.ts
View File

@ -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[];

9
src/api/system.ts
View File

@ -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 });
};

2
src/components/ReIcon/src/iconifyIconOffline.ts
View File

@ -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";

10
src/mockProdServer.ts
View File

@ -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);

56
src/utils/tree.ts
View File

@ -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;
}

270
src/views/system/dept/index.vue Normal file
View File

@ -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>

0
src/views/system/job/load.ts → src/views/system/load.ts
View File

38
src/views/system/job/index.vue → src/views/system/post/index.vue
View File

@ -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 { getJobList } from "/@/api/system";
import { loadingSvg } from "../load";
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();
jobList.value = data.list;
let { data } = await getPostList();
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">
<el-button type="primary">新增岗位</el-button>
<div class="w-220px flex items-center justify-around">
<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>