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