Browse Source
* add resource manange * add resource delete * modify rename * support sub udf resource mannage * add Bread * adjust style3.0.0/version-upgrade
Devosend
3 years ago
committed by
GitHub
15 changed files with 1081 additions and 4 deletions
@ -0,0 +1,106 @@
|
||||
/* |
||||
* 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 } from 'vue' |
||||
import { NForm, NFormItem, NInput } from 'naive-ui' |
||||
import { useI18n } from 'vue-i18n' |
||||
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 { folderState: state } = useForm() |
||||
|
||||
const { handleCreateResource, handleRenameResource } = useModal(state, ctx) |
||||
|
||||
const hideModal = () => { |
||||
ctx.emit('update:show') |
||||
} |
||||
|
||||
const handleCreate = () => { |
||||
handleCreateResource() |
||||
} |
||||
|
||||
const handleRename = () => { |
||||
handleRenameResource(props.row.id) |
||||
} |
||||
|
||||
watch( |
||||
() => props.row, |
||||
() => { |
||||
state.folderForm.name = props.row.alias |
||||
state.folderForm.description = props.row.description |
||||
} |
||||
) |
||||
|
||||
return { |
||||
hideModal, |
||||
handleCreate, |
||||
handleRename, |
||||
...toRefs(state) |
||||
} |
||||
}, |
||||
render() { |
||||
const { t } = useI18n() |
||||
|
||||
return ( |
||||
<Modal |
||||
show={this.$props.show} |
||||
title={t('resource.udf.create_folder')} |
||||
onCancel={this.hideModal} |
||||
onConfirm={this.row.id ? this.handleRename : this.handleCreate} |
||||
> |
||||
<NForm |
||||
rules={this.rules} |
||||
ref='folderFormRef' |
||||
label-placement='left' |
||||
label-width='160' |
||||
> |
||||
<NFormItem label={t('resource.udf.folder_name')} path='name'> |
||||
<NInput |
||||
v-model={[this.folderForm.name, 'value']} |
||||
placeholder={t('resource.udf.enter_name_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem label={t('resource.udf.description')} path='description'> |
||||
<NInput |
||||
type='textarea' |
||||
v-model={[this.folderForm.description, 'value']} |
||||
placeholder={t('resource.udf.enter_description_tips')} |
||||
/> |
||||
</NFormItem> |
||||
</NForm> |
||||
</Modal> |
||||
) |
||||
} |
||||
}) |
||||
@ -0,0 +1,106 @@
|
||||
/* |
||||
* 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 } from 'vue' |
||||
import { NForm, NFormItem, NInput, NUpload, NButton, NIcon } from 'naive-ui' |
||||
import { useI18n } from 'vue-i18n' |
||||
import Modal from '@/components/modal' |
||||
import { useForm } from './use-form' |
||||
import { useModal } from './use-modal' |
||||
import { CloudUploadOutlined } from '@vicons/antd' |
||||
|
||||
const props = { |
||||
show: { |
||||
type: Boolean as PropType<boolean>, |
||||
default: false |
||||
} |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'ResourceFileFolder', |
||||
props, |
||||
emits: ['update:show', 'updateList'], |
||||
setup(props, ctx) { |
||||
const { uploadState: state } = useForm() |
||||
const { handleUploadFile } = useModal(state, ctx) |
||||
|
||||
const hideModal = () => { |
||||
ctx.emit('update:show') |
||||
} |
||||
|
||||
const handleFolder = () => { |
||||
handleUploadFile() |
||||
} |
||||
|
||||
const customRequest = ({ file }: any) => { |
||||
state.uploadForm.name = file.name |
||||
state.uploadForm.file = file.file |
||||
} |
||||
|
||||
return { |
||||
hideModal, |
||||
handleFolder, |
||||
customRequest, |
||||
...toRefs(state) |
||||
} |
||||
}, |
||||
render() { |
||||
const { t } = useI18n() |
||||
return ( |
||||
<Modal |
||||
show={this.$props.show} |
||||
title={t('resource.udf.file_upload')} |
||||
onCancel={this.hideModal} |
||||
onConfirm={this.handleFolder} |
||||
> |
||||
<NForm |
||||
rules={this.rules} |
||||
ref='uploadFormRef' |
||||
label-placement='left' |
||||
label-width='160' |
||||
> |
||||
<NFormItem label={t('resource.udf.file_name')} path='name'> |
||||
<NInput |
||||
v-model={[this.uploadForm.name, 'value']} |
||||
placeholder={t('resource.udf.enter_name_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem label={t('resource.udf.description')} path='description'> |
||||
<NInput |
||||
type='textarea' |
||||
v-model={[this.uploadForm.description, 'value']} |
||||
placeholder={t('resource.udf.enter_description_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem label={t('resource.udf.upload_files')} path='file'> |
||||
<NUpload |
||||
v-model={[this.uploadForm.file, 'value']} |
||||
customRequest={this.customRequest} |
||||
> |
||||
<NButton> |
||||
{t('resource.udf.upload')} |
||||
<NIcon> |
||||
<CloudUploadOutlined /> |
||||
</NIcon> |
||||
</NButton> |
||||
</NUpload> |
||||
</NFormItem> |
||||
</NForm> |
||||
</Modal> |
||||
) |
||||
} |
||||
}) |
||||
@ -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. |
||||
*/ |
||||
|
||||
import { reactive, ref } from 'vue' |
||||
import { useI18n } from 'vue-i18n' |
||||
import type { FormRules } from 'naive-ui' |
||||
|
||||
export const useForm = () => { |
||||
const { t } = useI18n() |
||||
|
||||
const folderState = reactive({ |
||||
folderFormRef: ref(), |
||||
folderForm: { |
||||
pid: -1, |
||||
type: 'UDF', |
||||
name: '', |
||||
description: '', |
||||
currentDir: '/' |
||||
}, |
||||
rules: { |
||||
name: { |
||||
required: true, |
||||
trigger: ['input', 'blur'], |
||||
validator() { |
||||
if (folderState.folderForm.name === '') { |
||||
return new Error(t('resource.udf.enter_name_tips')) |
||||
} |
||||
} |
||||
} |
||||
} as FormRules |
||||
}) |
||||
|
||||
const uploadState = reactive({ |
||||
uploadFormRef: ref(), |
||||
uploadForm: { |
||||
name: '', |
||||
file: '', |
||||
description: '', |
||||
pid: -1, |
||||
currentDir: '/' |
||||
}, |
||||
rules: { |
||||
name: { |
||||
required: true, |
||||
trigger: ['input', 'blur'], |
||||
validator() { |
||||
if (uploadState.uploadForm.name === '') { |
||||
return new Error(t('resource.udf.enter_name_tips')) |
||||
} |
||||
} |
||||
} |
||||
} as FormRules |
||||
}) |
||||
|
||||
return { |
||||
folderState, |
||||
uploadState |
||||
} |
||||
} |
||||
@ -0,0 +1,114 @@
|
||||
/* |
||||
* 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 { SetupContext } from 'vue' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { useRouter } from 'vue-router' |
||||
import type { Router } from 'vue-router' |
||||
import { useFileStore } from '@/store/file/file' |
||||
import { |
||||
createDirectory, |
||||
createResource, |
||||
updateResource |
||||
} from '@/service/modules/resources' |
||||
|
||||
export function useModal( |
||||
state: any, |
||||
ctx: SetupContext<('update:show' | 'updateList')[]> |
||||
) { |
||||
const { t } = useI18n() |
||||
const router: Router = useRouter() |
||||
const fileStore = useFileStore() |
||||
|
||||
const handleCreateResource = async () => { |
||||
const pid = router.currentRoute.value.params.id || -1 |
||||
const currentDir = pid === -1 ? '/' : fileStore.getCurrentDir || '/' |
||||
|
||||
submitRequest( |
||||
async () => |
||||
await createDirectory({ |
||||
...state.folderForm, |
||||
...{ pid, currentDir } |
||||
}) |
||||
) |
||||
} |
||||
|
||||
const handleRenameResource = async (id: number) => { |
||||
submitRequest(async () => { |
||||
await updateResource( |
||||
{ |
||||
...state.folderForm, |
||||
...{ id } |
||||
}, |
||||
id |
||||
) |
||||
}) |
||||
} |
||||
|
||||
const submitRequest = (serviceHandle: any) => { |
||||
state.folderFormRef.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 resetUploadForm = () => { |
||||
state.uploadForm.name = '' |
||||
state.uploadForm.file = '' |
||||
state.uploadForm.description = '' |
||||
} |
||||
|
||||
const handleUploadFile = () => { |
||||
state.uploadFormRef.validate(async (valid: any) => { |
||||
const pid = router.currentRoute.value.params.id || -1 |
||||
const currentDir = pid === -1 ? '/' : fileStore.getCurrentDir || '/' |
||||
if (!valid) { |
||||
const formData = new FormData() |
||||
formData.append('file', state.uploadForm.file) |
||||
formData.append('type', 'UDF') |
||||
formData.append('name', state.uploadForm.name) |
||||
formData.append('pid', String(pid)) |
||||
formData.append('currentDir', currentDir) |
||||
formData.append('description', state.uploadForm.description) |
||||
|
||||
try { |
||||
await createResource(formData as any) |
||||
window.$message.success(t('resource.udf.success')) |
||||
ctx.emit('updateList') |
||||
ctx.emit('update:show') |
||||
resetUploadForm() |
||||
} catch (error: any) { |
||||
window.$message.error(error.message) |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
|
||||
return { |
||||
handleCreateResource, |
||||
handleRenameResource, |
||||
handleUploadFile |
||||
} |
||||
} |
||||
@ -0,0 +1,81 @@
|
||||
/* |
||||
* 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; |
||||
} |
||||
|
||||
.links { |
||||
color: #2080f0; |
||||
text-decoration: none; |
||||
&:hover { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,197 @@
|
||||
/* |
||||
* 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, |
||||
NBreadcrumb, |
||||
NBreadcrumbItem |
||||
} from 'naive-ui' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { SearchOutlined } from '@vicons/antd' |
||||
import Card from '@/components/card' |
||||
import FolderModal from './components/folder-modal' |
||||
import UploadModal from './components/upload-modal' |
||||
import { useTable } from './use-table' |
||||
import styles from './index.module.scss' |
||||
|
||||
export default defineComponent({ |
||||
name: 'resource-manage', |
||||
setup() { |
||||
const { variables, getTableData, goUdfManage, goBread } = 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, 'folderShowRef')) |
||||
} |
||||
|
||||
const handleUploadFile = () => { |
||||
handleShowModal(toRef(variables, 'uploadShowRef')) |
||||
} |
||||
|
||||
const handleBread = (index: number) => { |
||||
let breadName = '' |
||||
variables.breadList.forEach((item, i) => { |
||||
if (i <= index) { |
||||
breadName = breadName + '/' + item |
||||
} |
||||
}) |
||||
goBread(breadName) |
||||
} |
||||
|
||||
onMounted(() => { |
||||
requestData() |
||||
}) |
||||
|
||||
return { |
||||
goUdfManage, |
||||
handleBread, |
||||
requestData, |
||||
handleSearch, |
||||
handleUpdateList, |
||||
handleCreateFolder, |
||||
handleUploadFile, |
||||
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.udf.create_folder')} |
||||
</NButton> |
||||
<NButton strong secondary onClick={this.handleUploadFile}> |
||||
{t('resource.udf.upload_udf_resources')} |
||||
</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.udf.enter_keyword_tips')} |
||||
v-model={[this.searchVal, 'value']} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</Card> |
||||
<Card title={t('resource.udf.udf_resources')}> |
||||
{{ |
||||
default: () => ( |
||||
<div> |
||||
<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> |
||||
</div> |
||||
), |
||||
header: () => ( |
||||
<NBreadcrumb separator='>'> |
||||
<NBreadcrumbItem> |
||||
<NButton text onClick={() => this.goUdfManage()}> |
||||
{t('resource.udf.udf_resources')} |
||||
</NButton> |
||||
</NBreadcrumbItem> |
||||
{this.breadList.map((item, index) => ( |
||||
<NBreadcrumbItem> |
||||
<NButton |
||||
text |
||||
disabled={index === this.breadList.length - 1} |
||||
onClick={() => this.handleBread(index)} |
||||
> |
||||
{item} |
||||
</NButton> |
||||
</NBreadcrumbItem> |
||||
))} |
||||
</NBreadcrumb> |
||||
) |
||||
}} |
||||
</Card> |
||||
<FolderModal |
||||
v-model:row={this.row} |
||||
v-model:show={this.folderShowRef} |
||||
onUpdateList={this.handleUpdateList} |
||||
/> |
||||
<UploadModal |
||||
v-model:show={this.uploadShowRef} |
||||
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 IUdfResourceParam { |
||||
id: number |
||||
pageSize: number |
||||
pageNo: number |
||||
searchVal: string | undefined |
||||
} |
||||
|
||||
export interface IUdf { |
||||
id: number |
||||
pid: number |
||||
userId: number |
||||
fileName: string |
||||
fullName: string |
||||
alias: string |
||||
directory: boolean |
||||
size: number |
||||
type: 'UDF' |
||||
description: string |
||||
createTime: string |
||||
updateTime: string |
||||
} |
||||
@ -0,0 +1,279 @@
|
||||
/* |
||||
* 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 { bytesToSize } from '@/utils/common' |
||||
import { useFileStore } from '@/store/file/file' |
||||
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, DownloadOutlined } from '@vicons/antd' |
||||
import { useAsyncState } from '@vueuse/core' |
||||
import { |
||||
queryResourceListPaging, |
||||
downloadResource, |
||||
deleteResource, |
||||
queryResourceById |
||||
} from '@/service/modules/resources' |
||||
import { IUdfResourceParam } from './types' |
||||
import styles from './index.module.scss' |
||||
|
||||
const goSubFolder = (router: Router, item: any) => { |
||||
const fileStore = useFileStore() |
||||
fileStore.setFileInfo(`${item.alias}|${item.size}`) |
||||
|
||||
if (item.directory) { |
||||
fileStore.setCurrentDir(`${item.fullName}`) |
||||
router.push({ name: 'resource-sub-manage', params: { id: item.id } }) |
||||
} |
||||
} |
||||
|
||||
export function useTable() { |
||||
const { t } = useI18n() |
||||
const router: Router = useRouter() |
||||
const fileStore = useFileStore() |
||||
|
||||
const columns: TableColumns<any> = [ |
||||
{ |
||||
title: t('resource.udf.id'), |
||||
key: 'id', |
||||
width: 50, |
||||
render: (_row, index) => index + 1 |
||||
}, |
||||
{ |
||||
title: t('resource.udf.udf_source_name'), |
||||
key: 'alias', |
||||
render: (row) => { |
||||
if (!row.directory) { |
||||
return row.alias |
||||
} else { |
||||
return h( |
||||
'a', |
||||
{ |
||||
href: 'javascript:', |
||||
class: styles.links, |
||||
onClick: () => goSubFolder(router, row) |
||||
}, |
||||
{ |
||||
default: () => { |
||||
return row.alias |
||||
} |
||||
} |
||||
) |
||||
} |
||||
} |
||||
}, |
||||
{ |
||||
title: t('resource.udf.whether_directory'), |
||||
key: 'whether_directory', |
||||
render: (row) => |
||||
row.directory ? t('resource.file.yes') : t('resource.file.no') |
||||
}, |
||||
{ |
||||
title: t('resource.udf.file_name'), |
||||
key: 'fileName' |
||||
}, |
||||
{ |
||||
title: t('resource.udf.file_size'), |
||||
key: 'size', |
||||
render: (row) => bytesToSize(row.size) |
||||
}, |
||||
{ |
||||
title: t('resource.udf.description'), |
||||
key: 'description' |
||||
}, |
||||
{ |
||||
title: t('resource.udf.create_time'), |
||||
key: 'createTime' |
||||
}, |
||||
{ |
||||
title: t('resource.udf.update_time'), |
||||
key: 'updateTime' |
||||
}, |
||||
{ |
||||
title: t('resource.udf.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.udf.edit') |
||||
} |
||||
), |
||||
h( |
||||
NTooltip, |
||||
{}, |
||||
{ |
||||
trigger: () => |
||||
h( |
||||
NButton, |
||||
{ |
||||
circle: true, |
||||
type: 'info', |
||||
size: 'tiny', |
||||
disabled: row?.directory ? true : false, |
||||
onClick: () => downloadResource(row.id) |
||||
}, |
||||
{ |
||||
icon: () => h(DownloadOutlined) |
||||
} |
||||
), |
||||
default: () => t('resource.udf.download') |
||||
} |
||||
), |
||||
h( |
||||
NPopconfirm, |
||||
{ |
||||
onPositiveClick: () => { |
||||
handleDelete(row.id) |
||||
} |
||||
}, |
||||
{ |
||||
trigger: () => |
||||
h( |
||||
NTooltip, |
||||
{}, |
||||
{ |
||||
trigger: () => |
||||
h( |
||||
NButton, |
||||
{ |
||||
circle: true, |
||||
type: 'error', |
||||
size: 'tiny' |
||||
}, |
||||
{ |
||||
icon: () => h(DeleteOutlined) |
||||
} |
||||
), |
||||
default: () => t('resource.udf.delete') |
||||
} |
||||
), |
||||
default: () => t('resource.udf.delete_confirm') |
||||
} |
||||
) |
||||
] |
||||
}) |
||||
} |
||||
} |
||||
] |
||||
|
||||
const variables = reactive({ |
||||
columns, |
||||
row: {}, |
||||
tableData: [], |
||||
breadList: [], |
||||
id: ref(Number(router.currentRoute.value.params.id) || -1), |
||||
page: ref(1), |
||||
pageSize: ref(10), |
||||
searchVal: ref(), |
||||
totalPage: ref(1), |
||||
folderShowRef: ref(false), |
||||
uploadShowRef: ref(false) |
||||
}) |
||||
|
||||
const getTableData = (params: IUdfResourceParam) => { |
||||
const { state } = useAsyncState( |
||||
queryResourceListPaging({ ...params, type: 'UDF' }).then((res: any) => { |
||||
const breadList = |
||||
variables.id === -1 |
||||
? [] |
||||
: (fileStore.getCurrentDir.split('/') as Array<never>) |
||||
breadList.shift() |
||||
|
||||
variables.breadList = breadList |
||||
variables.totalPage = res.totalPage |
||||
variables.tableData = res.totalList.map((item: any) => { |
||||
return { ...item } |
||||
}) |
||||
}), |
||||
{ total: 0, table: [] } |
||||
) |
||||
return state |
||||
} |
||||
|
||||
const handleEdit = (row: any) => { |
||||
variables.folderShowRef = 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 |
||||
} |
||||
|
||||
deleteResource(id).then(() => |
||||
getTableData({ |
||||
id: variables.id, |
||||
pageSize: variables.pageSize, |
||||
pageNo: variables.page, |
||||
searchVal: variables.searchVal |
||||
}) |
||||
) |
||||
} |
||||
|
||||
const goUdfManage = () => { |
||||
router.push({ name: 'resource-manage' }) |
||||
} |
||||
|
||||
const goBread = (fullName: string) => { |
||||
const { id } = variables |
||||
queryResourceById( |
||||
{ |
||||
id, |
||||
type: 'UDF', |
||||
fullName |
||||
}, |
||||
id |
||||
) |
||||
.then((res: any) => { |
||||
fileStore.setCurrentDir(res.fullName) |
||||
router.push({ name: 'resource-sub-manage', params: { id: res.id } }) |
||||
}) |
||||
.catch((error: any) => { |
||||
window.$message.error(error.message) |
||||
}) |
||||
} |
||||
|
||||
return { |
||||
variables, |
||||
getTableData, |
||||
goUdfManage, |
||||
goBread |
||||
} |
||||
} |
||||
Loading…
Reference in new issue