bandhuBuy-admin/src/app/file/admin/config.vue

<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>