ylrz_saas_his_scrm_adminUI/src/views/admin/ossConfig/index.vue

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never">
      <div slot="header">
        <span>OSS云存储配置</span>
      </div>
      <el-form ref="form" :model="form" label-width="200px">
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">七牛云</el-radio>
            <el-radio :label="2">阿里云</el-radio>
            <el-radio :label="3">腾讯云</el-radio>
            <el-radio :label="4">华为云</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 七牛云 -->
        <template v-if="form.type === 1">
          <el-card shadow="never" class="section-card">
            <div slot="header"><span>七牛云配置</span></div>
            <el-form-item label="七牛绑定的域名" prop="qiniuDomain">
              <el-input v-model="form.qiniuDomain" placeholder="请输入七牛绑定的域名"></el-input>
            </el-form-item>
            <el-form-item label="七牛路径前缀" prop="qiniuPrefix">
              <el-input v-model="form.qiniuPrefix" placeholder="请输入七牛路径前缀"></el-input>
            </el-form-item>
            <el-form-item label="七牛ACCESS_KEY" prop="qiniuAccessKey">
              <el-input v-model="form.qiniuAccessKey" placeholder="请输入七牛ACCESS_KEY"></el-input>
            </el-form-item>
            <el-form-item label="七牛SecretKey" prop="qiniuSecretKey">
              <el-input v-model="form.qiniuSecretKey" placeholder="请输入七牛SecretKey"></el-input>
            </el-form-item>
            <el-form-item label="七牛空间名" prop="qiniuBucketName">
              <el-input v-model="form.qiniuBucketName" placeholder="请输入七牛空间名"></el-input>
            </el-form-item>
          </el-card>
        </template>

        <!-- 阿里云 -->
        <template v-if="form.type === 2">
          <el-card shadow="never" class="section-card">
            <div slot="header"><span>阿里云配置</span></div>
            <el-form-item label="阿里云绑定的域名" prop="aliyunDomain">
              <el-input v-model="form.aliyunDomain" placeholder="请输入阿里云绑定的域名"></el-input>
            </el-form-item>
            <el-form-item label="阿里云路径前缀" prop="aliyunPrefix">
              <el-input v-model="form.aliyunPrefix" placeholder="请输入阿里云路径前缀"></el-input>
            </el-form-item>
            <el-form-item label="阿里云EndPoint" prop="aliyunEndPoint">
              <el-input v-model="form.aliyunEndPoint" placeholder="请输入阿里云EndPoint"></el-input>
            </el-form-item>
            <el-form-item label="阿里云AccessKeyId" prop="aliyunAccessKeyId">
              <el-input v-model="form.aliyunAccessKeyId" placeholder="请输入阿里云AccessKeyId"></el-input>
            </el-form-item>
            <el-form-item label="阿里云AccessKeySecret" prop="aliyunAccessKeySecret">
              <el-input v-model="form.aliyunAccessKeySecret" placeholder="请输入阿里云AccessKeySecret"></el-input>
            </el-form-item>
            <el-form-item label="阿里云BucketName" prop="aliyunBucketName">
              <el-input v-model="form.aliyunBucketName" placeholder="请输入阿里云BucketName"></el-input>
            </el-form-item>
          </el-card>
        </template>

        <!-- 腾讯云 -->
        <template v-if="form.type === 3">
          <el-card shadow="never" class="section-card">
            <div slot="header"><span>腾讯云配置</span></div>
            <el-form-item label="腾讯云绑定的域名" prop="qcloudDomain">
              <el-input v-model="form.qcloudDomain" placeholder="请输入腾讯云绑定的域名"></el-input>
            </el-form-item>
            <el-form-item label="腾讯云前缀" prop="qcloudPrefix">
              <el-input v-model="form.qcloudPrefix" placeholder="请输入腾讯云前缀"></el-input>
            </el-form-item>
            <el-form-item label="腾讯云SecretId" prop="qcloudSecretId">
              <el-input v-model="form.qcloudSecretId" placeholder="请输入腾讯云SecretId"></el-input>
            </el-form-item>
            <el-form-item label="腾讯云SecretKey" prop="qcloudSecretKey">
              <el-input v-model="form.qcloudSecretKey" placeholder="请输入腾讯云SecretKey"></el-input>
            </el-form-item>
            <el-form-item label="腾讯云BucketName" prop="qcloudBucketName">
              <el-input v-model="form.qcloudBucketName" placeholder="请输入腾讯云BucketName"></el-input>
            </el-form-item>
            <el-form-item label="所属地区" prop="qcloudRegion">
              <el-input v-model="form.qcloudRegion" placeholder="请输入所属地区"></el-input>
            </el-form-item>
          </el-card>
        </template>

        <!-- 华为云 -->
        <template v-if="form.type === 4">
          <el-card shadow="never" class="section-card">
            <div slot="header"><span>华为云配置</span></div>
            <el-form-item label="华为云绑定的域名" prop="huaweiDomain">
              <el-input v-model="form.huaweiDomain" placeholder="请输入华为云绑定的域名"></el-input>
            </el-form-item>
            <el-form-item label="华为云Endpoint" prop="huaweiEndpoint">
              <el-input v-model="form.huaweiEndpoint" placeholder="请输入华为云Endpoint"></el-input>
            </el-form-item>
            <el-form-item label="华为云AK" prop="huaweiAK">
              <el-input v-model="form.huaweiAK" placeholder="请输入华为云AK"></el-input>
            </el-form-item>
            <el-form-item label="华为云SK" prop="huaweiSK">
              <el-input v-model="form.huaweiSK" placeholder="请输入华为云SK"></el-input>
            </el-form-item>
            <el-form-item label="华为云BucketName" prop="huaweiBucketName">
              <el-input v-model="form.huaweiBucketName" placeholder="请输入华为云BucketName"></el-input>
            </el-form-item>
          </el-card>
        </template>

        <div class="footer">
          <el-button type="primary" :loading="submitLoading" @click="submitForm">提 交</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getConfigByKey, updateConfigByKey } from '@/api/system/config'

export default {
  name: 'AdminOssConfig',
  data() {
    return {
      loading: false,
      submitLoading: false,
      configId: null,
      configKey: 'sys.oss.cloudStorage',
      form: {
        type: 1,
        // 七牛云
        qiniuDomain: '',
        qiniuPrefix: '',
        qiniuAccessKey: '',
        qiniuSecretKey: '',
        qiniuBucketName: '',
        // 阿里云
        aliyunDomain: '',
        aliyunPrefix: '',
        aliyunEndPoint: '',
        aliyunAccessKeyId: '',
        aliyunAccessKeySecret: '',
        aliyunBucketName: '',
        // 腾讯云
        qcloudDomain: '',
        qcloudPrefix: '',
        qcloudSecretId: '',
        qcloudSecretKey: '',
        qcloudBucketName: '',
        qcloudRegion: '',
        // 华为云
        huaweiDomain: '',
        huaweiEndpoint: '',
        huaweiAK: '',
        huaweiSK: '',
        huaweiBucketName: ''
      }
    }
  },
  created() {
    this.loadConfig()
  },
  methods: {
    loadConfig() {
      this.loading = true
      getConfigByKey(this.configKey).then(response => {
        const configValue = response && response.data ? response.data.configValue : null
        if (response.data) {
          this.configId = response.data.configId
        } else {
          this.configId = null
        }
        // 安全解析
        if (configValue !== null && configValue !== undefined && configValue !== '' && configValue !== 'null') {
          try {
            const parsed = JSON.parse(configValue)
            if (parsed !== null && parsed !== undefined) {
              this.form = { ...this.form, ...parsed }
            }
          } catch (e) {
            // 使用默认值
          }
        }
      }).finally(() => {
        this.loading = false
      })
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.submitLoading = true
          const param = {
            configId: this.configId,
            configValue: JSON.stringify(this.form)
          }
          updateConfigByKey(param).then(response => {
            if (response.code === 200) {
              this.msgSuccess('修改成功')
            }
          }).finally(() => {
            this.submitLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.section-card {
  margin-bottom: 20px;
}
.footer {
  width: 100%;
  display: flex;
  margin-top: 30px;
  align-items: flex-end;
  justify-content: flex-end;
}
</style>