feat: 部门管理
This commit is contained in:
WANGFAN\wangf
parent
14bedb3414
commit
337baf198f
@ -15,3 +15,11 @@ export const getDictAPI = () => {
|
||||
method: "get"
|
||||
});
|
||||
};
|
||||
|
||||
// 获取部门数据
|
||||
export const getDivisionAPI = () => {
|
||||
return axios({
|
||||
url: "/mock/system/getDivision",
|
||||
method: "get"
|
||||
});
|
||||
};
|
||||
|
||||
@ -18,13 +18,13 @@ export const divisionData = [
|
||||
{
|
||||
id: "10001",
|
||||
parentId: "100",
|
||||
name: "研发部门",
|
||||
name: "华中总部",
|
||||
leader: "小唐",
|
||||
phone: "",
|
||||
email: "",
|
||||
sort: 1,
|
||||
status: 1,
|
||||
description: "这里是研发部门",
|
||||
description: "这里是华中总部",
|
||||
createBy: "admin",
|
||||
createTime: "2024-03-19 11:21:01",
|
||||
updateBy: "admin",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { MockMethod } from "vite-plugin-mock";
|
||||
import { resultSuccess } from "../_utils";
|
||||
import { dictData } from "../_data/system_data";
|
||||
import { dictData, divisionData } from "../_data/system_data";
|
||||
|
||||
// post请求body,get请求query
|
||||
export default [
|
||||
@ -11,5 +11,13 @@ export default [
|
||||
response: () => {
|
||||
return resultSuccess(dictData);
|
||||
}
|
||||
},
|
||||
{
|
||||
url: "/mock/system/getDivision",
|
||||
method: "get",
|
||||
timeout: 300,
|
||||
response: () => {
|
||||
return resultSuccess(divisionData);
|
||||
}
|
||||
}
|
||||
] as MockMethod[];
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
<a-modal v-model:visible="open" @close="afterClose" @ok="handleOk" @cancel="afterClose">
|
||||
<template #title> {{ title }} </template>
|
||||
<div>
|
||||
<a-form ref="formRef" :rules="rules" :model="addFrom">
|
||||
<a-form ref="formRef" auto-label-width :rules="rules" :model="addFrom">
|
||||
<a-form-item field="name" label="字典名称" validate-trigger="blur">
|
||||
<a-input v-model="addFrom.name" placeholder="请输入字典名称" allow-clear />
|
||||
</a-form-item>
|
||||
@ -167,7 +167,7 @@
|
||||
<a-modal v-model:visible="detailCaseOpen" @close="afterCloseDetail" @ok="handleOkDetail" @cancel="afterCloseDetail">
|
||||
<template #title> {{ detailTitle }} </template>
|
||||
<div>
|
||||
<a-form ref="detailFormRef" :rules="detaulRules" :model="deatilForm">
|
||||
<a-form ref="detailFormRef" auto-label-width :rules="detaulRules" :model="deatilForm">
|
||||
<a-form-item field="name" label="字典名称" validate-trigger="blur">
|
||||
<a-input v-model="deatilForm.name" placeholder="请输入字典名称" allow-clear />
|
||||
</a-form-item>
|
||||
@ -188,6 +188,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getDictAPI } from "@/api/modules/system/index";
|
||||
import { deepClone } from "@/utils";
|
||||
const openState = ref(dictFilter("status"));
|
||||
const form = ref({
|
||||
name: "",
|
||||
@ -243,6 +244,7 @@ const handleOk = async () => {
|
||||
if (state) return (open.value = true); // 校验不通过
|
||||
arcoMessage("success", "模拟提交成功");
|
||||
};
|
||||
// 关闭对话框动画结束后触发
|
||||
const afterClose = () => {
|
||||
formRef.value.resetFields();
|
||||
addFrom.value = {
|
||||
@ -254,7 +256,7 @@ const afterClose = () => {
|
||||
};
|
||||
const onUpdate = (record: any) => {
|
||||
title.value = "修改字典";
|
||||
addFrom.value = JSON.parse(JSON.stringify(record));
|
||||
addFrom.value = deepClone(record);
|
||||
open.value = true;
|
||||
};
|
||||
const onDelete = () => {
|
||||
@ -329,9 +331,10 @@ const handleOkDetail = async () => {
|
||||
};
|
||||
const onDetailUpdate = (record: any) => {
|
||||
detailTitle.value = "修改字典数据";
|
||||
deatilForm.value = JSON.parse(JSON.stringify(record));
|
||||
deatilForm.value = deepClone(record);
|
||||
detailCaseOpen.value = true;
|
||||
};
|
||||
// 关闭对话框动画结束后触发
|
||||
const afterCloseDetail = () => {
|
||||
detailFormRef.value.resetFields();
|
||||
deatilForm.value = {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<a-space wrap>
|
||||
<a-input v-model="form.name" placeholder="请输入部门名称" allow-clear />
|
||||
<a-select placeholder="部门状态" v-model="form.open" style="width: 120px" allow-clear>
|
||||
<a-option v-for="item in openState" :key="item.value" :value="item.value">{{ item.label }}</a-option>
|
||||
<a-option v-for="item in openState" :key="item.value" :value="item.value">{{ item.name }}</a-option>
|
||||
</a-select>
|
||||
<a-button type="primary" @click="search">
|
||||
<template #icon><icon-search /></template>
|
||||
@ -29,7 +29,7 @@
|
||||
</a-space>
|
||||
</a-row>
|
||||
|
||||
<a-table :data="tableData" default-expand-all-rows :bordered="{ cell: true }" row-key="id">
|
||||
<a-table ref="tableRef" :data="tableData" default-expand-all-rows :bordered="{ cell: true }" row-key="id">
|
||||
<template #columns>
|
||||
<a-table-column title="部门名称">
|
||||
<template #cell="{ record }">
|
||||
@ -50,112 +50,208 @@
|
||||
<a-table-column title="操作" align="center" :fixed="'right'">
|
||||
<template #cell="{ record }">
|
||||
<a-space>
|
||||
<a-button size="mini" type="primary" @click="onEdit(record)">
|
||||
<a-button size="mini" type="primary" @click="onUpdate(record)">
|
||||
<template #icon><icon-edit /></template>
|
||||
<span>修改</span>
|
||||
</a-button>
|
||||
<a-button size="mini" type="primary" status="success">
|
||||
<a-button size="mini" type="primary" status="success" @click="addDivision(record.id)">
|
||||
<template #icon><icon-plus /></template>
|
||||
<span>新增</span>
|
||||
</a-button>
|
||||
<a-popconfirm type="warning" content="确定删除该部门吗?" @ok="onDelete">
|
||||
<a-button size="mini" type="primary" status="danger" v-if="record.id != '100'">
|
||||
<template #icon><icon-delete /></template>
|
||||
<span>删除</span>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<a-modal v-model:visible="open" @close="afterClose" @ok="handleOk" @cancel="afterClose">
|
||||
<template #title> {{ title }} </template>
|
||||
<div>
|
||||
<a-form ref="formRef" auto-label-width :rules="rules" :model="addFrom">
|
||||
<a-form-item field="parentId" label="上级部门" validate-trigger="blur">
|
||||
<a-tree-select
|
||||
v-model="addFrom.parentId"
|
||||
:data="tableData"
|
||||
:field-names="{
|
||||
key: 'id',
|
||||
title: 'name',
|
||||
children: 'children'
|
||||
}"
|
||||
placeholder="选择上级部门"
|
||||
></a-tree-select>
|
||||
</a-form-item>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item field="name" label="部门名称" validate-trigger="blur">
|
||||
<a-input v-model="addFrom.name" placeholder="请输入部门名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item field="status" label="部门状态" validate-trigger="blur">
|
||||
<a-switch type="round" :checked-value="1" :unchecked-value="0" v-model="addFrom.status">
|
||||
<template #checked> 启用 </template>
|
||||
<template #unchecked> 禁用 </template>
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item field="leader" label="负责人" validate-trigger="blur">
|
||||
<a-input v-model="addFrom.leader" placeholder="请输入负责人" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item field="phone" label="联系电话" validate-trigger="blur">
|
||||
<a-input v-model="addFrom.phone" placeholder="请输入联系电话" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item field="email" label="邮箱" validate-trigger="blur">
|
||||
<a-input v-model="addFrom.email" placeholder="请输入邮箱" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item field="sort" label="显示排序" validate-trigger="blur">
|
||||
<a-input-number
|
||||
v-model="addFrom.sort"
|
||||
placeholder="请输入排序值"
|
||||
:min="1"
|
||||
:max="999"
|
||||
:step="1"
|
||||
:precision="0"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item field="description" label="描述" validate-trigger="blur">
|
||||
<a-textarea v-model="addFrom.description" placeholder="请输入字典描述" allow-clear />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { divisionData } from "@/views/system/data/index";
|
||||
const tableData = ref(divisionData);
|
||||
const onEdit = (row: Menu.MenuOptions) => {
|
||||
console.log("修改", row);
|
||||
import { getDivisionAPI } from "@/api/modules/system/index";
|
||||
import { deepClone } from "@/utils";
|
||||
|
||||
// 新增
|
||||
const open = ref(false);
|
||||
const rules = {
|
||||
parentId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择上级部门"
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入部门名称"
|
||||
}
|
||||
],
|
||||
status: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择部门状态"
|
||||
}
|
||||
]
|
||||
};
|
||||
const openState = ref([
|
||||
{ value: 1, label: "是" },
|
||||
{ value: 0, label: "否" }
|
||||
]);
|
||||
const form = ref({
|
||||
const addFrom = ref<any>({
|
||||
parentId: null,
|
||||
name: "",
|
||||
code: "",
|
||||
open: null
|
||||
sort: 0,
|
||||
leader: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
status: 1,
|
||||
description: ""
|
||||
});
|
||||
const search = () => {
|
||||
console.log("搜索");
|
||||
};
|
||||
const reset = () => {
|
||||
console.log("重置");
|
||||
};
|
||||
const formType = ref(0); // 0新增 1修改 2新增下级
|
||||
const title = ref("");
|
||||
const formRef = ref();
|
||||
const onAdd = () => {
|
||||
console.log("新增");
|
||||
title.value = "添加部门";
|
||||
formType.value = 0;
|
||||
open.value = true;
|
||||
};
|
||||
const handleOk = async () => {
|
||||
let state = await formRef.value.validate();
|
||||
if (state) return (open.value = true); // 校验不通过
|
||||
console.log("模拟提交", formType.value, addFrom.value);
|
||||
arcoMessage("success", "模拟提交成功");
|
||||
};
|
||||
// 关闭对话框动画结束后触发
|
||||
const afterClose = () => {
|
||||
formRef.value.resetFields();
|
||||
addFrom.value = {
|
||||
parentId: null,
|
||||
name: "",
|
||||
sort: 0,
|
||||
leader: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
status: 1,
|
||||
description: ""
|
||||
};
|
||||
};
|
||||
const onUpdate = (row: any) => {
|
||||
title.value = "修改部门";
|
||||
formType.value = 1;
|
||||
addFrom.value = deepClone(row);
|
||||
row.parentId == 0 && (addFrom.value.parentId = null);
|
||||
open.value = true;
|
||||
};
|
||||
const addDivision = (id: any) => {
|
||||
title.value = "新增部门";
|
||||
formType.value = 2;
|
||||
addFrom.value.parentId = id == 0 ? null : id;
|
||||
open.value = true;
|
||||
};
|
||||
// 删除部门
|
||||
const onDelete = () => {
|
||||
console.log("删除");
|
||||
};
|
||||
// const loading = ref(false);
|
||||
// const pagination = ref({
|
||||
// pageSize: 10,
|
||||
// showPageSize: true
|
||||
// });
|
||||
// const selectedKeys = ref([]);
|
||||
// const dictList = ref([
|
||||
// {
|
||||
// id: "01",
|
||||
// name: "性别",
|
||||
// value: "gender",
|
||||
// status: 1,
|
||||
// description: "这是一个性别字典",
|
||||
// createTime: "2024-07-01 10:00:00",
|
||||
// list: [
|
||||
// { id: "012", name: "女", value: 0, status: 1 },
|
||||
// { id: "011", name: "男", value: 1, status: 1 },
|
||||
// { id: "013", name: "未知", value: 2, status: 1 }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// id: "02",
|
||||
// name: "状态",
|
||||
// value: "status",
|
||||
// status: 1,
|
||||
// description: "想要统一状态字段可以用这个",
|
||||
// createTime: "2024-07-01 10:00:00",
|
||||
// list: [
|
||||
// { id: "021", name: "禁用", value: 0, status: 1 },
|
||||
// { id: "022", name: "启用", value: 1, status: 1 }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// id: "03",
|
||||
// name: "岗位",
|
||||
// value: "post",
|
||||
// status: 1,
|
||||
// description: "岗位字段",
|
||||
// createTime: "2024-07-01 10:00:00",
|
||||
// list: [
|
||||
// { id: "031", name: "总经理", value: 1, status: 1 },
|
||||
// { id: "032", name: "总监", value: 2, status: 1 },
|
||||
// { id: "033", name: "人事主管", value: 3, status: 1 },
|
||||
// { id: "034", name: "开发部主管", value: 4, status: 1 },
|
||||
// { id: "035", name: "普通职员", value: 5, status: 1 },
|
||||
// { id: "036", name: "其它", value: 999, status: 1 }
|
||||
// ]
|
||||
// }
|
||||
// ]);
|
||||
// const select = (list: []) => {
|
||||
// selectedKeys.value = list;
|
||||
// };
|
||||
// const selectAll = (state: boolean) => {
|
||||
// selectedKeys.value = state ? (dictList.value.map(el => el.id) as []) : [];
|
||||
// };
|
||||
// const onDictData = (e: any) => {
|
||||
// console.log("字典数据", e);
|
||||
// };
|
||||
|
||||
const openState = ref(dictFilter("status"));
|
||||
const form = ref({
|
||||
name: "",
|
||||
status: ""
|
||||
});
|
||||
const search = () => {
|
||||
getDivision();
|
||||
};
|
||||
const reset = () => {
|
||||
form.value = {
|
||||
name: "",
|
||||
status: ""
|
||||
};
|
||||
};
|
||||
const tableRef = ref();
|
||||
const tableData = ref();
|
||||
const getDivision = async () => {
|
||||
let res = await getDivisionAPI();
|
||||
tableData.value = res.data;
|
||||
setTimeout(() => {
|
||||
tableRef.value.expandAll();
|
||||
}, 0);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDivision();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user