Devosend
3 years ago
committed by
GitHub
12 changed files with 1068 additions and 7 deletions
@ -0,0 +1,269 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { defineComponent, toRefs, PropType, watch, onMounted, ref } from 'vue' |
||||||
|
import { |
||||||
|
NUpload, |
||||||
|
NIcon, |
||||||
|
NForm, |
||||||
|
NFormItem, |
||||||
|
NInput, |
||||||
|
NInputGroup, |
||||||
|
NRadio, |
||||||
|
NTreeSelect, |
||||||
|
NButton, |
||||||
|
NRadioGroup |
||||||
|
} from 'naive-ui' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import { CloudUploadOutlined } from '@vicons/antd' |
||||||
|
import Modal from '@/components/modal' |
||||||
|
import { useForm } from './use-form' |
||||||
|
import { useModal } from './use-modal' |
||||||
|
import type { IUdf } from '../types' |
||||||
|
|
||||||
|
const props = { |
||||||
|
row: { |
||||||
|
type: Object as PropType<IUdf>, |
||||||
|
default: {} |
||||||
|
}, |
||||||
|
show: { |
||||||
|
type: Boolean as PropType<boolean>, |
||||||
|
default: false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default defineComponent({ |
||||||
|
name: 'ResourceFileFolder', |
||||||
|
props, |
||||||
|
emits: ['update:show', 'updateList'], |
||||||
|
setup(props, ctx) { |
||||||
|
const treeRef = ref() |
||||||
|
const { state, uploadState } = useForm() |
||||||
|
|
||||||
|
const { |
||||||
|
variables, |
||||||
|
handleCreateFunc, |
||||||
|
handleRenameFunc, |
||||||
|
getUdfList, |
||||||
|
handleUploadFile |
||||||
|
} = useModal(state, uploadState, ctx) |
||||||
|
|
||||||
|
const hideModal = () => { |
||||||
|
ctx.emit('update:show') |
||||||
|
} |
||||||
|
|
||||||
|
const handleCreate = () => { |
||||||
|
handleCreateFunc() |
||||||
|
} |
||||||
|
|
||||||
|
const handleRename = () => { |
||||||
|
handleRenameFunc(props.row.id) |
||||||
|
} |
||||||
|
|
||||||
|
const handleUpload = () => { |
||||||
|
uploadState.uploadForm.currentDir = `/${treeRef.value.selectedOption?.fullName}` |
||||||
|
handleUploadFile() |
||||||
|
} |
||||||
|
|
||||||
|
const customRequest = ({ file }: any) => { |
||||||
|
uploadState.uploadForm.name = file.name |
||||||
|
uploadState.uploadForm.file = file.file |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
getUdfList() |
||||||
|
}) |
||||||
|
|
||||||
|
watch( |
||||||
|
() => props.row, |
||||||
|
() => { |
||||||
|
variables.uploadShow = false |
||||||
|
state.functionForm.type = props.row.type |
||||||
|
state.functionForm.funcName = props.row.funcName |
||||||
|
state.functionForm.className = props.row.className |
||||||
|
state.functionForm.resourceId = props.row.resourceId || -1 |
||||||
|
state.functionForm.description = props.row.description |
||||||
|
} |
||||||
|
) |
||||||
|
return { |
||||||
|
treeRef, |
||||||
|
hideModal, |
||||||
|
handleCreate, |
||||||
|
handleRename, |
||||||
|
customRequest, |
||||||
|
handleUpload, |
||||||
|
...toRefs(state), |
||||||
|
...toRefs(uploadState), |
||||||
|
...toRefs(variables) |
||||||
|
} |
||||||
|
}, |
||||||
|
render() { |
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
show={this.$props.show} |
||||||
|
title={ |
||||||
|
this.row.id |
||||||
|
? t('resource.function.edit_udf_function') |
||||||
|
: t('resource.function.create_udf_function') |
||||||
|
} |
||||||
|
onCancel={this.hideModal} |
||||||
|
onConfirm={this.row.id ? this.handleRename : this.handleCreate} |
||||||
|
> |
||||||
|
<NForm |
||||||
|
rules={this.rules} |
||||||
|
ref='functionFormRef' |
||||||
|
label-placement='left' |
||||||
|
label-width='160' |
||||||
|
> |
||||||
|
<NFormItem label={t('resource.function.type')} path='type'> |
||||||
|
<NRadioGroup |
||||||
|
v-model={[this.functionForm.type, 'value']} |
||||||
|
name='type' |
||||||
|
> |
||||||
|
<NRadio value='HIVE'>HIVE UDF</NRadio> |
||||||
|
</NRadioGroup> |
||||||
|
</NFormItem> |
||||||
|
<NFormItem |
||||||
|
label={t('resource.function.udf_function_name')} |
||||||
|
path='funcName' |
||||||
|
> |
||||||
|
<NInput |
||||||
|
v-model={[this.functionForm.funcName, 'value']} |
||||||
|
placeholder={t('resource.function.enter_udf_unction_name_tips')} |
||||||
|
/> |
||||||
|
</NFormItem> |
||||||
|
<NFormItem |
||||||
|
label={t('resource.function.package_name')} |
||||||
|
path='className' |
||||||
|
> |
||||||
|
<NInput |
||||||
|
v-model={[this.functionForm.className, 'value']} |
||||||
|
placeholder={t('resource.function.enter_package_name_tips')} |
||||||
|
/> |
||||||
|
</NFormItem> |
||||||
|
<NFormItem |
||||||
|
label={t('resource.function.udf_resources')} |
||||||
|
path='resourceId' |
||||||
|
> |
||||||
|
<NInputGroup> |
||||||
|
<NTreeSelect |
||||||
|
options={this.udfResourceList} |
||||||
|
label-field='fullName' |
||||||
|
key-field='id' |
||||||
|
v-model={[this.functionForm.resourceId, 'value']} |
||||||
|
placeholder={t( |
||||||
|
'resource.function.enter_select_udf_resources_tips' |
||||||
|
)} |
||||||
|
defaultValue={this.functionForm.resourceId} |
||||||
|
disabled={this.uploadShow} |
||||||
|
showPath={false} |
||||||
|
></NTreeSelect> |
||||||
|
<NButton |
||||||
|
type='primary' |
||||||
|
ghost |
||||||
|
onClick={() => (this.uploadShow = !this.uploadShow)} |
||||||
|
> |
||||||
|
{t('resource.function.upload_resources')} |
||||||
|
</NButton> |
||||||
|
</NInputGroup> |
||||||
|
</NFormItem> |
||||||
|
{this.uploadShow && ( |
||||||
|
<NForm |
||||||
|
rules={this.uploadRules} |
||||||
|
ref='uploadFormRef' |
||||||
|
label-placement='left' |
||||||
|
label-width='160' |
||||||
|
> |
||||||
|
<NFormItem |
||||||
|
label={t('resource.function.udf_resources_directory')} |
||||||
|
path='pid' |
||||||
|
show-feedback={false} |
||||||
|
style={{ marginBottom: '5px' }} |
||||||
|
> |
||||||
|
<NTreeSelect |
||||||
|
ref='treeRef' |
||||||
|
options={this.udfResourceDirList} |
||||||
|
label-field='fullName' |
||||||
|
key-field='id' |
||||||
|
v-model={[this.uploadForm.pid, 'value']} |
||||||
|
placeholder={t( |
||||||
|
'resource.function.enter_select_udf_resources_directory_tips' |
||||||
|
)} |
||||||
|
defaultValue={this.uploadForm.pid} |
||||||
|
></NTreeSelect> |
||||||
|
</NFormItem> |
||||||
|
<NFormItem |
||||||
|
label=' ' |
||||||
|
show-feedback={false} |
||||||
|
style={{ marginBottom: '5px' }} |
||||||
|
> |
||||||
|
<NInputGroup> |
||||||
|
<NInput |
||||||
|
v-model={[this.uploadForm.name, 'value']} |
||||||
|
placeholder={t('resource.function.enter_name_tips')} |
||||||
|
/> |
||||||
|
<NButton> |
||||||
|
<NUpload |
||||||
|
v-model={[this.uploadForm.file, 'value']} |
||||||
|
customRequest={this.customRequest} |
||||||
|
showFileList={false} |
||||||
|
> |
||||||
|
<NButton text> |
||||||
|
上传 |
||||||
|
<NIcon> |
||||||
|
<CloudUploadOutlined /> |
||||||
|
</NIcon> |
||||||
|
</NButton> |
||||||
|
</NUpload> |
||||||
|
</NButton> |
||||||
|
</NInputGroup> |
||||||
|
</NFormItem> |
||||||
|
<NFormItem |
||||||
|
label=' ' |
||||||
|
path='description' |
||||||
|
show-feedback={false} |
||||||
|
style={{ marginBottom: '5px' }} |
||||||
|
> |
||||||
|
<NInput |
||||||
|
type='textarea' |
||||||
|
v-model={[this.uploadForm.description, 'value']} |
||||||
|
placeholder={t('resource.function.enter_description_tips')} |
||||||
|
/> |
||||||
|
</NFormItem> |
||||||
|
<NFormItem label=' '> |
||||||
|
<NButton onClick={this.handleUpload}>上传UDF资源</NButton> |
||||||
|
</NFormItem> |
||||||
|
</NForm> |
||||||
|
)} |
||||||
|
|
||||||
|
<NFormItem |
||||||
|
label={t('resource.function.instructions')} |
||||||
|
path='description' |
||||||
|
> |
||||||
|
<NInput |
||||||
|
type='textarea' |
||||||
|
v-model={[this.functionForm.description, 'value']} |
||||||
|
placeholder={t('resource.function.enter_instructions_tips')} |
||||||
|
/> |
||||||
|
</NFormItem> |
||||||
|
</NForm> |
||||||
|
</Modal> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
@ -0,0 +1,102 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { reactive, ref } from 'vue' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import type { FormRules } from 'naive-ui' |
||||||
|
|
||||||
|
export const useForm = () => { |
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const state = reactive({ |
||||||
|
functionFormRef: ref(), |
||||||
|
functionForm: { |
||||||
|
type: 'HIVE', |
||||||
|
funcName: '', |
||||||
|
className: '', |
||||||
|
argTypes: '', |
||||||
|
database: '', |
||||||
|
description: '', |
||||||
|
resourceId: -1 |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
type: { |
||||||
|
required: true, |
||||||
|
trigger: ['input', 'blur'], |
||||||
|
validator() { |
||||||
|
if (!state.functionForm.type) { |
||||||
|
return new Error(t('resource.function.enter_name_tips')) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
funcName: { |
||||||
|
required: true, |
||||||
|
trigger: ['input', 'blur'], |
||||||
|
validator() { |
||||||
|
if (!state.functionForm.funcName) { |
||||||
|
return new Error(t('resource.function.enter_name_tips')) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
className: { |
||||||
|
required: true, |
||||||
|
trigger: ['input', 'blur'], |
||||||
|
validator() { |
||||||
|
if (!state.functionForm.className) { |
||||||
|
return new Error(t('resource.function.enter_name_tips')) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
resourceId: { |
||||||
|
required: true, |
||||||
|
trigger: ['input', 'blur'], |
||||||
|
validator() { |
||||||
|
if (state.functionForm.resourceId === -1) { |
||||||
|
return new Error(t('resource.function.enter_name_tips')) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} as FormRules |
||||||
|
}) |
||||||
|
|
||||||
|
const uploadState = reactive({ |
||||||
|
uploadFormRef: ref(), |
||||||
|
uploadForm: { |
||||||
|
name: '', |
||||||
|
file: '', |
||||||
|
description: '', |
||||||
|
pid: -1, |
||||||
|
currentDir: '/' |
||||||
|
}, |
||||||
|
uploadRules: { |
||||||
|
pid: { |
||||||
|
required: true, |
||||||
|
trigger: ['input', 'blur'], |
||||||
|
validator() { |
||||||
|
if (uploadState.uploadForm.pid === -1) { |
||||||
|
return new Error(t('resource.function.enter_name_tips')) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} as FormRules |
||||||
|
}) |
||||||
|
|
||||||
|
return { |
||||||
|
state, |
||||||
|
uploadState |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,184 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import _ from 'lodash' |
||||||
|
import { ref, reactive, SetupContext } from 'vue' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import { |
||||||
|
createResource, |
||||||
|
createUdfFunc, |
||||||
|
queryResourceList, |
||||||
|
updateUdfFunc |
||||||
|
} from '@/service/modules/resources' |
||||||
|
import { useAsyncState } from '@vueuse/core' |
||||||
|
|
||||||
|
export function useModal( |
||||||
|
state: any, |
||||||
|
uploadState: any, |
||||||
|
ctx: SetupContext<('update:show' | 'updateList')[]> |
||||||
|
) { |
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const handleCreateFunc = async () => { |
||||||
|
submitRequest( |
||||||
|
async () => |
||||||
|
await createUdfFunc( |
||||||
|
{ |
||||||
|
...state.functionForm |
||||||
|
}, |
||||||
|
state.functionForm.resourceId |
||||||
|
) |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const handleRenameFunc = async (id: number) => { |
||||||
|
submitRequest(async () => { |
||||||
|
await updateUdfFunc( |
||||||
|
{ |
||||||
|
...state.functionForm, |
||||||
|
id |
||||||
|
}, |
||||||
|
state.functionForm.resourceId, |
||||||
|
id |
||||||
|
) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const submitRequest = (serviceHandle: any) => { |
||||||
|
state.functionFormRef.validate(async (valid: any) => { |
||||||
|
if (!valid) { |
||||||
|
try { |
||||||
|
await serviceHandle() |
||||||
|
window.$message.success(t('resource.udf.success')) |
||||||
|
ctx.emit('updateList') |
||||||
|
ctx.emit('update:show') |
||||||
|
} catch (error: any) { |
||||||
|
window.$message.error(error.message) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const variables = reactive({ |
||||||
|
uploadShow: ref(false), |
||||||
|
udfResourceList: [], |
||||||
|
udfResourceDirList: [] |
||||||
|
}) |
||||||
|
|
||||||
|
const filterEmptyDirectory = (list: any) => { |
||||||
|
for (const item of list) { |
||||||
|
if (item.children) { |
||||||
|
if (!/\.jar$/.test(item.name)) { |
||||||
|
item.disabled = true |
||||||
|
} |
||||||
|
filterEmptyDirectory(item.children) |
||||||
|
} |
||||||
|
} |
||||||
|
return list.filter( |
||||||
|
(n: any) => |
||||||
|
(/\.jar$/.test(n.name) && n.children.length === 0) || |
||||||
|
(!/\.jar$/.test(n.name) && n.children.length > 0) |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
// filterJarFile
|
||||||
|
const filterJarFile = (array: any) => { |
||||||
|
for (const item of array) { |
||||||
|
if (item.children) { |
||||||
|
item.children = filterJarFile(item.children) |
||||||
|
} |
||||||
|
} |
||||||
|
return array.filter((n: any) => !/\.jar$/.test(n.name)) |
||||||
|
} |
||||||
|
|
||||||
|
// recursiveTree
|
||||||
|
const recursiveTree = (item: any) => { |
||||||
|
// Recursive convenience tree structure
|
||||||
|
item.forEach((item: any) => { |
||||||
|
item.children === '' || |
||||||
|
item.children === undefined || |
||||||
|
item.children === null || |
||||||
|
item.children.length === 0 |
||||||
|
? delete item.children |
||||||
|
: recursiveTree(item.children) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getUdfList = () => { |
||||||
|
const { state } = useAsyncState( |
||||||
|
queryResourceList({ type: 'UDF' }).then((res: any) => { |
||||||
|
let item = res |
||||||
|
let item1 = _.cloneDeep(res) |
||||||
|
|
||||||
|
filterEmptyDirectory(item) |
||||||
|
item = filterEmptyDirectory(item) |
||||||
|
recursiveTree(item) |
||||||
|
recursiveTree(filterJarFile(item1)) |
||||||
|
item1 = item1.filter((item: any) => { |
||||||
|
if (item.dirctory) { |
||||||
|
return item |
||||||
|
} |
||||||
|
}) |
||||||
|
variables.udfResourceList = item |
||||||
|
variables.udfResourceDirList = item1 |
||||||
|
}), |
||||||
|
{} |
||||||
|
) |
||||||
|
return state |
||||||
|
} |
||||||
|
|
||||||
|
const resetUploadForm = () => { |
||||||
|
uploadState.uploadForm.name = '' |
||||||
|
uploadState.uploadForm.file = '' |
||||||
|
uploadState.uploadForm.pid = -1 |
||||||
|
uploadState.uploadForm.currentDir = '/' |
||||||
|
uploadState.uploadForm.description = '' |
||||||
|
} |
||||||
|
|
||||||
|
const handleUploadFile = () => { |
||||||
|
uploadState.uploadFormRef.validate(async (valid: any) => { |
||||||
|
if (!valid) { |
||||||
|
const formData = new FormData() |
||||||
|
formData.append('file', uploadState.uploadForm.file) |
||||||
|
formData.append('type', 'UDF') |
||||||
|
formData.append('name', uploadState.uploadForm.name) |
||||||
|
formData.append('pid', uploadState.uploadForm.pid) |
||||||
|
formData.append('currentDir', uploadState.uploadForm.currentDir) |
||||||
|
formData.append('description', uploadState.uploadForm.description) |
||||||
|
|
||||||
|
try { |
||||||
|
const res = await createResource(formData as any) |
||||||
|
window.$message.success(t('resource.function.success')) |
||||||
|
variables.uploadShow = false |
||||||
|
resetUploadForm() |
||||||
|
getUdfList() |
||||||
|
state.functionForm.resourceId = res.id |
||||||
|
} catch (error: any) { |
||||||
|
window.$message.error(error.message) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
variables, |
||||||
|
getUdfList, |
||||||
|
handleCreateFunc, |
||||||
|
handleRenameFunc, |
||||||
|
handleUploadFile |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,73 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.card { |
||||||
|
margin-bottom: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.header { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin: 10px 0; |
||||||
|
.right { |
||||||
|
> .search { |
||||||
|
.list { |
||||||
|
float: right; |
||||||
|
margin: 3px 0 3px 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.table { |
||||||
|
table { |
||||||
|
width: 100%; |
||||||
|
tr { |
||||||
|
height: 40px; |
||||||
|
font-size: 12px; |
||||||
|
th, |
||||||
|
td { |
||||||
|
&:nth-child(1) { |
||||||
|
width: 50px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
th { |
||||||
|
&:nth-child(1) { |
||||||
|
width: 60px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
> span { |
||||||
|
font-size: 12px; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pagination { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,144 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { defineComponent, Ref, toRefs, onMounted, toRef } from 'vue' |
||||||
|
import { |
||||||
|
NIcon, |
||||||
|
NSpace, |
||||||
|
NDataTable, |
||||||
|
NButton, |
||||||
|
NPagination, |
||||||
|
NInput |
||||||
|
} from 'naive-ui' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import { SearchOutlined } from '@vicons/antd' |
||||||
|
import Card from '@/components/card' |
||||||
|
import FolderModal from './components/function-modal' |
||||||
|
import { useTable } from './use-table' |
||||||
|
import styles from './index.module.scss' |
||||||
|
|
||||||
|
export default defineComponent({ |
||||||
|
name: 'function-manage', |
||||||
|
setup() { |
||||||
|
const { variables, getTableData } = useTable() |
||||||
|
|
||||||
|
const requestData = () => { |
||||||
|
getTableData({ |
||||||
|
id: variables.id, |
||||||
|
pageSize: variables.pageSize, |
||||||
|
pageNo: variables.page, |
||||||
|
searchVal: variables.searchVal |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const handleUpdateList = () => { |
||||||
|
requestData() |
||||||
|
} |
||||||
|
|
||||||
|
const handleChangePageSize = () => { |
||||||
|
variables.page = 1 |
||||||
|
requestData() |
||||||
|
} |
||||||
|
|
||||||
|
const handleSearch = () => { |
||||||
|
variables.page = 1 |
||||||
|
requestData() |
||||||
|
} |
||||||
|
|
||||||
|
const handleShowModal = (showRef: Ref<Boolean>) => { |
||||||
|
showRef.value = true |
||||||
|
} |
||||||
|
|
||||||
|
const handleCreateFolder = () => { |
||||||
|
variables.row = {} |
||||||
|
handleShowModal(toRef(variables, 'showRef')) |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
requestData() |
||||||
|
}) |
||||||
|
|
||||||
|
return { |
||||||
|
requestData, |
||||||
|
handleSearch, |
||||||
|
handleUpdateList, |
||||||
|
handleCreateFolder, |
||||||
|
handleChangePageSize, |
||||||
|
...toRefs(variables) |
||||||
|
} |
||||||
|
}, |
||||||
|
render() { |
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
return ( |
||||||
|
<div class={styles.content}> |
||||||
|
<Card class={styles.card}> |
||||||
|
<div class={styles.header}> |
||||||
|
<NSpace> |
||||||
|
<NButton type='primary' onClick={this.handleCreateFolder}> |
||||||
|
{t('resource.function.create_udf_function')} |
||||||
|
</NButton> |
||||||
|
</NSpace> |
||||||
|
<div class={styles.right}> |
||||||
|
<div class={styles.search}> |
||||||
|
<div class={styles.list}> |
||||||
|
<NButton type='primary' onClick={this.handleSearch}> |
||||||
|
<NIcon> |
||||||
|
<SearchOutlined /> |
||||||
|
</NIcon> |
||||||
|
</NButton> |
||||||
|
</div> |
||||||
|
<div class={styles.list}> |
||||||
|
<NInput |
||||||
|
placeholder={t('resource.function.enter_keyword_tips')} |
||||||
|
v-model={[this.searchVal, 'value']} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
<Card title={t('resource.function.udf_function')}> |
||||||
|
<NDataTable |
||||||
|
columns={this.columns} |
||||||
|
data={this.tableData} |
||||||
|
striped |
||||||
|
size={'small'} |
||||||
|
class={styles.table} |
||||||
|
/> |
||||||
|
<div class={styles.pagination}> |
||||||
|
<NPagination |
||||||
|
v-model:page={this.page} |
||||||
|
v-model:page-size={this.pageSize} |
||||||
|
page-count={this.totalPage} |
||||||
|
show-size-picker |
||||||
|
page-sizes={[10, 30, 50]} |
||||||
|
show-quick-jumper |
||||||
|
onUpdatePage={this.requestData} |
||||||
|
onUpdatePageSize={this.handleChangePageSize} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
<FolderModal |
||||||
|
v-model:row={this.row} |
||||||
|
v-model:show={this.showRef} |
||||||
|
onUpdateList={this.handleUpdateList} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
@ -0,0 +1,38 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
export interface IUdfFunctionParam { |
||||||
|
id: number |
||||||
|
pageSize: number |
||||||
|
pageNo: number |
||||||
|
searchVal: string | undefined |
||||||
|
} |
||||||
|
|
||||||
|
export interface IUdf { |
||||||
|
id: number |
||||||
|
userId: number |
||||||
|
type: 'HIVE' |
||||||
|
funcName: string |
||||||
|
className: string |
||||||
|
resourceId: number |
||||||
|
resourceName: string |
||||||
|
argTypes: string |
||||||
|
database: string |
||||||
|
description: string |
||||||
|
createTime: string |
||||||
|
updateTime: string |
||||||
|
} |
@ -0,0 +1,182 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { h, ref, reactive } from 'vue' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import { useRouter } from 'vue-router' |
||||||
|
import type { Router } from 'vue-router' |
||||||
|
import type { TableColumns } from 'naive-ui/es/data-table/src/interface' |
||||||
|
import { NSpace, NTooltip, NButton, NPopconfirm } from 'naive-ui' |
||||||
|
import { EditOutlined, DeleteOutlined } from '@vicons/antd' |
||||||
|
import { useAsyncState } from '@vueuse/core' |
||||||
|
import { |
||||||
|
queryUdfFuncListPaging, |
||||||
|
deleteUdfFunc |
||||||
|
} from '@/service/modules/resources' |
||||||
|
import { IUdfFunctionParam } from './types' |
||||||
|
|
||||||
|
export function useTable() { |
||||||
|
const { t } = useI18n() |
||||||
|
const router: Router = useRouter() |
||||||
|
|
||||||
|
const columns: TableColumns<any> = [ |
||||||
|
{ |
||||||
|
title: t('resource.function.id'), |
||||||
|
key: 'id', |
||||||
|
width: 50, |
||||||
|
render: (_row, index) => index + 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('resource.function.udf_function_name'), |
||||||
|
key: 'funcName' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('resource.function.class_name'), |
||||||
|
key: 'className' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('resource.function.type'), |
||||||
|
key: 'type' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('resource.function.description'), |
||||||
|
key: 'description' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('resource.function.jar_package'), |
||||||
|
key: 'resourceName' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('resource.function.update_time'), |
||||||
|
key: 'updateTime' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: t('resource.function.operation'), |
||||||
|
key: 'operation', |
||||||
|
render: (row) => { |
||||||
|
return h(NSpace, null, { |
||||||
|
default: () => [ |
||||||
|
h( |
||||||
|
NTooltip, |
||||||
|
{}, |
||||||
|
{ |
||||||
|
trigger: () => |
||||||
|
h( |
||||||
|
NButton, |
||||||
|
{ |
||||||
|
circle: true, |
||||||
|
type: 'info', |
||||||
|
size: 'tiny', |
||||||
|
onClick: () => { |
||||||
|
handleEdit(row) |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: () => h(EditOutlined) |
||||||
|
} |
||||||
|
), |
||||||
|
default: () => t('resource.function.edit') |
||||||
|
} |
||||||
|
), |
||||||
|
h( |
||||||
|
NPopconfirm, |
||||||
|
{ |
||||||
|
onPositiveClick: () => { |
||||||
|
handleDelete(row.id) |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
trigger: () => |
||||||
|
h( |
||||||
|
NTooltip, |
||||||
|
{}, |
||||||
|
{ |
||||||
|
trigger: () => |
||||||
|
h( |
||||||
|
NButton, |
||||||
|
{ |
||||||
|
circle: true, |
||||||
|
type: 'error', |
||||||
|
size: 'tiny' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: () => h(DeleteOutlined) |
||||||
|
} |
||||||
|
), |
||||||
|
default: () => t('resource.function.delete') |
||||||
|
} |
||||||
|
), |
||||||
|
default: () => t('resource.function.delete_confirm') |
||||||
|
} |
||||||
|
) |
||||||
|
] |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
const variables = reactive({ |
||||||
|
columns, |
||||||
|
row: {}, |
||||||
|
tableData: [], |
||||||
|
id: ref(Number(router.currentRoute.value.params.id) || -1), |
||||||
|
page: ref(1), |
||||||
|
pageSize: ref(10), |
||||||
|
searchVal: ref(), |
||||||
|
totalPage: ref(1), |
||||||
|
showRef: ref(false) |
||||||
|
}) |
||||||
|
|
||||||
|
const getTableData = (params: IUdfFunctionParam) => { |
||||||
|
const { state } = useAsyncState( |
||||||
|
queryUdfFuncListPaging({ ...params }).then((res: any) => { |
||||||
|
variables.totalPage = res.totalPage |
||||||
|
variables.tableData = res.totalList.map((item: any) => { |
||||||
|
return { ...item } |
||||||
|
}) |
||||||
|
}), |
||||||
|
{ total: 0, table: [] } |
||||||
|
) |
||||||
|
return state |
||||||
|
} |
||||||
|
|
||||||
|
const handleEdit = (row: any) => { |
||||||
|
variables.showRef = true |
||||||
|
variables.row = row |
||||||
|
} |
||||||
|
|
||||||
|
const handleDelete = (id: number) => { |
||||||
|
/* after deleting data from the current page, you need to jump forward when the page is empty. */ |
||||||
|
if (variables.tableData.length === 1 && variables.page > 1) { |
||||||
|
variables.page -= 1 |
||||||
|
} |
||||||
|
|
||||||
|
deleteUdfFunc(id).then(() => |
||||||
|
getTableData({ |
||||||
|
id: variables.id, |
||||||
|
pageSize: variables.pageSize, |
||||||
|
pageNo: variables.page, |
||||||
|
searchVal: variables.searchVal |
||||||
|
}) |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
variables, |
||||||
|
getTableData |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue