新增部门管理

yangyin

2024-11-11 d12e110b3d95298172a4ca3d1123638b67b835c6

新增部门管理

 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,

 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',
    });

 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: '操作日志',

 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 ====================== è¡¨æ ¼æ•°æ®ï¼Œtable 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>

 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>