新增
This commit is contained in:
Your Name
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup
|
||||
ref="popupRef"
|
||||
title="设置存储"
|
||||
:async="true"
|
||||
width="550px"
|
||||
@confirm="handleSubmit"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
|
||||
<el-form-item label="存储方式" prop="engine">
|
||||
<div>
|
||||
<el-radio checked>{{ getStorageInfo?.name }} </el-radio>
|
||||
<div class="form-tips">{{ getStorageInfo?.tips }}</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div v-if="formData.engine !== 'local'">
|
||||
<el-form-item label=" 存储空间名称" prop="bucket">
|
||||
<div class="flex-1">
|
||||
<el-input
|
||||
v-model="formData.bucket"
|
||||
placeholder="请输入存储空间名称(Bucket)"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="ACCESS_KEY" prop="access_key">
|
||||
<el-input
|
||||
v-model="formData.access_key"
|
||||
placeholder="请输入ACCESS_KEY(AK)"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="SECRET_KEY" prop="secret_key">
|
||||
<el-input
|
||||
v-model="formData.secret_key"
|
||||
placeholder="请输入SECRET_KEY(SK)"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="空间域名" prop="domain">
|
||||
<div class="flex-1">
|
||||
<div>
|
||||
<el-input
|
||||
v-model="formData.domain"
|
||||
placeholder="请输入空间域名(Domain)"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
请补全http://或https://，例如https://static.cloud.com
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formData.engine == StorageEnum.QCLOUD"
|
||||
label="REGION"
|
||||
prop="region"
|
||||
>
|
||||
<el-input v-model="formData.region" placeholder="请输入region" clearable />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :value="0">关闭</el-radio>
|
||||
<el-radio :value="1">开启</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'element-plus'
|
||||
|
||||
import { storageSetup } from '@/api/setting/storage'
|
||||
import { storageDetail } from '@/api/setting/storage'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
|
||||
enum StorageEnum {
|
||||
LOCAL = 'local', // 本地
|
||||
QINIU = 'qiniu', // 七牛云
|
||||
ALIYUN = 'aliyun', // 阿里云OSS
|
||||
QCLOUD = 'qcloud' // 腾讯云OSS
|
||||
}
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const formData = reactive({
|
||||
engine: '',
|
||||
bucket: '',
|
||||
access_key: '',
|
||||
secret_key: '',
|
||||
domain: '',
|
||||
region: '', // 腾讯云需要
|
||||
status: 0
|
||||
})
|
||||
|
||||
const storageArr = [
|
||||
{
|
||||
name: '本地存储',
|
||||
type: StorageEnum.LOCAL,
|
||||
tips: '本地存储方式不需要配置其他参数'
|
||||
},
|
||||
{
|
||||
name: '七牛云存储',
|
||||
type: StorageEnum.QINIU,
|
||||
tips: '切换七牛云存储后，素材库需要重新上传至七牛云'
|
||||
},
|
||||
{
|
||||
name: '阿里云OSS',
|
||||
type: StorageEnum.ALIYUN,
|
||||
tips: '切换阿里云OSS后，素材库需要重新上传至阿里云OSS'
|
||||
},
|
||||
{
|
||||
name: '腾讯云OSS',
|
||||
type: StorageEnum.QCLOUD,
|
||||
tips: '切换腾讯云OSS后，素材库需要重新上传至腾讯云OSS'
|
||||
}
|
||||
]
|
||||
|
||||
const formRules = {
|
||||
bucket: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入存储空间名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
access_key: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入ACCESS_KEY',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
secret_key: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入SECRET_KEY',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
domain: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入空间域名',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
region: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入REGION',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const getStorageInfo = computed(() => {
|
||||
return storageArr.find((item) => item.type == formData.engine)
|
||||
})
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
await storageSetup(formData)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
const data = await storageDetail({
|
||||
engine: formData.engine
|
||||
})
|
||||
for (const key in data) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
|
||||
const open = (type: string) => {
|
||||
formData.engine = type
|
||||
popupRef.value?.open()
|
||||
getDetail()
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="storage">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-alert type="warning" title="温馨提示：" :closable="false" show-icon>
|
||||
<template #default>
|
||||
<div>
|
||||
1.使用对象存储，需要将public目录下的资源文件保留原来目录路径传输到对象存储空间。
|
||||
</div>
|
||||
<div>2.请勿随意切换存储方式，可能导致图片无法查看。</div>
|
||||
<div>
|
||||
3.需要在对象存储后台设置域名跨域，否则图片生成场景无法使用，例海报合成等。
|
||||
</div>
|
||||
<div>
|
||||
4.需将对象存储的图片域名添加到微信小程序官方后台request合法域名和downloadFile合法域名。
|
||||
</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never" v-loading="state.loading">
|
||||
<el-table size="large" :data="state.lists">
|
||||
<el-table-column label="储存方式" prop="name" min-width="120" />
|
||||
<el-table-column label="储存位置" prop="path" min-width="160" />
|
||||
<el-table-column label="状态" min-width="80">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.status == 1">开启</el-tag>
|
||||
<el-tag type="danger" v-else>关闭</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="80" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-perms="['setting.storage/setup']"
|
||||
type="primary"
|
||||
link
|
||||
@click="handleSet(row.engine)"
|
||||
>
|
||||
设置
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<edit-popup ref="editRef" @success="getLists" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="storage">
|
||||
import { storageLists } from '@/api/setting/storage'
|
||||
|
||||
import EditPopup from './edit.vue'
|
||||
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
|
||||
// 列表数据
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
lists: []
|
||||
})
|
||||
|
||||
// 获取存储引擎列表数据
|
||||
const getLists = async () => {
|
||||
try {
|
||||
state.loading = true
|
||||
state.lists = await storageLists()
|
||||
state.loading = false
|
||||
} catch (error) {
|
||||
state.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSet = (engine: string) => {
|
||||
editRef.value?.open(engine)
|
||||
}
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
Reference in New Issue
Block a user