update system settings

src/components/setting/system/AppearanceSettings.vue

@@ -1,6 +1,11 @@
 <template>
 
-  <div class="main" style="text-shadow: 0 0 20px var(--font-border);">
+  <div class="main" style="text-shadow: 0 0 20px var(--font-border);"
+       v-loading="loading"
+       element-loading-text="拼命加载中"
+       element-loading-spinner="el-icon-loading"
+       element-loading-background="var(--theme-bg-color)"
+  >
     <div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
       <div class="HeadSquare"></div>
       <div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-open"></i>基础样式</div>
@@ -9,21 +14,21 @@
       <div class="base-style-content" >
         <div class="min-content">
           <span class="min-title">Logo(浅色模式)</span>
-          <UploadComponent style="margin-top: 10px;z-index:998"></UploadComponent>
+          <UploadComponent  :config-name="light_logo" style="margin-top: 10px;"></UploadComponent>
         </div>
         <div class="min-content" style="margin-left: 50px">
           <span class="min-title">Logo(深色模式)</span>
-          <UploadComponent style="margin-top: 10px;z-index:998"></UploadComponent>
+          <UploadComponent  :config-name="dark_logo" style="margin-top: 10px;"></UploadComponent>
         </div>
         <div class="min-content" style="margin-left: 50px">
           <span class="min-title">Favicon</span>
-          <UploadComponent style="margin-top: 10px;z-index:998"></UploadComponent>
+          <UploadComponent style="margin-top: 10px;" :config-name="favicon"></UploadComponent>
         </div>
       </div>
-      <div class="color-select">
-        <span class="theme-color-select">主题色：</span>
-        <el-color-picker v-model="color" style="margin-top:10px"></el-color-picker>
-      </div>
+<!--      <div class="color-select">-->
+<!--        <span class="theme-color-select">主题色：</span>-->
+<!--        <el-color-picker v-model="color" style="margin-top:10px"></el-color-picker>-->
+<!--      </div>-->
     </div>
     <div class="background-img" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;display: flex;flex-direction: column">
       <div class="HeadLine" style="margin-top:15px;margin-left:-5px;">
@@ -34,14 +39,16 @@
       <div style="display: flex;flex-direction: column;margin-top:20px">
         <span class="min-title">浅色模式</span>
         <div class="img-card">
-          <UploadComponent style="margin-left: 20px;z-index:998"></UploadComponent>
+          <UploadComponent style="margin-left: 20px;" :config-name="light_bg_file"></UploadComponent>
           <div class="img-url">
             <span class="min-title"><i class="el-icon-link"></i>图片链接</span>
             <el-input
-                placeholder="请输入内容"
-                v-model="input"
+                placeholder="请输入链接"
+                v-model="dark_bg"
                 clearable
-                style="margin-top:10px;">
+                style="margin-top:10px;width: 420px"
+                @change="setConfig('dark_bg',dark_bg,'String')"
+            >
             </el-input>
             <span class="min-title" style="margin-top:20px">支持随机图链接</span>
           </div>
@@ -51,13 +58,15 @@
       <div style="display: flex;flex-direction: column;margin-top:20px">
         <span class="min-title">深色模式</span>
         <div class="img-card">
-          <UploadComponent style="margin-left: 20px;z-index:998"></UploadComponent>
+          <UploadComponent style="margin-left: 20px" :config-name="dark_bg_file"></UploadComponent>
           <div class="img-url">
             <span class="min-title"><i class="el-icon-link"></i>图片链接</span>
             <el-input
-                placeholder="请输入内容"
-                v-model="input"
-                clearable style="margin-top:10px;">
+                placeholder="请输入链接"
+                v-model="light_bg"
+                clearable style="margin-top:10px;width: 420px"
+                @change="setConfig('dark_bg',light_bg,'String')"
+                >
             </el-input>
             <span class="min-title" style="margin-top:20px">支持随机图链接</span>
           </div>
@@ -76,18 +85,9 @@
               v-model="value"
               active-color="#13ce66"
               inactive-color="#ff4949"
-              active-value="100"
-              inactive-value="0" >
-          </el-switch>
-        </div>
-        <div style="margin-top:20px">
-          <span class="min-title" style="margin-top:20px">默认深色：</span>
-          <el-switch
-              v-model="value"
-              active-color="#13ce66"
-              inactive-color="#ff4949"
-              active-value="100"
-              inactive-value="0" >
+              active-value="1"
+              inactive-value="0"
+              @change="setConfig('open_dark_light',value,'String')">
           </el-switch>
         </div>
         <div style="width:100%;height:50px"></div>
@@ -99,27 +99,135 @@
 
 
 import UploadComponent from "@/components/setting/system/Upload.vue";
+import axios from "axios";
+import Vue from "vue";
 
 export default {
   name:"AppearanceSettings",
   components: {UploadComponent},
   data() {
     return {
-      color:'#409EFF',
-      input: '',
-      value:'',
+      // color:'#409EFF',
+      dark_bg:null,
+      light_bg:null,
+      value:null,
+      favicon:"favicon",
+      dark_logo:'dark_logo',
+      light_logo:'light_logo',
+      dark_bg_file:'dark_bg_file',
+      light_bg_file:'light_bg_file',
+      loading:true,
     }},
   mounted() {
 
   },
   created() {
-
+    this.getConfig('open_dark_light');
+    this.getConfig('dark_bg');
+    this.getConfig('light_bg');
   },
   computed: {
 
   },
   methods: {
 
+
+      setConfig(name,value,type){
+        let _this = this;
+        if (localStorage.getItem('userId')&&localStorage.getItem('Authorization')) {
+          if(value!==''){
+            axios({
+              method: 'post',
+              url: '/api//updateConfig',
+              params: {
+                name:name,
+                value:value,
+                type:type,
+              },
+            }).then(function (res) {
+              if(res.data!== "更新成功!"){
+                Vue.prototype.$notify.error({
+                  title: '错误',
+                  message: "更新失败！",
+                  offset: 0
+                });
+              }else {
+                Vue.prototype.$notify({
+                  title: '成功',
+                  message: ('i', {style: 'color: teal'}, "更新成功！"),
+                  type: 'success',
+                  offset: 0
+                });
+              }
+
+            }).catch((error) => {
+              Vue.prototype.$notify.error({
+                title: '错误',
+                message: error,
+                offset: 0
+              });
+            })
+          }else {
+            Vue.prototype.$notify.error({
+              title: '错误',
+              message: "不能为空",
+              offset: 0
+            });
+          }
+
+
+        } else {
+          Vue.prototype.$notify.error({
+            title: '错误',
+            message: '登录状态失效，请重新登录！',
+            offset: 0
+          });
+        }
+      },
+      getConfig(name){
+      let _this=this;
+      if(localStorage.getItem('userRole') === '0' && localStorage.getItem('Authorization')){
+        if(name){
+          axios({
+            method: 'get',
+            url: '/api/getConfig',
+            params:{
+              name:name
+            }
+          }).then(function (res) {
+            if(res){
+              if(res.data.open_dark_light){
+                _this.value=res.data.open_dark_light.value;
+              }
+              if(res.data.dark_bg){
+                _this.dark_bg=res.data.dark_bg.value;
+              }
+              if(res.data.light_bg){
+                _this.light_bg=res.data.light_bg.value;
+              }
+              _this.loading=false;
+            }
+
+          }).catch((error) => {
+            Vue.prototype.$notify.error({
+              title: '错误',
+              message: error,
+              offset: 0
+            });
+          })
+        }else{
+          return false
+        }
+
+      }else{
+        Vue.prototype.$notify.error({
+          title: '错误',
+          message: "权限不够！",
+          offset: 0
+        });
+      }
+
+    },
   }
 }
 </script>