From 6d4f53c925e70d4504bf11a7e90227a97a12975b Mon Sep 17 00:00:00 2001
From: significative <163999932+significative@users.noreply.github.com>
Date: Fri, 23 Aug 2024 19:06:17 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/configuration.ts                 | 45 ++++++++++++
 src/layout/tabbar/setting/index.vue      |  2 +-
 src/router/routers.ts                    | 34 ++++++---
 src/views/configurationPage/MyUpdate.vue | 38 ++++++++++
 src/views/configurationPage/index.vue    | 93 ++++++++++++++++++++++++
 5 files changed, 199 insertions(+), 13 deletions(-)
 create mode 100644 src/api/configuration.ts
 create mode 100644 src/views/configurationPage/MyUpdate.vue
 create mode 100644 src/views/configurationPage/index.vue

diff --git a/src/api/configuration.ts b/src/api/configuration.ts
new file mode 100644
index 0000000..bb4f5a3
--- /dev/null
+++ b/src/api/configuration.ts
@@ -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: '保存失败' })
\ No newline at end of file
diff --git a/src/layout/tabbar/setting/index.vue b/src/layout/tabbar/setting/index.vue
index 48a8784..d7412ff 100644
--- a/src/layout/tabbar/setting/index.vue
+++ b/src/layout/tabbar/setting/index.vue
@@ -11,7 +11,7 @@
   /> -->
   <el-button size="small" icon="refresh" circle @click="refresh" />
   <el-button size="small" icon="FullScreen" circle @click="fullScreen" />
-  <el-button size="small" icon="Setting" circle />
+  <el-button size="small" icon="Setting" circle  @click="$router.push('/configurationPage')"/>
   <el-button
     size="small"
     icon="Link"
diff --git a/src/router/routers.ts b/src/router/routers.ts
index 20703d8..de12d4a 100644
--- a/src/router/routers.ts
+++ b/src/router/routers.ts
@@ -36,6 +36,16 @@ export const constantRoute: any = [
           icon: 'HomeFilled',
         },
       },
+      {
+        path: '/configurationPage',
+        component: () => import('@/views/configurationPage/index.vue'),
+        name: 'configurationPage',
+        meta: {
+          title: '系统设置',
+          hidden: true,
+          icon: 'HomeFilled',
+        },
+      },
     ],
   },
   {
@@ -188,8 +198,8 @@ export const constantRoute: any = [
       },
       {
         path: '/messageManagement/sendMessage',
-        component: ()=>import('@/views/message/components/sendMessage.vue'),
-        name:'SendMessage',
+        component: () => import('@/views/message/components/sendMessage.vue'),
+        name: 'SendMessage',
         meta: {
           title: '个人发出',
           hidden: true,
@@ -198,8 +208,8 @@ export const constantRoute: any = [
       },
       {
         path: '/messageContentList',
-        component:()=>import('@/views/message/components/indexContentList.vue'),
-        name:'MessageContentList',
+        component: () => import('@/views/message/components/indexContentList.vue'),
+        name: 'MessageContentList',
         meta: {
           title: '收到信息详情',
           hidden: true,
@@ -208,8 +218,8 @@ export const constantRoute: any = [
       },
       {
         path: '/sendMessageList',
-        component:()=>import('@/views/message/components/sendMessageList.vue'),
-        name:'SendMessageList',
+        component: () => import('@/views/message/components/sendMessageList.vue'),
+        name: 'SendMessageList',
         meta: {
           title: '发送信息详情',
           hidden: true,
@@ -222,7 +232,7 @@ export const constantRoute: any = [
     path: '/messageContent',
     component: () => import('@/views/message/components/messageContent.vue'),
     name: 'MessageContent',
-    meta:{
+    meta: {
       title: '写栈内信函',
       hidden: true,
       icon: 'EditPen',
@@ -231,7 +241,7 @@ export const constantRoute: any = [
   {
     path: '/news',
     component: () => import('@/layout/index.vue'),
-    name:'NewsManagement',
+    name: 'NewsManagement',
     meta: {
       title: '资讯',
       hidden: false,
@@ -240,8 +250,8 @@ export const constantRoute: any = [
     children: [
       {
         path: '/news/newsContent',
-        component:()=>import('@/views/news/index.vue'),
-        name:'NewsContent',
+        component: () => import('@/views/news/index.vue'),
+        name: 'NewsContent',
         meta: {
           title: '资讯管理',
           hidden: false,
@@ -250,8 +260,8 @@ export const constantRoute: any = [
       },
       {
         path: '/newsDetails',
-        component:()=>import('@/views/news/components/newsContent.vue'),
-        name:'NewsDetails',
+        component: () => import('@/views/news/components/newsContent.vue'),
+        name: 'NewsDetails',
         meta: {
           title: '新闻详情',
           hidden: true,
diff --git a/src/views/configurationPage/MyUpdate.vue b/src/views/configurationPage/MyUpdate.vue
new file mode 100644
index 0000000..455f5ae
--- /dev/null
+++ b/src/views/configurationPage/MyUpdate.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/configurationPage/index.vue b/src/views/configurationPage/index.vue
new file mode 100644
index 0000000..9927af4
--- /dev/null
+++ b/src/views/configurationPage/index.vue
@@ -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>
\ No newline at end of file