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

fix: tool

This commit is contained in:
wangdan-fit2cloud 2025-05-26 18:10:18 +08:00
parent 356dbeb2b9
commit da65ce57b5
24 changed files with 410 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui/src/api/tool/tool.ts
View File

@ -39,12 +39,24 @@ const getToolList: (
)
}
/**
* 创建工具
* @param 参数
*/
const postTool: (
wordspace_id: string,
data: toolData,
loading?: Ref<boolean>,
) => Promise<Result<any>> = (wordspace_id, data, loading) => {
return post(`${prefix}/${wordspace_id}/tool`, data, undefined, loading)
}
/**
* 修改工具
* @param 参数
*/
const putToolLib: (
const putTool: (
wordspace_id: string,
tool_id: string,
data: toolData,
@ -67,9 +79,22 @@ const getToolById: (
return get(`${prefix}/${wordspace_id}/tool/${function_lib_id}`, undefined, loading)
}
/**
* 调试工具
* @param 参数
*/
// const postToolDebug: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
// data: any,
// loading
// ) => {
// return post(`${prefix}/debug`, data, undefined, loading)
// }
export default {
getToolByFolder,
getToolList,
putToolLib,
getToolById
putTool,
getToolById,
postTool
}

8
ui/src/layout/components/breadcrumb/index.vue
View File

@ -138,14 +138,16 @@ import { ref, onMounted, computed } from 'vue'
import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router'
// import CreateApplicationDialog from '@/views/application/component/CreateApplicationDialog.vue'
// import CreateDatasetDialog from '@/views/dataset/component/CreateDatasetDialog.vue'
import { isAppIcon, isWorkFlow } from '@/utils/application'
import { isWorkFlow } from '@/utils/application'
import { isAppIcon } from '@/utils/common'
import useStore from '@/stores'
const { common, dataset, application } = useStore()
const route = useRoute()
const router = useRouter()
const {
meta: { activeMenu },
params: { id }
params: { id },
} = route as any
onBeforeRouteLeave((to, from) => {
@ -193,7 +195,7 @@ function changeMenu(id: string) {
} else {
router.push({
name: lastMatched.name,
params: { id: id, type: type }
params: { id: id, type: type },
})
}
}

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

@ -58,10 +58,21 @@ export default {
outputParam: 'Output Parameters',
inputParam: 'Input Parameters',
initParam: 'Startup Parameters',
editParam: 'Edit Parameter',
addParam: 'Add Parameter',
},
inputPlaceholder: 'Please input',
title: 'Title',
content: 'Content',
rename: 'Rename',
EditAvatarDialog: {
title: 'App Logo',
customizeUpload: 'Custom Upload',
upload: 'Upload',
default: 'Default Logo',
custom: 'Custom',
sizeTip: 'Recommended size: 32×32 pixels. Supports JPG, PNG, and GIF formats. Max size: 10 MB',
fileSizeExceeded: 'File size exceeds 10 MB',
uploadImagePrompt: 'Please upload an image',
},
}

11
ui/src/locales/lang/en-US/views/application-overview.ts
View File

@ -27,17 +27,6 @@ export default {
enabledSuccess: 'Enabled',
disabledSuccess: 'Disabled'
},
EditAvatarDialog: {
title: 'App Logo',
customizeUpload: 'Custom Upload',
upload: 'Upload',
default: 'Default Logo',
custom: 'Custom',
sizeTip:
'Recommended size: 32×32 pixels. Supports JPG, PNG, and GIF formats. Max size: 10 MB',
fileSizeExceeded: 'File size exceeds 10 MB',
uploadImagePrompt: 'Please upload an image'
},
EmbedDialog: {
fullscreenModeTitle: 'Fullscreen Mode',
copyInstructions: 'Copy the code below to embed',

2
ui/src/locales/lang/en-US/views/model.ts
View File

@ -38,8 +38,6 @@ export default {
baseInfo: 'Basic Information',
advancedInfo: 'Advanced Settings',
modelParams: 'Model Parameters',
editParam: 'Edit Parameter',
addParam: 'Add Parameter',
paramSetting: 'Model Parameter Settings',
apiParamPassing: 'Interface Parameters',
},

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

@ -58,13 +58,25 @@ export default {
enableSuccess: '启用成功',
disableSuccess: '禁用成功',
},
inputPlaceholder: '请输入',
title: '标题',
content: '内容',
param: {
outputParam: '输出参数',
inputParam: '输入参数',
initParam: '启动参数',
editParam: '编辑参数',
addParam: '添加参数',
},
inputPlaceholder: '请输入',
title: '标题',
content: '内容',
rename: '重命名',
EditAvatarDialog: {
title: 'App Logo',
customizeUpload: 'Custom Upload',
upload: 'Upload',
default: 'Default Logo',
custom: 'Custom',
sizeTip: 'Recommended size: 32×32 pixels. Supports JPG, PNG, and GIF formats. Max size: 10 MB',
fileSizeExceeded: 'File size exceeds 10 MB',
uploadImagePrompt: 'Please upload an image',
},
}

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

@ -38,8 +38,6 @@ export default {
baseInfo: '基础信息',
advancedInfo: '高级设置',
modelParams: '模型参数',
editParam: '编辑参数',
addParam: '添加参数',
paramSetting: '模型参数设置',
apiParamPassing: '接口传参',
},

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

@ -7,6 +7,10 @@ export default {
confirmMessage: '禁用后，引用了该工具的应用提问时会报错 ，请谨慎操作。',
},
form: {
title: {
copy: '副本',
baseInfo: '基础信息'
},
toolName: {
label: '名称',
name: '工具名称',

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

@ -54,13 +54,25 @@ export default {
enableSuccess: '啟用成功',
disableSuccess: '停用成功',
},
inputPlaceholder: '請輸入',
title: '標題',
content: '内容',
param: {
outputParam: '輸出參數',
inputParam: '輸入參數',
initParam: '啟動參數',
editParam: '編輯參數',
addParam: '新增參數',
},
inputPlaceholder: '請輸入',
title: '標題',
content: '内容',
rename: '重命名',
EditAvatarDialog: {
title: '應用頭像',
customizeUpload: '自訂上傳',
upload: '上傳',
default: '預設logo',
custom: '自訂',
sizeTip: '建議尺寸 32*32，支援 JPG、PNG、GIF，大小不超過 10 MB',
fileSizeExceeded: '檔案大小超過 10 MB',
uploadImagePrompt: '請上傳一張圖片'
},
}

10
ui/src/locales/lang/zh-Hant/views/application-overview.ts
View File

@ -26,16 +26,6 @@ export default {
enabledSuccess: '已啟用',
disabledSuccess: '已停用'
},
EditAvatarDialog: {
title: '應用頭像',
customizeUpload: '自訂上傳',
upload: '上傳',
default: '預設logo',
custom: '自訂',
sizeTip: '建議尺寸 32*32，支援 JPG、PNG、GIF，大小不超過 10 MB',
fileSizeExceeded: '檔案大小超過 10 MB',
uploadImagePrompt: '請上傳一張圖片'
},
EmbedDialog: {
fullscreenModeTitle: '全螢幕模式',
copyInstructions: '複製以下程式碼進行嵌入',

2
ui/src/locales/lang/zh-Hant/views/model.ts
View File

@ -38,8 +38,6 @@ export default {
baseInfo: '基礎資訊',
advancedInfo: '進階設定',
modelParams: '模型參數',
editParam: '編輯參數',
addParam: '新增參數',
paramSetting: '模型參數設定',
apiParamPassing: '接口傳參',
},

18
ui/src/styles/app.scss
View File

@ -395,3 +395,21 @@ h5 {
.avatar-green {
background: var(--el-color-success);
}
/*
标题前带竖线样式
*/
.title-decoration-1 {
position: relative;
padding-left: 12px;
&:before {
position: absolute;
left: 2px;
top: 50%;
transform: translate(-50%, -50%);
width: 2px;
height: 80%;
content: '';
background: var(--el-color-primary);
}
}

43
ui/src/styles/component.scss
View File

@ -12,3 +12,46 @@
border-right: 1px solid var(--el-border-color);
}
}
// 编辑头像
.edit-avatar {
position: relative;
line-height: 0;
.edit-mask {
position: absolute;
left: 0;
background: rgba(0, 0, 0, 0.4);
}
}
// radio 一行一个样式
.radio-block {
width: 100%;
display: inline-flex;
.el-radio {
align-items: flex-start;
height: 100%;
width: 100%;
margin-top: 8px;
}
.el-radio__label {
width: 100%;
margin-top: -8px;
line-height: 30px;
}
}
// radio 一行一个样式 有输入框 上传头像的内容
.radio-block-avatar {
width: 100%;
display: block;
.el-radio {
align-items: flex-start;
height: 100%;
width: 100%;
}
.el-radio__label {
width: 100%;
margin-top: -8px;
line-height: 30px;
}
}

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

@ -165,3 +165,29 @@ $primary-color: #3370ff;
.el-popper {
--el-popper-border-radius: 6px;
}
// table
.el-table {
--el-table-header-bg-color: var(--app-layout-bg-color);
--el-table-text-color: var(--app-text-color);
font-weight: 400;
thead {
color: var(--app-text-color-secondary);
th {
font-weight: 500;
}
}
th.el-table__cell {
border-top: var(--el-table-border);
}
.el-table__cell {
padding: 12px 0;
}
.el-checkbox {
height: 23px;
}
tr.highlight {
background: var(--el-table-current-row-bg-color);
}
}

7
ui/src/utils/application.ts
View File

@ -1,10 +1,3 @@
export const defaultIcon = '/ui/favicon.ico'
// 是否显示字母 / icon
export function isAppIcon(url: String | undefined) {
return url === defaultIcon ? '' : url
}
export function isWorkFlow(type: string | undefined) {
return type === 'WORK_FLOW'
}

6
ui/src/utils/common.ts
View File

@ -46,3 +46,9 @@ export function filesize(size: number) {
if (size < Math.pow(num, 4)) return (size / Math.pow(num, 3)).toFixed(2) + 'G' //G
return (size / Math.pow(num, 4)).toFixed(2) + 'T' //T
}
// 头像
export const defaultIcon = '/ui/favicon.ico'
export function isAppIcon(url: String | undefined) {
return url === defaultIcon ? '' : url
}

4
ui/src/views/model/component/AddParamDrawer.vue
View File

@ -10,8 +10,8 @@
<h4>
{{
isEdit
? $t('views.model.modelForm.title.editParam')
: $t('views.model.modelForm.title.addParam')
? $t('common.param.editParam')
: $t('common.param.addParam')
}}
</h4>
</template>

16
ui/src/views/tool/component/FunctionDebugDrawer.vue → ui/src/views/tool/ToolDebugDrawer.vue
View File

@ -11,7 +11,7 @@
</div>
</template>
<div>
<div v-if="form.init_field_list.length > 0">
<div v-if="form.init_field_list.length > 0" class="mb-16">
<h4 class="title-decoration-1 mb-16">
{{ $t('common.param.initParam') }}
</h4>
@ -48,13 +48,13 @@
:rules="{
required: item.is_required,
message: $t('views.tool.form.param.inputPlaceholder'),
trigger: 'blur'
trigger: 'blur',
}"
>
<template #label>
<div class="flex">
<span
>{{ item.name }} <span class="danger" v-if="item.is_required">*</span></span
>{{ item.name }} <span class="danger" v-if="item.is_required">*</span></span
>
<el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
</div>
@ -127,7 +127,7 @@ const form = ref<any>({
code: '',
input_field_list: [],
init_field_list: [],
init_params: {}
init_params: {},
})
watch(debugVisible, (bool) => {
@ -140,7 +140,7 @@ watch(debugVisible, (bool) => {
code: '',
input_field_list: [],
init_field_list: [],
init_params: {}
init_params: {},
}
}
})
@ -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(() => {
toolApi.posttoolDebug(form.value, loading).then((res) => {
toolApi.postToolDebug(form.value, loading).then((res) => {
if (res.code === 500) {
showResult.value = true
isSuccess.value = false
@ -167,7 +167,7 @@ const open = (data: any) => {
data.input_field_list.forEach((item: any) => {
form.value.debug_field_list.push({
value: '',
...item
...item,
})
})
}
@ -178,7 +178,7 @@ const open = (data: any) => {
}
defineExpose({
open
open,
})
</script>
<style lang="scss"></style>

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

@ -5,7 +5,7 @@
</template>
<div>
<h4 class="title-decoration-1 mb-16">
{{ $t('views.tool.functionForm.title.baseInfo') }}
{{ $t('views.tool.form.title.baseInfo') }}
</h4>
<el-form
ref="FormRef"
@ -16,10 +16,7 @@
v-loading="loading"
@submit.prevent
>
<el-form-item
:label="$t('views.tool.form.toolName.label')"
prop="name"
>
<el-form-item :label="$t('views.tool.form.toolName.label')" prop="name">
<div class="flex w-full">
<div
v-if="form.id"
@ -27,7 +24,8 @@
@mouseenter="showEditIcon = true"
@mouseleave="showEditIcon = false"
>
<AppAvatar
<el-Avatar
v-if="isAppIcon(form.icon)"
:id="form.id"
shape="square"
@ -35,16 +33,11 @@
style="background: none"
>
<img :src="String(form.icon)" alt="" />
</AppAvatar>
<AppAvatar
v-else-if="form.name"
:id="form.id"
:name="form.name"
pinyinColor
shape="square"
:size="32"
/>
<AppAvatar
</el-Avatar>
<el-avatar v-else class="avatar-green" shape="square" :size="32">
<img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
</el-avatar>
<el-Avatar
v-if="showEditIcon"
:id="form.id"
shape="square"
@ -53,11 +46,11 @@
@click="openEditAvatar"
>
<el-icon><EditPen /></el-icon>
</AppAvatar>
</el-Avatar>
</div>
<AppAvatar shape="square" class="avatar-green" v-else>
<img src="@/assets/node/icon_tool.svg" style="width: 75%" alt="" />
</AppAvatar>
<el-avatar v-else class="avatar-green" shape="square" :size="32">
<img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
</el-avatar>
<el-input
v-model="form.name"
:placeholder="$t('views.tool.form.toolName.placeholder')"
@ -161,10 +154,7 @@
</div>
<el-table ref="inputFieldTableRef" :data="form.input_field_list" class="mb-16">
<el-table-column
prop="name"
:label="$t('views.tool.form.paramName.label')"
/>
<el-table-column prop="name" :label="$t('views.tool.form.paramName.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>
@ -177,10 +167,7 @@
</div>
</template>
</el-table-column>
<el-table-column
prop="source"
:label="$t('views.tool.form.source.label')"
>
<el-table-column prop="source" :label="$t('views.tool.form.source.label')">
<template #default="{ row }">
{{
row.source === 'custom'
@ -244,17 +231,19 @@
</div>
</template>
<FunctionDebugDrawer ref="FunctionDebugDrawerRef" />
<ToolDebugDrawer ref="ToolDebugDrawerRef" />
<FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
<!-- <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshInitFieldList" /> -->
<EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshtool" />
<UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshInitFieldList" />
<EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshTool" />
</el-drawer>
</template>
<script setup lang="ts">
import { ref, reactive, watch, nextTick } from 'vue'
import FieldFormDialog from './FieldFormDialog.vue'
import FunctionDebugDrawer from './FunctionDebugDrawer.vue'
import FieldFormDialog from '@/views/tool/component/FieldFormDialog.vue'
import ToolDebugDrawer from './ToolDebugDrawer.vue'
import UserFieldFormDialog from '@/views/tool/component/UserFieldFormDialog.vue'
import EditAvatarDialog from '@/views/tool/component/EditAvatarDialog.vue'
import type { toolData } from '@/api/type/tool'
import ToolApi from '@/api/tool/tool'
import type { FormInstance } from 'element-plus'
@ -262,9 +251,7 @@ 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 { isAppIcon } from '@/utils/application'
import EditAvatarDialog from './EditAvatarDialog.vue'
import { isAppIcon } from '@/utils/common'
const props = defineProps({
title: String,
@ -272,7 +259,7 @@ const props = defineProps({
const emit = defineEmits(['refresh'])
const FieldFormDialogRef = ref()
const FunctionDebugDrawerRef = ref()
const ToolDebugDrawerRef = ref()
const UserFieldFormDialogRef = ref()
const EditAvatarDialogRef = ref()
const initFieldTableRef = ref()
@ -351,7 +338,7 @@ function areAllValuesNonEmpty(obj: any) {
}
function openDebug() {
FunctionDebugDrawerRef.value.open(form.value)
ToolDebugDrawerRef.value.open(form.value)
}
function deleteField(index: any) {
@ -395,7 +382,6 @@ function refreshInitFieldList(data: any) {
function refreshtool(data: any) {
form.value.icon = data
// console.log(data)
}
function deleteInitField(index: any) {
@ -410,15 +396,14 @@ const submit = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid: any) => {
if (valid) {
// console.log(form.value)
if (isEdit.value) {
toolApi.puttool(form.value?.id as string, form.value, loading).then((res) => {
ToolApi.putTool('default', form.value?.id as string, form.value, loading).then((res) => {
MsgSuccess(t('common.editSuccess'))
emit('refresh', res.data)
visible.value = false
})
} else {
toolApi.posttool(form.value, loading).then((res) => {
ToolApi.postTool('default', form.value, loading).then((res) => {
MsgSuccess(t('common.createSuccess'))
emit('refresh')
visible.value = false

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

@ -8,7 +8,7 @@
>
<el-radio-group v-model="radioType" class="radio-block mb-16">
<el-radio value="default">
<p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.default') }}</p>
<p>{{ $t('common.EditAvatarDialog.default') }}</p>
<AppAvatar
v-if="detail?.name"
:name="detail?.name"
@ -20,7 +20,7 @@
</el-radio>
<el-radio value="custom">
<p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.customizeUpload') }}</p>
<p>{{ $t('common.EditAvatarDialog.customizeUpload') }}</p>
<div class="flex mt-8">
<AppAvatar
v-if="fileURL"
@ -40,12 +40,12 @@
:on-change="onChange"
>
<el-button icon="Upload" :disabled="radioType !== 'custom'"
>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.upload') }}
>{{ $t('common.EditAvatarDialog.upload') }}
</el-button>
</el-upload>
</div>
<div class="el-upload__tip info mt-8">
{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.sizeTip') }}
{{ $t('common.EditAvatarDialog.sizeTip') }}
</div>
</el-radio>
</el-radio-group>
@ -64,7 +64,7 @@ import { ref, watch } from 'vue'
import ToolApi from '@/api/tool/tool'
import { cloneDeep } from 'lodash'
import { MsgError, MsgSuccess } from '@/utils/message'
import { defaultIcon, isAppIcon } from '@/utils/application'
import { defaultIcon, isAppIcon } from '@/utils/common'
import { t } from '@/locales'
const emit = defineEmits(['refresh'])
@ -96,7 +96,7 @@ const onChange = (file: any) => {
const isLimit = file?.size / 1024 / 1024 < 10
if (!isLimit) {
// @ts-ignore
MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.fileSizeExceeded'))
MsgError(t('common.EditAvatarDialog.fileSizeExceeded'))
return false
} else {
iconFile.value = file
@ -111,12 +111,12 @@ function submit() {
} else if (radioType.value === 'custom' && iconFile.value) {
let fd = new FormData()
fd.append('file', iconFile.value.raw)
toolApi.puttoolIcon(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
})
} else {
MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.uploadImagePrompt'))
MsgError(t('common.EditAvatarDialog.uploadImagePrompt'))
}
}

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

@ -1,10 +1,6 @@
<template>
<el-dialog
:title="
isEdit
? $t('views.template.templateForm.title.editParam')
: $t('views.template.templateForm.title.addParam')
"
:title="isEdit ? $t('common.param.editParam') : $t('common.param.addParam')"
v-model="dialogVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
@ -34,20 +30,11 @@
</el-form-item>
<el-form-item :label="$t('views.tool.form.source.label')">
<el-select v-model="form.source">
<el-option
:label="$t('views.tool.form.source.reference')"
value="reference"
/>
<el-option
:label="$t('views.tool.form.source.custom')"
value="custom"
/>
<el-option :label="$t('views.tool.form.source.reference')" value="reference" />
<el-option :label="$t('views.tool.form.source.custom')" value="custom" />
</el-select>
</el-form-item>
<el-form-item
:label="$t('views.tool.form.required.label')"
@click.prevent
>
<el-form-item :label="$t('views.tool.form.required.label')" @click.prevent>
<el-switch size="small" v-model="form.is_required"></el-switch>
</el-form-item>
</el-form>
@ -78,7 +65,7 @@ const form = ref<any>({
name: '',
type: typeOptions[0],
source: 'reference',
is_required: true
is_required: true,
})
const rules = reactive({
@ -86,9 +73,9 @@ const rules = reactive({
{
required: true,
message: t('views.tool.form.paramName.placeholder'),
trigger: 'blur'
}
]
trigger: 'blur',
},
],
})
const dialogVisible = ref<boolean>(false)
@ -99,7 +86,7 @@ watch(dialogVisible, (bool) => {
name: '',
type: typeOptions[0],
source: 'reference',
is_required: true
is_required: true,
}
isEdit.value = false
}

3
ui/src/views/tool/component/InternalDescDrawer.vue
View File

@ -65,9 +65,8 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import { cloneDeep } from 'lodash'
import { isAppIcon } from '@/utils/application'
import { isAppIcon } from '@/utils/common'
const emit = defineEmits(['refresh', 'addFunction'])
const visibleInternalDesc = ref(false)

169
ui/src/views/tool/component/UserFieldFormDialog.vue Normal file
View File

@ -0,0 +1,169 @@
<template>
<el-dialog
:title="isEdit ? $t('common.param.editParam') : $t('common.param.addParam')"
v-model="dialogVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:destroy-on-close="true"
:before-close="close"
append-to-body
>
<DynamicsFormConstructor
v-model="currentRow"
label-position="top"
require-asterisk-position="right"
:input_type_list="inputTypeList"
ref="DynamicsFormConstructorRef"
></DynamicsFormConstructor>
<template #footer>
<span class="dialog-footer">
<el-button @click.prevent="close"> {{ $t('common.cancel') }} </el-button>
<el-button type="primary" @click="submit()" :loading="loading">
{{ isEdit ? $t('common.save') : $t('common.add') }}
</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { cloneDeep } from 'lodash'
import DynamicsFormConstructor from '@/components/dynamics-form/constructor/index.vue'
import type { FormField } from '@/components/dynamics-form/type'
import _ from 'lodash'
import { t } from '@/locales'
const emit = defineEmits(['refresh'])
const DynamicsFormConstructorRef = ref()
const loading = ref<boolean>(false)
const isEdit = ref(false)
const currentItem = ref<FormField | any>()
const check_field = (field_list: Array<string>, obj: any) => {
return field_list.every((field) => _.get(obj, field, undefined) !== undefined)
}
const currentRow = computed(() => {
if (currentItem.value) {
const row = currentItem.value
switch (row.type) {
case 'input':
if (check_field(['field', 'input_type', 'label', 'required', 'attrs'], currentItem.value)) {
return currentItem.value
}
return {
attrs: row.attrs || { maxlength: 200, minlength: 0 },
field: row.field || row.variable,
input_type: 'TextInput',
label: row.label || row.name,
default_value: row.default_value,
required: row.required != undefined ? row.required : row.is_required,
}
case 'select':
if (
check_field(
['field', 'input_type', 'label', 'required', 'option_list'],
currentItem.value,
)
) {
return currentItem.value
}
return {
attrs: row.attrs || {},
field: row.field || row.variable,
input_type: 'SingleSelect',
label: row.label || row.name,
default_value: row.default_value,
required: row.required != undefined ? row.required : row.is_required,
option_list: row.option_list
? row.option_list
: row.optionList.map((o: any) => {
return { key: o, value: o }
}),
}
case 'date':
if (
check_field(
[
'field',
'input_type',
'label',
'required',
'attrs.format',
'attrs.value-format',
'attrs.type',
],
currentItem.value,
)
) {
return currentItem.value
}
return {
field: row.field || row.variable,
input_type: 'DatePicker',
label: row.label || row.name,
default_value: row.default_value,
required: row.required != undefined ? row.required : row.is_required,
attrs: {
format: 'YYYY-MM-DD HH:mm:ss',
'value-format': 'YYYY-MM-DD HH:mm:ss',
type: 'datetime',
},
}
default:
return currentItem.value
}
} else {
return {
input_type: 'TextInput',
required: false,
attrs: { maxlength: 200, minlength: 0 },
show_default_value: true,
}
}
})
const currentIndex = ref(null)
const inputTypeList = ref([
{ label: t('dynamicsForm.input_type_list.TextInput'), value: 'TextInputConstructor' },
{ label: t('dynamicsForm.input_type_list.PasswordInput'), value: 'PasswordInputConstructor' },
{ label: t('dynamicsForm.input_type_list.SingleSelect'), value: 'SingleSelectConstructor' },
{ label: t('dynamicsForm.input_type_list.MultiSelect'), value: 'MultiSelectConstructor' },
{ label: t('dynamicsForm.input_type_list.RadioCard'), value: 'RadioCardConstructor' },
{ label: t('dynamicsForm.input_type_list.DatePicker'), value: 'DatePickerConstructor' },
{ label: t('dynamicsForm.input_type_list.SwitchInput'), value: 'SwitchInputConstructor' },
])
const dialogVisible = ref<boolean>(false)
const open = (row: any, index: any) => {
dialogVisible.value = true
if (row) {
isEdit.value = true
currentItem.value = cloneDeep(row)
currentIndex.value = index
} else {
currentItem.value = null
}
}
const close = () => {
dialogVisible.value = false
isEdit.value = false
currentIndex.value = null
currentItem.value = null as any
}
const submit = async () => {
const formEl = DynamicsFormConstructorRef.value
if (!formEl) return
await formEl.validate().then(() => {
emit('refresh', formEl?.getData(), currentIndex.value)
isEdit.value = false
currentItem.value = null as any
currentIndex.value = null
})
}
defineExpose({ open, close })
</script>
<style lang="scss" scoped></style>

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

@ -74,7 +74,16 @@
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
<CardBox :title="item.name" :description="item.desc" class="cursor">
<template #icon>
<el-avatar class="avatar-green" shape="square" :size="32">
<el-avatar
v-if="isAppIcon(item?.icon)"
shape="square"
:size="32"
style="background: none"
class="mr-8"
>
<img :src="item?.icon" alt="" />
</el-avatar>
<el-avatar v-else class="avatar-green" shape="square" :size="32">
<img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
</el-avatar>
</template>
@ -178,8 +187,9 @@ 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 ToolFormDrawer from './ToolFormDrawer.vue'
import { t } from '@/locales'
import { isAppIcon } from '@/utils/common'
const { folder, user } = useStore()
@ -267,7 +277,7 @@ async function changeState(row: any) {
const obj = {
is_active: !row.is_active,
}
ToolApi.putToolLib('default', row.id, obj, changeStateloading)
ToolApi.putTool('default', row.id, obj, changeStateloading)
.then(() => {
return true
})
@ -290,7 +300,7 @@ async function changeState(row: any) {
const obj = {
is_active: !row.is_active,
}
ToolApi.putToolLib('default', row.id, obj, changeStateloading)
ToolApi.putTool('default', row.id, obj, changeStateloading)
.then(() => {
return true
})