更新

src/views/system/update/components/logDetails.vue

@@ -0,0 +1,79 @@
+<template>
+  <m-card class="fullBox" :bodyStyle="{
+    height: '100%',
+    'box-sizing': 'border-box'
+    }">
+    <div class="fullBox content">
+      <div class="d-flex box-content-header">
+        执行日志版本 [ 2411141542 ]
+        <div>
+          <m-button type="primary" size="small">下载</m-button>
+          <m-button type="danger" size="small">解锁运行状态</m-button>
+        </div>
+      </div>
+      <el-divider ></el-divider>
+      <div class="box-content-body">
+        <div class="box px-3 my-3" ref="box">
+        <div v-for="item in logItems" :key="item.id" class="d-flex mb-2">
+          <div class="box-title">{{ item.createDate }}</div>
+          <div class="box-content">{{ item.content }}</div>
+        </div>
+        <div class="d-flex justify-center py-3" v-if="loading">
+          <v-progress-circular
+            indeterminate
+            color="primary"
+          ></v-progress-circular>
+        </div>
+      </div>
+      </div>
+    </div>
+  </m-card>
+</template>
+
+<script>
+export default {
+  name: 'log-details',
+  props: {
+    title: {
+      type: String,
+      default: '日志'
+    },
+    code: {
+      type: String,
+      default: ''
+    },
+    isUpdate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box-content {
+  &-header {
+      justify-content: space-between;
+      align-items: center;
+    }
+    &-body {
+      height: 0;
+      flex: 1;
+      overflow: auto;
+    }
+}
+.d-flex {
+  display: flex;
+}
+.fullBox {
+  width: 100%;
+  height: 100%;
+  &.content {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>

src/views/system/update/index.vue

@@ -9,11 +9,12 @@
       text-color="#fff"
       active-text-color="#ffd04b"
     >
+      <el-menu-item index="/">薪酬通</el-menu-item>
       <el-menu-item index="/update/system">系统更新</el-menu-item>
       <el-menu-item index="/update/history">历史更新</el-menu-item>
       <el-menu-item index="/update/monitor">程序监控</el-menu-item>
     </el-menu>
-    <div>
+    <div class="app-container">
       <router-view  />
     </div>
   </div>
@@ -31,5 +32,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.app-container {
+  height: calc(100vh - 61px);
+}
 </style>

src/views/system/update/system/index.vue

@@ -1,15 +1,112 @@
 <template>
-  <div>
-
+  <div class="box">
+    <div class="box-content flex">
+      <div>
+        <div class="font-title">当前版本 {{ versionNo || '版本号丢失' }}</div>
+      </div>
+      <el-upload
+        drag
+        action="#"
+        :limit="1"
+        accept=".zip, .7z, .bin"
+        :on-exceed="onExceed"
+        :http-request="onImport"
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">请上传.zip、.7z、.bin等文件格式的更新包</div>
+      </el-upload>
+      <div class="pa-3">
+        <m-button type="primary" size="small" :disabled="!file" icon="el-icon-s-promotion" @click="onUpdate" :loading="loading">执行且更新</m-button>
+      </div>
+    </div>
+    <div class="box-content">
+      <LogDetails></LogDetails>
+    </div>
   </div>
 </template>
 
 <script>
+import {
+  uploadVersionPackage,
+  versionLogHistory
+} from '@/api/system'
+import LogDetails from '../components/logDetails'
 export default {
-  name: 'update-system'
+  name: 'update-system',
+  components: {
+    LogDetails
+  },
+  data () {
+    return {
+      loading: false,
+      file: null,
+      versionNo: null
+    }
+  },
+  created () {
+    this.getNowVersion()
+  },
+  methods: {
+    // 最新版本
+    async getNowVersion (i) {
+      try {
+        const { data } = await versionLogHistory({ size: 1, current: 1 })
+        if (!data.records.length) return
+        this.versionNo = data.records[0].versionNo
+      } catch (error) {
+        this.$message.error(error)
+      }
+    },
+    onUpdate () {
+      this.$confirm('是否确定执行该更新包？', '系统提示').then(async () => {
+        const formData = new FormData()
+        formData.append('package', this.file)
+        formData.append('run', true)
+        this.loading = true
+        this.versionNo = null
+        try {
+          const { data } = await uploadVersionPackage(formData)
+          this.$message.success('上传成功！')
+          this.versionNo = data.versionNo
+        } catch (error) {
+          this.$message.error(error)
+        } finally {
+          this.loading = false
+        }
+      })
+    },
+    onImport (response) {
+      this.file = response.file
+    },
+    onExceed () {
+      this.$message.error('只能上传一个文件')
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  &-content {
+    &.flex {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    width: 50%;
+    height: 100%;
+  }
+}
+.font-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #666;
+  padding: 30px 0;
+}
 
 </style>