From 1078f9bc3bda0963fc0613431bbfd28b1e7ecb76 Mon Sep 17 00:00:00 2001
From: Mrtangl <1807746833@qq.com>
Date: Thu, 23 Jun 2022 19:03:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=82=A8=E5=AD=98=E7=BC=96=E8=BE=91=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/utils/type.ts                       |  10 +-
 admin/src/views/permission/menu/edit.vue      | 162 ++++++-----
 .../permission/menu/select-icon/index.vue     | 262 ++++++++++--------
 admin/src/views/setting/storage/edit.vue      | 193 ++++++++++++-
 admin/src/views/setting/storage/index.vue     |   2 +-
 5 files changed, 418 insertions(+), 211 deletions(-)

diff --git a/admin/src/utils/type.ts b/admin/src/utils/type.ts
index ee064841..b0a540f0 100644
--- a/admin/src/utils/type.ts
+++ b/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
 }
diff --git a/admin/src/views/permission/menu/edit.vue b/admin/src/views/permission/menu/edit.vue
index eff11f75..bb0e6d2d 100644
--- a/admin/src/views/permission/menu/edit.vue
+++ b/admin/src/views/permission/menu/edit.vue
@@ -21,16 +21,10 @@
                             >
                                 目录
                             </el-radio>
-                            <el-radio
-                                :label="menuDataType.MENU"
-                                @change="changeType(menuDataType.MENU)"
-                            >
+                            <el-radio :label="menuDataType.MENU" @change="changeType(menuDataType.MENU)">
                                 菜单
                             </el-radio>
-                            <el-radio
-                                :label="menuDataType.BUTTON"
-                                @change="changeType(menuDataType.BUTTON)"
-                            >
+                            <el-radio :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>
@@ -164,89 +158,89 @@
 </template>
 
 <script lang="ts" setup>
-import { useAdmin } from '@/core/hooks/app'
-import { onMounted, reactive, ref } from 'vue'
-import FooterBtns from '@/components/footer-btns/index.vue'
-import type { ElForm, ElMessage } from 'element-plus'
-import { apiConfigGetMenu, apiMenuDetail, apiMenuAdd, apiMenuEdit } from '@/api/auth'
-import SelectIcon from './select-icon/index.vue'
+    import { useAdmin } from '@/core/hooks/app'
+    import { onMounted, reactive, ref } from 'vue'
+    import FooterBtns from '@/components/footer-btns/index.vue'
+    import type { ElForm, ElMessage } from 'element-plus'
+    import { apiConfigGetMenu, apiMenuDetail, apiMenuAdd, apiMenuEdit } from '@/api/auth'
+    import SelectIcon from './select-icon/index.vue'
 
-const menuDataType = {
-    CATALOG: 'M', // 目录
-    MENU: 'C', // 菜单
-    BUTTON: 'A' // 按钮
-}
+    const menuDataType = {
+        CATALOG: 'M', // 目录
+        MENU: 'C', // 菜单
+        BUTTON: 'A', // 按钮
+    }
 
-const { router, route } = useAdmin()
-const id: any = route.query.id
+    const { router, route } = useAdmin()
+    const id: any = route.query.id
 
-const formRefs = ref<InstanceType<typeof ElForm>>()
+    const formRefs = ref<InstanceType<typeof ElForm>>()
 
-// 父级菜单选择
-const menuList = ref<any>([])
+    // 父级菜单选择
+    const menuList = ref<any>([])
 
-// 表单数据
-const formData = ref({
-    pid: '', // 上级ID
-    menuType: 'M', // 菜单类型
-    menuName: '', // 菜单名称
-    menuIcon: '', // 菜单图标
-    menuSort: '', // 菜单排序
-    perms: '', // 菜单权限字符
-    paths: '', // 路由路径
-    component: '', // 前端组件
-    selected: '', // 选中路径
-    params: '', // 路由参数
-    isShow: 1, // 是否显示：0=否， 1=是
-    isCache: 0, // 是否缓存：0=否， 1=是
-    isDisable: 0 // 是否禁用: 0=否， 1=是
-})
-
-// 获取详情
-const getMenuDetail = async (id: number) => {
-    ;(formData.value as {}) = await apiMenuDetail({ id })
-    getFatherMenu()
-}
-
-// 获取父级菜单选择
-const getFatherMenu = async () => {
-    const menus = (await apiConfigGetMenu()) || []
-    menuList.value = [{ id: 0, menuName: '顶级' }, ...menus]
-}
-
-// 添加菜单
-const handleMenuAdd = async () => {
-    await apiMenuAdd({ ...formData.value })
-    router.back()
-}
-
-// 编辑菜单
-const handleMenuEdit = async () => {
-    await apiMenuEdit({ ...formData.value })
-    router.back()
-}
-
-// 保存
-const onSubmit = () => {
-    formRefs.value?.validate()?.then(valid => {
-        if (!valid) {
-            return
-        }
-
-        if (!id) handleMenuAdd()
-        else handleMenuEdit()
+    // 表单数据
+    const formData = ref({
+        pid: '', // 上级ID
+        menuType: 'M', // 菜单类型
+        menuName: '', // 菜单名称
+        menuIcon: '', // 菜单图标
+        menuSort: '', // 菜单排序
+        perms: '', // 菜单权限字符
+        paths: '', // 路由路径
+        component: '', // 前端组件
+        selected: '', // 选中路径
+        params: '', // 路由参数
+        isShow: 1, // 是否显示：0=否， 1=是
+        isCache: 0, // 是否缓存：0=否， 1=是
+        isDisable: 0, // 是否禁用: 0=否， 1=是
     })
-}
 
-// 切换
-const changeType = (val: string) => {
-    menuDataType.value = val
-}
+    // 获取详情
+    const getMenuDetail = async (id: number) => {
+        ;(formData.value as {}) = await apiMenuDetail({ id })
+        getFatherMenu()
+    }
 
-onMounted(() => {
-    if (id) getMenuDetail(id)
-    getFatherMenu()
-})
+    // 获取父级菜单选择
+    const getFatherMenu = async () => {
+        const menus = (await apiConfigGetMenu()) || []
+        menuList.value = [{ id: 0, menuName: '顶级' }, ...menus]
+    }
+
+    // 添加菜单
+    const handleMenuAdd = async () => {
+        await apiMenuAdd({ ...formData.value })
+        router.back()
+    }
+
+    // 编辑菜单
+    const handleMenuEdit = async () => {
+        await apiMenuEdit({ ...formData.value })
+        router.back()
+    }
+
+    // 保存
+    const onSubmit = () => {
+        formRefs.value?.validate()?.then((valid) => {
+            if (!valid) {
+                return
+            }
+
+            if (!id) handleMenuAdd()
+            else handleMenuEdit()
+        })
+    }
+
+    // 切换
+    const changeType = (val: string) => {
+        menuDataType.value = val
+    }
+
+    onMounted(() => {
+        if (id) getMenuDetail(id)
+        getFatherMenu()
+    })
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/admin/src/views/permission/menu/select-icon/index.vue b/admin/src/views/permission/menu/select-icon/index.vue
index fa4c0b80..f527b7ef 100644
--- a/admin/src/views/permission/menu/select-icon/index.vue
+++ b/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">
@@ -25,137 +28,150 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, ref, computed } from 'vue'
-import { Search } from '@element-plus/icons-vue'
+    import { onMounted, reactive, ref, computed } from 'vue'
+    import { Search } from '@element-plus/icons-vue'
 
-const selectIcon = ref<any>([
-    'icon_kdzs_mdsz',
-    'icon_xpdy_mbgl',
-    'icon_xcxzb_zb',
-    'icon_xycj_cj',
-    'operation',
-    'icon_pcshop',
-    'icon_xpdy_dyjgl',
-    'icon_kdzs_pldy',
-    'icon_kdzs_mdmb',
-    'icon_qudao_h5',
-    'icon_fenxiao_goods',
-    'icon_kanjia',
-    'icon_hexiao_order',
-    'icon_pintuan',
-    'carryout',
-    'icon_qiandao_jilu',
-    'icon_notice',
-    'icon_notice_mail',
-    'gift',
-    'icon_notice_buyer',
-    'Field-time',
-    'icon_hexiao_member2',
-    'icon_coupons',
-    'icon_coupons_data',
-    'icon_fenxiao_member',
-    'icon_qiandao_guize',
-    'icon_pintuan2',
-    'icon_notice_seller',
-    'icon_pintuan_data',
-    'icon_fenxiao_data',
-    'icon_ziti_store',
-    'wallet',
-    'icon_kefu_comments',
-    'tradingdata',
-    'icon_fenxiao_order',
-    'icon_hexiao_member',
-    'icon_fenxiao_set',
-    'icon_fenxiao_grade',
-    'yiguanzhugongyingshang',
-    'icon_user_gaikuang',
-    'icon_qudao_weixin',
-    'icon_qudao_app',
-    'icon_qudao_xiaochengxu',
-    'icon_dianpu_daohang',
-    'icon_yingxiao_qipao',
-    'icon_set_jiaoyi',
-    'icon_caiwu_yue',
-    'icon_caiwu_tixian',
-    'icon_caiwu_jifen',
-    'icon_shuju_liuliang',
-    'icon_user_dengji',
-    'icon_user_guanli',
-    'icon_user_biaoqian',
-    'icon_copy',
-    'icon_set_product',
-    'icon_set_save',
-    'icon_dianpu_fenlei',
-    'icon_dianpu_fengge',
-    'icon_dianpu_sucai',
-    'icon_dianpu_xiangqing',
-    'icon_order_guanli',
-    'icon_caiwu',
-    'icon_user',
-    'icon_set_user',
-    'icon_shuju',
-    'icon_dianpu_home',
-    'icon_yingyongcenter',
-    'icon_qudao',
-    'icon_qudao2',
-    'icon_set_store',
-    'icon_dianpu_weiyem',
-    'icon_set_quanxian',
-    'icon_hide',
-    'icon_show',
-    'icon_wallet',
-    'icon_set_pay',
-    'icon_set_weihu',
-    'icon_set_peisong',
-    'icon_yingxiaowf',
-    'icon_dianpu_shoppingCar',
-    'icon_goods',
-    'icon_sort',
-    'icon_danwei',
-    'icon_pingjia',
-    'icon_pinpai',
-    'icon_gongyingshang'
-])
+    const selectIcon = ref<any>([
+        'icon_kdzs_mdsz',
+        'icon_xpdy_mbgl',
+        'icon_xcxzb_zb',
+        'icon_xycj_cj',
+        'operation',
+        'icon_pcshop',
+        'icon_xpdy_dyjgl',
+        'icon_kdzs_pldy',
+        'icon_kdzs_mdmb',
+        'icon_qudao_h5',
+        'icon_fenxiao_goods',
+        'icon_kanjia',
+        'icon_hexiao_order',
+        'icon_pintuan',
+        'carryout',
+        'icon_qiandao_jilu',
+        'icon_notice',
+        'icon_notice_mail',
+        'gift',
+        'icon_notice_buyer',
+        'Field-time',
+        'icon_hexiao_member2',
+        'icon_coupons',
+        'icon_coupons_data',
+        'icon_fenxiao_member',
+        'icon_qiandao_guize',
+        'icon_pintuan2',
+        'icon_notice_seller',
+        'icon_pintuan_data',
+        'icon_fenxiao_data',
+        'icon_ziti_store',
+        'wallet',
+        'icon_kefu_comments',
+        'tradingdata',
+        'icon_fenxiao_order',
+        'icon_hexiao_member',
+        'icon_fenxiao_set',
+        'icon_fenxiao_grade',
+        'yiguanzhugongyingshang',
+        'icon_user_gaikuang',
+        'icon_qudao_weixin',
+        'icon_qudao_app',
+        'icon_qudao_xiaochengxu',
+        'icon_dianpu_daohang',
+        'icon_yingxiao_qipao',
+        'icon_set_jiaoyi',
+        'icon_caiwu_yue',
+        'icon_caiwu_tixian',
+        'icon_caiwu_jifen',
+        'icon_shuju_liuliang',
+        'icon_user_dengji',
+        'icon_user_guanli',
+        'icon_user_biaoqian',
+        'icon_copy',
+        'icon_set_product',
+        'icon_set_save',
+        'icon_dianpu_fenlei',
+        'icon_dianpu_fengge',
+        'icon_dianpu_sucai',
+        'icon_dianpu_xiangqing',
+        'icon_order_guanli',
+        'icon_caiwu',
+        'icon_user',
+        'icon_set_user',
+        'icon_shuju',
+        'icon_dianpu_home',
+        'icon_yingyongcenter',
+        'icon_qudao',
+        'icon_qudao2',
+        'icon_set_store',
+        'icon_dianpu_weiyem',
+        'icon_set_quanxian',
+        'icon_hide',
+        'icon_show',
+        'icon_wallet',
+        'icon_set_pay',
+        'icon_set_weihu',
+        'icon_set_peisong',
+        'icon_yingxiaowf',
+        'icon_dianpu_shoppingCar',
+        'icon_goods',
+        'icon_sort',
+        'icon_danwei',
+        'icon_pingjia',
+        'icon_pinpai',
+        'icon_gongyingshang',
+    ])
 
-const selectIconItem = (item: string) => {
-    console.log(item, 'item____')
-    emit('update:icon', item)
-}
+    const props = withDefaults(
+        defineProps<{
+            icon: any
+        }>(),
+        {
+            icon: '',
+        }
+    )
 
-const emit = defineEmits(['update:icon'])
-
-const props = withDefaults(
-    defineProps<{
-        icon: any
-    }>(),
-    {
-        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;
-    height: 32px;
-    border: 1px solid #dcdfe6;
-    border-radius: 3px;
-    display: flex;
-    justify-content: center;
+    .show-icon {
+        width: 80px;
+        height: 35px;
+        border: 1px solid #dcdfe6;
+        border-radius: 3px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
 
-    .iconfont {
-        font-size: 30px;
-    }
-}
-.select-icon-item {
-    display: flex;
-    flex-wrap: wrap;
-    height: 300px;
-    overflow: auto;
-    cursor: pointer;
+        .iconfont {
+            font-size: 30px;
+        }
 
-    .iconfont {
-        font-size: 46px;
+        .close-icon {
+            position: absolute;
+            right: 0;
+            top: 0;
+            font-size: 15px;
+            cursor: pointer;
+        }
+    }
+    .select-icon-item {
+        display: flex;
+        flex-wrap: wrap;
+        height: 300px;
+        overflow: auto;
+        cursor: pointer;
+
+        .iconfont {
+            font-size: 46px;
+        }
     }
-}
 </style>
diff --git a/admin/src/views/setting/storage/edit.vue b/admin/src/views/setting/storage/edit.vue
index c7f14a3b..ed063d22 100644
--- a/admin/src/views/setting/storage/edit.vue
+++ b/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>
diff --git a/admin/src/views/setting/storage/index.vue b/admin/src/views/setting/storage/index.vue
index 732cbf98..490aee2f 100644
--- a/admin/src/views/setting/storage/index.vue
+++ b/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,
                                 },
                             }"
                         >