样式修正,支持配置登录方式、icon等
This commit is contained in:
@@ -111,19 +111,16 @@
|
||||
:label="item.configName || item.configKey"
|
||||
:prop="item.configKey"
|
||||
>
|
||||
<el-upload
|
||||
:action="uploadUrl"
|
||||
:headers="uploadHeaders"
|
||||
:show-file-list="true"
|
||||
:limit="1"
|
||||
list-type="picture-card"
|
||||
:on-success="(response: any) => handleUploadSuccess(response, group.groupKey, item.configKey)"
|
||||
:on-remove="() => handleRemove(group.groupKey, item.configKey)"
|
||||
:file-list="getFileList(group.groupKey, item.configKey)"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
</el-upload>
|
||||
<span v-if="item.remark" class="form-item-remark">{{ item.remark }}</span>
|
||||
<FileUpload
|
||||
list-type="cover"
|
||||
:cover-url="configData[group.groupKey][item.configKey]"
|
||||
@update:cover-url="(url) => handleCoverUpdate(url, group.groupKey, item.configKey)"
|
||||
accept="image/*"
|
||||
:max-size="5"
|
||||
module="system"
|
||||
:as-dialog="false"
|
||||
:tip="item.remark || '点击上传图片,支持jpg、png格式'"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
@@ -146,14 +143,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, computed } from 'vue';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { AdminLayout } from '@/views/admin';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import { configApi } from '@/apis/system';
|
||||
import type { ConfigItem } from '@/types/system/config';
|
||||
import { APP_CONFIG, FILE_DOWNLOAD_URL } from '@/config';
|
||||
import { useStore } from 'vuex';
|
||||
import FileUpload from '@/components/file/FileUpload.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'SystemConfigView'
|
||||
@@ -170,13 +165,6 @@ interface ConfigGroup {
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const activeTab = ref('');
|
||||
const store = useStore();
|
||||
|
||||
// 上传配置
|
||||
const uploadUrl = APP_CONFIG.file.uploadUrl;
|
||||
const uploadHeaders = computed(() => ({
|
||||
Authorization: `Bearer ${store.state.auth.token}`
|
||||
}));
|
||||
|
||||
// 配置分组列表
|
||||
const configGroups = ref<ConfigGroup[]>([]);
|
||||
@@ -364,38 +352,10 @@ async function loadConfigs() {
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件列表(用于显示已上传的图片)
|
||||
* 处理封面URL更新
|
||||
*/
|
||||
function getFileList(groupKey: string, configKey: string): any[] {
|
||||
const fileId = configData[groupKey]?.[configKey];
|
||||
if (fileId) {
|
||||
return [{
|
||||
name: 'image',
|
||||
url: `${FILE_DOWNLOAD_URL}${fileId}`
|
||||
}];
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理上传成功
|
||||
*/
|
||||
function handleUploadSuccess(response: any, groupKey: string, configKey: string) {
|
||||
if (response.success && response.data) {
|
||||
// 后端返回的是fileId
|
||||
configData[groupKey][configKey] = response.data;
|
||||
ElMessage.success('图片上传成功');
|
||||
} else {
|
||||
ElMessage.error(response.message || '图片上传失败');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理删除图片
|
||||
*/
|
||||
function handleRemove(groupKey: string, configKey: string) {
|
||||
configData[groupKey][configKey] = '';
|
||||
ElMessage.success('图片已删除');
|
||||
function handleCoverUpdate(url: string, groupKey: string, configKey: string) {
|
||||
configData[groupKey][configKey] = url;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -603,11 +603,6 @@ function handleSizeChange(size: number) {
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.tag-container {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user