mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-28 06:57:54 +00:00
refactor(module): 重构模块路径和数据库配置
- 将前端API路径从`system`和`monitor`重命名为`module_system`和`module_monitor` - 移除MongoDB相关配置和依赖 - 统一数据库类型命名为`mysql`和`postgres` - 修复代码生成模板中的字段命名问题 - 更新依赖项并移除不必要的包 - 优化数据库连接配置 - 添加新的文档和Redoc视图组件 - 修复SQL脚本中的字段注释
This commit is contained in:
zhangtao
@@ -0,0 +1,671 @@
|
||||
<template>
|
||||
<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">
|
||||
<!-- 系统配置 -->
|
||||
<el-divider>网站配置</el-divider>
|
||||
<div v-for="(item, key) in systemConfigs" :key="key">
|
||||
<el-form-item :label="item.config_name">
|
||||
<span class="flex items-center gap-2 w-full">
|
||||
<el-input
|
||||
v-model="item.config_value"
|
||||
:placeholder="t('common.inputText')"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
@input="markModified(key)"
|
||||
/>
|
||||
</span>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- logo配置 -->
|
||||
<el-divider>网站图标</el-divider>
|
||||
<div v-for="(item, key) in logoConfigs" :key="key">
|
||||
<el-form-item :label="item.config_name">
|
||||
<div class="flex items-center gap-2 w-full">
|
||||
<SingleImageUpload
|
||||
v-model="item.config_value"
|
||||
:data="{ type: key }"
|
||||
:name="'file'"
|
||||
:max-file-size="item.maxFileSize"
|
||||
:show-tip="true"
|
||||
:enable-preview="true"
|
||||
@success="(fileInfo: UploadFilePath) => handleUploadSuccess(fileInfo, key)"
|
||||
@error="handleUploadError"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="安全隐私" name="securityPrivacy">
|
||||
<el-form :model="configState" label-suffix=":" label-width="auto" label-position="right">
|
||||
<!-- 系统配置 -->
|
||||
<el-divider>安全隐私</el-divider>
|
||||
<div v-for="(item, key) in securityPrivacyConfigs" :key="key">
|
||||
<el-form-item :label="item.config_name">
|
||||
<span class="flex items-center gap-2 w-full">
|
||||
<el-input
|
||||
v-model="item.config_value"
|
||||
:placeholder="t('common.inputText')"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
@input="markModified(key)"
|
||||
/>
|
||||
</span>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="用户协议" name="userAgreement">
|
||||
<!-- 系统配置 -->
|
||||
<el-form :model="configState" label-suffix=":" label-width="auto" label-position="right">
|
||||
<el-divider>用户协议</el-divider>
|
||||
<div v-for="(item, key) in userAgreementConfigs" :key="key">
|
||||
<el-form-item :label="item.config_name">
|
||||
<span class="flex items-center gap-2 w-full">
|
||||
<el-input
|
||||
v-model="item.config_value"
|
||||
:placeholder="t('common.inputText')"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
@input="markModified(key)"
|
||||
/>
|
||||
</span>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="接口白名单" name="apiWhitelist">
|
||||
<el-form :model="configState" label-suffix=":" label-width="auto" label-position="right">
|
||||
<!-- 系统配置 -->
|
||||
<el-divider>接口白名单</el-divider>
|
||||
<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">
|
||||
<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('请输入有效的接口路径格式（以/开头）');
|
||||
}
|
||||
}"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="minus"
|
||||
circle
|
||||
size="small"
|
||||
@click="removeApiWhitelistItem(listItem.id)"
|
||||
/>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="plus"
|
||||
size="small"
|
||||
style="margin-top: 10px"
|
||||
@click="addApiWhitelistItem"
|
||||
>
|
||||
添加接口路径
|
||||
</el-button>
|
||||
<div class="text-xs text-gray-500 mt-2">
|
||||
配置说明：添加到白名单的接口路径无需登录即可访问，支持完整路径配置。
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="IP黑名单" name="ipBlacklist">
|
||||
<el-form :model="configState" label-suffix=":" label-width="auto" label-position="right">
|
||||
<!-- 系统配置 -->
|
||||
<el-divider>IP黑名单</el-divider>
|
||||
<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">
|
||||
<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地址格式');
|
||||
}
|
||||
}"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="minus"
|
||||
circle
|
||||
size="small"
|
||||
@click="removeIpBlacklistItem(listItem.id)"
|
||||
/>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="plus"
|
||||
size="small"
|
||||
style="margin-top: 10px"
|
||||
@click="addIpBlacklistItem"
|
||||
>
|
||||
添加IP地址
|
||||
</el-button>
|
||||
<div class="text-xs text-gray-500 mt-2">
|
||||
配置说明：添加到黑名单的IP地址将无法访问系统，支持单个IP配置。
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="演示环境配置" name="demo">
|
||||
<el-form :model="configState" label-suffix=":" label-width="auto" label-position="right">
|
||||
<!-- 系统配置 -->
|
||||
<el-divider>演示环境配置</el-divider>
|
||||
<div v-for="(item, key) in demoConfigs" :key="key">
|
||||
<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) => {
|
||||
item.config_value = value ? 'true' : 'false';
|
||||
markModified(key);
|
||||
}"
|
||||
|
||||
/>
|
||||
<div class="text-xs text-gray-500 mt-1">
|
||||
配置说明：启用后系统将进入演示模式，部分功能可能受限。
|
||||
</div>
|
||||
</template>
|
||||
<!-- 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">
|
||||
<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地址格式');
|
||||
}
|
||||
}"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="minus"
|
||||
circle
|
||||
size="small"
|
||||
@click="removeDemoIpWhitelistItem(listItem.id)"
|
||||
/>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="plus"
|
||||
size="small"
|
||||
style="margin-top: 10px"
|
||||
@click="addDemoIpWhitelistItem"
|
||||
>
|
||||
添加IP地址
|
||||
</el-button>
|
||||
<div class="text-xs text-gray-500 mt-2">
|
||||
配置说明：演示模式下，只有白名单中的IP地址可以访问系统，支持单个IP配置。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<!-- 其他配置项 -->
|
||||
<template v-else>
|
||||
<el-input
|
||||
v-model="item.config_value"
|
||||
:placeholder="t('common.inputText')"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
@input="markModified(key)"
|
||||
/>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template #footer>
|
||||
<el-button @click="handleCloseDialog">取消</el-button>
|
||||
<el-button v-hasPerm="['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 { useConfigStore } from "@/store";
|
||||
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";
|
||||
|
||||
// 定义列表项类型
|
||||
interface ListItem {
|
||||
id: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
// 生成唯一ID
|
||||
const generateId = () => {
|
||||
return Math.random().toString(36).substr(2, 9);
|
||||
};
|
||||
|
||||
// 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]?)$/;
|
||||
return ipRegex.test(ip);
|
||||
};
|
||||
|
||||
// 接口路径验证函数
|
||||
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')
|
||||
|
||||
// 与父组件的 v-model 同步
|
||||
const props = defineProps<{ modelValue: boolean }>();
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const drawerVisible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val: boolean) => emit('update:modelValue', val)
|
||||
});
|
||||
|
||||
// 配置状态管理
|
||||
const configState = reactive<ConfigTable>({
|
||||
id: undefined,
|
||||
config_name: '',
|
||||
config_key: '',
|
||||
config_value: '',
|
||||
config_type: undefined,
|
||||
description: ''
|
||||
});
|
||||
|
||||
// 记录修改过的字段
|
||||
const modifiedFields = reactive<Record<string, boolean>>({});
|
||||
|
||||
// 标记字段为已修改
|
||||
const markModified = (key: string) => {
|
||||
modifiedFields[key] = true;
|
||||
};
|
||||
|
||||
// 判断是否有修改
|
||||
const hasChanges = computed(() => Object.keys(modifiedFields).length > 0);
|
||||
|
||||
// 提交修改
|
||||
const submitChanges = async () => {
|
||||
const keysToSubmit = Object.keys(modifiedFields);
|
||||
if (keysToSubmit.length === 0) return;
|
||||
|
||||
try {
|
||||
// 准备提交数据
|
||||
// 1. 处理接口白名单
|
||||
if ('white_api_list_path' in modifiedFields && apiWhitelistConfigs.value.white_api_list_path?.id) {
|
||||
const apiWhitelistArray = apiWhitelistItems.value
|
||||
.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
|
||||
});
|
||||
}
|
||||
|
||||
// 2. 处理IP黑名单
|
||||
if ('ip_black_list' in modifiedFields && ipBlacklistConfigs.value.ip_black_list?.id) {
|
||||
const ipBlacklistArray = ipBlacklistItems.value
|
||||
.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
|
||||
});
|
||||
}
|
||||
|
||||
// 3. 处理演示环境IP白名单
|
||||
if ('ip_white_list' in modifiedFields && demoConfigs.value.ip_white_list?.id) {
|
||||
const demoIpWhitelistArray = demoIpWhitelistItems.value
|
||||
.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
|
||||
});
|
||||
}
|
||||
|
||||
// 4. 处理其他配置项
|
||||
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];
|
||||
return item && item.id ? ParamsAPI.updateConfig(item.id, { ...item }) : Promise.resolve();
|
||||
});
|
||||
await Promise.all(otherUpdatePromises);
|
||||
|
||||
// 清除已提交的修改标记
|
||||
keysToSubmit.forEach(key => {
|
||||
delete modifiedFields[key];
|
||||
});
|
||||
|
||||
// 重新加载配置数据
|
||||
await configStore.getConfig();
|
||||
initializeLists();
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 取消修改：重置所有修改字段的状态并恢复初始值
|
||||
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 || '';
|
||||
} 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 || '';
|
||||
} 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 || '';
|
||||
} 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 || '';
|
||||
} 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 || '';
|
||||
}
|
||||
}
|
||||
delete modifiedFields[key];
|
||||
}
|
||||
ElMessageBox.close();
|
||||
};
|
||||
|
||||
async function handleCloseDialog() {
|
||||
// 仅关闭抽屉，等待关闭动画结束后再重置
|
||||
drawerVisible.value = false;
|
||||
}
|
||||
|
||||
function onDrawerClosed() {
|
||||
// 抽屉关闭动画结束后再执行重置，避免打断动画
|
||||
resetForm();
|
||||
}
|
||||
|
||||
// 系统配置项
|
||||
const systemConfigs = computed(() => ({
|
||||
sys_web_title: configStore.configData.sys_web_title,
|
||||
sys_web_version: configStore.configData.sys_web_version,
|
||||
sys_web_description: configStore.configData.sys_web_description,
|
||||
}));
|
||||
|
||||
// 安全隐私配置项
|
||||
const securityPrivacyConfigs = computed(() => ({
|
||||
sys_help_doc: configStore.configData.sys_help_doc,
|
||||
sys_git_code: configStore.configData.sys_git_code,
|
||||
sys_keep_record: configStore.configData.sys_keep_record,
|
||||
sys_web_copyright: configStore.configData.sys_web_copyright,
|
||||
sys_web_privacy: configStore.configData.sys_web_privacy,
|
||||
}));
|
||||
|
||||
// 用户协议配置项
|
||||
const userAgreementConfigs = computed(() => ({
|
||||
sys_web_clause: configStore.configData.sys_web_clause,
|
||||
}));
|
||||
|
||||
// 接口白名单配置 - 动态管理
|
||||
const apiWhitelistItems = ref<ListItem[]>([]);
|
||||
// IP黑名单配置 - 动态管理
|
||||
const ipBlacklistItems = ref<ListItem[]>([]);
|
||||
// IP白名单配置 - 动态管理
|
||||
const demoIpWhitelistItems = ref<ListItem[]>([]);
|
||||
|
||||
// 从配置数据初始化列表
|
||||
const initializeLists = () => {
|
||||
// 初始化接口白名单
|
||||
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() }));
|
||||
} else {
|
||||
// 如果不是数组，回退到按换行符分割
|
||||
apiWhitelistItems.value = apiWhitelistStr
|
||||
? 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: '' }];
|
||||
}
|
||||
|
||||
// 初始化IP黑名单
|
||||
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() }));
|
||||
} else {
|
||||
// 如果不是数组，回退到按换行符分割
|
||||
ipBlacklistItems.value = ipBlacklistStr
|
||||
? 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: '' }];
|
||||
}
|
||||
|
||||
// 初始化演示环境IP白名单
|
||||
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() }));
|
||||
} else {
|
||||
// 如果不是数组，回退到按换行符分割
|
||||
demoIpWhitelistItems.value = demoIpWhitelistStr
|
||||
? 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: '' }];
|
||||
}
|
||||
};
|
||||
|
||||
// 添加接口白名单项
|
||||
const addApiWhitelistItem = () => {
|
||||
apiWhitelistItems.value.push({ id: generateId(), value: '' });
|
||||
markModified('white_api_list_path');
|
||||
};
|
||||
|
||||
// 移除接口白名单项
|
||||
const removeApiWhitelistItem = (id: string) => {
|
||||
if (apiWhitelistItems.value.length <= 1) {
|
||||
ElMessage.warning('至少需要保留一个接口白名单配置');
|
||||
return;
|
||||
}
|
||||
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');
|
||||
};
|
||||
|
||||
// 移除IP黑名单项
|
||||
const removeIpBlacklistItem = (id: string) => {
|
||||
if (ipBlacklistItems.value.length <= 1) {
|
||||
ElMessage.warning('至少需要保留一个IP黑名单配置');
|
||||
return;
|
||||
}
|
||||
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');
|
||||
};
|
||||
|
||||
// 移除演示环境IP白名单项
|
||||
const removeDemoIpWhitelistItem = (id: string) => {
|
||||
if (demoIpWhitelistItems.value.length <= 1) {
|
||||
ElMessage.warning('至少需要保留一个IP白名单配置');
|
||||
return;
|
||||
}
|
||||
demoIpWhitelistItems.value = demoIpWhitelistItems.value.filter(item => item.id !== id);
|
||||
markModified('ip_white_list');
|
||||
};
|
||||
|
||||
// 接口白名单配置项
|
||||
const apiWhitelistConfigs = computed(() => ({
|
||||
white_api_list_path: configStore.configData.white_api_list_path,
|
||||
}));
|
||||
|
||||
// IP黑名单配置项
|
||||
const ipBlacklistConfigs = computed(() => ({
|
||||
ip_black_list: configStore.configData.ip_black_list,
|
||||
}));
|
||||
|
||||
// 演示环境配置项
|
||||
const demoConfigs = computed(() => ({
|
||||
demo_enable: configStore.configData.demo_enable,
|
||||
ip_white_list: configStore.configData.ip_white_list,
|
||||
}));
|
||||
|
||||
// 在组件挂载时初始化列表
|
||||
onMounted(() => {
|
||||
initializeLists();
|
||||
});
|
||||
|
||||
// logo配置项
|
||||
const logoConfigs = computed(() => ({
|
||||
sys_web_logo: {
|
||||
...configStore.configData.sys_web_logo,
|
||||
maxFileSize: 5,
|
||||
},
|
||||
sys_web_favicon: {
|
||||
...configStore.configData.sys_web_favicon,
|
||||
maxFileSize: 5,
|
||||
},
|
||||
sys_login_background: {
|
||||
...configStore.configData.sys_login_background,
|
||||
maxFileSize: 10,
|
||||
},
|
||||
}));
|
||||
|
||||
// 图片上传成功的回调处理
|
||||
const handleUploadSuccess = (fileInfo: UploadFilePath, type: string) => {
|
||||
const fileUrl = fileInfo.file_url;
|
||||
if (type in configStore.configData) {
|
||||
(configStore.configData as any)[type].config_value = fileUrl;
|
||||
}
|
||||
if (type in systemConfigs.value) {
|
||||
(systemConfigs.value as any)[type].config_value = fileUrl;
|
||||
} else if (type in logoConfigs.value) {
|
||||
(logoConfigs.value as any)[type].config_value = fileUrl;
|
||||
}
|
||||
markModified(type);
|
||||
};
|
||||
|
||||
// 图片上传失败的回调处理
|
||||
const handleUploadError = (error: any) => {
|
||||
console.error('上传失败:', error.message || '未知错误');
|
||||
ElMessage.error(`上传失败：${error.message || '请稍后重试'}`);
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
configStore.getConfig();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,502 @@
|
||||
<!-- 系统配置 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<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>
|
||||
<el-form-item prop="config_key" label="配置键名">
|
||||
<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-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"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isExpand" prop="creator" label="创建人">
|
||||
<UserTableSelect
|
||||
v-model="queryFormData.creator"
|
||||
@confirm-click="handleConfirm"
|
||||
@clear-click="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-buttons">
|
||||
<el-button v-hasPerm="['system:config:query']" type="primary" icon="search" native-type="submit">查询</el-button>
|
||||
<el-button v-hasPerm="['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">
|
||||
{{ isExpand ? "收起" : "展开" }}
|
||||
<el-icon>
|
||||
<template v-if="isExpand">
|
||||
<ArrowUp />
|
||||
</template>
|
||||
<template v-else>
|
||||
<ArrowDown />
|
||||
</template>
|
||||
</el-icon>
|
||||
</el-link>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<el-card class="data-table">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>
|
||||
<el-tooltip content="配置管理，包括系统名称、系统描述、系统版本、系统logo等。">
|
||||
<QuestionFilled class="w-4 h-4 mx-1" />
|
||||
</el-tooltip>
|
||||
系统配置列表
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 功能区域 -->
|
||||
<div class="data-table__toolbar">
|
||||
<div class="data-table__toolbar--left">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPerm="['system:config:create']" type="success" icon="plus" @click="handleOpenDialog('create')">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPerm="['system:config:delete']" type="danger" icon="delete" :disabled="selectIds.length === 0" @click="handleDelete(selectIds)">批量删除</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="data-table__toolbar--right">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-tooltip content="导出">
|
||||
<el-button v-hasPerm="['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="['system:config:refresh']" type="primary" icon="refresh" circle @click="handleRefresh"/>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-dropdown v-hasPerm="['system:config:filter']" 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-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域：系统配置列表 -->
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<template #default="scope">
|
||||
<el-button v-hasPerm="['system:config:detail']" type="info" size="small" link icon="document" @click="handleOpenDialog('detail', scope.row.id)">详情</el-button>
|
||||
<el-button v-hasPerm="['system:config:update']" type="primary" size="small" link icon="edit" @click="handleOpenDialog('update', scope.row.id)">编辑</el-button>
|
||||
<el-button v-hasPerm="['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" />
|
||||
</template>
|
||||
</el-card>
|
||||
|
||||
<!-- 弹窗区域 -->
|
||||
<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">
|
||||
<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>
|
||||
</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="config_name">
|
||||
<el-input v-model="formData.config_name" placeholder="请输入配置名称" :maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="配置键" prop="config_key">
|
||||
<el-input v-model="formData.config_key" placeholder="请输入配置键" :maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="配置值" prop="config_value">
|
||||
<el-input v-model="formData.config_value" placeholder="请输入配置值" :maxlength="100" />
|
||||
</el-form-item>
|
||||
<el-form-item label="系统内置" prop="config_type">
|
||||
<el-radio-group v-model="formData.config_type">
|
||||
<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 #footer>
|
||||
<div class="dialog-footer">
|
||||
<!-- 详情弹窗不需要确定按钮的提交逻辑 -->
|
||||
<el-button @click="handleCloseDialog">取消</el-button>
|
||||
<el-button v-if="dialogVisible.type !== 'detail'" v-hasPerm="['system:config:create']" type="primary" @click="handleSubmit">确定</el-button>
|
||||
<el-button v-else v-hasPerm="['system:config:detail']" type="primary" @click="handleCloseDialog">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<ExportModal v-model="exportsDialogVisible" :content-config="curdContentConfig" :selection-data="selectionRows" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "Params",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import ParamsAPI, { ConfigTable, ConfigForm, ConfigPageQuery } from "@/api/module_system/params";
|
||||
import UserTableSelect from "@/views/module_system/user/components/UserTableSelect.vue";
|
||||
import ExportModal from "@/components/CURD/ExportModal.vue";
|
||||
import type { IContentConfig } from "@/components/CURD/types";
|
||||
import { formatToDateTime } from "@/utils/dateUtil";
|
||||
|
||||
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<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 }
|
||||
])
|
||||
|
||||
// 详情表单
|
||||
const detailFormData = ref<ConfigTable>({});
|
||||
|
||||
// 分页查询参数
|
||||
const queryFormData = reactive<ConfigPageQuery>({
|
||||
page_no: 1,
|
||||
page_size: 10,
|
||||
config_name: undefined,
|
||||
config_key: undefined,
|
||||
config_type: undefined,
|
||||
start_time: undefined,
|
||||
end_time: undefined,
|
||||
// 创建人
|
||||
creator: undefined,
|
||||
});
|
||||
|
||||
// 编辑表单
|
||||
const formData = reactive<ConfigForm>({
|
||||
id: undefined,
|
||||
config_name: '',
|
||||
config_key: '',
|
||||
config_value: '',
|
||||
config_type: false,
|
||||
description: ''
|
||||
});
|
||||
|
||||
// 弹窗状态
|
||||
const dialogVisible = reactive({
|
||||
title: "",
|
||||
visible: false,
|
||||
type: 'create' as 'create' | 'update' | 'detail',
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
config_name: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
|
||||
config_key: [{ required: true, message: "请输入系统配置键", trigger: "blur" }],
|
||||
config_value: [{ required: true, message: "请输入系统配置值", trigger: "blur" }],
|
||||
config_type: [{ required: true, message: "请选择系统配置类型", trigger: "blur" }],
|
||||
});
|
||||
|
||||
// 日期范围临时变量
|
||||
const dateRange = ref<[Date, Date] | []>([]);
|
||||
|
||||
// 处理日期范围变化
|
||||
function handleDateRangeChange(range: [Date, Date]) {
|
||||
dateRange.value = range;
|
||||
if (range && range.length === 2) {
|
||||
queryFormData.start_time = formatToDateTime(range[0]);
|
||||
queryFormData.end_time = formatToDateTime(range[1]);
|
||||
} else {
|
||||
queryFormData.start_time = undefined;
|
||||
queryFormData.end_time = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// 列表刷新
|
||||
async function handleRefresh () {
|
||||
await loadingData();
|
||||
};
|
||||
|
||||
// 加载表格数据
|
||||
async function loadingData() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await ParamsAPI.getConfigList(queryFormData);
|
||||
pageTableData.value = response.data.data.items;
|
||||
total.value = response.data.data.total;
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error(error);
|
||||
}
|
||||
finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 查询（重置页码后获取数据）
|
||||
async function handleQuery() {
|
||||
queryFormData.page_no = 1;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 选择创建人后触发查询
|
||||
function handleConfirm() {
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
async function handleResetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
queryFormData.page_no = 1;
|
||||
// 额外清空日期范围与时间查询参数
|
||||
dateRange.value = [];
|
||||
queryFormData.start_time = undefined;
|
||||
queryFormData.end_time = undefined;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 定义初始表单数据常量
|
||||
const initialFormData: ConfigForm = {
|
||||
id: undefined,
|
||||
config_name: '',
|
||||
config_key: '',
|
||||
config_value: '',
|
||||
config_type: false,
|
||||
description: ''
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
async function resetForm() {
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
}
|
||||
// 完全重置 formData 为初始状态
|
||||
Object.assign(formData, initialFormData);
|
||||
}
|
||||
|
||||
// 行复选框选中项变化
|
||||
async function handleSelectionChange(selection: any) {
|
||||
selectIds.value = selection.map((item: any) => item.id);
|
||||
selectionRows.value = selection;
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
async function handleCloseDialog() {
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
}
|
||||
|
||||
// 打开系统配置弹窗
|
||||
async function handleOpenDialog(type: 'create' | 'update' | 'detail', id?: number) {
|
||||
dialogVisible.type = type;
|
||||
if (id) {
|
||||
const response = await ParamsAPI.getConfigDetail(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: any) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
// 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
|
||||
const id = formData.id;
|
||||
if (id) {
|
||||
try {
|
||||
await ParamsAPI.updateConfig(id, formData)
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await ParamsAPI.createConfig(formData)
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 删除、批量删除
|
||||
async function handleDelete(ids: number[]) {
|
||||
ElMessageBox.confirm("确认删除该项数据?", "警告", {
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
||||
// 导出弹窗
|
||||
async function handleOpenExportsModal() {
|
||||
exportsDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 导出字段
|
||||
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: '更新时间' },
|
||||
];
|
||||
|
||||
// 导入/导出配置（用于导出弹窗）
|
||||
const curdContentConfig = {
|
||||
permPrefix: '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';
|
||||
}
|
||||
query.page_no = 1;
|
||||
query.page_size = 1000;
|
||||
const all: any[] = [];
|
||||
while (true) {
|
||||
const res = await ParamsAPI.getConfigList(query);
|
||||
const items = res.data?.data?.items || [];
|
||||
const total = res.data?.data?.total || 0;
|
||||
all.push(...items);
|
||||
if (all.length >= total || items.length === 0) break;
|
||||
query.page_no += 1;
|
||||
}
|
||||
return all;
|
||||
},
|
||||
} as unknown as IContentConfig;
|
||||
|
||||
onMounted(() => {
|
||||
loadingData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user