significative
3 months ago
parent
0f49a0c10d
commit
6d4f53c925
5 changed files with 199 additions and 13 deletions
@ -0,0 +1,45 @@ |
||||
import request from '@/utils/request' |
||||
import { tool } from '../utils/alioss.js' |
||||
import { ElLoading, ElMessage } from 'element-plus' |
||||
|
||||
enum Api { |
||||
get系统配置 = '/api/systemSettings/save', |
||||
put系统配置 = '/api/systemSettings', |
||||
} |
||||
// 提示批量处理
|
||||
const initOptions = { text: '加载中', success: '成功', error: '失败' } |
||||
function proxRequest(request, options: any = initOptions) { |
||||
return async (...arg) => { |
||||
if (!options) return request(...arg) |
||||
|
||||
const loadingInstance = ElLoading.service({ text: options.text }) |
||||
|
||||
try { |
||||
await request(...arg) |
||||
ElMessage.success(options.success) |
||||
} catch (error) { |
||||
ElMessage.error(options.error) |
||||
} finally { |
||||
loadingInstance.close() |
||||
} |
||||
|
||||
return request |
||||
} |
||||
} |
||||
|
||||
|
||||
export function uploadApi(file: File) { |
||||
if (file instanceof Object) return tool.oss.upload(file).then(res => res.url) |
||||
else return Promise.resolve(file) |
||||
} |
||||
|
||||
|
||||
export function getSysSettingApi() { |
||||
return request.get(Api.get系统配置) |
||||
} |
||||
export const proxGetSysSettingApi = proxRequest(getSysSettingApi) |
||||
|
||||
export function putSysSettingApi(params: any) { |
||||
return request.put(Api.put系统配置, params) |
||||
} |
||||
export const proxPutSysSettingApi = proxRequest(putSysSettingApi, { success: '保存成功', error: '保存失败' }) |
||||
@ -0,0 +1,38 @@ |
||||
<template> |
||||
<el-upload ref="upload" class="upload-demo" action="#" :on-change="change" v-model:file-list="fileList" :limit="1" |
||||
:auto-upload="false" list-type="picture-card"> |
||||
<el-icon> |
||||
<Plus /> |
||||
</el-icon> |
||||
<template #file="{ file }"> |
||||
<div> |
||||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" /> |
||||
<span class="el-upload-list__item-actions"> |
||||
<span class="el-upload-list__item-delete" @click="handleRemove"> |
||||
<el-icon> |
||||
<Delete /> |
||||
</el-icon> |
||||
</span> |
||||
</span> |
||||
</div> |
||||
</template> |
||||
</el-upload> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref } from 'vue' |
||||
import type { UploadUserFile } from 'element-plus' |
||||
import { Delete, Plus } from '@element-plus/icons-vue' |
||||
const props = defineProps(['modelValue']) |
||||
const emit = defineEmits(['update:modelValue']) |
||||
|
||||
const fileList = ref<UploadUserFile[]>(props.modelValue ? [{ url: props.modelValue }] : []) |
||||
const handleRemove = () => { |
||||
fileList.value.length = 0 |
||||
change({ raw: false }) |
||||
} |
||||
|
||||
function change(file: any) { |
||||
emit('update:modelValue', file.raw) |
||||
} |
||||
</script> |
||||
@ -0,0 +1,93 @@ |
||||
<template> |
||||
<div class="configuration-page"> |
||||
<el-form :model="form" label-width="auto" style="max-width: 600px"> |
||||
<el-form-item label="LOGO"> |
||||
<my-update v-if="ran" v-model="form.logo"></my-update> |
||||
</el-form-item> |
||||
<el-form-item label="项目名称"> |
||||
<el-input v-model="form.name" /> |
||||
</el-form-item> |
||||
<p>门户宣传图配置</p> |
||||
<el-form-item label="门户头部宣传大图"> |
||||
<my-update v-if="ran" v-model="form.promotionalImages"></my-update> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="门户首页"> |
||||
等待一个字段 |
||||
<el-input v-model="form.qqNumber" /> |
||||
</el-form-item> --> |
||||
<el-form-item label="后台登陆首页地址"> |
||||
<el-input v-model="form.loginAddress" /> |
||||
</el-form-item> |
||||
<el-form-item label="系统标题"> |
||||
<el-input v-model="form.title" /> |
||||
</el-form-item> |
||||
<el-form-item label="版权信息"> |
||||
<el-input v-model="form.copyrightInformation" /> |
||||
</el-form-item> |
||||
<el-form-item label="备案号"> |
||||
<el-input v-model="form.recordNumber" /> |
||||
</el-form-item> |
||||
<el-form-item label="qq"> |
||||
<el-input v-model="form.qqNumber" /> |
||||
</el-form-item> |
||||
<el-form-item label="邮箱"> |
||||
<el-input v-model="form.mailbox" /> |
||||
</el-form-item> |
||||
<el-form-item label="电话"> |
||||
<el-input v-model="form.phone" /> |
||||
</el-form-item> |
||||
<el-form-item label="联系地址"> |
||||
<el-input v-model="form.address" /> |
||||
</el-form-item> |
||||
<el-form-item label="二维码"> |
||||
<my-update v-if="ran" v-model="form.qrCode"></my-update> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="onSubmit">保存</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { getSysSettingApi, proxPutSysSettingApi, uploadApi } from '@/api/configuration'; |
||||
import { ref, reactive } from 'vue' |
||||
import MyUpdate from './MyUpdate.vue'; |
||||
import useUserStore from '@/store/modules/user'; |
||||
const userStore = useUserStore() |
||||
|
||||
// do not use same name with ref |
||||
const form = reactive({ |
||||
address: '', |
||||
copyrightInformation: '', |
||||
id: userStore.data.id, |
||||
loginAddress: '', |
||||
logo: '', |
||||
name: '', |
||||
phone: '', |
||||
promotionalImages: '', |
||||
qqNumber: '', |
||||
qrCode: '', |
||||
recordNumber: '', |
||||
title: '', |
||||
mailbox: '' |
||||
}) |
||||
|
||||
const ran = ref(false) |
||||
getSysSettingApi().then((res) => { |
||||
Object.assign(form, res.data) |
||||
ran.value = true |
||||
}) |
||||
const onSubmit = async () => { |
||||
form.logo = await uploadApi(form.logo) |
||||
form.promotionalImages = await uploadApi(form.promotionalImages) |
||||
form.qrCode = await uploadApi(form.qrCode) |
||||
await proxPutSysSettingApi(form) |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.configuration-page { |
||||
width: 600px; |
||||
margin: auto; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue