mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-26 10:12:51 +00:00
fix: fix
This commit is contained in:
wangdan-fit2cloud
parent
6dfcc5e54d
commit
a89f28a2ae
|
|
@ -140,7 +140,7 @@ import useStore from '@/stores/modules-shared-system'
|
|||
import { numberFormat } from '@/utils/common'
|
||||
import { t } from '@/locales'
|
||||
import { useRouter } from 'vue-router'
|
||||
import AuthorizedWorkspace from '@/views/shared/AuthorizedWorkspaceDialog.vue'
|
||||
import AuthorizedWorkspace from '@/views/system-shared/AuthorizedWorkspaceDialog.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const { folder } = useStore()
|
||||
|
|
|
|||
|
|
@ -289,7 +289,7 @@ import { numberFormat } from '@/utils/common'
|
|||
import iconMap from '@/components/app-icon/icons/common'
|
||||
import { t } from '@/locales'
|
||||
import { useRouter } from 'vue-router'
|
||||
import AuthorizedWorkspace from '@/views/shared/AuthorizedWorkspaceDialog.vue'
|
||||
import AuthorizedWorkspace from '@/views/system-shared/AuthorizedWorkspaceDialog.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const { folder } = useStore()
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ import useStore from '@/stores'
|
|||
import ParamSettingDialog from './ParamSettingDialog.vue'
|
||||
import { t } from '@/locales'
|
||||
import { PermissionConst, EditionConst, RoleConst } from '@/utils/permission/data'
|
||||
import AuthorizedWorkspace from '@/views/shared/AuthorizedWorkspaceDialog.vue'
|
||||
import AuthorizedWorkspace from '@/views/system-shared/AuthorizedWorkspaceDialog.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
model: Model
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ import EditModel from '@/views/shared/model-shared/component/EditModel.vue'
|
|||
import { MsgConfirm } from '@/utils/message'
|
||||
import { modelType } from '@/enums/model'
|
||||
import useStore from '@/stores'
|
||||
import AuthorizedWorkspace from '@/views/shared/AuthorizedWorkspaceDialog.vue'
|
||||
import AuthorizedWorkspace from '@/views/system-shared/AuthorizedWorkspaceDialog.vue'
|
||||
import ParamSettingDialog from './ParamSettingDialog.vue'
|
||||
import { t } from '@/locales'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,369 +0,0 @@
|
|||
<template>
|
||||
<div class="tool-shared">
|
||||
<ContentContainer :header="$t('views.system.shared.shared_tool')">
|
||||
<template #search>
|
||||
<div class="flex">
|
||||
<div class="flex-between complex-search">
|
||||
<el-select
|
||||
class="complex-search__left"
|
||||
v-model="search_type"
|
||||
style="width: 120px"
|
||||
@change="search_type_change"
|
||||
>
|
||||
<el-option :label="$t('common.creator')" value="create_user" />
|
||||
|
||||
<el-option :label="$t('views.model.modelForm.modeName.label')" value="name" />
|
||||
</el-select>
|
||||
<el-input
|
||||
v-if="search_type === 'name'"
|
||||
v-model="search_form.name"
|
||||
@change="getList"
|
||||
:placeholder="$t('common.searchBar.placeholder')"
|
||||
style="width: 220px"
|
||||
clearable
|
||||
/>
|
||||
<el-select
|
||||
v-else-if="search_type === 'create_user'"
|
||||
v-model="search_form.create_user"
|
||||
@change="getList"
|
||||
clearable
|
||||
style="width: 220px"
|
||||
>
|
||||
<el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.username" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<el-row v-if="toolList.length > 0" :gutter="15">
|
||||
<template v-for="(item, index) in toolList" :key="index">
|
||||
<el-col
|
||||
v-if="item.resource_type === 'folder'"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="8"
|
||||
:xl="6"
|
||||
class="mb-16"
|
||||
>
|
||||
<CardBox
|
||||
:title="item.name"
|
||||
:description="item.desc || $t('common.noData')"
|
||||
class="cursor"
|
||||
>
|
||||
<template #icon>
|
||||
<el-avatar shape="square" :size="32" style="background: none">
|
||||
<AppIcon iconName="app-folder" style="font-size: 32px"></AppIcon>
|
||||
</el-avatar>
|
||||
</template>
|
||||
<template #subTitle>
|
||||
<el-text class="color-secondary lighter" size="small">
|
||||
{{ $t('common.creator') }}: {{ item.username }}
|
||||
</el-text>
|
||||
</template>
|
||||
</CardBox>
|
||||
</el-col>
|
||||
<el-col v-else :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
|
||||
<CardBox isShared :title="item.name" :description="item.desc" class="cursor">
|
||||
<template #icon>
|
||||
<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>
|
||||
<template #subTitle>
|
||||
<el-text class="color-secondary lighter" size="small">
|
||||
{{ $t('common.creator') }}: {{ item.username }}
|
||||
</el-text>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div v-if="item.is_active" class="flex align-center">
|
||||
<el-icon class="color-success mr-8" style="font-size: 16px">
|
||||
<SuccessFilled />
|
||||
</el-icon>
|
||||
<span class="color-secondary">
|
||||
{{ $t('common.status.enabled') }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="flex align-center">
|
||||
<AppIcon iconName="app-disabled" class="color-secondary mr-8"></AppIcon>
|
||||
<span class="color-secondary">
|
||||
{{ $t('common.status.disabled') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</CardBox>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
<el-empty :description="$t('common.noData')" v-else />
|
||||
</div>
|
||||
</ContentContainer>
|
||||
<InitParamDrawer ref="InitParamDrawerRef" @refresh="refresh" />
|
||||
<ToolFormDrawer ref="ToolFormDrawerRef" @refresh="refresh" :title="ToolDrawertitle" />
|
||||
<AuthorizedWorkspace ref="AuthorizedWorkspaceDialogRef"></AuthorizedWorkspace>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, reactive, computed } from 'vue'
|
||||
import { cloneDeep, get } from 'lodash'
|
||||
import ToolApi from '@/api/system-shared/tool'
|
||||
import ToolWorkspaceApi from '@/api/shared-workspace'
|
||||
import useStore from '@/stores/modules-shared-system'
|
||||
import InitParamDrawer from '@/views/shared/tool-shared/component/InitParamDrawer.vue'
|
||||
import ToolFormDrawer from './ToolFormDrawer.vue'
|
||||
import { t } from '@/locales'
|
||||
import { isAppIcon } from '@/utils/common'
|
||||
import iconMap from '@/components/app-icon/icons/common'
|
||||
import AuthorizedWorkspace from '@/views/shared/AuthorizedWorkspaceDialog.vue'
|
||||
import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
|
||||
|
||||
const { folder, user } = useStore()
|
||||
const rightOutlined = iconMap['right-outlined'].iconReader()
|
||||
const InitParamDrawerRef = ref()
|
||||
const search_type = ref('name')
|
||||
const search_form = ref<{
|
||||
name: string
|
||||
create_user: string
|
||||
}>({
|
||||
name: '',
|
||||
create_user: '',
|
||||
})
|
||||
const user_options = ref<any[]>([])
|
||||
|
||||
const AuthorizedWorkspaceDialogRef = ref()
|
||||
function openAuthorizedWorkspaceDialog(row: any) {
|
||||
if (AuthorizedWorkspaceDialogRef.value) {
|
||||
AuthorizedWorkspaceDialogRef.value.open(row, 'Tool')
|
||||
}
|
||||
}
|
||||
const loading = ref(false)
|
||||
const changeStateloading = ref(false)
|
||||
const paginationConfig = reactive({
|
||||
current_page: 1,
|
||||
page_size: 30,
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const folderList = ref<any[]>([])
|
||||
const toolList = ref<any[]>([])
|
||||
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 (canEdit(data)) {
|
||||
ToolApi.getToolById(data?.id, changeStateloading).then((res) => {
|
||||
ToolFormDrawerRef.value.open(res.data)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
ToolFormDrawerRef.value.open(data)
|
||||
}
|
||||
}
|
||||
|
||||
function getList() {
|
||||
const params = {
|
||||
folder_id: currentFolder.value?.id || 'default',
|
||||
scope: 'SHARED',
|
||||
}
|
||||
ToolWorkspaceApi.getSharedWorkspaceToolPage(params, loading).then((res) => {
|
||||
toolList.value = [...res.data]
|
||||
})
|
||||
}
|
||||
|
||||
function getFolder() {
|
||||
const params = {}
|
||||
folder.asyncGetFolder('TOOL', params, loading).then((res: any) => {
|
||||
folderList.value = res.data
|
||||
currentFolder.value = res.data?.[0] || {}
|
||||
getList()
|
||||
})
|
||||
}
|
||||
|
||||
async function changeState(row: any) {
|
||||
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.putTool(row.id, obj, changeStateloading)
|
||||
.then(() => {
|
||||
return true
|
||||
})
|
||||
.catch(() => {
|
||||
return false
|
||||
})
|
||||
})
|
||||
} else {
|
||||
const res = await ToolApi.getToolById(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.putTool(row.id, obj, changeStateloading)
|
||||
.then(() => {
|
||||
return true
|
||||
})
|
||||
.catch(() => {
|
||||
return false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function refresh(data: any) {
|
||||
if (data) {
|
||||
const index = toolList.value.findIndex((v) => v.id === data.id)
|
||||
// if (user.userInfo && data.user_id === user.userInfo.id) {
|
||||
// data.username = user.userInfo.username
|
||||
// } else {
|
||||
// data.username = userOptions.value.find((v) => v.value === data.user_id)?.label
|
||||
// }
|
||||
toolList.value.splice(index, 1, data)
|
||||
}
|
||||
paginationConfig.total = 0
|
||||
paginationConfig.current_page = 1
|
||||
toolList.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
function folderClickHandel(row: any) {
|
||||
currentFolder.value = row
|
||||
toolList.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
function copyTool(row: any) {
|
||||
ToolDrawertitle.value = t('views.tool.copyTool')
|
||||
const obj = cloneDeep(row)
|
||||
delete obj['id']
|
||||
obj['name'] = obj['name'] + ` ${t('views.tool.form.title.copy')}`
|
||||
ToolFormDrawerRef.value.open(obj)
|
||||
}
|
||||
|
||||
function exportTool(row: any) {
|
||||
ToolApi.exportTool(row.id, row.name, loading).catch((e: any) => {
|
||||
if (e.response.status !== 403) {
|
||||
e.response.data.text().then((res: string) => {
|
||||
MsgError(`${t('views.application.tip.ExportError')}:${JSON.parse(res).message}`)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function deleteTool(row: any) {
|
||||
MsgConfirm(
|
||||
`${t('views.tool.delete.confirmTitle')}${row.name} ?`,
|
||||
t('views.tool.delete.confirmMessage'),
|
||||
{
|
||||
confirmButtonText: t('common.confirm'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
confirmButtonClass: 'danger',
|
||||
},
|
||||
)
|
||||
.then(() => {
|
||||
ToolApi.delTool(row.id, loading).then(() => {
|
||||
const index = toolList.value.findIndex((v) => v.id === row.id)
|
||||
toolList.value.splice(index, 1)
|
||||
MsgSuccess(t('common.deleteSuccess'))
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
function configInitParams(item: any) {
|
||||
ToolApi.getToolById(item?.id, changeStateloading).then((res) => {
|
||||
InitParamDrawerRef.value.open(res.data)
|
||||
})
|
||||
}
|
||||
|
||||
// function importTool(file: any) {
|
||||
// const formData = new FormData()
|
||||
// formData.append('file', file.raw, file.name)
|
||||
// elUploadRef.value.clearFiles()
|
||||
// ToolApi
|
||||
// .postImportTool(formData, loading)
|
||||
// .then(async (res: any) => {
|
||||
// if (res?.data) {
|
||||
// searchHandle()
|
||||
// }
|
||||
// })
|
||||
// .catch((e: any) => {
|
||||
// if (e.code === 400) {
|
||||
// MsgConfirm(t('common.tip'), t('views.application.tip.professionalMessage'), {
|
||||
// cancelButtonText: t('common.confirm'),
|
||||
// confirmButtonText: t('common.professional')
|
||||
// }).then(() => {
|
||||
// window.open('https://maxkb.cn/pricing.html', '_blank')
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
onMounted(() => {
|
||||
getFolder()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tool-shared {
|
||||
padding-left: 8px;
|
||||
.shared-header {
|
||||
color: #646a73;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.el-icon i) {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
color: #1f2329;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
<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.debug') }}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<div v-if="form.init_field_list.length > 0" class="mb-16">
|
||||
<h4 class="title-decoration-1 mb-16">
|
||||
{{ $t('common.param.initParam') }}
|
||||
</h4>
|
||||
<el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
|
||||
<DynamicsForm
|
||||
v-model="form.init_params"
|
||||
:model="form.init_params"
|
||||
label-position="top"
|
||||
require-asterisk-position="right"
|
||||
:render_data="form.init_field_list"
|
||||
ref="dynamicsFormRef"
|
||||
>
|
||||
</DynamicsForm>
|
||||
</el-card>
|
||||
</div>
|
||||
<div v-if="form.debug_field_list.length > 0" class="mb-16">
|
||||
<h4 class="title-decoration-1 mb-16">
|
||||
{{ $t('common.param.inputParam') }}
|
||||
</h4>
|
||||
<el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
|
||||
<el-form
|
||||
ref="FormRef"
|
||||
:model="form"
|
||||
label-position="top"
|
||||
require-asterisk-position="right"
|
||||
hide-required-asterisk
|
||||
v-loading="loading"
|
||||
@submit.prevent
|
||||
>
|
||||
<template v-for="(item, index) in form.debug_field_list" :key="index">
|
||||
<el-form-item
|
||||
:label="item.name"
|
||||
:prop="'debug_field_list.' + index + '.value'"
|
||||
:rules="{
|
||||
required: item.is_required,
|
||||
message: $t('views.tool.form.param.inputPlaceholder'),
|
||||
trigger: 'blur',
|
||||
}"
|
||||
>
|
||||
<template #label>
|
||||
<div class="flex">
|
||||
<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>
|
||||
</template>
|
||||
<el-input
|
||||
v-model="item.value"
|
||||
:placeholder="$t('views.tool.form.param.inputPlaceholder')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-button type="primary" @click="submit(FormRef)" :loading="loading">
|
||||
{{ $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.tool.form.debug.runResult') }}
|
||||
</h4>
|
||||
<div class="mb-16">
|
||||
<el-alert
|
||||
v-if="isSuccess"
|
||||
:title="$t('views.tool.form.debug.runSuccess')"
|
||||
type="success"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
<el-alert
|
||||
v-else
|
||||
:title="$t('views.tool.form.debug.runFailed')"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="lighter mb-8">{{ $t('views.tool.form.debug.output') }}</p>
|
||||
|
||||
<el-card
|
||||
:class="isSuccess ? '' : 'danger'"
|
||||
class="pre-wrap"
|
||||
shadow="never"
|
||||
style="max-height: 350px; overflow: scroll"
|
||||
>
|
||||
{{ String(result) == '0' ? 0 : result || '-' }}
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import ToolApi from '@/api/system-shared/tool'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import DynamicsForm from '@/components/dynamics-form/index.vue'
|
||||
|
||||
const FormRef = ref()
|
||||
const dynamicsFormRef = ref()
|
||||
const loading = ref(false)
|
||||
const debugVisible = ref(false)
|
||||
const showResult = ref(false)
|
||||
const isSuccess = ref(false)
|
||||
const result = ref('')
|
||||
|
||||
const form = ref<any>({
|
||||
debug_field_list: [],
|
||||
code: '',
|
||||
input_field_list: [],
|
||||
init_field_list: [],
|
||||
init_params: {},
|
||||
})
|
||||
|
||||
watch(debugVisible, (bool) => {
|
||||
if (!bool) {
|
||||
showResult.value = false
|
||||
isSuccess.value = false
|
||||
result.value = ''
|
||||
form.value = {
|
||||
debug_field_list: [],
|
||||
code: '',
|
||||
input_field_list: [],
|
||||
init_field_list: [],
|
||||
init_params: {},
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
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) => {
|
||||
if (res.code === 500) {
|
||||
showResult.value = true
|
||||
isSuccess.value = false
|
||||
result.value = res.message
|
||||
} else {
|
||||
showResult.value = true
|
||||
isSuccess.value = true
|
||||
result.value = res.data
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const open = (data: any) => {
|
||||
if (data.input_field_list.length > 0) {
|
||||
data.input_field_list.forEach((item: any) => {
|
||||
form.value.debug_field_list.push({
|
||||
value: '',
|
||||
...item,
|
||||
})
|
||||
})
|
||||
}
|
||||
form.value.code = data.code
|
||||
form.value.input_field_list = data.input_field_list
|
||||
form.value.init_field_list = data.init_field_list
|
||||
debugVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
})
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
|
@ -1,449 +0,0 @@
|
|||
<template>
|
||||
<el-drawer v-model="visible" size="60%" :before-close="close">
|
||||
<template #header>
|
||||
<h4>{{ title }}</h4>
|
||||
</template>
|
||||
<div>
|
||||
<h4 class="title-decoration-1 mb-16">
|
||||
{{ $t('views.tool.form.title.baseInfo') }}
|
||||
</h4>
|
||||
<el-form
|
||||
ref="FormRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
require-asterisk-position="right"
|
||||
v-loading="loading"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item :label="$t('views.tool.form.toolName.label')" prop="name">
|
||||
<div class="flex w-full">
|
||||
<div
|
||||
v-if="form.id"
|
||||
class="edit-avatar mr-12"
|
||||
@mouseenter="showEditIcon = true"
|
||||
@mouseleave="showEditIcon = false"
|
||||
>
|
||||
|
||||
<el-Avatar
|
||||
v-if="isAppIcon(form.icon)"
|
||||
:id="form.id"
|
||||
shape="square"
|
||||
:size="32"
|
||||
style="background: none"
|
||||
>
|
||||
<img :src="String(form.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>
|
||||
<el-Avatar
|
||||
v-if="showEditIcon"
|
||||
:id="form.id"
|
||||
shape="square"
|
||||
class="edit-mask"
|
||||
:size="32"
|
||||
@click="openEditAvatar"
|
||||
>
|
||||
<el-icon>
|
||||
<EditPen/>
|
||||
</el-icon>
|
||||
</el-Avatar>
|
||||
</div>
|
||||
<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')"
|
||||
maxlength="64"
|
||||
show-word-limit
|
||||
@blur="form.name = form.name?.trim()"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('views.tool.form.toolDescription.label')">
|
||||
<el-input
|
||||
v-model="form.desc"
|
||||
type="textarea"
|
||||
: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>
|
||||
<div class="flex-between">
|
||||
<h4 class="title-decoration-1 mb-16">
|
||||
{{ $t('common.param.initParam') }}
|
||||
</h4>
|
||||
<el-button link type="primary" @click="openAddInitDialog()">
|
||||
<el-icon class="mr-4">
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
{{ $t('common.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table ref="initFieldTableRef" :data="form.init_field_list" class="mb-16">
|
||||
<el-table-column prop="field" :label="$t('dynamicsForm.paramForm.field.label')">
|
||||
<template #default="{ row }">
|
||||
<span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('dynamicsForm.paramForm.input_type.label')">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'TextInput'">{{
|
||||
$t('dynamicsForm.input_type_list.TextInput')
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'PasswordInput'">{{
|
||||
$t('dynamicsForm.input_type_list.PasswordInput')
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'Slider'">{{
|
||||
$t('dynamicsForm.input_type_list.Slider')
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'SwitchInput'">{{
|
||||
$t('dynamicsForm.input_type_list.SwitchInput')
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'SingleSelect'">{{
|
||||
$t('dynamicsForm.input_type_list.SingleSelect')
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'MultiSelect'">{{
|
||||
$t('dynamicsForm.input_type_list.MultiSelect')
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'RadioCard'">{{
|
||||
$t('dynamicsForm.input_type_list.RadioCard')
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.input_type === 'DatePicker'">{{
|
||||
$t('dynamicsForm.input_type_list.DatePicker')
|
||||
}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('common.required')">
|
||||
<template #default="{ row }">
|
||||
<div @click.stop>
|
||||
<el-switch disabled size="small" v-model="row.required"/>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('common.operation')" align="left" width="90">
|
||||
<template #default="{ row, $index }">
|
||||
<span class="mr-4">
|
||||
<el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
|
||||
<el-button type="primary" text @click.stop="openAddInitDialog(row, $index)">
|
||||
<el-icon><EditPen/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
|
||||
<el-button type="primary" text @click="deleteInitField($index)">
|
||||
<el-icon>
|
||||
<Delete/>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="flex-between">
|
||||
<h4 class="title-decoration-1 mb-16">
|
||||
{{ $t('common.param.inputParam') }}
|
||||
<el-text type="info" class="color-secondary">
|
||||
{{ $t('views.tool.form.param.paramInfo1') }}
|
||||
</el-text>
|
||||
</h4>
|
||||
<el-button link type="primary" @click="openAddDialog()">
|
||||
<el-icon class="mr-4">
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
{{ $t('common.add') }}
|
||||
</el-button>
|
||||
</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 :label="$t('views.tool.form.dataType.label')">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="info" class="info-tag">{{ row.type }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('common.required')">
|
||||
<template #default="{ row }">
|
||||
<div @click.stop>
|
||||
<el-switch size="small" v-model="row.is_required"/>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="source" :label="$t('views.tool.form.source.label')">
|
||||
<template #default="{ row }">
|
||||
{{
|
||||
row.source === 'custom'
|
||||
? $t('views.tool.form.source.custom')
|
||||
: $t('views.tool.form.source.reference')
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('common.operation')" align="left" width="90">
|
||||
<template #default="{ row, $index }">
|
||||
<span class="mr-4">
|
||||
<el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
|
||||
<el-button type="primary" text @click.stop="openAddDialog(row, $index)">
|
||||
<el-icon><EditPen/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
|
||||
<el-button type="primary" text @click="deleteField($index)">
|
||||
<el-icon>
|
||||
<Delete/>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<h4 class="title-decoration-1 mb-16">
|
||||
{{ $t('views.tool.form.param.code') }}
|
||||
<span style="color: red; margin-left: -10px">*</span>
|
||||
<el-text type="info" class="color-secondary">
|
||||
{{ $t('views.tool.form.param.paramInfo2') }}
|
||||
</el-text>
|
||||
</h4>
|
||||
|
||||
<div class="mb-8" v-if="showEditor">
|
||||
<CodemirrorEditor
|
||||
:title="$t('views.tool.form.param.code')"
|
||||
v-model="form.code"
|
||||
@submitDialog="submitCodemirrorEditor"
|
||||
/>
|
||||
</div>
|
||||
<h4 class="title-decoration-1 mb-16 mt-16">
|
||||
{{ $t('common.param.outputParam') }}
|
||||
<el-text type="info" class="color-secondary">
|
||||
{{ $t('views.tool.form.param.paramInfo1') }}
|
||||
</el-text>
|
||||
</h4>
|
||||
<div class="flex-between border-r-4 p-8-12 mb-8 layout-bg lighter">
|
||||
<span>{{ $t('common.result') }} {result}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button :loading="loading" @click="visible = false">{{ $t('common.cancel') }}</el-button>
|
||||
<el-button :loading="loading" @click="openDebug">{{ $t('common.debug') }}</el-button>
|
||||
<el-button type="primary" @click="submit(FormRef)" :loading="loading">
|
||||
{{ isEdit ? $t('common.save') : $t('common.create') }}
|
||||
</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<ToolDebugDrawer ref="ToolDebugDrawerRef"/>
|
||||
<FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList"/>
|
||||
<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 '@/views/shared/tool-shared/component/FieldFormDialog.vue'
|
||||
import ToolDebugDrawer from './ToolDebugDrawer.vue'
|
||||
import UserFieldFormDialog from '@/views/shared/tool-shared/component/UserFieldFormDialog.vue'
|
||||
import EditAvatarDialog from '@/views/shared/tool-shared/component/EditAvatarDialog.vue'
|
||||
import type {toolData} from '@/api/type/tool'
|
||||
import ToolApi from '@/api/system-shared/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 {isAppIcon} from '@/utils/common'
|
||||
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
})
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
const FieldFormDialogRef = ref()
|
||||
const ToolDebugDrawerRef = ref()
|
||||
const UserFieldFormDialogRef = ref()
|
||||
const EditAvatarDialogRef = ref()
|
||||
const initFieldTableRef = ref()
|
||||
const inputFieldTableRef = ref()
|
||||
|
||||
const FormRef = ref()
|
||||
|
||||
const isEdit = ref(false)
|
||||
const loading = ref(false)
|
||||
const visible = ref(false)
|
||||
const showEditor = ref(false)
|
||||
const currentIndex = ref<any>(null)
|
||||
const showEditIcon = ref(false)
|
||||
|
||||
const form = ref<toolData>({
|
||||
name: '',
|
||||
desc: '',
|
||||
code: '',
|
||||
icon: '',
|
||||
input_field_list: [],
|
||||
init_field_list: [],
|
||||
})
|
||||
|
||||
watch(visible, (bool) => {
|
||||
if (!bool) {
|
||||
isEdit.value = false
|
||||
showEditor.value = false
|
||||
currentIndex.value = null
|
||||
form.value = {
|
||||
name: '',
|
||||
desc: '',
|
||||
code: '',
|
||||
icon: '',
|
||||
input_field_list: [],
|
||||
init_field_list: [],
|
||||
}
|
||||
FormRef.value?.clearValidate()
|
||||
}
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.tool.form.toolName.requiredMessage'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
function submitCodemirrorEditor(val: string) {
|
||||
form.value.code = val
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (isEdit.value || !areAllValuesNonEmpty(form.value)) {
|
||||
visible.value = false
|
||||
} else {
|
||||
MsgConfirm(t('common.tip'), t('views.tool.tip.saveMessage'), {
|
||||
confirmButtonText: t('common.confirm'),
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
visible.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function areAllValuesNonEmpty(obj: any) {
|
||||
return Object.values(obj).some((value) => {
|
||||
return Array.isArray(value)
|
||||
? value.length !== 0
|
||||
: value !== null && value !== undefined && value !== ''
|
||||
})
|
||||
}
|
||||
|
||||
function openDebug() {
|
||||
ToolDebugDrawerRef.value.open(form.value)
|
||||
}
|
||||
|
||||
function deleteField(index: any) {
|
||||
form.value.input_field_list?.splice(index, 1)
|
||||
}
|
||||
|
||||
function openAddDialog(data?: any, index?: any) {
|
||||
if (typeof index !== 'undefined') {
|
||||
currentIndex.value = index
|
||||
}
|
||||
|
||||
FieldFormDialogRef.value.open(data)
|
||||
}
|
||||
|
||||
function refreshFieldList(data: any) {
|
||||
if (currentIndex.value !== null) {
|
||||
form.value.input_field_list?.splice(currentIndex.value, 1, data)
|
||||
} else {
|
||||
form.value.input_field_list?.push(data)
|
||||
}
|
||||
currentIndex.value = null
|
||||
}
|
||||
|
||||
function openAddInitDialog(data?: any, index?: any) {
|
||||
if (typeof index !== 'undefined') {
|
||||
currentIndex.value = index
|
||||
}
|
||||
|
||||
UserFieldFormDialogRef.value.open(data)
|
||||
}
|
||||
|
||||
function refreshInitFieldList(data: any) {
|
||||
if (currentIndex.value !== null) {
|
||||
form.value.init_field_list?.splice(currentIndex.value, 1, data)
|
||||
} else {
|
||||
form.value.init_field_list?.push(data)
|
||||
}
|
||||
currentIndex.value = null
|
||||
UserFieldFormDialogRef.value.close()
|
||||
}
|
||||
|
||||
function refreshTool(data: any) {
|
||||
form.value.icon = data
|
||||
}
|
||||
|
||||
function deleteInitField(index: any) {
|
||||
form.value.init_field_list?.splice(index, 1)
|
||||
}
|
||||
|
||||
function openEditAvatar() {
|
||||
EditAvatarDialogRef.value.open(form.value)
|
||||
}
|
||||
|
||||
const submit = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid: any) => {
|
||||
if (valid) {
|
||||
if (isEdit.value) {
|
||||
ToolApi.putTool(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) => {
|
||||
MsgSuccess(t('common.createSuccess'))
|
||||
emit('refresh')
|
||||
visible.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const open = (data: any) => {
|
||||
if (data) {
|
||||
isEdit.value = data?.id ? true : false
|
||||
form.value = cloneDeep(data)
|
||||
}
|
||||
visible.value = true
|
||||
setTimeout(() => {
|
||||
showEditor.value = true
|
||||
}, 100)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="$t('views.tool.form.toolName.name')"
|
||||
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-form-item prop="name">
|
||||
<el-input v-model="form.name" maxlength="64" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</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'
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const fieldFormRef = ref()
|
||||
const loading = ref<boolean>(false)
|
||||
const isEdit = ref<boolean>(false)
|
||||
|
||||
const form = ref<any>({
|
||||
name: ''
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.tool.form.toolName.placeholder'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
|
||||
watch(dialogVisible, (bool) => {
|
||||
if (!bool) {
|
||||
form.value = {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const open = (row: any, edit: boolean) => {
|
||||
if (row) {
|
||||
form.value = cloneDeep(row)
|
||||
}
|
||||
isEdit.value = edit || false
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const submit = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
emit('refresh', form.value, isEdit.value)
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="`Logo ${$t('common.setting')}`"
|
||||
v-model="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
width="550"
|
||||
>
|
||||
<el-radio-group v-model="radioType" class="radio-block mb-16">
|
||||
<el-radio value="default">
|
||||
<p>{{ $t('common.EditAvatarDialog.default') }}</p>
|
||||
<el-avatar class="avatar-green" shape="square" :size="32">
|
||||
<img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
|
||||
</el-avatar>
|
||||
</el-radio>
|
||||
|
||||
<el-radio value="custom">
|
||||
<p>{{ $t('common.EditAvatarDialog.customizeUpload') }}</p>
|
||||
<div class="flex mt-8">
|
||||
<el-avatar
|
||||
v-if="fileURL"
|
||||
shape="square"
|
||||
:size="32"
|
||||
style="background: none"
|
||||
class="mr-16"
|
||||
>
|
||||
<img :src="fileURL" alt="" />
|
||||
</el-avatar>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
accept="image/jpeg, image/png, image/gif"
|
||||
:on-change="onChange"
|
||||
>
|
||||
<el-button icon="Upload" :disabled="radioType !== 'custom'"
|
||||
>{{ $t('common.EditAvatarDialog.upload') }}
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="el-upload__tip info mt-8">
|
||||
{{ $t('common.EditAvatarDialog.sizeTip') }}
|
||||
</div>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit" :loading="loading">
|
||||
{{ $t('common.save') }}</el-button
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import ToolApi from '@/api/system-shared/tool'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { MsgError, MsgSuccess } from '@/utils/message'
|
||||
import { defaultIcon, isAppIcon } from '@/utils/common'
|
||||
import { t } from '@/locales'
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const iconFile = ref<any>(null)
|
||||
const fileURL = ref<any>(null)
|
||||
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
const loading = ref(false)
|
||||
const detail = ref<any>(null)
|
||||
const radioType = ref('default')
|
||||
|
||||
watch(dialogVisible, (bool) => {
|
||||
if (!bool) {
|
||||
iconFile.value = null
|
||||
fileURL.value = null
|
||||
}
|
||||
})
|
||||
|
||||
const open = (data: any) => {
|
||||
radioType.value = isAppIcon(data.icon) ? 'custom' : 'default'
|
||||
fileURL.value = isAppIcon(data.icon) ? data.icon : null
|
||||
detail.value = cloneDeep(data)
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const onChange = (file: any) => {
|
||||
//1、判断文件大小是否合法，文件限制不能大于10MB
|
||||
const isLimit = file?.size / 1024 / 1024 < 10
|
||||
if (!isLimit) {
|
||||
// @ts-ignore
|
||||
MsgError(t('common.EditAvatarDialog.fileSizeExceeded'))
|
||||
return false
|
||||
} else {
|
||||
iconFile.value = file
|
||||
fileURL.value = URL.createObjectURL(file.raw)
|
||||
}
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if (radioType.value === 'default') {
|
||||
emit('refresh', '/ui/favicon.ico')
|
||||
dialogVisible.value = false
|
||||
} else if (radioType.value === 'custom' && iconFile.value) {
|
||||
const fd = new FormData()
|
||||
fd.append('file', iconFile.value.raw)
|
||||
ToolApi.putToolIcon(detail.value.id, fd, loading).then((res: any) => {
|
||||
emit('refresh', res.data)
|
||||
dialogVisible.value = false
|
||||
})
|
||||
} else {
|
||||
MsgError(t('common.EditAvatarDialog.uploadImagePrompt'))
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
<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"
|
||||
append-to-body
|
||||
>
|
||||
<el-form
|
||||
label-position="top"
|
||||
ref="fieldFormRef"
|
||||
:rules="rules"
|
||||
:model="form"
|
||||
require-asterisk-position="right"
|
||||
>
|
||||
<el-form-item :label="$t('views.tool.form.paramName.label')" prop="name">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
: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.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.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-select>
|
||||
</el-form-item>
|
||||
<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>
|
||||
<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 { ref, reactive, watch } from 'vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { t } from '@/locales'
|
||||
const typeOptions = ['string', 'int', 'dict', 'array', 'float']
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const fieldFormRef = ref()
|
||||
const loading = ref<boolean>(false)
|
||||
const isEdit = ref(false)
|
||||
|
||||
const form = ref<any>({
|
||||
name: '',
|
||||
type: typeOptions[0],
|
||||
source: 'reference',
|
||||
is_required: true,
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.tool.form.paramName.placeholder'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
|
||||
watch(dialogVisible, (bool) => {
|
||||
if (!bool) {
|
||||
form.value = {
|
||||
name: '',
|
||||
type: typeOptions[0],
|
||||
source: 'reference',
|
||||
is_required: true,
|
||||
}
|
||||
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) {
|
||||
emit('refresh', form.value)
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<template>
|
||||
<el-drawer v-model="debugVisible" size="60%" :append-to-body="true">
|
||||
<template #header>
|
||||
<h4>{{ $t('common.param.initParam') }}</h4>
|
||||
</template>
|
||||
<div>
|
||||
<div v-if="form.init_field_list?.length > 0">
|
||||
<DynamicsForm
|
||||
v-model="form.init_params"
|
||||
:model="form.init_params"
|
||||
label-position="top"
|
||||
require-asterisk-position="right"
|
||||
:render_data="form.init_field_list"
|
||||
ref="dynamicsFormRef"
|
||||
>
|
||||
</DynamicsForm>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button type="primary" @click="submit()" :loading="loading">
|
||||
{{ $t('common.save') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, watch} from 'vue'
|
||||
import ToolApi from '@/api/system-shared/tool'
|
||||
import DynamicsForm from '@/components/dynamics-form/index.vue'
|
||||
import {MsgSuccess} from '@/utils/message'
|
||||
import {t} from '@/locales'
|
||||
import {cloneDeep} from 'lodash'
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const dynamicsFormRef = ref()
|
||||
const loading = ref(false)
|
||||
const debugVisible = ref(false)
|
||||
|
||||
const form = ref<any>({
|
||||
init_params: {},
|
||||
})
|
||||
|
||||
watch(debugVisible, (bool) => {
|
||||
if (!bool) {
|
||||
form.value = {
|
||||
init_params: {},
|
||||
is_active: false,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const submit = async () => {
|
||||
dynamicsFormRef.value.validate().then(() => {
|
||||
ToolApi.putTool(form.value?.id as string, form.value, loading).then((res) => {
|
||||
MsgSuccess(t('common.editSuccess'))
|
||||
emit('refresh')
|
||||
debugVisible.value = false
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const open = (data: any, is_active: boolean) => {
|
||||
if (data) {
|
||||
form.value = cloneDeep(data)
|
||||
form.value.is_active = is_active
|
||||
}
|
||||
const init_params = form.value.init_field_list
|
||||
.map((item: any) => {
|
||||
if (item.show_default_value === false) {
|
||||
return {[item.field]: undefined}
|
||||
}
|
||||
return {[item.field]: item.default_value}
|
||||
})
|
||||
.reduce((x: any, y: any) => ({...x, ...y}), {})
|
||||
form.value.init_params = {...init_params, ...form.value.init_params}
|
||||
debugVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
})
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
<template>
|
||||
<el-drawer v-model="visibleInternalDesc" 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="visibleInternalDesc = false">
|
||||
<el-icon :size="20">
|
||||
<Back />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<h4>详情</h4>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<div class="flex-between">
|
||||
<div class="title flex align-center">
|
||||
<el-avatar
|
||||
v-if="isAppIcon(functionDetail?.icon)"
|
||||
shape="square"
|
||||
:size="64"
|
||||
style="background: none"
|
||||
class="mr-8"
|
||||
>
|
||||
<img :src="functionDetail?.icon" alt="" />
|
||||
</el-avatar>
|
||||
<el-avatar
|
||||
v-else-if="functionDetail?.name"
|
||||
:name="functionDetail?.name"
|
||||
pinyinColor
|
||||
shape="square"
|
||||
:size="64"
|
||||
class="mr-8"
|
||||
/>
|
||||
<div class="ml-16">
|
||||
<h3 class="mb-8">{{ functionDetail.name }}</h3>
|
||||
<el-text type="info" v-if="functionDetail?.desc">
|
||||
{{ functionDetail.desc }}
|
||||
</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<div @click.stop>
|
||||
<el-button type="primary" @click="addInternalFunction(functionDetail)">
|
||||
{{ $t('common.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-16">
|
||||
<el-text type="info">
|
||||
<div>{{ $t('common.author') }}: MaxKB</div>
|
||||
</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<MdPreview
|
||||
ref="editorRef"
|
||||
editorId="preview-only"
|
||||
:modelValue="markdownContent"
|
||||
style="background: none"
|
||||
noImgZoomIn
|
||||
/>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { isAppIcon } from '@/utils/common'
|
||||
const emit = defineEmits(['refresh', 'addFunction'])
|
||||
|
||||
const visibleInternalDesc = ref(false)
|
||||
const markdownContent = ref('')
|
||||
const functionDetail = ref<any>({})
|
||||
|
||||
watch(visibleInternalDesc, (bool) => {
|
||||
if (!bool) {
|
||||
markdownContent.value = ''
|
||||
}
|
||||
})
|
||||
|
||||
const open = (data: any, detail: any) => {
|
||||
functionDetail.value = detail
|
||||
if (data) {
|
||||
markdownContent.value = cloneDeep(data)
|
||||
}
|
||||
visibleInternalDesc.value = true
|
||||
}
|
||||
|
||||
const addInternalFunction = (data: any) => {
|
||||
emit('addFunction', data)
|
||||
visibleInternalDesc.value = false
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
|
@ -1,169 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,448 +0,0 @@
|
|||
<template>
|
||||
<div class="tool-shared">
|
||||
<ContentContainer>
|
||||
<template #header>
|
||||
<div class="shared-header">
|
||||
<span class="title">{{ t('views.system.shared.shared_resources') }}</span>
|
||||
<el-icon size="12">
|
||||
<rightOutlined></rightOutlined>
|
||||
</el-icon>
|
||||
<span class="sub-title">{{ t('views.tool.title') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #search>
|
||||
<div class="flex">
|
||||
<div class="flex-between complex-search">
|
||||
<el-select
|
||||
class="complex-search__left"
|
||||
v-model="search_type"
|
||||
style="width: 120px"
|
||||
@change="search_type_change"
|
||||
>
|
||||
<el-option :label="$t('common.creator')" value="create_user" />
|
||||
|
||||
<el-option :label="$t('views.model.modelForm.modeName.label')" value="name" />
|
||||
</el-select>
|
||||
<el-input
|
||||
v-if="search_type === 'name'"
|
||||
v-model="search_form.name"
|
||||
@change="getList"
|
||||
:placeholder="$t('common.searchBar.placeholder')"
|
||||
style="width: 220px"
|
||||
clearable
|
||||
/>
|
||||
<el-select
|
||||
v-else-if="search_type === 'create_user'"
|
||||
v-model="search_form.create_user"
|
||||
@change="getList"
|
||||
clearable
|
||||
style="width: 220px"
|
||||
>
|
||||
<el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.username" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-button class="ml-16" type="primary"> {{ $t('common.create') }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<el-row v-if="toolList.length > 0" :gutter="15">
|
||||
<template v-for="(item, index) in toolList" :key="index">
|
||||
<el-col
|
||||
v-if="item.resource_type === 'folder'"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="8"
|
||||
:xl="6"
|
||||
class="mb-16"
|
||||
>
|
||||
<CardBox
|
||||
:title="item.name"
|
||||
:description="item.desc || $t('common.noData')"
|
||||
class="cursor"
|
||||
>
|
||||
<template #icon>
|
||||
<el-avatar shape="square" :size="32" style="background: none">
|
||||
<AppIcon iconName="app-folder" style="font-size: 32px"></AppIcon>
|
||||
</el-avatar>
|
||||
</template>
|
||||
<template #subTitle>
|
||||
<el-text class="color-secondary lighter" size="small">
|
||||
{{ $t('common.creator') }}: {{ item.nick_name }}
|
||||
</el-text>
|
||||
</template>
|
||||
</CardBox>
|
||||
</el-col>
|
||||
<el-col v-else :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
|
||||
<CardBox isShared :title="item.name" :description="item.desc" class="cursor">
|
||||
<template #icon>
|
||||
<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>
|
||||
<template #subTitle>
|
||||
<el-text class="color-secondary lighter" size="small">
|
||||
{{ $t('common.creator') }}: {{ item.nick_name }}
|
||||
</el-text>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div v-if="item.is_active" class="flex align-center">
|
||||
<el-icon class="color-success mr-8" style="font-size: 16px">
|
||||
<SuccessFilled />
|
||||
</el-icon>
|
||||
<span class="color-secondary">
|
||||
{{ $t('common.status.enabled') }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="flex align-center">
|
||||
<AppIcon iconName="app-disabled" class="color-secondary mr-8"></AppIcon>
|
||||
<span class="color-secondary">
|
||||
{{ $t('common.status.disabled') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #mouseEnter>
|
||||
<div @click.stop>
|
||||
<el-switch
|
||||
v-model="item.is_active"
|
||||
:before-change="() => changeState(item)"
|
||||
size="small"
|
||||
class="mr-4"
|
||||
/>
|
||||
<el-divider direction="vertical" />
|
||||
<el-dropdown trigger="click">
|
||||
<el-button text @click.stop>
|
||||
<el-icon>
|
||||
<MoreFilled />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
icon="Lock"
|
||||
@click.stop="openAuthorizedWorkspaceDialog(item)"
|
||||
>{{ $t('views.system.shared.authorized_workspace') }}</el-dropdown-item
|
||||
>
|
||||
<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="!canEdit(item)"
|
||||
v-if="!item.template_id"
|
||||
@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>
|
||||
{{ $t('common.param.initParam') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-if="!item.template_id"
|
||||
:disabled="!canEdit(item)"
|
||||
@click.stop="exportTool(item)"
|
||||
>
|
||||
<AppIcon iconName="app-export"></AppIcon>
|
||||
{{ $t('common.export') }}
|
||||
</el-dropdown-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-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</CardBox>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
<el-empty :description="$t('common.noData')" v-else />
|
||||
</div>
|
||||
</ContentContainer>
|
||||
<InitParamDrawer ref="InitParamDrawerRef" @refresh="refresh" />
|
||||
<ToolFormDrawer ref="ToolFormDrawerRef" @refresh="refresh" :title="ToolDrawertitle" />
|
||||
<AuthorizedWorkspace ref="AuthorizedWorkspaceDialogRef"></AuthorizedWorkspace>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, reactive, computed } from 'vue'
|
||||
import { cloneDeep, get } from 'lodash'
|
||||
import ToolApi from '@/api/system-shared/tool'
|
||||
import useStore from '@/stores/modules-shared-system'
|
||||
import InitParamDrawer from '@/views/shared/tool-shared/component/InitParamDrawer.vue'
|
||||
import ToolFormDrawer from './ToolFormDrawer.vue'
|
||||
import { t } from '@/locales'
|
||||
import { isAppIcon } from '@/utils/common'
|
||||
import iconMap from '@/components/app-icon/icons/common'
|
||||
import AuthorizedWorkspace from '@/views/shared/AuthorizedWorkspaceDialog.vue'
|
||||
import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
|
||||
|
||||
const { folder, user } = useStore()
|
||||
const rightOutlined = iconMap['right-outlined'].iconReader()
|
||||
const InitParamDrawerRef = ref()
|
||||
const search_type = ref('name')
|
||||
const search_form = ref<{
|
||||
name: string
|
||||
create_user: string
|
||||
}>({
|
||||
name: '',
|
||||
create_user: '',
|
||||
})
|
||||
const user_options = ref<any[]>([])
|
||||
|
||||
const AuthorizedWorkspaceDialogRef = ref()
|
||||
function openAuthorizedWorkspaceDialog(row: any) {
|
||||
if (AuthorizedWorkspaceDialogRef.value) {
|
||||
AuthorizedWorkspaceDialogRef.value.open(row, 'Tool')
|
||||
}
|
||||
}
|
||||
const loading = ref(false)
|
||||
const changeStateloading = ref(false)
|
||||
const paginationConfig = reactive({
|
||||
current_page: 1,
|
||||
page_size: 30,
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const folderList = ref<any[]>([])
|
||||
const toolList = ref<any[]>([])
|
||||
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 (canEdit(data)) {
|
||||
ToolApi.getToolById(data?.id, changeStateloading).then((res) => {
|
||||
ToolFormDrawerRef.value.open(res.data)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
ToolFormDrawerRef.value.open(data)
|
||||
}
|
||||
}
|
||||
|
||||
function getList() {
|
||||
const params = {
|
||||
folder_id: currentFolder.value?.id || 'default',
|
||||
scope: 'SHARED',
|
||||
}
|
||||
ToolApi.getToolListPage(paginationConfig, params, loading).then((res) => {
|
||||
paginationConfig.total = res.data?.total
|
||||
toolList.value = [...toolList.value, ...res.data?.records]
|
||||
})
|
||||
}
|
||||
|
||||
function getFolder() {
|
||||
const params = {}
|
||||
folder.asyncGetFolder('TOOL', params, loading).then((res: any) => {
|
||||
folderList.value = res.data
|
||||
currentFolder.value = res.data?.[0] || {}
|
||||
getList()
|
||||
})
|
||||
}
|
||||
|
||||
async function changeState(row: any) {
|
||||
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.putTool(row.id, obj, changeStateloading)
|
||||
.then(() => {
|
||||
return true
|
||||
})
|
||||
.catch(() => {
|
||||
return false
|
||||
})
|
||||
})
|
||||
} else {
|
||||
const res = await ToolApi.getToolById(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.putTool(row.id, obj, changeStateloading)
|
||||
.then(() => {
|
||||
return true
|
||||
})
|
||||
.catch(() => {
|
||||
return false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function refresh(data: any) {
|
||||
if (data) {
|
||||
const index = toolList.value.findIndex((v) => v.id === data.id)
|
||||
// if (user.userInfo && data.user_id === user.userInfo.id) {
|
||||
// data.username = user.userInfo.username
|
||||
// } else {
|
||||
// data.username = userOptions.value.find((v) => v.value === data.user_id)?.label
|
||||
// }
|
||||
toolList.value.splice(index, 1, data)
|
||||
}
|
||||
paginationConfig.total = 0
|
||||
paginationConfig.current_page = 1
|
||||
toolList.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
function folderClickHandel(row: any) {
|
||||
currentFolder.value = row
|
||||
toolList.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
function copyTool(row: any) {
|
||||
ToolDrawertitle.value = t('views.tool.copyTool')
|
||||
const obj = cloneDeep(row)
|
||||
delete obj['id']
|
||||
obj['name'] = obj['name'] + ` ${t('views.tool.form.title.copy')}`
|
||||
ToolFormDrawerRef.value.open(obj)
|
||||
}
|
||||
|
||||
function exportTool(row: any) {
|
||||
ToolApi.exportTool(row.id, row.name, loading).catch((e: any) => {
|
||||
if (e.response.status !== 403) {
|
||||
e.response.data.text().then((res: string) => {
|
||||
MsgError(`${t('views.application.tip.ExportError')}:${JSON.parse(res).message}`)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function deleteTool(row: any) {
|
||||
MsgConfirm(
|
||||
`${t('views.tool.delete.confirmTitle')}${row.name} ?`,
|
||||
t('views.tool.delete.confirmMessage'),
|
||||
{
|
||||
confirmButtonText: t('common.confirm'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
confirmButtonClass: 'danger',
|
||||
},
|
||||
)
|
||||
.then(() => {
|
||||
ToolApi.delTool(row.id, loading).then(() => {
|
||||
const index = toolList.value.findIndex((v) => v.id === row.id)
|
||||
toolList.value.splice(index, 1)
|
||||
MsgSuccess(t('common.deleteSuccess'))
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
function configInitParams(item: any) {
|
||||
ToolApi.getToolById(item?.id, changeStateloading).then((res) => {
|
||||
InitParamDrawerRef.value.open(res.data)
|
||||
})
|
||||
}
|
||||
|
||||
// function importTool(file: any) {
|
||||
// const formData = new FormData()
|
||||
// formData.append('file', file.raw, file.name)
|
||||
// elUploadRef.value.clearFiles()
|
||||
// ToolApi
|
||||
// .postImportTool(formData, loading)
|
||||
// .then(async (res: any) => {
|
||||
// if (res?.data) {
|
||||
// searchHandle()
|
||||
// }
|
||||
// })
|
||||
// .catch((e: any) => {
|
||||
// if (e.code === 400) {
|
||||
// MsgConfirm(t('common.tip'), t('views.application.tip.professionalMessage'), {
|
||||
// cancelButtonText: t('common.confirm'),
|
||||
// confirmButtonText: t('common.professional')
|
||||
// }).then(() => {
|
||||
// window.open('https://maxkb.cn/pricing.html', '_blank')
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tool-shared {
|
||||
padding-left: 8px;
|
||||
.shared-header {
|
||||
color: #646a73;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.el-icon i) {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
color: #1f2329;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -309,14 +309,14 @@ import { useRoute } from 'vue-router'
|
|||
import InitParamDrawer from '@/views/tool/component/InitParamDrawer.vue'
|
||||
import ToolFormDrawer from '@/views/tool/ToolFormDrawer.vue'
|
||||
import CreateFolderDialog from '@/components/folder-tree/CreateFolderDialog.vue'
|
||||
import AuthorizedWorkspace from '@/views/shared/AuthorizedWorkspaceDialog.vue'
|
||||
import AuthorizedWorkspace from '@/views/system-shared/AuthorizedWorkspaceDialog.vue'
|
||||
import { isAppIcon } from '@/utils/common'
|
||||
import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
|
||||
import { EditionConst, PermissionConst, RoleConst } from '@/utils/permission/data'
|
||||
import { hasPermission } from '@/utils/permission/index'
|
||||
import { FolderSource } from '@/enums/common'
|
||||
import ToolStoreDialog from '@/views/tool/component/ToolStoreDialog.vue'
|
||||
import AddInternalFunctionDialog from '@/views/tool/component/AddInternalFunctionDialog.vue'
|
||||
import ToolStoreDialog from '@/views/tool/toolStore/ToolStoreDialog.vue'
|
||||
import AddInternalFunctionDialog from '@/views/tool/toolStore/AddInternalFunctionDialog.vue'
|
||||
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
|
||||
import permissionMap from '@/permission'
|
||||
import useStore from '@/stores'
|
||||
|
|
@ -386,7 +386,7 @@ function openCreateDialog(data?: any) {
|
|||
if (data) {
|
||||
loadSharedApi({ type: 'tool', systemType: type.value })
|
||||
.getToolById(data?.id, loading)
|
||||
.then((res) => {
|
||||
.then((res：) => {
|
||||
ToolFormDrawerRef.value.open(res.data)
|
||||
})
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Reference in New Issue