提交上传GCP证书

fhKeeper/formulahousekeeper/course-pc/src/routes.js

@@ -11,6 +11,7 @@ import courselist from './views/coursemanagement/list';
 import lecturerList from './views/lecturerManagement/index.vue'
 import offlineTraining from './views/offlineTraining/offlineTraining.vue'
 import examCertification from './views/examCertification/examCertification.vue'
+import gcpCertification from './views/gcpCertification/gcpCertification.vue'
 import offlineRegistration from './views/offlineRegistration/registration.vue'
 
 Vue.use(Router)
@@ -67,7 +68,7 @@ export const allRouters = [
         iconCls: 'iconfont firerock-iconkehu',
         leaf: true,
         children: [
-            { path: '/exam-certification', component: examCertification, name: '考试拿证流程介绍' }
+            { path: '/exam-certification', component: examCertification, name: '考试拿证流程介绍' },
         ]
     },
     {
@@ -90,6 +91,16 @@ export const allRouters = [
             { path: '/offline-registration', component: offlineRegistration, name: '线下研修班报名' }
         ]
     },
+    {
+        path: '/gcpc-certification',
+        component: Home,
+        name: 'GCP证书展示',
+        iconCls: 'iconfont firerock-iconkehu',
+        leaf: true,
+        children: [
+            { path: '/gcpc-certification', component: gcpCertification, name: 'GCP证书展示' }
+        ]
+    },
     {
         path: '*',
         hidden: true,

fhKeeper/formulahousekeeper/course-pc/src/views/gcpCertification/gcpCertification.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="gcp-certification">
+    <h2 class="title">GCP证书上传</h2>
+    <div class="upload-height">
+      <div class="upload-area">
+        <div class="image-list">
+          <div v-for="(file, index) in fileList" :key="index" :class="`${!file.loading ? 'image-item-hover' : ''} image-item`">
+            <img :src="file.url" class="cert-image" @click="previewImage(index)">
+            <div class="image-actions" v-if="!file.loading">
+              <el-button type="danger" icon="el-icon-delete" circle @click.stop="removeImage(index)"></el-button>
+              <el-button type="primary" icon="el-icon-view" circle @click.stop="previewImage(index)"></el-button>
+            </div>
+            <div class="image-actions-loging" v-if="file.loading">
+              文件上传中...
+            </div>
+          </div>
+        </div>
+        <!-- 上传按钮 -->
+        <div class="imageUpload">
+          <el-upload ref="pictureCardRef" action="#" list-type="picture-card" :multiple="true"
+            :show-file-list="false" :http-request="uploadGCPImg" accept="image/*">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
+
+Vue.use(Viewer)
+
+import { post, checkAndAddUpload } from '../../api'
+export default {
+  name: 'GcpCertification',
+  data() {
+    return {
+      fileList: [],
+      imageList: [],
+      imageListTime: null,
+    }
+  },
+  methods: {
+    uploadGCPImg(file) {
+      this.imageList.unshift(file.file)
+      if (this.imageListTime) {
+        clearTimeout(this.imageListTime)
+      }
+      this.imageListTime = setTimeout(() => {
+        this.batchUploadGCPimg()
+      }, 500)
+    },
+    batchUploadGCPimg() {
+      for (let i = 0; i < this.imageList.length; i++) {
+        const formData = new FormData()
+        formData.append('coverImage', this.imageList[i])
+        this.fileList.unshift({
+          name: 'a',
+          loading: true,
+          url: '',
+          imgError: ''
+        })
+        this.http.uploadFile(`/gcp-show/uploadAndSave`, formData, res => {
+          this.fileList[i].url = checkAndAddUpload(res.data.url)
+          this.fileList[i].name = res.data.id
+          this.fileList[i].loading = false
+        }, err => {
+          this.fileList[i].loading = false
+          this.fileList[i].imgError = '图片上传失败'
+        })
+      }
+
+      setTimeout(() => {
+        this.imageList = []
+        this.$refs.pictureCardRef.clearFiles()
+      }, 1500)
+    },
+    removeImage(index) {
+      this.$confirm('此操作将永久删除该图片, 是否继续?', '删除图片', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        post(`/gcp-show/delete`, { id: this.fileList[index].name }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.fileList.splice(index, 1)
+        })
+      })
+    },
+    previewImage(index) {
+      this.$viewerApi({
+        images: this.fileList.map(f => f.url),
+        options: {
+          initialViewIndex: index,
+          toolbar: {
+            zoomIn: 1,
+            zoomOut: 1,
+            oneToOne: 1,
+            reset: 1,
+            prev: 1,
+            next: 1,
+            rotateLeft: 1,
+            rotateRight: 1,
+            flipHorizontal: 1,
+            flipVertical: 1
+          }
+        }
+      })
+    },
+    obtainCertificateList() {
+      post(`/gcp-show/list`, {}).then(res => {
+        this.fileList = res.data.map(item => {
+          return {
+            name: item.id,
+            url: checkAndAddUpload(item.url),
+            loading: false,
+            imgError: ''
+          }
+        })
+      })
+    }
+  },
+  mounted() {
+    this.obtainCertificateList()
+  }
+}
+</script>
+
+<style scoped>
+.gcp-certification {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.title {
+  text-align: center;
+  margin-bottom: 30px;
+  color: #333;
+}
+
+.upload-area {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 30px;
+}
+
+.upload-height {
+  height: 70vh;
+  overflow-y: auto;
+}
+
+.hide-upload>>>.el-upload--picture-card {
+  display: none;
+}
+
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 30px;
+  margin-right: 20px;
+}
+
+.image-item {
+  position: relative;
+  width: 148px;
+  height: 148px;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+}
+
+.image-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.image-item-hover:hover .image-actions {
+  opacity: 1;
+}
+
+.cert-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.image-actions {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, .5);
+  gap: 10px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.image-actions-loging {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, .5);
+  color: #fff;
+}
+
+.submit-area {
+  text-align: center;
+}
+</style>