UNIVPLMDataIntegration/Web/src/views/system/infoSetting/index.vue

<template>
	<div>
		<el-card shadow="hover" v-loading="state.isLoading">
			<el-descriptions title="系统信息配置" :column="2" :border="true">
				<template #title>
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Setting /> </el-icon> 系统信息配置
				</template>
				<el-descriptions-item label="系统图标" :span="2">
					<!-- <template #label>
						<div class="cell-item">
							<el-icon><ele-PictureRounded /></el-icon> 系统图标
						</div>
					</template> -->
					<el-upload ref="uploadRef" class="avatar-uploader" :showFileList="false" :autoUpload="false" accept=".jpg,.png,.svg" action :limit="1" :onChange="handleUploadChange">
						<img v-if="state.formData.sysLogo" :src="state.formData.sysLogo" class="avatar" />
						<SvgIcon v-else class="avatar-uploader-icon" name="ele-Plus" :size="28" />
					</el-upload>
				</el-descriptions-item>
				<el-descriptions-item label="系统主标题">
					<el-input v-model="state.formData.sysTitle" />
				</el-descriptions-item>
				<el-descriptions-item label="系统副标题">
					<el-input v-model="state.formData.sysViceTitle" />
				</el-descriptions-item>
				<el-descriptions-item label="系统描述" :span="2">
					<el-input v-model="state.formData.sysViceDesc" />
				</el-descriptions-item>
				<el-descriptions-item label="水印内容" :span="2">
					<el-input v-model="state.formData.sysWatermark" />
				</el-descriptions-item>
				<el-descriptions-item label="版权说明" :span="2">
					<el-input v-model="state.formData.sysCopyright" />
				</el-descriptions-item>
				<el-descriptions-item label="ICP备案号">
					<el-input v-model="state.formData.sysIcp" />
				</el-descriptions-item>
				<el-descriptions-item label="ICP地址">
					<el-input v-model="state.formData.sysIcpUrl" />
				</el-descriptions-item>
				<el-descriptions-item label="图形验证码">
					<el-radio-group v-model="state.formData.sysCaptcha">
						<el-radio :value="true">启用</el-radio>
						<el-radio :value="false">禁用</el-radio>
					</el-radio-group>
				</el-descriptions-item>
				<el-descriptions-item label="登录二次验证">
					<el-radio-group v-model="state.formData.sysSecondVer">
						<el-radio :value="true">启用</el-radio>
						<el-radio :value="false">禁用</el-radio>
					</el-radio-group>
				</el-descriptions-item>

				<template #extra>
					<el-button type="primary" icon="ele-SuccessFilled" @click="onSave">保存</el-button>
				</template>
			</el-descriptions>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="sysInfoSetting">
import { nextTick, reactive, ref } from 'vue';
import { ElMessage, UploadInstance } from 'element-plus';
import { fileToBase64 } from '/@/utils/base64Conver';

import { getAPI } from '/@/utils/axios-utils';
import { SysConfigApi } from '/@/api-services';

const uploadRef = ref<UploadInstance>();
const state = reactive({
	isLoading: false,
	file: undefined as any,
	formData: {
		sysLogoBlob: undefined,
		sysLogo: '',
		sysLogoFileName: '',
		sysTitle: '',
		sysViceTitle: '',
		sysViceDesc: '',
		sysWatermark: '',
		sysCopyright: '',
		sysIcp: '',
		sysIcpUrl: '',
		sysSecondVer: false,
		sysCaptcha: true,
	},
});

// 通过onChange方法获得文件列表
const handleUploadChange = (file: any) => {
	uploadRef.value!.clearFiles();

	state.file = file;
	state.formData.sysLogo = URL.createObjectURL(state.file.raw); // 显示预览logo
};

// 保存
const onSave = async () => {
	// 如果有选择图标，则转换为 base64
	let sysLogoBase64 = '';
	let sysLogoFileName = '';
	if (state.file) {
		sysLogoBase64 = (await fileToBase64(state.file.raw)) as string;
		sysLogoFileName = state.file.raw.name;
	}

	try {
		state.isLoading = true;
		const res = await getAPI(SysConfigApi).apiSysConfigSaveSysInfoPost({
			sysLogoBase64: sysLogoBase64,
			sysLogoFileName: sysLogoFileName,
			sysTitle: state.formData.sysTitle,
			sysViceTitle: state.formData.sysViceTitle,
			sysViceDesc: state.formData.sysViceDesc,
			sysWatermark: state.formData.sysWatermark,
			sysCopyright: state.formData.sysCopyright,
			sysIcp: state.formData.sysIcp,
			sysIcpUrl: state.formData.sysIcpUrl,
			sysSecondVer: state.formData.sysSecondVer,
			sysCaptcha: state.formData.sysCaptcha,
		});
		if (res.data.code !== 200) return;

		state.file = undefined;
		ElMessage.success('保存成功');

		// 刷新浏览器
		// window.location.reload();
	} finally {
		nextTick(() => {
			state.isLoading = false;
		});
	}
};

// 加载数据
const loadData = async () => {
	try {
		state.isLoading = true;
		const res = await getAPI(SysConfigApi).apiSysConfigSysInfoGet();
		if (res.data!.type !== 'success') return;

		const result = res.data.result;
		state.formData = {
			sysLogoBlob: undefined,
			sysLogo: result.sysLogo,
			sysLogoFileName: '',
			sysTitle: result.sysTitle,
			sysViceTitle: result.sysViceTitle,
			sysViceDesc: result.sysViceDesc,
			sysWatermark: result.sysWatermark,
			sysCopyright: result.sysCopyright,
			sysIcp: result.sysIcp,
			sysIcpUrl: result.sysIcpUrl,
			sysSecondVer: result.sysSecondVer,
			sysCaptcha: result.sysCaptcha,
		};
	} finally {
		nextTick(() => {
			state.isLoading = false;
		});
	}
};

loadData();
</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
	width: 100px;
	height: 100px;
	display: block;
	object-fit: contain;
}

:deep(.avatar-uploader) .el-upload {
	border: 1px dashed var(--el-border-color);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader) .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	color: #8c939d;
	width: 100px;
	height: 100px;
	text-align: center;
}
</style>