maxkb/ui/src/views/applicaiton-overview/component/LimitDialog.vue
2024-03-14 14:15:00 +08:00

111 lines
2.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<el-dialog title="访问限制" v-model="dialogVisible">
<el-form label-position="top" ref="limitFormRef" :model="form">
<el-form-item label="客户端提问限制">
<el-input-number
v-model="form.access_num"
:min="0"
:step="1"
controls-position="right"
step-strictly
/>
<span class="ml-4">次 / 天</span>
</el-form-item>
<el-form-item label="白名单" @click.prevent>
<el-switch size="small" v-model="form.white_active"></el-switch>
</el-form-item>
<el-form-item>
<el-input
v-model="form.white_list"
placeholder="请输入允许嵌入第三方的源地址一行一个http://127.0.0.1:5678 或 https://dataease.io"
:rows="10"
type="textarea"
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
<el-button type="primary" @click="submit(limitFormRef)" :loading="loading">
保存
</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import applicationApi from '@/api/application'
import { MsgSuccess, MsgConfirm } from '@/utils/message'
const route = useRoute()
const {
params: { id }
} = route
const emit = defineEmits(['refresh'])
const limitFormRef = ref()
const form = ref<any>({
access_num: 0,
white_active: true,
white_list: ''
})
const dialogVisible = ref<boolean>(false)
const loading = ref(false)
watch(dialogVisible, (bool) => {
if (!bool) {
form.value = {
access_num: 0,
white_active: true,
white_list: ''
}
}
})
const open = (data: any) => {
form.value.access_num = data.access_num
form.value.white_active = data.white_active
form.value.white_list = data.white_list?.length ? data.white_list?.join('\n') : ''
dialogVisible.value = true
}
const submit = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
const obj = {
white_list: form.value.white_list ? form.value.white_list.split('\n') : [],
white_active: form.value.white_active,
access_num: form.value.access_num
}
applicationApi.putAccessToken(id as string, obj, loading).then((res) => {
emit('refresh')
MsgSuccess('设置成功')
dialogVisible.value = false
})
} else {
console.log('error submit!', fields)
}
})
}
defineExpose({ open })
</script>
<style lang="scss" scope>
.embed-dialog {
.code {
color: var(--app-text-color) !important;
background: var(--app-layout-bg-color);
font-weight: 400;
font-size: 13px;
white-space: pre;
height: 180px;
}
}
</style>