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