mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-10-09 19:16:44 +00:00
feat: 重构前端项目结构并优化代码
refactor: 迁移前端资源文件至web目录 feat: 新增多种图标资源 style: 统一代码风格和格式化配置 docs: 更新README和文档说明 chore: 更新依赖和配置文件 fix: 修复部分类型定义和枚举 perf: 优化路由和组件加载逻辑
This commit is contained in:
zhangtao
@@ -0,0 +1,580 @@
|
||||
<!-- 岗位管理 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<PageSearch
|
||||
ref="searchRef"
|
||||
:search-config="searchConfig"
|
||||
@query-click="handleQueryClick"
|
||||
@reset-click="handleResetClick"
|
||||
/>
|
||||
|
||||
<PageContent ref="contentRef" :content-config="contentConfig">
|
||||
<template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
|
||||
<CrudToolbarLeft
|
||||
:remove-ids="removeIds"
|
||||
:perm-create="['module_system:position:create']"
|
||||
:perm-delete="['module_system:position:delete']"
|
||||
:perm-patch="['module_system:position:patch']"
|
||||
@add="handleOpenDialog('create')"
|
||||
@delete="onToolbar('delete')"
|
||||
@more="handleMoreClick"
|
||||
/>
|
||||
<div class="data-table__toolbar--right">
|
||||
<CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
|
||||
<template #prepend>
|
||||
<el-tooltip content="导出">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:position:export']"
|
||||
type="warning"
|
||||
icon="download"
|
||||
circle
|
||||
@click="handleOpenExportsModal"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</CrudToolbarRight>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
|
||||
<div class="data-table__content">
|
||||
<el-table
|
||||
:ref="tableRef as any"
|
||||
v-loading="loading"
|
||||
row-key="id"
|
||||
:data="data"
|
||||
height="100%"
|
||||
border
|
||||
stripe
|
||||
@selection-change="onSelectionChange"
|
||||
>
|
||||
<template #empty>
|
||||
<el-empty :image-size="80" description="暂无数据" />
|
||||
</template>
|
||||
<el-table-column
|
||||
v-if="contentCols.find((col) => col.prop === 'selection')?.show"
|
||||
type="selection"
|
||||
min-width="55"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="contentCols.find((col) => col.prop === 'index')?.show"
|
||||
fixed
|
||||
label="序号"
|
||||
min-width="60"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="contentCols.find((col) => col.prop === 'name')?.show"
|
||||
key="name"
|
||||
label="岗位名称"
|
||||
prop="name"
|
||||
min-width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="contentCols.find((col) => col.prop === 'status')?.show"
|
||||
key="status"
|
||||
label="状态"
|
||||
prop="status"
|
||||
min-width="80"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
|
||||
{{ scope.row.status === '0' ? '启用' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="contentCols.find((col) => col.prop === 'order')?.show"
|
||||
key="order"
|
||||
label="岗位排序"
|
||||
prop="order"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="contentCols.find((col) => col.prop === 'description')?.show"
|
||||
key="description"
|
||||
label="描述"
|
||||
prop="description"
|
||||
min-width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
|
||||
key="created_time"
|
||||
label="创建时间"
|
||||
prop="created_time"
|
||||
min-width="200"
|
||||
sortable
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
|
||||
key="updated_time"
|
||||
label="更新时间"
|
||||
prop="updated_time"
|
||||
min-width="200"
|
||||
sortable
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="contentCols.find((col) => col.prop === 'created_id')?.show"
|
||||
key="created_id"
|
||||
label="创建人"
|
||||
min-width="100"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ scope.row.created_by?.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="contentCols.find((col) => col.prop === 'updated_id')?.show"
|
||||
key="updated_id"
|
||||
label="更新人"
|
||||
min-width="100"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ scope.row.updated_by?.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="contentCols.find((col) => col.prop === 'operation')?.show"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:position:detail']"
|
||||
type="info"
|
||||
size="small"
|
||||
link
|
||||
icon="View"
|
||||
@click="handleOpenDialog('detail', scope.row.id)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:position:update']"
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
icon="edit"
|
||||
@click="handleOpenDialog('update', scope.row.id)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:position:delete']"
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
icon="delete"
|
||||
@click="handleRowDelete(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
</PageContent>
|
||||
|
||||
<EnhancedDialog
|
||||
v-model="dialogVisible.visible"
|
||||
:title="dialogVisible.title"
|
||||
@close="handleCloseDialog"
|
||||
>
|
||||
<template v-if="dialogVisible.type === 'detail'">
|
||||
<el-descriptions :column="4" border>
|
||||
<el-descriptions-item label="岗位名称" :span="2">
|
||||
{{ detailFormData.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="排序" :span="2">
|
||||
{{ detailFormData.order }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态" :span="2">
|
||||
<el-tag v-if="detailFormData.status === '0'" type="success">启用</el-tag>
|
||||
<el-tag v-else type="danger">停用</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建人" :span="2">
|
||||
{{ detailFormData.created_by?.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="更新人" :span="2">
|
||||
{{ detailFormData.updated_by?.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间" :span="2">
|
||||
{{ detailFormData.created_time }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间" :span="2">
|
||||
{{ detailFormData.updated_time }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="描述" :span="4">
|
||||
{{ detailFormData.description }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
label-width="auto"
|
||||
label-position="right"
|
||||
>
|
||||
<el-form-item label="岗位名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入岗位名称" :maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="order">
|
||||
<el-input-number v-model="formData.order" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio value="0">启用</el-radio>
|
||||
<el-radio value="1">停用</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 #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleCloseDialog">取消</el-button>
|
||||
<el-button
|
||||
v-if="dialogVisible.type !== 'detail'"
|
||||
type="primary"
|
||||
:loading="submitLoading"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
<el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</EnhancedDialog>
|
||||
|
||||
<ExportModal
|
||||
v-model="exportsDialogVisible"
|
||||
:content-config="curdContentConfig"
|
||||
:query-params="exportQueryParams"
|
||||
:page-data="exportPageData"
|
||||
:selection-data="exportSelectionData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'Position',
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import { ref, reactive, computed, markRaw, nextTick, unref } from 'vue';
|
||||
import { fetchAllPages } from '@/utils/fetchAllPages';
|
||||
import PositionAPI, {
|
||||
PositionTable,
|
||||
PositionForm,
|
||||
PositionPageQuery,
|
||||
} from '@/api/module_system/position';
|
||||
import { useUserStore } from '@/store';
|
||||
import UserTableSelect from '@/views/module_system/user/components/UserTableSelect.vue';
|
||||
import ExportModal from '@/components/CURD/ExportModal.vue';
|
||||
import CrudToolbarLeft from '@/components/CURD/CrudToolbarLeft.vue';
|
||||
import CrudToolbarRight from '@/components/CURD/CrudToolbarRight.vue';
|
||||
import PageSearch from '@/components/CURD/PageSearch.vue';
|
||||
import PageContent from '@/components/CURD/PageContent.vue';
|
||||
import EnhancedDialog from '@/components/CURD/EnhancedDialog.vue';
|
||||
import { useCrudList } from '@/components/CURD/useCrudList';
|
||||
import type { IContentConfig, ISearchConfig } from '@/components/CURD/types';
|
||||
|
||||
const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
|
||||
const dataFormRef = ref();
|
||||
const submitLoading = ref(false);
|
||||
|
||||
function triggerUserSearch() {
|
||||
nextTick(() => refreshList());
|
||||
}
|
||||
|
||||
const searchConfig = reactive<ISearchConfig>({
|
||||
permPrefix: 'module_system:position',
|
||||
colon: true,
|
||||
isExpandable: true,
|
||||
showNumber: 2,
|
||||
form: { labelWidth: 'auto' },
|
||||
formItems: [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '岗位名称',
|
||||
type: 'input',
|
||||
attrs: { placeholder: '请输入岗位名称', clearable: true },
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '状态',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '启用', value: '0' },
|
||||
{ label: '停用', value: '1' },
|
||||
],
|
||||
attrs: { placeholder: '请选择状态', clearable: true, style: { width: '167.5px' } },
|
||||
},
|
||||
{
|
||||
prop: 'created_time',
|
||||
label: '创建时间',
|
||||
type: 'date-picker',
|
||||
initialValue: [],
|
||||
attrs: {
|
||||
type: 'datetimerange',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
rangeSeparator: '至',
|
||||
startPlaceholder: '开始日期',
|
||||
endPlaceholder: '结束日期',
|
||||
style: { width: '340px' },
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'created_id',
|
||||
label: '创建人',
|
||||
type: 'user-table-select',
|
||||
initialValue: null,
|
||||
events: {
|
||||
'confirm-click': triggerUserSearch,
|
||||
'clear-click': triggerUserSearch,
|
||||
},
|
||||
},
|
||||
],
|
||||
customComponents: {
|
||||
'user-table-select': markRaw(UserTableSelect),
|
||||
},
|
||||
});
|
||||
|
||||
const contentCols = reactive<
|
||||
Array<{
|
||||
prop?: string;
|
||||
label?: string;
|
||||
show?: boolean;
|
||||
}>
|
||||
>([
|
||||
{ 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_time', label: '创建时间', show: true },
|
||||
{ prop: 'updated_time', label: '更新时间', show: true },
|
||||
{ prop: 'created_id', label: '创建人', show: true },
|
||||
{ prop: 'updated_id', label: '更新人', show: true },
|
||||
{ prop: 'operation', label: '操作', show: true },
|
||||
]);
|
||||
|
||||
const contentConfig = reactive<IContentConfig<PositionPageQuery>>({
|
||||
permPrefix: 'module_system:position',
|
||||
pk: 'id',
|
||||
cols: contentCols as IContentConfig['cols'],
|
||||
hideColumnFilter: false,
|
||||
toolbar: [],
|
||||
defaultToolbar: ['refresh', 'filter'],
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 30, 50],
|
||||
},
|
||||
request: { page_no: 'page_no', page_size: 'page_size' },
|
||||
indexAction: async (params) => {
|
||||
const res = await PositionAPI.listPosition(params as PositionPageQuery);
|
||||
return {
|
||||
total: res.data.data.total,
|
||||
list: res.data.data.items,
|
||||
};
|
||||
},
|
||||
deleteAction: async (ids) => {
|
||||
await PositionAPI.deletePosition(
|
||||
ids
|
||||
.split(',')
|
||||
.map((s) => Number(s.trim()))
|
||||
.filter((n) => !Number.isNaN(n))
|
||||
);
|
||||
const userStore = useUserStore();
|
||||
await userStore.getUserInfo();
|
||||
},
|
||||
deleteConfirm: {
|
||||
title: '警告',
|
||||
message: '确认删除该项数据?',
|
||||
type: 'warning',
|
||||
},
|
||||
});
|
||||
|
||||
function handleRowDelete(id: number) {
|
||||
contentRef.value?.handleDelete(id);
|
||||
}
|
||||
|
||||
const exportsDialogVisible = ref(false);
|
||||
|
||||
const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
|
||||
|
||||
const exportPageData = computed(
|
||||
() => (unref(contentRef.value?.pageData) ?? []) as PositionTable[]
|
||||
);
|
||||
|
||||
const exportSelectionData = computed(
|
||||
() => (contentRef.value?.getSelectionData() ?? []) as PositionTable[]
|
||||
);
|
||||
|
||||
const exportColumns = [
|
||||
{ prop: 'name', label: '岗位名称' },
|
||||
{ prop: 'order', label: '岗位排序' },
|
||||
{ prop: 'status', label: '状态' },
|
||||
{ prop: 'description', label: '描述' },
|
||||
{ prop: 'created_time', label: '创建时间' },
|
||||
{ prop: 'updated_time', label: '更新时间' },
|
||||
];
|
||||
|
||||
const curdContentConfig = {
|
||||
permPrefix: 'module_system:position',
|
||||
cols: exportColumns as unknown as IContentConfig['cols'],
|
||||
exportsAction: async (params: Record<string, unknown>) => {
|
||||
const query = { ...params } as Record<string, unknown>;
|
||||
return fetchAllPages<PositionTable>({
|
||||
initialQuery: query,
|
||||
fetchPage: async (q) => {
|
||||
const res = await PositionAPI.listPosition(q as unknown as PositionPageQuery);
|
||||
return {
|
||||
total: res.data?.data?.total ?? 0,
|
||||
list: res.data?.data?.items ?? [],
|
||||
};
|
||||
},
|
||||
});
|
||||
},
|
||||
} as unknown as IContentConfig;
|
||||
|
||||
function handleOpenExportsModal() {
|
||||
exportsDialogVisible.value = true;
|
||||
}
|
||||
|
||||
const detailFormData = ref<PositionTable>({});
|
||||
|
||||
const formData = reactive<PositionForm>({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
order: 1,
|
||||
status: '0',
|
||||
description: undefined,
|
||||
});
|
||||
|
||||
const dialogVisible = reactive({
|
||||
title: '',
|
||||
visible: false,
|
||||
type: 'create' as 'create' | 'update' | 'detail',
|
||||
});
|
||||
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
|
||||
order: [{ required: true, message: '请输入岗位排序', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '请选择岗位状态', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const initialFormData: PositionForm = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
order: 1,
|
||||
status: '0',
|
||||
description: undefined,
|
||||
};
|
||||
|
||||
async function resetForm() {
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
}
|
||||
Object.assign(formData, initialFormData);
|
||||
}
|
||||
|
||||
async function handleCloseDialog() {
|
||||
dialogVisible.visible = false;
|
||||
await resetForm();
|
||||
}
|
||||
|
||||
async function handleOpenDialog(type: 'create' | 'update' | 'detail', id?: number) {
|
||||
dialogVisible.type = type;
|
||||
if (id) {
|
||||
const response = await PositionAPI.detailPosition(id);
|
||||
if (type === 'detail') {
|
||||
dialogVisible.title = '岗位详情';
|
||||
Object.assign(detailFormData.value, response.data.data);
|
||||
} else if (type === 'update') {
|
||||
dialogVisible.title = '修改岗位';
|
||||
Object.assign(formData, response.data.data);
|
||||
}
|
||||
} else {
|
||||
dialogVisible.title = '新增岗位';
|
||||
formData.id = undefined;
|
||||
}
|
||||
dialogVisible.visible = true;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
dataFormRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
submitLoading.value = true;
|
||||
const id = formData.id;
|
||||
try {
|
||||
if (id) {
|
||||
await PositionAPI.updatePosition(id, { id, ...formData });
|
||||
} else {
|
||||
await PositionAPI.createPosition(formData);
|
||||
}
|
||||
dialogVisible.visible = false;
|
||||
await resetForm();
|
||||
refreshList();
|
||||
const userStore = useUserStore();
|
||||
await userStore.getUserInfo();
|
||||
} catch (error: unknown) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function handleMoreClick(status: string) {
|
||||
const rows = contentRef.value?.getSelectionData() as PositionTable[] | undefined;
|
||||
const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
|
||||
if (!ids.length) {
|
||||
ElMessage.warning('请先选择要操作的数据');
|
||||
return;
|
||||
}
|
||||
ElMessageBox.confirm(`确认${status === '0' ? '启用' : '停用'}该项数据?`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
await PositionAPI.batchPosition({ ids, status });
|
||||
refreshList();
|
||||
const userStore = useUserStore();
|
||||
await userStore.getUserInfo();
|
||||
} catch (error: unknown) {
|
||||
console.error(error);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessageBox.close();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user