123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314 |
- <template>
- <el-container class="panel-block">
- <el-header class="sa-header">
- <el-tabs class="sa-tabs">
- <el-tab-pane label="附件配置"></el-tab-pane>
- </el-tabs>
- </el-header>
- <el-main class="sa-p-t-30">
- <el-row :gutter="16">
- <el-col :xs="24" :sm="20" :md="18" :lg="14" :xl="14">
- <el-form
- :model="filesystem.model"
- :rules="filesystem.rules"
- ref="filesystemRef"
- label-width="180px"
- >
- <el-form-item label="存储引擎" prop="driver" required>
- <el-radio-group v-model="filesystem.model.driver">
- <el-radio label="public">本地储存</el-radio>
- <el-radio label="aliyun">阿里云存储</el-radio>
- <el-radio label="qcloud">腾讯云存储</el-radio>
- <el-radio label="qiniu">七牛云储存</el-radio>
- </el-radio-group>
- </el-form-item>
- <!-- 默认 -->
- <el-form-item label="允许上传类型" prop="extensions">
- <el-input
- placeholder="请输入允许上传类型(空格符为逗号)"
- v-model="filesystem.model.extensions"
- ></el-input>
- </el-form-item>
- <el-form-item label="文件上传限制" prop="filesize">
- <el-input placeholder="请输入文件上传限制" v-model="filesystem.model.filesize">
- <template #append>M</template>
- </el-input>
- </el-form-item>
- <el-form-item label="图片上传限制" prop="imagesize">
- <el-input placeholder="请输入图片上传限制" v-model="filesystem.model.imagesize">
- <template #append>M</template>
- </el-input>
- </el-form-item>
- <!-- 本地存储 -->
- <template v-if="filesystem.model.driver == 'public'">
- <div class="sa-title--line sa-m-b-30">本地存储</div>
- <el-form-item label="访问域名">
- <el-input
- placeholder="请输入访问域名 默认使用当前域名"
- v-model="filesystem.model.disks.public.url"
- ></el-input>
- </el-form-item>
- </template>
- <!-- 阿里云 -->
- <template v-if="filesystem.model.driver == 'aliyun'">
- <div class="sa-title--line sa-m-b-30">阿里云存储</div>
- <div>
- <el-form-item label="访问域名" prop="disks.aliyun.url">
- <el-input
- placeholder="请输入访问域名"
- v-model="filesystem.model.disks.aliyun.url"
- ></el-input>
- </el-form-item>
- <el-form-item label="AccessId" prop="disks.aliyun.access_id">
- <el-input
- placeholder="请输入AccessId"
- v-model="filesystem.model.disks.aliyun.access_id"
- ></el-input>
- </el-form-item>
- <el-form-item label="AccessSecret" prop="disks.aliyun.access_secret">
- <el-input
- placeholder="请输入AccessSecret"
- v-model="filesystem.model.disks.aliyun.access_secret"
- ></el-input>
- </el-form-item>
- <el-form-item label="Bucket" prop="disks.aliyun.bucket">
- <el-input
- placeholder="请输入Bucket"
- v-model="filesystem.model.disks.aliyun.bucket"
- ></el-input>
- </el-form-item>
- <el-form-item label="Endpoint" prop="disks.aliyun.endpoint">
- <el-input
- placeholder="请输入Endpoint"
- v-model="filesystem.model.disks.aliyun.endpoint"
- ></el-input>
- </el-form-item>
- </div>
- </template>
- <!-- 腾讯云 -->
- <div v-if="filesystem.model.driver == 'qcloud'">
- <div class="sa-title--line sa-m-b-30">腾讯云存储</div>
- <el-form-item label="访问域名" prop="disks.qcloud.url">
- <el-input
- placeholder="请输入访问域名"
- v-model="filesystem.model.disks.qcloud.url"
- ></el-input>
- </el-form-item>
- <el-form-item label="所属区域" prop="disks.qcloud.region">
- <el-input
- placeholder="请输入所属区域"
- v-model="filesystem.model.disks.qcloud.region"
- ></el-input>
- </el-form-item>
- <el-form-item label="AppId" prop="disks.qcloud.app_id">
- <el-input
- placeholder="请输入AppId"
- v-model="filesystem.model.disks.qcloud.app_id"
- ></el-input>
- </el-form-item>
- <el-form-item label="SecretId" prop="disks.qcloud.secret_id">
- <el-input
- placeholder="请输入SecretId"
- v-model="filesystem.model.disks.qcloud.secret_id"
- ></el-input>
- </el-form-item>
- <el-form-item label="SecretKey" prop="disks.qcloud.secret_key">
- <el-input
- placeholder="请输入SecretKey"
- v-model="filesystem.model.disks.qcloud.secret_key"
- ></el-input>
- </el-form-item>
- <el-form-item label="Bucket" prop="disks.qcloud.bucket">
- <el-input
- placeholder="请输入Bucket"
- v-model="filesystem.model.disks.qcloud.bucket"
- ></el-input>
- </el-form-item>
- </div>
- <!-- 七牛云 -->
- <div v-if="filesystem.model.driver == 'qiniu'">
- <div class="sa-title--line sa-m-b-30">七牛云存储</div>
- <el-form-item label="访问域名" prop="disks.qiniu.url">
- <el-input
- placeholder="请输入访问域名"
- v-model="filesystem.model.disks.qiniu.url"
- ></el-input>
- </el-form-item>
- <el-form-item label="AccessKey" prop="disks.qiniu.access_key">
- <el-input
- placeholder="请输入AccessKey"
- v-model="filesystem.model.disks.qiniu.access_key"
- ></el-input>
- </el-form-item>
- <el-form-item label="SecretKey" prop="disks.qiniu.secret_key">
- <el-input
- placeholder="请输入SecretKey"
- v-model="filesystem.model.disks.qiniu.secret_key"
- ></el-input>
- </el-form-item>
- <el-form-item label="Bucket" prop="disks.qiniu.bucket">
- <el-input
- placeholder="请输入Bucket"
- v-model="filesystem.model.disks.qiniu.bucket"
- ></el-input>
- </el-form-item>
- </div>
- </el-form>
- </el-col>
- </el-row>
- </el-main>
- <el-footer class="sa-footer--submit">
- <el-button @click="getData">重置</el-button>
- <el-button type="primary" @click="onUpdate">保存</el-button>
- </el-footer>
- </el-container>
- </template>
- <script>
- export default {
- name: 'file.admin.config',
- };
- </script>
- <script setup>
- import { reactive, ref, onMounted, unref } from 'vue';
- import file from '@/app/file/api';
- // 附件数据
- const filesystemRef = ref();
- const filesystem = reactive({
- model: {},
- rules: {
- extensions: [{ required: true, message: '请输入允许上传类型', trigger: 'blur' }],
- filesize: [{ required: true, message: '请输入文件上传限制', trigger: 'blur' }],
- imagesize: [{ required: true, message: '请输入图片上传限制', trigger: 'blur' }],
- disks: {
- aliyun: {
- access_id: [
- {
- required: true,
- message: '请输入AccessId',
- trigger: 'blur',
- },
- ],
- access_secret: [
- {
- required: true,
- message: '请输入AccessSecret',
- trigger: 'blur',
- },
- ],
- bucket: [
- {
- required: true,
- message: '请输入Bucket',
- trigger: 'blur',
- },
- ],
- endpoint: [
- {
- required: true,
- message: '请输入Endpoint',
- trigger: 'blur',
- },
- ],
- url: [
- {
- required: true,
- message: '请输入访问域名',
- trigger: 'blur',
- },
- ],
- },
- qcloud: {
- app_id: [
- {
- required: true,
- message: '请输入AppId',
- trigger: 'blur',
- },
- ],
- secret_bucket: [
- {
- required: true,
- message: '请输入Bucket',
- trigger: 'blur',
- },
- ],
- region: [
- {
- required: true,
- message: '请输入所属区域',
- trigger: 'blur',
- },
- ],
- secret_id: [
- {
- required: true,
- message: '请输入SecretId',
- trigger: 'blur',
- },
- ],
- secret_key: [
- {
- required: true,
- message: '请输入SecretKey',
- trigger: 'blur',
- },
- ],
- url: [
- {
- required: true,
- message: '请输入访问域名',
- trigger: 'blur',
- },
- ],
- },
- qiniu: {
- access_key: [
- {
- required: true,
- message: '请输入AccessKey',
- trigger: 'blur',
- },
- ],
- bucket: [
- {
- required: true,
- message: '请输入Bucket',
- trigger: 'blur',
- },
- ],
- secret_key: [
- {
- required: true,
- message: '请输入SecretKey',
- trigger: 'blur',
- },
- ],
- url: [
- {
- required: true,
- message: '请输入访问域名',
- trigger: 'blur',
- },
- ],
- },
- },
- },
- });
- // 获取
- async function getData() {
- const { data } = await file.config.filesystem();
- filesystem.model = data;
- }
- // 更新
- function onUpdate() {
- unref(filesystemRef).validate((valid) => {
- valid && file.config.filesystem(filesystem.model);
- });
- }
- onMounted(() => {
- getData();
- });
- </script>
|