15308555518/ MaxKB
1
0
Fork 0
mirror of https://github.com/1Panel-dev/MaxKB.git synced 2025-12-26 10:02:46 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: tool

This commit is contained in:
wangdan-fit2cloud 2025-05-22 18:38:06 +08:00
parent 6b02e5fa9d
commit 75b31ecba9
20 changed files with 396 additions and 450 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/locales/lang/en-US/common.ts
View File

@ -48,6 +48,7 @@ export default {
},
status: {
label: 'Status',
disable: 'Disable',
enabled: 'Enabled',
disabled: 'Disabled',
enableSuccess: 'Successful',

79
ui/src/locales/lang/en-US/views/function-lib.ts
View File

@ -1,79 +0,0 @@
export default {
title: 'Function',
internalTitle: 'Internal Function',
added: 'Added',
createFunction: 'Create Function',
editFunction: 'Edit Function',
copyFunction: 'Copy Function',
importFunction: 'Import Function',
searchBar: {
placeholder: 'Search by function name'
},
setting: {
disabled: 'Disabled'
},
tip: {
saveMessage: 'Unsaved changes will be lost. Are you sure you want to exit?'
},
delete: {
confirmTitle: 'Confirm deletion of function:',
confirmMessage:
'Deleting this function will cause errors in APP that reference it when they are queried. Please proceed with caution.'
},
disabled: {
confirmTitle: 'Confirm disable function:',
confirmMessage:
'Disabling this function will cause errors in APP that reference it when they are queried. Please proceed with caution.'
},
functionForm: {
title: {
copy: 'Copy',
baseInfo: 'Basic Information'
},
form: {
functionName: {
label: 'Name',
placeholder: 'Please enter the function name',
requiredMessage: 'Please enter the function name'
},
functionDescription: {
label: 'Description',
placeholder: 'Please enter a description of the function'
},
permission_type: {
label: 'Permissions',
requiredMessage: 'Please select'
},
paramName: {
label: 'Parameter Name',
placeholder: 'Please enter the parameter name',
requiredMessage: 'Please enter the parameter name'
},
dataType: {
label: 'Data Type'
},
source: {
label: 'Source',
custom: 'Custom',
reference: 'Reference Parameter'
},
required: {
label: 'Required'
},
param: {
paramInfo1: 'Displayed when using the function',
paramInfo2: 'Not displayed when using the function',
code: 'Content (Python)',
selectPlaceholder: 'Please select parameter',
inputPlaceholder: 'Please enter parameter values',
},
debug: {
run: 'Run',
output: 'Output',
runResult: 'Run Result',
runSuccess: 'Successful',
runFailed: 'Run Failed'
}
}
}
}

4
ui/src/locales/lang/en-US/views/index.ts
View File

@ -3,7 +3,7 @@ import application from './application'
import applicationOverview from './application-overview'
import dataset from './dataset'
import system from './system'
import functionLib from './function-lib'
import tool from './tool'
import user from './user'
import team from './team'
import model from './model'
@ -19,7 +19,7 @@ export default {
application,
applicationOverview,
system,
functionLib,
tool,
user,
team,
model,

67
ui/src/locales/lang/en-US/views/tool.ts Normal file
View File

@ -0,0 +1,67 @@
export default {
title: 'Tool',
internalTitle: 'Internal Tool',
added: 'Added',
createTool: 'Create Tool',
editTool: 'Edit Tool',
copyTool: 'Copy Tool',
importTool: 'Import Tool',
searchBar: {
placeholder: 'Search by tool name',
},
tip: {
saveMessage: 'Unsaved changes will be lost. Are you sure you want to exit?',
},
delete: {
confirmTitle: 'Confirm deletion of tool:',
confirmMessage:
'Deleting this tool will cause errors in APP that reference it when they are queried. Please proceed with caution.',
},
disabled: {
confirmTitle: 'Confirm disable tool:',
confirmMessage:
'Disabling this tool will cause errors in APP that reference it when they are queried. Please proceed with caution.',
},
form: {
toolName: {
label: 'Name',
placeholder: 'Please enter the tool name',
requiredMessage: 'Please enter the tool name',
},
toolDescription: {
label: 'Description',
placeholder: 'Please enter a description of the tool',
},
paramName: {
label: 'Parameter Name',
placeholder: 'Please enter the parameter name',
requiredMessage: 'Please enter the parameter name',
},
dataType: {
label: 'Data Type',
},
source: {
label: 'Source',
custom: 'Custom',
reference: 'Reference Parameter',
},
required: {
label: 'Required',
},
param: {
paramInfo1: 'Displayed when using the tool',
paramInfo2: 'Not displayed when using the tool',
code: 'Content (Python)',
selectPlaceholder: 'Please select parameter',
inputPlaceholder: 'Please enter parameter values',
},
debug: {
run: 'Run',
output: 'Output',
runResult: 'Run Result',
runSuccess: 'Successful',
runFailed: 'Run Failed',
},
},
}

1
ui/src/locales/lang/zh-CN/common.ts
View File

@ -52,6 +52,7 @@ export default {
},
status: {
label: '状态',
disable: '禁用',
enabled: '已启用',
disabled: '已禁用',
enableSuccess: '启用成功',

2
ui/src/locales/lang/zh-CN/views/index.ts
View File

@ -7,7 +7,6 @@ import tool from './tool'
// import applicationOverview from './application-overview'
// import system from './system'
// import functionLib from './function-lib'
// import user from './user'
// import team from './team'
@ -27,7 +26,6 @@ export default {
// application,
// applicationOverview,
// system,
// functionLib,
// user,
// team,
// document,

48
ui/src/locales/lang/zh-CN/views/tool.ts
View File

@ -1,3 +1,51 @@
export default {
title: '工具',
createTool: '创建工具',
editTool: '编辑工具',
disabled: {
confirmTitle: '是否禁用工具：',
confirmMessage: '禁用后，引用了该工具的应用提问时会报错 ，请谨慎操作。',
},
form: {
toolName: {
label: '名称',
name: '工具名称',
placeholder: '请输入工具名称',
requiredMessage: '请输入工具名称',
},
toolDescription: {
label: '描述',
placeholder: '请输入工具的描述',
},
paramName: {
label: '参数名',
placeholder: '请输入参数名',
requiredMessage: '请输入参数名',
},
dataType: {
label: '数据类型',
},
source: {
label: '来源',
custom: '自定义',
reference: '引用参数',
},
required: {
label: '是否必填',
},
param: {
paramInfo1: '使用工具时显示',
paramInfo2: '使用工具时不显示',
code: '工具内容（Python）',
selectPlaceholder: '请选择参数',
inputPlaceholder: '请输入参数值',
},
debug: {
run: '运行',
output: '输出',
runResult: '运行结果',
runSuccess: '运行成功',
runFailed: '运行失败',
},
},
}

1
ui/src/locales/lang/zh-Hant/common.ts
View File

@ -48,6 +48,7 @@ export default {
},
status: {
label: '狀態',
disable: '停用',
enabled: '已啟用',
disabled: '已停用',
enableSuccess: '啟用成功',

77
ui/src/locales/lang/zh-Hant/views/function-lib.ts
View File

@ -1,77 +0,0 @@
export default {
title: '函數庫',
internalTitle: '內置函數',
added: '已新增',
createFunction: '建立函數',
editFunction: '編輯函數',
copyFunction: '複製函數',
importFunction: '匯入函數',
searchBar: {
placeholder: '按函數名稱搜尋'
},
setting: {
disabled: '停用'
},
tip: {
saveMessage: '當前的更改尚未保存，確認退出嗎？'
},
delete: {
confirmTitle: '是否刪除函數：',
confirmMessage: '刪除後，引用該函數的應用在查詢時會報錯，請謹慎操作。'
},
disabled: {
confirmTitle: '是否停用函數：',
confirmMessage: '停用後，引用該函數的應用在查詢時會報錯，請謹慎操作。'
},
functionForm: {
title: {
copy: '副本',
baseInfo: '基礎信息'
},
form: {
functionName: {
label: '名稱',
placeholder: '請輸入函數名稱',
requiredMessage: '請輸入函數名稱'
},
functionDescription: {
label: '描述',
placeholder: '請輸入函數的描述'
},
permission_type: {
label: '權限',
requiredMessage: '請選擇'
},
paramName: {
label: '參數名',
placeholder: '請輸入參數名',
requiredMessage: '請輸入參數名'
},
dataType: {
label: '數據類型'
},
source: {
label: '來源',
custom: '自定義',
reference: '引用參數'
},
required: {
label: '是否必填'
},
param: {
paramInfo1: '使用函數時顯示',
paramInfo2: '使用函數時不顯示',
code: '函数内容（Python）',
selectPlaceholder: '請选择參數',
inputPlaceholder: '請輸入參數值',
},
debug: {
run: '運行',
output: '輸出',
runResult: '運行結果',
runSuccess: '運行成功',
runFailed: '運行失敗'
}
}
}
}

4
ui/src/locales/lang/zh-Hant/views/index.ts
View File

@ -3,7 +3,7 @@ import application from './application'
import applicationOverview from './application-overview'
import dataset from './dataset'
import system from './system'
import functionLib from './function-lib'
import tool from './tool'
import user from './user'
import team from './team'
import model from './model'
@ -19,7 +19,7 @@ export default {
application,
applicationOverview,
system,
functionLib,
tool,
user,
team,
model,

68
ui/src/locales/lang/zh-Hant/views/tool.ts Normal file
View File

@ -0,0 +1,68 @@
export default {
title: '工具',
internalTitle: '內置工具',
added: '已新增',
createTool: '建立工具',
editTool: '編輯工具',
copyTool: '複製工具',
importTool: '匯入工具',
searchBar: {
placeholder: '按工具名稱搜尋',
},
tip: {
saveMessage: '當前的更改尚未保存，確認退出嗎？',
},
delete: {
confirmTitle: '是否刪除工具：',
confirmMessage: '刪除後，引用該工具的應用在查詢時會報錯，請謹慎操作。',
},
disabled: {
confirmTitle: '是否停用工具：',
confirmMessage: '停用後，引用該工具的應用在查詢時會報錯，請謹慎操作。',
},
form: {
toolName: {
label: '名稱',
placeholder: '請輸入工具名稱',
requiredMessage: '請輸入工具名稱',
},
toolDescription: {
label: '描述',
placeholder: '請輸入工具的描述',
},
permission_type: {
label: '權限',
requiredMessage: '請選擇',
},
paramName: {
label: '參數名',
placeholder: '請輸入參數名',
requiredMessage: '請輸入參數名',
},
dataType: {
label: '數據類型',
},
source: {
label: '來源',
custom: '自定義',
reference: '引用參數',
},
required: {
label: '是否必填',
},
param: {
paramInfo1: '使用工具時顯示',
paramInfo2: '使用工具時不顯示',
code: '工具内容（Python）',
selectPlaceholder: '請选择參數',
inputPlaceholder: '請輸入參數值',
},
debug: {
run: '運行',
output: '輸出',
runResult: '運行結果',
runSuccess: '運行成功',
runFailed: '運行失敗',
},
},
}

70
ui/src/styles/element-plus.scss
View File

@ -3,6 +3,7 @@ $primary-color: #3370ff;
--el-color-primary: #3370ff;
--el-color-success: #34c724;
--el-text-color-primary: #1f2329;
--el-border-radius-base: 6px;
// --el-menu-item-height: 45px;
// --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
// --el-border-color: #dee0e3;
@ -28,7 +29,7 @@ $primary-color: #3370ff;
background: none;
}
.el-tree-node__content {
border-radius: 4px;
border-radius: var(--el-border-radius-base);
padding: 7px 0;
&:hover {
background: var(--app-text-color-light-1);
@ -75,7 +76,6 @@ $primary-color: #3370ff;
font-size: 16px;
}
// dropdown
.el-dropdown {
color: var(--el-text-color-primary);
@ -99,3 +99,69 @@ $primary-color: #3370ff;
background: var(--el-color-primary-light-9);
}
}
// message
.el-message {
--el-message-close-icon-color: var(--app-text-color-secondary);
}
.el-message-box {
--el-messagebox-font-size: 16px;
--el-messagebox-width: 475px;
padding: 24px;
.el-message-box__header {
padding: 0;
}
.el-message-box__title {
word-break: break-all;
width: 95%;
}
}
.el-message-box__content {
padding: 24px 0;
color: var(--app-text-color);
font-weight: 400;
}
.el-message-box__btns {
padding: 0;
button {
min-width: 80px;
&:nth-child(2) {
margin-left: 12px;
}
}
button.danger {
background: var(--el-color-danger);
border: var(--el-color-danger);
color: #ffffff;
}
}
.el-message-box__headerbtn {
right: 10px;
top: 16px;
.el-message-box__close {
font-size: 20px;
}
}
// drawer
.el-drawer {
.el-drawer__header {
padding: 16px 24px;
margin: 0;
border-bottom: 1px solid var(--el-border-color);
color: var(--app-text-color);
}
.el-drawer__body {
padding: 16px 24px;
}
.el-drawer__footer {
border-top: 1px solid var(--el-border-color);
padding: 16px 24px;
}
}
// popper
.el-popper {
--el-popper-border-radius: 6px;
}

4
ui/src/views/tool/component/AddInternalFunctionDialog.vue
View File

@ -1,6 +1,6 @@
<template>
<el-dialog
:title="$t('views.functionLib.functionForm.form.functionName.name')"
:title="$t('views.tool.form.toolName.name')"
v-model="dialogVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
@ -49,7 +49,7 @@ const rules = reactive({
name: [
{
required: true,
message: t('views.functionLib.functionForm.form.functionName.placeholder'),
message: t('views.tool.form.toolName.placeholder'),
trigger: 'blur'
}
]

4
ui/src/views/tool/component/EditAvatarDialog.vue
View File

@ -61,7 +61,7 @@
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import functionLibApi from '@/api/function-lib'
import ToolApi from '@/api/tool/tool'
import { cloneDeep } from 'lodash'
import { MsgError, MsgSuccess } from '@/utils/message'
import { defaultIcon, isAppIcon } from '@/utils/application'
@ -111,7 +111,7 @@ function submit() {
} else if (radioType.value === 'custom' && iconFile.value) {
let fd = new FormData()
fd.append('file', iconFile.value.raw)
functionLibApi.putFunctionLibIcon(detail.value.id, fd, loading).then((res: any) => {
toolApi.puttoolIcon(detail.value.id, fd, loading).then((res: any) => {
emit('refresh', res.data)
dialogVisible.value = false
})

16
ui/src/views/tool/component/FieldFormDialog.vue
View File

@ -18,34 +18,34 @@
:model="form"
require-asterisk-position="right"
>
<el-form-item :label="$t('views.functionLib.functionForm.form.paramName.label')" prop="name">
<el-form-item :label="$t('views.tool.form.paramName.label')" prop="name">
<el-input
v-model="form.name"
:placeholder="$t('views.functionLib.functionForm.form.paramName.placeholder')"
:placeholder="$t('views.tool.form.paramName.placeholder')"
maxlength="64"
show-word-limit
@blur="form.name = form.name.trim()"
/>
</el-form-item>
<el-form-item :label="$t('views.functionLib.functionForm.form.dataType.label')">
<el-form-item :label="$t('views.tool.form.dataType.label')">
<el-select v-model="form.type">
<el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item :label="$t('views.functionLib.functionForm.form.source.label')">
<el-form-item :label="$t('views.tool.form.source.label')">
<el-select v-model="form.source">
<el-option
:label="$t('views.functionLib.functionForm.form.source.reference')"
:label="$t('views.tool.form.source.reference')"
value="reference"
/>
<el-option
:label="$t('views.functionLib.functionForm.form.source.custom')"
:label="$t('views.tool.form.source.custom')"
value="custom"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('views.functionLib.functionForm.form.required.label')"
:label="$t('views.tool.form.required.label')"
@click.prevent
>
<el-switch size="small" v-model="form.is_required"></el-switch>
@ -85,7 +85,7 @@ const rules = reactive({
name: [
{
required: true,
message: t('views.functionLib.functionForm.form.paramName.placeholder'),
message: t('views.tool.form.paramName.placeholder'),
trigger: 'blur'
}
]

18
ui/src/views/tool/component/FunctionDebugDrawer.vue
View File

@ -47,7 +47,7 @@
:prop="'debug_field_list.' + index + '.value'"
:rules="{
required: item.is_required,
message: $t('views.functionLib.functionForm.form.param.inputPlaceholder'),
message: $t('views.tool.form.param.inputPlaceholder'),
trigger: 'blur'
}"
>
@ -61,7 +61,7 @@
</template>
<el-input
v-model="item.value"
:placeholder="$t('views.functionLib.functionForm.form.param.inputPlaceholder')"
:placeholder="$t('views.tool.form.param.inputPlaceholder')"
/>
</el-form-item>
</template>
@ -70,30 +70,30 @@
</div>
<el-button type="primary" @click="submit(FormRef)" :loading="loading">
{{ $t('views.functionLib.functionForm.form.debug.run') }}
{{ $t('views.tool.form.debug.run') }}
</el-button>
<div v-if="showResult" class="mt-8">
<h4 class="title-decoration-1 mb-16 mt-16">
{{ $t('views.functionLib.functionForm.form.debug.runResult') }}
{{ $t('views.tool.form.debug.runResult') }}
</h4>
<div class="mb-16">
<el-alert
v-if="isSuccess"
:title="$t('views.functionLib.functionForm.form.debug.runSuccess')"
:title="$t('views.tool.form.debug.runSuccess')"
type="success"
show-icon
:closable="false"
/>
<el-alert
v-else
:title="$t('views.functionLib.functionForm.form.debug.runFailed')"
:title="$t('views.tool.form.debug.runFailed')"
type="error"
show-icon
:closable="false"
/>
</div>
<p class="lighter mb-8">{{ $t('views.functionLib.functionForm.form.debug.output') }}</p>
<p class="lighter mb-8">{{ $t('views.tool.form.debug.output') }}</p>
<el-card
:class="isSuccess ? '' : 'danger'"
@ -110,7 +110,7 @@
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import functionLibApi from '@/api/function-lib'
import ToolApi from '@/api/tool/tool'
import type { FormInstance } from 'element-plus'
import DynamicsForm from '@/components/dynamics-form/index.vue'
@ -148,7 +148,7 @@ watch(debugVisible, (bool) => {
const submit = async (formEl: FormInstance | undefined) => {
const validate = formEl ? formEl.validate() : Promise.resolve()
Promise.all([dynamicsFormRef.value?.validate(), validate]).then(() => {
functionLibApi.postFunctionLibDebug(form.value, loading).then((res) => {
toolApi.posttoolDebug(form.value, loading).then((res) => {
if (res.code === 500) {
showResult.value = true
isSuccess.value = false

9
ui/src/views/tool/component/InitParamDrawer.vue
View File

@ -1,14 +1,7 @@
<template>
<el-drawer v-model="debugVisible" size="60%" :append-to-body="true">
<template #header>
<div class="flex align-center" style="margin-left: -8px">
<el-button class="cursor mr-4" link @click.prevent="debugVisible = false">
<el-icon :size="20">
<Back />
</el-icon>
</el-button>
<h4>{{ $t('common.param.initParam') }}</h4>
</div>
<h4>{{ $t('common.param.initParam') }}</h4>
</template>
<div>
<div v-if="form.init_field_list?.length > 0">

106
ui/src/views/tool/component/PermissionDialog.vue
View File

@ -1,106 +0,0 @@
<template>
<el-dialog
:title="$t('views.functionLib.functionForm.form.permission_type.label')"
v-model="dialogVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:destroy-on-close="true"
append-to-body
width="450"
>
<el-form
label-position="top"
ref="fieldFormRef"
:rules="rules"
:model="form"
require-asterisk-position="right"
>
<el-radio-group v-model="form.permission_type" class="radio-block">
<el-radio value="PRIVATE" size="large">
{{ $t('common.private') }}
<el-text type="info">{{
$t('views.template.templateForm.form.permissionType.privateDesc')
}}</el-text>
</el-radio>
<el-radio value="PUBLIC" size="large">
{{ $t('common.public') }}
<el-text type="info">{{
$t('views.template.templateForm.form.permissionType.publicDesc')
}}</el-text>
</el-radio>
</el-radio-group>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
<el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
{{ isEdit ? $t('common.save') : $t('common.add') }}
</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import type { FormInstance } from 'element-plus'
import { cloneDeep } from 'lodash'
import { t } from '@/locales'
import functionLibApi from '@/api/function-lib'
import { MsgSuccess } from '@/utils/message'
const emit = defineEmits(['refresh'])
const fieldFormRef = ref()
const loading = ref<boolean>(false)
const isEdit = ref(false)
const form = ref<any>({
permission_type: 'PRIVATE'
})
const rules = reactive({
permission_type: [
{
required: true,
message: t('views.functionLib.functionForm.form.paramName.placeholder'),
trigger: 'blur'
}
]
})
const dialogVisible = ref<boolean>(false)
watch(dialogVisible, (bool) => {
if (!bool) {
form.value = {
permission_type: 'PRIVATE'
}
isEdit.value = false
}
})
const open = (row: any) => {
if (row) {
form.value = cloneDeep(row)
isEdit.value = true
}
dialogVisible.value = true
}
const submit = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid) => {
if (valid) {
functionLibApi.putFunctionLib(form.value?.id as string, form.value, loading).then((res) => {
MsgSuccess(t('common.editSuccess'))
emit('refresh')
dialogVisible.value = false
})
}
})
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>

138
ui/src/views/tool/component/FunctionFormDrawer.vue → ui/src/views/tool/component/ToolFormDrawer.vue
View File

@ -5,7 +5,7 @@
</template>
<div>
<h4 class="title-decoration-1 mb-16">
{{ $t('views.functionLib.functionForm.title.baseInfo') }}
{{ $t('views.tool.functionForm.title.baseInfo') }}
</h4>
<el-form
ref="FormRef"
@ -17,7 +17,7 @@
@submit.prevent
>
<el-form-item
:label="$t('views.functionLib.functionForm.form.functionName.label')"
:label="$t('views.tool.form.toolName.label')"
prop="name"
>
<div class="flex w-full">
@ -55,12 +55,12 @@
<el-icon><EditPen /></el-icon>
</AppAvatar>
</div>
<AppAvatar shape="square" style="background: #34c724" class="mr-12" v-else>
<img src="@/assets/icon_function_outlined.svg" style="width: 75%" alt="" />
<AppAvatar shape="square" class="avatar-green" v-else>
<img src="@/assets/node/icon_tool.svg" style="width: 75%" alt="" />
</AppAvatar>
<el-input
v-model="form.name"
:placeholder="$t('views.functionLib.functionForm.form.functionName.placeholder')"
:placeholder="$t('views.tool.form.toolName.placeholder')"
maxlength="64"
show-word-limit
@blur="form.name = form.name?.trim()"
@ -68,45 +68,17 @@
</div>
</el-form-item>
<el-form-item :label="$t('views.functionLib.functionForm.form.functionDescription.label')">
<el-form-item :label="$t('views.tool.form.toolDescription.label')">
<el-input
v-model="form.desc"
type="textarea"
:placeholder="$t('views.functionLib.functionForm.form.functionDescription.placeholder')"
:placeholder="$t('views.tool.form.toolDescription.placeholder')"
maxlength="128"
show-word-limit
:autosize="{ minRows: 3 }"
@blur="form.desc = form.desc?.trim()"
/>
</el-form-item>
<!--
<el-form-item prop="permission_type">
<template #label>
<span>{{ $t('views.functionLib.functionForm.form.permission_type.label') }}</span>
</template>
<el-radio-group v-model="form.permission_type" class="card__radio">
<el-row :gutter="16">
<template v-for="(value, key) of PermissionType" :key="key">
<el-col :span="12">
<el-card
shadow="never"
class="mb-16"
:class="form.permission_type === key ? 'active' : ''"
>
<el-radio :value="key" size="large">
<p class="mb-4">{{ $t(value) }}</p>
<el-text type="info">
{{ $t(PermissionDesc[key]) }}
</el-text>
</el-radio>
</el-card>
</el-col>
</template>
</el-row>
</el-radio-group>
</el-form-item>
-->
</el-form>
<div class="flex-between">
<h4 class="title-decoration-1 mb-16">
@ -180,7 +152,7 @@
<h4 class="title-decoration-1 mb-16">
{{ $t('common.param.inputParam') }}
<el-text type="info" class="color-secondary">
{{ $t('views.functionLib.functionForm.form.param.paramInfo1') }}
{{ $t('views.tool.form.param.paramInfo1') }}
</el-text>
</h4>
<el-button link type="primary" @click="openAddDialog()">
@ -191,9 +163,9 @@
<el-table ref="inputFieldTableRef" :data="form.input_field_list" class="mb-16">
<el-table-column
prop="name"
:label="$t('views.functionLib.functionForm.form.paramName.label')"
:label="$t('views.tool.form.paramName.label')"
/>
<el-table-column :label="$t('views.functionLib.functionForm.form.dataType.label')">
<el-table-column :label="$t('views.tool.form.dataType.label')">
<template #default="{ row }">
<el-tag type="info" class="info-tag">{{ row.type }}</el-tag>
</template>
@ -207,13 +179,13 @@
</el-table-column>
<el-table-column
prop="source"
:label="$t('views.functionLib.functionForm.form.source.label')"
:label="$t('views.tool.form.source.label')"
>
<template #default="{ row }">
{{
row.source === 'custom'
? $t('views.functionLib.functionForm.form.source.custom')
: $t('views.functionLib.functionForm.form.source.reference')
? $t('views.tool.form.source.custom')
: $t('views.tool.form.source.reference')
}}
</template>
</el-table-column>
@ -237,16 +209,16 @@
</el-table-column>
</el-table>
<h4 class="title-decoration-1 mb-16">
{{ $t('views.functionLib.functionForm.form.param.code') }}
{{ $t('views.tool.form.param.code') }}
<span style="color: red; margin-left: -10px">*</span>
<el-text type="info" class="color-secondary">
{{ $t('views.functionLib.functionForm.form.param.paramInfo2') }}
{{ $t('views.tool.form.param.paramInfo2') }}
</el-text>
</h4>
<div class="mb-8" v-if="showEditor">
<CodemirrorEditor
:title="$t('views.functionLib.functionForm.form.param.code')"
:title="$t('views.tool.form.param.code')"
v-model="form.code"
@submitDialog="submitCodemirrorEditor"
/>
@ -254,7 +226,7 @@
<h4 class="title-decoration-1 mb-16 mt-16">
{{ $t('common.param.outputParam') }}
<el-text type="info" class="color-secondary">
{{ $t('views.functionLib.functionForm.form.param.paramInfo1') }}
{{ $t('views.tool.form.param.paramInfo1') }}
</el-text>
</h4>
<div class="flex-between border-r-4 p-8-12 mb-8 layout-bg lighter">
@ -274,8 +246,8 @@
<FunctionDebugDrawer ref="FunctionDebugDrawerRef" />
<FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
<UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshInitFieldList" />
<EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshFunctionLib" />
<!-- <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshInitFieldList" /> -->
<EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshtool" />
</el-drawer>
</template>
@ -283,20 +255,19 @@
import { ref, reactive, watch, nextTick } from 'vue'
import FieldFormDialog from './FieldFormDialog.vue'
import FunctionDebugDrawer from './FunctionDebugDrawer.vue'
import type { functionLibData } from '@/api/type/function-lib'
import functionLibApi from '@/api/function-lib'
import type { toolData } from '@/api/type/tool'
import ToolApi from '@/api/tool/tool'
import type { FormInstance } from 'element-plus'
import { MsgSuccess, MsgConfirm } from '@/utils/message'
import { cloneDeep } from 'lodash'
import { PermissionType, PermissionDesc } from '@/enums/model'
import { t } from '@/locales'
import UserFieldFormDialog from '@/workflow/nodes/base-node/component/UserFieldFormDialog.vue'
// import UserFieldFormDialog from '@/workflow/nodes/base-node/component/UserFieldFormDialog.vue'
import { isAppIcon } from '@/utils/application'
import EditAvatarDialog from './EditAvatarDialog.vue'
import Sortable from 'sortablejs'
const props = defineProps({
title: String
title: String,
})
const emit = defineEmits(['refresh'])
@ -316,14 +287,13 @@ const showEditor = ref(false)
const currentIndex = ref<any>(null)
const showEditIcon = ref(false)
const form = ref<functionLibData>({
const form = ref<toolData>({
name: '',
desc: '',
code: '',
icon: '',
input_field_list: [],
init_field_list: [],
permission_type: 'PRIVATE'
})
watch(visible, (bool) => {
@ -338,7 +308,6 @@ watch(visible, (bool) => {
icon: '',
input_field_list: [],
init_field_list: [],
permission_type: 'PRIVATE'
}
FormRef.value?.clearValidate()
}
@ -348,53 +317,12 @@ const rules = reactive({
name: [
{
required: true,
message: t('views.functionLib.functionForm.form.functionName.requiredMessage'),
trigger: 'blur'
}
message: t('views.tool.form.toolName.requiredMessage'),
trigger: 'blur',
},
],
permission_type: [
{
required: true,
message: t('views.functionLib.functionForm.form.permission_type.requiredMessage'),
trigger: 'change'
}
]
})
function onDragHandle() {
// For init_field_list table
if (initFieldTableRef.value) {
const el = initFieldTableRef.value.$el.querySelector('.el-table__body-wrapper tbody')
Sortable.create(el, {
animation: 150,
ghostClass: 'sortable-ghost',
onEnd: ({ newIndex, oldIndex }) => {
if (newIndex === undefined || oldIndex === undefined) return
if (newIndex !== oldIndex) {
const item = form.value.init_field_list?.splice(oldIndex, 1)[0]
form.value.init_field_list?.splice(newIndex, 0, item)
}
}
})
}
// For input_field_list table
if (inputFieldTableRef.value) {
const el = inputFieldTableRef.value.$el.querySelector('.el-table__body-wrapper tbody')
Sortable.create(el, {
animation: 150,
ghostClass: 'sortable-ghost',
onEnd: ({ newIndex, oldIndex }) => {
if (newIndex === undefined || oldIndex === undefined) return
if (newIndex !== oldIndex) {
const item = form.value.input_field_list?.splice(oldIndex, 1)[0]
form.value.input_field_list?.splice(newIndex, 0, item)
}
}
})
}
}
function submitCodemirrorEditor(val: string) {
form.value.code = val
}
@ -403,9 +331,9 @@ function close() {
if (isEdit.value || !areAllValuesNonEmpty(form.value)) {
visible.value = false
} else {
MsgConfirm(t('common.tip'), t('views.functionLib.tip.saveMessage'), {
MsgConfirm(t('common.tip'), t('views.tool.tip.saveMessage'), {
confirmButtonText: t('common.confirm'),
type: 'warning'
type: 'warning',
})
.then(() => {
visible.value = false
@ -465,7 +393,7 @@ function refreshInitFieldList(data: any) {
UserFieldFormDialogRef.value.close()
}
function refreshFunctionLib(data: any) {
function refreshtool(data: any) {
form.value.icon = data
// console.log(data)
}
@ -484,13 +412,13 @@ const submit = async (formEl: FormInstance | undefined) => {
if (valid) {
// console.log(form.value)
if (isEdit.value) {
functionLibApi.putFunctionLib(form.value?.id as string, form.value, loading).then((res) => {
toolApi.puttool(form.value?.id as string, form.value, loading).then((res) => {
MsgSuccess(t('common.editSuccess'))
emit('refresh', res.data)
visible.value = false
})
} else {
functionLibApi.postFunctionLib(form.value, loading).then((res) => {
toolApi.posttool(form.value, loading).then((res) => {
MsgSuccess(t('common.createSuccess'))
emit('refresh')
visible.value = false
@ -512,7 +440,7 @@ const open = (data: any) => {
}
defineExpose({
open
open,
})
</script>
<style lang="scss" scoped></style>

129
ui/src/views/tool/index.vue
View File

@ -113,25 +113,27 @@
<el-button text @click.stop>
<el-icon><MoreFilled /></el-icon>
</el-button>
<!-- <template #dropdown>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-if="!item.template_id"
:disabled="!canEdit(item)"
@click.stop="openCreateDialog(item)"
>
<el-icon><EditPen /></el-icon>
{{ $t('common.edit') }}
</el-dropdown-item>
<el-dropdown-item
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
<!-- <el-dropdown-item
:disabled="!canEdit(item)"
v-if="!item.template_id"
@click.stop="copyFunctionLib(item)"
@click.stop="copytool(item)"
>
<AppIcon iconName="app-copy"></AppIcon>
{{ $t('common.copy') }}
</el-dropdown-item>
<el-dropdown-item
v-if="item.init_field_list?.length > 0"
:disabled="!canEdit(item)"
@click.stop="configInitParams(item)"
>
<AppIcon iconName="app-operation" class="mr-4"></AppIcon>
@ -139,17 +141,22 @@
</el-dropdown-item>
<el-dropdown-item
v-if="!item.template_id"
@click.stop="exportFunctionLib(item)"
:disabled="!canEdit(item)"
@click.stop="exporttool(item)"
>
<AppIcon iconName="app-export"></AppIcon>
{{ $t('common.export') }}
</el-dropdown-item>
<el-dropdown-item divided @click.stop="deleteFunctionLib(item)">
<el-dropdown-item
:disabled="!canEdit(item)"
divided
@click.stop="deletetool(item)"
>
<el-icon><Delete /></el-icon>
{{ $t('common.delete') }}
</el-dropdown-item>
</el-dropdown-item> -->
</el-dropdown-menu>
</template> -->
</template>
</el-dropdown>
</div>
</template>
@ -161,6 +168,7 @@
</div>
</ContentContainer>
<InitParamDrawer ref="InitParamDrawerRef" @refresh="refresh" />
<ToolFormDrawer ref="ToolFormDrawerRef" @refresh="refresh" :title="ToolDrawertitle" />
</LayoutContainer>
</template>
@ -170,12 +178,12 @@ import ToolApi from '@/api/tool/tool'
import useStore from '@/stores'
import { MsgConfirm } from '@/utils/message'
import InitParamDrawer from '@/views/tool/component/InitParamDrawer.vue'
import ToolFormDrawer from './component/ToolFormDrawer.vue'
import { t } from '@/locales'
const { folder } = useStore()
const { folder, user } = useStore()
const InitParamDrawerRef = ref()
const search_type = ref('name')
const search_form = ref<{
name: string
@ -202,6 +210,28 @@ const currentFolder = ref<any>({})
const search_type_change = () => {
search_form.value = { name: '', create_user: '' }
}
const canEdit = (row: any) => {
return user.userInfo?.id === row?.user_id
}
const ToolFormDrawerRef = ref()
const ToolDrawertitle = ref('')
function openCreateDialog(data?: any) {
// 有template_id的不允许编辑，是模板转换来的
if (data?.template_id) {
return
}
ToolDrawertitle.value = data ? t('views.tool.editTool') : t('views.tool.createTool')
if (data) {
if (data?.permission_type !== 'PUBLIC' || canEdit(data)) {
ToolApi.getToolById('default', data?.id, changeStateloading).then((res) => {
ToolFormDrawerRef.value.open(res.data)
})
}
} else {
ToolFormDrawerRef.value.open(data)
}
}
function getList() {
const params = {
@ -225,42 +255,49 @@ function getFolder() {
}
async function changeState(row: any) {
// if (!bool) {
// MsgConfirm(
// `${t('views.functionLib.disabled.confirmTitle')}${row.name} ?`,
// t('views.functionLib.disabled.confirmMessage'),
// {
// confirmButtonText: t('views.functionLib.setting.disabled'),
// confirmButtonClass: 'danger',
// },
// )
// .then(() => {
// const obj = {
// is_active: bool,
// }
// ToolApi.putToolLib('default', row.id, obj, changeStateloading).then((res) => {})
// })
// .catch(() => {
// row.is_active = true
// })
// } else {
// const res = await ToolApi.getToolById('default', row.id, changeStateloading)
// if (
// !res.data.init_params &&
// res.data.init_field_list &&
// res.data.init_field_list.length > 0 &&
// res.data.init_field_list.filter((item: any) => item.default_value && item.show_default_value)
// .length !== res.data.init_field_list.length
// ) {
// row.is_active = false
// InitParamDrawerRef.value.open(res.data, bool)
// return
// }
// const obj = {
// is_active: bool,
// }
// ToolApi.putToolLib('default', row.id, obj, changeStateloading).then((res) => {})
// }
if (row.is_active) {
MsgConfirm(
`${t('views.tool.disabled.confirmTitle')}${row.name} ?`,
t('views.tool.disabled.confirmMessage'),
{
confirmButtonText: t('common.status.disable'),
confirmButtonClass: 'danger',
},
).then(() => {
const obj = {
is_active: !row.is_active,
}
ToolApi.putToolLib('default', row.id, obj, changeStateloading)
.then(() => {
return true
})
.catch(() => {
return false
})
})
} else {
const res = await ToolApi.getToolById('default', row.id, changeStateloading)
if (
!res.data.init_params &&
res.data.init_field_list &&
res.data.init_field_list.length > 0 &&
res.data.init_field_list.filter((item: any) => item.default_value && item.show_default_value)
.length !== res.data.init_field_list.length
) {
InitParamDrawerRef.value.open(res.data, !row.is_active)
return false
}
const obj = {
is_active: !row.is_active,
}
ToolApi.putToolLib('default', row.id, obj, changeStateloading)
.then(() => {
return true
})
.catch(() => {
return false
})
}
}
function refresh(data: any) {