初始化
This commit is contained in:
30
easyflow-ui-admin/app/src/views/config/apikey/SysApiKey.vue
Normal file
30
easyflow-ui-admin/app/src/views/config/apikey/SysApiKey.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { ElDialog } from 'element-plus';
|
||||
|
||||
import SysApiKeyList from '#/views/config/apikey/SysApiKeyList.vue';
|
||||
import SysApiKeyResourcePermissionList from '#/views/config/apikey/SysApiKeyResourcePermissionList.vue';
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
</script>
|
||||
<template>
|
||||
<div class="sys-apikey-container">
|
||||
<SysApiKeyList />
|
||||
<ElDialog
|
||||
v-model="dialogVisible"
|
||||
draggable
|
||||
:close-on-click-modal="false"
|
||||
align-center
|
||||
>
|
||||
<SysApiKeyResourcePermissionList />
|
||||
</ElDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sys-apikey-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
201
easyflow-ui-admin/app/src/views/config/apikey/SysApiKeyList.vue
Normal file
201
easyflow-ui-admin/app/src/views/config/apikey/SysApiKeyList.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { markRaw, ref } from 'vue';
|
||||
|
||||
import { Delete, MoreFilled, Plus } from '@element-plus/icons-vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElDialog,
|
||||
ElDropdown,
|
||||
ElDropdownItem,
|
||||
ElDropdownMenu,
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
ElTag,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
|
||||
import PageData from '#/components/page/PageData.vue';
|
||||
import { $t } from '#/locales';
|
||||
import SysApiKeyResourcePermissionList from '#/views/config/apikey/SysApiKeyResourcePermissionList.vue';
|
||||
|
||||
import SysApiKeyModal from './SysApiKeyModal.vue';
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const pageDataRef = ref();
|
||||
const saveDialog = ref();
|
||||
const headerButtons = [
|
||||
{
|
||||
key: 'addApiKey',
|
||||
text: $t('sysApiKey.addApiKey'),
|
||||
icon: markRaw(Plus),
|
||||
type: 'primary',
|
||||
data: { action: 'create' },
|
||||
permission: '',
|
||||
},
|
||||
];
|
||||
|
||||
const handleSearch = (params: string) => {
|
||||
pageDataRef.value.setQuery({ apiKey: params, isQueryOr: true });
|
||||
};
|
||||
const headerButtonClick = (action: any) => {
|
||||
if (action.key === 'addApiKey') {
|
||||
addNewApiKey();
|
||||
} else if (action.key === 'addPermission') {
|
||||
showAddPermissionDialog({});
|
||||
}
|
||||
};
|
||||
|
||||
function reset(formEl?: FormInstance) {
|
||||
formEl?.resetFields();
|
||||
pageDataRef.value.setQuery({});
|
||||
}
|
||||
|
||||
function showDialog(row: any) {
|
||||
saveDialog.value.openDialog({ ...row });
|
||||
}
|
||||
function showAddPermissionDialog(_row: any) {
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
const dialogVisible = ref(false);
|
||||
function remove(row: any) {
|
||||
ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
|
||||
confirmButtonText: $t('message.ok'),
|
||||
cancelButtonText: $t('message.cancel'),
|
||||
type: 'warning',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
api
|
||||
.post('/api/v1/sysApiKey/remove', { id: row.id })
|
||||
.then((res) => {
|
||||
instance.confirmButtonLoading = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
reset(formRef.value);
|
||||
done();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
}).catch(() => {});
|
||||
}
|
||||
function addNewApiKey() {
|
||||
ElMessageBox.confirm(
|
||||
$t('sysApiKey.addApiKeyNotice'),
|
||||
$t('message.noticeTitle'),
|
||||
{
|
||||
confirmButtonText: $t('message.ok'),
|
||||
cancelButtonText: $t('message.cancel'),
|
||||
type: 'warning',
|
||||
},
|
||||
).then(() => {
|
||||
api.post('/api/v1/sysApiKey/key/save', {}).then((res) => {
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success($t('message.saveOkMessage'));
|
||||
pageDataRef.value.setQuery({});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full flex-col gap-6 p-6">
|
||||
<SysApiKeyModal ref="saveDialog" @reload="reset" />
|
||||
<HeaderSearch
|
||||
:buttons="headerButtons"
|
||||
@search="handleSearch"
|
||||
@button-click="headerButtonClick"
|
||||
/>
|
||||
|
||||
<div class="bg-background border-border flex-1 rounded-lg border p-5">
|
||||
<PageData
|
||||
ref="pageDataRef"
|
||||
page-url="/api/v1/sysApiKey/page"
|
||||
:page-size="10"
|
||||
>
|
||||
<template #default="{ pageList }">
|
||||
<ElTable :data="pageList" border>
|
||||
<ElTableColumn
|
||||
prop="apiKey"
|
||||
:label="$t('sysApiKey.apiKey')"
|
||||
width="280"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.apiKey }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="created" :label="$t('sysApiKey.created')">
|
||||
<template #default="{ row }">
|
||||
{{ row.created }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="status" :label="$t('sysApiKey.status')">
|
||||
<template #default="{ row }">
|
||||
<ElTag type="primary" v-if="row.status === 1">
|
||||
{{ $t('sysApiKey.actions.enable') }}
|
||||
</ElTag>
|
||||
<ElTag type="danger" v-else-if="row.status === 0">
|
||||
{{ $t('sysApiKey.actions.disable') }}
|
||||
</ElTag>
|
||||
<ElTag type="warning" v-else>
|
||||
{{ $t('sysApiKey.actions.failure') }}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="expiredAt" :label="$t('sysApiKey.expiredAt')">
|
||||
<template #default="{ row }">
|
||||
{{ row.expiredAt }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
:label="$t('common.handle')"
|
||||
width="90"
|
||||
align="right"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center gap-3">
|
||||
<ElButton link type="primary" @click="showDialog(row)">
|
||||
{{ $t('button.edit') }}
|
||||
</ElButton>
|
||||
|
||||
<ElDropdown>
|
||||
<ElButton link :icon="MoreFilled" />
|
||||
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
<ElDropdownItem @click="remove(row)">
|
||||
<ElButton link :icon="Delete" type="danger">
|
||||
{{ $t('button.delete') }}
|
||||
</ElButton>
|
||||
</ElDropdownItem>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
</template>
|
||||
</PageData>
|
||||
</div>
|
||||
<ElDialog
|
||||
v-model="dialogVisible"
|
||||
:title="$t('sysApiKeyResourcePermission.addPermission')"
|
||||
draggable
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<SysApiKeyResourcePermissionList />
|
||||
</ElDialog>
|
||||
</div>
|
||||
</template>
|
||||
264
easyflow-ui-admin/app/src/views/config/apikey/SysApiKeyModal.vue
Normal file
264
easyflow-ui-admin/app/src/views/config/apikey/SysApiKeyModal.vue
Normal file
@@ -0,0 +1,264 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import {
|
||||
ElAlert,
|
||||
ElButton,
|
||||
ElCheckbox,
|
||||
ElCheckboxGroup,
|
||||
ElDatePicker,
|
||||
ElDialog,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElMessage,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import DictSelect from '#/components/dict/DictSelect.vue';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
// 定义权限接口
|
||||
interface ResourcePermission {
|
||||
id: number;
|
||||
title: string;
|
||||
requestInterface: string;
|
||||
}
|
||||
|
||||
// 定义表单数据接口
|
||||
interface Entity {
|
||||
apiKey: string;
|
||||
status: number | string;
|
||||
deptId: number | string;
|
||||
expiredAt: Date | null | string;
|
||||
permissionIds: (number | string)[]; // 绑定值：权限 ID 数组
|
||||
id?: number; // 编辑时的主键
|
||||
}
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
|
||||
// 表单实例
|
||||
const saveForm = ref<FormInstance>();
|
||||
// 对话框状态
|
||||
const dialogVisible = ref(false);
|
||||
const isAdd = ref(true);
|
||||
// 表单数据（初始化默认值）
|
||||
const entity = ref<Entity>({
|
||||
apiKey: '',
|
||||
status: '',
|
||||
deptId: '',
|
||||
expiredAt: null,
|
||||
permissionIds: [],
|
||||
});
|
||||
// 加载状态
|
||||
const btnLoading = ref(false);
|
||||
// 资源权限列表
|
||||
const resourcePermissionList = ref<ResourcePermission[]>([]);
|
||||
|
||||
// 表单校验规则（必填项校验）
|
||||
const rules = ref({
|
||||
status: [
|
||||
{
|
||||
required: true,
|
||||
message: $t('message.pleaseSelect', { name: $t('sysApiKey.status') }),
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
expiredAt: [
|
||||
{
|
||||
required: true,
|
||||
message: $t('message.pleaseSelect', { name: $t('sysApiKey.expiredAt') }),
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
function openDialog(row: Partial<Entity> = {}) {
|
||||
saveForm.value?.resetFields();
|
||||
entity.value = {
|
||||
apiKey: '',
|
||||
status: '',
|
||||
deptId: '',
|
||||
expiredAt: null,
|
||||
permissionIds: [],
|
||||
...row,
|
||||
};
|
||||
isAdd.value = !row.id;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 获取资源权限列表
|
||||
function getResourcePermissionList() {
|
||||
api
|
||||
.get('/api/v1/sysApiKeyResourcePermission/list')
|
||||
.then((res) => {
|
||||
if (res.errorCode === 0) {
|
||||
resourcePermissionList.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.message || $t('message.getDataError'));
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.error($t('message.getDataError'));
|
||||
});
|
||||
}
|
||||
|
||||
// 保存表单
|
||||
function save() {
|
||||
saveForm.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
const url = isAdd.value
|
||||
? 'api/v1/sysApiKey/save'
|
||||
: 'api/v1/sysApiKey/update';
|
||||
api
|
||||
.post(url, entity.value)
|
||||
.then((res) => {
|
||||
btnLoading.value = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message || $t('message.saveOkMessage'));
|
||||
emit('reload');
|
||||
closeDialog();
|
||||
} else {
|
||||
ElMessage.error(res.message || $t('message.saveFailMessage'));
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
ElMessage.error($t('message.saveFailMessage'));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
function closeDialog() {
|
||||
saveForm.value?.resetFields();
|
||||
// 重置表单数据
|
||||
entity.value = {
|
||||
apiKey: '',
|
||||
status: '',
|
||||
deptId: '',
|
||||
expiredAt: null,
|
||||
permissionIds: [],
|
||||
};
|
||||
isAdd.value = true;
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getResourcePermissionList();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="dialogVisible"
|
||||
draggable
|
||||
:title="isAdd ? $t('button.add') : $t('button.edit')"
|
||||
:before-close="closeDialog"
|
||||
:close-on-click-modal="false"
|
||||
width="50%"
|
||||
>
|
||||
<ElForm
|
||||
label-width="120px"
|
||||
ref="saveForm"
|
||||
:model="entity"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
class="form-container"
|
||||
>
|
||||
<!-- 状态选择 -->
|
||||
<ElFormItem prop="status" :label="$t('sysApiKey.status')">
|
||||
<DictSelect
|
||||
v-model="entity.status"
|
||||
dict-code="dataStatus"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem prop="expiredAt" :label="$t('sysApiKey.expiredAt')">
|
||||
<ElDatePicker
|
||||
v-model="entity.expiredAt"
|
||||
type="datetime"
|
||||
:placeholder="
|
||||
$t('message.pleaseSelect', { name: $t('sysApiKey.expiredAt') })
|
||||
"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem
|
||||
prop="permissions"
|
||||
:label="$t('sysApiKey.permissions')"
|
||||
class="permission-form-item"
|
||||
>
|
||||
<ElAlert type="info">
|
||||
接口信息请运行：tech.easyflow.publicapi.SyncApis 的 main
|
||||
方法同步到数据库。
|
||||
</ElAlert>
|
||||
<ElCheckboxGroup
|
||||
v-model="entity.permissionIds"
|
||||
class="permission-checkbox-group"
|
||||
>
|
||||
<ElCheckbox
|
||||
v-for="item in resourcePermissionList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
class="permission-checkbox"
|
||||
>
|
||||
{{ item.requestInterface }} - {{ item.title }}
|
||||
</ElCheckbox>
|
||||
</ElCheckboxGroup>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
|
||||
<template #footer>
|
||||
<ElButton @click="closeDialog">
|
||||
{{ $t('button.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
@click="save"
|
||||
:loading="btnLoading"
|
||||
:disabled="btnLoading"
|
||||
>
|
||||
{{ $t('button.save') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-container {
|
||||
max-height: 60vh;
|
||||
padding-right: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.permission-form-item .el-form-item__content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.permission-checkbox {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.form-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.form-container::-webkit-scrollbar-thumb {
|
||||
background-color: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,157 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { Delete, MoreFilled, Plus } from '@element-plus/icons-vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElDropdown,
|
||||
ElDropdownItem,
|
||||
ElDropdownMenu,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import PageData from '#/components/page/PageData.vue';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import SysApiKeyResourcePermissionModal from './SysApiKeyResourcePermissionModal.vue';
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const pageDataRef = ref();
|
||||
const saveDialog = ref();
|
||||
const formInline = ref({
|
||||
id: '',
|
||||
});
|
||||
function search(formEl: FormInstance | undefined) {
|
||||
formEl?.validate((valid) => {
|
||||
if (valid) {
|
||||
pageDataRef.value.setQuery(formInline.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
function reset(formEl: FormInstance | undefined) {
|
||||
formEl?.resetFields();
|
||||
pageDataRef.value.setQuery({});
|
||||
}
|
||||
function showDialog(row: any) {
|
||||
saveDialog.value.openDialog({ ...row });
|
||||
}
|
||||
function remove(row: any) {
|
||||
ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
|
||||
confirmButtonText: $t('message.ok'),
|
||||
cancelButtonText: $t('message.cancel'),
|
||||
type: 'warning',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
api
|
||||
.post('/api/v1/sysApiKeyResourcePermission/remove', { id: row.id })
|
||||
.then((res) => {
|
||||
instance.confirmButtonLoading = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
reset(formRef.value);
|
||||
done();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
}).catch(() => {});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container !m-0 !pl-0">
|
||||
<SysApiKeyResourcePermissionModal ref="saveDialog" @reload="reset" />
|
||||
<div class="flex items-center justify-between">
|
||||
<ElForm ref="formRef" :inline="true" :model="formInline">
|
||||
<ElFormItem prop="title" class="!mr-3">
|
||||
<ElInput
|
||||
v-model="formInline.title"
|
||||
:placeholder="$t('sysApiKeyResourcePermission.title')"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton @click="search(formRef)" type="primary">
|
||||
{{ $t('button.query') }}
|
||||
</ElButton>
|
||||
<ElButton @click="reset(formRef)">
|
||||
{{ $t('button.reset') }}
|
||||
</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<div class="mb-5">
|
||||
<ElButton @click="showDialog({})" type="primary">
|
||||
<ElIcon class="mr-1">
|
||||
<Plus />
|
||||
</ElIcon>
|
||||
{{ $t('button.add') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</div>
|
||||
<PageData
|
||||
ref="pageDataRef"
|
||||
page-url="/api/v1/sysApiKeyResourcePermission/page"
|
||||
:page-size="10"
|
||||
>
|
||||
<template #default="{ pageList }">
|
||||
<ElTable :data="pageList" border>
|
||||
<ElTableColumn
|
||||
prop="requestInterface"
|
||||
:label="$t('sysApiKeyResourcePermission.requestInterface')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.requestInterface }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="title"
|
||||
:label="$t('sysApiKeyResourcePermission.title')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.title }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="$t('common.handle')" width="90" align="right">
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center gap-3">
|
||||
<ElButton link type="primary" @click="showDialog(row)">
|
||||
{{ $t('button.edit') }}
|
||||
</ElButton>
|
||||
|
||||
<ElDropdown>
|
||||
<ElButton link :icon="MoreFilled" />
|
||||
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
<ElDropdownItem @click="remove(row)">
|
||||
<ElButton link :icon="Delete" type="danger">
|
||||
{{ $t('button.delete') }}
|
||||
</ElButton>
|
||||
</ElDropdownItem>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
</template>
|
||||
</PageData>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,116 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import {
|
||||
ElButton,
|
||||
ElDialog,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElMessage,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
// vue
|
||||
onMounted(() => {});
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
const saveForm = ref<FormInstance>();
|
||||
// variables
|
||||
const dialogVisible = ref(false);
|
||||
const isAdd = ref(true);
|
||||
const entity = ref<any>({
|
||||
requestInterface: '',
|
||||
title: '',
|
||||
});
|
||||
const btnLoading = ref(false);
|
||||
const rules = ref({});
|
||||
// functions
|
||||
function openDialog(row: any) {
|
||||
if (row.id) {
|
||||
isAdd.value = false;
|
||||
}
|
||||
entity.value = row;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
function save() {
|
||||
saveForm.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
api
|
||||
.post(
|
||||
isAdd.value
|
||||
? 'api/v1/sysApiKeyResourcePermission/save'
|
||||
: 'api/v1/sysApiKeyResourcePermission/update',
|
||||
entity.value,
|
||||
)
|
||||
.then((res) => {
|
||||
btnLoading.value = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
emit('reload');
|
||||
closeDialog();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function closeDialog() {
|
||||
saveForm.value?.resetFields();
|
||||
isAdd.value = true;
|
||||
entity.value = {};
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="dialogVisible"
|
||||
draggable
|
||||
:title="isAdd ? $t('button.add') : $t('button.edit')"
|
||||
:before-close="closeDialog"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<ElForm
|
||||
label-width="120px"
|
||||
ref="saveForm"
|
||||
:model="entity"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
>
|
||||
<ElFormItem
|
||||
prop="requestInterface"
|
||||
:label="$t('sysApiKeyResourcePermission.requestInterface')"
|
||||
>
|
||||
<ElInput v-model.trim="entity.requestInterface" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="title" :label="$t('sysApiKeyResourcePermission.title')">
|
||||
<ElInput v-model.trim="entity.title" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="closeDialog">
|
||||
{{ $t('button.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
@click="save"
|
||||
:loading="btnLoading"
|
||||
:disabled="btnLoading"
|
||||
>
|
||||
{{ $t('button.save') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import {
|
||||
ElButton,
|
||||
ElDatePicker,
|
||||
ElDialog,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElMessage,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import DictSelect from '#/components/dict/DictSelect.vue';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
// vue
|
||||
onMounted(() => {});
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
const saveForm = ref<FormInstance>();
|
||||
// variables
|
||||
const dialogVisible = ref(false);
|
||||
const isAdd = ref(true);
|
||||
const entity = ref<any>({
|
||||
apiKey: '',
|
||||
status: '',
|
||||
deptId: '',
|
||||
expiredAt: '',
|
||||
});
|
||||
const btnLoading = ref(false);
|
||||
const rules = ref({});
|
||||
|
||||
// functions
|
||||
function openDialog(row: any) {
|
||||
if (row.id) {
|
||||
isAdd.value = false;
|
||||
}
|
||||
entity.value = row;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
function save() {
|
||||
saveForm.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
api
|
||||
.post(
|
||||
isAdd.value ? 'api/v1/sysApiKey/save' : 'api/v1/sysApiKey/update',
|
||||
entity.value,
|
||||
)
|
||||
.then((res) => {
|
||||
btnLoading.value = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
emit('reload');
|
||||
closeDialog();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
saveForm.value?.resetFields();
|
||||
isAdd.value = true;
|
||||
entity.value = {};
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
const resourcePermissionList = ref([]);
|
||||
function getResourcePermissionList() {
|
||||
api.get('/api/v1/sysApiKeyResourcePermission/list').then((res) => {
|
||||
console.log('资源');
|
||||
console.log(res);
|
||||
if (res.errorCode === 0) {
|
||||
resourcePermissionList.value = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
getResourcePermissionList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="dialogVisible"
|
||||
draggable
|
||||
:title="isAdd ? $t('button.add') : $t('button.edit')"
|
||||
:before-close="closeDialog"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<ElForm
|
||||
label-width="120px"
|
||||
ref="saveForm"
|
||||
:model="entity"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
>
|
||||
<ElFormItem prop="status" :label="$t('sysApiKey.status')">
|
||||
<DictSelect v-model="entity.status" dict-code="dataStatus" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="expiredAt" :label="$t('sysApiKey.expiredAt')">
|
||||
<ElDatePicker v-model="entity.expiredAt" type="datetime" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="closeDialog">
|
||||
{{ $t('button.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
@click="save"
|
||||
:loading="btnLoading"
|
||||
:disabled="btnLoading"
|
||||
>
|
||||
{{ $t('button.save') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
161
easyflow-ui-admin/app/src/views/config/settings/Settings.vue
Normal file
161
easyflow-ui-admin/app/src/views/config/settings/Settings.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { $t } from '@easyflow/locales';
|
||||
|
||||
import {
|
||||
ElAlert,
|
||||
ElButton,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElMessage,
|
||||
ElOption,
|
||||
ElSelect,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request.js';
|
||||
import providerList from '#/views/ai/model/modelUtils/providerList.json';
|
||||
|
||||
const providerOptions =
|
||||
ref<Array<{ label: string; options: any; value: string }>>(providerList);
|
||||
const brands = ref([]);
|
||||
const llmOptions = ref([]);
|
||||
|
||||
// 获取品牌接口数据
|
||||
function getBrands() {
|
||||
api.get('/api/v1/modelProvider/list').then((res) => {
|
||||
if (res.errorCode === 0) {
|
||||
brands.value = res.data;
|
||||
llmOptions.value = formatLlmList(res.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
function getOptions() {
|
||||
api
|
||||
.get(
|
||||
'/api/v1/sysOption/list?keys=model_of_chat&keys=chatgpt_endpoint&keys=chatgpt_chatPath&keys=chatgpt_api_key&keys=chatgpt_model_name',
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.errorCode === 0) {
|
||||
entity.value = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
getOptions();
|
||||
getBrands();
|
||||
});
|
||||
|
||||
const entity = ref({
|
||||
model_of_chat: '',
|
||||
chatgpt_api_key: '',
|
||||
chatgpt_chatPath: '',
|
||||
chatgpt_endpoint: '',
|
||||
chatgpt_model_name: '',
|
||||
});
|
||||
|
||||
function formatLlmList(data) {
|
||||
return data.map((item) => {
|
||||
const extra = new Map([
|
||||
['chatPath', item.options?.chatPath],
|
||||
['llmEndpoint', item.options?.llmEndpoint],
|
||||
]);
|
||||
return {
|
||||
label: item.title,
|
||||
value: item.key,
|
||||
extra,
|
||||
};
|
||||
});
|
||||
}
|
||||
function handleChangeModel(value) {
|
||||
const extra = providerList.find((item) => item.value === value);
|
||||
entity.value.chatgpt_chatPath = extra.options.chatPath;
|
||||
entity.value.chatgpt_endpoint = extra.options.llmEndpoint;
|
||||
}
|
||||
function handleSave() {
|
||||
api.post('/api/v1/sysOption/save', entity.value).then((res) => {
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success($t('message.saveOkMessage'));
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="settings-container">
|
||||
<div class="settings-config-container border-border border">
|
||||
<div class="mb-6">
|
||||
{{ $t('settingsConfig.systemAIFunctionSettings') }}
|
||||
</div>
|
||||
<ElAlert
|
||||
class="!mb-5"
|
||||
:title="$t('settingsConfig.note')"
|
||||
type="warning"
|
||||
/>
|
||||
<ElForm :model="entity" class="demo-form-inline" label-width="150px">
|
||||
<ElFormItem :label="$t('settingsConfig.modelOfChat')">
|
||||
<ElSelect
|
||||
v-model="entity.model_of_chat"
|
||||
clearable
|
||||
@change="handleChangeModel"
|
||||
>
|
||||
<ElOption
|
||||
v-for="item in providerOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="$t('settingsConfig.modelName')">
|
||||
<ElInput v-model="entity.chatgpt_model_name" clearable />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="Endpoint">
|
||||
<ElInput v-model="entity.chatgpt_endpoint" clearable />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="ChatPath">
|
||||
<ElInput v-model="entity.chatgpt_chatPath" clearable />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="ApiKey">
|
||||
<ElInput v-model="entity.chatgpt_api_key" clearable />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<div class="settings-button-container">
|
||||
<ElButton type="primary" @click="handleSave">
|
||||
{{ $t('button.save') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.settings-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 30px 143px;
|
||||
}
|
||||
|
||||
.settings-config-container {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: var(--el-bg-color);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.settings-notice {
|
||||
margin-bottom: 20px;
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
|
||||
.settings-button-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user