From d12e110b3d95298172a4ca3d1123638b67b835c6 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期一, 11 十一月 2024 16:32:53 +0800
Subject: [PATCH] 新增部门管理
---
src/api/login/UserMenuData.ts | 15 ++
src/views/project/yw/systemManage/departmentMgr/DepartmentMgr.vue | 150 +++++++++++++++++++++++++
src/api/department/index.ts | 30 +++++
customer_list/yw/static/config/route.js | 8 +
src/views/project/yw/systemManage/departmentMgr/optDlg/OptDlg.vue | 129 +++++++++++++++++++++
5 files changed, 332 insertions(+), 0 deletions(-)
diff --git a/customer_list/yw/static/config/route.js b/customer_list/yw/static/config/route.js
index 8670816..a781642 100644
--- a/customer_list/yw/static/config/route.js
+++ b/customer_list/yw/static/config/route.js
@@ -27,6 +27,14 @@
path: '/authCenter/userMgr',
component: '/project/yw/systemManage/userMgr/UserMgr.vue',
},
+ //閮ㄩ棬绠＄悊
+ {
+ name: 'DepartmentMgr',
+ isKeepAlive: true,
+ isAffix: false,
+ path: '/authCenter/departmentMgr',
+ component: '/project/yw/systemManage/departmentMgr/DepartmentMgr.vue',
+ },
{
name: 'AccessLog',
isKeepAlive: true,
diff --git a/src/api/department/index.ts b/src/api/department/index.ts
new file mode 100644
index 0000000..a8c8f11
--- /dev/null
+++ b/src/api/department/index.ts
@@ -0,0 +1,30 @@
+import request from '/@/utils/request';
+
+/**
+ * @description 娣诲姞閮ㄩ棬淇℃伅
+ **/
+export const add_department_info = (params) =>
+ request({
+ url: `/admin/department/add_department_info`,
+ method: 'post',
+ params: {},
+ data: params,
+ });
+/**
+ * @description 鍒犻櫎閮ㄩ棬淇℃伅
+ **/
+export const delete_department = (params) =>
+ request({
+ url: `/admin/department/delete_department`,
+ method: 'post',
+ params: {},
+ data: params,
+ });
+/**
+ * @description 鑾峰彇閮ㄩ棬淇℃伅
+ **/
+export const get_department_list = () =>
+ request({
+ url: `/admin/department/get_department_list`,
+ method: 'post',
+ });
diff --git a/src/api/login/UserMenuData.ts b/src/api/login/UserMenuData.ts
index 55d3d73..ae37c1b 100644
--- a/src/api/login/UserMenuData.ts
+++ b/src/api/login/UserMenuData.ts
@@ -426,6 +426,21 @@
{
Children: [],
ID: '333-3',
+ ParentID: '1742436890822447205',
+ Type: 2,
+ Name: '閮ㄩ棬绠＄悊',
+ Path: '/authCenter/departmentMgr',
+ Permission: '',
+ Icon: 'ywifont ywicon-jiegou',
+ IsIframe: false,
+ IsHide: false,
+ Weight: 0,
+ SortCode: 2,
+ Description: '',
+ },
+ {
+ Children: [],
+ ID: '333-4',
ParentID: '1742436890822447105',
Type: 2,
Name: '鎿嶄綔鏃ュ織',
diff --git a/src/views/project/yw/systemManage/departmentMgr/DepartmentMgr.vue b/src/views/project/yw/systemManage/departmentMgr/DepartmentMgr.vue
new file mode 100644
index 0000000..d93d5e0
--- /dev/null
+++ b/src/views/project/yw/systemManage/departmentMgr/DepartmentMgr.vue
@@ -0,0 +1,150 @@
+<template>
+ <HMContainer type="card">
+ <template #header>
+ <el-form ref="queryFormRef" :inline="true" :model="queryParams">
+ <el-form-item label="鍚嶇О" prop="name">
+ <el-input v-model="queryParams.name" style="width: 226.4px" placeholder="鍚嶇О" clearable @input="debounceQueryTable" />
+ </el-form-item>
+
+ <el-form-item>
+ <el-button icon="ele-Plus" @click="openOptDlg()" type="primary"> 娣诲姞 </el-button>
+ </el-form-item>
+ </el-form>
+ </template>
+ <template #main>
+ <div class="h-full" ref="chatDragContainerRef">
+ <el-table
+ v-loading="tableLoading"
+ ref="draggableTableRef"
+ class="h100"
+ row-key="id"
+ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+ :header-cell-style="{ textAlign: 'center' }"
+ border
+ :cell-style="tableCellCenterExceptColumn()"
+ :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
+ :data="displayTableData"
+ highlight-current-row
+ >
+ <el-table-column label="閮ㄩ棬鍚嶇О" prop="name" show-overflow-tooltip fixed="left"> </el-table-column>
+ <el-table-column label="鍒涘缓浜�" prop="create_user" width="190" show-overflow-tooltip> </el-table-column>
+ <el-table-column label="鍒涘缓鏃堕棿" prop="create_time" show-overflow-tooltip> </el-table-column>
+ <el-table-column label="鎿嶄綔" width="80" fixed="right" show-overflow-tooltip>
+ <template #default="scope">
+ <div class="space-x-3 items-center flex">
+ <el-tooltip effect="dark" content="鍒犻櫎" placement="top">
+ <i class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer" @click="deleteCurrentRow(scope.row)"></i>
+ </el-tooltip>
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </template>
+ <OptDlg
+ v-model="optDlgIsShow"
+ :item="optDlgMapRow"
+ @insert="insertOpt"
+ @update="updateOpt"
+ :departmentTreeList="tableTreeData"
+ ></OptDlg>
+ </HMContainer>
+</template>
+
+<script setup lang="ts">
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { computed, onMounted, ref } from 'vue';
+import OptDlg from './optDlg/OptDlg.vue';
+import * as departmentApi from '/@/api/department/index';
+import HMContainer from '/@/components/layout/HMContainer.vue';
+import { usePageDisplay } from '/@/hooks/usePageDisplay';
+import { useQueryTable } from '/@/hooks/useQueryTable';
+import { convertListToTree, debounce, tableCellCenterExceptColumn } from '/@/utils/util';
+//#region ====================== 琛ㄦ牸鏁版嵁锛宼able init ======================
+const tableLoading = ref(false);
+const tableData = ref([]);
+const isDragStatus = ref(false);
+const tableTreeData = computed(() =>
+ convertListToTree(tableData.value, {
+ ID: 'id',
+ ParentID: 'parent_id',
+ Children: 'children',
+ })
+);
+const getTableData = async () => {
+ const res = await departmentApi.get_department_list();
+ tableData.value = (res?.values ?? []).map((item) => ({
+ create_time: item.create_time?.slice(0, 10),
+ id: item.id,
+ parent_id: item.parent_id,
+ name: item.name,
+ create_user: item.create_user,
+ }));
+};
+//#endregion
+//#region ====================== 琛ㄦ牸鏌ヨ銆佹帓搴忥紝search form init ======================
+const queryParams = ref({
+ name: '',
+});
+const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableTreeData, queryParams, () => {
+ displayTableData.value = tableTreeData.value;
+});
+const debounceQueryTable = debounce(handleQueryTable, 400);
+//#endregion
+//#region ====================== 鏌ヨ蹇嵎閿� ======================
+const queryFormRef = ref(null);
+const pressEnterSearch = (ev: KeyboardEvent) => {
+ if (ev.key === 'Enter') {
+ handleQueryTable();
+ }
+};
+usePageDisplay(
+ () => {
+ queryFormRef.value?.$el?.addEventListener('keypress', pressEnterSearch);
+ },
+ () => {
+ queryFormRef.value?.$el?.removeEventListener('keypress', pressEnterSearch);
+ }
+);
+//#endregion
+//#region ====================== 娣诲姞淇敼鎿嶄綔 ======================
+const optDlgIsShow = ref(false);
+const optDlgMapRow = ref(null);
+const openOptDlg = (row?: any) => {
+ optDlgMapRow.value = row;
+ optDlgIsShow.value = true;
+};
+const updateOpt = (formValue) => {
+ const foundIndex = tableData.value.findIndex((item) => item.id === formValue.id);
+ if (foundIndex > -1) {
+ tableData.value[foundIndex] = {
+ ...tableData.value[foundIndex],
+ ...formValue,
+ };
+ }
+};
+const insertOpt = () => {
+ getTableData();
+};
+//#endregion
+
+const deleteCurrentRow = (row: any) => {
+ ElMessageBox.confirm(`纭畾鍒犻櫎鐢ㄦ埛锛氥��${row.name}銆�?`, '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ }).then(async () => {
+ const res = await departmentApi.delete_department({
+ id: row.id,
+ });
+ const foundIndex = tableData.value.findIndex((item) => item === row);
+ foundIndex > -1 && tableData.value.splice(foundIndex, 1);
+ ElMessage.success('鍒犻櫎鐢ㄦ埛鎴愬姛');
+ });
+};
+//#endregion
+onMounted(async () => {
+ getTableData();
+});
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/project/yw/systemManage/departmentMgr/optDlg/OptDlg.vue b/src/views/project/yw/systemManage/departmentMgr/optDlg/OptDlg.vue
new file mode 100644
index 0000000..b6166fb
--- /dev/null
+++ b/src/views/project/yw/systemManage/departmentMgr/optDlg/OptDlg.vue
@@ -0,0 +1,129 @@
+<template>
+ <ywDialog
+ v-model="dialogIsShow"
+ :headerIcon="dialogHeaderIcon"
+ :title="dialogTitle"
+ width="380"
+ @dlgClosed="closeDialog"
+ @submit="submitFormValue"
+ >
+ <el-form :model="dialogFormValue" ref="dialogFormRef" :rules="dialogFormRules" label-width="80">
+ <el-row :gutter="35">
+ <el-col :span="24" class="mb20">
+ <el-form-item label="閮ㄩ棬鍚嶇О" prop="name">
+ <el-input v-model="dialogFormValue.name"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="24" class="mb20"
+ ><el-form-item label="鐖剁骇" prop="parent_id" auto-complete="new-password">
+ <el-tree-select
+ filterable
+ style="width: 100%"
+ v-model="dialogFormValue.parent_id"
+ :props="{
+ id: 'id',
+ label: 'name',
+ children: 'children',
+ }"
+ :data="tableTreeData"
+ node-key="id"
+ :clearable="true"
+ :accordion="true"
+ :expandNode="false"
+ :check-strictly="true"
+ placeholder="璇烽�夋嫨鐖剁骇"
+ >
+ </el-tree-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ </ywDialog>
+</template>
+
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus';
+import { ElMessage } from 'element-plus';
+import { computed, ref, toRefs, watch } from 'vue';
+import * as departmentApi from '/@/api/department/index';
+import ywDialog from '/@/components/dialog/yw-dialog.vue';
+import { formatDate } from '/@/utils/formatTime';
+import { deepClone } from '/@/utils/other';
+const props = defineProps(['item', 'departmentTreeList']);
+const { departmentTreeList } = toRefs(props);
+const emit = defineEmits(['update', 'insert']);
+//#region ====================== 澧炲姞銆佷慨鏀硅褰曟搷浣�, dialog init======================
+const isEditDialog = ref(false);
+const dialogTitle = computed(() => {
+ return isEditDialog.value ? `淇敼閮ㄩ棬銆�${props.item?.name}銆慲 : `娣诲姞閮ㄩ棬`;
+});
+const dialogHeaderIcon = computed(() => {
+ return isEditDialog.value ? 'ele-Edit' : 'ele-Plus';
+});
+const dialogFormValue = ref(null);
+const dialogIsShow = defineModel({
+ type: Boolean,
+});
+const dialogFormRef = ref<FormInstance>(null);
+const dialogFormRules = ref<FormRules>({
+ name: [{ required: true, message: '璇疯緭鍏ラ儴闂ㄥ悕绉�', trigger: 'blur' }],
+});
+const openOperateDialog = (row?) => {
+ if (row) {
+ isEditDialog.value = true;
+ const { id, parent_id, name, create_user, create_time } = row;
+ dialogFormValue.value = deepClone({ id, parent_id, name, create_user, create_time });
+ } else {
+ isEditDialog.value = false;
+ dialogFormValue.value = {
+ name: '',
+ parent_id: '',
+ };
+ }
+};
+const closeDialog = () => {
+ dialogIsShow.value = false;
+ dialogFormRef.value.clearValidate();
+};
+
+const submitFormValue = async () => {
+ const valid = await dialogFormRef.value.validate().catch(() => {});
+ if (!valid) return;
+ const updateTime = formatDate(new Date());
+
+ if (isEditDialog.value) {
+ return;
+ const res = await departmentApi.updateUserInfoByPost(dialogFormValue.value);
+ emit('update', { ...dialogFormValue.value });
+
+ closeDialog();
+ ElMessage.success('淇敼閮ㄩ棬鎴愬姛');
+ } else {
+ dialogFormValue.value.parent_id = dialogFormValue.value.parent_id || '0';
+ const res = await departmentApi.add_department_info(dialogFormValue.value);
+ emit('insert');
+ // tableData.value.push(newData);
+ closeDialog();
+ ElMessage.success('娣诲姞閮ㄩ棬鎴愬姛');
+ }
+};
+
+//#endregion
+
+watch(
+ () => dialogIsShow.value,
+ (val) => {
+ if (!val) return;
+ openOperateDialog(props.item);
+ }
+);
+const tableTreeData = ref([]);
+watch(
+ () => departmentTreeList.value,
+ (val) => {
+ if (!val) return;
+ tableTreeData.value = val;
+ }
+);
+</script>
+<style scoped lang="scss"></style>
--
Gitblit v1.9.3