储存编辑接口对接
This commit is contained in:
Mrtangl
parent
2f7361c2dd
commit
1078f9bc3b
|
|
@ -1,5 +1,13 @@
|
||||||
// 页面模式
|
// 页面模式
|
||||||
export enum PageMode {
|
export enum PageMode {
|
||||||
'ADD' = 'add', // 添加
|
'ADD' = 'add', // 添加
|
||||||
'EDIT' = 'edit' // 编辑
|
'EDIT' = 'edit', // 编辑
|
||||||
|
}
|
||||||
|
|
||||||
|
// 存储引擎类型
|
||||||
|
export enum storage {
|
||||||
|
'LOCAL' = 'local', // 本地
|
||||||
|
'QINIU' = 'qiniu', // 七牛云
|
||||||
|
'ALIYUN' = 'aliyun', // 阿里云OSS
|
||||||
|
'QCLOUD' = 'qcloud', // 腾讯云OSS
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,16 +21,10 @@
|
||||||
>
|
>
|
||||||
目录
|
目录
|
||||||
</el-radio>
|
</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
|
<el-radio :label="menuDataType.BUTTON" @change="changeType(menuDataType.BUTTON)">
|
||||||
:label="menuDataType.BUTTON"
|
|
||||||
@change="changeType(menuDataType.BUTTON)"
|
|
||||||
>
|
|
||||||
按钮
|
按钮
|
||||||
</el-radio>
|
</el-radio>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
|
|
@ -45,7 +39,7 @@
|
||||||
checkStrictly: true,
|
checkStrictly: true,
|
||||||
emitPath: false,
|
emitPath: false,
|
||||||
label: 'menuName',
|
label: 'menuName',
|
||||||
value: 'id'
|
value: 'id',
|
||||||
}"
|
}"
|
||||||
clearable
|
clearable
|
||||||
></el-cascader>
|
></el-cascader>
|
||||||
|
|
@ -164,89 +158,89 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useAdmin } from '@/core/hooks/app'
|
import { useAdmin } from '@/core/hooks/app'
|
||||||
import { onMounted, reactive, ref } from 'vue'
|
import { onMounted, reactive, ref } from 'vue'
|
||||||
import FooterBtns from '@/components/footer-btns/index.vue'
|
import FooterBtns from '@/components/footer-btns/index.vue'
|
||||||
import type { ElForm, ElMessage } from 'element-plus'
|
import type { ElForm, ElMessage } from 'element-plus'
|
||||||
import { apiConfigGetMenu, apiMenuDetail, apiMenuAdd, apiMenuEdit } from '@/api/auth'
|
import { apiConfigGetMenu, apiMenuDetail, apiMenuAdd, apiMenuEdit } from '@/api/auth'
|
||||||
import SelectIcon from './select-icon/index.vue'
|
import SelectIcon from './select-icon/index.vue'
|
||||||
|
|
||||||
const menuDataType = {
|
const menuDataType = {
|
||||||
CATALOG: 'M', // 目录
|
CATALOG: 'M', // 目录
|
||||||
MENU: 'C', // 菜单
|
MENU: 'C', // 菜单
|
||||||
BUTTON: 'A' // 按钮
|
BUTTON: 'A', // 按钮
|
||||||
}
|
}
|
||||||
|
|
||||||
const { router, route } = useAdmin()
|
const { router, route } = useAdmin()
|
||||||
const id: any = route.query.id
|
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({
|
const formData = ref({
|
||||||
pid: '', // 上级ID
|
pid: '', // 上级ID
|
||||||
menuType: 'M', // 菜单类型
|
menuType: 'M', // 菜单类型
|
||||||
menuName: '', // 菜单名称
|
menuName: '', // 菜单名称
|
||||||
menuIcon: '', // 菜单图标
|
menuIcon: '', // 菜单图标
|
||||||
menuSort: '', // 菜单排序
|
menuSort: '', // 菜单排序
|
||||||
perms: '', // 菜单权限字符
|
perms: '', // 菜单权限字符
|
||||||
paths: '', // 路由路径
|
paths: '', // 路由路径
|
||||||
component: '', // 前端组件
|
component: '', // 前端组件
|
||||||
selected: '', // 选中路径
|
selected: '', // 选中路径
|
||||||
params: '', // 路由参数
|
params: '', // 路由参数
|
||||||
isShow: 1, // 是否显示：0=否， 1=是
|
isShow: 1, // 是否显示：0=否， 1=是
|
||||||
isCache: 0, // 是否缓存：0=否， 1=是
|
isCache: 0, // 是否缓存：0=否， 1=是
|
||||||
isDisable: 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 changeType = (val: string) => {
|
const getMenuDetail = async (id: number) => {
|
||||||
menuDataType.value = val
|
;(formData.value as {}) = await apiMenuDetail({ id })
|
||||||
}
|
getFatherMenu()
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
// 获取父级菜单选择
|
||||||
if (id) getMenuDetail(id)
|
const getFatherMenu = async () => {
|
||||||
getFatherMenu()
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,9 @@
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="show-icon">
|
<div class="show-icon">
|
||||||
<i class="iconfont" :class="icon"></i>
|
<i class="iconfont" :class="icon"></i>
|
||||||
|
<el-icon class="close-icon row-between" v-show="icon" @click="handleCloseIcon">
|
||||||
|
<CircleClose />
|
||||||
|
</el-icon>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-popover placement="bottom" :width="400" trigger="click">
|
<el-popover placement="bottom" :width="400" trigger="click">
|
||||||
|
|
@ -25,137 +28,150 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onMounted, reactive, ref, computed } from 'vue'
|
import { onMounted, reactive, ref, computed } from 'vue'
|
||||||
import { Search } from '@element-plus/icons-vue'
|
import { Search } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
const selectIcon = ref<any>([
|
const selectIcon = ref<any>([
|
||||||
'icon_kdzs_mdsz',
|
'icon_kdzs_mdsz',
|
||||||
'icon_xpdy_mbgl',
|
'icon_xpdy_mbgl',
|
||||||
'icon_xcxzb_zb',
|
'icon_xcxzb_zb',
|
||||||
'icon_xycj_cj',
|
'icon_xycj_cj',
|
||||||
'operation',
|
'operation',
|
||||||
'icon_pcshop',
|
'icon_pcshop',
|
||||||
'icon_xpdy_dyjgl',
|
'icon_xpdy_dyjgl',
|
||||||
'icon_kdzs_pldy',
|
'icon_kdzs_pldy',
|
||||||
'icon_kdzs_mdmb',
|
'icon_kdzs_mdmb',
|
||||||
'icon_qudao_h5',
|
'icon_qudao_h5',
|
||||||
'icon_fenxiao_goods',
|
'icon_fenxiao_goods',
|
||||||
'icon_kanjia',
|
'icon_kanjia',
|
||||||
'icon_hexiao_order',
|
'icon_hexiao_order',
|
||||||
'icon_pintuan',
|
'icon_pintuan',
|
||||||
'carryout',
|
'carryout',
|
||||||
'icon_qiandao_jilu',
|
'icon_qiandao_jilu',
|
||||||
'icon_notice',
|
'icon_notice',
|
||||||
'icon_notice_mail',
|
'icon_notice_mail',
|
||||||
'gift',
|
'gift',
|
||||||
'icon_notice_buyer',
|
'icon_notice_buyer',
|
||||||
'Field-time',
|
'Field-time',
|
||||||
'icon_hexiao_member2',
|
'icon_hexiao_member2',
|
||||||
'icon_coupons',
|
'icon_coupons',
|
||||||
'icon_coupons_data',
|
'icon_coupons_data',
|
||||||
'icon_fenxiao_member',
|
'icon_fenxiao_member',
|
||||||
'icon_qiandao_guize',
|
'icon_qiandao_guize',
|
||||||
'icon_pintuan2',
|
'icon_pintuan2',
|
||||||
'icon_notice_seller',
|
'icon_notice_seller',
|
||||||
'icon_pintuan_data',
|
'icon_pintuan_data',
|
||||||
'icon_fenxiao_data',
|
'icon_fenxiao_data',
|
||||||
'icon_ziti_store',
|
'icon_ziti_store',
|
||||||
'wallet',
|
'wallet',
|
||||||
'icon_kefu_comments',
|
'icon_kefu_comments',
|
||||||
'tradingdata',
|
'tradingdata',
|
||||||
'icon_fenxiao_order',
|
'icon_fenxiao_order',
|
||||||
'icon_hexiao_member',
|
'icon_hexiao_member',
|
||||||
'icon_fenxiao_set',
|
'icon_fenxiao_set',
|
||||||
'icon_fenxiao_grade',
|
'icon_fenxiao_grade',
|
||||||
'yiguanzhugongyingshang',
|
'yiguanzhugongyingshang',
|
||||||
'icon_user_gaikuang',
|
'icon_user_gaikuang',
|
||||||
'icon_qudao_weixin',
|
'icon_qudao_weixin',
|
||||||
'icon_qudao_app',
|
'icon_qudao_app',
|
||||||
'icon_qudao_xiaochengxu',
|
'icon_qudao_xiaochengxu',
|
||||||
'icon_dianpu_daohang',
|
'icon_dianpu_daohang',
|
||||||
'icon_yingxiao_qipao',
|
'icon_yingxiao_qipao',
|
||||||
'icon_set_jiaoyi',
|
'icon_set_jiaoyi',
|
||||||
'icon_caiwu_yue',
|
'icon_caiwu_yue',
|
||||||
'icon_caiwu_tixian',
|
'icon_caiwu_tixian',
|
||||||
'icon_caiwu_jifen',
|
'icon_caiwu_jifen',
|
||||||
'icon_shuju_liuliang',
|
'icon_shuju_liuliang',
|
||||||
'icon_user_dengji',
|
'icon_user_dengji',
|
||||||
'icon_user_guanli',
|
'icon_user_guanli',
|
||||||
'icon_user_biaoqian',
|
'icon_user_biaoqian',
|
||||||
'icon_copy',
|
'icon_copy',
|
||||||
'icon_set_product',
|
'icon_set_product',
|
||||||
'icon_set_save',
|
'icon_set_save',
|
||||||
'icon_dianpu_fenlei',
|
'icon_dianpu_fenlei',
|
||||||
'icon_dianpu_fengge',
|
'icon_dianpu_fengge',
|
||||||
'icon_dianpu_sucai',
|
'icon_dianpu_sucai',
|
||||||
'icon_dianpu_xiangqing',
|
'icon_dianpu_xiangqing',
|
||||||
'icon_order_guanli',
|
'icon_order_guanli',
|
||||||
'icon_caiwu',
|
'icon_caiwu',
|
||||||
'icon_user',
|
'icon_user',
|
||||||
'icon_set_user',
|
'icon_set_user',
|
||||||
'icon_shuju',
|
'icon_shuju',
|
||||||
'icon_dianpu_home',
|
'icon_dianpu_home',
|
||||||
'icon_yingyongcenter',
|
'icon_yingyongcenter',
|
||||||
'icon_qudao',
|
'icon_qudao',
|
||||||
'icon_qudao2',
|
'icon_qudao2',
|
||||||
'icon_set_store',
|
'icon_set_store',
|
||||||
'icon_dianpu_weiyem',
|
'icon_dianpu_weiyem',
|
||||||
'icon_set_quanxian',
|
'icon_set_quanxian',
|
||||||
'icon_hide',
|
'icon_hide',
|
||||||
'icon_show',
|
'icon_show',
|
||||||
'icon_wallet',
|
'icon_wallet',
|
||||||
'icon_set_pay',
|
'icon_set_pay',
|
||||||
'icon_set_weihu',
|
'icon_set_weihu',
|
||||||
'icon_set_peisong',
|
'icon_set_peisong',
|
||||||
'icon_yingxiaowf',
|
'icon_yingxiaowf',
|
||||||
'icon_dianpu_shoppingCar',
|
'icon_dianpu_shoppingCar',
|
||||||
'icon_goods',
|
'icon_goods',
|
||||||
'icon_sort',
|
'icon_sort',
|
||||||
'icon_danwei',
|
'icon_danwei',
|
||||||
'icon_pingjia',
|
'icon_pingjia',
|
||||||
'icon_pinpai',
|
'icon_pinpai',
|
||||||
'icon_gongyingshang'
|
'icon_gongyingshang',
|
||||||
])
|
])
|
||||||
|
|
||||||
const selectIconItem = (item: string) => {
|
const props = withDefaults(
|
||||||
console.log(item, 'item____')
|
defineProps<{
|
||||||
emit('update:icon', item)
|
icon: any
|
||||||
}
|
}>(),
|
||||||
|
{
|
||||||
|
icon: '',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const emit = defineEmits(['update:icon'])
|
const selectIconItem = (item: string) => {
|
||||||
|
emit('update:icon', item)
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
icon: any
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
icon: ''
|
|
||||||
}
|
}
|
||||||
)
|
|
||||||
|
const handleCloseIcon = () => {
|
||||||
|
emit('update:icon', '')
|
||||||
|
}
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:icon'])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.show-icon {
|
.show-icon {
|
||||||
width: 45px;
|
width: 80px;
|
||||||
height: 32px;
|
height: 35px;
|
||||||
border: 1px solid #dcdfe6;
|
border: 1px solid #dcdfe6;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.select-icon-item {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
height: 300px;
|
|
||||||
overflow: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.iconfont {
|
.close-icon {
|
||||||
font-size: 46px;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,196 @@
|
||||||
<template>
|
<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>
|
</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>
|
<style lang="scss" scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
:to="{
|
:to="{
|
||||||
path: '/setting/storage/edit',
|
path: '/setting/storage/edit',
|
||||||
query: {
|
query: {
|
||||||
engine: scope.row.engine,
|
alias: scope.row.alias,
|
||||||
},
|
},
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue