test: 新增oss管理

src/api/oss.js

@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+export default {
+  /**
+   * 获取OSS平台列表
+   */
+  getPlatformList: function(params) {
+    return request({
+      url: '/oss/getPlatformList',
+      method: 'get',
+      params
+    })
+  },
+  /**
+   * 判断目录是否存在
+   */
+  existFolderName: function(params) {
+    return request({
+      url: '/oss/existFolderName',
+      method: 'get',
+      params
+    })
+  },
+  /**
+   * 新增/修改OSS配置
+   */
+  putOssConfig: function(data) {
+    return request({
+      url: '/oss/putOssConfig',
+      method: 'put',
+      data
+    })
+  },
+}

src/views/setting/ossManager.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header">
+        <div class="box-card-header">
+          <div class="clearfix card-header-back">
+            <span>OSS管理</span>
+            <el-button class="card-button" size="mini" type="primary" @click="addOSS">新增</el-button>
+          </div>
+        </div>
+      </div>
+
+    </el-card>
+
+    <el-dialog class="set-oss-dialog" title="添加OSS" :visible.sync="showDialog" :close-on-click-modal="false">
+      <el-form :rules="rules" ref="form" :model="formData" label-width="120px" size="small">
+        <el-form-item label="Platform" prop="platform">
+          <el-select v-model="formData.platform" placeholder="选择平台">
+            <el-option
+              v-for="item in platforms"
+              :key="item.key"
+              :label="item.value"
+              :value="item.key"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Endpoint" prop="endpoint">
+          <el-input v-model="formData.endpoint"></el-input>
+        </el-form-item>
+        <el-form-item label="Access Key" prop="accessKey">
+          <el-input type="password" v-model="formData.accessKey"></el-input>
+        </el-form-item>
+        <el-form-item label="Secret Key" prop="secretKey">
+          <el-input type="password" v-model="formData.secretKey"></el-input>
+        </el-form-item>
+        <el-form-item label="Region" prop="region">
+          <el-input v-model="formData.region"></el-input>
+        </el-form-item>
+        <el-form-item label="Bucket" prop="bucket">
+          <el-input v-model="formData.bucket"></el-input>
+        </el-form-item>
+        <el-form-item label="目录名称" prop="folderName">
+          <el-input v-model="formData.folderName"></el-input>
+          <div class="form-item-desc">将在根目录下创建此目录，相当于把oss挂载到了此目录</div>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="showDialog = false">取消</el-button>
+        <el-button size="small" type="primary" @click="submitForm">确定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import ossApi from "@/api/oss"
+
+export default {
+  data() {
+    const validateFolderName = async (rule, value, callback) => {
+      await this.existFolderName(value)
+      if (value === '') {
+        callback(new Error('请输入目录名'));
+      } else if (/[\[\]\/\\"<>\?\*]/gi.test(value)) {
+        callback(new Error('目录名不能包含以下字符:<,>,|,*,?,,/,[,]'));
+      } else if (this.existFolder) {
+        callback(new Error('该目录已存在'));
+      } else {
+        callback()
+      }
+    }
+    return {
+      showDialog: false,
+      formData: {
+        endpoint: "",
+        accessKey: "",
+        secretKey: "",
+        region: "",
+        bucket: "",
+        folderName: "",
+        platform: "",
+      },
+      platforms: [],
+      existFolder: false,
+      rules: {
+        platform: [
+          {required: true, message: '请选择平台', trigger: 'change'}
+        ],
+        endpoint: [
+          {required: true, message: '请填写Endpoint', trigger: 'blur'}
+        ],
+        accessKey: [
+          {required: true, message: '请填写accessKey', trigger: 'blur'}
+        ],
+        secretKey: [
+          {required: true, message: '请填写secretKey', trigger: 'blur'}
+        ],
+        region: [
+          {required: true, message: '请填写region', trigger: 'blur'}
+        ],
+        bucket: [
+          {required: true, message: '请填写bucket', trigger: 'blur'}
+        ],
+        folderName: [
+          {required: true, validator: validateFolderName, trigger: 'submit'}
+        ],
+      }
+    }
+  },
+  mounted() {
+  },
+  destroyed() {
+  },
+  methods: {
+    async existFolderName(folderName) {
+      this.existFolder = false
+      await ossApi.existFolderName({username: this.$store.getters.name, folderName: folderName}).then((res) => {
+        this.existFolder = res.data
+      })
+    },
+    submitForm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.putOssConfig()
+        } else {
+          return false;
+        }
+      });
+    },
+    putOssConfig() {
+      this.formData.userId = this.$store.getters.userId
+      ossApi.putOssConfig(this.formData).then(() => {
+        this.$message.success("添加成功！")
+        this.showDialog = false;
+      })
+    },
+    addOSS() {
+      ossApi.getPlatformList().then((res) => {
+        this.platforms = res.data
+      })
+      this.showDialog = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "src/styles/setting";
+
+> > > .set-oss-dialog {
+  .el-dialog {
+    max-width: 500px;
+  }
+
+  .el-select {
+    width: 100%;
+  }
+
+  .form-item-desc {
+    color: #9f9f9f;
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 2px;
+  }
+}
+</style>