Merge branch 'develoop' of http://182.92.169.222:3000/dlsx/Teaching_integration_platform_admin_template into develoop

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: '保存失败' })

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"

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',
+        },
+      },
     ],
   },
   {

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>

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>