public/FastapiAdmin
1
0
Fork 0
mirror of https://github.com/fastapiadmin/FastapiAdmin.git synced 2026-09-28 15:09:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: 移除多余空行并统一代码格式

Browse Source 
修复代码中的多余空行问题，统一字符串引号使用双引号，调整对象和数组的格式，优化代码缩进和换行，提升代码可读性和一致性
This commit is contained in:
zhangtao
2025-11-14 01:45:22 +08:00
parent 66c345d590
commit d588abb386
100 changed files with 9192 additions and 5181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/module_system/param/components/ConfigInfoDrawer.vue
+168 -123
View File
@@ -1,6 +1,12 @@
<template>
<el-drawer v-model="drawerVisible" title="配置中心" :size="drawerSize" destroy-on-close @closed="onDrawerClosed">
<el-tabs v-model="activeTabRef" type="border-card" >
<el-drawer
v-model="drawerVisible"
title="配置中心"
:size="drawerSize"
destroy-on-close
@closed="onDrawerClosed"
>
<el-tabs v-model="activeTabRef" type="border-card">
<!-- 网站配置 -->
<el-tab-pane label="网站配置" name="website">
<el-form :model="configState" label-suffix=":" label-width="auto" label-position="right">
@@ -37,9 +43,8 @@
/>
</div>
</el-form-item>
</div>
</div>
</el-form>
</el-tab-pane>
<el-tab-pane label="安全隐私" name="securityPrivacy">
<el-form :model="configState" label-suffix=":" label-width="auto" label-position="right">
@@ -86,17 +91,23 @@
<div v-for="(item, key) in apiWhitelistConfigs" :key="key">
<el-form-item :label="item.config_name">
<div class="space-y-2">
<div v-for="listItem in apiWhitelistItems" :key="listItem.id" class="flex items-center gap-2">
<div
v-for="listItem in apiWhitelistItems"
:key="listItem.id"
class="flex items-center gap-2"
>
<el-input
v-model="listItem.value"
:placeholder="'/api/v1/users/get'"
clearable
@input="markModified(key)"
@blur="{
if (!isValidApiPath(listItem.value) && listItem.value.trim()) {
ElMessage.warning('请输入有效的接口路径格式（以/开头）');
@blur="
{
if (!isValidApiPath(listItem.value) && listItem.value.trim()) {
ElMessage.warning('请输入有效的接口路径格式（以/开头）');
}
}
}"
"
/>
<el-button
type="danger"
@@ -130,18 +141,24 @@
<div v-for="(item, key) in ipBlacklistConfigs" :key="key">
<el-form-item :label="item.config_name">
<div class="space-y-2">
<div v-for="listItem in ipBlacklistItems" :key="listItem.id" class="flex items-center gap-2">
<div
v-for="listItem in ipBlacklistItems"
:key="listItem.id"
class="flex items-center gap-2"
>
<el-input
v-model="listItem.value"
:placeholder="'192.168.1.1'"
clearable
style="flex: 1"
@input="markModified(key)"
@blur="{
if (!isValidIp(listItem.value) && listItem.value.trim()) {
ElMessage.warning('请输入有效的IP地址格式');
@blur="
{
if (!isValidIp(listItem.value) && listItem.value.trim()) {
ElMessage.warning('请输入有效的IP地址格式');
}
}
}"
"
/>
<el-button
type="danger"
@@ -176,17 +193,18 @@
<el-form-item :label="item.config_name">
<!-- 演示模式开关 -->
<template v-if="key === 'demo_enable'">
<el-switch
inline-prompt
active-text="启用"
inactive-text="禁用"
:model-value="item.config_value === 'true'"
@update:model-value="(value) => {
<el-switch
inline-prompt
active-text="启用"
inactive-text="禁用"
:model-value="item.config_value === 'true'"
@update:model-value="
(value) => {
item.config_value = value ? 'true' : 'false';
markModified(key);
}"
/>
}
"
/>
<div class="text-xs text-gray-500 mt-1">
配置说明：启用后系统将进入演示模式，部分功能可能受限。
</div>
@@ -194,18 +212,24 @@
<!-- IP白名单 -->
<template v-else-if="key === 'ip_white_list'">
<div class="space-y-2">
<div v-for="listItem in demoIpWhitelistItems" :key="listItem.id" class="flex items-center gap-2">
<div
v-for="listItem in demoIpWhitelistItems"
:key="listItem.id"
class="flex items-center gap-2"
>
<el-input
v-model="listItem.value"
:placeholder="'192.168.1.1'"
clearable
style="flex: 1"
@input="markModified(key)"
@blur="{
if (!isValidIp(listItem.value) && listItem.value.trim()) {
ElMessage.warning('请输入有效的IP地址格式');
@blur="
{
if (!isValidIp(listItem.value) && listItem.value.trim()) {
ElMessage.warning('请输入有效的IP地址格式');
}
}
}"
"
/>
<el-button
type="danger"
@@ -228,7 +252,6 @@
配置说明：演示模式下，只有白名单中的IP地址可以访问系统，支持单个IP配置。
</div>
</div>
</template>
<!-- 其他配置项 -->
<template v-else>
@@ -245,20 +268,27 @@
</el-form>
</el-tab-pane>
</el-tabs>
<template #footer>
<template #footer>
<el-button @click="handleCloseDialog">取消</el-button>
<el-button v-hasPerm="['module_system:config:update']" type="primary" :disabled="!hasChanges" @click="submitChanges">保存</el-button>
<el-button
v-hasPerm="['module_system:config:update']"
type="primary"
:disabled="!hasChanges"
@click="submitChanges"
>
保存
</el-button>
</template>
</el-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import ParamsAPI, { type ConfigTable } from '@/api/module_system/params';
import { ref, reactive, onMounted, computed } from "vue";
import ParamsAPI, { type ConfigTable } from "@/api/module_system/params";
import { useConfigStore } from "@/store";
import { useI18n } from 'vue-i18n';
import { ElMessage, ElMessageBox } from 'element-plus';
import SingleImageUpload from '@/components/Upload/SingleImageUpload.vue';
import { useI18n } from "vue-i18n";
import { ElMessage, ElMessageBox } from "element-plus";
import SingleImageUpload from "@/components/Upload/SingleImageUpload.vue";
import { useAppStore } from "@/store/modules/app.store";
import { DeviceEnum } from "@/enums/settings/device.enum";
@@ -275,7 +305,8 @@ const generateId = () => {
// IP地址验证函数
const isValidIp = (ip: string): boolean => {
const ipRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
const ipRegex =
/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return ipRegex.test(ip);
};
@@ -283,31 +314,31 @@ const isValidIp = (ip: string): boolean => {
const isValidApiPath = (path: string): boolean => {
const pathRegex = /^\/[\w\-/]+$/;
return pathRegex.test(path);
}
};
const appStore = useAppStore();
const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "60%" : "60%"));
const t = useI18n().t;
const configStore = useConfigStore();
const activeTabRef = ref('website')
const activeTabRef = ref("website");
// 与父组件的 v-model 同步
const props = defineProps<{ modelValue: boolean }>();
const emit = defineEmits(['update:modelValue']);
const emit = defineEmits(["update:modelValue"]);
const drawerVisible = computed({
get: () => props.modelValue,
set: (val: boolean) => emit('update:modelValue', val)
set: (val: boolean) => emit("update:modelValue", val),
});
// 配置状态管理
const configState = reactive<ConfigTable>({
id: undefined,
config_name: '',
config_key: '',
config_value: '',
config_name: "",
config_key: "",
config_value: "",
config_type: undefined,
description: ''
description: "",
});
// 记录修改过的字段
@@ -329,68 +360,72 @@ const submitChanges = async () => {
try {
// 准备提交数据
// 1. 处理接口白名单
if ('white_api_list_path' in modifiedFields && apiWhitelistConfigs.value.white_api_list_path?.id) {
if (
"white_api_list_path" in modifiedFields &&
apiWhitelistConfigs.value.white_api_list_path?.id
) {
const apiWhitelistArray = apiWhitelistItems.value
.map(item => item.value.trim())
.map((item) => item.value.trim())
.filter(Boolean);
// 转换为JSON字符串格式保存
const apiWhitelistJson = JSON.stringify(apiWhitelistArray);
await ParamsAPI.updateConfig(apiWhitelistConfigs.value.white_api_list_path.id, {
...apiWhitelistConfigs.value.white_api_list_path,
config_value: apiWhitelistJson
config_value: apiWhitelistJson,
});
}
// 2. 处理IP黑名单
if ('ip_black_list' in modifiedFields && ipBlacklistConfigs.value.ip_black_list?.id) {
if ("ip_black_list" in modifiedFields && ipBlacklistConfigs.value.ip_black_list?.id) {
const ipBlacklistArray = ipBlacklistItems.value
.map(item => item.value.trim())
.map((item) => item.value.trim())
.filter(Boolean);
// 转换为JSON字符串格式保存
const ipBlacklistJson = JSON.stringify(ipBlacklistArray);
await ParamsAPI.updateConfig(ipBlacklistConfigs.value.ip_black_list.id, {
...ipBlacklistConfigs.value.ip_black_list,
config_value: ipBlacklistJson
config_value: ipBlacklistJson,
});
}
// 3. 处理演示环境IP白名单
if ('ip_white_list' in modifiedFields && demoConfigs.value.ip_white_list?.id) {
if ("ip_white_list" in modifiedFields && demoConfigs.value.ip_white_list?.id) {
const demoIpWhitelistArray = demoIpWhitelistItems.value
.map(item => item.value.trim())
.map((item) => item.value.trim())
.filter(Boolean);
// 转换为JSON字符串格式保存
const demoIpWhitelistJson = JSON.stringify(demoIpWhitelistArray);
await ParamsAPI.updateConfig(demoConfigs.value.ip_white_list.id, {
...demoConfigs.value.ip_white_list,
config_value: demoIpWhitelistJson
config_value: demoIpWhitelistJson,
});
}
// 4. 处理其他配置项
const otherKeys = keysToSubmit.filter(key =>
!['white_api_list_path', 'ip_black_list', 'ip_white_list'].includes(key)
const otherKeys = keysToSubmit.filter(
(key) => !["white_api_list_path", "ip_black_list", "ip_white_list"].includes(key)
);
const otherUpdatePromises = otherKeys.map(key => {
const item = systemConfigs.value[key as keyof typeof systemConfigs.value] ||
logoConfigs.value[key as keyof typeof logoConfigs.value] ||
securityPrivacyConfigs.value[key as keyof typeof securityPrivacyConfigs.value] ||
userAgreementConfigs.value[key as keyof typeof userAgreementConfigs.value] ||
demoConfigs.value[key as keyof typeof demoConfigs.value];
const otherUpdatePromises = otherKeys.map((key) => {
const item =
systemConfigs.value[key as keyof typeof systemConfigs.value] ||
logoConfigs.value[key as keyof typeof logoConfigs.value] ||
securityPrivacyConfigs.value[key as keyof typeof securityPrivacyConfigs.value] ||
userAgreementConfigs.value[key as keyof typeof userAgreementConfigs.value] ||
demoConfigs.value[key as keyof typeof demoConfigs.value];
return item && item.id ? ParamsAPI.updateConfig(item.id, { ...item }) : Promise.resolve();
});
await Promise.all(otherUpdatePromises);
// 清除已提交的修改标记
keysToSubmit.forEach(key => {
keysToSubmit.forEach((key) => {
delete modifiedFields[key];
});
// 重新加载配置数据
await configStore.getConfig();
initializeLists();
} catch (error) {
console.error('保存失败:', error);
console.error("保存失败:", error);
}
};
@@ -398,22 +433,27 @@ const submitChanges = async () => {
const resetForm = () => {
// 重置动态列表
initializeLists();
// 重置其他配置项
const keysToReset = Object.keys(modifiedFields);
for (const key of keysToReset) {
if (systemConfigs.value[key as keyof typeof systemConfigs.value]) {
systemConfigs.value[key as keyof typeof systemConfigs.value].config_value = configStore.configData[key as keyof typeof configStore.configData]?.config_value || '';
systemConfigs.value[key as keyof typeof systemConfigs.value].config_value =
configStore.configData[key as keyof typeof configStore.configData]?.config_value || "";
} else if (logoConfigs.value[key as keyof typeof logoConfigs.value]) {
logoConfigs.value[key as keyof typeof logoConfigs.value].config_value = configStore.configData[key as keyof typeof configStore.configData]?.config_value || '';
logoConfigs.value[key as keyof typeof logoConfigs.value].config_value =
configStore.configData[key as keyof typeof configStore.configData]?.config_value || "";
} else if (securityPrivacyConfigs.value[key as keyof typeof securityPrivacyConfigs.value]) {
securityPrivacyConfigs.value[key as keyof typeof securityPrivacyConfigs.value].config_value = configStore.configData[key as keyof typeof configStore.configData]?.config_value || '';
securityPrivacyConfigs.value[key as keyof typeof securityPrivacyConfigs.value].config_value =
configStore.configData[key as keyof typeof configStore.configData]?.config_value || "";
} else if (userAgreementConfigs.value[key as keyof typeof userAgreementConfigs.value]) {
userAgreementConfigs.value[key as keyof typeof userAgreementConfigs.value].config_value = configStore.configData[key as keyof typeof configStore.configData]?.config_value || '';
userAgreementConfigs.value[key as keyof typeof userAgreementConfigs.value].config_value =
configStore.configData[key as keyof typeof configStore.configData]?.config_value || "";
} else if (demoConfigs.value[key as keyof typeof demoConfigs.value]) {
// 除了IP白名单外的演示配置项
if (key !== 'ip_white_list') {
demoConfigs.value[key as keyof typeof demoConfigs.value].config_value = configStore.configData[key as keyof typeof configStore.configData]?.config_value || '';
if (key !== "ip_white_list") {
demoConfigs.value[key as keyof typeof demoConfigs.value].config_value =
configStore.configData[key as keyof typeof configStore.configData]?.config_value || "";
}
}
delete modifiedFields[key];
@@ -462,130 +502,136 @@ const demoIpWhitelistItems = ref<ListItem[]>([]);
// 从配置数据初始化列表
const initializeLists = () => {
// 初始化接口白名单
const apiWhitelistStr = configStore.configData.white_api_list_path?.config_value || '';
const apiWhitelistStr = configStore.configData.white_api_list_path?.config_value || "";
try {
// 尝试解析为JSON数组
const apiWhitelistArray = JSON.parse(apiWhitelistStr);
if (Array.isArray(apiWhitelistArray)) {
apiWhitelistItems.value = apiWhitelistArray
.filter(item => typeof item === 'string' && item.trim())
.map(item => ({ id: generateId(), value: item.trim() }));
.filter((item) => typeof item === "string" && item.trim())
.map((item) => ({ id: generateId(), value: item.trim() }));
} else {
// 如果不是数组，回退到按换行符分割
apiWhitelistItems.value = apiWhitelistStr
? apiWhitelistStr.split('\n')
.filter(item => item.trim())
.map(item => ({ id: generateId(), value: item.trim() }))
: [{ id: generateId(), value: '' }];
? apiWhitelistStr
.split("\n")
.filter((item) => item.trim())
.map((item) => ({ id: generateId(), value: item.trim() }))
: [{ id: generateId(), value: "" }];
}
} catch {
// 解析失败，回退到按换行符分割
apiWhitelistItems.value = apiWhitelistStr
? apiWhitelistStr.split('\n')
.filter(item => item.trim())
.map(item => ({ id: generateId(), value: item.trim() }))
: [{ id: generateId(), value: '' }];
? apiWhitelistStr
.split("\n")
.filter((item) => item.trim())
.map((item) => ({ id: generateId(), value: item.trim() }))
: [{ id: generateId(), value: "" }];
}
// 初始化IP黑名单
const ipBlacklistStr = configStore.configData.ip_black_list?.config_value || '';
const ipBlacklistStr = configStore.configData.ip_black_list?.config_value || "";
try {
// 尝试解析为JSON数组
const ipBlacklistArray = JSON.parse(ipBlacklistStr);
if (Array.isArray(ipBlacklistArray)) {
ipBlacklistItems.value = ipBlacklistArray
.filter(item => typeof item === 'string' && item.trim())
.map(item => ({ id: generateId(), value: item.trim() }));
.filter((item) => typeof item === "string" && item.trim())
.map((item) => ({ id: generateId(), value: item.trim() }));
} else {
// 如果不是数组，回退到按换行符分割
ipBlacklistItems.value = ipBlacklistStr
? ipBlacklistStr.split('\n')
.filter(item => item.trim())
.map(item => ({ id: generateId(), value: item.trim() }))
: [{ id: generateId(), value: '' }];
? ipBlacklistStr
.split("\n")
.filter((item) => item.trim())
.map((item) => ({ id: generateId(), value: item.trim() }))
: [{ id: generateId(), value: "" }];
}
} catch {
// 解析失败，回退到按换行符分割
ipBlacklistItems.value = ipBlacklistStr
? ipBlacklistStr.split('\n')
.filter(item => item.trim())
.map(item => ({ id: generateId(), value: item.trim() }))
: [{ id: generateId(), value: '' }];
? ipBlacklistStr
.split("\n")
.filter((item) => item.trim())
.map((item) => ({ id: generateId(), value: item.trim() }))
: [{ id: generateId(), value: "" }];
}
// 初始化演示环境IP白名单
const demoIpWhitelistStr = configStore.configData.ip_white_list?.config_value || '';
const demoIpWhitelistStr = configStore.configData.ip_white_list?.config_value || "";
try {
// 尝试解析为JSON数组
const demoIpWhitelistArray = JSON.parse(demoIpWhitelistStr);
if (Array.isArray(demoIpWhitelistArray)) {
demoIpWhitelistItems.value = demoIpWhitelistArray
.filter(item => typeof item === 'string' && item.trim())
.map(item => ({ id: generateId(), value: item.trim() }));
.filter((item) => typeof item === "string" && item.trim())
.map((item) => ({ id: generateId(), value: item.trim() }));
} else {
// 如果不是数组，回退到按换行符分割
demoIpWhitelistItems.value = demoIpWhitelistStr
? demoIpWhitelistStr.split('\n')
.filter(item => item.trim())
.map(item => ({ id: generateId(), value: item.trim() }))
: [{ id: generateId(), value: '' }];
? demoIpWhitelistStr
.split("\n")
.filter((item) => item.trim())
.map((item) => ({ id: generateId(), value: item.trim() }))
: [{ id: generateId(), value: "" }];
}
} catch {
// 解析失败，回退到按换行符分割
demoIpWhitelistItems.value = demoIpWhitelistStr
? demoIpWhitelistStr.split('\n')
.filter(item => item.trim())
.map(item => ({ id: generateId(), value: item.trim() }))
: [{ id: generateId(), value: '' }];
? demoIpWhitelistStr
.split("\n")
.filter((item) => item.trim())
.map((item) => ({ id: generateId(), value: item.trim() }))
: [{ id: generateId(), value: "" }];
}
};
// 添加接口白名单项
const addApiWhitelistItem = () => {
apiWhitelistItems.value.push({ id: generateId(), value: '' });
markModified('white_api_list_path');
apiWhitelistItems.value.push({ id: generateId(), value: "" });
markModified("white_api_list_path");
};
// 移除接口白名单项
const removeApiWhitelistItem = (id: string) => {
if (apiWhitelistItems.value.length <= 1) {
ElMessage.warning('至少需要保留一个接口白名单配置');
ElMessage.warning("至少需要保留一个接口白名单配置");
return;
}
apiWhitelistItems.value = apiWhitelistItems.value.filter(item => item.id !== id);
markModified('white_api_list_path');
apiWhitelistItems.value = apiWhitelistItems.value.filter((item) => item.id !== id);
markModified("white_api_list_path");
};
// 添加IP黑名单项
const addIpBlacklistItem = () => {
ipBlacklistItems.value.push({ id: generateId(), value: '' });
markModified('ip_black_list');
ipBlacklistItems.value.push({ id: generateId(), value: "" });
markModified("ip_black_list");
};
// 移除IP黑名单项
const removeIpBlacklistItem = (id: string) => {
if (ipBlacklistItems.value.length <= 1) {
ElMessage.warning('至少需要保留一个IP黑名单配置');
ElMessage.warning("至少需要保留一个IP黑名单配置");
return;
}
ipBlacklistItems.value = ipBlacklistItems.value.filter(item => item.id !== id);
markModified('ip_black_list');
ipBlacklistItems.value = ipBlacklistItems.value.filter((item) => item.id !== id);
markModified("ip_black_list");
};
// 添加演示环境IP白名单项
const addDemoIpWhitelistItem = () => {
demoIpWhitelistItems.value.push({ id: generateId(), value: '' });
markModified('ip_white_list');
demoIpWhitelistItems.value.push({ id: generateId(), value: "" });
markModified("ip_white_list");
};
// 移除演示环境IP白名单项
const removeDemoIpWhitelistItem = (id: string) => {
if (demoIpWhitelistItems.value.length <= 1) {
ElMessage.warning('至少需要保留一个IP白名单配置');
ElMessage.warning("至少需要保留一个IP白名单配置");
return;
}
demoIpWhitelistItems.value = demoIpWhitelistItems.value.filter(item => item.id !== id);
markModified('ip_white_list');
demoIpWhitelistItems.value = demoIpWhitelistItems.value.filter((item) => item.id !== id);
markModified("ip_white_list");
};
// 接口白名单配置项
@@ -641,15 +687,14 @@ const handleUploadSuccess = (fileInfo: UploadFilePath, type: string) => {
// 图片上传失败的回调处理
const handleUploadError = (error: any) => {
console.error('上传失败:', error.message || '未知错误');
ElMessage.error(`上传失败：${error.message || '请稍后重试'}`);
console.error("上传失败:", error.message || "未知错误");
ElMessage.error(`上传失败：${error.message || "请稍后重试"}`);
};
// 生命周期钩子
onMounted(() => {
configStore.getConfig();
});
</script>
<style lang="scss" scoped>
frontend/src/views/module_system/param/index.vue
+312 -103
View File
@@ -3,7 +3,13 @@
<div class="app-container">
<!-- 搜索区域 -->
<div class="search-container">
<el-form ref="queryFormRef" :model="queryFormData" :inline="true" label-suffix=":" @submit.prevent="handleQuery" >
<el-form
ref="queryFormRef"
:model="queryFormData"
:inline="true"
label-suffix=":"
@submit.prevent="handleQuery"
>
<el-form-item prop="config_name" label="配置名称">
<el-input v-model="queryFormData.config_name" placeholder="请输入配置名称" clearable />
</el-form-item>
@@ -11,28 +17,43 @@
<el-input v-model="queryFormData.config_key" placeholder="请输入配置键名" clearable />
</el-form-item>
<el-form-item prop="config_type" label="系统内置">
<el-select v-model="queryFormData.config_type" placeholder="请选择系统内置" style="width: 167.5px" clearable>
<el-select
v-model="queryFormData.config_type"
placeholder="请选择系统内置"
style="width: 167.5px"
clearable
>
<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="创建时间">
<DatePicker
v-model="dateRange"
@update:model-value="handleDateRangeChange"
/>
<DatePicker v-model="dateRange" @update:model-value="handleDateRangeChange" />
</el-form-item>
<el-form-item v-if="isExpand" prop="creator" label="创建人">
<UserTableSelect
v-model="queryFormData.creator"
@confirm-click="handleConfirm"
@clear-click="handleQuery"
v-model="queryFormData.creator"
@confirm-click="handleConfirm"
@clear-click="handleQuery"
/>
</el-form-item>
<el-form-item class="search-buttons">
<el-button v-hasPerm="['module_system:config:query']" type="primary" icon="search" native-type="submit">查询</el-button>
<el-button v-hasPerm="['module_system:config:query']" icon="refresh" @click="handleResetQuery">重置</el-button>
<el-button
v-hasPerm="['module_system:config:query']"
type="primary"
icon="search"
native-type="submit"
>
查询
</el-button>
<el-button
v-hasPerm="['module_system:config:query']"
icon="refresh"
@click="handleResetQuery"
>
重置
</el-button>
<!-- 展开/收起 -->
<template v-if="isExpandable">
<el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
@@ -69,10 +90,25 @@
<div class="data-table__toolbar--left">
<el-row :gutter="10">
<el-col :span="1.5">
<el-button v-hasPerm="['module_system:config:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
<el-button
v-hasPerm="['module_system:config:create']"
type="success"
icon="plus"
@click="handleOpenDialog('create')"
>
新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button v-hasPerm="['module_system:config:delete']" type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
<el-button
v-hasPerm="['module_system:config:delete']"
type="danger"
icon="delete"
:disabled="selectIds.length === 0"
@click="handleDelete(selectIds)"
>
批量删除
</el-button>
</el-col>
</el-row>
</div>
@@ -80,12 +116,24 @@
<el-row :gutter="10">
<el-col :span="1.5">
<el-tooltip content="导出">
<el-button v-hasPerm="['module_system:config:export']" type="warning" icon="download" circle @click="handleOpenExportsModal"/>
<el-button
v-hasPerm="['module_system:config:export']"
type="warning"
icon="download"
circle
@click="handleOpenExportsModal"
/>
</el-tooltip>
</el-col>
<el-col :span="1.5">
<el-tooltip content="刷新">
<el-button v-hasPerm="['module_system:config:refresh']" type="primary" icon="refresh" circle @click="handleRefresh"/>
<el-button
v-hasPerm="['module_system:config:refresh']"
type="primary"
icon="refresh"
circle
@click="handleRefresh"
/>
</el-tooltip>
</el-col>
<el-col :span="1.5">
@@ -93,7 +141,11 @@
<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-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>
@@ -105,69 +157,203 @@
</div>
<!-- 表格区域：系统配置列表 -->
<el-table ref="dataTableRef" v-loading="loading" :data="pageTableData" highlight-current-row class="data-table__content" :height="450" border stripe @selection-change="handleSelectionChange">
<el-table
ref="dataTableRef"
v-loading="loading"
:data="pageTableData"
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" min-width="55" align="center" />
<el-table-column v-if="tableColumns.find(col => col.prop === 'index')?.show" type="index" fixed label="序号" min-width="60">
<el-table-column
v-if="tableColumns.find((col) => col.prop === 'selection')?.show"
type="selection"
min-width="55"
align="center"
/>
<el-table-column
v-if="tableColumns.find((col) => col.prop === 'index')?.show"
type="index"
fixed
label="序号"
min-width="60"
>
<template #default="scope">
{{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column v-if="tableColumns.find(col => col.prop === 'config_name')?.show" key="config_name" label="配置名称" prop="config_name" min-width="100" />
<el-table-column v-if="tableColumns.find(col => col.prop === 'config_key')?.show" key="config_key" label="配置键" prop="config_key" min-width="200" />
<el-table-column v-if="tableColumns.find(col => col.prop === 'config_value')?.show" key="config_value" label="配置值" prop="config_value" min-width="200" show-overflow-tooltip />
<el-table-column v-if="tableColumns.find(col => col.prop === 'config_type')?.show" key="config_type" label="系统内置" prop="config_type" min-width="100">
<el-table-column
v-if="tableColumns.find((col) => col.prop === 'config_name')?.show"
key="config_name"
label="配置名称"
prop="config_name"
min-width="100"
/>
<el-table-column
v-if="tableColumns.find((col) => col.prop === 'config_key')?.show"
key="config_key"
label="配置键"
prop="config_key"
min-width="200"
/>
<el-table-column
v-if="tableColumns.find((col) => col.prop === 'config_value')?.show"
key="config_value"
label="配置值"
prop="config_value"
min-width="200"
show-overflow-tooltip
/>
<el-table-column
v-if="tableColumns.find((col) => col.prop === 'config_type')?.show"
key="config_type"
label="系统内置"
prop="config_type"
min-width="100"
>
<template #default="scope">
<el-tag v-if="scope.row.config_type" type="success">是</el-tag>
<el-tag v-else type="danger">否</el-tag>
</template>
</el-table-column>
<el-table-column v-if="tableColumns.find(col => col.prop === 'description')?.show" key="description" label="描述" prop="description" min-width="120" />
<el-table-column v-if="tableColumns.find(col => col.prop === 'created_at')?.show" key="created_at" label="创建时间" prop="created_at" min-width="200" sortable />
<el-table-column v-if="tableColumns.find(col => col.prop === 'updated_at')?.show" key="updated_at" label="更新时间" prop="updated_at" min-width="200" sortable />
<el-table-column v-if="tableColumns.find(col => col.prop === 'creator')?.show" key="creator" label="创建人" min-width="120">
<el-table-column
v-if="tableColumns.find((col) => col.prop === 'description')?.show"
key="description"
label="描述"
prop="description"
min-width="120"
/>
<el-table-column
v-if="tableColumns.find((col) => col.prop === 'created_at')?.show"
key="created_at"
label="创建时间"
prop="created_at"
min-width="200"
sortable
/>
<el-table-column
v-if="tableColumns.find((col) => col.prop === 'updated_at')?.show"
key="updated_at"
label="更新时间"
prop="updated_at"
min-width="200"
sortable
/>
<el-table-column
v-if="tableColumns.find((col) => col.prop === 'creator')?.show"
key="creator"
label="创建人"
min-width="120"
>
<template #default="scope">
{{ scope.row.creator?.name }}
</template>
</el-table-column>
<el-table-column v-if="tableColumns.find(col => col.prop === 'operation')?.show" fixed="right" label="操作" align="center" min-width="200">
<el-table-column
v-if="tableColumns.find((col) => col.prop === 'operation')?.show"
fixed="right"
label="操作"
align="center"
min-width="200"
>
<template #default="scope">
<el-button v-hasPerm="['module_system:config:detail']" type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)">详情</el-button>
<el-button v-hasPerm="['module_system:config:update']" type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)">编辑</el-button>
<el-button v-hasPerm="['module_system:config:delete']" type="danger" size="small" link icon="delete" @click="handleDelete([scope.row.id])">删除</el-button>
<el-button
v-hasPerm="['module_system:config:detail']"
type="info"
size="small"
link
icon="document"
@click="handleOpenDialog('detail', scope.row.id)"
>
详情
</el-button>
<el-button
v-hasPerm="['module_system:config:update']"
type="primary"
size="small"
link
icon="edit"
@click="handleOpenDialog('update', scope.row.id)"
>
编辑
</el-button>
<el-button
v-hasPerm="['module_system:config:delete']"
type="danger"
size="small"
link
icon="delete"
@click="handleDelete([scope.row.id])"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页区域 -->
<template #footer>
<pagination v-model:total="total" v-model:page="queryFormData.page_no" v-model:limit="queryFormData.page_size" @pagination="loadingData" />
<pagination
v-model:total="total"
v-model:page="queryFormData.page_no"
v-model:limit="queryFormData.page_size"
@pagination="loadingData"
/>
</template>
</el-card>
<!-- 弹窗区域 -->
<el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" @close="handleCloseDialog">
<el-dialog
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.config_name }}</el-descriptions-item>
<el-descriptions-item label="配置名称" :span="2">
{{ detailFormData.config_name }}
</el-descriptions-item>
<el-descriptions-item label="系统内置" :span="2">
<el-tag v-if="detailFormData.config_type" type="success">是</el-tag>
<el-tag v-else type="danger">否</el-tag>
</el-descriptions-item>
<el-descriptions-item label="配置键" :span="2">{{ detailFormData.config_key }}</el-descriptions-item>
<el-descriptions-item label="配置值" :span="2">{{ detailFormData.config_value }}</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-item label="配置键" :span="2">
{{ detailFormData.config_key }}
</el-descriptions-item>
<el-descriptions-item label="配置值" :span="2">
{{ detailFormData.config_value }}
</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="auto" label-position="right">
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-suffix=":"
label-width="auto"
label-position="right"
>
<el-form-item label="配置名称" prop="config_name">
<el-input v-model="formData.config_name" placeholder="请输入配置名称" :maxlength="50" />
</el-form-item>
@@ -184,7 +370,14 @@
</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-input
v-model="formData.description"
:rows="4"
:maxlength="100"
show-word-limit
type="textarea"
placeholder="请输入描述"
/>
</el-form-item>
</el-form>
</template>
@@ -193,14 +386,31 @@
<div class="dialog-footer">
<!-- 详情弹窗不需要确定按钮的提交逻辑 -->
<el-button @click="handleCloseDialog">取消</el-button>
<el-button v-if="dialogVisible.type !== 'detail'" v-hasPerm="['module_system:config:create']" type="primary" @click="handleSubmit">确定</el-button>
<el-button v-else v-hasPerm="['module_system:config:detail']" type="primary" @click="handleCloseDialog">确定</el-button>
<el-button
v-if="dialogVisible.type !== 'detail'"
v-hasPerm="['module_system:config:create']"
type="primary"
@click="handleSubmit"
>
确定
</el-button>
<el-button
v-else
v-hasPerm="['module_system:config:detail']"
type="primary"
@click="handleCloseDialog"
>
确定
</el-button>
</div>
</template>
</el-dialog>
<ExportModal v-model="exportsDialogVisible" :content-config="curdContentConfig" :selection-data="selectionRows" />
<ExportModal
v-model="exportsDialogVisible"
:content-config="curdContentConfig"
:selection-data="selectionRows"
/>
</div>
</template>
@@ -232,21 +442,20 @@ const pageTableData = ref<ConfigTable[]>([]);
const exportsDialogVisible = ref(false);
const selectionRows = ref<ConfigTable[]>([]);
// 表格列配置
const tableColumns = ref([
{ prop: 'selection', label: '选择框', show: true },
{ prop: 'index', label: '序号', show: true },
{ prop: 'config_name', label: '配置名称', show: true },
{ prop: 'config_key', label: '配置键', show: true },
{ prop: 'config_value', label: '配置值', show: true },
{ prop: 'config_type', label: '系统内置', show: true },
{ prop: 'description', label: '描述', show: true },
{ prop: 'created_at', label: '创建时间', show: true },
{ prop: 'updated_at', label: '更新时间', show: true },
{ prop: 'creator', label: '创建人', show: true },
{ prop: 'operation', label: '操作', show: true }
])
{ prop: "selection", label: "选择框", show: true },
{ prop: "index", label: "序号", show: true },
{ prop: "config_name", label: "配置名称", show: true },
{ prop: "config_key", label: "配置键", show: true },
{ prop: "config_value", label: "配置值", show: true },
{ prop: "config_type", label: "系统内置", show: true },
{ prop: "description", label: "描述", show: true },
{ prop: "created_at", label: "创建时间", show: true },
{ prop: "updated_at", label: "更新时间", show: true },
{ prop: "creator", label: "创建人", show: true },
{ prop: "operation", label: "操作", show: true },
]);
// 详情表单
const detailFormData = ref<ConfigTable>({});
@@ -267,18 +476,18 @@ const queryFormData = reactive<ConfigPageQuery>({
// 编辑表单
const formData = reactive<ConfigForm>({
id: undefined,
config_name: '',
config_key: '',
config_value: '',
config_name: "",
config_key: "",
config_value: "",
config_type: false,
description: ''
description: "",
});
// 弹窗状态
const dialogVisible = reactive({
title: "",
visible: false,
type: 'create' as 'create' | 'update' | 'detail',
type: "create" as "create" | "update" | "detail",
});
// 表单验证规则
@@ -305,9 +514,9 @@ function handleDateRangeChange(range: [Date, Date]) {
}
// 列表刷新
async function handleRefresh () {
async function handleRefresh() {
await loadingData();
};
}
// 加载表格数据
async function loadingData() {
@@ -316,11 +525,9 @@ async function loadingData() {
const response = await ParamsAPI.getConfigList(queryFormData);
pageTableData.value = response.data.data.items;
total.value = response.data.data.total;
}
catch (error: any) {
} catch (error: any) {
console.error(error);
}
finally {
} finally {
loading.value = false;
}
}
@@ -350,12 +557,12 @@ async function handleResetQuery() {
// 定义初始表单数据常量
const initialFormData: ConfigForm = {
id: undefined,
config_name: '',
config_key: '',
config_value: '',
config_name: "",
config_key: "",
config_value: "",
config_type: false,
description: ''
}
description: "",
};
// 重置表单
async function resetForm() {
@@ -380,14 +587,14 @@ async function handleCloseDialog() {
}
// 打开系统配置弹窗
async function handleOpenDialog(type: 'create' | 'update' | 'detail', id?: number) {
async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
dialogVisible.type = type;
if (id) {
const response = await ParamsAPI.getConfigDetail(id);
if (type === 'detail') {
if (type === "detail") {
dialogVisible.title = "系统配置详情";
Object.assign(detailFormData.value, response.data.data);
} else if (type === 'update') {
} else if (type === "update") {
dialogVisible.title = "修改系统配置";
Object.assign(formData, response.data.data);
}
@@ -408,7 +615,7 @@ async function handleSubmit() {
const id = formData.id;
if (id) {
try {
await ParamsAPI.updateConfig(id, formData)
await ParamsAPI.updateConfig(id, formData);
dialogVisible.visible = false;
resetForm();
handleResetQuery();
@@ -419,7 +626,7 @@ async function handleSubmit() {
}
} else {
try {
await ParamsAPI.createConfig(formData)
await ParamsAPI.createConfig(formData);
dialogVisible.visible = false;
resetForm();
handleResetQuery();
@@ -439,19 +646,21 @@ async function handleDelete(ids: number[]) {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(async () => {
try {
loading.value = true;
await ParamsAPI.deleteConfig(ids);
handleResetQuery();
} catch (error: any) {
console.error(error);
} finally {
loading.value = false;
}
}).catch(() => {
ElMessageBox.close();
});
})
.then(async () => {
try {
loading.value = true;
await ParamsAPI.deleteConfig(ids);
handleResetQuery();
} catch (error: any) {
console.error(error);
} finally {
loading.value = false;
}
})
.catch(() => {
ElMessageBox.close();
});
}
// 导出弹窗
@@ -461,23 +670,23 @@ async function handleOpenExportsModal() {
// 导出字段
const exportColumns = [
{ prop: 'config_name', label: '配置名称' },
{ prop: 'config_key', label: '配置键' },
{ prop: 'config_value', label: '配置值' },
{ prop: 'config_type', label: '系统内置' },
{ prop: 'description', label: '描述' },
{ prop: 'created_at', label: '创建时间' },
{ prop: 'updated_at', label: '更新时间' },
{ prop: "config_name", label: "配置名称" },
{ prop: "config_key", label: "配置键" },
{ prop: "config_value", label: "配置值" },
{ prop: "config_type", label: "系统内置" },
{ prop: "description", label: "描述" },
{ prop: "created_at", label: "创建时间" },
{ prop: "updated_at", label: "更新时间" },
];
// 导入/导出配置（用于导出弹窗）
const curdContentConfig = {
permPrefix: 'module_system:config',
permPrefix: "module_system:config",
cols: exportColumns as any,
exportsAction: async (params: any) => {
const query: any = { ...params };
if (typeof query.config_type === 'string') {
query.config_type = query.config_type === 'true';
if (typeof query.config_type === "string") {
query.config_type = query.config_type === "true";
}
query.page_no = 1;
query.page_size = 1000;