|
|
@@ -1,37 +1,36 @@
|
|
|
<template>
|
|
|
<PageWrapper>
|
|
|
<el-card :bordered="false" class="proCard">
|
|
|
- <BasicTable
|
|
|
- :columns="columns"
|
|
|
- :request="loadDataTable"
|
|
|
- row-key="deptId"
|
|
|
- :tableSetting="{
|
|
|
- size: false,
|
|
|
- redo: false,
|
|
|
- fullscreen: false,
|
|
|
- striped: false,
|
|
|
- setting: false,
|
|
|
- }"
|
|
|
- ref="basicTableRef"
|
|
|
- :actionColumn="actionColumn"
|
|
|
- @update:checked-row-keys="onCheckedRow"
|
|
|
- :pagination="false"
|
|
|
- >
|
|
|
- <template #tableTitle>
|
|
|
- <el-space align="center">
|
|
|
- <el-button type="primary" @click="openCreateDrawer">
|
|
|
- <template #icon>
|
|
|
- <el-icon>
|
|
|
- <FileAddOutlined />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- 添加
|
|
|
- </el-button>
|
|
|
- </el-space>
|
|
|
- </template>
|
|
|
- </BasicTable>
|
|
|
+ <template #header>
|
|
|
+ <el-space align="center">
|
|
|
+ <el-button type="primary" @click="openCreateDrawer">
|
|
|
+ <template #icon>
|
|
|
+ <el-icon>
|
|
|
+ <FileAddOutlined />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ 添加
|
|
|
+ </el-button>
|
|
|
+ </el-space>
|
|
|
+ </template>
|
|
|
+ <el-table :data="tableData" row-key="id" :tree-props="treeProps" default-expand-all>
|
|
|
+ <el-table-column prop="deptName" label="组织名称" />
|
|
|
+ <el-table-column label="操作" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-space>
|
|
|
+ <div class="el-space el-space--horizontal">
|
|
|
+ <div class="el-space__item" @click="handleEdit(scope.row)">
|
|
|
+ <div><img :src="editIcon" class="el-tooltip__trigger" /></div>
|
|
|
+ </div>
|
|
|
+ <div class="el-space__item" @click="handleDelete(scope.row)">
|
|
|
+ <div><img :src="deleteIcon" class="el-tooltip__trigger" /></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-space>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</el-card>
|
|
|
-
|
|
|
<CreateDrawer_shangfei
|
|
|
ref="createDrawerRef"
|
|
|
:title="drawerTitle"
|
|
|
@@ -52,25 +51,25 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { h, reactive, ref } from 'vue';
|
|
|
+ import { onMounted, reactive, ref } from 'vue';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
- import { BasicTable, TableAction, BasicColumn } from '@/components/Table';
|
|
|
- import { getAllDepartments , deleteDepartments} from '@/api/auth/dept';
|
|
|
+ import { getAllDepartments, deleteDepartments } from '@/api/auth/dept';
|
|
|
import { FileAddOutlined } from '@vicons/antd';
|
|
|
import CreateDrawer from './CreateDrawer.vue';
|
|
|
import CreateDrawer_shangfei from './CreateDrawer-shangfei.vue';
|
|
|
- import { columns } from './columns';
|
|
|
import { useGlobSetting } from '@/hooks/setting';
|
|
|
import type { DeptTreeItem } from '@/types/dept/type';
|
|
|
+ import editIcon from '@/assets/images/reportmessage/edit.png';
|
|
|
+ import deleteIcon from '@/assets/images/reportmessage/delete.png';
|
|
|
|
|
|
const globSetting = useGlobSetting();
|
|
|
const disableDepartmentEdit = globSetting.disableDepartmentEdit;
|
|
|
|
|
|
const message = ElMessage;
|
|
|
- const basicTableRef = ref();
|
|
|
- const rowKeys = ref([]);
|
|
|
- const rowKeysName = ref<string>();
|
|
|
const tableData = ref<any[]>([]);
|
|
|
+ const treeProps = reactive({
|
|
|
+ checkStrictly: false,
|
|
|
+ });
|
|
|
const createDrawerRef = ref();
|
|
|
const drawerTitle = ref('添加部门');
|
|
|
const currentDept = ref<DeptTreeItem>({
|
|
|
@@ -84,59 +83,16 @@
|
|
|
createdAt: '',
|
|
|
updatedAt: '',
|
|
|
isDeleted: 0,
|
|
|
- tenantId: 0
|
|
|
- });
|
|
|
-
|
|
|
- const actionColumn: BasicColumn = reactive({
|
|
|
- width: 150,
|
|
|
- title: '操作',
|
|
|
- prop: 'action',
|
|
|
- fixed: 'right',
|
|
|
- align: 'center',
|
|
|
- render(record) {
|
|
|
- const { index } = record;
|
|
|
- if (index === 0 && disableDepartmentEdit) return null;
|
|
|
- return h(TableAction as any, {
|
|
|
- actions: [
|
|
|
- {
|
|
|
- label: '删除',
|
|
|
- isConfirm: true,
|
|
|
- popConfirm: {
|
|
|
- onConfirm: handleDelete.bind(null, record.row),
|
|
|
- title: '您确定要删除吗?',
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- label: '编辑',
|
|
|
- onClick: handleEdit.bind(null, record.row),
|
|
|
- },
|
|
|
- ],
|
|
|
- });
|
|
|
- },
|
|
|
+ tenantId: 0,
|
|
|
});
|
|
|
|
|
|
- const loadDataTable = async (res) => {
|
|
|
+ const loadDataTable = async () => {
|
|
|
const result = await getAllDepartments();
|
|
|
tableData.value = result;
|
|
|
- return { list: result };
|
|
|
};
|
|
|
|
|
|
- function onCheckedRow(keys) {
|
|
|
- rowKeys.value = keys;
|
|
|
- rowKeysName.value = tableData.value
|
|
|
- .filter((item) => {
|
|
|
- return keys.includes(item.id);
|
|
|
- })
|
|
|
- .map((item) => {
|
|
|
- return item.username;
|
|
|
- })
|
|
|
- .join(',');
|
|
|
- }
|
|
|
-
|
|
|
function reloadTable() {
|
|
|
- basicTableRef.value.reload();
|
|
|
+ loadDataTable()
|
|
|
}
|
|
|
|
|
|
function openCreateDrawer() {
|
|
|
@@ -155,7 +111,30 @@
|
|
|
function handleDelete(record: Recordable) {
|
|
|
deleteDepartments(record.id).then(() => {
|
|
|
message.success('删除成功');
|
|
|
- reloadTable();
|
|
|
+ loadDataTable();
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ loadDataTable();
|
|
|
+ });
|
|
|
</script>
|
|
|
+<style scoped>
|
|
|
+ .el-space--horizontal {
|
|
|
+ align-items: center;
|
|
|
+ gap: 0px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tooltip__trigger {
|
|
|
+ width: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tooltip__password {
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ .box-item {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+</style>
|