储存编辑接口对接

admin/src/utils/type.ts

@@ -1,5 +1,13 @@
 // 页面模式
 export enum PageMode {
     'ADD' = 'add', // 添加
-    'EDIT' = 'edit' // 编辑
+    'EDIT' = 'edit', // 编辑
+}
+
+// 存储引擎类型
+export enum storage {
+    'LOCAL' = 'local', // 本地
+    'QINIU' = 'qiniu', // 七牛云
+    'ALIYUN' = 'aliyun', // 阿里云OSS
+    'QCLOUD' = 'qcloud', // 腾讯云OSS
 }

admin/src/views/permission/menu/edit.vue

@@ -21,16 +21,10 @@
                             >
                                 目录
                             </el-radio>
-                            <el-radio
+                            <el-radio :label="menuDataType.MENU" @change="changeType(menuDataType.MENU)">
-                                :label="menuDataType.MENU"
-                                @change="changeType(menuDataType.MENU)"
-                            >
                                 菜单
                             </el-radio>
-                            <el-radio
+                            <el-radio :label="menuDataType.BUTTON" @change="changeType(menuDataType.BUTTON)">
-                                :label="menuDataType.BUTTON"
-                                @change="changeType(menuDataType.BUTTON)"
-                            >
                                 按钮
                             </el-radio>
                         </el-radio-group>
@@ -45,7 +39,7 @@
                                 checkStrictly: true,
                                 emitPath: false,
                                 label: 'menuName',
-                                value: 'id'
+                                value: 'id',
                             }"
                             clearable
                         ></el-cascader>
@@ -174,7 +168,7 @@ import SelectIcon from './select-icon/index.vue'
     const menuDataType = {
         CATALOG: 'M', // 目录
         MENU: 'C', // 菜单
-    BUTTON: 'A' // 按钮
+        BUTTON: 'A', // 按钮
     }
 
     const { router, route } = useAdmin()
@@ -199,7 +193,7 @@ const formData = ref({
         params: '', // 路由参数
         isShow: 1, // 是否显示：0=否， 1=是
         isCache: 0, // 是否缓存：0=否， 1=是
-    isDisable: 0 // 是否禁用: 0=否， 1=是
+        isDisable: 0, // 是否禁用: 0=否， 1=是
     })
 
     // 获取详情
@@ -228,7 +222,7 @@ const handleMenuEdit = async () => {
 
     // 保存
     const onSubmit = () => {
-    formRefs.value?.validate()?.then(valid => {
+        formRefs.value?.validate()?.then((valid) => {
             if (!valid) {
                 return
             }

admin/src/views/permission/menu/select-icon/index.vue

@@ -3,6 +3,9 @@
         <div class="flex">
             <div class="show-icon">
                 <i class="iconfont" :class="icon"></i>
+                <el-icon class="close-icon row-between" v-show="icon" @click="handleCloseIcon">
+                    <CircleClose />
+                </el-icon>
             </div>
 
             <el-popover placement="bottom" :width="400" trigger="click">
@@ -114,38 +117,51 @@ const selectIcon = ref<any>([
         'icon_danwei',
         'icon_pingjia',
         'icon_pinpai',
-    'icon_gongyingshang'
+        'icon_gongyingshang',
     ])
 
-const selectIconItem = (item: string) => {
-    console.log(item, 'item____')
-    emit('update:icon', item)
-}
-
-const emit = defineEmits(['update:icon'])
-
     const props = withDefaults(
         defineProps<{
             icon: any
         }>(),
         {
-        icon: ''
+            icon: '',
         }
     )
+
+    const selectIconItem = (item: string) => {
+        emit('update:icon', item)
+    }
+
+    const handleCloseIcon = () => {
+        emit('update:icon', '')
+    }
+
+    const emit = defineEmits(['update:icon'])
 </script>
 
 <style lang="scss" scoped>
     .show-icon {
-    width: 45px;
+        width: 80px;
-    height: 32px;
+        height: 35px;
         border: 1px solid #dcdfe6;
         border-radius: 3px;
         display: flex;
         justify-content: center;
+        align-items: center;
+        position: relative;
 
         .iconfont {
             font-size: 30px;
         }
+
+        .close-icon {
+            position: absolute;
+            right: 0;
+            top: 0;
+            font-size: 15px;
+            cursor: pointer;
+        }
     }
     .select-icon-item {
         display: flex;

admin/src/views/setting/storage/edit.vue

@@ -1,7 +1,196 @@
 <template>
-    <div>存储edit</div>
+    <div class="storage-setting">
+        <!-- 导航头部 -->
+        <el-card shadow="never">
+            <el-page-header @back="$router.go(-1)" content="存储设置" />
+        </el-card>
+
+        <!-- 提示 -->
+        <el-card shadow="never" class="m-t-15" v-if="alias !== storage.LOCAL">
+            <el-alert
+                v-if="alias == storage.QINIU"
+                title="温馨提示：切换七牛云存储后，素材库需要重新上传至七牛云。"
+                type="primary"
+                :closable="false"
+                show-icon
+            />
+            <el-alert
+                v-if="alias == storage.ALIYUN"
+                title="温馨提示：切换阿里云OSS后，素材库需要重新上传至阿里云OSS。"
+                type="primary"
+                :closable="false"
+                show-icon
+            />
+            <el-alert
+                v-if="alias == storage.QCLOUD"
+                title="温馨提示：切换腾讯云OSS后，素材库需要重新上传至腾讯云OSS。"
+                type="primary"
+                :closable="false"
+                show-icon
+            />
+        </el-card>
+
+        <!-- 表单 -->
+        <el-card shadow="never" class="m-t-15">
+            <el-form
+                ref="formRef"
+                :model="form"
+                :rules="formRules"
+                label-width="240px"
+                size="small"
+                class="ls-form"
+            >
+                <!-- 存储设置 -->
+                <div class="card-content m-t-24">
+                    <el-form-item label="存储方式">
+                        <div v-if="alias === storage.LOCAL">本地存储</div>
+                        <div v-if="alias === storage.QINIU">七牛云存储</div>
+                        <div v-if="alias === storage.ALIYUN">阿里云OSS</div>
+                        <div v-if="alias === storage.QCLOUD">腾讯云OSS</div>
+                        <div v-if="alias === storage.LOCAL" class="muted xs m-r-16">
+                            本地存储方式不需要配置其他参数
+                        </div>
+                    </el-form-item>
+                </div>
+                <div v-if="alias !== 'local'">
+                    <el-form-item label=" 存储空间名称(Bucket)" prop="bucket">
+                        <el-input v-model="form.bucket" placeholder="请输入存储空间名称(Bucket)"></el-input>
+                    </el-form-item>
+                    <el-form-item label="ACCESS_KEY（AK）" prop="accessKey">
+                        <el-input v-model="form.accessKey" placeholder="请输入ACCESS_KEY"></el-input>
+                    </el-form-item>
+                    <el-form-item label="SECRET_KEY（SK）" prop="secretKey">
+                        <el-input v-model="form.secretKey" placeholder="请输入SECRET_KEY"></el-input>
+                    </el-form-item>
+                    <el-form-item label="空间域名（Domain）" prop="domain">
+                        <!-- <el-select class="ls-select" v-model="form" placeholder="https://">
+							<el-option label="https://" value="https://"></el-option>
+							<el-option label="http://" value="http://"></el-option>
+						</el-select> -->
+                        <el-input v-model="form.domain" placeholder="请输入空间域名"></el-input>
+                        <div class="muted xs m-r-16">
+                            请补全http://或https://，例如https://static.cloud.com
+                        </div>
+                    </el-form-item>
+                    <el-form-item v-if="alias == storage.QCLOUD" label="REGION" prop="region">
+                        <el-input v-model="form.region" placeholder="请输入region"></el-input>
+                    </el-form-item>
+                </div>
+                <el-form-item label="状态" prop="status">
+                    <el-radio-group class="m-r-16" v-model="form.status">
+                        <el-radio :label="0">停用</el-radio>
+                        <el-radio :label="1">启用</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </el-form>
+        </el-card>
+
+        <!--  保存  -->
+        <footer-btns>
+            <el-button type="primary" size="small" @click="onSubmit">保存</el-button>
+        </footer-btns>
+    </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+    import { ref, onMounted } from 'vue'
+    import { ElMessage, ElForm } from 'element-plus'
+    import { storage } from '@/utils/type'
+    import { useAdmin } from '@/core/hooks/app'
+    import FooterBtns from '@/components/footer-btns/index.vue'
+    import { apiStorageDetail, apiStorageEdit } from '@/api/setting'
+
+    const { route, router } = useAdmin()
+
+    // 存储方式
+    let alias = ref<any>('') // 存储引擎名称：local-本地，qiniu-七牛云,aliyun-阿里云OSS,qcloud-腾讯云OS:
+
+    // 设置表单
+    let form = ref<object>({
+        bucket: '',
+        accessKey: '',
+        secretKey: '',
+        domain: '',
+        region: '', // 腾讯云需要
+        status: 0,
+    })
+
+    let formRules = ref({
+        bucket: [
+            {
+                required: true,
+                message: '请输入存储空间名称',
+                trigger: 'blur',
+            },
+        ],
+        accessKey: [
+            {
+                required: true,
+                message: '请输入ACCESS_KEY',
+                trigger: 'blur',
+            },
+        ],
+        secretKey: [
+            {
+                required: true,
+                message: '请输入SECRET_KEY',
+                trigger: 'blur',
+            },
+        ],
+        domain: [
+            {
+                required: true,
+                message: '请输入空间域名',
+                trigger: 'blur',
+            },
+        ],
+        region: [
+            {
+                required: true,
+                message: '请输入REGION',
+                trigger: 'blur',
+            },
+        ],
+    })
+
+    const formRef: Ref<typeof ElForm | null> = ref(null)
+
+    const onSubmit = () => {
+        // 验证表单格式是否正确
+        formRef.value?.validate((valid: boolean) => {
+            if (!valid) {
+                return
+            }
+            // 请求发送
+            apiStorageEdit({
+                ...form.value,
+                alias: alias.value,
+            })
+                .then((res: any) => {
+                    setTimeout(() => router.back(), 500)
+                })
+                .catch((err: any) => {
+                    console.log('err', err)
+                })
+        })
+    }
+
+    // 获取详情
+    const getStorageDetail = async () => {
+        form.value = await apiStorageDetail({
+            alias: alias.value,
+        })
+    }
+
+    onMounted(async () => {
+        if (route.query.alias) {
+            console.log('route.query.alias', route.query.alias)
+            alias.value = route.query.alias
+            console.log('alias.value', alias.value)
+        }
+
+        await getStorageDetail()
+    })
+</script>
 
 <style lang="scss" scoped></style>

admin/src/views/setting/storage/index.vue

@@ -35,7 +35,7 @@
                             :to="{
                                 path: '/setting/storage/edit',
                                 query: {
-                                    engine: scope.row.engine,
+                                    alias: scope.row.alias,
                                 },
                             }"
                         >