mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-21 12:52:26 +00:00
发布v2.0.0分支
This commit is contained in:
zhangtao
@@ -1,507 +1,526 @@
|
||||
<!-- 部门配置 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索表单 -->
|
||||
<div class="tree-search-wrapper">
|
||||
<a-card >
|
||||
<a-form :model="queryState" @finish="onFinish">
|
||||
<a-flex wrap="wrap" gap="middle">
|
||||
<a-form-item name="name" label="名称" >
|
||||
<a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear style="width: 200px;"/>
|
||||
</a-form-item>
|
||||
<a-form-item name="available" label="状态" >
|
||||
<a-select v-model:value="queryState.available" placeholder="请选择状态" allowClear style="width: 200px;">
|
||||
<a-select-option value="true">启用</a-select-option>
|
||||
<a-select-option value="false">停用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-button type="primary" html-type="submit" :loading="tableLoading">查询</a-button>
|
||||
<a-button @click="resetFields">重置</a-button>
|
||||
</a-flex>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<div class="table-wrapper">
|
||||
<a-card title="部门列表">
|
||||
<template #extra>
|
||||
<a-space>
|
||||
<a-button type="primary" :icon="h(PlusOutlined)" @click="modalHandle('create')">新建</a-button>
|
||||
<a-dropdown>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleMoreClick">
|
||||
<a-menu-item key="1"><CheckOutlined />批量启用</a-menu-item>
|
||||
<a-menu-item key="2"><StopOutlined />批量停用</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button>更多<DownOutlined /></a-button>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<a-table v-if="dataSource"
|
||||
:defaultExpandAllRows="true"
|
||||
:rowKey="record => record.id"
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="tableLoading"
|
||||
:row-selection="rowSelection"
|
||||
:pagination="false"
|
||||
:scroll="{ x: 500, y: 'calc(100vh - 430px)' }"
|
||||
:style="{ minHeight: 'calc(100vh - 370px)' }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
||||
<template v-if="column.dataIndex === 'available'">
|
||||
<a-badge :status="record.available ? 'processing': 'error'" :text="record.available ? '启用' : '停用'" />
|
||||
</template>
|
||||
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space size="middle">
|
||||
<a @click="modalHandle('view', record)">查看</a>
|
||||
<a @click="modalHandle('update', record)">修改</a>
|
||||
<a-popconfirm title="确定要删除吗?" ok-text="确定" cancel-text="取消" @confirm="deleteRow(record)">
|
||||
<a style="color: red;">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-form ref="queryFormRef" :model="queryFormData" :inline="true">
|
||||
<el-form-item prop="name" label="部门名称">
|
||||
<el-input v-model="queryFormData.name" placeholder="请输入部门名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item prop="status" label="状态">
|
||||
<el-select v-model="queryFormData.status" placeholder="请选择状态" clearable style="width: 160px">
|
||||
<el-option value="true" label="启用" />
|
||||
<el-option value="false" label="停用" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 时间范围，收起状态下隐藏 -->
|
||||
<el-form-item v-if="isExpand" prop="start_time" label="创建时间">
|
||||
<el-date-picker v-model="queryFormData.start_time" type="daterange" value-format="yyyy-MM-dd"
|
||||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
|
||||
</el-form-item>
|
||||
<!-- 查询、重置、展开/收起按钮 -->
|
||||
<el-form-item class="search-buttons">
|
||||
<el-button type="primary" icon="search" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
|
||||
<!-- 展开/收起 -->
|
||||
<template v-if="isExpandable">
|
||||
<el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
|
||||
{{ isExpand ? "收起" : "展开" }}
|
||||
<el-icon>
|
||||
<template v-if="isExpand">
|
||||
<ArrowUp />
|
||||
</template>
|
||||
<template v-else>
|
||||
<ArrowDown />
|
||||
</template>
|
||||
</el-icon>
|
||||
</el-link>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<el-card shadow="hover" class="data-table">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>
|
||||
<el-tooltip content="部门管理维护部门信息。">
|
||||
<QuestionFilled class="w-4 h-4 mx-1" />
|
||||
</el-tooltip>
|
||||
部门列表
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 功能区域 -->
|
||||
<div class="data-table__toolbar">
|
||||
<div class="data-table__toolbar--actions">
|
||||
<el-button type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
|
||||
<el-button type="danger" icon="delete" :disabled="selectIds.length === 0"
|
||||
@click="handleOperation('delete')">批量删除</el-button>
|
||||
<el-dropdown>
|
||||
<el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">更多
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-menu @click="handleMoreClick">
|
||||
<el-menu-item key="1">
|
||||
<span>
|
||||
<el-icon>
|
||||
<Check />
|
||||
</el-icon>
|
||||
<span>批量启用</span>
|
||||
</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item key="2">
|
||||
<span>
|
||||
<el-icon>
|
||||
<CircleClose />
|
||||
</el-icon>
|
||||
<span>批量停用</span>
|
||||
</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="data-table__toolbar--tools">
|
||||
<el-tooltip content="导入">
|
||||
<el-button type="info" icon="upload" circle @click="handleOperation('import')" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="导出">
|
||||
<el-button type="warning" icon="download" circle @click="handleOperation('export')" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="刷新">
|
||||
<el-button type="primary" icon="refresh" circle @click="handleRefresh" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="列表筛选">
|
||||
<el-dropdown trigger="click">
|
||||
<el-button type="default" icon="operation" circle />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="column in tableColumns" :key="column.prop" :command="column">
|
||||
<el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域：系统配置列表 -->
|
||||
<el-table ref="dataTableRef" v-loading="loading" row-key="id" :data="pageTableData" :tree-props="{
|
||||
children: 'children',
|
||||
hasChildren: 'hasChildren',
|
||||
}" highlight-current-row class="data-table__content" height="450" border stripe
|
||||
@selection-change="handleSelectionChange">
|
||||
<template #empty>
|
||||
<el-empty :image-size="80" description="暂无数据" />
|
||||
</template>
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'selection')?.show" type="selection" width="55"
|
||||
align="center" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号"
|
||||
width="60" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'name')?.show" key="name" label="部门名称" prop="name"
|
||||
min-width="80" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'status')?.show" key="status" label="状态"
|
||||
prop="status" min-width="60">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === true ? 'success' : 'danger'">
|
||||
{{ scope.row.status ? "启用" : "停用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'order')?.show" key="order" label="排序" prop="order"
|
||||
min-width="100" show-overflow-tooltip />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'description')?.show" key="description" label="描述"
|
||||
prop="description" min-width="100" />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'created_at')?.show" key="created_at" label="创建时间"
|
||||
prop="created_at" min-width="120" sortable />
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'updated_at')?.show" key="updated_at" label="更新时间"
|
||||
prop="updated_at" min-width="120" sortable />
|
||||
|
||||
<el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" fixed="right" label="操作"
|
||||
min-width="220">
|
||||
<template #default="scope">
|
||||
<el-button type="success" size="small" link icon="plus" @click="handleOpenDialog('create')">新增</el-button>
|
||||
<el-button type="info" size="small" link icon="document"
|
||||
@click="handleOpenDialog('detail', scope.row.id)">详情</el-button>
|
||||
<el-button type="primary" size="small" link icon="edit"
|
||||
@click="handleOpenDialog('update', scope.row.id)">编辑</el-button>
|
||||
<el-button type="danger" size="small" link icon="delete"
|
||||
@click="handleOperation('delete', scope.row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<template #footer>
|
||||
<pagination v-if="total > 0" v-model:total="total" v-model:page="queryFormData.page_no" v-model:limit="queryFormData.page_size"
|
||||
@pagination="loadingData" />
|
||||
</template>
|
||||
</el-card>
|
||||
|
||||
<!-- 弹窗区域 -->
|
||||
<div class="modal-wrapper">
|
||||
<a-modal
|
||||
v-model:open="openModal"
|
||||
@ok="handleModalSumbit"
|
||||
:width="800"
|
||||
:destroyOnClose="true"
|
||||
:confirmLoading="modalSubmitLoading"
|
||||
style="top: 30px"
|
||||
>
|
||||
<template #title>
|
||||
<span>{{ modalTitle === 'create' ? '新建部门' : (modalTitle === 'view' ? '查看部门' : '修改部门') }}</span>
|
||||
</template>
|
||||
<el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" @close="handleCloseDialog">
|
||||
<!-- 详情 -->
|
||||
<template v-if="dialogVisible.type === 'detail'">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="部门名称" :span="2">{{ detailFormData.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态" :span="2">
|
||||
<el-tag v-if="detailFormData.status" type="success">启用</el-tag>
|
||||
<el-tag v-else type="danger">停用</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="排序" :span="2">{{ detailFormData.order }}</el-descriptions-item>
|
||||
<el-descriptions-item label="描述" :span="2">{{ detailFormData.description }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建人" :span="2">{{ detailFormData.creator?.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间" :span="2">{{ detailFormData.created_at }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间" :span="2">{{ detailFormData.updated_at }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
<!-- 新增、编辑表单 -->
|
||||
<template v-else>
|
||||
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-suffix=":" label-width="100px">
|
||||
<el-form-item label="部门名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入部门名称" :maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上级部门" prop="parent_id">
|
||||
<el-tree-select v-model="formData.parent_id" placeholder="请选择上级部门" :data="deptOptions" filterable
|
||||
check-strictly :render-after-expand="false" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="order">
|
||||
<el-input-number v-model="formData.order" controls-position="right" :min="0" :max="999" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :value="true">启用</el-radio>
|
||||
<el-radio :value="false">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input v-model="formData.description" :rows="4" :maxlength="100" show-word-limit type="textarea"
|
||||
placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<!-- 查看表单 -->
|
||||
<template v-if="modalTitle === 'view'">
|
||||
<a-spin :spinning="detailStateLoading">
|
||||
<a-descriptions
|
||||
:column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1 }"
|
||||
:labelStyle="{ width: '140px' }"
|
||||
bordered
|
||||
>
|
||||
<a-descriptions-item label="名称">{{ detailState.name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="排序">{{ detailState.order }}</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">
|
||||
<a-badge :status="detailState.available ? 'processing': 'error'" :text="detailState.available ? '启用' : '停用'" />
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="上级部门" :span="2">{{ detailState.parent_name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">{{ detailState.created_at }}</a-descriptions-item>
|
||||
<a-descriptions-item label="修改时间">{{ detailState.updated_at }}</a-descriptions-item>
|
||||
<a-descriptions-item label="备注" :span="2">{{ detailState.description }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-spin>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<!-- 详情弹窗不需要确定按钮的提交逻辑 -->
|
||||
<el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">确定</el-button>
|
||||
<el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
|
||||
<el-button @click="handleCloseDialog">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 新建表单 -->
|
||||
<template v-else-if="modalTitle === 'create'">
|
||||
<a-form
|
||||
ref="createForm"
|
||||
:model="createState"
|
||||
:label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 15 }"
|
||||
>
|
||||
<a-form-item
|
||||
name="name"
|
||||
label="名称"
|
||||
:rules="[{ required: true, message: '请输入名称' }]"
|
||||
>
|
||||
<a-input v-model:value="createState.name" placeholder="请输入名称" allowClear />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
name="order"
|
||||
label="排序"
|
||||
:rules="[{ required: true, message: '请输入排序' }]"
|
||||
>
|
||||
<a-input-number v-model:value="createState.order" :min="1" style="width: 100%" allow-clear/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="parent_id" label="上级部门">
|
||||
<a-tree-select
|
||||
v-model:value="createState.parent_id"
|
||||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
:tree-data="dataSource"
|
||||
:field-names="{ children: 'children', label: 'name', value: 'id' }"
|
||||
tree-node-filter-prop="name"
|
||||
style="width: 100%"
|
||||
show-search
|
||||
allow-clear
|
||||
placeholder="请选择上级部门"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
name="available"
|
||||
label="状态"
|
||||
:rules="[{ required: true, message: '请选择状态' }]"
|
||||
>
|
||||
<a-radio-group v-model:value="createState.available">
|
||||
<a-radio :value="true">启用</a-radio>
|
||||
<a-radio :value="false">停用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="description" label="备注">
|
||||
<a-textarea
|
||||
v-model:value="createState.description"
|
||||
placeholder="请输入备注"
|
||||
:rows="4"
|
||||
allowClear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<!-- 修改表单 -->
|
||||
<template v-else>
|
||||
<a-form
|
||||
ref="updateForm"
|
||||
:model="updateState"
|
||||
:label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 15 }"
|
||||
>
|
||||
<a-form-item
|
||||
name="name"
|
||||
label="名称"
|
||||
:rules="[{ required: true, message: '请输入名称' }]"
|
||||
>
|
||||
<a-input v-model:value="updateState.name" placeholder="请输入名称" allowClear />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
name="order"
|
||||
label="排序"
|
||||
:rules="[{ required: true, message: '请输入排序' }]"
|
||||
>
|
||||
<a-input-number v-model:value="updateState.order" :min="1" style="width: 100%" allow-clear/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="parent_id" label="上级部门">
|
||||
<a-tree-select
|
||||
v-model:value="updateState.parent_id"
|
||||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
:tree-data="dataSource"
|
||||
:field-names="{ children: 'children', label: 'name', value: 'id' }"
|
||||
tree-node-filter-prop="name"
|
||||
style="width: 100%"
|
||||
show-search
|
||||
allow-clear
|
||||
placeholder="请选择上级部门"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
name="available"
|
||||
label="状态"
|
||||
:rules="[{ required: true, message: '请选择状态' }]"
|
||||
>
|
||||
<a-radio-group v-model:value="updateState.available">
|
||||
<a-radio :value="true">启用</a-radio>
|
||||
<a-radio :value="false">停用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="description" label="备注">
|
||||
<a-textarea
|
||||
v-model:value="updateState.description"
|
||||
placeholder="请输入备注"
|
||||
:rows="4"
|
||||
allowClear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
</a-modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed, onMounted, h, unref } from 'vue';
|
||||
import { message, Modal, Table } from 'ant-design-vue';
|
||||
import type { MenuProps, TableColumnsType } from 'ant-design-vue';
|
||||
import { PlusOutlined, DownOutlined, CheckOutlined, StopOutlined } from '@ant-design/icons-vue';
|
||||
import { listToTree, cloneDeep, isEmpty } from '@/utils/util';
|
||||
import { getDeptList, createDept, updateDept, deleteDept, batchAvailableDept } from '@/api/system/dept';
|
||||
import type { searchDataType, tableDataType } from './types';
|
||||
|
||||
// 响应式数据
|
||||
const createForm = ref();
|
||||
const updateForm = ref();
|
||||
const tableLoading = ref(false);
|
||||
const openModal = ref(false);
|
||||
const modalTitle = ref('');
|
||||
const modalSubmitLoading = ref(false);
|
||||
const detailStateLoading = ref(false);
|
||||
const dataSource = ref<tableDataType[]>([]);
|
||||
const selectedRowKeys = ref<tableDataType['id'][]>([]);
|
||||
|
||||
const queryState = reactive<searchDataType>({
|
||||
name: null,
|
||||
available: null
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "Dept",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
const createState = reactive<tableDataType>({
|
||||
name: '',
|
||||
order: 1,
|
||||
available: true,
|
||||
parent_id: undefined,
|
||||
description: ''
|
||||
|
||||
import DeptAPI, { DeptTable, DeptForm, DeptPageQuery } from "@/api/system/dept";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
import { listToTree } from "@/utils/common";
|
||||
|
||||
const queryFormRef = ref();
|
||||
const dataFormRef = ref();
|
||||
const total = ref(0);
|
||||
const selectIds = ref<number[]>([]);
|
||||
const loading = ref(false);
|
||||
|
||||
const isExpand = ref(false);
|
||||
const isExpandable = ref(true);
|
||||
|
||||
// 分页表单
|
||||
const pageTableData = ref<DeptTable[]>([]);
|
||||
|
||||
// 顶级菜单下拉选项
|
||||
const deptOptions = ref<OptionType[]>([]);
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ prop: 'selection', label: '选择框', show: true },
|
||||
{ prop: 'index', label: '序号', show: true },
|
||||
{ prop: 'name', label: '部门名称', show: true },
|
||||
{ prop: 'order', label: '排序', show: true },
|
||||
{ prop: 'status', label: '状态', show: true },
|
||||
{ prop: 'description', label: '描述', show: true },
|
||||
{ prop: 'created_at', label: '创建时间', show: true },
|
||||
{ prop: 'updated_at', label: '更新时间', show: true },
|
||||
{ prop: 'operation', label: '操作', show: true }
|
||||
])
|
||||
|
||||
// 详情表单
|
||||
const detailFormData = ref<DeptTable>({});
|
||||
|
||||
// 分页查询参数
|
||||
const queryFormData = reactive<DeptPageQuery>({
|
||||
page_no: 1,
|
||||
page_size: 10,
|
||||
name: undefined,
|
||||
status: undefined,
|
||||
start_time: undefined,
|
||||
end_time: undefined,
|
||||
});
|
||||
const updateState = reactive<tableDataType>({
|
||||
|
||||
// 编辑表单
|
||||
const formData = reactive<DeptForm>({
|
||||
id: undefined,
|
||||
name: '',
|
||||
order: 1,
|
||||
available: true,
|
||||
name: undefined,
|
||||
order: undefined,
|
||||
parent_id: undefined,
|
||||
description: ''
|
||||
});
|
||||
const detailState = ref<tableDataType>({});
|
||||
status: undefined,
|
||||
description: undefined,
|
||||
})
|
||||
|
||||
const columns = reactive<TableColumnsType>([
|
||||
{
|
||||
title: '部门名称',
|
||||
dataIndex: 'name',
|
||||
// align: 'center',
|
||||
ellipsis: true,
|
||||
key: 'name',
|
||||
// width: 160
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'order',
|
||||
key: 'order',
|
||||
// align: 'center',
|
||||
ellipsis: true,
|
||||
// width: 100
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'available',
|
||||
key: 'available',
|
||||
ellipsis: true,
|
||||
// align: 'center',
|
||||
// width: 100
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
ellipsis: true,
|
||||
// align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'created_at',
|
||||
// align: 'center',
|
||||
ellipsis: true,
|
||||
key: 'created_at',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '更新日期',
|
||||
dataIndex: 'updated_at',
|
||||
// align: 'center',
|
||||
ellipsis: true,
|
||||
key: 'created_at',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
width: 150
|
||||
}
|
||||
]);
|
||||
|
||||
const rowSelection = computed(() => {
|
||||
return {
|
||||
selectedRowKeys: unref(selectedRowKeys),
|
||||
onChange: (selectingRowKeys: tableDataType['id'][]) => {
|
||||
selectedRowKeys.value = selectingRowKeys;
|
||||
},
|
||||
hideDefaultSelections: true,
|
||||
selections: [
|
||||
Table.SELECTION_ALL,
|
||||
Table.SELECTION_INVERT,
|
||||
Table.SELECTION_NONE
|
||||
]
|
||||
}
|
||||
// 弹窗状态
|
||||
const dialogVisible = reactive({
|
||||
title: "",
|
||||
visible: false,
|
||||
type: 'create' as 'create' | 'update' | 'detail',
|
||||
});
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => loadingData());
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
|
||||
order: [{ required: true, message: "请输入排序", trigger: "blur" }],
|
||||
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
|
||||
});
|
||||
|
||||
// 查询
|
||||
const onFinish = () => {
|
||||
// 刷新数据(防抖)
|
||||
const handleRefresh = useDebounceFn(() => {
|
||||
loadingData();
|
||||
};
|
||||
ElMessage.success("刷新成功");
|
||||
}, 1000);
|
||||
|
||||
// 加载表格数据
|
||||
const loadingData = () => {
|
||||
tableLoading.value = true;
|
||||
|
||||
let params = {};
|
||||
if (queryState.name) {
|
||||
params['name'] = queryState.name;
|
||||
async function loadingData() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await DeptAPI.getDeptList(queryFormData);
|
||||
pageTableData.value = listToTree(response.data.data.items);
|
||||
total.value = response.data.data.total;
|
||||
}
|
||||
if (queryState.available !== null && queryState.available !== undefined) {
|
||||
params['available'] = queryState.available;
|
||||
catch (error: any) {
|
||||
ElMessage.error(error.message);
|
||||
}
|
||||
finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
getDeptList(params).then(response => {
|
||||
const result = response.data;
|
||||
dataSource.value = listToTree(result.data.items);
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
}).finally(() => {
|
||||
tableLoading.value = false;
|
||||
});
|
||||
};
|
||||
// 查询（重置页码后获取数据）
|
||||
async function handleQuery() {
|
||||
queryFormData.page_no = 1;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
const resetFields = () => {
|
||||
Object.keys(queryState).forEach((key: string) => {
|
||||
delete queryState[key];
|
||||
});
|
||||
queryState.available = null;
|
||||
async function handleResetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
queryFormData.page_no = 1;
|
||||
loadingData();
|
||||
};
|
||||
}
|
||||
|
||||
// 删除
|
||||
const deleteRow = (row: tableDataType) => {
|
||||
deleteDept({ id: row.id }).then(() => {
|
||||
loadingData();
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
// 重置表单
|
||||
async function resetForm() {
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
formData.id = undefined;
|
||||
}
|
||||
|
||||
// 批量启用/停用
|
||||
const handleMoreClick: MenuProps['onClick'] = e => {
|
||||
if (!selectedRowKeys.value || !(selectedRowKeys.value.length > 0)) {
|
||||
message.warning('请先勾选数据');
|
||||
return;
|
||||
// 行复选框选中项变化
|
||||
async function handleSelectionChange(selection: any) {
|
||||
selectIds.value = selection.map((item: any) => item.id);
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
async function handleCloseDialog() {
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
}
|
||||
|
||||
// 打开系统配置弹窗
|
||||
async function handleOpenDialog(type: 'create' | 'update' | 'detail', id?: number) {
|
||||
dialogVisible.type = type;
|
||||
if (id) {
|
||||
const data = await DeptAPI.getDeptDetail({ id });
|
||||
if (type === 'detail') {
|
||||
dialogVisible.title = "部门详情";
|
||||
Object.assign(detailFormData.value, data);
|
||||
} else if (type === 'update') {
|
||||
dialogVisible.title = "修改部门";
|
||||
Object.assign(formData, data);
|
||||
}
|
||||
} else {
|
||||
dialogVisible.title = "新增部门";
|
||||
formData.id = undefined;
|
||||
}
|
||||
dialogVisible.visible = true;
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: e.key == 1 ? '是否确定启用选择项？' : '是否确定停用选择项？',
|
||||
onOk() {
|
||||
const body = { ids: selectedRowKeys.value, available: e.key == 1 ? true : false };
|
||||
batchAvailableDept(body).then(() => {
|
||||
selectedRowKeys.value = [];
|
||||
loadingData();
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
// 新增、编辑弹窗处理
|
||||
async function handleSubmit() {
|
||||
// 表单校验
|
||||
dataFormRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
// 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
|
||||
const id = formData.id;
|
||||
if (id) {
|
||||
try {
|
||||
await DeptAPI.updateDept(formData)
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await DeptAPI.createDept(formData)
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// 弹窗关键字处理
|
||||
const modalHandle = (modalType: string, record?: tableDataType) => {
|
||||
modalTitle.value = modalType;
|
||||
openModal.value = true;
|
||||
|
||||
// 重新创建 createState 和 updateState 以重置为初始状态
|
||||
Object.assign(createState, {
|
||||
name: '',
|
||||
order: 1,
|
||||
available: true,
|
||||
parent_id: undefined,
|
||||
description: ''
|
||||
});
|
||||
|
||||
Object.assign(updateState, {
|
||||
id: undefined,
|
||||
name: '',
|
||||
order: 1,
|
||||
available: true,
|
||||
parent_id: undefined,
|
||||
description: ''
|
||||
});
|
||||
|
||||
if (modalType === 'view' && record !== undefined) {
|
||||
detailStateLoading.value = true;
|
||||
detailState.value = record
|
||||
detailStateLoading.value = false;
|
||||
|
||||
} else if (modalType === 'update' && record !== undefined) {
|
||||
Object.keys(updateState).forEach(key => {
|
||||
updateState[key] = record[key];
|
||||
})
|
||||
// 删除、导入、导出
|
||||
async function handleOperation(type: 'delete' | 'import' | 'export', id?: number) {
|
||||
if (type === 'delete' && !id && !selectIds.value.length) {
|
||||
ElMessageBox.confirm("确认删除该项数据?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
await DeptAPI.deleteDept({ id: id ? id : selectIds.value });
|
||||
ElMessage.success("删除成功");
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}).catch(() => {
|
||||
ElMessage.info('已取消删除');
|
||||
});
|
||||
}
|
||||
};
|
||||
else if (type === 'import') {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.xlsx, .xls';
|
||||
input.click();
|
||||
|
||||
// 弹窗提交（详情/新建/修改）
|
||||
const handleModalSumbit = () => {
|
||||
modalSubmitLoading.value = true;
|
||||
if (modalTitle.value === 'view') {
|
||||
modalSubmitLoading.value = false;
|
||||
openModal.value = false;
|
||||
|
||||
} else if (modalTitle.value === 'create') {
|
||||
createForm.value.validate().then(() => {
|
||||
const createBody = cloneDeep(createState);
|
||||
Object.keys(createBody).forEach(key => {
|
||||
if (isEmpty(createBody[key])) {
|
||||
delete createBody[key];
|
||||
input.onchange = async (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (file) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
try {
|
||||
loading.value = true;
|
||||
await DeptAPI.uploadFile(formData);
|
||||
ElMessage.success('导入成功');
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
createDept(createBody).then(() => {
|
||||
modalSubmitLoading.value = false;
|
||||
openModal.value = false;
|
||||
Object.keys(createState).forEach(key => delete createState[key]);
|
||||
createState.order = 1;
|
||||
loadingData();
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
modalSubmitLoading.value = false;
|
||||
});
|
||||
}).catch(error => {
|
||||
modalSubmitLoading.value = false;
|
||||
console.error(error)
|
||||
})
|
||||
|
||||
} else if (modalTitle.value === 'update') {
|
||||
updateForm.value.validate().then(() => {
|
||||
updateDept(updateState).then(() => {
|
||||
modalSubmitLoading.value = false;
|
||||
openModal.value = false;
|
||||
loadingData();
|
||||
|
||||
}).catch(error => {
|
||||
modalSubmitLoading.value = false;
|
||||
console.error(error)
|
||||
});
|
||||
|
||||
}).catch(error => {
|
||||
modalSubmitLoading.value = false;
|
||||
console.error(error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
else if (type === 'export') {
|
||||
ElMessageBox.confirm('是否确认导出当前部门?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const body = {
|
||||
...queryFormData,
|
||||
page_no: 1,
|
||||
page_size: total.value
|
||||
};
|
||||
ElMessage.warning('正在导出数据，请稍候...');
|
||||
|
||||
const response = await DeptAPI.exportDept(body);
|
||||
const blob = new Blob([JSON.stringify(response.data)], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
|
||||
// 从响应头获取文件名
|
||||
const contentDisposition = response.headers['content-disposition'];
|
||||
let fileName = '部门.xlsx';
|
||||
if (contentDisposition) {
|
||||
const fileNameMatch = contentDisposition.match(/filename=(.*?)(;|$)/);
|
||||
if (fileNameMatch) {
|
||||
fileName = decodeURIComponent(fileNameMatch[1]);
|
||||
}
|
||||
}
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = fileName;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
ElMessage.success('导出成功');
|
||||
} catch (error: any) {
|
||||
ElMessage.error('文件处理失败', error.message);
|
||||
console.error('导出错误:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}).catch(() => {
|
||||
ElMessage.info('已取消导出');
|
||||
});
|
||||
}
|
||||
else {
|
||||
ElMessage.error('未知操作类型');
|
||||
}
|
||||
}
|
||||
|
||||
// 批量启用/停用
|
||||
async function handleMoreClick(id: number) {
|
||||
if (id && !selectIds.value.length) {
|
||||
ElMessageBox.confirm("确认删除启用或停用该项数据?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
await DeptAPI.batchAvailableDept({ id: id ? id : selectIds.value });
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}).catch(() => {
|
||||
ElMessage.info('已取消批量操作');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadingData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tree-search-wrapper {
|
||||
margin-block-end: 16px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user