201 lines
9.2 KiB
Vue
201 lines
9.2 KiB
Vue
<template>
|
|
<el-dialog v-model="visible" title="云存储配置" :close-on-click-modal="false" :close-on-press-escape="false">
|
|
<el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="140px">
|
|
<el-form-item label="类型">
|
|
<el-radio-group v-model="dataForm.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="dataForm.type === 1">
|
|
<el-form-item prop="qiniuDomain" label="域名">
|
|
<el-input v-model="dataForm.qiniuDomain" placeholder="七牛绑定的域名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="qiniuPrefix" label="路径前缀">
|
|
<el-input v-model="dataForm.qiniuPrefix" placeholder="不设置默认为空"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="qiniuAccessKey" label="AccessKey">
|
|
<el-input v-model="dataForm.qiniuAccessKey" placeholder="七牛AccessKey"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="qiniuSecretKey" label="SecretKey">
|
|
<el-input v-model="dataForm.qiniuSecretKey" placeholder="七牛SecretKey"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="qiniuBucketName" label="空间名">
|
|
<el-input v-model="dataForm.qiniuBucketName" placeholder="七牛存储空间名"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else-if="dataForm.type === 2">
|
|
<el-form-item prop="aliyunDomain" label="域名">
|
|
<el-input v-model="dataForm.aliyunDomain" placeholder="阿里云绑定的域名，如：http://cdn.renren.io"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="aliyunPrefix" label="路径前缀">
|
|
<el-input v-model="dataForm.aliyunPrefix" placeholder="不设置默认为空"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="aliyunEndPoint" label="EndPoint">
|
|
<el-input v-model="dataForm.aliyunEndPoint" placeholder="阿里云EndPoint"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="aliyunAccessKeyId" label="AccessKeyId">
|
|
<el-input v-model="dataForm.aliyunAccessKeyId" placeholder="阿里云AccessKeyId"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="aliyunAccessKeySecret" label="AccessKeySecret">
|
|
<el-input v-model="dataForm.aliyunAccessKeySecret" placeholder="阿里云AccessKeySecret"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="aliyunBucketName" label="BucketName">
|
|
<el-input v-model="dataForm.aliyunBucketName" placeholder="阿里云BucketName"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else-if="dataForm.type === 3">
|
|
<el-form-item prop="qcloudDomain" label="域名">
|
|
<el-input v-model="dataForm.qcloudDomain" placeholder="腾讯云绑定的域名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="qcloudPrefix" label="路径前缀">
|
|
<el-input v-model="dataForm.qcloudPrefix" placeholder="不设置默认为空"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="qcloudAppId" label="AppId">
|
|
<el-input v-model="dataForm.qcloudAppId" placeholder="腾讯云AppId"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="qcloudSecretId" label="SecretId">
|
|
<el-input v-model="dataForm.qcloudSecretId" placeholder="腾讯云SecretId"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="qcloudSecretKey" label="SecretKey">
|
|
<el-input v-model="dataForm.qcloudSecretKey" placeholder="腾讯云SecretKey"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="qcloudBucketName" label="BucketName">
|
|
<el-input v-model="dataForm.qcloudBucketName" placeholder="腾讯云BucketName"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="qcloudRegion" label="所属地区">
|
|
<el-select v-model="dataForm.qcloudRegion" clearable placeholder="请选择" class="w-percent-100">
|
|
<el-option value="ap-beijing-1" label="北京一区（华北）"></el-option>
|
|
<el-option value="ap-beijing" label="北京"></el-option>
|
|
<el-option value="ap-shanghai" label="上海（华东）"></el-option>
|
|
<el-option value="ap-guangzhou" label="广州（华南）"></el-option>
|
|
<el-option value="ap-chengdu" label="成都（西南）"></el-option>
|
|
<el-option value="ap-chongqing" label="重庆"></el-option>
|
|
<el-option value="ap-singapore" label="新加坡"></el-option>
|
|
<el-option value="ap-hongkong" label="香港"></el-option>
|
|
<el-option value="na-toronto" label="多伦多"></el-option>
|
|
<el-option value="eu-frankfurt" label="法兰克福"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else-if="dataForm.type === 4">
|
|
<el-form-item prop="aliyunDomain" label="域名">
|
|
<el-input v-model="dataForm.aliyunDomain" placeholder="阿里云绑定的域名，如：http://cdn.renren.io"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="aliyunPrefix" label="路径前缀">
|
|
<el-input v-model="dataForm.aliyunPrefix" placeholder="不设置默认为空"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="aliyunEndPoint" label="EndPoint">
|
|
<el-input v-model="dataForm.aliyunEndPoint" placeholder="阿里云EndPoint"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="aliyunAccessKeyId" label="AccessKeyId">
|
|
<el-input v-model="dataForm.aliyunAccessKeyId" placeholder="阿里云AccessKeyId"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="aliyunAccessKeySecret" label="AccessKeySecret">
|
|
<el-input v-model="dataForm.aliyunAccessKeySecret" placeholder="阿里云AccessKeySecret"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="aliyunBucketName" label="BucketName">
|
|
<el-input v-model="dataForm.aliyunBucketName" placeholder="阿里云BucketName"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
</el-form>
|
|
<template v-slot:footer>
|
|
<el-button @click="visible = false">取消</el-button>
|
|
<el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from "vue";
|
|
import baseService from "@/service/baseService";
|
|
import { ElMessage } from "element-plus";
|
|
const emit = defineEmits(["refreshDataList"]);
|
|
|
|
const visible = ref(false);
|
|
const dataFormRef = ref();
|
|
|
|
const dataForm = reactive({
|
|
type: 0,
|
|
qiniuDomain: "",
|
|
qiniuPrefix: "",
|
|
qiniuAccessKey: "",
|
|
qiniuSecretKey: "",
|
|
qiniuBucketName: "",
|
|
aliyunDomain: "",
|
|
aliyunPrefix: "",
|
|
aliyunEndPoint: "",
|
|
aliyunAccessKeyId: "",
|
|
aliyunAccessKeySecret: "",
|
|
aliyunBucketName: "",
|
|
qcloudDomain: "",
|
|
qcloudPrefix: "",
|
|
qcloudAppId: 0,
|
|
qcloudSecretId: "",
|
|
qcloudSecretKey: "",
|
|
qcloudBucketName: "",
|
|
qcloudRegion: ""
|
|
});
|
|
|
|
const rules = ref({
|
|
qiniuDomain: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
qiniuAccessKey: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
qiniuSecretKey: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
qiniuBucketName: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
aliyunDomain: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
aliyunEndPoint: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
aliyunAccessKeyId: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
aliyunAccessKeySecret: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
aliyunBucketName: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
qcloudDomain: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
qcloudAppId: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
qcloudSecretId: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
qcloudSecretKey: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
qcloudBucketName: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
|
|
qcloudRegion: [{ required: true, message: "必填项不能为空", trigger: "blur" }]
|
|
});
|
|
|
|
const init = () => {
|
|
visible.value = true;
|
|
|
|
// 重置表单数据
|
|
if (dataFormRef.value) {
|
|
dataFormRef.value.resetFields();
|
|
}
|
|
|
|
getInfo();
|
|
};
|
|
|
|
// 获取信息
|
|
const getInfo = () => {
|
|
baseService.get("/sys/oss/info").then((res) => {
|
|
Object.assign(dataForm, res.data);
|
|
});
|
|
};
|
|
|
|
// 表单提交
|
|
const dataFormSubmitHandle = () => {
|
|
dataFormRef.value.validate((valid: boolean) => {
|
|
if (!valid) {
|
|
return false;
|
|
}
|
|
baseService.post("/sys/oss", dataForm).then((res) => {
|
|
ElMessage.success({
|
|
message: "成功",
|
|
duration: 500,
|
|
onClose: () => {
|
|
visible.value = false;
|
|
emit("refreshDataList");
|
|
}
|
|
});
|
|
});
|
|
});
|
|
};
|
|
|
|
defineExpose({
|
|
init
|
|
});
|
|
</script>
|