上传工具后台

src/router/index.js

@@ -42,7 +42,20 @@ const routes = [
       },
     ]
   }
-
+  ,
+  {
+    path: '/opentime',
+    name: 'Opentime',
+    redirect: '/opentime/index',
+    component: layout,
+    meta: { title: '修改开服时间', icon: 'mdi-protocol' },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/opentime/Index.vue'),
+      },
+    ]
+  }
 
 ]
 

src/utils/upload.js

@@ -29,12 +29,17 @@ export function uploadformData (url, formData, progress) {
       onUploadProgress: (evt) => {
         if (evt.lengthComputable) {
           var percent = Math.round(evt.loaded * 100 / evt.total);
+          if (progress != null) {
             progress(percent)
           }
+
+        }
         else {
+          if (progress != null) {
             progress(100)
           }
         }
+      }
     }).then(response => {
       const status = response.status
       const res = response.data

src/views/opentime/Index.vue

@@ -0,0 +1,119 @@
+<template>
+  <v-container>
+    <v-card id="drop-area"
+            flat>
+      <v-card-title class="text-center">
+        开服时间设置
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text>
+        <v-row>
+          <v-col>
+            <v-text-field label="开服时间"
+                          v-model="newtime"
+                          @change="describechanage"
+                          :disabled="!canedit"
+                          variant="outlined"></v-text-field>
+          </v-col>
+          <v-col cols="2">
+            <v-switch v-model="canedit"
+                      :disabled="!loaded"
+                      label="修改"></v-switch>
+          </v-col>
+        </v-row>
+
+      </v-card-text>
+      <v-card-actions>
+        <v-row justify="center">
+          <v-col cols="5">
+            <v-btn variant="flat"
+                   color="secondary"
+                   :disabled="mytime == newtime"
+                   :loading="uploading"
+                   @click="modifyopentime"
+                   block>修改</v-btn>
+          </v-col>
+        </v-row>
+      </v-card-actions>
+    </v-card>
+    <v-snackbar v-model="snackbar"
+                :timeout="2000">
+      {{ errstr }}
+      <template v-slot:action="{ attrs }">
+        <v-btn color="blue"
+               text
+               v-bind="attrs"
+               @click="snackbar = false">
+          Close
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script>
+import { uploadformData } from '@/utils/upload'
+export default {
+  name: 'upload',
+  data() {
+    return {
+      errstr: '',
+      snackbar: false,
+      optime: '',
+      mytime: '',
+      newtime: '',
+      loaded: false,
+      canedit: false,
+      uploading: false,
+    }
+  },
+  mounted: function () {
+    this.getopentime()
+  },
+  methods: {
+    getopentime() {
+      this.loaded = false
+      let formData = new FormData()
+      uploadformData('/getopentime', formData, null)
+        .then((response) => {
+          const { data } = response
+          this.optime = data.optime
+          this.mytime = data.mytime
+          this.newtime = data.mytime
+          this.loaded = true
+          console.log('getopentime succ')
+          this.$forceUpdate()
+        })
+        .catch((err) => {
+          this.uploading = false
+          this.errstr = err.message
+          this.snackbar = true
+          console.log('getopentime err:%o', err)
+        })
+    },
+    modifyopentime() {
+      this.uploading = true
+      let formData = new FormData()
+      formData.append('opentime', this.newtime)
+      uploadformData('/modifyopentime', formData, null)
+        .then((response) => {
+          const { data } = response
+          this.mytime = data
+          this.newtime = data.mytime
+          console.log('modifyopentime succ')
+          this.uploading = false
+          this.$forceUpdate()
+        })
+        .catch((err) => {
+          this.uploading = false
+          this.errstr = err.message
+          this.snackbar = true
+          console.log('modifyopentime err:%o', err)
+        })
+    },
+  },
+}
+</script>
+
+<style>
+</style>

vue.config.js

@@ -9,8 +9,8 @@ module.exports = defineConfig({
   },
 
   devServer: {
+    port: 8848,
     open: true,
-
     proxy: {
       '/api': {
         target: 'http://127.0.0.1:8000',//要代理的本地api地址，也可以换成线上测试地址
@@ -21,6 +21,16 @@ module.exports = defineConfig({
         target: 'http://127.0.0.1:8000',//要代理的本地api地址，也可以换成线上测试地址
         changeOrigin: true,//允许跨域
         pathRewrite: { "^/upload": "/upload" }//将/api开头替换为/api
+      },
+      '/getopentime': {
+        target: 'http://127.0.0.1:8000',//要代理的本地api地址，也可以换成线上测试地址
+        changeOrigin: true,//允许跨域
+        pathRewrite: { "^/getopentime": "/getopentime" }//将/api开头替换为/api
+      },
+      '/modifyopentime': {
+        target: 'http://127.0.0.1:8000',//要代理的本地api地址，也可以换成线上测试地址
+        changeOrigin: true,//允许跨域
+        pathRewrite: { "^/modifyopentime": "/modifyopentime" }//将/api开头替换为/api
       }
     }
   },